mn-angular-lib 0.0.50 → 0.0.52

package/fesm2022/mn-angular-lib.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, inject, Input, ChangeDetectionStrategy, Component, HostBinding, DestroyRef, Self, APP_INITIALIZER, ElementRef, HostListener, forwardRef, Directive, EventEmitter, TemplateRef, Output, ViewChildren, ViewContainerRef, ViewChild, ApplicationRef, EnvironmentInjector, createComponent, SkipSelf, Attribute, Pipe } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, inject, Input, ChangeDetectionStrategy, Component, HostBinding, signal, ElementRef, DestroyRef, Self, APP_INITIALIZER, HostListener, forwardRef, Directive, EventEmitter, TemplateRef, Output, ViewContainerRef, ViewChild, ViewChildren, ApplicationRef, EnvironmentInjector, createComponent, SkipSelf, Attribute, Pipe } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
 import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, map, catchError, of } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgOptimizedImage, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
 import { tv } from 'tailwind-variants';
 import * as i1$2 from '@angular/forms';
-import { Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { Validators, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpErrorResponse, HttpStatusCode, HttpParams } from '@angular/common/http';
 import JSON5 from 'json5';
@@ -401,12 +401,65 @@ const emptyToNull = (raw) => (raw === '' ? null : raw);
  * - Values are stored as strings in the FormControl
  * - No special DOM attributes
  * - No additional validation (relies on Angular's built-in validators)
+ * - Supports simple masking (0 for digit, A for alpha, * for any)
  */
 const defaultTextAdapter = {
     parse: (raw) => emptyToNull(raw),
     format: (val) => (val == null ? '' : String(val)),
     attrs: () => ({}),
     validate: () => null,
+    applyMask: (value, mask) => {
+        if (!mask || !value)
+            return value;
+        let result = '';
+        let maskIndex = 0;
+        let dataIndex = 0;
+        // Remove non-alphanumeric if we want to re-mask from clean data
+        // But usually we just want to restrict input.
+        // A simple implementation:
+        while (maskIndex < mask.length && dataIndex < value.length) {
+            const maskChar = mask[maskIndex];
+            const dataChar = value[dataIndex];
+            if (maskChar === '0') {
+                if (/\d/.test(dataChar)) {
+                    result += dataChar;
+                    dataIndex++;
+                    maskIndex++;
+                }
+                else {
+                    dataIndex++; // skip invalid
+                }
+            }
+            else if (maskChar === 'A') {
+                if (/[a-zA-Z]/.test(dataChar)) {
+                    result += dataChar;
+                    dataIndex++;
+                    maskIndex++;
+                }
+                else {
+                    dataIndex++; // skip invalid
+                }
+            }
+            else if (maskChar === '*') {
+                result += dataChar;
+                dataIndex++;
+                maskIndex++;
+            }
+            else {
+                result += maskChar;
+                if (dataChar === maskChar) {
+                    dataIndex++;
+                }
+                maskIndex++;
+            }
+        }
+        // Auto-append static characters if next in mask
+        while (maskIndex < mask.length && !/[0A*]/.test(mask[maskIndex])) {
+            result += mask[maskIndex];
+            maskIndex++;
+        }
+        return result;
+    }
 };
 /**
  * Adapter for date and time input types.
@@ -667,11 +720,19 @@ function isPlainObject(value) {
 class MnConfigService {
     http;
     _config = null;
+    _settings = {};
     _debugMode = false;
+    /** Reactive version counter — incremented on every config load. */
+    _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;
+    }
     /**
      * Load the configuration JSON from the provided URL and cache it in memory.
      * Consumers should typically call this via the APP_INITIALIZER helper.
@@ -698,7 +759,9 @@ class MnConfigService {
         const cfg = (isPlainObject(json) ? json : {});
         const defaults = isPlainObject(cfg.defaults) ? cfg.defaults : {};
         const overrides = isPlainObject(cfg.overrides) ? cfg.overrides : cfg.overrides ?? {};
-        this._config = { defaults, 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).
@@ -711,6 +774,31 @@ class MnConfigService {
             await Promise.all(localesToLoad.map(l => this.lang.loadLocale(l)));
             await this.lang.setLocale(effectiveLocale);
         }
+        this._configVersion.update(v => v + 1);
+    }
+    /**
+     * Load configuration from a pre-parsed object (no HTTP fetch).
+     * Used for live preview scenarios where config is pushed via postMessage.
+     * Optionally re-bootstraps the language service if a `language` section is present.
+     */
+    async loadFromObject(config, bootstrapLanguage = false) {
+        const defaults = isPlainObject(config['defaults']) ? config['defaults'] : {};
+        const overrides = isPlainObject(config['overrides']) ? config['overrides'] : {};
+        const settings = isPlainObject(config['settings']) ? config['settings'] : {};
+        this._config = { settings, defaults, overrides };
+        this._settings = settings;
+        if (bootstrapLanguage) {
+            const langCfg = config['language'];
+            if (isPlainObject(langCfg) && typeof langCfg['urlPattern'] === 'string') {
+                const lc = langCfg;
+                this.lang.configure(lc.urlPattern);
+                const effectiveLocale = this.lang.resolveLocaleForDomain(lc.domainLocaleMap, lc.defaultLocale);
+                const localesToLoad = lc.preload ?? [effectiveLocale];
+                await Promise.all(localesToLoad.map(l => this.lang.loadLocale(l)));
+                await this.lang.setLocale(effectiveLocale);
+            }
+        }
+        this._configVersion.update(v => v + 1);
     }
     /**
      * Resolve a configuration object for a component, optionally scoped to a section path
@@ -865,6 +953,7 @@ class MnInputField {
     ngControl;
     /** Resolved UI configuration for the input field */
     uiConfig = {};
+    el = inject(ElementRef);
     /** Configuration properties for the input field */
     props;
     configService = inject(MnConfigService);
@@ -910,6 +999,17 @@ class MnInputField {
             this.resolveConfig();
         });
         this.destroyRef.onDestroy(() => sub.unsubscribe());
