mn-angular-lib 0.0.51 → 0.0.53

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 { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, of, takeUntil, map, catchError } 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}`;
@@ -1581,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
                 }, {
@@ -2307,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.
@@ -2362,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.
      */
@@ -2433,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;
@@ -2480,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;
@@ -2496,25 +2856,107 @@ class BaseModalBuilder {
         this.config.i18n = labels;
         return this;
     }
-    build() {
-        return Object.freeze({ ...this.config });
+    component(component) {
+        this.config.component = component;
+        return this;
     }
-}
-
-class WizardModalBuilder extends BaseModalBuilder {
-    constructor() {
-        super({
-            kind: ModalKind.WIZARD,
-            steps: [],
-        });
+    template(template) {
+        this.config.template = template;
+        return this;
     }
-    step(step) {
-        if (typeof step === 'function') {
-            const builder = new StepBuilder('', '');
-            step(builder);
-            const builtStep = builder.build();
-            this.config.steps.push(builtStep);
-        }
+    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 });
+    }
+}
+
+class WizardModalBuilder extends BaseModalBuilder {
+    constructor() {
+        super({
+            kind: ModalKind.WIZARD,
+            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('', '');
+            step(builder);
+            const builtStep = builder.build();
+            this.config.steps.push(builtStep);
+        }
         else {
             this.config.steps.push(step);
         }
@@ -2524,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) {
@@ -2550,8 +2993,6 @@ class WizardModalBuilder extends BaseModalBuilder {
 }
 
 class FormModalBuilder extends BaseModalBuilder {
-    currentRow = [];
-    currentRowColumns = 1;
     constructor() {
         super({
             kind: ModalKind.FORM,
@@ -2559,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.
-     */
+    body(body) {
+        return super.body(body);
+    }
     field(field) {
-        this.flushCurrentRow();
-        this.config.fields.push(field);
-        this.config.rows.push({
-            columns: 1,
-            fields: [{ field, span: 1 }],
-        });
-        return this;
+        return super.field(field);
     }
-    /**
-     * 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' })
-     */
     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;
@@ -2626,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();
     }
 }
@@ -2674,6 +3049,8 @@ class ConfirmationModalBuilder extends BaseModalBuilder {
         super({
             kind: ModalKind.CONFIRMATION,
             message: '',
+            fields: [],
+            rows: [],
         });
     }
     message(text) {
@@ -2692,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 {
@@ -2700,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;
@@ -2769,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();
     }
@@ -3091,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 = [];
@@ -3154,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();
@@ -3169,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
@@ -3187,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 = {};
@@ -3198,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 || [];
@@ -3482,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 = {};
@@ -3601,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 {
@@ -3646,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,
@@ -3653,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
                 };
             }
         }
@@ -3666,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();
@@ -3891,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: [{
@@ -3906,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);
         }
@@ -3964,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 {
@@ -4040,6 +4560,7 @@ class MnModalShellComponent {
     config;
     modalRef;
     isClosing = false;
+    isStacked = false;
     ModalKind = ModalKind;
     previouslyFocusedElement = null;
     focusTrapListener = null;
@@ -4116,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;
@@ -4167,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
     // =========================
@@ -4248,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,
@@ -4259,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: [{
@@ -4275,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, {
@@ -4285,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;
@@ -4293,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;
     }
@@ -4308,6 +4861,1274 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 // Types
 
+/**
+ * Available calendar view modes.
+ */
+var CalendarView;
+(function (CalendarView) {
+    CalendarView["MONTH"] = "MONTH";
+    CalendarView["WEEK"] = "WEEK";
+    CalendarView["DAY"] = "DAY";
+})(CalendarView || (CalendarView = {}));
+/**
+ * Builds locale-derived day name arrays from a BCP 47 locale string.
+ * Uses January 1 2024 (a Monday) as the reference date.
+ */
+function buildDayNames(locale) {
+    const base = new Date(2024, 0, 1); // 2024-01-01 is a Monday
+    const short = [];
+    const long = [];
+    for (let i = 0; i < 7; i++) {
+        const d = new Date(base);
+        d.setDate(base.getDate() + i);
+        short.push(d.toLocaleDateString(locale, { weekday: 'short' }));
+        long.push(d.toLocaleDateString(locale, { weekday: 'long' }));
+    }
+    return { short, long };
+}
+/** Default calendar configuration values. */
+const DEFAULT_CALENDAR_CONFIG = (() => {
+    const locale = 'en-US';
+    const names = buildDayNames(locale);
+    return {
+        startHour: 7,
+        endHour: 22,
+        locale,
+        todayLabel: 'Today',
+        upcomingEventsTitle: 'Upcoming events',
+        viewLabels: { MONTH: 'Month', WEEK: 'Week', DAY: 'Day' },
+        shortDayNames: names.short,
+        longDayNames: names.long,
+        mobileBreakpoint: 768,
+    };
+})();
+/**
+ * Injection token for the resolved calendar configuration.
+ *
+ * Prefer using {@link MN_CALENDAR_CONFIG} with `provideMnComponentConfig`
+ * so that settings can be managed via `mn-config.json5`. This token is
+ * kept for backward compatibility and manual `providers` usage.
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   { provide: CALENDAR_CONFIG, useValue: { startHour: 8, endHour: 20, locale: 'nl-NL' } }
+ * ]
+ * ```
+ */
+const CALENDAR_CONFIG = new InjectionToken('CalendarConfig', {
+    providedIn: 'root',
+    factory: () => DEFAULT_CALENDAR_CONFIG
+});
+/**
+ * Injection token resolved via `MnConfigService` (the `mn-config.json5` system).
+ *
+ * Use the helper {@link provideMnCalendarConfig} in the component's `providers`
+ * array so that calendar settings are read from the config file and support
+ * `$translate` markers, section scoping, and instance-id overrides.
+ *
+ * Component name in the config file: `'mn-calendar'`.
+ *
+ * @example
+ * ```json5
+ * // mn-config.json5
+ * {
+ *   defaults: {
+ *     "mn-calendar": {
+ *       startHour: 8,
+ *       endHour: 20,
+ *       locale: "nl-NL",
+ *       todayLabel: { $translate: "calendar.today" }
+ *     }
+ *   }
+ * }
+ * ```
+ */
+const MN_CALENDAR_CONFIG = new InjectionToken('MN_CALENDAR_CONFIG');
+/** Component name used to look up calendar settings in `mn-config.json5`. */
+const MN_CALENDAR_COMPONENT_NAME = 'mn-calendar';
+/**
+ * Provider helper that wires the calendar into the `mn-config` system.
+ *
+ * Add this to the `providers` array of the component (or module) that hosts
+ * `<app-calendar-view>`. It reads defaults and overrides from `mn-config.json5`
+ * under the key `"mn-calendar"` and provides them via {@link MN_CALENDAR_CONFIG}.
+ *
+ * @param initial — optional partial defaults merged before config-file values.
+ */
+function provideMnCalendarConfig(initial) {
+    return provideMnComponentConfig(MN_CALENDAR_CONFIG, MN_CALENDAR_COMPONENT_NAME, initial);
+}
+/**
+ * Merges a partial config with defaults, re-deriving day names from locale when needed.
+ */
+function resolveCalendarConfig(partial) {
+    if (!partial)
+        return { ...DEFAULT_CALENDAR_CONFIG };
+    const locale = partial.locale ?? DEFAULT_CALENDAR_CONFIG.locale;
+    const names = buildDayNames(locale);
+    return {
+        ...DEFAULT_CALENDAR_CONFIG,
+        ...partial,
+        locale,
+        shortDayNames: partial.shortDayNames ?? names.short,
+        longDayNames: partial.longDayNames ?? names.long,
+    };
+}
+
+/**
+ * Injection token for the calendar date formatter.
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   { provide: CALENDAR_DATE_FORMATTER, useClass: MyCustomFormatter }
+ * ]
+ * ```
+ */
+const CALENDAR_DATE_FORMATTER = new InjectionToken('CalendarDateFormatter');
+
+/**
+ * Default implementation of {@link CalendarDateFormatter} that uses the
+ * browser's `Intl.DateTimeFormat` API for locale-aware formatting.
+ *
+ * The locale is read from the injected {@link CALENDAR_CONFIG}. If no config
+ * is provided, `'en-US'` is used as the fallback.
+ *
+ * This service has no dependency on `@ngx-translate` or any other i18n library,
+ * so the calendar library works out of the box. Consumers can replace it with
+ * their own implementation via the `CALENDAR_DATE_FORMATTER` injection token.
+ */
+class DefaultCalendarDateFormatter {
+    locale;
+    constructor(config) {
+        this.locale = config?.locale ?? DEFAULT_CALENDAR_CONFIG.locale;
+    }
+    /** Formats an hour and minute pair into a locale time string (e.g. "09:00 AM"). */
+    formatTimeI(hour, minute) {
+        const date = new Date();
+        date.setHours(hour, minute, 0, 0);
+        return Promise.resolve(date.toLocaleTimeString(this.locale, { hour: '2-digit', minute: '2-digit' }));
+    }
+    /** Formats the time portion of a Date (e.g. "2:30 PM"). Returns empty string for undefined. */
+    formatTime(date) {
+        if (!date)
+            return Promise.resolve('');
+        return Promise.resolve(date.toLocaleTimeString(this.locale, { hour: '2-digit', minute: '2-digit' }));
+    }
+    /** Formats a Date as a full date-time string (e.g. "May 15, 2026, 02:30 PM"). */
+    formatDateTime(date) {
+        return of(date.toLocaleString(this.locale, {
+            year: 'numeric', month: 'short', day: 'numeric',
+            hour: '2-digit', minute: '2-digit'
+        }));
+    }
+    /** Formats a Date as a date-only string (e.g. "May 15, 2026"). */
+    formatDate(date) {
+        return of(date.toLocaleDateString(this.locale, {
+            year: 'numeric', month: 'short', day: 'numeric'
+        }));
+    }
+    /** Formats a Date as `YYYY-MM-DD` for use in `<input type="date">` controls. */
+    formatDateForFormControl(date) {
+        const y = date.getFullYear();
+        const m = String(date.getMonth() + 1).padStart(2, '0');
+        const d = String(date.getDate()).padStart(2, '0');
+        return `${y}-${m}-${d}`;
+    }
+    /** Returns `true` if both dates fall on the same calendar day. */
+    isSameDay(date1, date2) {
+        return date1.getFullYear() === date2.getFullYear()
+            && date1.getMonth() === date2.getMonth()
+            && date1.getDate() === date2.getDate();
+    }
+    /** Formats a Date as "Month Year" (e.g. "January 2026"). */
+    formatMonthName(date) {
+        return Promise.resolve(date.toLocaleString(this.locale, { month: 'long', year: 'numeric' }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DefaultCalendarDateFormatter, deps: [{ token: CALENDAR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DefaultCalendarDateFormatter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DefaultCalendarDateFormatter, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CALENDAR_CONFIG]
+                }] }] });
+
+/**
+ * Month grid view showing a 7×6 grid of day cells.
+ *
+ * Each cell displays the day number and up to 3 coloured dots representing
+ * events on that day. Clicking a cell emits `dayClicked`.
+ */
+class CalendarMonthComponent {
+    /** The date whose month is displayed. */
+    focusDay;
+    /** Observable that emits the full event list whenever it changes. */
+    eventsChanged;
+    /** Observable that emits when the focus day changes. */
+    focusDayChanged;
+    /** Resolved calendar configuration passed from the parent view. */
+    config;
+    /** Emits the date of a clicked day cell. */
+    dayClicked = new EventEmitter();
+    monthItems = [];
+    longDayNames;
+    events = [];
+    destroy$ = new Subject();
+    formatter;
+    constructor() {
+        this.formatter = new DefaultCalendarDateFormatter();
+        this.longDayNames = DEFAULT_CALENDAR_CONFIG.longDayNames;
+    }
+    ngOnInit() {
+        const resolved = this.config ? resolveCalendarConfig(this.config) : { ...DEFAULT_CALENDAR_CONFIG };
+        this.longDayNames = resolved.longDayNames;
+        this.buildMonth();
+        if (this.eventsChanged) {
+            this.eventsChanged.pipe(takeUntil(this.destroy$)).subscribe(events => {
+                this.events = events;
+                this.buildMonth();
+            });
+        }
+        if (this.focusDayChanged) {
+            this.focusDayChanged.pipe(takeUntil(this.destroy$)).subscribe(date => {
+                this.focusDay = date;
+                this.buildMonth();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /** Emits the clicked day's date. */
+    onDayClick(date) {
+        this.dayClicked.emit(date);
+    }
+    /** trackBy for day name headers. */
+    trackByDayName(index) {
+        return index;
+    }
+    /** trackBy for month grid cells. */
+    trackByMonthItem(_index, item) {
+        return item.date.getTime();
+    }
+    /** trackBy for event dots. */
+    trackByEventDot(_index, event) {
+        return event.id;
+    }
+    /** Builds the 42-cell month grid (6 rows × 7 columns). */
+    buildMonth() {
+        if (!this.focusDay)
+            return;
+        const year = this.focusDay.getFullYear();
+        const month = this.focusDay.getMonth();
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+        let startOffset = firstDay.getDay() - 1;
+        if (startOffset < 0)
+            startOffset = 6;
+        const today = new Date();
+        this.monthItems = [];
+        for (let i = startOffset - 1; i >= 0; i--) {
+            const date = new Date(year, month, -i);
+            this.monthItems.push(this.createMonthItem(date, false, today));
+        }
+        for (let d = 1; d <= lastDay.getDate(); d++) {
+            const date = new Date(year, month, d);
+            this.monthItems.push(this.createMonthItem(date, true, today));
+        }
+        const remaining = 42 - this.monthItems.length;
+        for (let i = 1; i <= remaining; i++) {
+            const date = new Date(year, month + 1, i);
+            this.monthItems.push(this.createMonthItem(date, false, today));
+        }
+    }
+    createMonthItem(date, isCurrentMonth, today) {
+        const isToday = this.formatter.isSameDay(date, today);
+        const dayEvents = this.events.filter(e => this.formatter.isSameDay(e.startTime, date) ||
+            this.formatter.isSameDay(e.endTime, date) ||
+            (e.startTime < date && e.endTime > date));
+        return {
+            date,
+            dayNumber: date.getDate(),
+            isCurrentMonth,
+            isToday,
+            events: dayEvents
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarMonthComponent, isStandalone: true, selector: "app-calendar-month", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config" }, outputs: { dayClicked: "dayClicked" }, ngImport: i0, template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    <div class=\"day-header\" *ngFor=\"let day of longDayNames; trackBy: trackByDayName\" role=\"columnheader\">{{ day }}</div>\n  </div>\n  <div class=\"month-grid\">\n    <div\n      class=\"month-cell\"\n      *ngFor=\"let item of monthItems; trackBy: trackByMonthItem\"\n      [class.other-month]=\"!item.isCurrentMonth\"\n      [class.today]=\"item.isToday\"\n      (click)=\"onDayClick(item.date)\"\n      role=\"gridcell\"\n      [attr.aria-label]=\"item.date.toDateString()\">\n      <span class=\"day-number\">{{ item.dayNumber }}</span>\n      <div class=\"month-events\">\n        <div\n          class=\"month-event-dot\"\n          *ngFor=\"let event of item.events.slice(0, 3); trackBy: trackByEventDot\"\n          [style.background-color]=\"event.color.primaryColor\"\n          [title]=\"event.title\">\n        </div>\n        <span class=\"more-events\" *ngIf=\"item.events.length > 3\">+{{ item.events.length - 3 }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid #e5e7eb}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid #f3f4f6;cursor:pointer;transition:background .15s}.month-cell:hover{background:#f9fafb}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:#3b82f6;color:#fff;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:#6b7280}\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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarMonthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calendar-month', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    <div class=\"day-header\" *ngFor=\"let day of longDayNames; trackBy: trackByDayName\" role=\"columnheader\">{{ day }}</div>\n  </div>\n  <div class=\"month-grid\">\n    <div\n      class=\"month-cell\"\n      *ngFor=\"let item of monthItems; trackBy: trackByMonthItem\"\n      [class.other-month]=\"!item.isCurrentMonth\"\n      [class.today]=\"item.isToday\"\n      (click)=\"onDayClick(item.date)\"\n      role=\"gridcell\"\n      [attr.aria-label]=\"item.date.toDateString()\">\n      <span class=\"day-number\">{{ item.dayNumber }}</span>\n      <div class=\"month-events\">\n        <div\n          class=\"month-event-dot\"\n          *ngFor=\"let event of item.events.slice(0, 3); trackBy: trackByEventDot\"\n          [style.background-color]=\"event.color.primaryColor\"\n          [title]=\"event.title\">\n        </div>\n        <span class=\"more-events\" *ngIf=\"item.events.length > 3\">+{{ item.events.length - 3 }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid #e5e7eb}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid #f3f4f6;cursor:pointer;transition:background .15s}.month-cell:hover{background:#f9fafb}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:#3b82f6;color:#fff;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:#6b7280}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { focusDay: [{
+                type: Input
+            }], eventsChanged: [{
+                type: Input
+            }], focusDayChanged: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], dayClicked: [{
+                type: Output
+            }] } });
+
+/**
+ * Service that computes the visual layout of calendar events within a
+ * time-grid (week or day view).
+ *
+ * Responsibilities:
+ * - Splitting multi-day events into per-day segments.
+ * - Assigning non-overlapping column indices to concurrent events.
+ * - Computing the width (column span) each event should occupy.
+ *
+ * This service is stateless — all state is passed via method parameters.
+ * Provide it per-component (not root) so each view gets its own instance.
+ */
+class CalendarEventLayoutService {
+    /**
+     * Returns `true` when two time ranges overlap (exclusive boundaries).
+     */
+    eventsOverlap(startA, endA, startB, endB) {
+        return startA < endB && startB < endA;
+    }
+    /**
+     * Returns all events whose time range overlaps the given `[start, end)` window.
+     */
+    getAllEventsOnSpecificTime(events, start, end) {
+        return events.filter(e => this.eventsOverlap(e.startTime, e.endTime, start, end));
+    }
+    /**
+     * Splits multi-day events into per-day segments that fit within the
+     * visible hour range (`startHour`–`endHour`) and date range.
+     *
+     * Single-day events are shallow-copied as-is. Multi-day events produce
+     * one segment per day with `continued` / `continuedEnd` flags set.
+     */
+    calculateMultiDayEvents(events, startHour, endHour, rangeStart, rangeEnd) {
+        const result = [];
+        for (const event of events) {
+            const eventStart = new Date(event.startTime);
+            const eventEnd = new Date(event.endTime);
+            if (eventStart.toDateString() === eventEnd.toDateString()) {
+                result.push({ ...event });
+                continue;
+            }
+            const current = new Date(eventStart);
+            let isFirst = true;
+            while (current < eventEnd && current < rangeEnd) {
+                if (current >= rangeStart) {
+                    const dayStart = new Date(current);
+                    const dayEnd = new Date(current);
+                    if (isFirst) {
+                        dayEnd.setHours(endHour, 0, 0, 0);
+                    }
+                    else {
+                        dayStart.setHours(startHour, 0, 0, 0);
+                        if (current.toDateString() === eventEnd.toDateString()) {
+                            dayEnd.setHours(eventEnd.getHours(), eventEnd.getMinutes(), 0, 0);
+                        }
+                        else {
+                            dayEnd.setHours(endHour, 0, 0, 0);
+                        }
+                    }
+                    result.push({
+                        ...event,
+                        startTime: isFirst ? eventStart : dayStart,
+                        endTime: current.toDateString() === eventEnd.toDateString() ? eventEnd : dayEnd,
+                        continued: !isFirst,
+                        continuedEnd: current.toDateString() !== eventEnd.toDateString()
+                    });
+                }
+                isFirst = false;
+                current.setDate(current.getDate() + 1);
+                current.setHours(0, 0, 0, 0);
+            }
+        }
+        return result;
+    }
+    /**
+     * Assigns a zero-based `column` index to each event so that overlapping
+     * events occupy different columns.
+     *
+     * Events are processed in start-time order (longest duration first for ties).
+     * Each event gets the earliest column not already occupied by an overlapping event.
+     */
+    assignColumnsToEvents(events) {
+        const sorted = [...events].sort((a, b) => {
+            const diff = a.startTime.getTime() - b.startTime.getTime();
+            if (diff !== 0)
+                return diff;
+            return (b.endTime.getTime() - b.startTime.getTime()) - (a.endTime.getTime() - a.startTime.getTime());
+        });
+        for (const event of sorted) {
+            event.column = this.findEarliestPossibleColumn(event, sorted);
+        }
+    }
+    /**
+     * Assigns a `width` (column span) to each event, expanding it to fill
+     * unused columns to its right within the overlapping group.
+     */
+    assignWidthsToEvents(events, scanStart, scanEnd) {
+        for (const event of events) {
+            const overlapping = this.getAllEventsOnSpecificTime(events, event.startTime, event.endTime);
+            const maxCol = Math.max(...overlapping.map(e => e.column ?? 0));
+            const biggestPossible = this.findBiggestPossibleWidth(event, events, scanStart, scanEnd);
+            event.width = Math.max(1, biggestPossible);
+            if ((event.column ?? 0) + event.width > maxCol + 1) {
+                event.width = maxCol + 1 - (event.column ?? 0);
+            }
+            if (event.width < 1)
+                event.width = 1;
+        }
+    }
+    /** Finds the lowest column index not occupied by any overlapping event. */
+    findEarliestPossibleColumn(event, allEvents) {
+        const overlapping = allEvents.filter(e => e !== event
+            && e.column !== undefined
+            && this.eventsOverlap(e.startTime, e.endTime, event.startTime, event.endTime));
+        let column = 0;
+        while (overlapping.some(e => e.column === column)) {
+            column++;
+        }
+        return column;
+    }
+    /** Computes the maximum width an event can span without overlapping a neighbour to its right. */
+    findBiggestPossibleWidth(event, allEvents, _scanStart, _scanEnd) {
+        const overlapping = this.getAllEventsOnSpecificTime(allEvents, event.startTime, event.endTime);
+        const maxCol = Math.max(...overlapping.map(e => e.column ?? 0));
+        const totalColumns = maxCol + 1;
+        const occupiedCols = overlapping
+            .filter(e => e !== event && (e.column ?? 0) > (event.column ?? 0))
+            .map(e => e.column ?? 0);
+        if (occupiedCols.length === 0) {
+            return totalColumns - (event.column ?? 0);
+        }
+        return Math.min(...occupiedCols) - (event.column ?? 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventLayoutService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventLayoutService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Static utility methods for calendar grid positioning.
+ */
+class CalendarUtility {
+    /**
+     * Converts a weekday (from `Date.getDay()`) to a 1-based Monday-first column index.
+     * Monday = 1, Tuesday = 2, …, Sunday = 7.
+     */
+    static getCorrectColumn(date) {
+        const day = date.getDay();
+        return day === 0 ? 7 : day;
+    }
+    /**
+     * Converts an hour + minute pair to a 1-based CSS grid row index
+     * within a half-hour grid starting at `startHour`.
+     *
+     * Each hour occupies two rows (one per 30-minute slot).
+     * Formula: `(hour - startHour) * 2 + (minute >= 30 ? 1 : 0) + 1`
+     *
+     * @returns Grid row number (minimum 1).
+     */
+    static getCorrectRow(hour, minute, startHour) {
+        const hourOffset = hour - startHour;
+        const row = hourOffset * 2 + (minute >= 30 ? 1 : 0) + 1;
+        return Math.max(1, row);
+    }
+}
+
+/**
+ * Default event renderer used when no custom component is provided.
+ *
+ * Displays the event title, formatted time range, and optional description
+ * with the event's colour scheme applied as background and left-border accent.
+ */
+class CalendarEventDefaultComponent {
+    /** The event to render. Set by {@link CalendarEventComponent} after creation. */
+    event;
+    formattedTime = '';
+    formatter;
+    constructor(formatter) {
+        this.formatter = formatter ?? new DefaultCalendarDateFormatter();
+    }
+    async ngOnInit() {
+        if (this.event) {
+            const start = await this.formatter.formatTime(this.event.startTime);
+            const end = await this.formatter.formatTime(this.event.endTime);
+            this.formattedTime = `${start} - ${end}`;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventDefaultComponent, deps: [{ token: CALENDAR_DATE_FORMATTER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarEventDefaultComponent, isStandalone: true, selector: "app-calendar-event-default", ngImport: i0, template: "<div class=\"calendar-event-default\" [style.background-color]=\"event.color.secondaryColor\" [style.border-left-color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedTime }}</div>\n  <div class=\"event-description\" *ngIf=\"event.description\">{{ event.description }}</div>\n</div>\n", styles: [".calendar-event-default{padding:4px 8px;border-left:3px solid #3b82f6;border-radius:4px;font-size:12px;height:100%;overflow:hidden;cursor:pointer}.event-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-time{font-size:11px;opacity:.8}.event-description{font-size:11px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventDefaultComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calendar-event-default', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-event-default\" [style.background-color]=\"event.color.secondaryColor\" [style.border-left-color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedTime }}</div>\n  <div class=\"event-description\" *ngIf=\"event.description\">{{ event.description }}</div>\n</div>\n", styles: [".calendar-event-default{padding:4px 8px;border-left:3px solid #3b82f6;border-radius:4px;font-size:12px;height:100%;overflow:hidden;cursor:pointer}.event-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-time{font-size:11px;opacity:.8}.event-description{font-size:11px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CALENDAR_DATE_FORMATTER]
+                }] }] });
+
+/**
+ * Dynamic event renderer that injects a custom or default event component
+ * into its view container.
+ *
+ * The component to render is resolved in this order:
+ * 1. `customComponent` input (set on the parent week/day view)
+ * 2. `event.component` (per-event override)
+ * 3. {@link CalendarEventDefaultComponent} (library default)
+ */
+class CalendarEventComponent {
+    /** The event data to render. */
+    event;
+    /** Optional custom component type that overrides the default renderer. */
+    customComponent;
+    /** Emits when the rendered event is clicked. */
+    eventClicked = new EventEmitter();
+    eventContainer;
+    rendered = false;
+    ngAfterViewInit() {
+        this.renderComponent();
+    }
+    ngOnChanges(changes) {
+        if (this.rendered && (changes['event'] || changes['customComponent'])) {
+            this.renderComponent();
+        }
+    }
+    /** Emits the event click. */
+    onEventClick() {
+        this.eventClicked.emit(this.event);
+    }
+    /** Creates the event component dynamically and sets its `event` property. */
+    renderComponent() {
+        if (!this.eventContainer)
+            return;
+        this.eventContainer.clear();
+        const component = this.customComponent ?? this.event?.component ?? CalendarEventDefaultComponent;
+        const ref = this.eventContainer.createComponent(component);
+        ref.instance.event = this.event;
+        ref.changeDetectorRef.detectChanges();
+        this.rendered = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarEventComponent, isStandalone: true, selector: "app-calendar-event", inputs: { event: "event", customComponent: "customComponent" }, outputs: { eventClicked: "eventClicked" }, viewQueries: [{ propertyName: "eventContainer", first: true, predicate: ["eventContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-event-wrapper\" (click)=\"onEventClick()\">\n  <ng-template #eventContainer></ng-template>\n</div>\n", styles: [".calendar-event-wrapper{height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calendar-event', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-event-wrapper\" (click)=\"onEventClick()\">\n  <ng-template #eventContainer></ng-template>\n</div>\n", styles: [".calendar-event-wrapper{height:100%;width:100%}\n"] }]
+        }], propDecorators: { event: [{
+                type: Input
+            }], customComponent: [{
+                type: Input
+            }], eventClicked: [{
+                type: Output
+            }], eventContainer: [{
+                type: ViewChild,
+                args: ['eventContainer', { read: ViewContainerRef, static: true }]
+            }] } });
+
+/**
+ * Week grid view showing 7 day columns with half-hour time slots.
+ *
+ * Overlapping events within the same day are laid out in sub-columns
+ * so they appear side-by-side rather than stacked.
+ */
+class CalendarWeekComponent {
+    layoutService;
+    /** The date around which the week is centred. */
+    focusDay;
+    /** Observable that emits the full event list whenever it changes. */
+    eventsChanged;
+    /** Observable that emits when the focus day changes. */
+    focusDayChanged;
+    /** Resolved calendar configuration passed from the parent view. */
+    config;
+    /** Optional custom event renderer component. */
+    calendarEventComponent;
+    /** Emits when a calendar event is clicked. */
+    eventClicked = new EventEmitter();
+    columns = [];
+    hourRows = [];
+    displayEvents = [];
+    totalRows = 0;
+    currentTimeRow = 0;
+    currentTimeCol = '';
+    gridTemplateColumns = 'repeat(7, 1fr)';
+    dayColumnMap = [];
+    events = [];
+    destroy$ = new Subject();
+    formatter;
+    resolvedConfig;
+    currentTimeInterval;
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+        this.formatter = new DefaultCalendarDateFormatter();
+    }
+    ngOnInit() {
+        this.resolvedConfig = this.config ? resolveCalendarConfig(this.config) : { ...DEFAULT_CALENDAR_CONFIG };
+        this.buildHourRows();
+        this.buildColumns();
+        this.updateCurrentTime();
+        this.currentTimeInterval = setInterval(() => this.updateCurrentTime(), 60000);
+        if (this.eventsChanged) {
+            this.eventsChanged.pipe(takeUntil(this.destroy$)).subscribe(events => {
+                this.events = events;
+                this.refreshEvents();
+            });
+        }
+        if (this.focusDayChanged) {
+            this.focusDayChanged.pipe(takeUntil(this.destroy$)).subscribe(date => {
+                this.focusDay = date;
+                this.buildColumns();
+                this.refreshEvents();
+                this.updateCurrentTime();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.currentTimeInterval)
+            clearInterval(this.currentTimeInterval);
+    }
+    /** Returns the CSS `grid-row` value for an event based on its start/end times. */
+    getEventRow(event) {
+        const startRow = CalendarUtility.getCorrectRow(event.startTime.getHours(), event.startTime.getMinutes(), this.resolvedConfig.startHour);
+        const endRow = CalendarUtility.getCorrectRow(event.endTime.getHours(), event.endTime.getMinutes(), this.resolvedConfig.startHour);
+        return `${startRow} / ${Math.max(endRow, startRow + 1)}`;
+    }
+    /** Returns the CSS `grid-column` span for a day header, accounting for sub-columns. */
+    getHeaderColumn(dayIndex) {
+        if (!this.dayColumnMap.length)
+            return `${dayIndex + 2} / span 1`;
+        const dayInfo = this.dayColumnMap[dayIndex];
+        return `${dayInfo.startCol + 1} / span ${dayInfo.subColumns}`;
+    }
+    /** Returns the CSS `grid-column` value for an event within its day's sub-columns. */
+    getEventColumn(event) {
+        const dayIdx = this.columns.findIndex(c => this.formatter.isSameDay(c.date, event.startTime));
+        if (dayIdx < 0)
+            return '1 / span 1';
+        const dayInfo = this.dayColumnMap[dayIdx];
+        const subCol = (event.column ?? 0) + dayInfo.startCol;
+        const width = event.width ?? 1;
+        return `${subCol} / span ${width}`;
+    }
+    /** Forwards event click to parent. */
+    onEventClick(event) {
+        this.eventClicked.emit(event);
+    }
+    /** trackBy for hour rows. */
+    trackByHour(_index, row) {
+        return row.hour;
+    }
+    /** trackBy for day columns. */
+    trackByColumn(_index, col) {
+        return col.date.getTime();
+    }
+    /** trackBy for events. */
+    trackByEvent(_index, event) {
+        return event.id;
+    }
+    async buildHourRows() {
+        this.hourRows = [];
+        const hours = this.resolvedConfig.endHour - this.resolvedConfig.startHour;
+        this.totalRows = hours * 2;
+        for (let i = 0; i < hours; i++) {
+            const hour = this.resolvedConfig.startHour + i;
+            const label = await this.formatter.formatTimeI(hour, 0);
+            this.hourRows.push({
+                hour,
+                topRow: i * 2 + 1,
+                bottomRow: i * 2 + 3,
+                hourLabel: label
+            });
+        }
+    }
+    /** Builds the 7 day columns for the current week (Monday–Sunday). */
+    buildColumns() {
+        if (!this.focusDay)
+            return;
+        const shortNames = this.resolvedConfig.shortDayNames;
+        const today = new Date();
+        const day = this.focusDay.getDay();
+        const mondayOffset = day === 0 ? -6 : 1 - day;
+        const monday = new Date(this.focusDay);
+        monday.setDate(this.focusDay.getDate() + mondayOffset);
+        this.columns = [];
+        for (let i = 0; i < 7; i++) {
+            const date = new Date(monday);
+            date.setDate(monday.getDate() + i);
+            this.columns.push({
+                date,
+                dayName: shortNames[i],
+                dayNumber: date.getDate(),
+                isToday: this.formatter.isSameDay(date, today)
+            });
+        }
+    }
+    /** Filters, splits, and lays out events for the current week. */
+    refreshEvents() {
+        if (!this.columns.length)
+            return;
+        const rangeStart = this.columns[0].date;
+        const rangeEnd = new Date(this.columns[6].date);
+        rangeEnd.setHours(23, 59, 59, 999);
+        const filtered = this.events.filter(e => this.layoutService.eventsOverlap(e.startTime, e.endTime, rangeStart, rangeEnd));
+        this.displayEvents = this.layoutService.calculateMultiDayEvents(filtered, this.resolvedConfig.startHour, this.resolvedConfig.endHour, rangeStart, rangeEnd);
+        // Assign columns per day so overlapping events within a day get sub-columns
+        for (let i = 0; i < 7; i++) {
+            const dayStart = new Date(this.columns[i].date);
+            dayStart.setHours(0, 0, 0, 0);
+            const dayEnd = new Date(this.columns[i].date);
+            dayEnd.setHours(23, 59, 59, 999);
+            const dayEvents = this.displayEvents.filter(e => this.formatter.isSameDay(e.startTime, this.columns[i].date));
+            this.layoutService.assignColumnsToEvents(dayEvents);
+            this.layoutService.assignWidthsToEvents(dayEvents, dayStart, dayEnd);
+        }
+        this.buildGridColumns();
+        this.updateCurrentTime();
+    }
+    /** Computes the CSS grid-template-columns string based on per-day sub-column counts. */
+    buildGridColumns() {
+        this.dayColumnMap = [];
+        let currentCol = 1;
+        for (let i = 0; i < 7; i++) {
+            const dayEvents = this.displayEvents.filter(e => this.formatter.isSameDay(e.startTime, this.columns[i].date));
+            let maxSubCols = 1;
+            for (const e of dayEvents) {
+                maxSubCols = Math.max(maxSubCols, (e.column ?? 0) + (e.width ?? 1));
+            }
+            this.dayColumnMap.push({ subColumns: maxSubCols, startCol: currentCol });
+            currentCol += maxSubCols;
+        }
+        const parts = [];
+        for (const day of this.dayColumnMap) {
+            for (let j = 0; j < day.subColumns; j++) {
+                parts.push(`${1 / day.subColumns}fr`);
+            }
+        }
+        this.gridTemplateColumns = parts.join(' ');
+    }
+    /** Updates the current-time red line position. */
+    updateCurrentTime() {
+        const now = new Date();
+        const dayIdx = this.columns.findIndex(c => this.formatter.isSameDay(c.date, now));
+        if (dayIdx >= 0 && this.dayColumnMap.length > 0) {
+            const dayInfo = this.dayColumnMap[dayIdx];
+            this.currentTimeCol = `${dayInfo.startCol} / span ${dayInfo.subColumns}`;
+            this.currentTimeRow = CalendarUtility.getCorrectRow(now.getHours(), now.getMinutes(), this.resolvedConfig.startHour);
+        }
+        else {
+            this.currentTimeCol = '';
+            this.currentTimeRow = 0;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarWeekComponent, deps: [{ token: CalendarEventLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarWeekComponent, isStandalone: true, selector: "app-calendar-week", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<div class=\"calendar-week\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"week-header\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\"\n      *ngFor=\"let col of columns; let i = index; trackBy: trackByColumn\"\n      [class.today]=\"col.isToday\"\n      [style.grid-column]=\"getHeaderColumn(i)\"\n      role=\"columnheader\">\n      <span class=\"day-name\">{{ col.dayName }}</span>\n      <span class=\"day-number\">{{ col.dayNumber }}</span>\n    </div>\n  </div>\n  <div class=\"week-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      <div class=\"hour-label\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n        {{ row.hourLabel }}\n      </div>\n    </div>\n    <div class=\"week-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      <div class=\"hour-line\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n        [style.grid-column]=\"'1 / -1'\">\n      </div>\n      <div class=\"current-time-line\" *ngIf=\"currentTimeRow > 0 && currentTimeCol\"\n        [style.grid-row]=\"currentTimeRow\"\n        [style.grid-column]=\"currentTimeCol\">\n        <div class=\"current-time-dot\"></div>\n        <div class=\"current-time-rule\"></div>\n      </div>\n      <div class=\"week-event\"\n        *ngFor=\"let event of displayEvents; trackBy: trackByEvent\"\n        [style.grid-row]=\"getEventRow(event)\"\n        [style.grid-column]=\"getEventColumn(event)\"\n        (click)=\"onEventClick(event)\">\n        <app-calendar-event [event]=\"event\" [customComponent]=\"calendarEventComponent\"></app-calendar-event>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-week{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.week-header{display:grid;border-bottom:1px solid #e5e7eb}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:#3b82f6;font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:#6b7280}.day-number{font-size:18px;font-weight:600}.week-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:#6b7280;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.week-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid #f3f4f6;pointer-events:none;min-height:0}.week-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:#ef4444;width:100%}\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: "component", type: CalendarEventComponent, selector: "app-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarWeekComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calendar-week', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<div class=\"calendar-week\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"week-header\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\"\n      *ngFor=\"let col of columns; let i = index; trackBy: trackByColumn\"\n      [class.today]=\"col.isToday\"\n      [style.grid-column]=\"getHeaderColumn(i)\"\n      role=\"columnheader\">\n      <span class=\"day-name\">{{ col.dayName }}</span>\n      <span class=\"day-number\">{{ col.dayNumber }}</span>\n    </div>\n  </div>\n  <div class=\"week-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      <div class=\"hour-label\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n        {{ row.hourLabel }}\n      </div>\n    </div>\n    <div class=\"week-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      <div class=\"hour-line\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n        [style.grid-column]=\"'1 / -1'\">\n      </div>\n      <div class=\"current-time-line\" *ngIf=\"currentTimeRow > 0 && currentTimeCol\"\n        [style.grid-row]=\"currentTimeRow\"\n        [style.grid-column]=\"currentTimeCol\">\n        <div class=\"current-time-dot\"></div>\n        <div class=\"current-time-rule\"></div>\n      </div>\n      <div class=\"week-event\"\n        *ngFor=\"let event of displayEvents; trackBy: trackByEvent\"\n        [style.grid-row]=\"getEventRow(event)\"\n        [style.grid-column]=\"getEventColumn(event)\"\n        (click)=\"onEventClick(event)\">\n        <app-calendar-event [event]=\"event\" [customComponent]=\"calendarEventComponent\"></app-calendar-event>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-week{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.week-header{display:grid;border-bottom:1px solid #e5e7eb}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:#3b82f6;font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:#6b7280}.day-number{font-size:18px;font-weight:600}.week-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:#6b7280;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.week-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid #f3f4f6;pointer-events:none;min-height:0}.week-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:#ef4444;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: CalendarEventLayoutService }], propDecorators: { focusDay: [{
+                type: Input
+            }], eventsChanged: [{
+                type: Input
+            }], focusDayChanged: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], calendarEventComponent: [{
+                type: Input
+            }], eventClicked: [{
+                type: Output
+            }] } });
+
+/**
+ * Day grid view showing a single day with half-hour time slots.
+ *
+ * Shares the same layout algorithm as the week view via
+ * {@link CalendarEventLayoutService}.
+ */
+class CalendarDayComponent {
+    layoutService;
+    /** The date to display. */
+    focusDay;
+    /** Observable that emits the full event list whenever it changes. */
+    eventsChanged;
+    /** Observable that emits when the focus day changes. */
+    focusDayChanged;
+    /** Resolved calendar configuration passed from the parent view. */
+    config;
+    /** Optional custom event renderer component. */
+    calendarEventComponent;
+    /** Emits when a calendar event is clicked. */
+    eventClicked = new EventEmitter();
+    hourRows = [];
+    displayEvents = [];
+    totalRows = 0;
+    totalColumns = 1;
+    currentTimeRow = 0;
+    isToday = false;
+    dayName = '';
+    events = [];
+    destroy$ = new Subject();
+    formatter;
+    resolvedConfig;
+    currentTimeInterval;
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+        this.formatter = new DefaultCalendarDateFormatter();
+    }
+    ngOnInit() {
+        this.resolvedConfig = this.config ? resolveCalendarConfig(this.config) : { ...DEFAULT_CALENDAR_CONFIG };
+        this.buildHourRows();
+        this.updateDayInfo();
+        this.updateCurrentTime();
+        this.currentTimeInterval = setInterval(() => this.updateCurrentTime(), 60000);
+        if (this.eventsChanged) {
+            this.eventsChanged.pipe(takeUntil(this.destroy$)).subscribe(events => {
+                this.events = events;
+                this.refreshEvents();
+            });
+        }
+        if (this.focusDayChanged) {
+            this.focusDayChanged.pipe(takeUntil(this.destroy$)).subscribe(date => {
+                this.focusDay = date;
+                this.updateDayInfo();
+                this.refreshEvents();
+                this.updateCurrentTime();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.currentTimeInterval)
+            clearInterval(this.currentTimeInterval);
+    }
+    /** Returns the CSS `grid-row` value for an event. */
+    getEventRow(event) {
+        const startRow = CalendarUtility.getCorrectRow(event.startTime.getHours(), event.startTime.getMinutes(), this.resolvedConfig.startHour);
+        const endRow = CalendarUtility.getCorrectRow(event.endTime.getHours(), event.endTime.getMinutes(), this.resolvedConfig.startHour);
+        return `${startRow} / ${Math.max(endRow, startRow + 1)}`;
+    }
+    /** Returns the CSS `grid-column` value for an event within its sub-columns. */
+    getEventColumn(event) {
+        const col = (event.column ?? 0) + 1;
+        const width = event.width ?? 1;
+        return `${col} / span ${width}`;
+    }
+    /** Forwards event click to parent. */
+    onEventClick(event) {
+        this.eventClicked.emit(event);
+    }
+    /** trackBy for hour rows. */
+    trackByHour(_index, row) {
+        return row.hour;
+    }
+    /** trackBy for events. */
+    trackByEvent(_index, event) {
+        return event.id;
+    }
+    async buildHourRows() {
+        this.hourRows = [];
+        const hours = this.resolvedConfig.endHour - this.resolvedConfig.startHour;
+        this.totalRows = hours * 2;
+        for (let i = 0; i < hours; i++) {
+            const hour = this.resolvedConfig.startHour + i;
+            const label = await this.formatter.formatTimeI(hour, 0);
+            this.hourRows.push({
+                hour,
+                topRow: i * 2 + 1,
+                bottomRow: i * 2 + 3,
+                hourLabel: label
+            });
+        }
+    }
+    /** Updates the day name and isToday flag. */
+    updateDayInfo() {
+        if (!this.focusDay)
+            return;
+        const today = new Date();
+        this.isToday = this.formatter.isSameDay(this.focusDay, today);
+        const longNames = this.resolvedConfig.longDayNames;
+        const dayIdx = this.focusDay.getDay();
+        const mondayIdx = dayIdx === 0 ? 6 : dayIdx - 1;
+        this.dayName = longNames[mondayIdx];
+    }
+    /** Filters, splits, and lays out events for the focus day. */
+    refreshEvents() {
+        if (!this.focusDay)
+            return;
+        const rangeStart = new Date(this.focusDay);
+        rangeStart.setHours(0, 0, 0, 0);
+        const rangeEnd = new Date(this.focusDay);
+        rangeEnd.setHours(23, 59, 59, 999);
+        const filtered = this.events.filter(e => this.layoutService.eventsOverlap(e.startTime, e.endTime, rangeStart, rangeEnd));
+        this.displayEvents = this.layoutService.calculateMultiDayEvents(filtered, this.resolvedConfig.startHour, this.resolvedConfig.endHour, rangeStart, rangeEnd);
+        this.layoutService.assignColumnsToEvents(this.displayEvents);
+        this.layoutService.assignWidthsToEvents(this.displayEvents, rangeStart, rangeEnd);
+        const maxCol = this.displayEvents.reduce((max, e) => Math.max(max, (e.column ?? 0) + (e.width ?? 1)), 1);
+        this.totalColumns = maxCol;
+    }
+    /** Updates the current-time red line position. */
+    updateCurrentTime() {
+        const now = new Date();
+        if (this.focusDay && this.formatter.isSameDay(this.focusDay, now)) {
+            this.currentTimeRow = CalendarUtility.getCorrectRow(now.getHours(), now.getMinutes(), this.resolvedConfig.startHour);
+            this.isToday = true;
+        }
+        else {
+            this.currentTimeRow = 0;
+            this.isToday = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarDayComponent, deps: [{ token: CalendarEventLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarDayComponent, isStandalone: true, selector: "app-calendar-day", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<div class=\"calendar-day\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"day-header\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\" [class.today]=\"isToday\" role=\"columnheader\">\n      <span class=\"day-name\">{{ dayName }}</span>\n      <span class=\"day-number\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"day-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      <div class=\"hour-label\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n        {{ row.hourLabel }}\n      </div>\n    </div>\n    <div class=\"day-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      <div class=\"hour-line\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n        [style.grid-column]=\"'1 / -1'\">\n      </div>\n      <div class=\"current-time-line\" *ngIf=\"currentTimeRow > 0 && isToday\"\n        [style.grid-row]=\"currentTimeRow\"\n        [style.grid-column]=\"'1 / -1'\">\n        <div class=\"current-time-dot\"></div>\n        <div class=\"current-time-rule\"></div>\n      </div>\n      <div class=\"day-event\"\n        *ngFor=\"let event of displayEvents; trackBy: trackByEvent\"\n        [style.grid-row]=\"getEventRow(event)\"\n        [style.grid-column]=\"getEventColumn(event)\"\n        (click)=\"onEventClick(event)\">\n        <app-calendar-event [event]=\"event\" [customComponent]=\"calendarEventComponent\"></app-calendar-event>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-day{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.day-header{display:grid;grid-template-columns:60px 1fr;border-bottom:1px solid #e5e7eb}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:#3b82f6;font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:#6b7280}.day-number{font-size:18px;font-weight:600}.day-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:#6b7280;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.day-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid #f3f4f6;pointer-events:none;min-height:0}.day-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:#ef4444;width:100%}\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: "component", type: CalendarEventComponent, selector: "app-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarDayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calendar-day', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<div class=\"calendar-day\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"day-header\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\" [class.today]=\"isToday\" role=\"columnheader\">\n      <span class=\"day-name\">{{ dayName }}</span>\n      <span class=\"day-number\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"day-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      <div class=\"hour-label\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n        {{ row.hourLabel }}\n      </div>\n    </div>\n    <div class=\"day-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      <div class=\"hour-line\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n        [style.grid-column]=\"'1 / -1'\">\n      </div>\n      <div class=\"current-time-line\" *ngIf=\"currentTimeRow > 0 && isToday\"\n        [style.grid-row]=\"currentTimeRow\"\n        [style.grid-column]=\"'1 / -1'\">\n        <div class=\"current-time-dot\"></div>\n        <div class=\"current-time-rule\"></div>\n      </div>\n      <div class=\"day-event\"\n        *ngFor=\"let event of displayEvents; trackBy: trackByEvent\"\n        [style.grid-row]=\"getEventRow(event)\"\n        [style.grid-column]=\"getEventColumn(event)\"\n        (click)=\"onEventClick(event)\">\n        <app-calendar-event [event]=\"event\" [customComponent]=\"calendarEventComponent\"></app-calendar-event>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-day{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.day-header{display:grid;grid-template-columns:60px 1fr;border-bottom:1px solid #e5e7eb}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:#3b82f6;font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:#6b7280}.day-number{font-size:18px;font-weight:600}.day-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:#6b7280;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.day-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid #f3f4f6;pointer-events:none;min-height:0}.day-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:#ef4444;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: CalendarEventLayoutService }], propDecorators: { focusDay: [{
+                type: Input
+            }], eventsChanged: [{
+                type: Input
+            }], focusDayChanged: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], calendarEventComponent: [{
+                type: Input
+            }], eventClicked: [{
+                type: Output
+            }] } });
+
+/**
+ * Renders a single row in the upcoming-events sidebar.
+ * Shows the event title, formatted date/time, and optional description.
+ */
+class UpcomingEventRowComponent {
+    /** The event to display. */
+    event;
+    /** Emits the event when this row is clicked. */
+    eventClicked = new EventEmitter();
+    formattedDate = '';
+    formatter;
+    constructor(formatter) {
+        this.formatter = formatter ?? new DefaultCalendarDateFormatter();
+    }
+    async ngOnInit() {
+        if (this.event) {
+            const start = await this.formatter.formatTime(this.event.startTime);
+            const end = await this.formatter.formatTime(this.event.endTime);
+            this.formattedDate = `${start} - ${end}`;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventRowComponent, deps: [{ token: CALENDAR_DATE_FORMATTER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: UpcomingEventRowComponent, isStandalone: true, selector: "app-upcoming-event-row", inputs: { event: "event" }, outputs: { eventClicked: "eventClicked" }, ngImport: i0, template: "<div class=\"upcoming-event-row\" (click)=\"eventClicked.emit(event)\" [style.border-left-color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedDate }}</div>\n  <div class=\"event-description\" *ngIf=\"event.description\">{{ event.description }}</div>\n</div>\n", styles: [".upcoming-event-row{padding:8px 12px;border-left:3px solid #3b82f6;margin-bottom:8px;cursor:pointer;border-radius:4px;transition:background .15s}.upcoming-event-row:hover{background:#f9fafb}.event-title{font-weight:600;font-size:13px}.event-time{font-size:12px;color:#6b7280}.event-description{font-size:12px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-upcoming-event-row', standalone: true, imports: [CommonModule], template: "<div class=\"upcoming-event-row\" (click)=\"eventClicked.emit(event)\" [style.border-left-color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedDate }}</div>\n  <div class=\"event-description\" *ngIf=\"event.description\">{{ event.description }}</div>\n</div>\n", styles: [".upcoming-event-row{padding:8px 12px;border-left:3px solid #3b82f6;margin-bottom:8px;cursor:pointer;border-radius:4px;transition:background .15s}.upcoming-event-row:hover{background:#f9fafb}.event-title{font-weight:600;font-size:13px}.event-time{font-size:12px;color:#6b7280}.event-description{font-size:12px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CALENDAR_DATE_FORMATTER]
+                }] }], propDecorators: { event: [{
+                type: Input
+            }], eventClicked: [{
+                type: Output
+            }] } });
+
+/**
+ * Sidebar component that lists the next 10 upcoming events
+ * (events whose end time is in the future), sorted by start time.
+ */
+class UpcomingEventsComponent {
+    /** Observable that emits the full event list whenever it changes. */
+    eventsChanged;
+    /** Resolved calendar configuration passed from the parent view. */
+    config;
+    /** Emits when an upcoming event row is clicked. */
+    eventClicked = new EventEmitter();
+    upcomingEvents = [];
+    title;
+    destroy$ = new Subject();
+    constructor() {
+        this.title = DEFAULT_CALENDAR_CONFIG.upcomingEventsTitle;
+    }
+    ngOnInit() {
+        const resolved = this.config ? resolveCalendarConfig(this.config) : { ...DEFAULT_CALENDAR_CONFIG };
+        this.title = resolved.upcomingEventsTitle;
+        if (this.eventsChanged) {
+            this.eventsChanged.pipe(takeUntil(this.destroy$)).subscribe(events => {
+                const now = new Date();
+                this.upcomingEvents = events
+                    .filter(e => e.endTime > now)
+                    .sort((a, b) => a.startTime.getTime() - b.startTime.getTime())
+                    .slice(0, 10);
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /** trackBy for upcoming event rows. */
+    trackByEvent(_index, event) {
+        return event.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: UpcomingEventsComponent, isStandalone: true, selector: "app-upcoming-events", inputs: { eventsChanged: "eventsChanged", config: "config" }, outputs: { eventClicked: "eventClicked" }, ngImport: i0, template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  <app-upcoming-event-row\n    *ngFor=\"let event of upcomingEvents; trackBy: trackByEvent\"\n    [event]=\"event\"\n    (eventClicked)=\"eventClicked.emit($event)\">\n  </app-upcoming-event-row>\n  <div class=\"no-events\" *ngIf=\"upcomingEvents.length === 0\">No upcoming events</div>\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:#9ca3af;font-size:14px}\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: "component", type: UpcomingEventRowComponent, selector: "app-upcoming-event-row", inputs: ["event"], outputs: ["eventClicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-upcoming-events', standalone: true, imports: [CommonModule, UpcomingEventRowComponent], template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  <app-upcoming-event-row\n    *ngFor=\"let event of upcomingEvents; trackBy: trackByEvent\"\n    [event]=\"event\"\n    (eventClicked)=\"eventClicked.emit($event)\">\n  </app-upcoming-event-row>\n  <div class=\"no-events\" *ngIf=\"upcomingEvents.length === 0\">No upcoming events</div>\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:#9ca3af;font-size:14px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { eventsChanged: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], eventClicked: [{
+                type: Output
+            }] } });
+
+/**
+ * Main calendar orchestrator component.
+ *
+ * Provides a toolbar with view switching (month / week / day), date navigation,
+ * and an optional action button. The active view and an upcoming-events sidebar
+ * are rendered inside a responsive grid layout.
+ *
+ * All configuration (visible hours, locale, labels, mobile breakpoint) is read
+ * from the `mn-config.json5` system via {@link MN_CALENDAR_CONFIG}, falling back
+ * to the legacy {@link CALENDAR_CONFIG} injection token, then to built-in defaults.
+ * Date formatting is delegated to the {@link CALENDAR_DATE_FORMATTER} token.
+ *
+ * @example
+ * ```html
+ * <app-calendar-view
+ *   [showButton]="true"
+ *   [buttonTitle]="'New Event'"
+ *   [NewCalendarItemsEvent]="eventsEmitter"
+ *   (RequestNewCalendarItemsEvent)="loadEvents($event)"
+ *   (CalendarItemClickedEvent)="onEventClick($event)"
+ *   (ButtonClickedEvent)="openModal()">
+ * </app-calendar-view>
+ * ```
+ */
+class CalendarViewComponent {
+    /** Whether to show the action button in the toolbar. */
+    showButton = false;
+    /** Label text for the action button. */
+    buttonTitle = '';
+    /** Custom event renderer component type. */
+    CalendarEventComponent;
+    /** Observable or EventEmitter that pushes new event arrays into the calendar. */
+    NewCalendarItemsEvent;
+    /** Emits when the calendar needs fresh event data (e.g. after navigation). */
+    RequestNewCalendarItemsEvent = new EventEmitter();
+    /** Emits when a calendar event is clicked. */
+    CalendarItemClickedEvent = new EventEmitter();
+    /** Emits when the action button is clicked. */
+    ButtonClickedEvent = new EventEmitter();
+    CalendarView = CalendarView;
+    currentView = CalendarView.WEEK;
+    focusDay = new Date();
+    dateInputValue = '';
+    viewOptions = [];
+    isMobileView = false;
+    /** BehaviorSubject so late-subscribing child views receive the last emitted events. */
+    internalEventsChanged = new BehaviorSubject([]);
+    /** Subject for broadcasting focus-day changes to child views. */
+    internalFocusDayChanged = new Subject();
+    destroy$ = new Subject();
+    formatter;
+    config;
+    destroyRef = inject(DestroyRef);
+    lang = inject(MnLanguageService);
+    constructor(formatter, mnConfig, legacyConfig) {
+        this.formatter = formatter ?? new DefaultCalendarDateFormatter();
+        // Priority: mn-config system > legacy CALENDAR_CONFIG > built-in defaults
+        const raw = mnConfig ?? legacyConfig ?? undefined;
+        this.config = resolveCalendarConfig(raw);
+    }
+    onResize() {
+        this.checkMobileView();
+    }
+    ngOnInit() {
+        this.rebuildFromConfig();
+        // Re-resolve config when locale changes (supports $translate in mn-config).
+        const sub = this.lang.locale$.pipe(skip(1)).subscribe(() => {
+            this.rebuildFromConfig();
+        });
+        this.destroyRef.onDestroy(() => sub.unsubscribe());
+        this.checkMobileView();
+        this.updateDateInput();
+        this.RequestNewCalendarItemsEvent.emit(this.focusDay);
+        if (this.NewCalendarItemsEvent) {
+            this.NewCalendarItemsEvent.pipe(takeUntil(this.destroy$)).subscribe(events => {
+                this.internalEventsChanged.next(events);
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /** Switches the active view. On mobile, forces day view. */
+    switchView(view) {
+        if (this.isMobileView) {
+            this.currentView = CalendarView.DAY;
+            return;
+        }
+        this.currentView = view;
+    }
+    /** Navigates to the previous period (month / week / day). */
+    navigatePrevious() {
+        const d = new Date(this.focusDay);
+        switch (this.currentView) {
+            case CalendarView.MONTH:
+                d.setMonth(d.getMonth() - 1);
+                break;
+            case CalendarView.WEEK:
+                d.setDate(d.getDate() - 7);
+                break;
+            case CalendarView.DAY:
+                d.setDate(d.getDate() - 1);
+                break;
+        }
+        this.setFocusDay(d);
+    }
+    /** Navigates to the next period (month / week / day). */
+    navigateNext() {
+        const d = new Date(this.focusDay);
+        switch (this.currentView) {
+            case CalendarView.MONTH:
+                d.setMonth(d.getMonth() + 1);
+                break;
+            case CalendarView.WEEK:
+                d.setDate(d.getDate() + 7);
+                break;
+            case CalendarView.DAY:
+                d.setDate(d.getDate() + 1);
+                break;
+        }
+        this.setFocusDay(d);
+    }
+    /** Navigates to today. */
+    goToToday() {
+        this.setFocusDay(new Date());
+    }
+    /** Handles the date-picker input change. */
+    onDateInputChange(event) {
+        const value = event.target.value;
+        if (value) {
+            this.setFocusDay(new Date(value));
+        }
+    }
+    /** Handles a day click from the month view — switches to day view. */
+    onMonthDayClick(date) {
+        this.currentView = CalendarView.DAY;
+        this.setFocusDay(date);
+    }
+    /** Forwards a child event click to the parent output. */
+    onEventClick(event) {
+        this.CalendarItemClickedEvent.emit(event);
+    }
+    /** trackBy for view option buttons. */
+    trackByView(_index, item) {
+        return item.value;
+    }
+    /** Rebuilds view options and labels from the current config. */
+    rebuildFromConfig() {
+        this.viewOptions = [
+            { value: CalendarView.MONTH, label: this.config.viewLabels['MONTH'] ?? 'Month' },
+            { value: CalendarView.WEEK, label: this.config.viewLabels['WEEK'] ?? 'Week' },
+            { value: CalendarView.DAY, label: this.config.viewLabels['DAY'] ?? 'Day' }
+        ];
+    }
+    checkMobileView() {
+        const wasMobile = this.isMobileView;
+        this.isMobileView = window.innerWidth < this.config.mobileBreakpoint;
+        if (this.isMobileView && !wasMobile) {
+            this.currentView = CalendarView.DAY;
+        }
+    }
+    setFocusDay(date) {
+        this.focusDay = date;
+        this.updateDateInput();
+        this.internalFocusDayChanged.next(date);
+        this.RequestNewCalendarItemsEvent.emit(date);
+    }
+    updateDateInput() {
+        this.dateInputValue = this.formatter.formatDateForFormControl(this.focusDay);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, deps: [{ token: CALENDAR_DATE_FORMATTER, optional: true }, { token: MN_CALENDAR_CONFIG, optional: true }, { token: CALENDAR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarViewComponent, isStandalone: true, selector: "app-calendar-view", inputs: { showButton: "showButton", buttonTitle: "buttonTitle", CalendarEventComponent: "CalendarEventComponent", NewCalendarItemsEvent: "NewCalendarItemsEvent" }, outputs: { RequestNewCalendarItemsEvent: "RequestNewCalendarItemsEvent", CalendarItemClickedEvent: "CalendarItemClickedEvent", ButtonClickedEvent: "ButtonClickedEvent" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
+            provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
+        ], ngImport: i0, template: "<div class=\"calendar-view\" role=\"application\" aria-label=\"Calendar\">\n  <div class=\"calendar-toolbar\">\n    <div class=\"toolbar-left\">\n      <div class=\"view-switcher\" role=\"tablist\" aria-label=\"Calendar view\">\n        <button\n          *ngFor=\"let view of viewOptions; trackBy: trackByView\"\n          class=\"view-btn\"\n          role=\"tab\"\n          [attr.aria-selected]=\"currentView === view.value\"\n          [class.active]=\"currentView === view.value\"\n          (click)=\"switchView(view.value)\">\n          {{ view.label }}\n        </button>\n      </div>\n      <div class=\"date-nav\">\n        <button class=\"nav-btn\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <input type=\"date\" [value]=\"dateInputValue\" (change)=\"onDateInputChange($event)\" class=\"date-input\" aria-label=\"Select date\" />\n        <button class=\"nav-btn\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        <button class=\"today-btn\" (click)=\"goToToday()\">{{ config.todayLabel }}</button>\n      </div>\n    </div>\n    <div class=\"toolbar-right\">\n      <button *ngIf=\"showButton\" class=\"action-btn\" (click)=\"ButtonClickedEvent.emit()\">\n        {{ buttonTitle }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"calendar-content\">\n    <div class=\"calendar-main\">\n      <app-calendar-month\n        *ngIf=\"currentView === CalendarView.MONTH\"\n        [focusDay]=\"focusDay\"\n        [eventsChanged]=\"internalEventsChanged\"\n        [focusDayChanged]=\"internalFocusDayChanged\"\n        [config]=\"config\"\n        (dayClicked)=\"onMonthDayClick($event)\">\n      </app-calendar-month>\n\n      <app-calendar-week\n        *ngIf=\"currentView === CalendarView.WEEK\"\n        [focusDay]=\"focusDay\"\n        [eventsChanged]=\"internalEventsChanged\"\n        [focusDayChanged]=\"internalFocusDayChanged\"\n        [config]=\"config\"\n        [calendarEventComponent]=\"CalendarEventComponent\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-calendar-week>\n\n      <app-calendar-day\n        *ngIf=\"currentView === CalendarView.DAY\"\n        [focusDay]=\"focusDay\"\n        [eventsChanged]=\"internalEventsChanged\"\n        [focusDayChanged]=\"internalFocusDayChanged\"\n        [config]=\"config\"\n        [calendarEventComponent]=\"CalendarEventComponent\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-calendar-day>\n    </div>\n\n    <div class=\"calendar-sidebar\">\n      <app-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-upcoming-events>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.calendar-view{width:100%;height:100%;font-family:inherit;display:flex;flex-direction:column}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:12px;flex-wrap:wrap}.toolbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.view-switcher{display:flex;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden}.view-btn{padding:6px 14px;border:none;background:#fff;cursor:pointer;font-size:13px;transition:background .15s}.view-btn:hover{background:#f3f4f6}.view-btn.active{background:#3b82f6;color:#fff}.date-nav{display:flex;align-items:center;gap:4px}.nav-btn{width:32px;height:32px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.nav-btn:hover{background:#f3f4f6}.date-input{padding:4px 8px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px}.today-btn{padding:6px 12px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-size:13px}.today-btn:hover{background:#f3f4f6}.action-btn{padding:8px 16px;border:none;border-radius:6px;background:#3b82f6;color:#fff;cursor:pointer;font-size:13px}.action-btn:hover{background:#2563eb}.calendar-content{display:grid;grid-template-columns:1fr 220px;gap:12px;flex:1;min-height:0}.calendar-main{min-width:0;min-height:0;overflow:hidden}.calendar-sidebar{border-left:1px solid #e5e7eb;overflow:auto}@media(max-width:767px){.calendar-toolbar{padding:8px 0}.toolbar-left{flex-direction:column;align-items:flex-start;gap:8px}.view-switcher{display:none}.calendar-content{grid-template-columns:1fr}.calendar-sidebar{display:none}.calendar-main{overflow-y:auto}}\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: "component", type: CalendarMonthComponent, selector: "app-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "app-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "app-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "app-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calendar-view', standalone: true, imports: [
+                        CommonModule,
+                        CalendarMonthComponent,
+                        CalendarWeekComponent,
+                        CalendarDayComponent,
+                        UpcomingEventsComponent
+                    ], providers: [
+                        provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
+                    ], template: "<div class=\"calendar-view\" role=\"application\" aria-label=\"Calendar\">\n  <div class=\"calendar-toolbar\">\n    <div class=\"toolbar-left\">\n      <div class=\"view-switcher\" role=\"tablist\" aria-label=\"Calendar view\">\n        <button\n          *ngFor=\"let view of viewOptions; trackBy: trackByView\"\n          class=\"view-btn\"\n          role=\"tab\"\n          [attr.aria-selected]=\"currentView === view.value\"\n          [class.active]=\"currentView === view.value\"\n          (click)=\"switchView(view.value)\">\n          {{ view.label }}\n        </button>\n      </div>\n      <div class=\"date-nav\">\n        <button class=\"nav-btn\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <input type=\"date\" [value]=\"dateInputValue\" (change)=\"onDateInputChange($event)\" class=\"date-input\" aria-label=\"Select date\" />\n        <button class=\"nav-btn\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        <button class=\"today-btn\" (click)=\"goToToday()\">{{ config.todayLabel }}</button>\n      </div>\n    </div>\n    <div class=\"toolbar-right\">\n      <button *ngIf=\"showButton\" class=\"action-btn\" (click)=\"ButtonClickedEvent.emit()\">\n        {{ buttonTitle }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"calendar-content\">\n    <div class=\"calendar-main\">\n      <app-calendar-month\n        *ngIf=\"currentView === CalendarView.MONTH\"\n        [focusDay]=\"focusDay\"\n        [eventsChanged]=\"internalEventsChanged\"\n        [focusDayChanged]=\"internalFocusDayChanged\"\n        [config]=\"config\"\n        (dayClicked)=\"onMonthDayClick($event)\">\n      </app-calendar-month>\n\n      <app-calendar-week\n        *ngIf=\"currentView === CalendarView.WEEK\"\n        [focusDay]=\"focusDay\"\n        [eventsChanged]=\"internalEventsChanged\"\n        [focusDayChanged]=\"internalFocusDayChanged\"\n        [config]=\"config\"\n        [calendarEventComponent]=\"CalendarEventComponent\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-calendar-week>\n\n      <app-calendar-day\n        *ngIf=\"currentView === CalendarView.DAY\"\n        [focusDay]=\"focusDay\"\n        [eventsChanged]=\"internalEventsChanged\"\n        [focusDayChanged]=\"internalFocusDayChanged\"\n        [config]=\"config\"\n        [calendarEventComponent]=\"CalendarEventComponent\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-calendar-day>\n    </div>\n\n    <div class=\"calendar-sidebar\">\n      <app-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-upcoming-events>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.calendar-view{width:100%;height:100%;font-family:inherit;display:flex;flex-direction:column}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:12px;flex-wrap:wrap}.toolbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.view-switcher{display:flex;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden}.view-btn{padding:6px 14px;border:none;background:#fff;cursor:pointer;font-size:13px;transition:background .15s}.view-btn:hover{background:#f3f4f6}.view-btn.active{background:#3b82f6;color:#fff}.date-nav{display:flex;align-items:center;gap:4px}.nav-btn{width:32px;height:32px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.nav-btn:hover{background:#f3f4f6}.date-input{padding:4px 8px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px}.today-btn{padding:6px 12px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-size:13px}.today-btn:hover{background:#f3f4f6}.action-btn{padding:8px 16px;border:none;border-radius:6px;background:#3b82f6;color:#fff;cursor:pointer;font-size:13px}.action-btn:hover{background:#2563eb}.calendar-content{display:grid;grid-template-columns:1fr 220px;gap:12px;flex:1;min-height:0}.calendar-main{min-width:0;min-height:0;overflow:hidden}.calendar-sidebar{border-left:1px solid #e5e7eb;overflow:auto}@media(max-width:767px){.calendar-toolbar{padding:8px 0}.toolbar-left{flex-direction:column;align-items:flex-start;gap:8px}.view-switcher{display:none}.calendar-content{grid-template-columns:1fr}.calendar-sidebar{display:none}.calendar-main{overflow-y:auto}}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CALENDAR_DATE_FORMATTER]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MN_CALENDAR_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CALENDAR_CONFIG]
+                }] }], propDecorators: { showButton: [{
+                type: Input
+            }], buttonTitle: [{
+                type: Input
+            }], CalendarEventComponent: [{
+                type: Input
+            }], NewCalendarItemsEvent: [{
+                type: Input
+            }], RequestNewCalendarItemsEvent: [{
+                type: Output
+            }], CalendarItemClickedEvent: [{
+                type: Output
+            }], ButtonClickedEvent: [{
+                type: Output
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+// Main component
+
 class MnSectionDirective {
     /** Section name contributed by this DOM node to the section path */
     mnSection;
@@ -4797,6 +6618,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
  */
@@ -4805,5 +6662,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, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_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, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnButtonVariants, mnCheckboxVariants, mnDatetimeVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
 //# sourceMappingURL=mn-angular-lib.mjs.map