mn-angular-lib 1.0.62 → 1.0.64

package/fesm2022/mn-angular-lib.mjs

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, HostBinding, Input, Component, inject, ChangeDetectionStrategy, signal, APP_INITIALIZER, DestroyRef, SkipSelf, Attribute, Directive, Pipe, ElementRef, Self, EventEmitter, Output, HostListener, ViewChild, forwardRef, Renderer2, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChildren, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
+import { InjectionToken, Injectable, inject, HostBinding, Input, Component, ChangeDetectionStrategy, ApplicationRef, APP_INITIALIZER, Pipe, signal, DestroyRef, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, Output, HostListener, ViewChild, ViewContainerRef, forwardRef, Renderer2, ChangeDetectorRef, TemplateRef, ViewChildren, EnvironmentInjector, createComponent, isSignal } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
 import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, of, takeUntil, map, catchError } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgOptimizedImage, NgTemplateOutlet } from '@angular/common';
 import { tv } from 'tailwind-variants';
-import * as i1$2 from '@angular/forms';
-import { Validators, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import * as i1$1 from '@angular/common/http';
+import * as i2 from '@angular/forms';
+import { NgControl, Validators, FormsModule, NG_VALUE_ACCESSOR, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { HttpClient, HttpErrorResponse, HttpStatusCode, HttpParams } from '@angular/common/http';
 import JSON5 from 'json5';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -46,7 +45,7 @@ class MnAlertStore {
     alerts$ = this._alerts$.asObservable();
     show(partial) {
         // Ensure every alert has a numeric duration: use provided or fall back to per-kind default
-        const computedDuration = partial.duration ?? DEFAULT_MN_ALERT_CONFIG.durations[partial.kind] ?? DEFAULT_MN_ALERT_CONFIG.fallbackDuration;
+        const computedDuration = partial.duration ?? DEFAULT_MN_ALERT_CONFIG.durations[partial.kind ?? ''] ?? DEFAULT_MN_ALERT_CONFIG.fallbackDuration;
         const a = { id: uid(), ...partial, duration: computedDuration };
         this._alerts$.next([...this._alerts$.value, a]);
         if (typeof a.duration === 'number' && a.duration > 0) {
@@ -73,12 +72,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 // projects/mn-angular-lib/src/lib/mn-mn-alert/mn-mn-alert.service.ts
 class MnAlertService {
-    store;
+    store = inject(MnAlertStore);
     cfg;
     userDurations;
     hasUserDurations;
-    constructor(store, cfg) {
-        this.store = store;
+    constructor() {
+        const cfg = inject(MN_ALERT_CONFIG, { optional: true });
         this.userDurations = cfg?.durations;
         this.hasUserDurations = !!cfg?.durations;
         this.cfg = {
@@ -157,18 +156,13 @@ class MnAlertService {
         const variant = extra?.variant;
         return this.show({ title, subTitle, duration: duration, cssClass, icon, meta: extra?.meta, kind: kind, variant });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertService, deps: [{ token: MnAlertStore }, { token: MN_ALERT_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: MnAlertStore }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MN_ALERT_CONFIG]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 const mnAlertVariants = tv({
     base: 'flex items-start gap-3 p-4 border rounded-xl shadow-sm transition-all duration-300 w-full ',
@@ -689,11 +683,11 @@ class MnErrorMessage {
     errorMessage;
     id;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnErrorMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnErrorMessage, isStandalone: true, selector: "lib-mn-error-message", inputs: { errorMessage: "errorMessage", id: "id" }, ngImport: i0, template: "<div [id]=\"id + '-error'\" class=\"text-red-500 mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnErrorMessage, isStandalone: true, selector: "mn-error-message", inputs: { errorMessage: "errorMessage", id: "id" }, ngImport: i0, template: "<div [id]=\"id + '-error'\" class=\"text-red-500 mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnErrorMessage, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-mn-error-message', imports: [], template: "<div [id]=\"id + '-error'\" class=\"text-red-500 mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" }]
+            args: [{ selector: 'mn-error-message', imports: [], template: "<div [id]=\"id + '-error'\" class=\"text-red-500 mt-2 text-sm\">\n  {{ errorMessage }}\n</div>\n" }]
         }], propDecorators: { errorMessage: [{
                 type: Input,
                 args: [{ required: true }]
@@ -706,17 +700,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Types for mn-lib configuration.
  */
 
+/**
+ * Type guard: checks whether a value is a translatable marker object.
+ */
+function isTranslatable(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        typeof value['$translate'] === 'string');
+}
+
 class MnLanguageService {
-    http;
+    http = inject(HttpClient);
+    appRef = inject(ApplicationRef);
     _translations = {};
     _locale$ = new BehaviorSubject('en');
     _urlPattern = null;
     _debug = false;
     /** Observable of the current active locale. */
     locale$ = this._locale$.asObservable();
-    constructor(http) {
-        this.http = http;
-    }
     /** Current active locale. */
     get locale() {
         return this._locale$.value;
@@ -776,6 +777,7 @@ class MnLanguageService {
         }
         await this.loadLocale(locale);
         this._locale$.next(locale);
+        this.appRef.tick();
     }
     /**
      * Register translations for a locale directly from code (no HTTP needed).
@@ -840,30 +842,78 @@ class MnLanguageService {
         const hostname = window.location.hostname;
         return domainLocaleMap[hostname] ?? fallback;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnLanguageService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnLanguageService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnLanguageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+        }] });
 
 /**
- * Type guard: checks whether a value is a translatable marker object.
+ * 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 isTranslatable(value) {
-    return (typeof value === 'object' &&
-        value !== null &&
-        typeof value.$translate === 'string');
+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 = inject(MnLanguageService);
+    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: [], 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,
+                }]
+        }] });
+
 function isPlainObject(value) {
     return (typeof value === 'object' &&
         value !== null &&
         Object.prototype.toString.call(value) === '[object Object]');
 }
 class MnConfigService {
-    http;
+    http = inject(HttpClient);
     _config = null;
     _settings = {};
     _debugMode = false;
@@ -871,9 +921,6 @@ class MnConfigService {
     _configVersion = signal(0, ...(ngDevMode ? [{ debugName: "_configVersion" }] : []));
     configVersion = this._configVersion.asReadonly();
     lang = inject(MnLanguageService);
-    constructor(http) {
-        this.http = http;
-    }
     /** General settings from the config file (version, name, etc.). */
     get settings() {
         return this._settings;
@@ -903,15 +950,15 @@ class MnConfigService {
             json = {};
         }
         const cfg = (isPlainObject(json) ? json : {});
-        const defaults = isPlainObject(cfg.defaults) ? cfg.defaults : {};
-        const overrides = isPlainObject(cfg.overrides) ? cfg.overrides : cfg.overrides ?? {};
-        const settings = isPlainObject(cfg.settings) ? cfg.settings : {};
+        const defaults = isPlainObject(cfg['defaults']) ? cfg['defaults'] : {};
+        const overrides = isPlainObject(cfg['overrides']) ? cfg['overrides'] : {};
+        const settings = isPlainObject(cfg['settings']) ? cfg['settings'] : {};
         this._config = { settings, defaults, overrides };
         this._settings = settings;
         // Bootstrap language service from config if a "language" section is present.
         // This avoids circular dependency: config reads raw language settings and
         // pushes them into the language service (language service never imports config).
-        const langCfg = cfg.language;
+        const langCfg = cfg['language'];
         if (isPlainObject(langCfg) && typeof langCfg['urlPattern'] === 'string') {
             const lc = langCfg;
             if (this._debugMode) {
@@ -1046,13 +1093,13 @@ class MnConfigService {
         }
         return out;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnConfigService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnConfigService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnConfigService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+        }] });
 
 /**
  * Provides an APP_INITIALIZER that loads the mn-lib configuration from the given URL
@@ -1151,6 +1198,7 @@ class MnSectionDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSectionDirective, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector -- kebab-case is intentional: matches the Attribute() token and is stable public API
                     selector: '[mn-section]',
                     standalone: true,
                     providers: [
@@ -1188,6 +1236,7 @@ class MnInstanceDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInstanceDirective, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector -- kebab-case is intentional: matches the Attribute() token and is stable public API
                     selector: '[mn-instance]',
                     standalone: true,
                     providers: [
@@ -1204,66 +1253,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 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
@@ -1297,7 +1286,7 @@ const MN_INPUT_FIELD_CONFIG = new InjectionToken('MN_INPUT_FIELD_CONFIG');
  * ```
  */
 class MnInputField {
-    ngControl;
+    ngControl = inject(NgControl, { optional: true, self: true });
     /** Resolved UI configuration for the input field */
     uiConfig = {};
     el = inject(ElementRef);
@@ -1313,7 +1302,8 @@ class MnInputField {
     /** Whether the input is disabled */
     isDisabled = false;
     /** Callback function to notify Angular forms of value changes */
-    onChange = () => { };
+    onChange = () => {
+    };
     /** Callback function to notify Angular forms when input is touched/blurred */
     onTouched = () => { };
     /**
@@ -1333,10 +1323,8 @@ class MnInputField {
      * Constructor - Registers this component as the ControlValueAccessor
      * for the injected NgControl (FormControl).
      *
-     * @param ngControl - Angular's NgControl (injected via Dependency Injection)
      */
-    constructor(ngControl) {
-        this.ngControl = ngControl;
+    constructor() {
         if (this.ngControl)
             this.ngControl.valueAccessor = this;
     }
@@ -1536,7 +1524,7 @@ class MnInputField {
         }
         // Interpolate {{placeholder}} tokens with error arguments (e.g. {{requiredLength}})
         if (errorArgs && typeof errorArgs === 'object') {
-            return msgDef.replace(/\{\{(\w+)\}\}/g, (_, key) => errorArgs[key] !== undefined ? String(errorArgs[key]) : `{{${key}}}`);
+            return msgDef.replace(/\{\{(\w+)}}/g, (_, key) => errorArgs[key] !== undefined ? String(errorArgs[key]) : `{{${key}}}`);
         }
         return msgDef;
     }
@@ -1588,17 +1576,13 @@ class MnInputField {
             hover: this.props.hover,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInputField, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnInputField, isStandalone: true, selector: "mn-lib-input-field", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInputField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnInputField, isStandalone: true, selector: "mn-lib-input-field", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n    @if (errorMessage !== null) {\n      <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInputField, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-input-field', standalone: true, imports: [CommonModule, NgClass, MnErrorMessage, FormsModule], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n\n      }\n    }\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }], propDecorators: { props: [{
+            args: [{ selector: 'mn-lib-input-field', standalone: true, imports: [CommonModule, NgClass, MnErrorMessage, FormsModule], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n    @if (errorMessage !== null) {\n      <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n\n      }\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
             }] } });
@@ -1745,7 +1729,7 @@ const MN_TEXTAREA_CONFIG = new InjectionToken('MN_TEXTAREA_CONFIG');
  * ```
  */
 class MnTextarea {
-    ngControl;
+    ngControl = inject(NgControl, { optional: true, self: true });
     /** Resolved UI configuration for the textarea */
     uiConfig = {};
     el = inject(ElementRef);
@@ -1761,7 +1745,8 @@ class MnTextarea {
     /** Whether the textarea is disabled */
     isDisabled = false;
     /** Callback function to notify Angular forms of value changes */
-    onChange = () => { };
+    onChange = () => {
+    };
     /** Callback function to notify Angular forms when textarea is touched/blurred */
     onTouched = () => { };
     /**
@@ -1778,10 +1763,8 @@ class MnTextarea {
      * Constructor - Registers this component as the ControlValueAccessor
      * for the injected NgControl (FormControl).
      *
-     * @param ngControl - Angular's NgControl (injected via Dependency Injection)
      */
-    constructor(ngControl) {
-        this.ngControl = ngControl;
+    constructor() {
         if (this.ngControl)
             this.ngControl.valueAccessor = this;
     }
@@ -1922,8 +1905,8 @@ class MnTextarea {
             return msgDef(errorArgs, errors);
         }
         // Interpolate {{placeholder}} tokens with validation error args
-        if (typeof msgDef === 'string' && errorArgs && typeof errorArgs === 'object') {
-            return msgDef.replace(/\{\{(\w+)\}\}/g, (_, key) => errorArgs[key] ?? _);
+        if (errorArgs && typeof errorArgs === 'object') {
+            return msgDef.replace(/\{\{(\w+)}}/g, (_, key) => errorArgs[key] ?? _);
         }
         return msgDef;
     }
@@ -1973,17 +1956,13 @@ class MnTextarea {
             resize: this.props.resize,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTextarea, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTextarea, isStandalone: true, selector: "mn-lib-textarea", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Textarea Element -->\n  <textarea\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.rows]=\"props.rows ?? null\"\n    [attr.cols]=\"props.cols ?? null\"\n    [ngClass]=\"textareaClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  >{{ value ?? '' }}</textarea>\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTextarea, isStandalone: true, selector: "mn-lib-textarea", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Textarea Element -->\n  <textarea\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.rows]=\"props.rows ?? null\"\n    [attr.cols]=\"props.cols ?? null\"\n    [ngClass]=\"textareaClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  >{{ value ?? '' }}</textarea>\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n    @if (errorMessage !== null) {\n      <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTextarea, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-textarea', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Textarea Element -->\n  <textarea\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.rows]=\"props.rows ?? null\"\n    [attr.cols]=\"props.cols ?? null\"\n    [ngClass]=\"textareaClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  >{{ value ?? '' }}</textarea>\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }], propDecorators: { props: [{
+            args: [{ selector: 'mn-lib-textarea', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Textarea Element -->\n  <textarea\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.rows]=\"props.rows ?? null\"\n    [attr.cols]=\"props.cols ?? null\"\n    [ngClass]=\"textareaClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  >{{ value ?? '' }}</textarea>\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n    @if (errorMessage !== null) {\n      <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
             }] } });
@@ -2032,7 +2011,7 @@ const mnCheckboxWrapperVariants = tv({
 
 const MN_CHECKBOX_CONFIG = new InjectionToken('MN_CHECKBOX_CONFIG');
 class MnCheckbox {
-    ngControl;
+    ngControl = inject(NgControl, { optional: true, self: true });
     uiConfig = {};
     props;
     /** Direct checked binding for non-form usage */
@@ -2046,13 +2025,13 @@ class MnCheckbox {
     destroyRef = inject(DestroyRef);
     value = false;
     isDisabled = false;
-    onChange = () => { };
+    onChange = () => {
+    };
     onTouched = () => { };
     builtInErrorMessages = {
         required: 'This field is required',
     };
-    constructor(ngControl) {
-        this.ngControl = ngControl;
+    constructor() {
         if (this.ngControl)
             this.ngControl.valueAccessor = this;
     }
@@ -2167,17 +2146,13 @@ class MnCheckbox {
             hover: this.props.hover,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCheckbox, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCheckbox, isStandalone: true, selector: "mn-lib-checkbox", inputs: { props: "props", checked: "checked" }, outputs: { checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col items-center\">\n  <label [attr.for]=\"resolvedId\" [ngClass]=\"wrapperClasses\"\n         class=\"flex flex-row items-center gap-x-2 select-none cursor-pointer\">\n    <input\n      type=\"checkbox\"\n      class=\"checkbox checkbox-primary\"\n      [id]=\"resolvedId\"\n      [attr.name]=\"resolvedName\"\n      [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n      [attr.aria-invalid]=\"showError || null\"\n      [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"flex flex-row items-center gap-x-0.5\">\n        <span>{{ uiConfig.label || props.label }}</span>\n        @if (isRequired()) {\n          <span class=\"text-red-500\">*</span>\n        }\n      </span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCheckbox, isStandalone: true, selector: "mn-lib-checkbox", inputs: { props: "props", checked: "checked" }, outputs: { checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col items-center\">\n  <label [attr.for]=\"resolvedId\" [ngClass]=\"wrapperClasses\"\n         class=\"flex flex-row items-center gap-x-2 select-none cursor-pointer\">\n    <input\n      type=\"checkbox\"\n      class=\"checkbox checkbox-primary\"\n      [id]=\"resolvedId\"\n      [attr.name]=\"resolvedName\"\n      [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n      [attr.aria-invalid]=\"showError || null\"\n      [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"flex flex-row items-center gap-x-0.5\">\n        <span>{{ uiConfig.label || props.label }}</span>\n        @if (isRequired()) {\n          <span class=\"text-red-500\">*</span>\n        }\n      </span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-checkbox', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col items-center\">\n  <label [attr.for]=\"resolvedId\" [ngClass]=\"wrapperClasses\"\n         class=\"flex flex-row items-center gap-x-2 select-none cursor-pointer\">\n    <input\n      type=\"checkbox\"\n      class=\"checkbox checkbox-primary\"\n      [id]=\"resolvedId\"\n      [attr.name]=\"resolvedName\"\n      [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n      [attr.aria-invalid]=\"showError || null\"\n      [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"flex flex-row items-center gap-x-0.5\">\n        <span>{{ uiConfig.label || props.label }}</span>\n        @if (isRequired()) {\n          <span class=\"text-red-500\">*</span>\n        }\n      </span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }], propDecorators: { props: [{
+            args: [{ selector: 'mn-lib-checkbox', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col items-center\">\n  <label [attr.for]=\"resolvedId\" [ngClass]=\"wrapperClasses\"\n         class=\"flex flex-row items-center gap-x-2 select-none cursor-pointer\">\n    <input\n      type=\"checkbox\"\n      class=\"checkbox checkbox-primary\"\n      [id]=\"resolvedId\"\n      [attr.name]=\"resolvedName\"\n      [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n      [attr.aria-invalid]=\"showError || null\"\n      [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"flex flex-row items-center gap-x-0.5\">\n        <span>{{ uiConfig.label || props.label }}</span>\n        @if (isRequired()) {\n          <span class=\"text-red-500\">*</span>\n        }\n      </span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
             }], checked: [{
@@ -2224,7 +2199,7 @@ const mnDatetimeVariants = tv({
 
 const MN_DATETIME_CONFIG = new InjectionToken('MN_DATETIME_CONFIG');
 class MnDatetime {
-    ngControl;
+    ngControl = inject(NgControl, { optional: true, self: true });
     uiConfig = {};
     props;
     configService = inject(MnConfigService);
@@ -2234,15 +2209,15 @@ class MnDatetime {
     destroyRef = inject(DestroyRef);
     value = null;
     isDisabled = false;
-    onChange = () => { };
+    onChange = () => {
+    };
     onTouched = () => { };
     builtInErrorMessages = {
         required: 'This field is required',
         mnMin: (args) => `Date/time must be from ${args.min} onwards`,
         mnMax: (args) => `Date/time must be up to ${args.max}`,
     };
-    constructor(ngControl) {
-        this.ngControl = ngControl;
+    constructor() {
         if (this.ngControl)
             this.ngControl.valueAccessor = this;
     }
@@ -2366,17 +2341,13 @@ class MnDatetime {
             hover: this.props.hover,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDatetime, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDatetime, isStandalone: true, selector: "mn-lib-datetime", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"dateInput.showPicker()\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDatetime, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDatetime, isStandalone: true, selector: "mn-lib-datetime", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"dateInput.showPicker()\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDatetime, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-datetime', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"dateInput.showPicker()\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }], propDecorators: { props: [{
+            args: [{ selector: 'mn-lib-datetime', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <input\n    #dateInput\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (click)=\"dateInput.showPicker()\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
             }] } });
@@ -2415,7 +2386,7 @@ const mnMultiSelectVariants = tv({
 
 const MN_MULTI_SELECT_CONFIG = new InjectionToken('MN_MULTI_SELECT_CONFIG');
 class MnMultiSelect {
-    ngControl;
+    ngControl = inject(NgControl, { optional: true, self: true });
     uiConfig = {};
     props;
     configService = inject(MnConfigService);
@@ -2433,13 +2404,13 @@ class MnMultiSelect {
     searchTerm = '';
     /** Dropdown position calculated from trigger bounding rect */
     dropdownStyle = { top: '0px', left: '0px', width: '0px' };
-    onChange = () => { };
+    onChange = () => {
+    };
     onTouched = () => { };
     builtInErrorMessages = {
         required: 'At least one option must be selected',
     };
-    constructor(ngControl) {
-        this.ngControl = ngControl;
+    constructor() {
         if (this.ngControl)
             this.ngControl.valueAccessor = this;
     }
@@ -2622,17 +2593,13 @@ class MnMultiSelect {
             fullWidth: this.props.fullWidth,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-[1.5rem]\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <span class=\"inline-flex items-center gap-x-1 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            {{ opt.label }}\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"text-base-content/50 hover:text-base-content cursor-pointer\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            >\u00D7</button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg class=\"w-4 h-4 text-base-content/50\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <div\n      class=\"fixed z-[9999] bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto\"\n      [style.top]=\"dropdownStyle.top\"\n      [style.left]=\"dropdownStyle.left\"\n      [style.width]=\"dropdownStyle.width\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-base-300\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-base-300 rounded-md outline-none focus:border-brand-500 bg-base-200 text-base-content placeholder-base-content/50\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer text-base-content hover:bg-base-200\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-brand-500 pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-base-content/50\">{{ uiConfig.noOptionsFound || 'No options found' }}</div>\n        }\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-[1.5rem]\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span class=\"inline-flex items-center gap-x-1 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            {{ opt.label }}\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"text-base-content/50 hover:text-base-content cursor-pointer\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            >\u00C3\u2014</button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg class=\"w-4 h-4 text-base-content/50\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <div\n      [id]=\"resolvedId + '-listbox'\"\n      aria-multiselectable=\"true\"\n      role=\"listbox\"\n      class=\"fixed z-[9999] bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto\"\n      [style.top]=\"dropdownStyle.top\"\n      [style.left]=\"dropdownStyle.left\"\n      [style.width]=\"dropdownStyle.width\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-base-300\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-base-300 rounded-md outline-none focus:border-brand-500 bg-base-200 text-base-content placeholder-base-content/50\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            (keyup.enter)=\"toggleOption(opt)\"\n            (keyup.space)=\"toggleOption(opt)\"\n            [attr.aria-selected]=\"isSelected(opt)\"\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer text-base-content hover:bg-base-200\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n            role=\"option\"\n            tabindex=\"0\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-brand-500 pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-base-content/50\">{{ uiConfig.noOptionsFound || 'No options found' }}</div>\n        }\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, MnErrorMessage, MnButton], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-[1.5rem]\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <span class=\"inline-flex items-center gap-x-1 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            {{ opt.label }}\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"text-base-content/50 hover:text-base-content cursor-pointer\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            >\u00D7</button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg class=\"w-4 h-4 text-base-content/50\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <div\n      class=\"fixed z-[9999] bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto\"\n      [style.top]=\"dropdownStyle.top\"\n      [style.left]=\"dropdownStyle.left\"\n      [style.width]=\"dropdownStyle.width\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-base-300\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-base-300 rounded-md outline-none focus:border-brand-500 bg-base-200 text-base-content placeholder-base-content/50\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer text-base-content hover:bg-base-200\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-brand-500 pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-base-content/50\">{{ uiConfig.noOptionsFound || 'No options found' }}</div>\n        }\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }], propDecorators: { props: [{
+            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, MnErrorMessage, MnButton], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-[1.5rem]\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span class=\"inline-flex items-center gap-x-1 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            {{ opt.label }}\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"text-base-content/50 hover:text-base-content cursor-pointer\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            >\u00C3\u2014</button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg class=\"w-4 h-4 text-base-content/50\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n    <div\n      [id]=\"resolvedId + '-listbox'\"\n      aria-multiselectable=\"true\"\n      role=\"listbox\"\n      class=\"fixed z-[9999] bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto\"\n      [style.top]=\"dropdownStyle.top\"\n      [style.left]=\"dropdownStyle.left\"\n      [style.width]=\"dropdownStyle.width\"\n      (click)=\"$event.stopPropagation()\"\n    >\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-base-300\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-base-300 rounded-md outline-none focus:border-brand-500 bg-base-200 text-base-content placeholder-base-content/50\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            (keyup.enter)=\"toggleOption(opt)\"\n            (keyup.space)=\"toggleOption(opt)\"\n            [attr.aria-selected]=\"isSelected(opt)\"\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer text-base-content hover:bg-base-200\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n            role=\"option\"\n            tabindex=\"0\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-brand-500 pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-base-content/50\">{{ uiConfig.noOptionsFound || 'No options found' }}</div>\n        }\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
             }], triggerRef: [{
@@ -2683,7 +2650,7 @@ const mnSelectVariants = tv({
 
 const MN_SELECT_CONFIG = new InjectionToken('MN_SELECT_CONFIG');
 class MnSelect {
-    ngControl;
+    ngControl = inject(NgControl, { optional: true, self: true });
     props;
     /** Currently selected value */
     selectedValue = null;
@@ -2697,8 +2664,7 @@ class MnSelect {
     builtInErrorMessages = {
         required: 'Please select an option',
     };
-    constructor(ngControl) {
-        this.ngControl = ngControl;
+    constructor() {
         if (this.ngControl)
             this.ngControl.valueAccessor = this;
     }
@@ -2833,17 +2799,13 @@ class MnSelect {
         }
         return msgDef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSelect, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnSelect, isStandalone: true, selector: "mn-lib-select", inputs: { props: "props" }, ngImport: i0, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col h-full\">\n  @if (uiConfig.label || props.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <select\n    (blur)=\"handleBlur()\"\n    (change)=\"onSelectChange($event)\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [disabled]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [name]=\"resolvedName\"\n    [ngClass]=\"selectClasses\"\n  >\n    @if (props.placeholder || uiConfig.placeholder) {\n      <option [selected]=\"selectedValue == null\" [value]=\"''\" disabled>\n        {{ uiConfig.placeholder || props.placeholder }}\n      </option>\n    }\n    @for (opt of props.options; track opt.value) {\n      <option\n        [disabled]=\"opt.disabled\"\n        [selected]=\"isSelected(opt)\"\n        [value]=\"optionIndex(opt)\"\n      >{{ opt.label }}\n      </option>\n    }\n  </select>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnSelect, isStandalone: true, selector: "mn-lib-select", inputs: { props: "props" }, ngImport: i0, template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col h-full\">\n  @if (uiConfig.label || props.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <select\n    (blur)=\"handleBlur()\"\n    (change)=\"onSelectChange($event)\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [disabled]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [name]=\"resolvedName\"\n    [ngClass]=\"selectClasses\"\n  >\n    @if (props.placeholder || uiConfig.placeholder) {\n      <option [selected]=\"selectedValue === null\" [value]=\"''\" disabled>\n        {{ uiConfig.placeholder || props.placeholder }}\n      </option>\n    }\n    @for (opt of props.options; track opt.value) {\n      <option\n        [disabled]=\"opt.disabled\"\n        [selected]=\"isSelected(opt)\"\n        [value]=\"optionIndex(opt)\"\n      >{{ opt.label }}\n      </option>\n    }\n  </select>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-select', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col h-full\">\n  @if (uiConfig.label || props.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <select\n    (blur)=\"handleBlur()\"\n    (change)=\"onSelectChange($event)\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [disabled]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [name]=\"resolvedName\"\n    [ngClass]=\"selectClasses\"\n  >\n    @if (props.placeholder || uiConfig.placeholder) {\n      <option [selected]=\"selectedValue == null\" [value]=\"''\" disabled>\n        {{ uiConfig.placeholder || props.placeholder }}\n      </option>\n    }\n    @for (opt of props.options; track opt.value) {\n      <option\n        [disabled]=\"opt.disabled\"\n        [selected]=\"isSelected(opt)\"\n        [value]=\"optionIndex(opt)\"\n      >{{ opt.label }}\n      </option>\n    }\n  </select>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }], propDecorators: { props: [{
+            args: [{ selector: 'mn-lib-select', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div [class.is-fullwidth]=\"props.fullWidth\" class=\"flex flex-col h-full\">\n  @if (uiConfig.label || props.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <select\n    (blur)=\"handleBlur()\"\n    (change)=\"onSelectChange($event)\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [disabled]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    [name]=\"resolvedName\"\n    [ngClass]=\"selectClasses\"\n  >\n    @if (props.placeholder || uiConfig.placeholder) {\n      <option [selected]=\"selectedValue === null\" [value]=\"''\" disabled>\n        {{ uiConfig.placeholder || props.placeholder }}\n      </option>\n    }\n    @for (opt of props.options; track opt.value) {\n      <option\n        [disabled]=\"opt.disabled\"\n        [selected]=\"isSelected(opt)\"\n        [value]=\"optionIndex(opt)\"\n      >{{ opt.label }}\n      </option>\n    }\n  </select>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
             }] } });
@@ -3098,8 +3060,7 @@ class FormLayoutBuilder {
             fields: [],
             rows: [],
         };
-        const groupBuilder = new FormLayoutBuilder(groupConfig, {});
-        // Overwrite the groupBuilder's parent to itself for proper chaining within the group
+        const groupBuilder = new FormLayoutBuilder(groupConfig, null);
         groupBuilder.parent = groupBuilder;
         buildFn(groupBuilder);
         groupBuilder.flushCurrentRow();
@@ -3154,7 +3115,6 @@ class FormLayoutBuilder {
      * Set the field to be focused when the form initializes.
      */
     focus(key) {
-        // Clear autoFocus from other fields first to ensure only one is focused
         this.config.fields?.forEach(f => {
             f.autoFocus = false;
         });
@@ -3173,8 +3133,8 @@ class FormLayoutBuilder {
      * Wraps a field with a fluent API for validation.
      */
     fieldWithValidators(field) {
-        const fieldAny = field;
-        fieldAny.validators = fieldAny.validators || [];
+        const fieldWithV = field;
+        fieldWithV.validators = fieldWithV.validators || [];
         this.field(field);
         return new FieldValidatorBuilder(field, this.parent);
     }
@@ -3203,7 +3163,7 @@ class FieldValidatorBuilder {
         this.parent = parent;
         this.field.validators = this.field.validators || [];
     }
-    required(message) {
+    required(_message) {
         this.field.validators.push(Validators.required);
         return this;
     }
@@ -3274,80 +3234,48 @@ class StepBuilder {
         this.config.validators = validators;
         return this;
     }
-    /**
-     * Add a field to this step. This is the single API for all field types.
-     *
-     * @example
-     * s.field({ kind: FieldKind.TEXT, key: 'email', label: 'Email', validators: [Validators.required] })
-     * s.field({ kind: FieldKind.SELECT, key: 'role', label: 'Role', options: [...] })
-     */
     field(field) {
         return this.layoutBuilder.field(field);
     }
-    /**
-     * Start a new row with the specified number of columns.
-     * All subsequent `addToRow()` calls will add fields to this row.
-     */
     row(columns = 2) {
         return this.layoutBuilder.row(columns);
     }
-    /**
-     * Add a field to the current row started by `row()`.
-     */
     addToRow(field, span = 1) {
         return this.layoutBuilder.addToRow(field, span);
     }
-    /**
-     * Declarative way to add a row.
-     */
     addRow(columns, buildFn) {
         return this.layoutBuilder.addRow(columns, buildFn);
     }
     fieldGroup(arg1, arg2, arg3) {
-        return this.layoutBuilder.fieldGroup(arg1, arg2, arg3);
+        if (typeof arg1 !== 'string') {
+            return this.layoutBuilder.fieldGroup(arg1);
+        }
+        if (typeof arg2 === 'string') {
+            return this.layoutBuilder.fieldGroup(arg1, arg2, arg3);
+        }
+        return this.layoutBuilder.fieldGroup(arg1, arg2);
     }
-    /**
-     * Add form-level validators for cross-field validation within this step.
-     */
     formValidators(validators) {
         return this.layoutBuilder.formValidators(validators);
     }
-    /**
-     * Add Angular FormGroup-level validators for this step.
-     */
     groupValidators(validators) {
         return this.layoutBuilder.groupValidators(validators);
     }
-    /**
-     * Set initial values for fields in this step.
-     */
     initialValue(value) {
         return this.layoutBuilder.initialValue(value);
     }
-    /**
-     * Set a visibility condition for this step based on aggregated wizard data.
-     */
     visible(condition) {
         this.config.visible = condition;
         return this;
     }
-    /**
-     * Set a custom label for the 'Next' button on this step.
-     */
     nextLabel(label) {
         this.config.nextLabel = label;
         return this;
     }
-    /**
-     * Set a custom label for the 'Back' button on this step.
-     */
     backLabel(label) {
         this.config.backLabel = label;
         return this;
     }
-    /**
-     * Hide the 'Back' button on this step.
-     */
     hideBack(hide = true) {
         this.config.hideBack = hide;
         return this;
@@ -3363,7 +3291,6 @@ class BaseModalBuilder {
     layoutBuilder;
     constructor(initialConfig) {
         this.config = initialConfig;
-        // Base layout builder, we pass this.config directly if it supports it
         this.layoutBuilder = new FormLayoutBuilder(this.config, this);
     }
     title(title) {
@@ -3485,7 +3412,16 @@ class BaseModalBuilder {
         return this.layoutBuilder.addRow(columns, buildFn);
     }
     fieldGroup(arg1, arg2, arg3) {
-        return this.layoutBuilder.fieldGroup(arg1, arg2, arg3);
+        if (typeof arg1 !== 'string') {
+            return this.layoutBuilder.fieldGroup(arg1);
+        }
+        if (typeof arg2 === 'string') {
+            return this.layoutBuilder.fieldGroup(arg1, arg2, arg3);
+        }
+        return this.layoutBuilder.fieldGroup(arg1, arg2);
+    }
+    groupValidators(validators) {
+        return this.layoutBuilder.groupValidators(validators);
     }
     build() {
         this.layoutBuilder.flushCurrentRow();
@@ -3515,24 +3451,6 @@ class WizardModalBuilder extends BaseModalBuilder {
     description(_description) {
         return this;
     }
-    body(body) {
-        return super.body(body);
-    }
-    field(field) {
-        return super.field(field);
-    }
-    row(columns = 2) {
-        return super.row(columns);
-    }
-    addToRow(field, span = 1) {
-        return super.addToRow(field, span);
-    }
-    addRow(columns, buildFn) {
-        return super.addRow(columns, buildFn);
-    }
-    fieldGroup(arg1, arg2, arg3) {
-        return super.fieldGroup(arg1, arg2, arg3);
-    }
     step(step) {
         if (typeof step === 'function') {
             const builder = new StepBuilder('', '');
@@ -3583,21 +3501,9 @@ class FormModalBuilder extends BaseModalBuilder {
             rows: [],
         });
     }
-    body(body) {
-        return super.body(body);
-    }
     field(field) {
         return super.field(field);
     }
-    row(columns = 2) {
-        return super.row(columns);
-    }
-    addToRow(field, span = 1) {
-        return super.addToRow(field, span);
-    }
-    addRow(columns, buildFn) {
-        return super.addRow(columns, buildFn);
-    }
     layout(mode) {
         this.config.layout = mode;
         return this;
@@ -3619,9 +3525,6 @@ class FormModalBuilder extends BaseModalBuilder {
     groupValidators(validators) {
         return this.layoutBuilder.groupValidators(validators);
     }
-    fieldGroup(arg1, arg2, arg3) {
-        return super.fieldGroup(arg1, arg2, arg3);
-    }
     build() {
         return super.build();
     }
@@ -3652,24 +3555,6 @@ class ConfirmationModalBuilder extends BaseModalBuilder {
         this.config.cancel = action;
         return this;
     }
-    body(body) {
-        return super.body(body);
-    }
-    field(field) {
-        return super.field(field);
-    }
-    row(columns = 2) {
-        return super.row(columns);
-    }
-    addToRow(field, span = 1) {
-        return super.addToRow(field, span);
-    }
-    addRow(columns, buildFn) {
-        return super.addRow(columns, buildFn);
-    }
-    fieldGroup(arg1, arg2, arg3) {
-        return super.fieldGroup(arg1, arg2, arg3);
-    }
     initialValue(value) {
         return this.layoutBuilder.initialValue(value);
     }
@@ -3756,15 +3641,13 @@ class MnModalRef {
 }
 
 class MnCustomFieldHostDirective {
-    vcr;
+    vcr = inject(ViewContainerRef);
     component;
     inputs;
     componentRef;
-    onChange = () => { };
+    onChange = () => {
+    };
     onTouched = () => { };
-    constructor(vcr) {
-        this.vcr = vcr;
-    }
     ngOnInit() {
         if (!this.component)
             return;
@@ -3806,7 +3689,7 @@ class MnCustomFieldHostDirective {
             instance.setDisabledState(isDisabled);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCustomFieldHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCustomFieldHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnCustomFieldHostDirective, isStandalone: true, selector: "[mnCustomFieldHost]", inputs: { component: "component", inputs: "inputs" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -3828,7 +3711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { component: [{
+        }], propDecorators: { component: [{
                 type: Input
             }], inputs: [{
                 type: Input
@@ -4312,9 +4195,7 @@ class MnTable {
         return column.key;
     };
     // ── Table CSS classes ──
-    get tableClasses() {
-        return 'w-full border-collapse overflow-y-hidden';
-    }
+    tableClasses = 'w-full border-collapse overflow-y-hidden';
     get totalColumnCount() {
         let count = this.dataSource.columns.length;
         if (this.hasSelection)
@@ -4425,7 +4306,7 @@ class MnTable {
         this.selectionChange.emit(rows);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", inputs: { dataSource: "dataSource" }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick" }, ngImport: i0, template: "<!-- Toolbar: custom toolbar template + search -->\n<div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n  <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n  </div>\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              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            class=\"text-sm px-2 py-1 md:px-4 md:py-2 whitespace-nowrap\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row -->\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                  <mn-lib-select\n                    (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                    [ngModel]=\"columnFilters[column.key] ?? ''\"\n                    [props]=\"{\n                      id: 'mn-table-filter-' + column.key,\n                      options: getFilterSelectOptions(column),\n                      size: 'sm',\n                      fullWidth: true\n                    }\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></mn-lib-select>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      @if (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 (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggleRow(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                class=\"text-xs px-2 py-1 md:px-4 md:py-2\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"column.width ?? null\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      mnButton\n      [data]=\"{ size: 'md', variant: 'outline', color: 'primary' }\"\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-center md:justify-between px-2 py-3 text-sm text-base-content\">\n    <div class=\"hidden md:flex items-center gap-2\">\n      <span>{{ dataSource.labels?.rowsPerPage || 'Rows:' }}</span>\n      <mn-lib-select\n        (ngModelChange)=\"onPageSizeChange($event)\"\n        [ngModel]=\"pageSize\"\n        [props]=\"{\n          id: 'mn-table-page-size',\n          options: pageSizeSelectOptions,\n          size: 'sm'\n        }\"\n      ></mn-lib-select>\n    </div>\n\n    <div class=\"flex items-center gap-1\">\n      <span class=\"text-xs mr-2 hidden md:inline\">{{ (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: page === currentPage ? 'primary' : 'gray' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\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", 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: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { 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 });
+    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: custom toolbar template + search -->\n<div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center justify-between gap-2 mb-3\">\n  <div class=\"flex items-center gap-2 w-full min-[375px]:w-auto\">\n    @if (dataSource.toolbarLeftTemplate) {\n      <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarLeftTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n  <div class=\"flex flex-col min-[375px]:flex-row min-[375px]:items-center gap-2 w-full min-[375px]:flex-1 min-[480px]:flex-none min-[480px]:w-auto\">\n    @if (dataSource.canSearch) {\n      <mn-lib-input-field\n        class=\"w-full min-[375px]:flex-1 min-[480px]:max-w-64\"\n        [props]=\"{\n            id: 'mn-table-search',\n            type: 'search',\n            label: '',\n            placeholder: dataSource.searchPlaceholder ?? 'Search...',\n            size: 'sm',\n            borderRadius: 'md',\n            fullWidth: true\n          }\"\n        [ngModel]=\"searchValue\"\n        (ngModelChange)=\"onSearch($event)\"\n      ></mn-lib-input-field>\n    }\n    @if (dataSource.toolbarRightTemplate) {\n      <div class=\"flex flex-col w-full min-[375px]:w-auto min-[375px]:flex-row\">\n        <ng-container [ngTemplateOutlet]=\"dataSource.toolbarRightTemplate\"></ng-container>\n      </div>\n    }\n  </div>\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              <mn-lib-checkbox\n                (checkedChange)=\"toggleAll()\"\n                [checked]=\"allSelected\"\n                [props]=\"{ id: 'mn-table-select-all', size: 'sm' }\"\n              ></mn-lib-checkbox>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            class=\"text-sm px-2 py-1 md:px-4 md:py-2 whitespace-nowrap\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [mnHiddenBelow]=\"column.hiddenBelow\"\n            [style.width]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row -->\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                  <mn-lib-select\n                    (ngModelChange)=\"onColumnFilter(column.key, $event)\"\n                    [ngModel]=\"columnFilters[column.key] ?? ''\"\n                    [props]=\"{\n                      id: 'mn-table-filter-' + column.key,\n                      options: getFilterSelectOptions(column),\n                      size: 'sm',\n                      fullWidth: true\n                    }\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></mn-lib-select>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      @if (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 (click)=\"$event.stopPropagation()\" class=\"w-10 text-center px-2 py-2\">\n                <mn-lib-checkbox\n                  (checkedChange)=\"toggleRow(row)\"\n                  [checked]=\"isSelected(row)\"\n                  [props]=\"{ id: 'mn-table-row-' + $index, size: 'sm' }\"\n                ></mn-lib-checkbox>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                class=\"text-xs px-2 py-1 md:px-4 md:py-2\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [mnHiddenBelow]=\"column.hiddenBelow\"\n                [style.width]=\"column.width ?? null\"\n              >\n                @if (column.cellSm) {\n                  <!-- Default cell: hidden below the cellSm breakpoint -->\n                  <span [mnShowAbove]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellValue(column, row) }}\n                    }\n                  </span>\n                  <!-- Small cell: shown only below the cellSm breakpoint -->\n                  <span [mnShowBelow]=\"column.cellSm.below\">\n                    @if (isTemplateRef(column.cellSm.cell)) {\n                      <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                    [ngTemplateOutlet]=\"$any(column.cellSm.cell)\"></ng-container>\n                    } @else {\n                      {{ getCellSmValue(column, row) }}\n                    }\n                  </span>\n                } @else {\n                  @if (isTemplateRef(column.cell)) {\n                    <ng-container [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"\n                                  [ngTemplateOutlet]=\"$any(column.cell)\"></ng-container>\n                  } @else {\n                    {{ getCellValue(column, row) }}\n                  }\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      mnButton\n      [data]=\"{ size: 'md', variant: 'outline', color: 'primary' }\"\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-center md:justify-between px-2 py-3 text-sm text-base-content\">\n    <div class=\"hidden md:flex items-center gap-2\">\n      <span>{{ dataSource.labels?.rowsPerPage || 'Rows:' }}</span>\n      <mn-lib-select\n        (ngModelChange)=\"onPageSizeChange($event)\"\n        [ngModel]=\"pageSize\"\n        [props]=\"{\n          id: 'mn-table-page-size',\n          options: pageSizeSelectOptions,\n          size: 'sm'\n        }\"\n      ></mn-lib-select>\n    </div>\n\n    <div class=\"flex items-center gap-1\">\n      <span class=\"text-xs mr-2 hidden md:inline\">{{ (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: page === currentPage ? 'primary' : 'gray' }\"\n          class=\"px-2.5 py-1 rounded underline underline-offset-2 transition-colors text-xs\"\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", 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: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "directive", type: MnHiddenBelowDirective, selector: "[mnHiddenBelow]", inputs: ["mnHiddenBelow"] }, { kind: "directive", type: MnShowAboveDirective, selector: "[mnShowAbove]", inputs: ["mnShowAbove"] }, { kind: "directive", type: MnShowBelowDirective, selector: "[mnShowBelow]", inputs: ["mnShowBelow"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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,
@@ -4470,7 +4351,7 @@ class MnCustomBodyHostComponent {
         // Pass modalRef if the component has a modalRef property
         const instance = this.componentRef.instance;
         if (instance && 'modalRef' in instance) {
-            instance.modalRef = this.modalRef;
+            instance['modalRef'] = this.modalRef;
         }
     }
     attachTemplate(template) {
@@ -4500,7 +4381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 class MnFormBodyComponent {
-    fb;
+    fb = inject(FormBuilder);
     config;
     modalRef;
     hideFooter = false;
@@ -4525,26 +4406,29 @@ class MnFormBodyComponent {
     /** Dynamic options loaded from data sources */
     fieldOptions = {};
     valueChangesSubscription;
-    constructor(fb) {
-        this.fb = fb;
-    }
     asField(field) {
         return field;
     }
     asKey(key) {
         return key;
     }
+    // The template builds untyped `props` object literals and passes them to
+    // strongly-typed child component `[props]` inputs. There is no single static
+    // type for those literals, so this identity bridge must return `any` to keep
+    // the template assignment-compatible. This is a genuine template-bridge case.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     asAny(val) {
         return val;
     }
     hasRequiredValidator(field) {
+        const view = field;
         // Check if conditionallyRequired is currently active
-        if (field.conditionallyRequired) {
-            const formValue = this.form?.value ?? {};
-            if (field.conditionallyRequired(formValue))
+        if (view.conditionallyRequired) {
+            const formValue = (this.form?.value ?? {});
+            if (view.conditionallyRequired(formValue))
                 return true;
         }
-        const validators = field.validators;
+        const validators = view.validators;
         if (!validators)
             return false;
         // Check if Validators.required is in the array by testing a dummy control
@@ -4575,8 +4459,10 @@ class MnFormBodyComponent {
     }
     /** Resolved i18n labels with defaults, falling back to translated keys */
     get labels() {
-        const i = this.config;
-        const i18n = i.i18n || {};
+        // The config's i18n map may carry extra keys beyond ModalI18nLabels (e.g.
+        // fieldRequired, loadingOptions), so widen the type to expose them as
+        // declared optional properties (keeps dot access type-checked).
+        const i18n = this.config.i18n || {};
         return {
             submit: this.resolveLabel(i18n.submit, 'submit'),
             cancel: this.resolveLabel(i18n.cancel, 'cancel'),
@@ -4626,7 +4512,7 @@ class MnFormBodyComponent {
             }
             // Try finding in MnTextarea components
             const textarea = this.textareas?.find(f => f.props?.id === key);
-            if (textarea && typeof textarea.focus === 'function') {
+            if (textarea) {
                 textarea.focus();
                 return;
             }
@@ -4646,7 +4532,7 @@ class MnFormBodyComponent {
             let initialValue = this.config.initialValue?.[field.key] ?? null;
             // Handle checkbox default values
             if (field.kind === FieldKind.CHECKBOX && initialValue === null) {
-                initialValue = (fieldConfig.defaultValue ?? false);
+                initialValue = fieldConfig.defaultValue ?? false;
             }
             const validators = fieldConfig.validators || [];
             const asyncValidators = fieldConfig.asyncValidators || [];
@@ -4668,9 +4554,9 @@ class MnFormBodyComponent {
         }
         // Apply disabled/readOnly state to controls
         this.config.fields.forEach(field => {
-            const fieldAny = field;
+            const fieldView = field;
             const control = this.form.get(field.key);
-            if (control && (fieldAny.disabled || fieldAny.readOnly)) {
+            if (control && (fieldView.disabled || fieldView.readOnly)) {
                 control.disable();
             }
         });
@@ -4694,7 +4580,7 @@ class MnFormBodyComponent {
                 (g.rows || []).forEach(r => r.fields.forEach(f => fieldsInGroups.add(f.field.key)));
                 // Also check if group has flat fields list (compatibility)
                 if (g.fields) {
-                    g.fields.forEach((f) => fieldsInGroups.add(f.key));
+                    g.fields.forEach(f => fieldsInGroups.add(f.key));
                 }
             });
             const fieldsInRows = new Set();
@@ -4749,8 +4635,8 @@ class MnFormBodyComponent {
             else if (isVisible && !wasVisible) {
                 // Group became visible — restore validators
                 group.fields.forEach(field => {
-                    const fieldAny = field;
-                    const validators = fieldAny.validators || [];
+                    const fieldView = field;
+                    const validators = fieldView.validators || [];
                     const control = this.form.get(field.key);
                     if (control) {
                         control.setValidators(validators);
@@ -4771,8 +4657,8 @@ class MnFormBodyComponent {
         const formValue = this.form.value;
         this.config.fields.forEach(field => {
             const key = field.key;
-            const fieldAny = field;
-            const isVisible = fieldAny.visible ? fieldAny.visible(formValue) : true;
+            const fieldView = field;
+            const isVisible = fieldView.visible ? fieldView.visible(formValue) : true;
             this.fieldVisibility[key] = isVisible;
             // If initially hidden, clear validators so they don't block submit
             if (!isVisible) {
@@ -4782,14 +4668,14 @@ class MnFormBodyComponent {
                     control.updateValueAndValidity({ emitEvent: false });
                 }
             }
-            else if (fieldAny.conditionallyRequired) {
+            else if (fieldView.conditionallyRequired) {
                 // Initialize conditionallyRequired state for visible fields
-                const isRequired = fieldAny.conditionallyRequired(formValue);
+                const isRequired = fieldView.conditionallyRequired(formValue);
                 this.fieldConditionallyRequired[key] = isRequired;
                 if (isRequired) {
                     const control = this.form.get(key);
                     if (control) {
-                        const validators = this.buildValidators(fieldAny, formValue);
+                        const validators = this.buildValidators(fieldView, formValue);
                         control.setValidators(validators);
                         control.updateValueAndValidity({ emitEvent: false });
                     }
@@ -4801,9 +4687,9 @@ class MnFormBodyComponent {
         const formValue = this.form.value;
         this.config.fields.forEach(field => {
             const key = field.key;
-            const fieldAny = field;
+            const fieldView = field;
             const wasVisible = this.fieldVisibility[key];
-            const isVisible = fieldAny.visible ? fieldAny.visible(formValue) : true;
+            const isVisible = fieldView.visible ? fieldView.visible(formValue) : true;
             this.fieldVisibility[key] = isVisible;
             // When a field becomes hidden, clear its validators so it doesn't block submit
             const control = this.form.get(key);
@@ -4814,26 +4700,26 @@ class MnFormBodyComponent {
                 }
                 else if (isVisible && !wasVisible) {
                     // Restore validators (including conditionallyRequired if active)
-                    const validators = this.buildValidators(fieldAny, formValue);
+                    const validators = this.buildValidators(fieldView, formValue);
                     control.setValidators(validators);
                     control.updateValueAndValidity({ emitEvent: false });
                 }
                 else if (isVisible) {
                     // Update conditionallyRequired for visible fields
-                    this.updateConditionallyRequired(fieldAny, formValue);
+                    this.updateConditionallyRequired(fieldView, formValue);
                 }
             }
         });
     }
     /**
      * Builds the full validator array for a field, including conditionallyRequired.
-     * @param fieldAny The field configuration.
+     * @param field The field configuration view.
      * @param formValue The current form values.
      * @returns Array of validators to apply.
      */
-    buildValidators(fieldAny, formValue) {
-        const baseValidators = fieldAny.validators ? [...fieldAny.validators] : [];
-        if (fieldAny.conditionallyRequired && fieldAny.conditionallyRequired(formValue)) {
+    buildValidators(field, formValue) {
+        const baseValidators = field.validators ? [...field.validators] : [];
+        if (field.conditionallyRequired && field.conditionallyRequired(formValue)) {
             if (!baseValidators.includes(Validators.required)) {
                 baseValidators.push(Validators.required);
             }
@@ -4842,20 +4728,20 @@ class MnFormBodyComponent {
     }
     /**
      * Updates the conditionallyRequired state for a single field and adjusts validators.
-     * @param fieldAny The field configuration.
+     * @param field The field configuration view.
      * @param formValue The current form values.
      */
-    updateConditionallyRequired(fieldAny, formValue) {
-        if (!fieldAny.conditionallyRequired)
+    updateConditionallyRequired(field, formValue) {
+        if (!field.conditionallyRequired)
             return;
-        const key = fieldAny.key;
+        const key = field.key;
         const wasRequired = this.fieldConditionallyRequired[key] ?? false;
-        const isRequired = fieldAny.conditionallyRequired(formValue);
+        const isRequired = field.conditionallyRequired(formValue);
         this.fieldConditionallyRequired[key] = isRequired;
         if (isRequired !== wasRequired) {
             const control = this.form.get(key);
             if (control) {
-                const validators = this.buildValidators(fieldAny, formValue);
+                const validators = this.buildValidators(field, formValue);
                 control.setValidators(validators);
                 control.updateValueAndValidity({ emitEvent: false });
             }
@@ -4890,9 +4776,9 @@ class MnFormBodyComponent {
     // =========================
     initializeDataSources() {
         this.config.fields.forEach(field => {
-            const fieldAny = field;
-            if (fieldAny.dataSource) {
-                this.loadFieldOptions(field.key, fieldAny.dataSource, this.form.value);
+            const fieldView = field;
+            if (fieldView.dataSource) {
+                this.loadFieldOptions(field.key, fieldView.dataSource, this.form.value);
             }
         });
     }
@@ -5068,12 +4954,12 @@ class MnFormBodyComponent {
     previousFormValue = {};
     reloadDependentDataSources(formValue) {
         this.config.fields.forEach(field => {
-            const fieldAny = field;
-            const dataSource = fieldAny.dataSource;
+            const fieldView = field;
+            const dataSource = fieldView.dataSource;
             if (!dataSource?.dependsOn)
                 return;
             // Check if any dependency changed
-            const changed = dataSource.dependsOn.some((depKey) => {
+            const changed = dataSource.dependsOn.some(depKey => {
                 return formValue[depKey] !== this.previousFormValue[depKey];
             });
             if (changed) {
@@ -5181,13 +5067,13 @@ class MnFormBodyComponent {
             console.error('Form submission error:', error);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFormBodyComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnFormBodyComponent, isStandalone: true, selector: "mn-form-body", inputs: { config: "config", modalRef: "modalRef", hideFooter: "hideFooter", hideCustomBody: "hideCustomBody" }, outputs: { formStatusChange: "formStatusChange" }, viewQueries: [{ propertyName: "inputFields", predicate: MnInputField, descendants: true }, { propertyName: "textareas", predicate: MnTextarea, descendants: true }], ngImport: i0, template: "@if ((config.component || config.template) && !hideCustomBody) {\n  <mn-custom-body-host\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"mb-6 block\"\n  ></mn-custom-body-host>\n}\n\n<form (ngSubmit)=\"submit()\" [formGroup]=\"form\" class=\"flex flex-col gap-6 h-full\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <mn-lib-select\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"getSelectProps(rowField.field)\"\n          ></mn-lib-select>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-1 pl-2 pt-1\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              rows: asField(rowField.field).rows || 4,\n              resize: 'vertical',\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-textarea>\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT) {\n        <div>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-2 py-2 text-sm text-base-content/50\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n              {{ labels.loadingOptions }}\n            </div>\n          }\n          @if (!isFieldLoading(asKey(rowField.field.key))) {\n            <mn-lib-multi-select\n              [formControlName]=\"asKey(rowField.field.key)\"\n              [props]=\"asAny({\n                id: asKey(rowField.field.key),\n                label: asField(rowField.field).label,\n                options: getFieldOptions(rowField.field),\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n              })\"\n            ></mn-lib-multi-select>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"color\"\n              class=\"w-10 h-10 rounded-lg border border-base-300 cursor-pointer p-0.5\"\n              [value]=\"getColorValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onColorChange(rowField.field, $event)\"\n            />\n            <span class=\"text-sm text-base-content/60 font-mono\">{{ getColorValue(rowField.field) }}</span>\n          </div>\n          @if (asField(rowField.field).swatches) {\n            <div class=\"flex gap-1.5 mt-1\">\n              @for (swatch of asField(rowField.field).swatches; track swatch) {\n                <button\n                  mnButton\n                  [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                  type=\"button\"\n                  class=\"w-6 h-6 rounded-md border border-base-300 cursor-pointer transition-transform hover:scale-110\"\n                  [style.background-color]=\"swatch\"\n                  [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n                  [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n                  (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n                ></button>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-1\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\n                mnButton\n                [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                type=\"button\"\n                class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n                [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n                [class.text-base-300]=\"star > getRatingValue(rowField.field)\"\n                [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n                (click)=\"setRating(rowField.field, star)\"\n              >\n                &#9733;\n              </button>\n            }\n            <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"range\"\n              class=\"flex-1 h-2 bg-base-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n              [attr.min]=\"asField(rowField.field).min ?? 0\"\n              [attr.max]=\"asField(rowField.field).max ?? 100\"\n              [attr.step]=\"asField(rowField.field).step ?? 1\"\n              [value]=\"getSliderValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onSliderChange(rowField.field, $event)\"\n            />\n            @if (asField(rowField.field).showValue !== false) {\n              <span class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n                {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n              </span>\n            }\n          </div>\n          <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n            <span>{{ asField(rowField.field).min ?? 0 }}</span>\n            <span>{{ asField(rowField.field).max ?? 100 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div class=\"flex flex-col gap-1\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div\n            class=\"relative border-2 border-dashed border-base-300 rounded-xl p-6 text-center transition-colors hover:border-blue-400 hover:bg-blue-50/30\"\n            [class.border-red-300]=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n            [class.opacity-50]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n          >\n            <input\n              type=\"file\"\n              class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\"\n              [attr.accept]=\"asField(rowField.field).accept || null\"\n              [attr.multiple]=\"asField(rowField.field).multiple || null\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (change)=\"onFileChange(rowField.field, $event)\"\n            />\n            <div class=\"flex flex-col items-center gap-2\">\n              <svg class=\"w-8 h-8 text-base-content/40\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5\" />\n              </svg>\n              <p class=\"text-sm text-base-content/50\">{{ labels.fileUploadPrompt }}</p>\n              @if (asField(rowField.field).accept) {\n                <p class=\"text-xs text-base-content/40\">{{ labels.accepted }} {{ asField(rowField.field).accept }}</p>\n              }\n              @if (asField(rowField.field).maxSize) {\n                <p class=\"text-xs text-base-content/40\">{{ labels.maxSize }} {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n              }\n            </div>\n          </div>\n          <!-- Selected files list -->\n          @if (getSelectedFiles(asKey(rowField.field.key)).length > 0) {\n            <div class=\"flex flex-col gap-1 mt-2\">\n              @for (file of getSelectedFiles(asKey(rowField.field.key)); track file.name; let i = $index) {\n                <div class=\"flex items-center justify-between px-3 py-1.5 bg-base-200 rounded-lg text-sm\">\n                  <span class=\"text-base-content truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n                  <button mnButton [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\" type=\"button\" class=\"text-base-content/40 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n                </div>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFileError(rowField.field) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Shared template for MULTI_SELECT_TABLE and SINGLE_SELECT_TABLE -->\n  <ng-template #selectTableTemplate let-rowField>\n    <div class=\"flex flex-col gap-1\">\n      @if (asField(rowField.field).label) {\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          @if (hasRequiredValidator(rowField.field)) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      }\n      <mn-table\n        [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n        (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n      ></mn-table>\n      @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n        <div class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ labels.fieldRequired }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 border-t border-base-300 mt-auto\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (mousedown)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnTextarea, selector: "mn-lib-textarea", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "directive", type: MnCustomFieldHostDirective, selector: "[mnCustomFieldHost]", inputs: ["component", "inputs"] }, { kind: "component", type: MnTable, selector: "mn-table", inputs: ["dataSource"], outputs: ["sortChange", "selectionChange", "rowClick"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFormBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnFormBodyComponent, isStandalone: true, selector: "mn-form-body", inputs: { config: "config", modalRef: "modalRef", hideFooter: "hideFooter", hideCustomBody: "hideCustomBody" }, outputs: { formStatusChange: "formStatusChange" }, viewQueries: [{ propertyName: "inputFields", predicate: MnInputField, descendants: true }, { propertyName: "textareas", predicate: MnTextarea, descendants: true }], ngImport: i0, template: "@if ((config.component || config.template) && !hideCustomBody) {\n  <mn-custom-body-host\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"mb-6 block\"\n  ></mn-custom-body-host>\n}\n\n<form (ngSubmit)=\"submit()\" [formGroup]=\"form\" class=\"flex flex-col gap-6 h-full\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <mn-lib-select\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"getSelectProps(rowField.field)\"\n          ></mn-lib-select>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-1 pl-2 pt-1\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              rows: asField(rowField.field).rows || 4,\n              resize: 'vertical',\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-textarea>\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT) {\n        <div>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-2 py-2 text-sm text-base-content/50\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n              {{ labels.loadingOptions }}\n            </div>\n          }\n          @if (!isFieldLoading(asKey(rowField.field.key))) {\n            <mn-lib-multi-select\n              [formControlName]=\"asKey(rowField.field.key)\"\n              [props]=\"asAny({\n                id: asKey(rowField.field.key),\n                label: asField(rowField.field).label,\n                options: getFieldOptions(rowField.field),\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n              })\"\n            ></mn-lib-multi-select>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"color\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"w-10 h-10 rounded-lg border border-base-300 cursor-pointer p-0.5\"\n              [value]=\"getColorValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onColorChange(rowField.field, $event)\"\n            />\n            <span class=\"text-sm text-base-content/60 font-mono\">{{ getColorValue(rowField.field) }}</span>\n          </div>\n          @if (asField(rowField.field).swatches) {\n            <div class=\"flex gap-1.5 mt-1\">\n              @for (swatch of asField(rowField.field).swatches; track swatch) {\n                <button\n                  mnButton\n                  [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                  type=\"button\"\n                  class=\"w-6 h-6 rounded-md border border-base-300 cursor-pointer transition-transform hover:scale-110\"\n                  [style.background-color]=\"swatch\"\n                  [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n                  [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n                  (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n                  [attr.aria-label]=\"'Select color ' + swatch\"\n                ></button>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <span [id]=\"'rating-label-' + asKey(rowField.field.key)\"\n                class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </span>\n          <div [attr.aria-labelledby]=\"'rating-label-' + asKey(rowField.field.key)\" class=\"flex items-center gap-1\"\n               role=\"group\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\n                mnButton\n                [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                type=\"button\"\n                class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n                [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n                [class.text-base-300]=\"star > getRatingValue(rowField.field)\"\n                [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n                (click)=\"setRating(rowField.field, star)\"\n              >\n                &#9733;\n              </button>\n            }\n            <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"range\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"flex-1 h-2 bg-base-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n              [attr.min]=\"asField(rowField.field).min ?? 0\"\n              [attr.max]=\"asField(rowField.field).max ?? 100\"\n              [attr.step]=\"asField(rowField.field).step ?? 1\"\n              [value]=\"getSliderValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onSliderChange(rowField.field, $event)\"\n            />\n            @if (asField(rowField.field).showValue !== false) {\n              <span class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n                {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n              </span>\n            }\n          </div>\n          <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n            <span>{{ asField(rowField.field).min ?? 0 }}</span>\n            <span>{{ asField(rowField.field).max ?? 100 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div\n            class=\"relative border-2 border-dashed border-base-300 rounded-xl p-6 text-center transition-colors hover:border-blue-400 hover:bg-blue-50/30\"\n            [class.border-red-300]=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n            [class.opacity-50]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n          >\n            <input\n              type=\"file\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\"\n              [attr.accept]=\"asField(rowField.field).accept || null\"\n              [attr.multiple]=\"asField(rowField.field).multiple || null\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (change)=\"onFileChange(rowField.field, $event)\"\n            />\n            <div class=\"flex flex-col items-center gap-2\">\n              <svg class=\"w-8 h-8 text-base-content/40\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5\" />\n              </svg>\n              <p class=\"text-sm text-base-content/50\">{{ labels.fileUploadPrompt }}</p>\n              @if (asField(rowField.field).accept) {\n                <p class=\"text-xs text-base-content/40\">{{ labels.accepted }} {{ asField(rowField.field).accept }}</p>\n              }\n              @if (asField(rowField.field).maxSize) {\n                <p class=\"text-xs text-base-content/40\">{{ labels.maxSize }} {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n              }\n            </div>\n          </div>\n          <!-- Selected files list -->\n          @if (getSelectedFiles(asKey(rowField.field.key)).length > 0) {\n            <div class=\"flex flex-col gap-1 mt-2\">\n              @for (file of getSelectedFiles(asKey(rowField.field.key)); track file.name; let i = $index) {\n                <div class=\"flex items-center justify-between px-3 py-1.5 bg-base-200 rounded-lg text-sm\">\n                  <span class=\"text-base-content truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n                  <button mnButton [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\" type=\"button\" class=\"text-base-content/40 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n                </div>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFileError(rowField.field) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Shared template for MULTI_SELECT_TABLE and SINGLE_SELECT_TABLE -->\n  <ng-template #selectTableTemplate let-rowField>\n    <div class=\"flex flex-col gap-1\">\n      @if (asField(rowField.field).label) {\n        <span class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          @if (hasRequiredValidator(rowField.field)) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </span>\n      }\n      <mn-table\n        [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n        [attr.aria-label]=\"asField(rowField.field).label || null\"\n        (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n      ></mn-table>\n      @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n        <div class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ labels.fieldRequired }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 border-t border-base-300 mt-auto\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (mousedown)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnTextarea, selector: "mn-lib-textarea", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "directive", type: MnCustomFieldHostDirective, selector: "[mnCustomFieldHost]", inputs: ["component", "inputs"] }, { kind: "component", type: MnTable, selector: "mn-table", inputs: ["dataSource"], outputs: ["sortChange", "selectionChange", "rowClick"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFormBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-form-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnInputField, MnCheckbox, MnDatetime, MnMultiSelect, MnTextarea, MnSelect, MnCustomFieldHostDirective, MnTable, MnCustomBodyHostComponent], template: "@if ((config.component || config.template) && !hideCustomBody) {\n  <mn-custom-body-host\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"mb-6 block\"\n  ></mn-custom-body-host>\n}\n\n<form (ngSubmit)=\"submit()\" [formGroup]=\"form\" class=\"flex flex-col gap-6 h-full\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <mn-lib-select\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"getSelectProps(rowField.field)\"\n          ></mn-lib-select>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-1 pl-2 pt-1\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              rows: asField(rowField.field).rows || 4,\n              resize: 'vertical',\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-textarea>\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT) {\n        <div>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-2 py-2 text-sm text-base-content/50\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n              {{ labels.loadingOptions }}\n            </div>\n          }\n          @if (!isFieldLoading(asKey(rowField.field.key))) {\n            <mn-lib-multi-select\n              [formControlName]=\"asKey(rowField.field.key)\"\n              [props]=\"asAny({\n                id: asKey(rowField.field.key),\n                label: asField(rowField.field).label,\n                options: getFieldOptions(rowField.field),\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n              })\"\n            ></mn-lib-multi-select>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"color\"\n              class=\"w-10 h-10 rounded-lg border border-base-300 cursor-pointer p-0.5\"\n              [value]=\"getColorValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onColorChange(rowField.field, $event)\"\n            />\n            <span class=\"text-sm text-base-content/60 font-mono\">{{ getColorValue(rowField.field) }}</span>\n          </div>\n          @if (asField(rowField.field).swatches) {\n            <div class=\"flex gap-1.5 mt-1\">\n              @for (swatch of asField(rowField.field).swatches; track swatch) {\n                <button\n                  mnButton\n                  [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                  type=\"button\"\n                  class=\"w-6 h-6 rounded-md border border-base-300 cursor-pointer transition-transform hover:scale-110\"\n                  [style.background-color]=\"swatch\"\n                  [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n                  [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n                  (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n                ></button>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-1\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\n                mnButton\n                [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                type=\"button\"\n                class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n                [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n                [class.text-base-300]=\"star > getRatingValue(rowField.field)\"\n                [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n                (click)=\"setRating(rowField.field, star)\"\n              >\n                &#9733;\n              </button>\n            }\n            <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"range\"\n              class=\"flex-1 h-2 bg-base-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n              [attr.min]=\"asField(rowField.field).min ?? 0\"\n              [attr.max]=\"asField(rowField.field).max ?? 100\"\n              [attr.step]=\"asField(rowField.field).step ?? 1\"\n              [value]=\"getSliderValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onSliderChange(rowField.field, $event)\"\n            />\n            @if (asField(rowField.field).showValue !== false) {\n              <span class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n                {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n              </span>\n            }\n          </div>\n          <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n            <span>{{ asField(rowField.field).min ?? 0 }}</span>\n            <span>{{ asField(rowField.field).max ?? 100 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div class=\"flex flex-col gap-1\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div\n            class=\"relative border-2 border-dashed border-base-300 rounded-xl p-6 text-center transition-colors hover:border-blue-400 hover:bg-blue-50/30\"\n            [class.border-red-300]=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n            [class.opacity-50]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n          >\n            <input\n              type=\"file\"\n              class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\"\n              [attr.accept]=\"asField(rowField.field).accept || null\"\n              [attr.multiple]=\"asField(rowField.field).multiple || null\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (change)=\"onFileChange(rowField.field, $event)\"\n            />\n            <div class=\"flex flex-col items-center gap-2\">\n              <svg class=\"w-8 h-8 text-base-content/40\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5\" />\n              </svg>\n              <p class=\"text-sm text-base-content/50\">{{ labels.fileUploadPrompt }}</p>\n              @if (asField(rowField.field).accept) {\n                <p class=\"text-xs text-base-content/40\">{{ labels.accepted }} {{ asField(rowField.field).accept }}</p>\n              }\n              @if (asField(rowField.field).maxSize) {\n                <p class=\"text-xs text-base-content/40\">{{ labels.maxSize }} {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n              }\n            </div>\n          </div>\n          <!-- Selected files list -->\n          @if (getSelectedFiles(asKey(rowField.field.key)).length > 0) {\n            <div class=\"flex flex-col gap-1 mt-2\">\n              @for (file of getSelectedFiles(asKey(rowField.field.key)); track file.name; let i = $index) {\n                <div class=\"flex items-center justify-between px-3 py-1.5 bg-base-200 rounded-lg text-sm\">\n                  <span class=\"text-base-content truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n                  <button mnButton [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\" type=\"button\" class=\"text-base-content/40 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n                </div>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFileError(rowField.field) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Shared template for MULTI_SELECT_TABLE and SINGLE_SELECT_TABLE -->\n  <ng-template #selectTableTemplate let-rowField>\n    <div class=\"flex flex-col gap-1\">\n      @if (asField(rowField.field).label) {\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          @if (hasRequiredValidator(rowField.field)) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </label>\n      }\n      <mn-table\n        [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n        (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n      ></mn-table>\n      @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n        <div class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ labels.fieldRequired }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 border-t border-base-300 mt-auto\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (mousedown)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { config: [{
+            args: [{ selector: 'mn-form-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnInputField, MnCheckbox, MnDatetime, MnMultiSelect, MnTextarea, MnSelect, MnCustomFieldHostDirective, MnTable, MnCustomBodyHostComponent], template: "@if ((config.component || config.template) && !hideCustomBody) {\n  <mn-custom-body-host\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"mb-6 block\"\n  ></mn-custom-body-host>\n}\n\n<form (ngSubmit)=\"submit()\" [formGroup]=\"form\" class=\"flex flex-col gap-6 h-full\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <mn-lib-select\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"getSelectProps(rowField.field)\"\n          ></mn-lib-select>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-1 pl-2 pt-1\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              rows: asField(rowField.field).rows || 4,\n              resize: 'vertical',\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-textarea>\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT) {\n        <div>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-2 py-2 text-sm text-base-content/50\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n              {{ labels.loadingOptions }}\n            </div>\n          }\n          @if (!isFieldLoading(asKey(rowField.field.key))) {\n            <mn-lib-multi-select\n              [formControlName]=\"asKey(rowField.field.key)\"\n              [props]=\"asAny({\n                id: asKey(rowField.field.key),\n                label: asField(rowField.field).label,\n                options: getFieldOptions(rowField.field),\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n              })\"\n            ></mn-lib-multi-select>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"color\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"w-10 h-10 rounded-lg border border-base-300 cursor-pointer p-0.5\"\n              [value]=\"getColorValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onColorChange(rowField.field, $event)\"\n            />\n            <span class=\"text-sm text-base-content/60 font-mono\">{{ getColorValue(rowField.field) }}</span>\n          </div>\n          @if (asField(rowField.field).swatches) {\n            <div class=\"flex gap-1.5 mt-1\">\n              @for (swatch of asField(rowField.field).swatches; track swatch) {\n                <button\n                  mnButton\n                  [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                  type=\"button\"\n                  class=\"w-6 h-6 rounded-md border border-base-300 cursor-pointer transition-transform hover:scale-110\"\n                  [style.background-color]=\"swatch\"\n                  [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n                  [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n                  (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n                  [attr.aria-label]=\"'Select color ' + swatch\"\n                ></button>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <span [id]=\"'rating-label-' + asKey(rowField.field.key)\"\n                class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </span>\n          <div [attr.aria-labelledby]=\"'rating-label-' + asKey(rowField.field.key)\" class=\"flex items-center gap-1\"\n               role=\"group\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\n                mnButton\n                [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                type=\"button\"\n                class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n                [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n                [class.text-base-300]=\"star > getRatingValue(rowField.field)\"\n                [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n                (click)=\"setRating(rowField.field, star)\"\n              >\n                &#9733;\n              </button>\n            }\n            <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"range\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"flex-1 h-2 bg-base-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n              [attr.min]=\"asField(rowField.field).min ?? 0\"\n              [attr.max]=\"asField(rowField.field).max ?? 100\"\n              [attr.step]=\"asField(rowField.field).step ?? 1\"\n              [value]=\"getSliderValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onSliderChange(rowField.field, $event)\"\n            />\n            @if (asField(rowField.field).showValue !== false) {\n              <span class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n                {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n              </span>\n            }\n          </div>\n          <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n            <span>{{ asField(rowField.field).min ?? 0 }}</span>\n            <span>{{ asField(rowField.field).max ?? 100 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div\n            class=\"relative border-2 border-dashed border-base-300 rounded-xl p-6 text-center transition-colors hover:border-blue-400 hover:bg-blue-50/30\"\n            [class.border-red-300]=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n            [class.opacity-50]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n          >\n            <input\n              type=\"file\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\"\n              [attr.accept]=\"asField(rowField.field).accept || null\"\n              [attr.multiple]=\"asField(rowField.field).multiple || null\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (change)=\"onFileChange(rowField.field, $event)\"\n            />\n            <div class=\"flex flex-col items-center gap-2\">\n              <svg class=\"w-8 h-8 text-base-content/40\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5\" />\n              </svg>\n              <p class=\"text-sm text-base-content/50\">{{ labels.fileUploadPrompt }}</p>\n              @if (asField(rowField.field).accept) {\n                <p class=\"text-xs text-base-content/40\">{{ labels.accepted }} {{ asField(rowField.field).accept }}</p>\n              }\n              @if (asField(rowField.field).maxSize) {\n                <p class=\"text-xs text-base-content/40\">{{ labels.maxSize }} {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n              }\n            </div>\n          </div>\n          <!-- Selected files list -->\n          @if (getSelectedFiles(asKey(rowField.field.key)).length > 0) {\n            <div class=\"flex flex-col gap-1 mt-2\">\n              @for (file of getSelectedFiles(asKey(rowField.field.key)); track file.name; let i = $index) {\n                <div class=\"flex items-center justify-between px-3 py-1.5 bg-base-200 rounded-lg text-sm\">\n                  <span class=\"text-base-content truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n                  <button mnButton [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\" type=\"button\" class=\"text-base-content/40 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n                </div>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFileError(rowField.field) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Shared template for MULTI_SELECT_TABLE and SINGLE_SELECT_TABLE -->\n  <ng-template #selectTableTemplate let-rowField>\n    <div class=\"flex flex-col gap-1\">\n      @if (asField(rowField.field).label) {\n        <span class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          @if (hasRequiredValidator(rowField.field)) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </span>\n      }\n      <mn-table\n        [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n        [attr.aria-label]=\"asField(rowField.field).label || null\"\n        (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n      ></mn-table>\n      @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n        <div class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ labels.fieldRequired }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 border-t border-base-300 mt-auto\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (mousedown)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"] }]
+        }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
                 type: Input
@@ -5294,7 +5180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 class MnWizardBodyComponent {
-    cdr;
+    cdr = inject(ChangeDetectorRef);
     config;
     modalRef;
     formBodies;
@@ -5321,20 +5207,17 @@ class MnWizardBodyComponent {
     get labels() {
         const i18n = this.config.i18n || {};
         return {
-            next: this.resolveLabel(i18n.next, 'next'),
-            back: this.resolveLabel(i18n.back, 'back'),
-            close: this.resolveLabel(i18n.close, 'close'),
-            complete: this.resolveLabel(i18n.complete, 'complete'),
-            completing: this.resolveLabel(i18n.completing, 'completing'),
+            next: this.resolveLabel(i18n['next'], 'next'),
+            back: this.resolveLabel(i18n['back'], 'back'),
+            close: this.resolveLabel(i18n['close'], 'close'),
+            complete: this.resolveLabel(i18n['complete'], 'complete'),
+            completing: this.resolveLabel(i18n['completing'], 'completing'),
         };
     }
     /** Pre-built form configs keyed by step id — only for steps that have fields */
     stepFormConfigs = {};
     statusSubscription;
     formBodiesSubscription;
-    constructor(cdr) {
-        this.cdr = cdr;
-    }
     ngOnInit() {
         // Pre-build form configs for all form-driven steps
         for (const step of this.config.steps) {
@@ -5378,9 +5261,6 @@ class MnWizardBodyComponent {
         this.statusSubscription?.unsubscribe();
         this.formBodiesSubscription?.unsubscribe();
     }
-    asAny(val) {
-        return val;
-    }
     isTextBody(step) {
         return typeof step.body === 'string' || typeof step.body === 'number';
     }
@@ -5446,7 +5326,6 @@ class MnWizardBodyComponent {
     getCurrentFormBody() {
         if (!this.formBodies)
             return undefined;
-        const stepIndex = this.currentStepIndex;
         // formBodies only contains entries for steps that have stepFormConfigs
         // We need to find which form body index corresponds to the current step
         const formStepIds = this.config.steps
@@ -5610,7 +5489,7 @@ class MnWizardBodyComponent {
             case ActionStyle.SECONDARY:
                 return { variant: 'outline', color: 'secondary' };
             case ActionStyle.GHOST:
-                return { variant: 'ghost', color: 'secondary' };
+                return { variant: 'text', color: 'secondary' };
             default:
                 return { variant: 'outline', color: 'secondary' };
         }
@@ -5636,13 +5515,13 @@ class MnWizardBodyComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6 h-full\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"pb-4 border-b border-base-300 -mx-6 px-6 -mt-4\">\n    <div class=\"relative flex items-start\">\n      <!-- Background line spanning from first circle center to last circle center -->\n      <div\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        class=\"absolute top-3.75 h-1 bg-base-300 z-0\"\n      ></div>\n\n      <!-- Progress fill line -->\n      @if (visibleSteps.length > 1) {\n        <div\n          [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n          [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n          class=\"absolute top-3.75 h-1 bg-success z-1 transition-all duration-500\"\n        ></div>\n      }\n\n      @for (step of visibleSteps; track step.id; let i = $index; ) {\n        <div\n          (click)=\"isFreeFlow ? goToStep(step) : null\"\n          [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n          class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        >\n          <div\n            [ngClass]=\"{\n              'bg-primary text-primary-content': step.id === currentStepId,\n              'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n              'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n            }\"\n            class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          >{{ i + 1 }}\n          </div>\n          <div\n            [ngClass]=\"{\n              'text-base-content font-semibold': step.id === currentStepId,\n              'text-base-content/50': step.id !== currentStepId\n            }\"\n            class=\"text-xs text-center whitespace-nowrap hidden sm:block\"\n          >{{ step.title }}\n          </div>\n\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"min-h-48 flex-1\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300 mt-auto\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        (actionClick)=\"handleFooterAction($event)\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6 h-full\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"pb-4 border-b border-base-300 -mx-6 px-6 -mt-4\">\n    <div class=\"relative flex items-start\">\n      <!-- Background line spanning from first circle center to last circle center -->\n      <div\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        class=\"absolute top-3.75 h-1 bg-base-300 z-0\"\n      ></div>\n\n      <!-- Progress fill line -->\n      @if (visibleSteps.length > 1) {\n        <div\n          [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n          [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n          class=\"absolute top-3.75 h-1 bg-success z-1 transition-all duration-500\"\n        ></div>\n      }\n\n      @for (step of visibleSteps; track step.id; let i = $index; ) {\n        <div\n          (keyup.enter)=\"isFreeFlow ? goToStep(step) : null\"\n          (click)=\"isFreeFlow ? goToStep(step) : null\"\n          [attr.tabindex]=\"isFreeFlow && canNavigateToStep(step) ? 0 : null\"\n          [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n          class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        >\n          <div\n            [ngClass]=\"{\n              'bg-primary text-primary-content': step.id === currentStepId,\n              'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n              'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n            }\"\n            class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          >{{ i + 1 }}\n          </div>\n          <div\n            [ngClass]=\"{\n              'text-base-content font-semibold': step.id === currentStepId,\n              'text-base-content/50': step.id !== currentStepId\n            }\"\n            class=\"text-xs text-center whitespace-nowrap hidden sm:block\"\n          >{{ step.title }}\n          </div>\n\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"min-h-48 flex-1\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300 mt-auto\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        (actionClick)=\"handleFooterAction($any($event))\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, MnFooterActionsComponent], template: "<div class=\"flex flex-col gap-6 h-full\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"pb-4 border-b border-base-300 -mx-6 px-6 -mt-4\">\n    <div class=\"relative flex items-start\">\n      <!-- Background line spanning from first circle center to last circle center -->\n      <div\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        class=\"absolute top-3.75 h-1 bg-base-300 z-0\"\n      ></div>\n\n      <!-- Progress fill line -->\n      @if (visibleSteps.length > 1) {\n        <div\n          [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n          [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n          class=\"absolute top-3.75 h-1 bg-success z-1 transition-all duration-500\"\n        ></div>\n      }\n\n      @for (step of visibleSteps; track step.id; let i = $index; ) {\n        <div\n          (click)=\"isFreeFlow ? goToStep(step) : null\"\n          [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n          class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        >\n          <div\n            [ngClass]=\"{\n              'bg-primary text-primary-content': step.id === currentStepId,\n              'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n              'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n            }\"\n            class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          >{{ i + 1 }}\n          </div>\n          <div\n            [ngClass]=\"{\n              'text-base-content font-semibold': step.id === currentStepId,\n              'text-base-content/50': step.id !== currentStepId\n            }\"\n            class=\"text-xs text-center whitespace-nowrap hidden sm:block\"\n          >{{ step.title }}\n          </div>\n\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"min-h-48 flex-1\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"asAny(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300 mt-auto\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        (actionClick)=\"handleFooterAction($event)\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
+            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, MnFooterActionsComponent], template: "<div class=\"flex flex-col gap-6 h-full\">\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      class=\"block\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"pb-4 border-b border-base-300 -mx-6 px-6 -mt-4\">\n    <div class=\"relative flex items-start\">\n      <!-- Background line spanning from first circle center to last circle center -->\n      <div\n        [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        [style.right]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n        class=\"absolute top-3.75 h-1 bg-base-300 z-0\"\n      ></div>\n\n      <!-- Progress fill line -->\n      @if (visibleSteps.length > 1) {\n        <div\n          [style.left]=\"'calc(' + 100 / (2 * visibleSteps.length) + '%)'\"\n          [style.width]=\"'calc(' + (currentProgressIndex / (visibleSteps.length - 1)) * (100 - 100 / visibleSteps.length) + '%)'\"\n          class=\"absolute top-3.75 h-1 bg-success z-1 transition-all duration-500\"\n        ></div>\n      }\n\n      @for (step of visibleSteps; track step.id; let i = $index; ) {\n        <div\n          (keyup.enter)=\"isFreeFlow ? goToStep(step) : null\"\n          (click)=\"isFreeFlow ? goToStep(step) : null\"\n          [attr.tabindex]=\"isFreeFlow && canNavigateToStep(step) ? 0 : null\"\n          [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n          class=\"relative flex flex-col items-center gap-1 z-10 w-0 flex-1\"\n        >\n          <div\n            [ngClass]=\"{\n              'bg-primary text-primary-content': step.id === currentStepId,\n              'bg-success text-success-content': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n              'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n            }\"\n            class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n          >{{ i + 1 }}\n          </div>\n          <div\n            [ngClass]=\"{\n              'text-base-content font-semibold': step.id === currentStepId,\n              'text-base-content/50': step.id !== currentStepId\n            }\"\n            class=\"text-xs text-center whitespace-nowrap hidden sm:block\"\n          >{{ step.title }}\n          </div>\n\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"min-h-48 flex-1\">\n    @for (step of config.steps; track step.id) {\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          @if (stepFormConfigs[step.id]) {\n            <mn-form-body\n              [config]=\"stepFormConfigs[step.id]\"\n              [modalRef]=\"$any(modalRef)\"\n              [hideFooter]=\"true\"\n              [hideCustomBody]=\"true\"\n            ></mn-form-body>\n          }\n\n          <!-- Text body -->\n          @if (!stepFormConfigs[step.id] && isTextBody(step)) {\n            <div>\n              {{ step.body }}\n            </div>\n          }\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  @if (wizardErrors && (wizardErrors | keyvalue).length > 0) {\n    <div class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n      @for (err of wizardErrors | keyvalue; track err.key) {\n        <div class=\"text-red-500 text-sm\">\n          {{ err.value }}\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300 mt-auto\">\n    @if (!currentStep?.hideBack) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"back()\"\n      >\n        {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n      </button>\n    }\n\n    <!-- Custom footer actions -->\n    @if (config.footerActions) {\n      <mn-footer-actions\n        [actions]=\"config.footerActions\"\n        (actionClick)=\"handleFooterAction($any($event))\"\n      ></mn-footer-actions>\n    } @else {\n      <div class=\"flex-1\"></div>\n    }\n\n    @if (!isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n        (click)=\"next()\"\n      >\n        {{ currentStep?.nextLabel || labels.next }}\n      </button>\n    }\n\n    @if (isLastStep) {\n      <button\n        mnButton\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n        [disabled]=\"!isCurrentStepValid || isCompleting\"\n        (click)=\"complete()\"\n      >\n        {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n      </button>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
                 type: Input
@@ -5652,16 +5531,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 class MnConfirmationBodyComponent {
-    cdr;
+    cdr = inject(ChangeDetectorRef);
     config;
     modalRef;
     formBody;
     confirmButtonStatus = 'VALID';
     hasFormFields = false;
     languageService = inject(MnLanguageService);
-    constructor(cdr) {
-        this.cdr = cdr;
-    }
     ngOnInit() {
         this.hasFormFields = !!((this.config.fields && this.config.fields.length > 0) ||
             (this.config.fieldGroups && this.config.fieldGroups.length > 0) ||
@@ -5738,25 +5614,19 @@ class MnConfirmationBodyComponent {
                 return 'outline';
         }
     }
-    asAny(val) {
-        return val;
-    }
     get isConfirmDisabled() {
         if (this.hasFormFields) {
             return this.confirmButtonStatus !== 'VALID';
         }
         return false;
     }
-    asField(field) {
-        return field;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnConfirmationBodyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnConfirmationBodyComponent, isStandalone: true, selector: "mn-confirmation-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBody", first: true, predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\" [ngClass]=\"toneClass\">\n  <!-- Custom Content (Component or Template) -->\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    @if (config.tone === 'warning' || config.tone === 'danger') {\n      <div\n        class=\"w-12 h-12 rounded-full flex items-center justify-center\"\n        [ngClass]=\"{\n          'bg-blue-100 text-blue-500': config.tone !== 'warning' && config.tone !== 'danger',\n          'bg-amber-100 text-amber-500': config.tone === 'warning',\n          'bg-red-100 text-red-500': config.tone === 'danger'\n        }\">\n        @if (config.tone === 'warning') {\n          <svg\n            class=\"w-6 h-6\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\"\n            />\n          </svg>\n        }\n        @if (config.tone === 'danger') {\n          <svg\n            class=\"w-6 h-6\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z\"\n            />\n          </svg>\n        }\n      </div>\n    }\n\n    @if (config.message) {\n      <div class=\"text-base text-base-content/80 leading-relaxed max-w-[28rem]\">\n        {{ config.message }}\n      </div>\n    }\n  </div>\n\n  <!-- Form Fields / Rows -->\n  @if (hasFormFields) {\n    <mn-form-body\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      [hideFooter]=\"true\"\n      [hideCustomBody]=\"true\"\n      (formStatusChange)=\"onFormStatusChange($event)\"\n    ></mn-form-body>\n  }\n\n  <div class=\"flex gap-3 w-full\">\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(cancelStyle),\n        color: getButtonColor(cancelStyle)\n      }\"\n      (click)=\"cancel()\"\n    >\n      {{ cancelLabel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(confirmStyle),\n        color: getButtonColor(confirmStyle),\n        disabled: isConfirmDisabled\n      }\"\n      [disabled]=\"isConfirmDisabled\"\n      (click)=\"confirm()\"\n    >\n      {{ confirmLabel }}\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnConfirmationBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnConfirmationBodyComponent, isStandalone: true, selector: "mn-confirmation-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBody", first: true, predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\" [ngClass]=\"toneClass\">\n  <!-- Custom Content (Component or Template) -->\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    @if (config.tone === 'warning' || config.tone === 'danger') {\n      <div\n        class=\"w-12 h-12 rounded-full flex items-center justify-center\"\n        [ngClass]=\"{\n          'bg-blue-100 text-blue-500': config.tone !== 'warning' && config.tone !== 'danger',\n          'bg-amber-100 text-amber-500': config.tone === 'warning',\n          'bg-red-100 text-red-500': config.tone === 'danger'\n        }\">\n        @if (config.tone === 'warning') {\n          <svg\n            class=\"w-6 h-6\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\"\n            />\n          </svg>\n        }\n        @if (config.tone === 'danger') {\n          <svg\n            class=\"w-6 h-6\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z\"\n            />\n          </svg>\n        }\n      </div>\n    }\n\n    @if (config.message) {\n      <div class=\"text-base text-base-content/80 leading-relaxed max-w-[28rem]\">\n        {{ config.message }}\n      </div>\n    }\n  </div>\n\n  <!-- Form Fields / Rows -->\n  @if (hasFormFields) {\n    <mn-form-body\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      [hideFooter]=\"true\"\n      [hideCustomBody]=\"true\"\n      (formStatusChange)=\"onFormStatusChange($event)\"\n    ></mn-form-body>\n  }\n\n  <div class=\"flex gap-3 w-full\">\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(cancelStyle),\n        color: getButtonColor(cancelStyle)\n      }\"\n      (click)=\"cancel()\"\n    >\n      {{ cancelLabel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(confirmStyle),\n        color: getButtonColor(confirmStyle),\n        disabled: isConfirmDisabled\n      }\"\n      [disabled]=\"isConfirmDisabled\"\n      (click)=\"confirm()\"\n    >\n      {{ confirmLabel }}\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnConfirmationBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-confirmation-body', standalone: true, imports: [CommonModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, ReactiveFormsModule], template: "<div class=\"flex flex-col gap-6\" [ngClass]=\"toneClass\">\n  <!-- Custom Content (Component or Template) -->\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    @if (config.tone === 'warning' || config.tone === 'danger') {\n      <div\n        class=\"w-12 h-12 rounded-full flex items-center justify-center\"\n        [ngClass]=\"{\n          'bg-blue-100 text-blue-500': config.tone !== 'warning' && config.tone !== 'danger',\n          'bg-amber-100 text-amber-500': config.tone === 'warning',\n          'bg-red-100 text-red-500': config.tone === 'danger'\n        }\">\n        @if (config.tone === 'warning') {\n          <svg\n            class=\"w-6 h-6\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\"\n            />\n          </svg>\n        }\n        @if (config.tone === 'danger') {\n          <svg\n            class=\"w-6 h-6\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z\"\n            />\n          </svg>\n        }\n      </div>\n    }\n\n    @if (config.message) {\n      <div class=\"text-base text-base-content/80 leading-relaxed max-w-[28rem]\">\n        {{ config.message }}\n      </div>\n    }\n  </div>\n\n  <!-- Form Fields / Rows -->\n  @if (hasFormFields) {\n    <mn-form-body\n      [config]=\"asAny(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n      [hideFooter]=\"true\"\n      [hideCustomBody]=\"true\"\n      (formStatusChange)=\"onFormStatusChange($event)\"\n    ></mn-form-body>\n  }\n\n  <div class=\"flex gap-3 w-full\">\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(cancelStyle),\n        color: getButtonColor(cancelStyle)\n      }\"\n      (click)=\"cancel()\"\n    >\n      {{ cancelLabel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(confirmStyle),\n        color: getButtonColor(confirmStyle),\n        disabled: isConfirmDisabled\n      }\"\n      [disabled]=\"isConfirmDisabled\"\n      (click)=\"confirm()\"\n    >\n      {{ confirmLabel }}\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
+            args: [{ selector: 'mn-confirmation-body', standalone: true, imports: [CommonModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, ReactiveFormsModule], template: "<div class=\"flex flex-col gap-6\" [ngClass]=\"toneClass\">\n  <!-- Custom Content (Component or Template) -->\n  @if (config.component || config.template) {\n    <mn-custom-body-host\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n    ></mn-custom-body-host>\n  }\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    @if (config.tone === 'warning' || config.tone === 'danger') {\n      <div\n        class=\"w-12 h-12 rounded-full flex items-center justify-center\"\n        [ngClass]=\"{\n          'bg-blue-100 text-blue-500': config.tone !== 'warning' && config.tone !== 'danger',\n          'bg-amber-100 text-amber-500': config.tone === 'warning',\n          'bg-red-100 text-red-500': config.tone === 'danger'\n        }\">\n        @if (config.tone === 'warning') {\n          <svg\n            class=\"w-6 h-6\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\"\n            />\n          </svg>\n        }\n        @if (config.tone === 'danger') {\n          <svg\n            class=\"w-6 h-6\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z\"\n            />\n          </svg>\n        }\n      </div>\n    }\n\n    @if (config.message) {\n      <div class=\"text-base text-base-content/80 leading-relaxed max-w-[28rem]\">\n        {{ config.message }}\n      </div>\n    }\n  </div>\n\n  <!-- Form Fields / Rows -->\n  @if (hasFormFields) {\n    <mn-form-body\n      [config]=\"$any(config)\"\n      [modalRef]=\"$any(modalRef)\"\n      [hideFooter]=\"true\"\n      [hideCustomBody]=\"true\"\n      (formStatusChange)=\"onFormStatusChange($event)\"\n    ></mn-form-body>\n  }\n\n  <div class=\"flex gap-3 w-full\">\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(cancelStyle),\n        color: getButtonColor(cancelStyle)\n      }\"\n      (click)=\"cancel()\"\n    >\n      {{ cancelLabel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(confirmStyle),\n        color: getButtonColor(confirmStyle),\n        disabled: isConfirmDisabled\n      }\"\n      [disabled]=\"isConfirmDisabled\"\n      (click)=\"confirm()\"\n    >\n      {{ confirmLabel }}\n    </button>\n  </div>\n</div>\n" }]
+        }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
                 type: Input
@@ -5766,8 +5636,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 class MnModalShellComponent {
-    el;
-    cdr;
+    el = inject(ElementRef);
+    cdr = inject(ChangeDetectorRef);
     config;
     modalRef;
     isClosing = false;
@@ -5777,10 +5647,6 @@ class MnModalShellComponent {
     focusTrapListener = null;
     pollingTimer = null;
     pollAttempts = 0;
-    constructor(el, cdr) {
-        this.el = el;
-        this.cdr = cdr;
-    }
     ngOnInit() {
         this.startPollingIfConfigured();
     }
@@ -5843,9 +5709,6 @@ class MnModalShellComponent {
     asCustom(config) {
         return config;
     }
-    asAny(val) {
-        return val;
-    }
     get hostClasses() {
         const size = this.config.sizeWidth || ModalSize.MD;
         const closing = this.isClosing ? ' closing' : '';
@@ -6017,8 +5880,8 @@ class MnModalShellComponent {
             this.pollingTimer = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (showBackdrop) {\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [ngClass]=\"[containerSizeClass, animationClass]\"\n  [style.height]=\"containerHeightStyle\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <button\n        class=\"bg-transparent border-none text-2xl cursor-pointer text-base-content/50 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-base-200 hover:text-base-content\"\n        (click)=\"onCloseButtonClick()\"\n        aria-label=\"Close modal\"\n      >\n        \u00D7\n      </button>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    @if (config.kind === ModalKind.WIZARD) {\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n        class=\"block h-full\"\n      ></mn-wizard-body>\n    }\n\n    @if (config.kind === ModalKind.FORM) {\n      <mn-form-body\n        [config]=\"asForm(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n        class=\"block h-full\"\n      ></mn-form-body>\n    }\n\n    @if (config.kind === ModalKind.CONFIRMATION) {\n      <mn-confirmation-body\n        [config]=\"asConfirmation(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n      ></mn-confirmation-body>\n    }\n\n    @if (config.kind === ModalKind.CUSTOM) {\n      <mn-custom-body-host\n        [config]=\"asCustom(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n      ></mn-custom-body-host>\n    }\n  </div>\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions"], outputs: ["actionClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [ngClass]=\"[containerSizeClass, animationClass]\"\n  [style.height]=\"containerHeightStyle\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <button\n        class=\"bg-transparent border-none text-2xl cursor-pointer text-base-content/50 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-base-200 hover:text-base-content\"\n        (click)=\"onCloseButtonClick()\"\n        aria-label=\"Close modal\"\n      >\n        \u00D7\n      </button>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    @if (config.kind === ModalKind.WIZARD) {\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"block h-full\"\n      ></mn-wizard-body>\n    }\n\n    @if (config.kind === ModalKind.FORM) {\n      <mn-form-body\n        [config]=\"asForm(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"block h-full\"\n      ></mn-form-body>\n    }\n\n    @if (config.kind === ModalKind.CONFIRMATION) {\n      <mn-confirmation-body\n        [config]=\"asConfirmation(config)\"\n        [modalRef]=\"$any(modalRef)\"\n      ></mn-confirmation-body>\n    }\n\n    @if (config.kind === ModalKind.CUSTOM) {\n      <mn-custom-body-host\n        [config]=\"asCustom(config)\"\n        [modalRef]=\"$any(modalRef)\"\n      ></mn-custom-body-host>\n    }\n  </div>\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFooterActionsComponent, selector: "mn-footer-actions", inputs: ["actions"], outputs: ["actionClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, decorators: [{
             type: Component,
@@ -6029,8 +5892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnConfirmationBodyComponent,
                         MnCustomBodyHostComponent,
                         MnFooterActionsComponent,
-                    ], template: "@if (showBackdrop) {\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [ngClass]=\"[containerSizeClass, animationClass]\"\n  [style.height]=\"containerHeightStyle\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <button\n        class=\"bg-transparent border-none text-2xl cursor-pointer text-base-content/50 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-base-200 hover:text-base-content\"\n        (click)=\"onCloseButtonClick()\"\n        aria-label=\"Close modal\"\n      >\n        \u00D7\n      </button>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    @if (config.kind === ModalKind.WIZARD) {\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n        class=\"block h-full\"\n      ></mn-wizard-body>\n    }\n\n    @if (config.kind === ModalKind.FORM) {\n      <mn-form-body\n        [config]=\"asForm(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n        class=\"block h-full\"\n      ></mn-form-body>\n    }\n\n    @if (config.kind === ModalKind.CONFIRMATION) {\n      <mn-confirmation-body\n        [config]=\"asConfirmation(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n      ></mn-confirmation-body>\n    }\n\n    @if (config.kind === ModalKind.CUSTOM) {\n      <mn-custom-body-host\n        [config]=\"asCustom(config)\"\n        [modalRef]=\"asAny(modalRef)\"\n      ></mn-custom-body-host>\n    }\n  </div>\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
+                    ], template: "@if (showBackdrop) {\n  <!-- The backdrop is a visual overlay \u2014 keyboard dismiss is handled at component level via Escape key -->\n    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" (click)=\"onBackdropClick()\"></div>\n}\n\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [ngClass]=\"[containerSizeClass, animationClass]\"\n  [style.height]=\"containerHeightStyle\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <div [class.border-b]=\"config.kind !== ModalKind.WIZARD\"\n       [class.border-base-300]=\"config.kind !== ModalKind.WIZARD\"\n       class=\"flex items-center justify-between p-6\">\n    <div class=\"flex flex-col gap-0.5\">\n      @if (config.title) {\n        <h2 class=\"m-0 text-xl font-semibold text-base-content\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      }\n      @if (config.subtitle) {\n        <p class=\"m-0 text-sm text-base-content/60 font-normal\">{{ config.subtitle }}</p>\n      }\n    </div>\n    @if (showCloseButton) {\n      <button\n        class=\"bg-transparent border-none text-2xl cursor-pointer text-base-content/50 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-base-200 hover:text-base-content\"\n        (click)=\"onCloseButtonClick()\"\n        aria-label=\"Close modal\"\n      >\n        \u00D7\n      </button>\n    }\n  </div>\n  @if (config.description) {\n    <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" id=\"mn-modal-description\">{{ config.description }}</p>\n  }\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    @if (config.kind === ModalKind.WIZARD) {\n      <mn-wizard-body\n        [config]=\"asWizard(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"block h-full\"\n      ></mn-wizard-body>\n    }\n\n    @if (config.kind === ModalKind.FORM) {\n      <mn-form-body\n        [config]=\"asForm(config)\"\n        [modalRef]=\"$any(modalRef)\"\n        class=\"block h-full\"\n      ></mn-form-body>\n    }\n\n    @if (config.kind === ModalKind.CONFIRMATION) {\n      <mn-confirmation-body\n        [config]=\"asConfirmation(config)\"\n        [modalRef]=\"$any(modalRef)\"\n      ></mn-confirmation-body>\n    }\n\n    @if (config.kind === ModalKind.CUSTOM) {\n      <mn-custom-body-host\n        [config]=\"asCustom(config)\"\n        [modalRef]=\"$any(modalRef)\"\n      ></mn-custom-body-host>\n    }\n  </div>\n\n  <!-- Custom Footer Actions (not for wizard modals, they render their own) -->\n  @if (hasCustomFooterActions && config.kind !== ModalKind.WIZARD) {\n    <div class=\"flex gap-3 p-6 border-t border-base-300\">\n      <mn-footer-actions\n        [actions]=\"config.footerActions || []\"\n        (actionClick)=\"onFooterAction($event)\"\n      ></mn-footer-actions>\n    </div>\n  }\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}\n"] }]
+        }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
                 type: Input
@@ -6051,7 +5914,7 @@ class MnModalService {
         const componentRef = createComponent(MnModalShellComponent, {
             environmentInjector: this.injector,
         });
-        // Set the config on the component
+        // TModel is erased at the shell boundary — the shell only needs TResult
         componentRef.instance.config = config;
         // Create modal ref
         const modalRef = new MnModalRef(componentRef, config);
@@ -6362,11 +6225,11 @@ class MnList {
         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        <mn-lib-checkbox\n          (checkedChange)=\"toggleAll()\"\n          [checked]=\"allSelected\"\n          [props]=\"{ id: 'mn-list-select-all', label: 'Select all', size: 'sm' }\"\n        ></mn-lib-checkbox>\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 (click)=\"$event.stopPropagation()\" class=\"shrink-0\">\n            <mn-lib-checkbox\n              (checkedChange)=\"toggleItem(item)\"\n              [checked]=\"isSelected(item)\"\n              [props]=\"{ id: 'mn-list-item-' + $index, size: 'sm' }\"\n            ></mn-lib-checkbox>\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      <mn-lib-select\n        (ngModelChange)=\"onPageSizeChange($event)\"\n        [ngModel]=\"pageSize\"\n        [props]=\"{\n          id: 'mn-list-page-size',\n          options: pageSizeSelectOptions,\n          size: 'sm'\n        }\"\n      ></mn-lib-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: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { 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 });
+    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        <mn-lib-checkbox\n          (checkedChange)=\"toggleAll()\"\n          [checked]=\"allSelected\"\n          [props]=\"{ id: 'mn-list-select-all', label: 'Select all', size: 'sm' }\"\n        ></mn-lib-checkbox>\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        (keyup.enter)=\"onItemClick(item)\"\n        (click)=\"onItemClick(item)\"\n        [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n      >\n        <!-- Selection checkbox -->\n        @if (hasSelection) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div (click)=\"$event.stopPropagation()\" class=\"shrink-0\">\n            <mn-lib-checkbox\n              (checkedChange)=\"toggleItem(item)\"\n              [checked]=\"isSelected(item)\"\n              [props]=\"{ id: 'mn-list-item-' + $index, size: 'sm' }\"\n            ></mn-lib-checkbox>\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      <mn-lib-select\n        (ngModelChange)=\"onPageSizeChange($event)\"\n        [ngModel]=\"pageSize\"\n        [props]=\"{\n          id: 'mn-list-page-size',\n          options: pageSizeSelectOptions,\n          size: 'sm'\n        }\"\n      ></mn-lib-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: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: MnList, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-list', standalone: true, imports: [NgClass, NgTemplateOutlet, MnButton, MnCheckbox, MnSelect, 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    <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        <mn-lib-checkbox\n          (checkedChange)=\"toggleAll()\"\n          [checked]=\"allSelected\"\n          [props]=\"{ id: 'mn-list-select-all', label: 'Select all', size: 'sm' }\"\n        ></mn-lib-checkbox>\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 (click)=\"$event.stopPropagation()\" class=\"shrink-0\">\n            <mn-lib-checkbox\n              (checkedChange)=\"toggleItem(item)\"\n              [checked]=\"isSelected(item)\"\n              [props]=\"{ id: 'mn-list-item-' + $index, size: 'sm' }\"\n            ></mn-lib-checkbox>\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      <mn-lib-select\n        (ngModelChange)=\"onPageSizeChange($event)\"\n        [ngModel]=\"pageSize\"\n        [props]=\"{\n          id: 'mn-list-page-size',\n          options: pageSizeSelectOptions,\n          size: 'sm'\n        }\"\n      ></mn-lib-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" }]
+            args: [{ selector: 'mn-list', standalone: true, imports: [NgClass, NgTemplateOutlet, MnButton, MnCheckbox, MnSelect, 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    <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        <mn-lib-checkbox\n          (checkedChange)=\"toggleAll()\"\n          [checked]=\"allSelected\"\n          [props]=\"{ id: 'mn-list-select-all', label: 'Select all', size: 'sm' }\"\n        ></mn-lib-checkbox>\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        (keyup.enter)=\"onItemClick(item)\"\n        (click)=\"onItemClick(item)\"\n        [attr.tabindex]=\"dataSource.onItemClick ? 0 : null\"\n      >\n        <!-- Selection checkbox -->\n        @if (hasSelection) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div (click)=\"$event.stopPropagation()\" class=\"shrink-0\">\n            <mn-lib-checkbox\n              (checkedChange)=\"toggleItem(item)\"\n              [checked]=\"isSelected(item)\"\n              [props]=\"{ id: 'mn-list-item-' + $index, size: 'sm' }\"\n            ></mn-lib-checkbox>\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      <mn-lib-select\n        (ngModelChange)=\"onPageSizeChange($event)\"\n        [ngModel]=\"pageSize\"\n        [props]=\"{\n          id: 'mn-list-page-size',\n          options: pageSizeSelectOptions,\n          size: 'sm'\n        }\"\n      ></mn-lib-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: [{
@@ -6466,10 +6329,10 @@ const MN_CALENDAR_COMPONENT_NAME = 'mn-calendar';
  * Provider helper that wires the calendar into the `mn-config` system.
  *
  * Add this to the `providers` array of the component (or module) that hosts
- * `<app-calendar-view>`. It reads defaults and overrides from `mn-config.json5`
+ * `<mn-calendar-view>`. It reads defaults and overrides from `mn-config.json5`
  * under the key `"mn-calendar"` and provides them via {@link MN_CALENDAR_CONFIG}.
  *
- * @param initial — optional partial defaults merged before config-file values.
+ * @param initial — optional partial defaults merged before config-file values.
  */
 function provideMnCalendarConfig(initial) {
     return provideMnComponentConfig(MN_CALENDAR_CONFIG, MN_CALENDAR_COMPONENT_NAME, initial);
@@ -6516,7 +6379,8 @@ const CALENDAR_DATE_FORMATTER = new InjectionToken('CalendarDateFormatter');
  */
 class DefaultCalendarDateFormatter {
     locale;
-    constructor(config) {
+    constructor() {
+        const config = inject(CALENDAR_CONFIG, { optional: true });
         this.locale = config?.locale ?? DEFAULT_CALENDAR_CONFIG.locale;
     }
     /** Formats an hour and minute pair into a locale time string (e.g. "09:00 AM"). */
@@ -6561,20 +6425,15 @@ class DefaultCalendarDateFormatter {
     formatMonthName(date) {
         return Promise.resolve(date.toLocaleString(this.locale, { month: 'long', year: 'numeric' }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DefaultCalendarDateFormatter, deps: [{ token: CALENDAR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DefaultCalendarDateFormatter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DefaultCalendarDateFormatter });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DefaultCalendarDateFormatter, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [CALENDAR_CONFIG]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 /**
- * Month grid view showing a 7×6 grid of day cells.
+ * Month grid view showing a 7×6 grid of day cells.
  *
  * Each cell displays the day number and up to 3 coloured dots representing
  * events on that day. Clicking a cell emits `dayClicked`.
@@ -6636,7 +6495,7 @@ class CalendarMonthComponent {
     trackByEventDot(_index, event) {
         return event.id;
     }
-    /** Builds the 42-cell month grid (6 rows × 7 columns). */
+    /** Builds the 42-cell month grid (6 rows × 7 columns). */
     buildMonth() {
         if (!this.focusDay)
             return;
@@ -6677,11 +6536,11 @@ class CalendarMonthComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarMonthComponent, isStandalone: true, selector: "app-calendar-month", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config" }, outputs: { dayClicked: "dayClicked" }, ngImport: i0, template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    @for (day of longDayNames; track day) {\n      <div class=\"day-header\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"month-grid\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"month-cell\"\n        [class.other-month]=\"!item.isCurrentMonth\"\n        [class.today]=\"item.isToday\"\n        (click)=\"onDayClick(item.date)\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"day-number\">{{ item.dayNumber }}</span>\n        <div class=\"month-events\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"month-event-dot\"\n              [style.background-color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n            </div>\n          }\n          @if (item.events.length > 3) {\n            <span class=\"more-events\">+{{ item.events.length - 3 }}</span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid var(--color-base-300)}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid var(--color-base-200);cursor:pointer;transition:background .15s}.month-cell:hover{background:var(--color-base-200)}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:var(--color-primary);color:var(--color-primary-content, white);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:var(--color-base-content, #6b7280);opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarMonthComponent, isStandalone: true, selector: "mn-calendar-month", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config" }, outputs: { dayClicked: "dayClicked" }, ngImport: i0, template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    @for (day of longDayNames; track day) {\n      <div class=\"day-header\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"month-grid\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"month-cell\"\n        [class.other-month]=\"!item.isCurrentMonth\"\n        [class.today]=\"item.isToday\"\n        (keyup.enter)=\"onDayClick(item.date)\"\n        (click)=\"onDayClick(item.date)\"\n        tabindex=\"0\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"day-number\">{{ item.dayNumber }}</span>\n        <div class=\"month-events\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"month-event-dot\"\n              [style.background-color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n            </div>\n          }\n          @if (item.events.length > 3) {\n            <span class=\"more-events\">+{{ item.events.length - 3 }}</span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid var(--color-base-300)}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid var(--color-base-200);cursor:pointer;transition:background .15s}.month-cell:hover{background:var(--color-base-200)}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:var(--color-primary);color:var(--color-primary-content, white);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:var(--color-base-content, #6b7280);opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarMonthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-calendar-month', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    @for (day of longDayNames; track day) {\n      <div class=\"day-header\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"month-grid\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"month-cell\"\n        [class.other-month]=\"!item.isCurrentMonth\"\n        [class.today]=\"item.isToday\"\n        (click)=\"onDayClick(item.date)\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"day-number\">{{ item.dayNumber }}</span>\n        <div class=\"month-events\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"month-event-dot\"\n              [style.background-color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n            </div>\n          }\n          @if (item.events.length > 3) {\n            <span class=\"more-events\">+{{ item.events.length - 3 }}</span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid var(--color-base-300)}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid var(--color-base-200);cursor:pointer;transition:background .15s}.month-cell:hover{background:var(--color-base-200)}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:var(--color-primary);color:var(--color-primary-content, white);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:var(--color-base-content, #6b7280);opacity:.6}\n"] }]
+            args: [{ selector: 'mn-calendar-month', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    @for (day of longDayNames; track day) {\n      <div class=\"day-header\" role=\"columnheader\">{{ day }}</div>\n    }\n  </div>\n  <div class=\"month-grid\">\n    @for (item of monthItems; track item.date.getTime()) {\n      <div\n        class=\"month-cell\"\n        [class.other-month]=\"!item.isCurrentMonth\"\n        [class.today]=\"item.isToday\"\n        (keyup.enter)=\"onDayClick(item.date)\"\n        (click)=\"onDayClick(item.date)\"\n        tabindex=\"0\"\n        role=\"gridcell\"\n        [attr.aria-label]=\"item.date.toDateString()\">\n        <span class=\"day-number\">{{ item.dayNumber }}</span>\n        <div class=\"month-events\">\n          @for (event of item.events.slice(0, 3); track $index) {\n            <div\n              class=\"month-event-dot\"\n              [style.background-color]=\"event.color.primaryColor\"\n              [title]=\"event.title\">\n            </div>\n          }\n          @if (item.events.length > 3) {\n            <span class=\"more-events\">+{{ item.events.length - 3 }}</span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid var(--color-base-300)}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid var(--color-base-200);cursor:pointer;transition:background .15s}.month-cell:hover{background:var(--color-base-200)}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:var(--color-primary);color:var(--color-primary-content, white);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:var(--color-base-content, #6b7280);opacity:.6}\n"] }]
         }], ctorParameters: () => [], propDecorators: { focusDay: [{
                 type: Input
             }], eventsChanged: [{
@@ -6869,13 +6728,13 @@ class CalendarUtility {
  * with the event's colour scheme applied as background and left-border accent.
  */
 class CalendarEventDefaultComponent {
-    cdr;
+    cdr = inject(ChangeDetectorRef);
     /** The event to render. Set by {@link CalendarEventComponent} after creation. */
     event;
     formattedTime = '';
     formatter;
-    constructor(formatter, cdr) {
-        this.cdr = cdr;
+    constructor() {
+        const formatter = inject(CALENDAR_DATE_FORMATTER, { optional: true });
         this.formatter = formatter ?? new DefaultCalendarDateFormatter();
     }
     async ngOnInit() {
@@ -6886,18 +6745,13 @@ class CalendarEventDefaultComponent {
             this.cdr.markForCheck();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventDefaultComponent, deps: [{ token: CALENDAR_DATE_FORMATTER, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarEventDefaultComponent, isStandalone: true, selector: "app-calendar-event-default", ngImport: i0, template: "<div class=\"calendar-event-default\" [style.background-color]=\"event.color.secondaryColor\" [style.border-left-color]=\"event.color.primaryColor\" [style.color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedTime }}</div>\n  @if (event.description) {\n    <div class=\"event-description\">{{ event.description }}</div>\n  }\n</div>\n", styles: [".calendar-event-default{padding:4px 8px;border-left:3px solid var(--color-primary, #3b82f6);border-radius:4px;font-size:12px;height:100%;overflow:hidden;cursor:pointer}.event-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}.event-time{font-size:11px;opacity:.85;color:inherit}.event-description{font-size:11px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarEventDefaultComponent, isStandalone: true, selector: "mn-calendar-event-default", ngImport: i0, template: "<div class=\"calendar-event-default\" [style.background-color]=\"event.color.secondaryColor\" [style.border-left-color]=\"event.color.primaryColor\" [style.color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedTime }}</div>\n  @if (event.description) {\n    <div class=\"event-description\">{{ event.description }}</div>\n  }\n</div>\n", styles: [".calendar-event-default{padding:4px 8px;border-left:3px solid var(--color-primary, #3b82f6);border-radius:4px;font-size:12px;height:100%;overflow:hidden;cursor:pointer}.event-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}.event-time{font-size:11px;opacity:.85;color:inherit}.event-description{font-size:11px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventDefaultComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-calendar-event-default', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-event-default\" [style.background-color]=\"event.color.secondaryColor\" [style.border-left-color]=\"event.color.primaryColor\" [style.color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedTime }}</div>\n  @if (event.description) {\n    <div class=\"event-description\">{{ event.description }}</div>\n  }\n</div>\n", styles: [".calendar-event-default{padding:4px 8px;border-left:3px solid var(--color-primary, #3b82f6);border-radius:4px;font-size:12px;height:100%;overflow:hidden;cursor:pointer}.event-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}.event-time{font-size:11px;opacity:.85;color:inherit}.event-description{font-size:11px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [CALENDAR_DATE_FORMATTER]
-                }] }, { type: i0.ChangeDetectorRef }] });
+            args: [{ selector: 'mn-calendar-event-default', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-event-default\" [style.background-color]=\"event.color.secondaryColor\" [style.border-left-color]=\"event.color.primaryColor\" [style.color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedTime }}</div>\n  @if (event.description) {\n    <div class=\"event-description\">{{ event.description }}</div>\n  }\n</div>\n", styles: [".calendar-event-default{padding:4px 8px;border-left:3px solid var(--color-primary, #3b82f6);border-radius:4px;font-size:12px;height:100%;overflow:hidden;cursor:pointer}.event-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}.event-time{font-size:11px;opacity:.85;color:inherit}.event-description{font-size:11px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Dynamic event renderer that injects a custom or default event component
@@ -6941,11 +6795,11 @@ class CalendarEventComponent {
         this.rendered = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarEventComponent, isStandalone: true, selector: "app-calendar-event", inputs: { event: "event", customComponent: "customComponent" }, outputs: { eventClicked: "eventClicked" }, viewQueries: [{ propertyName: "eventContainer", first: true, predicate: ["eventContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-event-wrapper\" (click)=\"onEventClick()\">\n  <ng-template #eventContainer></ng-template>\n</div>\n", styles: [".calendar-event-wrapper{height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarEventComponent, isStandalone: true, selector: "mn-calendar-event", inputs: { event: "event", customComponent: "customComponent" }, outputs: { eventClicked: "eventClicked" }, viewQueries: [{ propertyName: "eventContainer", first: true, predicate: ["eventContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div (click)=\"onEventClick()\" (keyup.enter)=\"onEventClick()\" class=\"calendar-event-wrapper\" tabindex=\"0\">\n  <ng-template #eventContainer></ng-template>\n</div>\n", styles: [".calendar-event-wrapper{height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-calendar-event', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-event-wrapper\" (click)=\"onEventClick()\">\n  <ng-template #eventContainer></ng-template>\n</div>\n", styles: [".calendar-event-wrapper{height:100%;width:100%}\n"] }]
+            args: [{ selector: 'mn-calendar-event', standalone: true, imports: [CommonModule], template: "<div (click)=\"onEventClick()\" (keyup.enter)=\"onEventClick()\" class=\"calendar-event-wrapper\" tabindex=\"0\">\n  <ng-template #eventContainer></ng-template>\n</div>\n", styles: [".calendar-event-wrapper{height:100%;width:100%}\n"] }]
         }], propDecorators: { event: [{
                 type: Input
             }], customComponent: [{
@@ -6964,8 +6818,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * so they appear side-by-side rather than stacked.
  */
 class CalendarWeekComponent {
-    layoutService;
-    cdr;
+    layoutService = inject(CalendarEventLayoutService);
+    cdr = inject(ChangeDetectorRef);
     /** The date around which the week is centred. */
     focusDay;
     /** Observable that emits the full event list whenever it changes. */
@@ -6991,9 +6845,7 @@ class CalendarWeekComponent {
     formatter;
     resolvedConfig;
     currentTimeInterval;
-    constructor(layoutService, cdr) {
-        this.layoutService = layoutService;
-        this.cdr = cdr;
+    constructor() {
         this.formatter = new DefaultCalendarDateFormatter();
     }
     ngOnInit() {
@@ -7081,7 +6933,7 @@ class CalendarWeekComponent {
         }
         this.hourRows = rows;
     }
-    /** Builds the 7 day columns for the current week (Monday–Sunday). */
+    /** Builds the 7 day columns for the current week (Monday–Sunday). */
     buildColumns() {
         if (!this.focusDay)
             return;
@@ -7160,13 +7012,13 @@ class CalendarWeekComponent {
             this.currentTimeRow = 0;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarWeekComponent, deps: [{ token: CalendarEventLayoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarWeekComponent, isStandalone: true, selector: "app-calendar-week", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<div class=\"calendar-week\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"week-header\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div class=\"time-gutter-header\"></div>\n    @for (col of columns; track col.dayName; let i = $index) {\n      <div class=\"day-column-header\"\n        [class.today]=\"col.isToday\"\n        [style.grid-column]=\"getHeaderColumn(i)\"\n        role=\"columnheader\">\n        <span class=\"day-name\">{{ col.dayName }}</span>\n        <span class=\"day-number\">{{ col.dayNumber }}</span>\n      </div>\n    }\n  </div>\n  <div class=\"week-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-label\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"week-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-line\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && currentTimeCol) {\n        <div class=\"current-time-line\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"currentTimeCol\">\n          <div class=\"current-time-dot\"></div>\n          <div class=\"current-time-rule\"></div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"week-event\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n          (click)=\"onEventClick(event)\">\n          <app-calendar-event [event]=\"event\" [customComponent]=\"calendarEventComponent\"></app-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".calendar-week{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.week-header{display:grid;border-bottom:1px solid var(--color-base-300)}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:var(--color-primary);font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:var(--color-base-content, #6b7280);opacity:.7}.day-number{font-size:18px;font-weight:600}.week-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:var(--color-base-content, #6b7280);opacity:.7;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.week-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid var(--color-base-200);pointer-events:none;min-height:0}.week-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:var(--color-error, #ef4444);border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:var(--color-error, #ef4444);width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarEventComponent, selector: "app-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarWeekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarWeekComponent, isStandalone: true, selector: "mn-calendar-week", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<div class=\"calendar-week\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"week-header\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div class=\"time-gutter-header\"></div>\n    @for (col of columns; track col.dayName; let i = $index) {\n      <div class=\"day-column-header\"\n        [class.today]=\"col.isToday\"\n        [style.grid-column]=\"getHeaderColumn(i)\"\n        role=\"columnheader\">\n        <span class=\"day-name\">{{ col.dayName }}</span>\n        <span class=\"day-number\">{{ col.dayNumber }}</span>\n      </div>\n    }\n  </div>\n  <div class=\"week-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-label\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"week-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-line\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && currentTimeCol) {\n        <div class=\"current-time-line\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"currentTimeCol\">\n          <div class=\"current-time-dot\"></div>\n          <div class=\"current-time-rule\"></div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"week-event\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".calendar-week{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.week-header{display:grid;border-bottom:1px solid var(--color-base-300)}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:var(--color-primary);font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:var(--color-base-content, #6b7280);opacity:.7}.day-number{font-size:18px;font-weight:600}.week-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:var(--color-base-content, #6b7280);opacity:.7;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.week-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid var(--color-base-200);pointer-events:none;min-height:0}.week-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:var(--color-error, #ef4444);border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:var(--color-error, #ef4444);width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarEventComponent, selector: "mn-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarWeekComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-calendar-week', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<div class=\"calendar-week\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"week-header\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div class=\"time-gutter-header\"></div>\n    @for (col of columns; track col.dayName; let i = $index) {\n      <div class=\"day-column-header\"\n        [class.today]=\"col.isToday\"\n        [style.grid-column]=\"getHeaderColumn(i)\"\n        role=\"columnheader\">\n        <span class=\"day-name\">{{ col.dayName }}</span>\n        <span class=\"day-number\">{{ col.dayNumber }}</span>\n      </div>\n    }\n  </div>\n  <div class=\"week-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-label\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"week-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-line\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && currentTimeCol) {\n        <div class=\"current-time-line\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"currentTimeCol\">\n          <div class=\"current-time-dot\"></div>\n          <div class=\"current-time-rule\"></div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"week-event\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n          (click)=\"onEventClick(event)\">\n          <app-calendar-event [event]=\"event\" [customComponent]=\"calendarEventComponent\"></app-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".calendar-week{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.week-header{display:grid;border-bottom:1px solid var(--color-base-300)}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:var(--color-primary);font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:var(--color-base-content, #6b7280);opacity:.7}.day-number{font-size:18px;font-weight:600}.week-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:var(--color-base-content, #6b7280);opacity:.7;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.week-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid var(--color-base-200);pointer-events:none;min-height:0}.week-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:var(--color-error, #ef4444);border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:var(--color-error, #ef4444);width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: CalendarEventLayoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { focusDay: [{
+            args: [{ selector: 'mn-calendar-week', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<div class=\"calendar-week\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"week-header\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div class=\"time-gutter-header\"></div>\n    @for (col of columns; track col.dayName; let i = $index) {\n      <div class=\"day-column-header\"\n        [class.today]=\"col.isToday\"\n        [style.grid-column]=\"getHeaderColumn(i)\"\n        role=\"columnheader\">\n        <span class=\"day-name\">{{ col.dayName }}</span>\n        <span class=\"day-number\">{{ col.dayNumber }}</span>\n      </div>\n    }\n  </div>\n  <div class=\"week-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-label\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"week-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-line\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && currentTimeCol) {\n        <div class=\"current-time-line\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"currentTimeCol\">\n          <div class=\"current-time-dot\"></div>\n          <div class=\"current-time-rule\"></div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"week-event\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".calendar-week{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.week-header{display:grid;border-bottom:1px solid var(--color-base-300)}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:var(--color-primary);font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:var(--color-base-content, #6b7280);opacity:.7}.day-number{font-size:18px;font-weight:600}.week-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:var(--color-base-content, #6b7280);opacity:.7;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.week-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid var(--color-base-200);pointer-events:none;min-height:0}.week-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:var(--color-error, #ef4444);border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:var(--color-error, #ef4444);width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { focusDay: [{
                 type: Input
             }], eventsChanged: [{
                 type: Input
@@ -7187,8 +7039,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * {@link CalendarEventLayoutService}.
  */
 class CalendarDayComponent {
-    layoutService;
-    cdr;
+    layoutService = inject(CalendarEventLayoutService);
+    cdr = inject(ChangeDetectorRef);
     /** The date to display. */
     focusDay;
     /** Observable that emits the full event list whenever it changes. */
@@ -7213,9 +7065,7 @@ class CalendarDayComponent {
     formatter;
     resolvedConfig;
     currentTimeInterval;
-    constructor(layoutService, cdr) {
-        this.layoutService = layoutService;
-        this.cdr = cdr;
+    constructor() {
         this.formatter = new DefaultCalendarDateFormatter();
     }
     ngOnInit() {
@@ -7326,13 +7176,13 @@ class CalendarDayComponent {
             this.isToday = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarDayComponent, deps: [{ token: CalendarEventLayoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarDayComponent, isStandalone: true, selector: "app-calendar-day", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<div class=\"calendar-day\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"day-header\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\" [class.today]=\"isToday\" role=\"columnheader\">\n      <span class=\"day-name\">{{ dayName }}</span>\n      <span class=\"day-number\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"day-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-label\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"day-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-line\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && isToday) {\n        <div class=\"current-time-line\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"'1 / -1'\">\n          <div class=\"current-time-dot\"></div>\n          <div class=\"current-time-rule\"></div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"day-event\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n          (click)=\"onEventClick(event)\">\n          <app-calendar-event [event]=\"event\" [customComponent]=\"calendarEventComponent\"></app-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".calendar-day{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.day-header{display:grid;grid-template-columns:60px 1fr;border-bottom:1px solid var(--color-base-300)}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:var(--color-primary);font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:var(--color-base-content, #6b7280);opacity:.7}.day-number{font-size:18px;font-weight:600}.day-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:var(--color-base-content, #6b7280);opacity:.7;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.day-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid var(--color-base-200);pointer-events:none;min-height:0}.day-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:var(--color-error, #ef4444);border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:var(--color-error, #ef4444);width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarEventComponent, selector: "app-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarDayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarDayComponent, isStandalone: true, selector: "mn-calendar-day", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<div class=\"calendar-day\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"day-header\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\" [class.today]=\"isToday\" role=\"columnheader\">\n      <span class=\"day-name\">{{ dayName }}</span>\n      <span class=\"day-number\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"day-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-label\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"day-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-line\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && isToday) {\n        <div class=\"current-time-line\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"'1 / -1'\">\n          <div class=\"current-time-dot\"></div>\n          <div class=\"current-time-rule\"></div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"day-event\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".calendar-day{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.day-header{display:grid;grid-template-columns:60px 1fr;border-bottom:1px solid var(--color-base-300)}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:var(--color-primary);font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:var(--color-base-content, #6b7280);opacity:.7}.day-number{font-size:18px;font-weight:600}.day-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:var(--color-base-content, #6b7280);opacity:.7;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.day-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid var(--color-base-200);pointer-events:none;min-height:0}.day-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:var(--color-error, #ef4444);border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:var(--color-error, #ef4444);width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarEventComponent, selector: "mn-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarDayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-calendar-day', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<div class=\"calendar-day\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"day-header\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\" [class.today]=\"isToday\" role=\"columnheader\">\n      <span class=\"day-name\">{{ dayName }}</span>\n      <span class=\"day-number\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"day-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-label\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"day-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-line\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && isToday) {\n        <div class=\"current-time-line\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"'1 / -1'\">\n          <div class=\"current-time-dot\"></div>\n          <div class=\"current-time-rule\"></div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"day-event\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n          (click)=\"onEventClick(event)\">\n          <app-calendar-event [event]=\"event\" [customComponent]=\"calendarEventComponent\"></app-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".calendar-day{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.day-header{display:grid;grid-template-columns:60px 1fr;border-bottom:1px solid var(--color-base-300)}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:var(--color-primary);font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:var(--color-base-content, #6b7280);opacity:.7}.day-number{font-size:18px;font-weight:600}.day-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:var(--color-base-content, #6b7280);opacity:.7;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.day-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid var(--color-base-200);pointer-events:none;min-height:0}.day-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:var(--color-error, #ef4444);border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:var(--color-error, #ef4444);width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: CalendarEventLayoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { focusDay: [{
+            args: [{ selector: 'mn-calendar-day', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<div class=\"calendar-day\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"day-header\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\" [class.today]=\"isToday\" role=\"columnheader\">\n      <span class=\"day-name\">{{ dayName }}</span>\n      <span class=\"day-number\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"day-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-label\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n          {{ row.hourLabel }}\n        </div>\n      }\n    </div>\n    <div class=\"day-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      @for (row of hourRows; track row.topRow) {\n        <div class=\"hour-line\"\n          [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n          [style.grid-column]=\"'1 / -1'\">\n        </div>\n      }\n      @if (currentTimeRow > 0 && isToday) {\n        <div class=\"current-time-line\"\n          [style.grid-row]=\"currentTimeRow\"\n          [style.grid-column]=\"'1 / -1'\">\n          <div class=\"current-time-dot\"></div>\n          <div class=\"current-time-rule\"></div>\n        </div>\n      }\n      @for (event of displayEvents; track $index) {\n        <div class=\"day-event\"\n          [style.grid-row]=\"getEventRow(event)\"\n          [style.grid-column]=\"getEventColumn(event)\"\n             (click)=\"onEventClick(event)\"\n             (keyup.enter)=\"onEventClick(event)\"\n             tabindex=\"0\">\n          <mn-calendar-event [customComponent]=\"calendarEventComponent\" [event]=\"event\"></mn-calendar-event>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".calendar-day{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.day-header{display:grid;grid-template-columns:60px 1fr;border-bottom:1px solid var(--color-base-300)}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:var(--color-primary);font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:var(--color-base-content, #6b7280);opacity:.7}.day-number{font-size:18px;font-weight:600}.day-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:var(--color-base-content, #6b7280);opacity:.7;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.day-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid var(--color-base-200);pointer-events:none;min-height:0}.day-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:var(--color-error, #ef4444);border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:var(--color-error, #ef4444);width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { focusDay: [{
                 type: Input
             }], eventsChanged: [{
                 type: Input
@@ -7357,7 +7207,8 @@ class UpcomingEventRowComponent {
     eventClicked = new EventEmitter();
     formattedDate = '';
     formatter;
-    constructor(formatter) {
+    constructor() {
+        const formatter = inject(CALENDAR_DATE_FORMATTER, { optional: true });
         this.formatter = formatter ?? new DefaultCalendarDateFormatter();
     }
     async ngOnInit() {
@@ -7367,18 +7218,13 @@ class UpcomingEventRowComponent {
             this.formattedDate = `${start} - ${end}`;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventRowComponent, deps: [{ token: CALENDAR_DATE_FORMATTER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UpcomingEventRowComponent, isStandalone: true, selector: "app-upcoming-event-row", inputs: { event: "event" }, outputs: { eventClicked: "eventClicked" }, ngImport: i0, template: "<div class=\"upcoming-event-row\" (click)=\"eventClicked.emit(event)\" [style.border-left-color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedDate }}</div>\n  @if (event.description) {\n    <div class=\"event-description\">{{ event.description }}</div>\n  }\n</div>\n", styles: [".upcoming-event-row{padding:8px 12px;border-left:3px solid var(--color-primary, #3b82f6);margin-bottom:8px;cursor:pointer;border-radius:4px;transition:background .15s}.upcoming-event-row:hover{background:var(--color-base-200)}.event-title{font-weight:600;font-size:13px}.event-time{font-size:12px;color:var(--color-base-content, #6b7280);opacity:.7}.event-description{font-size:12px;color:var(--color-base-content, #9ca3af);opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UpcomingEventRowComponent, isStandalone: true, selector: "mn-upcoming-event-row", inputs: { event: "event" }, outputs: { eventClicked: "eventClicked" }, ngImport: i0, template: "<div (click)=\"eventClicked.emit(event)\" (keyup.enter)=\"eventClicked.emit(event)\" [style.border-left-color]=\"event.color.primaryColor\" class=\"upcoming-event-row\"\n     tabindex=\"0\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedDate }}</div>\n  @if (event.description) {\n    <div class=\"event-description\">{{ event.description }}</div>\n  }\n</div>\n", styles: [".upcoming-event-row{padding:8px 12px;border-left:3px solid var(--color-primary, #3b82f6);margin-bottom:8px;cursor:pointer;border-radius:4px;transition:background .15s}.upcoming-event-row:hover{background:var(--color-base-200)}.event-title{font-weight:600;font-size:13px}.event-time{font-size:12px;color:var(--color-base-content, #6b7280);opacity:.7}.event-description{font-size:12px;color:var(--color-base-content, #9ca3af);opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-upcoming-event-row', standalone: true, imports: [CommonModule], template: "<div class=\"upcoming-event-row\" (click)=\"eventClicked.emit(event)\" [style.border-left-color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedDate }}</div>\n  @if (event.description) {\n    <div class=\"event-description\">{{ event.description }}</div>\n  }\n</div>\n", styles: [".upcoming-event-row{padding:8px 12px;border-left:3px solid var(--color-primary, #3b82f6);margin-bottom:8px;cursor:pointer;border-radius:4px;transition:background .15s}.upcoming-event-row:hover{background:var(--color-base-200)}.event-title{font-weight:600;font-size:13px}.event-time{font-size:12px;color:var(--color-base-content, #6b7280);opacity:.7}.event-description{font-size:12px;color:var(--color-base-content, #9ca3af);opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [CALENDAR_DATE_FORMATTER]
-                }] }], propDecorators: { event: [{
+            args: [{ selector: 'mn-upcoming-event-row', standalone: true, imports: [CommonModule], template: "<div (click)=\"eventClicked.emit(event)\" (keyup.enter)=\"eventClicked.emit(event)\" [style.border-left-color]=\"event.color.primaryColor\" class=\"upcoming-event-row\"\n     tabindex=\"0\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedDate }}</div>\n  @if (event.description) {\n    <div class=\"event-description\">{{ event.description }}</div>\n  }\n</div>\n", styles: [".upcoming-event-row{padding:8px 12px;border-left:3px solid var(--color-primary, #3b82f6);margin-bottom:8px;cursor:pointer;border-radius:4px;transition:background .15s}.upcoming-event-row:hover{background:var(--color-base-200)}.event-title{font-weight:600;font-size:13px}.event-time{font-size:12px;color:var(--color-base-content, #6b7280);opacity:.7}.event-description{font-size:12px;color:var(--color-base-content, #9ca3af);opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { event: [{
                 type: Input
             }], eventClicked: [{
                 type: Output
@@ -7434,11 +7280,11 @@ class UpcomingEventsComponent {
         return event.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UpcomingEventsComponent, isStandalone: true, selector: "app-upcoming-events", inputs: { eventsChanged: "eventsChanged", config: "config" }, outputs: { eventClicked: "eventClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  @for (event of upcomingEvents; track $index) {\n    <app-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </app-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"no-events\">{{ noEventsMessage }}</div>\n  }\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:var(--color-base-content, #9ca3af);opacity:.5;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UpcomingEventRowComponent, selector: "app-upcoming-event-row", inputs: ["event"], outputs: ["eventClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: UpcomingEventsComponent, isStandalone: true, selector: "mn-upcoming-events", inputs: { eventsChanged: "eventsChanged", config: "config" }, outputs: { eventClicked: "eventClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  @for (event of upcomingEvents; track $index) {\n    <mn-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </mn-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"no-events\">{{ noEventsMessage }}</div>\n  }\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:var(--color-base-content, #9ca3af);opacity:.5;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UpcomingEventRowComponent, selector: "mn-upcoming-event-row", inputs: ["event"], outputs: ["eventClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-upcoming-events', standalone: true, imports: [CommonModule, UpcomingEventRowComponent], template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  @for (event of upcomingEvents; track $index) {\n    <app-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </app-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"no-events\">{{ noEventsMessage }}</div>\n  }\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:var(--color-base-content, #9ca3af);opacity:.5;font-size:14px}\n"] }]
+            args: [{ selector: 'mn-upcoming-events', standalone: true, imports: [CommonModule, UpcomingEventRowComponent], template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  @for (event of upcomingEvents; track $index) {\n    <mn-upcoming-event-row\n      [event]=\"event\"\n      (eventClicked)=\"eventClicked.emit($event)\">\n    </mn-upcoming-event-row>\n  }\n  @if (upcomingEvents.length === 0) {\n    <div class=\"no-events\">{{ noEventsMessage }}</div>\n  }\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:var(--color-base-content, #9ca3af);opacity:.5;font-size:14px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { eventsChanged: [{
                 type: Input
             }], config: [{
@@ -7461,14 +7307,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  *
  * @example
  * ```html
- * <app-calendar-view
+ * <mn-calendar-view
  *   [showButton]="true"
  *   [buttonTitle]="'New Event'"
  *   [NewCalendarItemsEvent]="eventsEmitter"
  *   (RequestNewCalendarItemsEvent)="loadEvents($event)"
  *   (CalendarItemClickedEvent)="onEventClick($event)"
  *   (ButtonClickedEvent)="openModal()">
- * </app-calendar-view>
+ * </mn-calendar-view>
  * ```
  */
 class CalendarViewComponent {
@@ -7506,7 +7352,10 @@ class CalendarViewComponent {
     mnConfigRef;
     destroyRef = inject(DestroyRef);
     lang = inject(MnLanguageService);
-    constructor(formatter, mnConfig, legacyConfig) {
+    constructor() {
+        const formatter = inject(CALENDAR_DATE_FORMATTER, { optional: true });
+        const mnConfig = inject(MN_CALENDAR_CONFIG, { optional: true });
+        const legacyConfig = inject(CALENDAR_CONFIG, { optional: true });
         this.formatter = formatter ?? new DefaultCalendarDateFormatter();
         // Keep a reference to the injected config so we can re-read it after locale changes.
         this.mnConfigRef = mnConfig;
@@ -7594,7 +7443,7 @@ class CalendarViewComponent {
             this.setFocusDay(new Date(value));
         }
     }
-    /** Handles a day click from the month view — switches to day view. */
+    /** Handles a day click from the month view — switches to day view. */
     onMonthDayClick(date) {
         this.currentView = CalendarView.DAY;
         this.setFocusDay(date);
@@ -7637,14 +7486,14 @@ class CalendarViewComponent {
     updateDateInput() {
         this.dateInputValue = this.formatter.formatDateForFormControl(this.focusDay);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, deps: [{ token: CALENDAR_DATE_FORMATTER, optional: true }, { token: MN_CALENDAR_CONFIG, optional: true }, { token: CALENDAR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarViewComponent, isStandalone: true, selector: "app-calendar-view", inputs: { showButton: "showButton", buttonTitle: "buttonTitle", buttons: "buttons", CalendarEventComponent: "CalendarEventComponent", NewCalendarItemsEvent: "NewCalendarItemsEvent" }, outputs: { RequestNewCalendarItemsEvent: "RequestNewCalendarItemsEvent", CalendarItemClickedEvent: "CalendarItemClickedEvent", ButtonClickedEvent: "ButtonClickedEvent" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: CalendarViewComponent, isStandalone: true, selector: "mn-calendar-view", inputs: { showButton: "showButton", buttonTitle: "buttonTitle", buttons: "buttons", CalendarEventComponent: "CalendarEventComponent", NewCalendarItemsEvent: "NewCalendarItemsEvent" }, outputs: { RequestNewCalendarItemsEvent: "RequestNewCalendarItemsEvent", CalendarItemClickedEvent: "CalendarItemClickedEvent", ButtonClickedEvent: "ButtonClickedEvent" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
             provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  @if (isMobileView) {\n    <!-- Mobile (<375px): two rows \u2014 Today+action / date-nav -->\n    <div class=\"flex flex-col gap-2 py-3\">\n      <div class=\"flex items-center gap-2\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-2\">\n          @for (btn of buttons; track btn.label) {\n            <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n          }\n          @if (showButton) {\n            <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n          }\n        </div>\n      </div>\n      <div class=\"flex items-center gap-1\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n        <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n      </div>\n    </div>\n  } @else if (isTabletView) {\n    <!-- Tablet (375px\u20131023px): single row \u2014 Today / date-nav / action buttons -->\n    <div class=\"flex items-center gap-3 py-3\">\n      <div class=\"flex items-center gap-3 min-w-0 flex-1\">\n        <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-1 min-w-0\">\n          <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n          <div class=\"min-w-0 flex-1\">\n            <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n          </div>\n          <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        </div>\n      </div>\n      <div class=\"flex items-center gap-2 shrink-0\">\n        @for (btn of buttons; track btn.label) {\n          <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n        }\n        @if (showButton) {\n          <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- Desktop (\u22651024px): full row \u2014 Today / date-nav / view-switcher / action buttons -->\n    <div class=\"flex items-center justify-between gap-3 py-3\">\n      <div class=\"flex items-center gap-3\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-1\">\n          <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n          <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n          <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        </div>\n        <div class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\" aria-label=\"Calendar view\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              mnButton\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              role=\"tab\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              (click)=\"switchView(view.value)\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        @for (btn of buttons; track btn.label) {\n          <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n        }\n        @if (showButton) {\n          <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\">\n      @if (currentView === CalendarView.MONTH) {\n        <app-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </app-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <app-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </app-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <app-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </app-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <app-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarMonthComponent, selector: "app-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "app-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "app-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "app-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }] });
+        ], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  @if (isMobileView) {\n    <!-- Mobile (<375px): two rows \u00E2\u20AC\u201D Today+action / date-nav -->\n    <div class=\"flex flex-col gap-2 py-3\">\n      <div class=\"flex items-center gap-2\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-2\">\n          @for (btn of buttons; track btn.label) {\n            <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n          }\n          @if (showButton) {\n            <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n          }\n        </div>\n      </div>\n      <div class=\"flex items-center gap-1\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n        <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n      </div>\n    </div>\n  } @else if (isTabletView) {\n    <!-- Tablet (375px\u00E2\u20AC\u201C1023px): single row \u00E2\u20AC\u201D Today / date-nav / action buttons -->\n    <div class=\"flex items-center gap-3 py-3\">\n      <div class=\"flex items-center gap-3 min-w-0 flex-1\">\n        <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-1 min-w-0\">\n          <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n          <div class=\"min-w-0 flex-1\">\n            <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n          </div>\n          <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        </div>\n      </div>\n      <div class=\"flex items-center gap-2 shrink-0\">\n        @for (btn of buttons; track btn.label) {\n          <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n        }\n        @if (showButton) {\n          <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- Desktop (\u00E2\u2030\u00A51024px): full row \u00E2\u20AC\u201D Today / date-nav / view-switcher / action buttons -->\n    <div class=\"flex items-center justify-between gap-3 py-3\">\n      <div class=\"flex items-center gap-3\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-1\">\n          <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n          <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n          <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        </div>\n        <div class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\" aria-label=\"Calendar view\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              mnButton\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              role=\"tab\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              (click)=\"switchView(view.value)\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        @for (btn of buttons; track btn.label) {\n          <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n        }\n        @if (showButton) {\n          <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CalendarMonthComponent, selector: "mn-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "mn-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "mn-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "mn-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-calendar-view', standalone: true, imports: [
+            args: [{ selector: 'mn-calendar-view', standalone: true, imports: [
                         CommonModule,
                         CalendarMonthComponent,
                         CalendarWeekComponent,
@@ -7655,23 +7504,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         FormsModule
                     ], providers: [
                         provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
-                    ], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  @if (isMobileView) {\n    <!-- Mobile (<375px): two rows \u2014 Today+action / date-nav -->\n    <div class=\"flex flex-col gap-2 py-3\">\n      <div class=\"flex items-center gap-2\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-2\">\n          @for (btn of buttons; track btn.label) {\n            <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n          }\n          @if (showButton) {\n            <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n          }\n        </div>\n      </div>\n      <div class=\"flex items-center gap-1\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n        <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n      </div>\n    </div>\n  } @else if (isTabletView) {\n    <!-- Tablet (375px\u20131023px): single row \u2014 Today / date-nav / action buttons -->\n    <div class=\"flex items-center gap-3 py-3\">\n      <div class=\"flex items-center gap-3 min-w-0 flex-1\">\n        <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-1 min-w-0\">\n          <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n          <div class=\"min-w-0 flex-1\">\n            <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n          </div>\n          <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        </div>\n      </div>\n      <div class=\"flex items-center gap-2 shrink-0\">\n        @for (btn of buttons; track btn.label) {\n          <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n        }\n        @if (showButton) {\n          <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- Desktop (\u22651024px): full row \u2014 Today / date-nav / view-switcher / action buttons -->\n    <div class=\"flex items-center justify-between gap-3 py-3\">\n      <div class=\"flex items-center gap-3\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-1\">\n          <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n          <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n          <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        </div>\n        <div class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\" aria-label=\"Calendar view\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              mnButton\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              role=\"tab\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              (click)=\"switchView(view.value)\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        @for (btn of buttons; track btn.label) {\n          <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n        }\n        @if (showButton) {\n          <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\">\n      @if (currentView === CalendarView.MONTH) {\n        <app-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </app-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <app-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </app-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <app-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </app-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <app-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [CALENDAR_DATE_FORMATTER]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [MN_CALENDAR_CONFIG]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [CALENDAR_CONFIG]
-                }] }], propDecorators: { showButton: [{
+                    ], template: "<div class=\"w-full h-full flex flex-col\" role=\"application\" aria-label=\"Calendar\">\n\n  @if (isMobileView) {\n    <!-- Mobile (<375px): two rows \u00E2\u20AC\u201D Today+action / date-nav -->\n    <div class=\"flex flex-col gap-2 py-3\">\n      <div class=\"flex items-center gap-2\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-2\">\n          @for (btn of buttons; track btn.label) {\n            <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n          }\n          @if (showButton) {\n            <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n          }\n        </div>\n      </div>\n      <div class=\"flex items-center gap-1\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n        <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n      </div>\n    </div>\n  } @else if (isTabletView) {\n    <!-- Tablet (375px\u00E2\u20AC\u201C1023px): single row \u00E2\u20AC\u201D Today / date-nav / action buttons -->\n    <div class=\"flex items-center gap-3 py-3\">\n      <div class=\"flex items-center gap-3 min-w-0 flex-1\">\n        <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-1 min-w-0\">\n          <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n          <div class=\"min-w-0 flex-1\">\n            <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n          </div>\n          <button class=\"shrink-0\" mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        </div>\n      </div>\n      <div class=\"flex items-center gap-2 shrink-0\">\n        @for (btn of buttons; track btn.label) {\n          <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n        }\n        @if (showButton) {\n          <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n        }\n      </div>\n    </div>\n  } @else {\n    <!-- Desktop (\u00E2\u2030\u00A51024px): full row \u00E2\u20AC\u201D Today / date-nav / view-switcher / action buttons -->\n    <div class=\"flex items-center justify-between gap-3 py-3\">\n      <div class=\"flex items-center gap-3\">\n        <button mnButton [data]=\"{ size: 'md', variant: 'fill', color: 'primary' }\" (click)=\"goToToday()\">\n          {{ config.todayLabel }}\n        </button>\n        <div class=\"flex items-center gap-1\">\n          <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n          <mn-lib-datetime [props]=\"{ id: 'calendar-date-picker', mode: 'date', size: 'md' }\" [ngModel]=\"dateInputValue\" (ngModelChange)=\"onDateStringChange($event)\"></mn-lib-datetime>\n          <button mnButton [data]=\"{ size: 'md', variant: 'outline', color: 'gray' }\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        </div>\n        <div class=\"flex border border-base-300 rounded-md overflow-hidden\" role=\"tablist\" aria-label=\"Calendar view\">\n          @for (view of viewOptions; track view.value) {\n            <button\n              mnButton\n              [data]=\"{ size: 'md', variant: currentView === view.value ? 'fill' : 'text', color: 'primary' }\"\n              role=\"tab\"\n              [attr.aria-selected]=\"currentView === view.value\"\n              (click)=\"switchView(view.value)\">\n              {{ view.label }}\n            </button>\n          }\n        </div>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        @for (btn of buttons; track btn.label) {\n          <button mnButton [data]=\"btn.buttonData || {}\" (click)=\"btn.onClick()\">{{ btn.label }}</button>\n        }\n        @if (showButton) {\n          <button mnButton [data]=\"{}\" (click)=\"ButtonClickedEvent.emit()\">{{ buttonTitle }}</button>\n        }\n      </div>\n    </div>\n  }\n\n  <div class=\"grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3 flex-1 min-h-0\">\n    <div class=\"min-w-0 min-h-0 overflow-hidden overflow-y-auto\">\n      @if (currentView === CalendarView.MONTH) {\n        <mn-calendar-month\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          (dayClicked)=\"onMonthDayClick($event)\">\n        </mn-calendar-month>\n      }\n      @if (currentView === CalendarView.WEEK) {\n        <mn-calendar-week\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-week>\n      }\n      @if (currentView === CalendarView.DAY) {\n        <mn-calendar-day\n          [focusDay]=\"focusDay\"\n          [eventsChanged]=\"internalEventsChanged\"\n          [focusDayChanged]=\"internalFocusDayChanged\"\n          [config]=\"config\"\n          [calendarEventComponent]=\"CalendarEventComponent\"\n          (eventClicked)=\"onEventClick($event)\">\n        </mn-calendar-day>\n      }\n    </div>\n    <div class=\"hidden lg:block border-l border-base-300 overflow-auto\">\n      <mn-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </mn-upcoming-events>\n    </div>\n  </div>\n\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { showButton: [{
                 type: Input
             }], buttonTitle: [{
                 type: Input
@@ -7722,6 +7556,15 @@ class MnTabComponent {
             this.currentActive = this.dataSource.items[this.dataSource.defaultActive];
         }
     }
+    /**
+     * Returns the resolved badge value for a tab item, supporting both plain numbers and Signal<number>.
+     * @param item - The tab item whose badge to resolve.
+     */
+    getBadge(item) {
+        if (isSignal(item.badge))
+            return item.badge();
+        return item.badge;
+    }
     /**
      * Sets the given tab item as active, invoking deactivate/activate callbacks.
      * @param item - The tab item to activate.
@@ -7735,11 +7578,11 @@ class MnTabComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @for (item of dataSource.items; track item.label) {\n        <div\n          role=\"tab\"\n          class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center\"\n          [class.flex-1]=\"justified\"\n          [class.text-primary]=\"currentActive === item\"\n          [class.font-bold]=\"currentActive === item\"\n          [class.border-primary]=\"currentActive === item\"\n          [class.border-transparent]=\"currentActive !== item\"\n          [class.text-base-content]=\"currentActive !== item\"\n          [attr.aria-selected]=\"currentActive === item\"\n          (click)=\"setActive(item)\"\n        >\n          {{ item.label | mnTranslate }}\n          @if (item.badge && item.badge > 0) {\n            <span\n              class=\"inline-flex items-center justify-center min-w-[1.1rem] h-[1.1rem] text-[10px] font-bold bg-accent text-accent-content rounded-full ml-1.5 px-1\">{{ item.badge }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @for (item of dataSource.items; track item.label) {\n        <div\n          role=\"tab\"\n          (keyup.enter)=\"setActive(item)\"\n          [class.flex-1]=\"justified\"\n          [class.text-primary]=\"currentActive === item\"\n          [class.font-bold]=\"currentActive === item\"\n          [class.border-primary]=\"currentActive === item\"\n          [class.border-transparent]=\"currentActive !== item\"\n          [class.text-base-content]=\"currentActive !== item\"\n          [attr.aria-selected]=\"currentActive === item\"\n          (keyup.space)=\"setActive(item)\"\n          (click)=\"setActive(item)\"\n          class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2\"\n          tabindex=\"0\"\n        >\n          {{ item.label | mnTranslate }}\n          @let badge = getBadge(item);\n          @if (badge && badge > 0) {\n            <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MnBadge, selector: "span[mnBadge]", inputs: ["data"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule], template: "<div class=\"mb-10\">\n  <div\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @for (item of dataSource.items; track item.label) {\n        <div\n          role=\"tab\"\n          class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center\"\n          [class.flex-1]=\"justified\"\n          [class.text-primary]=\"currentActive === item\"\n          [class.font-bold]=\"currentActive === item\"\n          [class.border-primary]=\"currentActive === item\"\n          [class.border-transparent]=\"currentActive !== item\"\n          [class.text-base-content]=\"currentActive !== item\"\n          [attr.aria-selected]=\"currentActive === item\"\n          (click)=\"setActive(item)\"\n        >\n          {{ item.label | mnTranslate }}\n          @if (item.badge && item.badge > 0) {\n            <span\n              class=\"inline-flex items-center justify-center min-w-[1.1rem] h-[1.1rem] text-[10px] font-bold bg-accent text-accent-content rounded-full ml-1.5 px-1\">{{ item.badge }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule, MnBadge], template: "<div class=\"mb-10\">\n  <div\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      role=\"tablist\"\n      class=\"tabs flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      @for (item of dataSource.items; track item.label) {\n        <div\n          role=\"tab\"\n          (keyup.enter)=\"setActive(item)\"\n          [class.flex-1]=\"justified\"\n          [class.text-primary]=\"currentActive === item\"\n          [class.font-bold]=\"currentActive === item\"\n          [class.border-primary]=\"currentActive === item\"\n          [class.border-transparent]=\"currentActive !== item\"\n          [class.text-base-content]=\"currentActive !== item\"\n          [attr.aria-selected]=\"currentActive === item\"\n          (keyup.space)=\"setActive(item)\"\n          (click)=\"setActive(item)\"\n          class=\"tab px-4 py-2 border-b-2 cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2\"\n          tabindex=\"0\"\n        >\n          {{ item.label | mnTranslate }}\n          @let badge = getBadge(item);\n          @if (badge && badge > 0) {\n            <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { dataSource: [{
                 type: Input
             }], scrollable: [{
@@ -7792,8 +7635,8 @@ class MnIcon {
     resolvedName = null;
     ngOnInit() {
         const attrs = this.el.nativeElement.attributes;
-        for (let i = 0; i < attrs.length; i++) {
-            const attr = attrs[i].name.toLowerCase();
+        for (const item of Array.from(attrs)) {
+            const attr = item.name.toLowerCase();
             if (attr.startsWith('mnicon')) {
                 const iconKey = attr.slice('mnicon'.length);
                 for (const key of Object.keys(MN_ICON_MAP)) {