+        if (this.props.autoFocus) {
+            setTimeout(() => this.focus(), 0);
+        }
+    }
+    /**
+     * Focuses the input element.
+     */
+    focus() {
+        const input = this.el.nativeElement.querySelector('input');
+        if (input)
+            input.focus();
     }
     resolveConfig() {
         const instanceId = this.explicitInstanceId || `mn-input-${this.props.id}`;
@@ -971,8 +1071,13 @@ class MnInputField {
      * @param raw - Raw string value from the input element
      */
     handleInput(raw) {
-        this.value = raw;
-        this.onChange(this.adapter.parse(raw));
+        let finalValue = raw;
+        // Apply mask if available
+        if (this.props.mask && typeof this.adapter.applyMask === 'function') {
+            finalValue = this.adapter.applyMask(raw, this.props.mask);
+        }
+        this.value = finalValue;
+        this.onChange(this.adapter.parse(finalValue));
     }
     /**
      * Handles blur events from the input element.
@@ -1127,11 +1232,11 @@ class MnInputField {
         });
     }
     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.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
+    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    (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"] }] });
 }
 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: [NgClass, MnErrorMessage], 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.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"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" }]
+            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    (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
                 }, {
@@ -1374,6 +1479,7 @@ class MnTextarea {
     ngControl;
     /** Resolved UI configuration for the textarea */
     uiConfig = {};
+    el = inject(ElementRef);
     /** Configuration properties for the textarea */
     props;
     configService = inject(MnConfigService);
@@ -1416,6 +1522,17 @@ class MnTextarea {
             this.resolveConfig();
         });
         this.destroyRef.onDestroy(() => sub.unsubscribe());
+        if (this.props.autoFocus) {
+            setTimeout(() => this.focus(), 0);
+        }
+    }
+    /**
+     * Focuses the textarea element.
+     */
+    focus() {
+        const textarea = this.el.nativeElement.querySelector('textarea');
+        if (textarea)
+            textarea.focus();
     }
     resolveConfig() {
         const instanceId = this.explicitInstanceId || `mn-textarea-${this.props.id}`;
@@ -1528,6 +1645,10 @@ class MnTextarea {
         if (typeof msgDef === 'function') {
             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] ?? _);
+        }
         return msgDef;
     }
     /**
@@ -1577,11 +1698,11 @@ class MnTextarea {
         });
     }
     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.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 ɵ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"] }] });
 }
 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.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" }]
+            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
                 }, {
@@ -2105,6 +2226,10 @@ class MnMultiSelect {
         if (typeof msgDef === 'function') {
             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] ?? _);
+        }
         return msgDef;
     }
     get errorMessages() {
@@ -2299,53 +2424,41 @@ var ValidationCode;
     ValidationCode["CUSTOM"] = "custom";
 })(ValidationCode || (ValidationCode = {}));
 
-class StepBuilder {
+/**
+ * A builder class that provides form layout capabilities (fields, rows, groups).
+ * This can be used as a delegate to avoid code duplication between FormModalBuilder and StepBuilder.
+ */
+class FormLayoutBuilder {
     config;
+    parent;
     currentRow = [];
     currentRowColumns = 1;
-    constructor(id, title) {
-        this.config = {
-            id,
-            title,
-            fields: [],
-            state: StepState.PENDING,
-        };
+    constructor(config, parent) {
+        this.config = config;
+        this.parent = parent;
+        this.config.fields = this.config.fields || [];
+        this.config.rows = this.config.rows || [];
     }
+    /**
+     * Add a custom body/content to the form/step.
+     */
     body(body) {
         this.config.body = body;
-        return this;
-    }
-    state(state) {
-        this.config.state = state;
-        return this;
-    }
-    guard(guard) {
-        this.config.guard = guard;
-        return this;
-    }
-    validators(validators) {
-        this.config.validators = validators;
-        return this;
+        return this.parent;
     }
     /**
-     * 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: [...] })
+     * Add a field as a full-width row (single column).
      */
     field(field) {
         this.flushCurrentRow();
         this.config.fields = this.config.fields || [];
         this.config.fields.push(field);
-        if (!this.config.rows) {
-            this.config.rows = [];
-        }
+        this.config.rows = this.config.rows || [];
         this.config.rows.push({
             columns: 1,
             fields: [{ field, span: 1 }],
         });
-        return this;
+        return this.parent;
     }
     /**
      * Start a new row with the specified number of columns.
@@ -2354,70 +2467,293 @@ class StepBuilder {
     row(columns = 2) {
         this.flushCurrentRow();
         this.currentRowColumns = columns;
-        return this;
+        return this.parent;
     }
     /**
      * Add a field to the current row started by `row()`.
+     * @param field - The field configuration
+     * @param span - How many columns this field should span (default: 1)
      */
     addToRow(field, span = 1) {
         this.config.fields = this.config.fields || [];
         this.config.fields.push(field);
         this.currentRow.push({ field, span });
-        return this;
+        return this.parent;
     }
-    flushCurrentRow() {
-        if (this.currentRow.length > 0) {
-            if (!this.config.rows) {
-                this.config.rows = [];
-            }
+    /**
+     * Declarative way to add a row.
+     * @example
+     * .addRow(2, row => {
+     *   row.add({ kind: FieldKind.TEXT, key: 'first', ... });
+     *   row.add({ kind: FieldKind.TEXT, key: 'last', ... });
+     * })
+     */
+    addRow(columns, buildFn) {
+        this.flushCurrentRow();
+        const rowFields = [];
+        buildFn({
+            add: (field, span = 1) => {
+                this.config.fields = this.config.fields || [];
+                this.config.fields.push(field);
+                rowFields.push({ field, span });
+            },
+        });
+        if (rowFields.length > 0) {
+            this.config.rows = this.config.rows || [];
             this.config.rows.push({
-                columns: this.currentRowColumns,
-                fields: [...this.currentRow],
+                columns,
+                fields: rowFields,
             });
-            this.currentRow = [];
-            this.currentRowColumns = 1;
         }
+        return this.parent;
     }
-    /**
-     * Add a field group with a section header.
-     */
-    fieldGroup(group) {
+    fieldGroup(arg1, arg2, arg3) {
         this.flushCurrentRow();
+        if (typeof arg1 !== 'string') {
+            const group = arg1;
+            this.processFieldGroup(group);
+            return this.parent;
+        }
+        const title = arg1;
+        let description;
+        let buildFn;
+        if (typeof arg2 === 'string') {
+            description = arg2;
+            buildFn = arg3;
+        }
+        else {
+            buildFn = arg2;
+        }
+        const groupConfig = {
+            fields: [],
+            rows: [],
+        };
+        const groupBuilder = new FormLayoutBuilder(groupConfig, {});
+        // Overwrite the groupBuilder's parent to itself for proper chaining within the group
+        groupBuilder.parent = groupBuilder;
+        buildFn(groupBuilder);
+        groupBuilder.flushCurrentRow();
+        const group = {
+            title,
+            description,
+            fields: groupConfig.fields || [],
+            rows: groupConfig.rows || [],
+        };
+        this.processFieldGroup(group);
+        return this.parent;
+    }
+    processFieldGroup(group) {
         if (!this.config.fieldGroups) {
             this.config.fieldGroups = [];
         }
+        // Also add group fields to the flat fields array for form control creation
         this.config.fields = this.config.fields || [];
-        group.fields.forEach(f => this.config.fields.push(f));
-        if (!group.rows) {
-            group.rows = group.fields.map(f => ({
+        const fields = this.config.fields;
+        group.fields.forEach((f) => fields.push(f));
+        // Build rows for the group if not provided
+        if (!group.rows || group.rows.length === 0) {
+            group.rows = group.fields.map((f) => ({
                 columns: 1,
                 fields: [{ field: f, span: 1 }],
             }));
         }
         this.config.fieldGroups.push(group);
-        return this;
     }
     /**
-     * Add form-level validators for cross-field validation within this step.
+     * Add form-level validators for cross-field validation.
      */
     formValidators(validators) {
         this.config.formValidators = validators;
-        return this;
+        return this.parent;
     }
     /**
-     * Add Angular FormGroup-level validators for this step.
+     * Add Angular FormGroup-level validators.
      */
     groupValidators(validators) {
         this.config.groupValidators = validators;
-        return this;
+        return this.parent;
     }
     /**
-     * Set initial values for fields in this step.
+     * Set initial value for fields.
      */
     initialValue(value) {
         this.config.initialValue = value;
+        return this.parent;
+    }
+    /**
+     * 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;
+        });
+        this.config.fieldGroups?.forEach(g => {
+            g.fields.forEach(f => {
+                f.autoFocus = false;
+            });
+        });
+        const field = this.config.fields?.find(f => f.key === key);
+        if (field) {
+            field.autoFocus = true;
+        }
+        return this.parent;
+    }
+    /**
+     * Wraps a field with a fluent API for validation.
+     */
+    fieldWithValidators(field) {
+        const fieldAny = field;
+        fieldAny.validators = fieldAny.validators || [];
+        this.field(field);
+        return new FieldValidatorBuilder(field, this.parent);
+    }
+    /**
+     * Flushes any pending fields in the current row to the configuration.
+     */
+    flushCurrentRow() {
+        if (this.currentRow.length > 0) {
+            this.config.rows.push({
+                columns: this.currentRowColumns,
+                fields: [...this.currentRow],
+            });
+            this.currentRow = [];
+            this.currentRowColumns = 1;
+        }
+    }
+}
+/**
+ * A builder for adding validation rules to a field fluently.
+ */
+class FieldValidatorBuilder {
+    field;
+    parent;
+    constructor(field, parent) {
+        this.field = field;
+        this.parent = parent;
+        this.field.validators = this.field.validators || [];
+    }
+    required(message) {
+        this.field.validators.push(Validators.required);
+        return this;
+    }
+    minLength(length) {
+        this.field.validators.push(Validators.minLength(length));
+        return this;
+    }
+    maxLength(length) {
+        this.field.validators.push(Validators.maxLength(length));
+        return this;
+    }
+    pattern(pattern) {
+        this.field.validators.push(Validators.pattern(pattern));
+        return this;
+    }
+    email() {
+        this.field.validators.push(Validators.email);
+        return this;
+    }
+    min(value) {
+        this.field.validators.push(Validators.min(value));
+        return this;
+    }
+    max(value) {
+        this.field.validators.push(Validators.max(value));
+        return this;
+    }
+    /**
+     * Add a custom validator.
+     */
+    custom(validator) {
+        this.field.validators.push(validator);
+        return this;
+    }
+    /**
+     * Return to the parent builder.
+     */
+    done() {
+        return this.parent;
+    }
+}
+
+class StepBuilder {
+    config;
+    layoutBuilder;
+    constructor(id, title) {
+        this.config = {
+            id,
+            title,
+            fields: [],
+            state: StepState.PENDING,
+        };
+        this.layoutBuilder = new FormLayoutBuilder(this.config, this);
+    }
+    body(body) {
+        this.config.body = body;
+        return this;
+    }
+    state(state) {
+        this.config.state = state;
+        return this;
+    }
+    guard(guard) {
+        this.config.guard = guard;
+        return this;
+    }
+    validators(validators) {
+        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);
+    }
+    /**
+     * 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.
      */
@@ -2425,16 +2761,40 @@ class StepBuilder {
         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;
+    }
     build() {
-        this.flushCurrentRow();
+        this.layoutBuilder.flushCurrentRow();
         return this.config;
     }
 }
 
 class BaseModalBuilder {
     config;
+    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) {
         this.config.title = title;
@@ -2472,6 +2832,14 @@ class BaseModalBuilder {
         this.config.intent = intent;
         return this;
     }
+    readOnly(readOnly = true) {
+        this.config.readOnly = readOnly;
+        return this;
+    }
+    disabled(disabled = true) {
+        this.config.disabled = disabled;
+        return this;
+    }
     footerActions(actions) {
         this.config.footerActions = actions;
         return this;
@@ -2488,7 +2856,63 @@ class BaseModalBuilder {
         this.config.i18n = labels;
         return this;
     }
+    component(component) {
+        this.config.component = component;
+        return this;
+    }
+    template(template) {
+        this.config.template = template;
+        return this;
+    }
+    inputs(inputs) {
+        this.config.inputs = inputs;
+        return this;
+    }
+    animation(animation) {
+        this.config.animation = animation;
+        return this;
+    }
+    /**
+     * Add a custom body/content to the modal.
+     */
+    body(body) {
+        return this.layoutBuilder.body(body);
+    }
+    /**
+     * Add a field.
+     */
+    field(field) {
+        return this.layoutBuilder.field(field);
+    }
+    /**
+     * Add a field with a fluent validation builder.
+     */
+    fieldWithValidators(field) {
+        return this.layoutBuilder.fieldWithValidators(field);
+    }
+    /**
+     * Start a new row.
+     */
+    row(columns = 2) {
+        return this.layoutBuilder.row(columns);
+    }
+    /**
+     * Add a field to the current 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);
+    }
     build() {
+        this.layoutBuilder.flushCurrentRow();
         return Object.freeze({ ...this.config });
     }
 }
@@ -2500,6 +2924,32 @@ class WizardModalBuilder extends BaseModalBuilder {
             steps: [],
         });
     }
+    /**
+     * Set initial values for the entire wizard.
+     * Note: This will be merged with individual step initial values.
+     */
+    initialValue(value) {
+        this.config.initialValue = value;
+        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('', '');
@@ -2516,7 +2966,8 @@ class WizardModalBuilder extends BaseModalBuilder {
         const stepId = id || `step-${this.config.steps.length}`;
         const builder = new StepBuilder(stepId, title);
         buildFn(builder);
-        this.config.steps.push(builder.build());
+        const builtStep = builder.build();
+        this.config.steps.push(builtStep);
         return this;
     }
     startAt(stepId) {
@@ -2542,8 +2993,6 @@ class WizardModalBuilder extends BaseModalBuilder {
 }
 
 class FormModalBuilder extends BaseModalBuilder {
-    currentRow = [];
-    currentRowColumns = 1;
     constructor() {
         super({
             kind: ModalKind.FORM,
@@ -2551,64 +3000,27 @@ class FormModalBuilder extends BaseModalBuilder {
             rows: [],
         });
     }
-    /**
-     * Add a field as a full-width row (single column).
-     * This is the simple API — each field gets its own row.
-     */
-    field(field) {
-        this.flushCurrentRow();
-        this.config.fields.push(field);
-        this.config.rows.push({
-            columns: 1,
-            fields: [{ field, span: 1 }],
-        });
-        return this;
-    }
-    /**
-     * Start a new row with the specified number of columns.
-     * All subsequent `addToRow()` calls will add fields to this row
-     * until the next `row()` or `field()` call.
-     *
-     * @example
-     * .row(2)
-     *   .addToRow({ kind: FieldKind.TEXT, key: 'firstName', label: 'First Name' })
-     *   .addToRow({ kind: FieldKind.TEXT, key: 'lastName', label: 'Last Name' })
-     * .row(3)
-     *   .addToRow({ kind: FieldKind.TEXT, key: 'city', label: 'City' }, 2)
-     *   .addToRow({ kind: FieldKind.TEXT, key: 'zip', label: 'ZIP' })
-     */
+    body(body) {
+        return super.body(body);
+    }
+    field(field) {
+        return super.field(field);
+    }
     row(columns = 2) {
-        this.flushCurrentRow();
-        this.currentRowColumns = columns;
-        return this;
+        return super.row(columns);
     }
-    /**
-     * Add a field to the current row started by `row()`.
-     * @param field - The field configuration
-     * @param span - How many columns this field should span (default: 1)
-     */
     addToRow(field, span = 1) {
-        this.config.fields.push(field);
-        this.currentRow.push({ field, span });
-        return this;
+        return super.addToRow(field, span);
     }
-    flushCurrentRow() {
-        if (this.currentRow.length > 0) {
-            this.config.rows.push({
-                columns: this.currentRowColumns,
-                fields: [...this.currentRow],
-            });
-            this.currentRow = [];
-            this.currentRowColumns = 1;
-        }
+    addRow(columns, buildFn) {
+        return super.addRow(columns, buildFn);
     }
     layout(mode) {
         this.config.layout = mode;
         return this;
     }
     initialValue(value) {
-        this.config.initialValue = value;
-        return this;
+        return this.layoutBuilder.initialValue(value);
     }
     submitMode(mode) {
         this.config.submitMode = mode;
@@ -2618,45 +3030,16 @@ class FormModalBuilder extends BaseModalBuilder {
         this.config.onComplete = handler;
         return this;
     }
-    /**
-     * Add form-level validators for cross-field validation.
-     * These receive the entire form value and return an error map or null.
-     */
     formValidators(validators) {
-        this.config.formValidators = validators;
-        return this;
+        return this.layoutBuilder.formValidators(validators);
     }
-    /**
-     * Add Angular FormGroup-level validators.
-     * These are standard Angular ValidatorFn applied to the FormGroup itself.
-     */
     groupValidators(validators) {
-        this.config.groupValidators = validators;
-        return this;
+        return this.layoutBuilder.groupValidators(validators);
     }
-    /**
-     * Add a field group with a section header.
-     * Groups visually separate fields with a title and optional description.
-     */
-    fieldGroup(group) {
-        this.flushCurrentRow();
-        if (!this.config.fieldGroups) {
-            this.config.fieldGroups = [];
-        }
-        // Also add group fields to the flat fields array for form control creation
-        group.fields.forEach(f => this.config.fields.push(f));
-        // Build rows for the group if not provided
-        if (!group.rows) {
-            group.rows = group.fields.map(f => ({
-                columns: 1,
-                fields: [{ field: f, span: 1 }],
-            }));
-        }
-        this.config.fieldGroups.push(group);
-        return this;
+    fieldGroup(arg1, arg2, arg3) {
+        return super.fieldGroup(arg1, arg2, arg3);
     }
     build() {
-        this.flushCurrentRow();
         return super.build();
     }
 }
@@ -2666,6 +3049,8 @@ class ConfirmationModalBuilder extends BaseModalBuilder {
         super({
             kind: ModalKind.CONFIRMATION,
             message: '',
+            fields: [],
+            rows: [],
         });
     }
     message(text) {
@@ -2684,6 +3069,36 @@ 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);
+    }
+    formValidators(validators) {
+        return this.layoutBuilder.formValidators(validators);
+    }
+    groupValidators(validators) {
+        return this.layoutBuilder.groupValidators(validators);
+    }
+    build() {
+        return super.build();
+    }
 }
 
 class CustomModalBuilder extends BaseModalBuilder {
@@ -2692,18 +3107,6 @@ class CustomModalBuilder extends BaseModalBuilder {
             kind: ModalKind.CUSTOM,
         });
     }
-    component(component) {
-        this.config.component = component;
-        return this;
-    }
-    template(template) {
-        this.config.template = template;
-        return this;
-    }
-    inputs(inputs) {
-        this.config.inputs = inputs;
-        return this;
-    }
     onComplete(handler) {
         this.config.onComplete = handler;
         return this;
@@ -2761,6 +3164,9 @@ class MnModalRef {
         // Trigger change detection on the shell component
         this.componentRef.changeDetectorRef.detectChanges();
     }
+    get component() {
+        return this.componentRef.instance;
+    }
     destroy() {
         this.componentRef.destroy();
     }
@@ -3083,11 +3489,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 type: Output
             }] } });
 
+class MnCustomBodyHostComponent {
+    config;
+    modalRef;
+    container;
+    componentRef;
+    ngOnInit() {
+        setTimeout(() => this.loadContent(), 0);
+    }
+    loadContent() {
+        if (!this.container)
+            return;
+        this.container.clear();
+        if (this.config.component) {
+            this.attachComponent(this.config.component);
+        }
+        else if (this.config.template) {
+            this.attachTemplate(this.config.template);
+        }
+    }
+    attachComponent(component) {
+        this.componentRef = this.container.createComponent(component);
+        // Pass inputs to the component
+        if (this.config.inputs) {
+            Object.entries(this.config.inputs).forEach(([key, value]) => {
+                this.componentRef.instance[key] = value;
+            });
+        }
+        // Pass modalRef if the component has a modalRef property
+        const instance = this.componentRef.instance;
+        if (instance && 'modalRef' in instance) {
+            instance.modalRef = this.modalRef;
+        }
+    }
+    attachTemplate(template) {
+        this.container.createEmbeddedView(template, {
+            $implicit: this.modalRef,
+            modalRef: this.modalRef,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCustomBodyHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnCustomBodyHostComponent, isStandalone: true, selector: "mn-custom-body-host", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: '<ng-container #container></ng-container>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCustomBodyHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mn-custom-body-host',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: '<ng-container #container></ng-container>',
+                }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], modalRef: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef }]
+            }] } });
+
 class MnFormBodyComponent {
     fb;
     config;
     modalRef;
     hideFooter = false;
+    hideCustomBody = false;
+    formStatusChange = new EventEmitter();
+    inputFields;
+    textareas;
     form;
     rows = [];
     fieldGroups = [];
@@ -3146,6 +3615,44 @@ class MnFormBodyComponent {
         this.initializeDataSources();
         this.initializeTableFields();
         this.subscribeToValueChanges();
+        if (this.config.disabled || this.config.readOnly) {
+            this.form.disable();
+        }
+        // Emit initial status
+        setTimeout(() => {
+            this.formStatusChange.emit(this.form.status);
+        });
+    }
+    ngAfterViewInit() {
+        // Small delay to ensure children are fully rendered and MnModalShell hasn't just stolen focus
+        setTimeout(() => {
+            this.applyAutoFocus();
+        }, 100);
+    }
+    applyAutoFocus() {
+        const autoFocusField = this.config.fields.find(f => f.autoFocus);
+        if (!autoFocusField)
+            return;
+        const key = autoFocusField.key;
+        // Small delay to ensure browser is ready to focus
+        setTimeout(() => {
+            // Try finding in MnInputField components
+            const inputField = this.inputFields?.find(f => f.props.id === key);
+            if (inputField) {
+                inputField.focus();
+                return;
+            }
+            // Try finding in MnTextarea components
+            const textarea = this.textareas?.find(f => f.props?.id === key);
+            if (textarea && typeof textarea.focus === 'function') {
+                textarea.focus();
+                return;
+            }
+            // Fallback to native element if possible
+            const el = document.getElementById(key);
+            if (el)
+                el.focus();
+        }, 50);
     }
     ngOnDestroy() {
         this.valueChangesSubscription?.unsubscribe();
@@ -3161,7 +3668,15 @@ class MnFormBodyComponent {
             }
             const validators = fieldConfig.validators || [];
             const asyncValidators = fieldConfig.asyncValidators || [];
-            formControls[field.key] = [initialValue, validators, asyncValidators];
+            const updateOn = fieldConfig.updateOn || 'change';
+            formControls[field.key] = [
+                initialValue,
+                {
+                    validators,
+                    asyncValidators,
+                    updateOn
+                }
+            ];
         });
         this.form = this.fb.group(formControls);
         // Apply Angular FormGroup-level validators
@@ -3179,10 +3694,10 @@ class MnFormBodyComponent {
         });
     }
     isFieldReadOnly(field) {
-        return field.readOnly === true;
+        return this.config.readOnly === true || field.readOnly === true;
     }
     isFieldDisabled(field) {
-        return field.disabled === true;
+        return this.config.disabled === true || field.disabled === true;
     }
     /** Track which field groups are currently visible */
     groupVisibility = {};
@@ -3190,12 +3705,25 @@ class MnFormBodyComponent {
         if (this.config.rows && this.config.rows.length > 0) {
             this.rows = this.config.rows;
         }
-        else if (!this.config.fieldGroups || this.config.fieldGroups.length === 0) {
-            // Fallback: each field gets its own full-width row
-            this.rows = this.config.fields.map(field => ({
-                columns: 1,
-                fields: [{ field, span: 1 }],
-            }));
+        else {
+            // Create rows for fields that are not in any row or group
+            const fieldsInGroups = new Set();
+            (this.config.fieldGroups || []).forEach(g => {
+                (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));
+                }
+            });
+            const fieldsInRows = new Set();
+            (this.config.rows || []).forEach(r => r.fields.forEach(f => fieldsInRows.add(f.field.key)));
+            const standaloneFields = this.config.fields.filter(f => !fieldsInGroups.has(f.key) && !fieldsInRows.has(f.key));
+            if (standaloneFields.length > 0) {
+                this.rows = standaloneFields.map(field => ({
+                    columns: 1,
+                    fields: [{ field, span: 1 }],
+                }));
+            }
         }
         // Build field groups
         this.fieldGroups = this.config.fieldGroups || [];
@@ -3474,6 +4002,8 @@ class MnFormBodyComponent {
             this.runFormValidators();
             // Reload data sources that depend on changed fields
             this.reloadDependentDataSources(formValue);
+            // Emit status change
+            this.formStatusChange.emit(this.form.status);
         });
     }
     previousFormValue = {};
@@ -3593,17 +4123,27 @@ class MnFormBodyComponent {
         }
     }
     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: "14.0.0", version: "21.1.3", type: MnFormBodyComponent, isStandalone: true, selector: "mn-form-body", inputs: { config: "config", modalRef: "modalRef", hideFooter: "hideFooter" }, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"flex flex-col gap-6\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    <ng-container [ngSwitch]=\"rowField.field.kind\">\n      <div *ngSwitchCase=\"FieldKind.TEXT\">\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          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.NUMBER\">\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          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.PASSWORD\">\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          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SELECT\" class=\"flex flex-col\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\" [for]=\"asKey(rowField.field.key)\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"relative\">\n          <select\n            [id]=\"asKey(rowField.field.key)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            class=\"w-full px-3 py-2 border border-gray-300 rounded-xl text-base text-gray-900 bg-white transition-all appearance-none pr-8 focus:outline-none focus:border-blue-500 focus:ring-[3px] focus:ring-blue-500/10 select-arrow\"\n            [class.opacity-50]=\"isFieldLoading(asKey(rowField.field.key))\"\n          >\n            <option value=\"\" disabled selected hidden>\n              {{ isFieldLoading(asKey(rowField.field.key)) ? labels.loading : labels.selectPlaceholder }}\n            </option>\n            <option\n              *ngFor=\"let option of getFieldOptions(rowField.field)\"\n              [value]=\"option.value\"\n              [disabled]=\"option.state === 'disabled'\"\n            >\n              {{ option.label }}\n            </option>\n          </select>\n          <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"absolute right-8 top-1/2 -translate-y-1/2\">\n            <div class=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CHECKBOX\">\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          })\"\n        ></mn-lib-checkbox>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.DATE\">\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          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.DATETIME\">\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          })\"\n        ></mn-lib-datetime>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.TEXTAREA\">\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            rows: asField(rowField.field).rows || 4,\n            resize: 'vertical'\n          })\"\n        ></mn-lib-textarea>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT\">\n        <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"flex items-center gap-2 py-2 text-sm text-gray-500\">\n          <div class=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          Loading options...\n        </div>\n        <mn-lib-multi-select\n          *ngIf=\"!isFieldLoading(asKey(rowField.field.key))\"\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          })\"\n        ></mn-lib-multi-select>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SINGLE_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.COLOR\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\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-gray-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-gray-600 font-mono\">{{ getColorValue(rowField.field) }}</span>\n        </div>\n        <div *ngIf=\"asField(rowField.field).swatches\" class=\"flex gap-1.5 mt-1\">\n          <button\n            *ngFor=\"let swatch of asField(rowField.field).swatches\"\n            type=\"button\"\n            class=\"w-6 h-6 rounded-md border border-gray-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        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.RATING\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-1\">\n          <button\n            *ngFor=\"let star of getRatingRange(rowField.field)\"\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-gray-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          <span class=\"text-sm text-gray-500 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SLIDER\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-3\">\n          <input\n            type=\"range\"\n            class=\"flex-1 h-2 bg-gray-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          <span *ngIf=\"asField(rowField.field).showValue !== false\" class=\"text-sm text-gray-600 min-w-[3rem] text-right\">\n            {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n          </span>\n        </div>\n        <div class=\"flex justify-between text-xs text-gray-400 px-1\">\n          <span>{{ asField(rowField.field).min ?? 0 }}</span>\n          <span>{{ asField(rowField.field).max ?? 100 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.FILE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div\n          class=\"relative border-2 border-dashed border-gray-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-gray-400\" 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-gray-500\">{{ labels.fileUploadPrompt }}</p>\n            <p *ngIf=\"asField(rowField.field).accept\" class=\"text-xs text-gray-400\">Accepted: {{ asField(rowField.field).accept }}</p>\n            <p *ngIf=\"asField(rowField.field).maxSize\" class=\"text-xs text-gray-400\">Max size: {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n          </div>\n        </div>\n        <!-- Selected files list -->\n        <div *ngIf=\"getSelectedFiles(asKey(rowField.field.key)).length > 0\" class=\"flex flex-col gap-1 mt-2\">\n          <div *ngFor=\"let file of getSelectedFiles(asKey(rowField.field.key)); let i = index\" class=\"flex items-center justify-between px-3 py-1.5 bg-gray-50 rounded-lg text-sm\">\n            <span class=\"text-gray-700 truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n            <button type=\"button\" class=\"text-gray-400 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          {{ getFileError(rowField.field) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CUSTOM\">\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      <div *ngSwitchDefault>\n      </div>\n    </ng-container>\n\n    <!-- Show cross-field error below any field that has one -->\n    <div\n      *ngIf=\"getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT\"\n      class=\"text-red-500 text-xs pl-2 pt-1\"\n    >\n      {{ getFieldError(asKey(rowField.field.key)) }}\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  <div *ngIf=\"fieldGroups.length > 0\" class=\"flex flex-col gap-6\">\n    <div *ngFor=\"let group of fieldGroups\" class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n      <div class=\"border-b border-gray-200 pb-2\">\n        <h3 class=\"text-base font-semibold text-gray-900\">{{ group.title }}</h3>\n        <p *ngIf=\"group.description\" class=\"text-sm text-gray-500 mt-0.5\">{{ group.description }}</p>\n      </div>\n      <div *ngFor=\"let row of group.rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n        <div *ngFor=\"let rowField of row.fields\" 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      </div>\n    </div>\n  </div>\n\n  <!-- Standard rows (no groups) -->\n  <div class=\"flex flex-col gap-4\" *ngIf=\"fieldGroups.length === 0\">\n    <div *ngFor=\"let row of rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n      <div *ngFor=\"let rowField of row.fields\" 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    </div>\n  </div>\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  <div *ngIf=\"formErrors['_form']\" class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n    {{ formErrors['_form'] }}\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-gray-200\" *ngIf=\"!hideFooter\">\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"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</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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }, { 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: "directive", type: MnCustomFieldHostDirective, selector: "[mnCustomFieldHost]", inputs: ["component", "inputs"] }, { kind: "component", type: MnTable, selector: "mn-table", inputs: ["dataSource"], outputs: ["sortChange", "selectionChange", "rowClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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: "<mn-custom-body-host\n  *ngIf=\"(config.component || config.template) && !hideCustomBody\"\n  [config]=\"asAny(config)\"\n  [modalRef]=\"asAny(modalRef)\"\n  class=\"mb-6 block\"\n></mn-custom-body-host>\n\n<form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"flex flex-col gap-6\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    <ng-container [ngSwitch]=\"rowField.field.kind\">\n      <div *ngSwitchCase=\"FieldKind.TEXT\">\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      <div *ngSwitchCase=\"FieldKind.NUMBER\">\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      <div *ngSwitchCase=\"FieldKind.PASSWORD\">\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      <div *ngSwitchCase=\"FieldKind.SELECT\" class=\"flex flex-col\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\" [for]=\"asKey(rowField.field.key)\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"relative\">\n          <select\n            [id]=\"asKey(rowField.field.key)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            class=\"w-full px-3 py-2 border border-gray-300 rounded-xl text-base text-gray-900 bg-white transition-all appearance-none pr-8 focus:outline-none focus:border-blue-500 focus:ring-[3px] focus:ring-blue-500/10 select-arrow\"\n            [class.opacity-50]=\"isFieldLoading(asKey(rowField.field.key)) || isFieldDisabled(rowField.field)\"\n            [attr.disabled]=\"isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field) ? '' : null\"\n          >\n            <option value=\"\" disabled selected hidden>\n              {{ isFieldLoading(asKey(rowField.field.key)) ? labels.loading : labels.selectPlaceholder }}\n            </option>\n            <option\n              *ngFor=\"let option of getFieldOptions(rowField.field)\"\n              [value]=\"option.value\"\n              [disabled]=\"option.state === 'disabled'\"\n            >\n              {{ option.label }}\n            </option>\n          </select>\n          <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"absolute right-8 top-1/2 -translate-y-1/2\">\n            <div class=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CHECKBOX\">\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      <div *ngSwitchCase=\"FieldKind.DATE\">\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      <div *ngSwitchCase=\"FieldKind.DATETIME\">\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      <div *ngSwitchCase=\"FieldKind.TEXTAREA\">\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            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      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT\">\n        <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"flex items-center gap-2 py-2 text-sm text-gray-500\">\n          <div class=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          Loading options...\n        </div>\n        <mn-lib-multi-select\n          *ngIf=\"!isFieldLoading(asKey(rowField.field.key))\"\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        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SINGLE_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.COLOR\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\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-gray-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-gray-600 font-mono\">{{ getColorValue(rowField.field) }}</span>\n        </div>\n        <div *ngIf=\"asField(rowField.field).swatches\" class=\"flex gap-1.5 mt-1\">\n          <button\n            *ngFor=\"let swatch of asField(rowField.field).swatches\"\n            type=\"button\"\n            class=\"w-6 h-6 rounded-md border border-gray-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        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.RATING\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-1\">\n          <button\n            *ngFor=\"let star of getRatingRange(rowField.field)\"\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-gray-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          <span class=\"text-sm text-gray-500 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SLIDER\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-3\">\n          <input\n            type=\"range\"\n            class=\"flex-1 h-2 bg-gray-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          <span *ngIf=\"asField(rowField.field).showValue !== false\" class=\"text-sm text-gray-600 min-w-[3rem] text-right\">\n            {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n          </span>\n        </div>\n        <div class=\"flex justify-between text-xs text-gray-400 px-1\">\n          <span>{{ asField(rowField.field).min ?? 0 }}</span>\n          <span>{{ asField(rowField.field).max ?? 100 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.FILE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div\n          class=\"relative border-2 border-dashed border-gray-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-gray-400\" 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-gray-500\">{{ labels.fileUploadPrompt }}</p>\n            <p *ngIf=\"asField(rowField.field).accept\" class=\"text-xs text-gray-400\">Accepted: {{ asField(rowField.field).accept }}</p>\n            <p *ngIf=\"asField(rowField.field).maxSize\" class=\"text-xs text-gray-400\">Max size: {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n          </div>\n        </div>\n        <!-- Selected files list -->\n        <div *ngIf=\"getSelectedFiles(asKey(rowField.field.key)).length > 0\" class=\"flex flex-col gap-1 mt-2\">\n          <div *ngFor=\"let file of getSelectedFiles(asKey(rowField.field.key)); let i = index\" class=\"flex items-center justify-between px-3 py-1.5 bg-gray-50 rounded-lg text-sm\">\n            <span class=\"text-gray-700 truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n            <button type=\"button\" class=\"text-gray-400 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          {{ getFileError(rowField.field) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CUSTOM\">\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      <div *ngSwitchDefault>\n      </div>\n    </ng-container>\n\n    <!-- Show cross-field error below any field that has one -->\n    <div\n      *ngIf=\"getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT\"\n      class=\"text-red-500 text-xs pl-2 pt-1\"\n    >\n      {{ getFieldError(asKey(rowField.field.key)) }}\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  <div *ngIf=\"fieldGroups.length > 0\" class=\"flex flex-col gap-6\">\n    <div *ngFor=\"let group of fieldGroups\" class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n      <div class=\"border-b border-gray-200 pb-2\">\n        <h3 class=\"text-base font-semibold text-gray-900\">{{ group.title }}</h3>\n        <p *ngIf=\"group.description\" class=\"text-sm text-gray-500 mt-0.5\">{{ group.description }}</p>\n      </div>\n      <div *ngFor=\"let row of group.rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n        <div *ngFor=\"let rowField of row.fields\" 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      </div>\n    </div>\n  </div>\n\n  <!-- Standard rows (no groups) -->\n  <div class=\"flex flex-col gap-4\" *ngIf=\"rows.length > 0\">\n    <div *ngFor=\"let row of rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n      <div *ngFor=\"let rowField of row.fields\" 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    </div>\n  </div>\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  <div *ngIf=\"formErrors['_form']\" class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n    {{ formErrors['_form'] }}\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-gray-200\" *ngIf=\"!hideFooter\">\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"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</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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }, { 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: "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, MnCustomFieldHostDirective, MnTable], template: "<form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"flex flex-col gap-6\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    <ng-container [ngSwitch]=\"rowField.field.kind\">\n      <div *ngSwitchCase=\"FieldKind.TEXT\">\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          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.NUMBER\">\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          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.PASSWORD\">\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          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SELECT\" class=\"flex flex-col\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\" [for]=\"asKey(rowField.field.key)\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"relative\">\n          <select\n            [id]=\"asKey(rowField.field.key)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            class=\"w-full px-3 py-2 border border-gray-300 rounded-xl text-base text-gray-900 bg-white transition-all appearance-none pr-8 focus:outline-none focus:border-blue-500 focus:ring-[3px] focus:ring-blue-500/10 select-arrow\"\n            [class.opacity-50]=\"isFieldLoading(asKey(rowField.field.key))\"\n          >\n            <option value=\"\" disabled selected hidden>\n              {{ isFieldLoading(asKey(rowField.field.key)) ? labels.loading : labels.selectPlaceholder }}\n            </option>\n            <option\n              *ngFor=\"let option of getFieldOptions(rowField.field)\"\n              [value]=\"option.value\"\n              [disabled]=\"option.state === 'disabled'\"\n            >\n              {{ option.label }}\n            </option>\n          </select>\n          <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"absolute right-8 top-1/2 -translate-y-1/2\">\n            <div class=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CHECKBOX\">\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          })\"\n        ></mn-lib-checkbox>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.DATE\">\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          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.DATETIME\">\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          })\"\n        ></mn-lib-datetime>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.TEXTAREA\">\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            rows: asField(rowField.field).rows || 4,\n            resize: 'vertical'\n          })\"\n        ></mn-lib-textarea>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT\">\n        <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"flex items-center gap-2 py-2 text-sm text-gray-500\">\n          <div class=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          Loading options...\n        </div>\n        <mn-lib-multi-select\n          *ngIf=\"!isFieldLoading(asKey(rowField.field.key))\"\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          })\"\n        ></mn-lib-multi-select>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SINGLE_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.COLOR\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\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-gray-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-gray-600 font-mono\">{{ getColorValue(rowField.field) }}</span>\n        </div>\n        <div *ngIf=\"asField(rowField.field).swatches\" class=\"flex gap-1.5 mt-1\">\n          <button\n            *ngFor=\"let swatch of asField(rowField.field).swatches\"\n            type=\"button\"\n            class=\"w-6 h-6 rounded-md border border-gray-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        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.RATING\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-1\">\n          <button\n            *ngFor=\"let star of getRatingRange(rowField.field)\"\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-gray-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          <span class=\"text-sm text-gray-500 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SLIDER\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-3\">\n          <input\n            type=\"range\"\n            class=\"flex-1 h-2 bg-gray-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          <span *ngIf=\"asField(rowField.field).showValue !== false\" class=\"text-sm text-gray-600 min-w-[3rem] text-right\">\n            {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n          </span>\n        </div>\n        <div class=\"flex justify-between text-xs text-gray-400 px-1\">\n          <span>{{ asField(rowField.field).min ?? 0 }}</span>\n          <span>{{ asField(rowField.field).max ?? 100 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.FILE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div\n          class=\"relative border-2 border-dashed border-gray-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-gray-400\" 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-gray-500\">{{ labels.fileUploadPrompt }}</p>\n            <p *ngIf=\"asField(rowField.field).accept\" class=\"text-xs text-gray-400\">Accepted: {{ asField(rowField.field).accept }}</p>\n            <p *ngIf=\"asField(rowField.field).maxSize\" class=\"text-xs text-gray-400\">Max size: {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n          </div>\n        </div>\n        <!-- Selected files list -->\n        <div *ngIf=\"getSelectedFiles(asKey(rowField.field.key)).length > 0\" class=\"flex flex-col gap-1 mt-2\">\n          <div *ngFor=\"let file of getSelectedFiles(asKey(rowField.field.key)); let i = index\" class=\"flex items-center justify-between px-3 py-1.5 bg-gray-50 rounded-lg text-sm\">\n            <span class=\"text-gray-700 truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n            <button type=\"button\" class=\"text-gray-400 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          {{ getFileError(rowField.field) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CUSTOM\">\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      <div *ngSwitchDefault>\n      </div>\n    </ng-container>\n\n    <!-- Show cross-field error below any field that has one -->\n    <div\n      *ngIf=\"getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT\"\n      class=\"text-red-500 text-xs pl-2 pt-1\"\n    >\n      {{ getFieldError(asKey(rowField.field.key)) }}\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  <div *ngIf=\"fieldGroups.length > 0\" class=\"flex flex-col gap-6\">\n    <div *ngFor=\"let group of fieldGroups\" class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n      <div class=\"border-b border-gray-200 pb-2\">\n        <h3 class=\"text-base font-semibold text-gray-900\">{{ group.title }}</h3>\n        <p *ngIf=\"group.description\" class=\"text-sm text-gray-500 mt-0.5\">{{ group.description }}</p>\n      </div>\n      <div *ngFor=\"let row of group.rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n        <div *ngFor=\"let rowField of row.fields\" 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      </div>\n    </div>\n  </div>\n\n  <!-- Standard rows (no groups) -->\n  <div class=\"flex flex-col gap-4\" *ngIf=\"fieldGroups.length === 0\">\n    <div *ngFor=\"let row of rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n      <div *ngFor=\"let rowField of row.fields\" 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    </div>\n  </div>\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  <div *ngIf=\"formErrors['_form']\" class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n    {{ formErrors['_form'] }}\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-gray-200\" *ngIf=\"!hideFooter\">\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"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</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"] }]
+            args: [{ selector: 'mn-form-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnInputField, MnCheckbox, MnDatetime, MnMultiSelect, MnTextarea, MnCustomFieldHostDirective, MnTable, MnCustomBodyHostComponent], template: "<mn-custom-body-host\n  *ngIf=\"(config.component || config.template) && !hideCustomBody\"\n  [config]=\"asAny(config)\"\n  [modalRef]=\"asAny(modalRef)\"\n  class=\"mb-6 block\"\n></mn-custom-body-host>\n\n<form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"flex flex-col gap-6\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    <ng-container [ngSwitch]=\"rowField.field.kind\">\n      <div *ngSwitchCase=\"FieldKind.TEXT\">\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      <div *ngSwitchCase=\"FieldKind.NUMBER\">\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      <div *ngSwitchCase=\"FieldKind.PASSWORD\">\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      <div *ngSwitchCase=\"FieldKind.SELECT\" class=\"flex flex-col\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\" [for]=\"asKey(rowField.field.key)\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"relative\">\n          <select\n            [id]=\"asKey(rowField.field.key)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            class=\"w-full px-3 py-2 border border-gray-300 rounded-xl text-base text-gray-900 bg-white transition-all appearance-none pr-8 focus:outline-none focus:border-blue-500 focus:ring-[3px] focus:ring-blue-500/10 select-arrow\"\n            [class.opacity-50]=\"isFieldLoading(asKey(rowField.field.key)) || isFieldDisabled(rowField.field)\"\n            [attr.disabled]=\"isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field) ? '' : null\"\n          >\n            <option value=\"\" disabled selected hidden>\n              {{ isFieldLoading(asKey(rowField.field.key)) ? labels.loading : labels.selectPlaceholder }}\n            </option>\n            <option\n              *ngFor=\"let option of getFieldOptions(rowField.field)\"\n              [value]=\"option.value\"\n              [disabled]=\"option.state === 'disabled'\"\n            >\n              {{ option.label }}\n            </option>\n          </select>\n          <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"absolute right-8 top-1/2 -translate-y-1/2\">\n            <div class=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CHECKBOX\">\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      <div *ngSwitchCase=\"FieldKind.DATE\">\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      <div *ngSwitchCase=\"FieldKind.DATETIME\">\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      <div *ngSwitchCase=\"FieldKind.TEXTAREA\">\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            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      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT\">\n        <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"flex items-center gap-2 py-2 text-sm text-gray-500\">\n          <div class=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          Loading options...\n        </div>\n        <mn-lib-multi-select\n          *ngIf=\"!isFieldLoading(asKey(rowField.field.key))\"\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        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SINGLE_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.COLOR\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\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-gray-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-gray-600 font-mono\">{{ getColorValue(rowField.field) }}</span>\n        </div>\n        <div *ngIf=\"asField(rowField.field).swatches\" class=\"flex gap-1.5 mt-1\">\n          <button\n            *ngFor=\"let swatch of asField(rowField.field).swatches\"\n            type=\"button\"\n            class=\"w-6 h-6 rounded-md border border-gray-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        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.RATING\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-1\">\n          <button\n            *ngFor=\"let star of getRatingRange(rowField.field)\"\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-gray-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          <span class=\"text-sm text-gray-500 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SLIDER\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-3\">\n          <input\n            type=\"range\"\n            class=\"flex-1 h-2 bg-gray-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          <span *ngIf=\"asField(rowField.field).showValue !== false\" class=\"text-sm text-gray-600 min-w-[3rem] text-right\">\n            {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n          </span>\n        </div>\n        <div class=\"flex justify-between text-xs text-gray-400 px-1\">\n          <span>{{ asField(rowField.field).min ?? 0 }}</span>\n          <span>{{ asField(rowField.field).max ?? 100 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.FILE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div\n          class=\"relative border-2 border-dashed border-gray-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-gray-400\" 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-gray-500\">{{ labels.fileUploadPrompt }}</p>\n            <p *ngIf=\"asField(rowField.field).accept\" class=\"text-xs text-gray-400\">Accepted: {{ asField(rowField.field).accept }}</p>\n            <p *ngIf=\"asField(rowField.field).maxSize\" class=\"text-xs text-gray-400\">Max size: {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n          </div>\n        </div>\n        <!-- Selected files list -->\n        <div *ngIf=\"getSelectedFiles(asKey(rowField.field.key)).length > 0\" class=\"flex flex-col gap-1 mt-2\">\n          <div *ngFor=\"let file of getSelectedFiles(asKey(rowField.field.key)); let i = index\" class=\"flex items-center justify-between px-3 py-1.5 bg-gray-50 rounded-lg text-sm\">\n            <span class=\"text-gray-700 truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n            <button type=\"button\" class=\"text-gray-400 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          {{ getFileError(rowField.field) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CUSTOM\">\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      <div *ngSwitchDefault>\n      </div>\n    </ng-container>\n\n    <!-- Show cross-field error below any field that has one -->\n    <div\n      *ngIf=\"getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT\"\n      class=\"text-red-500 text-xs pl-2 pt-1\"\n    >\n      {{ getFieldError(asKey(rowField.field.key)) }}\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  <div *ngIf=\"fieldGroups.length > 0\" class=\"flex flex-col gap-6\">\n    <div *ngFor=\"let group of fieldGroups\" class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n      <div class=\"border-b border-gray-200 pb-2\">\n        <h3 class=\"text-base font-semibold text-gray-900\">{{ group.title }}</h3>\n        <p *ngIf=\"group.description\" class=\"text-sm text-gray-500 mt-0.5\">{{ group.description }}</p>\n      </div>\n      <div *ngFor=\"let row of group.rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n        <div *ngFor=\"let rowField of row.fields\" 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      </div>\n    </div>\n  </div>\n\n  <!-- Standard rows (no groups) -->\n  <div class=\"flex flex-col gap-4\" *ngIf=\"rows.length > 0\">\n    <div *ngFor=\"let row of rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n      <div *ngFor=\"let rowField of row.fields\" 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    </div>\n  </div>\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  <div *ngIf=\"formErrors['_form']\" class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n    {{ formErrors['_form'] }}\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-gray-200\" *ngIf=\"!hideFooter\">\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"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</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: [{
                 type: Input
             }], modalRef: [{
                 type: Input
             }], hideFooter: [{
                 type: Input
+            }], hideCustomBody: [{
+                type: Input
+            }], formStatusChange: [{
+                type: Output
+            }], inputFields: [{
+                type: ViewChildren,
+                args: [MnInputField]
+            }], textareas: [{
+                type: ViewChildren,
+                args: [MnTextarea]
             }] } });
 
 class MnWizardBodyComponent {
@@ -3638,6 +4178,11 @@ class MnWizardBodyComponent {
         // Pre-build form configs for all form-driven steps
         for (const step of this.config.steps) {
             if (step.fields && step.fields.length > 0) {
+                // Merge top-level initialValue with step-level initialValue
+                const mergedInitialValue = {
+                    ...(this.config.initialValue || {}),
+                    ...(step.initialValue || {})
+                };
                 this.stepFormConfigs[step.id] = {
                     kind: ModalKind.FORM,
                     fields: step.fields,
@@ -3645,7 +4190,9 @@ class MnWizardBodyComponent {
                     fieldGroups: step.fieldGroups,
                     formValidators: step.formValidators,
                     groupValidators: step.groupValidators,
-                    initialValue: step.initialValue,
+                    initialValue: mergedInitialValue,
+                    readOnly: this.config.readOnly,
+                    disabled: this.config.disabled
                 };
             }
         }
@@ -3658,6 +4205,10 @@ class MnWizardBodyComponent {
         // Subscribe to form bodies list changes to track validity
         this.formBodiesSubscription = this.formBodies.changes.subscribe(() => {
             this.trackCurrentStepValidity();
+            // Apply autofocus when form bodies change (e.g. step navigation)
+            setTimeout(() => {
+                this.getCurrentFormBody()?.applyAutoFocus();
+            }, 100);
         });
         // Initial validity check
         this.trackCurrentStepValidity();
@@ -3883,11 +4434,11 @@ class MnWizardBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  <div class=\"flex gap-2 pb-4 border-b border-gray-200\">\n    <div\n      *ngFor=\"let step of visibleSteps; let i = index\"\n      class=\"flex items-center gap-2 flex-1\"\n      [class.active]=\"step.id === currentStepId\"\n      [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n      [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n      (click)=\"isFreeFlow ? goToStep(step) : null\"\n    >\n      <div\n        class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n        [ngClass]=\"{\n          'bg-blue-500 text-white': step.id === currentStepId,\n          'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n          'bg-gray-200 text-gray-500': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n        }\"\n      >{{ i + 1 }}</div>\n      <div\n        class=\"text-sm\"\n        [ngClass]=\"{\n          'text-gray-900 font-semibold': step.id === currentStepId,\n          'text-gray-500': step.id !== currentStepId\n        }\"\n      >{{ step.title }}</div>\n    </div>\n  </div>\n\n  <div class=\"min-h-48\">\n    <ng-container *ngFor=\"let step of config.steps\">\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">{{ step.title }}</h3>\n        <div class=\"text-gray-700\">\n          <!-- Form step -->\n          <mn-form-body\n            *ngIf=\"stepFormConfigs[step.id]\"\n            [config]=\"stepFormConfigs[step.id]\"\n            [modalRef]=\"asAny(modalRef)\"\n            [hideFooter]=\"true\"\n          ></mn-form-body>\n\n          <!-- Text body -->\n          <div *ngIf=\"!stepFormConfigs[step.id] && isTextBody(step)\">\n            {{ step.body }}\n          </div>\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  <div *ngIf=\"wizardErrors && (wizardErrors | keyvalue).length > 0\" class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n    <div *ngFor=\"let err of wizardErrors | keyvalue\" class=\"text-red-500 text-sm\">\n      {{ err.value }}\n    </div>\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-gray-200\">\n    <button\n      mnButton\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"back()\"\n    >\n      {{ canGoBack ? labels.back : labels.close }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      *ngIf=\"!isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n      (click)=\"next()\"\n    >\n      {{ labels.next }}\n    </button>\n\n    <button\n      *ngIf=\"isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n      [disabled]=\"!isCurrentStepValid || isCompleting\"\n      (click)=\"complete()\"\n    >\n      {{ isCompleting ? labels.completing : labels.complete }}\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  <mn-custom-body-host\n    *ngIf=\"config.component || config.template\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"block\"\n  ></mn-custom-body-host>\n\n  <div class=\"flex gap-2 pb-4 border-b border-gray-200\">\n    <div\n      *ngFor=\"let step of visibleSteps; let i = index\"\n      class=\"flex items-center gap-2 flex-1\"\n      [class.active]=\"step.id === currentStepId\"\n      [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n      [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n      (click)=\"isFreeFlow ? goToStep(step) : null\"\n    >\n      <div\n        class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n        [ngClass]=\"{\n          'bg-blue-500 text-white': step.id === currentStepId,\n          'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n          'bg-gray-200 text-gray-500': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n        }\"\n      >{{ i + 1 }}</div>\n      <div\n        class=\"text-sm\"\n        [ngClass]=\"{\n          'text-gray-900 font-semibold': step.id === currentStepId,\n          'text-gray-500': step.id !== currentStepId\n        }\"\n      >{{ step.title }}</div>\n    </div>\n  </div>\n\n  <div class=\"min-h-48\">\n    <ng-container *ngFor=\"let step of config.steps\">\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">{{ step.title }}</h3>\n        <div class=\"text-gray-700\">\n          <!-- Form step -->\n          <mn-form-body\n            *ngIf=\"stepFormConfigs[step.id]\"\n            [config]=\"stepFormConfigs[step.id]\"\n            [modalRef]=\"asAny(modalRef)\"\n            [hideFooter]=\"true\"\n            [hideCustomBody]=\"true\"\n          ></mn-form-body>\n\n          <!-- Text body -->\n          <div *ngIf=\"!stepFormConfigs[step.id] && isTextBody(step)\">\n            {{ step.body }}\n          </div>\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  <div *ngIf=\"wizardErrors && (wizardErrors | keyvalue).length > 0\" class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n    <div *ngFor=\"let err of wizardErrors | keyvalue\" class=\"text-red-500 text-sm\">\n      {{ err.value }}\n    </div>\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-gray-200\">\n    <button\n      *ngIf=\"!currentStep?.hideBack\"\n      mnButton\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"back()\"\n    >\n      {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      *ngIf=\"!isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n      (click)=\"next()\"\n    >\n      {{ currentStep?.nextLabel || labels.next }}\n    </button>\n\n    <button\n      *ngIf=\"isLastStep\"\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  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, MnButton, MnFormBodyComponent], template: "<div class=\"flex flex-col gap-6\">\n  <div class=\"flex gap-2 pb-4 border-b border-gray-200\">\n    <div\n      *ngFor=\"let step of visibleSteps; let i = index\"\n      class=\"flex items-center gap-2 flex-1\"\n      [class.active]=\"step.id === currentStepId\"\n      [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n      [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n      (click)=\"isFreeFlow ? goToStep(step) : null\"\n    >\n      <div\n        class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n        [ngClass]=\"{\n          'bg-blue-500 text-white': step.id === currentStepId,\n          'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n          'bg-gray-200 text-gray-500': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n        }\"\n      >{{ i + 1 }}</div>\n      <div\n        class=\"text-sm\"\n        [ngClass]=\"{\n          'text-gray-900 font-semibold': step.id === currentStepId,\n          'text-gray-500': step.id !== currentStepId\n        }\"\n      >{{ step.title }}</div>\n    </div>\n  </div>\n\n  <div class=\"min-h-48\">\n    <ng-container *ngFor=\"let step of config.steps\">\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">{{ step.title }}</h3>\n        <div class=\"text-gray-700\">\n          <!-- Form step -->\n          <mn-form-body\n            *ngIf=\"stepFormConfigs[step.id]\"\n            [config]=\"stepFormConfigs[step.id]\"\n            [modalRef]=\"asAny(modalRef)\"\n            [hideFooter]=\"true\"\n          ></mn-form-body>\n\n          <!-- Text body -->\n          <div *ngIf=\"!stepFormConfigs[step.id] && isTextBody(step)\">\n            {{ step.body }}\n          </div>\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  <div *ngIf=\"wizardErrors && (wizardErrors | keyvalue).length > 0\" class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n    <div *ngFor=\"let err of wizardErrors | keyvalue\" class=\"text-red-500 text-sm\">\n      {{ err.value }}\n    </div>\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-gray-200\">\n    <button\n      mnButton\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"back()\"\n    >\n      {{ canGoBack ? labels.back : labels.close }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      *ngIf=\"!isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n      (click)=\"next()\"\n    >\n      {{ labels.next }}\n    </button>\n\n    <button\n      *ngIf=\"isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n      [disabled]=\"!isCurrentStepValid || isCompleting\"\n      (click)=\"complete()\"\n    >\n      {{ isCompleting ? labels.completing : labels.complete }}\n    </button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent], template: "<div class=\"flex flex-col gap-6\">\n  <mn-custom-body-host\n    *ngIf=\"config.component || config.template\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"block\"\n  ></mn-custom-body-host>\n\n  <div class=\"flex gap-2 pb-4 border-b border-gray-200\">\n    <div\n      *ngFor=\"let step of visibleSteps; let i = index\"\n      class=\"flex items-center gap-2 flex-1\"\n      [class.active]=\"step.id === currentStepId\"\n      [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n      [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n      (click)=\"isFreeFlow ? goToStep(step) : null\"\n    >\n      <div\n        class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n        [ngClass]=\"{\n          'bg-blue-500 text-white': step.id === currentStepId,\n          'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n          'bg-gray-200 text-gray-500': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n        }\"\n      >{{ i + 1 }}</div>\n      <div\n        class=\"text-sm\"\n        [ngClass]=\"{\n          'text-gray-900 font-semibold': step.id === currentStepId,\n          'text-gray-500': step.id !== currentStepId\n        }\"\n      >{{ step.title }}</div>\n    </div>\n  </div>\n\n  <div class=\"min-h-48\">\n    <ng-container *ngFor=\"let step of config.steps\">\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">{{ step.title }}</h3>\n        <div class=\"text-gray-700\">\n          <!-- Form step -->\n          <mn-form-body\n            *ngIf=\"stepFormConfigs[step.id]\"\n            [config]=\"stepFormConfigs[step.id]\"\n            [modalRef]=\"asAny(modalRef)\"\n            [hideFooter]=\"true\"\n            [hideCustomBody]=\"true\"\n          ></mn-form-body>\n\n          <!-- Text body -->\n          <div *ngIf=\"!stepFormConfigs[step.id] && isTextBody(step)\">\n            {{ step.body }}\n          </div>\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  <div *ngIf=\"wizardErrors && (wizardErrors | keyvalue).length > 0\" class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n    <div *ngFor=\"let err of wizardErrors | keyvalue\" class=\"text-red-500 text-sm\">\n      {{ err.value }}\n    </div>\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-gray-200\">\n    <button\n      *ngIf=\"!currentStep?.hideBack\"\n      mnButton\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"back()\"\n    >\n      {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      *ngIf=\"!isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n      (click)=\"next()\"\n    >\n      {{ currentStep?.nextLabel || labels.next }}\n    </button>\n\n    <button\n      *ngIf=\"isLastStep\"\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  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -3898,10 +4449,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 class MnConfirmationBodyComponent {
+    cdr;
     config;
     modalRef;
+    formBody;
+    confirmButtonStatus = 'VALID';
+    hasFormFields = false;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.hasFormFields = !!((this.config.fields && this.config.fields.length > 0) ||
+            (this.config.fieldGroups && this.config.fieldGroups.length > 0) ||
+            (this.config.rows && this.config.rows.length > 0));
+    }
+    onFormStatusChange(status) {
+        this.confirmButtonStatus = status;
+        this.cdr.markForCheck();
+        this.cdr.detectChanges();
+    }
     async confirm() {
-        const result = true;
+        if (this.hasFormFields && this.formBody?.form.invalid) {
+            this.formBody.form.markAllAsTouched();
+            return;
+        }
+        const result = (this.hasFormFields ? this.formBody?.form.value : true);
         if (this.config.confirm?.handler) {
             await this.config.confirm.handler.handle(result);
         }
@@ -3956,75 +4528,31 @@ class MnConfirmationBodyComponent {
                 return 'outline';
         }
     }
-    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: "14.0.0", version: "21.1.3", type: MnConfirmationBodyComponent, isStandalone: true, selector: "mn-confirmation-body", inputs: { config: "config", modalRef: "modalRef" }, ngImport: i0, template: "<div class=\"flex flex-col items-center gap-6 text-center\" [ngClass]=\"toneClass\">\n  <div *ngIf=\"config.tone === 'warning' || config.tone === 'danger'\"\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    <svg\n      *ngIf=\"config.tone === 'warning'\"\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    <svg\n      *ngIf=\"config.tone === 'danger'\"\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  </div>\n\n  <div class=\"text-base text-gray-700 leading-relaxed max-w-[28rem]\">\n    {{ config.message }}\n  </div>\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      }\"\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }] });
-}
-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], template: "<div class=\"flex flex-col items-center gap-6 text-center\" [ngClass]=\"toneClass\">\n  <div *ngIf=\"config.tone === 'warning' || config.tone === 'danger'\"\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    <svg\n      *ngIf=\"config.tone === 'warning'\"\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    <svg\n      *ngIf=\"config.tone === 'danger'\"\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  </div>\n\n  <div class=\"text-base text-gray-700 leading-relaxed max-w-[28rem]\">\n    {{ config.message }}\n  </div>\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      }\"\n      (click)=\"confirm()\"\n    >\n      {{ confirmLabel }}\n    </button>\n  </div>\n</div>\n" }]
-        }], propDecorators: { config: [{
-                type: Input
-            }], modalRef: [{
-                type: Input
-            }] } });
-
-class MnCustomBodyHostComponent {
-    config;
-    modalRef;
-    container;
-    componentRef;
-    ngOnInit() {
-        setTimeout(() => this.loadContent(), 0);
-    }
-    loadContent() {
-        if (!this.container)
-            return;
-        this.container.clear();
-        if (this.config.component) {
-            this.attachComponent(this.config.component);
-        }
-        else if (this.config.template) {
-            this.attachTemplate(this.config.template);
-        }
+    asAny(val) {
+        return val;
     }
-    attachComponent(component) {
-        this.componentRef = this.container.createComponent(component);
-        // Pass inputs to the component
-        if (this.config.inputs) {
-            Object.entries(this.config.inputs).forEach(([key, value]) => {
-                this.componentRef.instance[key] = value;
-            });
-        }
-        // Pass modalRef if the component has a modalRef property
-        const instance = this.componentRef.instance;
-        if (instance && 'modalRef' in instance) {
-            instance.modalRef = this.modalRef;
+    get isConfirmDisabled() {
+        if (this.hasFormFields) {
+            return this.confirmButtonStatus !== 'VALID';
         }
+        return false;
     }
-    attachTemplate(template) {
-        this.container.createEmbeddedView(template, {
-            $implicit: this.modalRef,
-            modalRef: this.modalRef,
-        });
+    asField(field) {
+        return field;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCustomBodyHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnCustomBodyHostComponent, isStandalone: true, selector: "mn-custom-body-host", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: '<ng-container #container></ng-container>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    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: "14.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  <mn-custom-body-host\n    *ngIf=\"config.component || config.template\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n  ></mn-custom-body-host>\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    <div *ngIf=\"config.tone === 'warning' || config.tone === 'danger'\"\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      <svg\n        *ngIf=\"config.tone === 'warning'\"\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      <svg\n        *ngIf=\"config.tone === 'danger'\"\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    </div>\n\n    <div class=\"text-base text-gray-700 leading-relaxed max-w-[28rem]\" *ngIf=\"config.message\">\n      {{ config.message }}\n    </div>\n  </div>\n\n  <!-- Form Fields / Rows -->\n  <mn-form-body\n    *ngIf=\"hasFormFields\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    [hideFooter]=\"true\"\n    [hideCustomBody]=\"true\"\n    (formStatusChange)=\"onFormStatusChange($event)\"\n  ></mn-form-body>\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: MnCustomBodyHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnConfirmationBodyComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'mn-custom-body-host',
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: '<ng-container #container></ng-container>',
-                }]
-        }], 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  <mn-custom-body-host\n    *ngIf=\"config.component || config.template\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n  ></mn-custom-body-host>\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    <div *ngIf=\"config.tone === 'warning' || config.tone === 'danger'\"\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      <svg\n        *ngIf=\"config.tone === 'warning'\"\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      <svg\n        *ngIf=\"config.tone === 'danger'\"\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    </div>\n\n    <div class=\"text-base text-gray-700 leading-relaxed max-w-[28rem]\" *ngIf=\"config.message\">\n      {{ config.message }}\n    </div>\n  </div>\n\n  <!-- Form Fields / Rows -->\n  <mn-form-body\n    *ngIf=\"hasFormFields\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    [hideFooter]=\"true\"\n    [hideCustomBody]=\"true\"\n    (formStatusChange)=\"onFormStatusChange($event)\"\n  ></mn-form-body>\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: [{
                 type: Input
             }], modalRef: [{
                 type: Input
-            }], container: [{
+            }], formBody: [{
                 type: ViewChild,
-                args: ['container', { read: ViewContainerRef }]
+                args: [MnFormBodyComponent]
             }] } });
 
 class MnModalShellComponent {
@@ -4032,6 +4560,7 @@ class MnModalShellComponent {
     config;
     modalRef;
     isClosing = false;
+    isStacked = false;
     ModalKind = ModalKind;
     previouslyFocusedElement = null;
     focusTrapListener = null;
@@ -4108,7 +4637,12 @@ class MnModalShellComponent {
     get hostClasses() {
         const size = this.config.size || ModalSize.MD;
         const closing = this.isClosing ? ' closing' : '';
-        return `modal-shell modal-${size}${closing}`;
+        const animType = typeof this.config.animation === 'string'
+            ? this.config.animation
+            : this.config.animation?.type || 'slide';
+        const animation = ` anim-${animType}`;
+        const stacked = this.isStacked ? ' is-stacked' : '';
+        return `modal-shell modal-${size}${closing}${animation}${stacked}`;
     }
     startClosing() {
         this.isClosing = true;
@@ -4159,6 +4693,17 @@ class MnModalShellComponent {
     get showCloseButton() {
         return this.config.closeMode !== CloseMode.DISABLED;
     }
+    get animationClass() {
+        const animType = typeof this.config.animation === 'string'
+            ? this.config.animation
+            : this.config.animation?.type || 'slide';
+        switch (animType) {
+            case 'fade': return 'animate-[fadeIn_0.2s_ease-in-out]';
+            case 'zoom': return 'animate-[zoomIn_0.2s_ease-in-out]';
+            case 'slide':
+            default: return 'animate-[slideIn_0.2s_ease-in-out]';
+        }
+    }
     // =========================
     // Footer Actions
     // =========================
@@ -4240,7 +4785,7 @@ class MnModalShellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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: "<div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" *ngIf=\"showBackdrop\" (click)=\"onBackdropClick()\"></div>\n\n<div\n  class=\"modal-container relative bg-white rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col animate-[slideIn_0.2s_ease-in-out]\"\n  [ngClass]=\"containerSizeClass\"\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=\"flex items-center justify-between p-6 border-b border-gray-200\">\n    <div class=\"flex flex-col gap-0.5\">\n      <h2 class=\"m-0 text-xl font-semibold text-gray-900\" *ngIf=\"config.title\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      <p class=\"m-0 text-sm text-gray-500 font-normal\" *ngIf=\"config.subtitle\">{{ config.subtitle }}</p>\n    </div>\n    <button\n      *ngIf=\"showCloseButton\"\n      class=\"bg-transparent border-none text-2xl cursor-pointer text-gray-500 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-gray-100 hover:text-gray-900\"\n      (click)=\"onCloseButtonClick()\"\n      aria-label=\"Close modal\"\n    >\n      \u00D7\n    </button>\n  </div>\n  <p class=\"m-0 px-6 text-sm text-gray-500 leading-relaxed\" *ngIf=\"config.description\" id=\"mn-modal-description\">{{ config.description }}</p>\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    <mn-wizard-body\n      *ngIf=\"config.kind === ModalKind.WIZARD\"\n      [config]=\"asWizard(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-wizard-body>\n\n    <mn-form-body\n      *ngIf=\"config.kind === ModalKind.FORM\"\n      [config]=\"asForm(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-form-body>\n\n    <mn-confirmation-body\n      *ngIf=\"config.kind === ModalKind.CONFIRMATION\"\n      [config]=\"asConfirmation(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-confirmation-body>\n\n    <mn-custom-body-host\n      *ngIf=\"config.kind === ModalKind.CUSTOM\"\n      [config]=\"asCustom(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-custom-body-host>\n  </div>\n\n  <!-- Custom Footer Actions -->\n  <div *ngIf=\"hasCustomFooterActions\" class=\"flex gap-3 p-6 border-t border-gray-200\">\n    <ng-container *ngFor=\"let action of leftFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n\n    <div class=\"flex-1\"></div>\n\n    <ng-container *ngFor=\"let action of rightFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing) .modal-container{animation:slideOut .15s ease-in-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter"] }, { 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: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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: "<div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" *ngIf=\"showBackdrop\" (click)=\"onBackdropClick()\"></div>\n\n<div\n  class=\"modal-container relative bg-white rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [ngClass]=\"[containerSizeClass, animationClass]\"\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=\"flex items-center justify-between p-6 border-b border-gray-200\">\n    <div class=\"flex flex-col gap-0.5\">\n      <h2 class=\"m-0 text-xl font-semibold text-gray-900\" *ngIf=\"config.title\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      <p class=\"m-0 text-sm text-gray-500 font-normal\" *ngIf=\"config.subtitle\">{{ config.subtitle }}</p>\n    </div>\n    <button\n      *ngIf=\"showCloseButton\"\n      class=\"bg-transparent border-none text-2xl cursor-pointer text-gray-500 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-gray-100 hover:text-gray-900\"\n      (click)=\"onCloseButtonClick()\"\n      aria-label=\"Close modal\"\n    >\n      \u00D7\n    </button>\n  </div>\n  <p class=\"m-0 px-6 text-sm text-gray-500 leading-relaxed\" *ngIf=\"config.description\" id=\"mn-modal-description\">{{ config.description }}</p>\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    <mn-wizard-body\n      *ngIf=\"config.kind === ModalKind.WIZARD\"\n      [config]=\"asWizard(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-wizard-body>\n\n    <mn-form-body\n      *ngIf=\"config.kind === ModalKind.FORM\"\n      [config]=\"asForm(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-form-body>\n\n    <mn-confirmation-body\n      *ngIf=\"config.kind === ModalKind.CONFIRMATION\"\n      [config]=\"asConfirmation(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-confirmation-body>\n\n    <mn-custom-body-host\n      *ngIf=\"config.kind === ModalKind.CUSTOM\"\n      [config]=\"asCustom(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-custom-body-host>\n  </div>\n\n  <!-- Custom Footer Actions -->\n  <div *ngIf=\"hasCustomFooterActions\" class=\"flex gap-3 p-6 border-t border-gray-200\">\n    <ng-container *ngFor=\"let action of leftFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n\n    <div class=\"flex-1\"></div>\n\n    <ng-container *ngFor=\"let action of rightFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n  </div>\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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, decorators: [{
             type: Component,
@@ -4251,7 +4796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnConfirmationBodyComponent,
                         MnCustomBodyHostComponent,
                         MnButton,
-                    ], template: "<div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" *ngIf=\"showBackdrop\" (click)=\"onBackdropClick()\"></div>\n\n<div\n  class=\"modal-container relative bg-white rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col animate-[slideIn_0.2s_ease-in-out]\"\n  [ngClass]=\"containerSizeClass\"\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=\"flex items-center justify-between p-6 border-b border-gray-200\">\n    <div class=\"flex flex-col gap-0.5\">\n      <h2 class=\"m-0 text-xl font-semibold text-gray-900\" *ngIf=\"config.title\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      <p class=\"m-0 text-sm text-gray-500 font-normal\" *ngIf=\"config.subtitle\">{{ config.subtitle }}</p>\n    </div>\n    <button\n      *ngIf=\"showCloseButton\"\n      class=\"bg-transparent border-none text-2xl cursor-pointer text-gray-500 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-gray-100 hover:text-gray-900\"\n      (click)=\"onCloseButtonClick()\"\n      aria-label=\"Close modal\"\n    >\n      \u00D7\n    </button>\n  </div>\n  <p class=\"m-0 px-6 text-sm text-gray-500 leading-relaxed\" *ngIf=\"config.description\" id=\"mn-modal-description\">{{ config.description }}</p>\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    <mn-wizard-body\n      *ngIf=\"config.kind === ModalKind.WIZARD\"\n      [config]=\"asWizard(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-wizard-body>\n\n    <mn-form-body\n      *ngIf=\"config.kind === ModalKind.FORM\"\n      [config]=\"asForm(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-form-body>\n\n    <mn-confirmation-body\n      *ngIf=\"config.kind === ModalKind.CONFIRMATION\"\n      [config]=\"asConfirmation(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-confirmation-body>\n\n    <mn-custom-body-host\n      *ngIf=\"config.kind === ModalKind.CUSTOM\"\n      [config]=\"asCustom(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-custom-body-host>\n  </div>\n\n  <!-- Custom Footer Actions -->\n  <div *ngIf=\"hasCustomFooterActions\" class=\"flex gap-3 p-6 border-t border-gray-200\">\n    <ng-container *ngFor=\"let action of leftFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n\n    <div class=\"flex-1\"></div>\n\n    <ng-container *ngFor=\"let action of rightFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing) .modal-container{animation:slideOut .15s ease-in-out forwards}\n"] }]
+                    ], template: "<div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" *ngIf=\"showBackdrop\" (click)=\"onBackdropClick()\"></div>\n\n<div\n  class=\"modal-container relative bg-white rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [ngClass]=\"[containerSizeClass, animationClass]\"\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=\"flex items-center justify-between p-6 border-b border-gray-200\">\n    <div class=\"flex flex-col gap-0.5\">\n      <h2 class=\"m-0 text-xl font-semibold text-gray-900\" *ngIf=\"config.title\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      <p class=\"m-0 text-sm text-gray-500 font-normal\" *ngIf=\"config.subtitle\">{{ config.subtitle }}</p>\n    </div>\n    <button\n      *ngIf=\"showCloseButton\"\n      class=\"bg-transparent border-none text-2xl cursor-pointer text-gray-500 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-gray-100 hover:text-gray-900\"\n      (click)=\"onCloseButtonClick()\"\n      aria-label=\"Close modal\"\n    >\n      \u00D7\n    </button>\n  </div>\n  <p class=\"m-0 px-6 text-sm text-gray-500 leading-relaxed\" *ngIf=\"config.description\" id=\"mn-modal-description\">{{ config.description }}</p>\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    <mn-wizard-body\n      *ngIf=\"config.kind === ModalKind.WIZARD\"\n      [config]=\"asWizard(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-wizard-body>\n\n    <mn-form-body\n      *ngIf=\"config.kind === ModalKind.FORM\"\n      [config]=\"asForm(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-form-body>\n\n    <mn-confirmation-body\n      *ngIf=\"config.kind === ModalKind.CONFIRMATION\"\n      [config]=\"asConfirmation(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-confirmation-body>\n\n    <mn-custom-body-host\n      *ngIf=\"config.kind === ModalKind.CUSTOM\"\n      [config]=\"asCustom(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-custom-body-host>\n  </div>\n\n  <!-- Custom Footer Actions -->\n  <div *ngIf=\"hasCustomFooterActions\" class=\"flex gap-3 p-6 border-t border-gray-200\">\n    <ng-container *ngFor=\"let action of leftFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n\n    <div class=\"flex-1\"></div>\n\n    <ng-container *ngFor=\"let action of rightFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n  </div>\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 }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -4267,6 +4812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 class MnModalService {
     appRef = inject(ApplicationRef);
     injector = inject(EnvironmentInjector);
+    modalStack = [];
     open(config) {
         // Create the modal shell component
         const componentRef = createComponent(MnModalShellComponent, {
@@ -4277,6 +4823,12 @@ class MnModalService {
         // Create modal ref
         const modalRef = new MnModalRef(componentRef, config);
         componentRef.instance.modalRef = modalRef;
+        // Update stack and dim previous modal
+        if (this.modalStack.length > 0) {
+            const prevModal = this.modalStack[this.modalStack.length - 1];
+            prevModal.component.isStacked = true;
+        }
+        this.modalStack.push(modalRef);
         // Attach to application
         this.appRef.attachView(componentRef.hostView);
         const domElem = componentRef.location.nativeElement;
@@ -4285,6 +4837,15 @@ class MnModalService {
         modalRef.afterClosed$.subscribe(() => {
             this.appRef.detachView(componentRef.hostView);
             domElem.remove();
+            // Update stack
+            const index = this.modalStack.indexOf(modalRef);
+            if (index > -1) {
+                this.modalStack.splice(index, 1);
+                if (this.modalStack.length > 0) {
+                    const topModal = this.modalStack[this.modalStack.length - 1];
+                    topModal.component.isStacked = false;
+                }
+            }
         });
         return modalRef;
     }
@@ -4789,6 +5350,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }], ctorParameters: () => [{ type: MnLanguageService }] });
 
+/**
+ * Enable live preview mode. Listens for postMessage events from
+ * Mn Web Manager and hot-swaps config/translations at runtime.
+ *
+ * Call this once in your app's bootstrap (e.g., APP_INITIALIZER or root component).
+ *
+ * @param configService - The MnConfigService instance
+ * @param langService - The MnLanguageService instance
+ * @param allowedOrigins - Optional whitelist of allowed origins (security)
+ */
+function enableMnPreviewMode(configService, langService, allowedOrigins) {
+    window.addEventListener('message', async (event) => {
+        if (allowedOrigins?.length && !allowedOrigins.includes(event.origin)) {
+            return;
+        }
+        const data = event.data;
+        if (!data?.type)
+            return;
+        switch (data.type) {
+            case 'mn-config-update':
+                if (data.config) {
+                    await configService.loadFromObject(data.config);
+                }
+                break;
+            case 'mn-translations-update':
+                if (data.translations) {
+                    for (const [locale, translations] of Object.entries(data.translations)) {
+                        langService.registerTranslations(locale, translations);
+                    }
+                    await langService.setLocale(langService.locale);
+                }
+                break;
+        }
+    });
+}
+
 /*
  * Public API Surface of mn-lib
  */
@@ -4797,5 +5394,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_MN_ALERT_CONFIG, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_TEST_COMPONENT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnButton, MnCheckbox, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnTable, MnTestComponent, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, Test, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, isTranslatable, mnAlertVariants, mnButtonVariants, mnCheckboxVariants, mnDatetimeVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnComponentConfig, provideMnConfig, provideMnLanguage };
+export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_MN_ALERT_CONFIG, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_TEST_COMPONENT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnButton, MnCheckbox, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnTable, MnTestComponent, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, Test, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnButtonVariants, mnCheckboxVariants, mnDatetimeVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnComponentConfig, provideMnConfig, provideMnLanguage };
 //# sourceMappingURL=mn-angular-lib.mjs.map