mn-angular-lib 0.0.43 → 0.0.44

package/fesm2022/mn-angular-lib.mjs

@@ -1,13 +1,14 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, inject, Input, ChangeDetectionStrategy, Component, HostBinding, Self, APP_INITIALIZER, SkipSelf, Attribute, Directive } from '@angular/core';
-import { BehaviorSubject, firstValueFrom } from 'rxjs';
+import { InjectionToken, Injectable, Optional, Inject, inject, Input, ChangeDetectionStrategy, Component, HostBinding, Self, APP_INITIALIZER, ElementRef, HostListener, forwardRef, Directive, EventEmitter, TemplateRef, Output, ViewChildren, ViewContainerRef, ViewChild, ApplicationRef, EnvironmentInjector, createComponent, SkipSelf, Attribute, Pipe } from '@angular/core';
+export { TemplateRef, Type } from '@angular/core';
+import { BehaviorSubject, firstValueFrom, Subject, debounceTime } from 'rxjs';
 import * as i1 from '@angular/common';
-import { CommonModule, NgClass, NgOptimizedImage } 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 } from '@angular/forms';
-import JSON5 from 'json5';
+import { Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/common/http';
+import JSON5 from 'json5';
 
 // projects/mn-angular-lib/src/lib/mn-mn-alert/mn-mn-alert.tokens.ts
 const MN_ALERT_CONFIG = new InjectionToken('MN_ALERT_CONFIG');
@@ -546,6 +547,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: [{ required: true }]
             }] } });
 
+class MnLanguageService {
+    http;
+    _translations = {};
+    _locale$ = new BehaviorSubject('en');
+    _urlPattern = null;
+    /** Observable of the current active locale. */
+    locale$ = this._locale$.asObservable();
+    constructor(http) {
+        this.http = http;
+    }
+    /** Current active locale. */
+    get locale() {
+        return this._locale$.value;
+    }
+    /**
+     * Configure the URL pattern used to fetch translation files.
+     * Use `{locale}` as placeholder, e.g. `"assets/i18n/{locale}.json"`.
+     */
+    configure(urlPattern) {
+        this._urlPattern = urlPattern;
+    }
+    /**
+     * Load translations for a locale from the configured URL pattern.
+     * If translations are already loaded for this locale, this is a no-op.
+     */
+    async loadLocale(locale) {
+        if (this._translations[locale])
+            return;
+        if (!this._urlPattern) {
+            console.warn(`[MnLanguage] No URL pattern configured. Call configure() or use provideMnLanguage().`);
+            return;
+        }
+        const url = this._urlPattern.replace('{locale}', locale);
+        try {
+            const map = await firstValueFrom(this.http.get(url));
+            this._translations[locale] = map ?? {};
+        }
+        catch (err) {
+            console.warn(`[MnLanguage] Failed to load translations from ${url}`, err);
+            this._translations[locale] = {};
+        }
+    }
+    /**
+     * Switch the active locale. Loads translations if not yet loaded.
+     */
+    async setLocale(locale) {
+        await this.loadLocale(locale);
+        this._locale$.next(locale);
+    }
+    /**
+     * Register translations for a locale directly from code (no HTTP needed).
+     */
+    registerTranslations(locale, translations) {
+        this._translations[locale] = {
+            ...(this._translations[locale] ?? {}),
+            ...translations,
+        };
+    }
+    /**
+     * Translate a key using the current locale, with optional parameter interpolation.
+     * Falls back to the key itself if no translation is found.
+     *
+     * Interpolation replaces `{{paramName}}` with the provided value.
+     */
+    translate(key, params) {
+        const map = this._translations[this.locale] ?? {};
+        let value = map[key];
+        if (value === undefined) {
+            return key;
+        }
+        if (params) {
+            for (const [paramKey, paramValue] of Object.entries(params)) {
+                value = value.replace(new RegExp(`\\{\\{${paramKey}\\}\\}`, 'g'), String(paramValue));
+            }
+        }
+        return value;
+    }
+    /**
+     * Shorthand alias for `translate`.
+     */
+    t(key, params) {
+        return this.translate(key, params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnLanguageService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnLanguageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnLanguageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+
+/**
+ * Type guard: checks whether a value is a translatable marker object.
+ */
+function isTranslatable(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        typeof value.$translate === 'string');
+}
+
 function isPlainObject(value) {
     return (typeof value === 'object' &&
         value !== null &&
@@ -555,6 +656,7 @@ class MnConfigService {
     http;
     _config = null;
     _debugMode = false;
+    lang = inject(MnLanguageService);
     constructor(http) {
         this.http = http;
     }
@@ -585,6 +687,17 @@ class MnConfigService {
         const defaults = isPlainObject(cfg.defaults) ? cfg.defaults : {};
         const overrides = isPlainObject(cfg.overrides) ? cfg.overrides : cfg.overrides ?? {};
         this._config = { defaults, overrides };
+        // Bootstrap language service from config if a "language" section is present.
+        // This avoids circular dependency: config reads raw language settings and
+        // pushes them into the language service (language service never imports config).
+        const langCfg = cfg.language;
+        if (isPlainObject(langCfg) && typeof langCfg['urlPattern'] === 'string') {
+            const lc = langCfg;
+            this.lang.configure(lc.urlPattern);
+            const localesToLoad = lc.preload ?? [lc.defaultLocale];
+            await Promise.all(localesToLoad.map(l => this.lang.loadLocale(l)));
+            await this.lang.setLocale(lc.defaultLocale);
+        }
     }
     /**
      * Resolve a configuration object for a component, optionally scoped to a section path
@@ -614,7 +727,7 @@ class MnConfigService {
                 resolved,
             });
         }
-        return resolved;
+        return this.resolveTranslatables(resolved);
     }
     /**
      * Walk the overrides nested object using the provided section path and return the leaf node.
@@ -631,6 +744,25 @@ class MnConfigService {
         }
         return node;
     }
+    /**
+     * Recursively walk a resolved config object and replace any `{ $translate: "key" }` markers
+     * with their translated values from MnLanguageService.
+     */
+    resolveTranslatables(obj) {
+        const out = {};
+        for (const [key, value] of Object.entries(obj)) {
+            if (isTranslatable(value)) {
+                out[key] = this.lang.translate(value.$translate, value.params);
+            }
+            else if (isPlainObject(value)) {
+                out[key] = this.resolveTranslatables(value);
+            }
+            else {
+                out[key] = value;
+            }
+        }
+        return out;
+    }
     /**
      * Deep merge two plain-object trees. Arrays and non-plain values are replaced by the patch.
      * Does not mutate inputs; returns a new object.
@@ -752,6 +884,13 @@ class MnInputField {
     resolveConfig() {
         const instanceId = this.explicitInstanceId || `mn-input-${this.props.id}`;
         this.uiConfig = this.configService.resolve('mn-input-field', this.sectionPath, instanceId);
+        // Allow props to override uiConfig for label and placeholder
+        if (this.props.label) {
+            this.uiConfig = { ...this.uiConfig, label: this.props.label };
+        }
+        if (this.props.placeholder) {
+            this.uiConfig = { ...this.uiConfig, placeholder: this.props.placeholder };
+        }
     }
     /**
      * Gets the appropriate adapter based on the input type.
@@ -1391,80 +1530,2824 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: [{ required: true }]
             }] } });
 
-class MnSectionDirective {
-    /** Section name contributed by this DOM node to the section path */
-    mnSection;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnSectionDirective, isStandalone: true, selector: "[mn-section]", inputs: { mnSection: ["mn-section", "mnSection"] }, providers: [
-            {
-                provide: MN_SECTION_PATH,
-                // Read parent MN_SECTION_PATH from ancestor injector (skipSelf to avoid self-reference),
-                // and read the attribute value using Attribute so it's available at provider creation time.
-                deps: [[new Optional(), new SkipSelf(), MN_SECTION_PATH], new Attribute('mn-section')],
-                useFactory: (parentPath, attr) => {
-                    const parent = Array.isArray(parentPath) ? parentPath : [];
-                    const name = (attr ?? '').trim();
-                    return name ? [...parent, name] : [...parent];
-                },
-            },
-        ], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSectionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mn-section]',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: MN_SECTION_PATH,
-                            // Read parent MN_SECTION_PATH from ancestor injector (skipSelf to avoid self-reference),
-                            // and read the attribute value using Attribute so it's available at provider creation time.
-                            deps: [[new Optional(), new SkipSelf(), MN_SECTION_PATH], new Attribute('mn-section')],
-                            useFactory: (parentPath, attr) => {
-                                const parent = Array.isArray(parentPath) ? parentPath : [];
-                                const name = (attr ?? '').trim();
-                                return name ? [...parent, name] : [...parent];
-                            },
-                        },
-                    ],
-                }]
-        }], propDecorators: { mnSection: [{
-                type: Input,
-                args: ['mn-section']
-            }] } });
+const mnCheckboxVariants = tv({
+    base: 'accent-brand-500 cursor-pointer',
+    variants: {
+        size: {
+            sm: 'w-4 h-4',
+            md: 'w-5 h-5',
+            lg: 'w-6 h-6',
+        },
+        borderRadius: {
+            none: 'rounded-none',
+            xs: 'rounded-xs',
+            sm: 'rounded-sm',
+            md: 'rounded-md',
+            lg: 'rounded-lg',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        borderRadius: 'sm',
+    },
+});
 
-class MnInstanceDirective {
-    /** Instance id for targeting per-component instance overrides */
-    mnInstance;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInstanceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnInstanceDirective, isStandalone: true, selector: "[mn-instance]", inputs: { mnInstance: ["mn-instance", "mnInstance"] }, providers: [
-            {
-                provide: MN_INSTANCE_ID,
-                // Read the attribute at provider creation time using Attribute token; Inputs may not be set yet.
-                deps: [new Attribute('mn-instance')],
-                useFactory: (attr) => (attr ?? '').trim() || null,
-            },
-        ], ngImport: i0 });
+const MN_CHECKBOX_CONFIG = new InjectionToken('MN_CHECKBOX_CONFIG');
+class MnCheckbox {
+    ngControl;
+    uiConfig = {};
+    props;
+    configService = inject(MnConfigService);
+    sectionPath = inject(MN_SECTION_PATH, { optional: true }) ?? [];
+    explicitInstanceId = inject(MN_INSTANCE_ID, { optional: true });
+    value = false;
+    isDisabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    builtInErrorMessages = {
+        required: 'This field is required',
+    };
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        if (this.ngControl)
+            this.ngControl.valueAccessor = this;
+    }
+    ngOnInit() {
+        this.resolveConfig();
+    }
+    resolveConfig() {
+        const instanceId = this.explicitInstanceId || `mn-checkbox-${this.props.id}`;
+        this.uiConfig = this.configService.resolve('mn-checkbox', this.sectionPath, instanceId);
+        if (this.props.label) {
+            this.uiConfig = { ...this.uiConfig, label: this.props.label };
+        }
+    }
+    // ========== ControlValueAccessor Implementation ==========
+    writeValue(val) {
+        this.value = !!val;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    // ========== Event Handlers ==========
+    handleChange(checked) {
+        this.value = checked;
+        this.onChange(checked);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    // ========== Error Handling ==========
+    get control() {
+        return this.ngControl?.control ?? null;
+    }
+    get showError() {
+        const c = this.control;
+        return !!c && c.invalid && (c.touched || c.dirty);
+    }
+    pickErrorKey(errors) {
+        if (this.props.errorPriority) {
+            for (const key of this.props.errorPriority) {
+                if (errors[key] !== undefined) {
+                    return key;
+                }
+            }
+        }
+        return Object.keys(errors)[0];
+    }
+    isRequired() {
+        if (!this.control)
+            return false;
+        return this.control.hasValidator(Validators.required);
+    }
+    resolveErrorMessageForKey(errorKey, errors) {
+        const errorArgs = errors[errorKey];
+        const customMsg = this.props.errorMessages?.[errorKey];
+        const useBuiltIn = this.props.useBuiltInErrorMessages !== false;
+        const builtInMsg = useBuiltIn ? this.builtInErrorMessages[errorKey] : undefined;
+        const fallbackMsg = this.props.defaultErrorMessage;
+        const msgDef = customMsg ?? builtInMsg ?? fallbackMsg ?? 'Invalid input';
+        if (typeof msgDef === 'function') {
+            return msgDef(errorArgs, errors);
+        }
+        return msgDef;
+    }
+    get errorMessages() {
+        const errors = this.control?.errors;
+        if (!errors)
+            return [];
+        return Object.keys(errors).map(key => this.resolveErrorMessageForKey(key, errors));
+    }
+    get errorMessage() {
+        const errors = this.control?.errors;
+        if (!errors)
+            return null;
+        const errorKey = this.pickErrorKey(errors);
+        return this.resolveErrorMessageForKey(errorKey, errors);
+    }
+    // ========== Resolved Properties ==========
+    get resolvedId() {
+        return this.props.id;
+    }
+    get resolvedName() {
+        return this.props?.name ?? null;
+    }
+    get checkboxClasses() {
+        return mnCheckboxVariants({
+            size: this.props.size,
+            borderRadius: this.props.borderRadius,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCheckbox, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCheckbox, isStandalone: true, selector: "mn-lib-checkbox", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <label class=\"flex flex-row items-center gap-x-2 cursor-pointer\" [attr.for]=\"resolvedId\">\n    <input\n      type=\"checkbox\"\n      [id]=\"resolvedId\"\n      [attr.name]=\"resolvedName\"\n      [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n      [attr.aria-invalid]=\"showError || null\"\n      [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"text-sm text-gray-700 select-none\">{{ uiConfig.label || props.label }}</span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInstanceDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mn-instance]',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: MN_INSTANCE_ID,
-                            // Read the attribute at provider creation time using Attribute token; Inputs may not be set yet.
-                            deps: [new Attribute('mn-instance')],
-                            useFactory: (attr) => (attr ?? '').trim() || null,
-                        },
-                    ],
-                }]
-        }], propDecorators: { mnInstance: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-lib-checkbox', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col\">\n  <label class=\"flex flex-row items-center gap-x-2 cursor-pointer\" [attr.for]=\"resolvedId\">\n    <input\n      type=\"checkbox\"\n      [id]=\"resolvedId\"\n      [attr.name]=\"resolvedName\"\n      [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n      [attr.aria-invalid]=\"showError || null\"\n      [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"text-sm text-gray-700 select-none\">{{ uiConfig.label || props.label }}</span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { props: [{
                 type: Input,
-                args: ['mn-instance']
+                args: [{ required: true }]
             }] } });
 
+const mnDatetimeVariants = tv({
+    base: 'bg-white border-1 border-gray-500 placeholder-gray-500 text-sm',
+    variants: {
+        shadow: {
+            true: 'shadow-lg',
+        },
+        size: {
+            sm: 'p-2',
+            md: 'p-3',
+            lg: 'p-4',
+        },
+        borderRadius: {
+            none: 'rounded-none',
+            xs: 'rounded-xs',
+            sm: 'rounded-sm',
+            md: 'rounded-md',
+            lg: 'rounded-lg',
+            xl: 'rounded-xl',
+            two_xl: 'rounded-2xl',
+            three_xl: 'rounded-3xl',
+            four_xl: 'rounded-4xl',
+        },
+        fullWidth: {
+            true: 'w-full',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        borderRadius: 'md',
+    },
+});
+
+const MN_DATETIME_CONFIG = new InjectionToken('MN_DATETIME_CONFIG');
+class MnDatetime {
+    ngControl;
+    uiConfig = {};
+    props;
+    configService = inject(MnConfigService);
+    sectionPath = inject(MN_SECTION_PATH, { optional: true }) ?? [];
+    explicitInstanceId = inject(MN_INSTANCE_ID, { optional: true });
+    value = null;
+    isDisabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    builtInErrorMessages = {
+        required: 'This field is required',
+        mnMin: (args) => `Date/time must be from ${args.min} onwards`,
+        mnMax: (args) => `Date/time must be up to ${args.max}`,
+    };
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        if (this.ngControl)
+            this.ngControl.valueAccessor = this;
+    }
+    ngOnInit() {
+        this.resolveConfig();
+    }
+    resolveConfig() {
+        const instanceId = this.explicitInstanceId || `mn-datetime-${this.props.id}`;
+        this.uiConfig = this.configService.resolve('mn-datetime', this.sectionPath, instanceId);
+        if (this.props.label) {
+            this.uiConfig = { ...this.uiConfig, label: this.props.label };
+        }
+        if (this.props.placeholder) {
+            this.uiConfig = { ...this.uiConfig, placeholder: this.props.placeholder };
+        }
+    }
+    // ========== ControlValueAccessor Implementation ==========
+    writeValue(val) {
+        this.value = val != null ? String(val) : null;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    // ========== Event Handlers ==========
+    handleInput(raw) {
+        this.value = raw;
+        this.onChange(raw);
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    // ========== Error Handling ==========
+    get control() {
+        return this.ngControl?.control ?? null;
+    }
+    get showError() {
+        const c = this.control;
+        return !!c && c.invalid && (c.touched || c.dirty);
+    }
+    pickErrorKey(errors) {
+        if (this.props.errorPriority) {
+            for (const key of this.props.errorPriority) {
+                if (errors[key] !== undefined) {
+                    return key;
+                }
+            }
+        }
+        return Object.keys(errors)[0];
+    }
+    isRequired() {
+        if (!this.control)
+            return false;
+        return this.control.hasValidator(Validators.required);
+    }
+    resolveErrorMessageForKey(errorKey, errors) {
+        const errorArgs = errors[errorKey];
+        const customMsg = this.props.errorMessages?.[errorKey];
+        const useBuiltIn = this.props.useBuiltInErrorMessages !== false;
+        const builtInMsg = useBuiltIn ? this.builtInErrorMessages[errorKey] : undefined;
+        const fallbackMsg = this.props.defaultErrorMessage;
+        const msgDef = customMsg ?? builtInMsg ?? fallbackMsg ?? 'Invalid input';
+        if (typeof msgDef === 'function') {
+            return msgDef(errorArgs, errors);
+        }
+        return msgDef;
+    }
+    get errorMessages() {
+        const errors = this.control?.errors;
+        if (!errors)
+            return [];
+        return Object.keys(errors).map(key => this.resolveErrorMessageForKey(key, errors));
+    }
+    get errorMessage() {
+        const errors = this.control?.errors;
+        if (!errors)
+            return null;
+        const errorKey = this.pickErrorKey(errors);
+        return this.resolveErrorMessageForKey(errorKey, errors);
+    }
+    // ========== Resolved Properties ==========
+    get resolvedId() {
+        return this.props.id;
+    }
+    get resolvedName() {
+        return this.props?.name ?? null;
+    }
+    get resolvedMode() {
+        return this.props.mode ?? 'datetime-local';
+    }
+    get inputClasses() {
+        return mnDatetimeVariants({
+            size: this.props.size,
+            borderRadius: this.props.borderRadius,
+            shadow: this.props.shadow,
+            fullWidth: this.props.fullWidth,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDatetime, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDatetime, isStandalone: true, selector: "mn-lib-datetime", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDatetime, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-lib-datetime', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"resolvedMode\"\n    [attr.placeholder]=\"uiConfig.placeholder || props.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.min]=\"props.min || null\"\n    [attr.max]=\"props.max || null\"\n    [attr.step]=\"props.step || null\"\n    [value]=\"value ?? ''\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { props: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+const mnMultiSelectVariants = tv({
+    base: 'bg-white border-1 border-gray-500 text-sm cursor-pointer',
+    variants: {
+        shadow: {
+            true: 'shadow-lg',
+        },
+        size: {
+            sm: 'p-2',
+            md: 'p-3',
+            lg: 'p-4',
+        },
+        borderRadius: {
+            none: 'rounded-none',
+            xs: 'rounded-xs',
+            sm: 'rounded-sm',
+            md: 'rounded-md',
+            lg: 'rounded-lg',
+            xl: 'rounded-xl',
+            two_xl: 'rounded-2xl',
+            three_xl: 'rounded-3xl',
+            four_xl: 'rounded-4xl',
+        },
+        fullWidth: {
+            true: 'w-full',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        borderRadius: 'md',
+    },
+});
+
+const MN_MULTI_SELECT_CONFIG = new InjectionToken('MN_MULTI_SELECT_CONFIG');
+class MnMultiSelect {
+    ngControl;
+    uiConfig = {};
+    props;
+    configService = inject(MnConfigService);
+    sectionPath = inject(MN_SECTION_PATH, { optional: true }) ?? [];
+    explicitInstanceId = inject(MN_INSTANCE_ID, { optional: true });
+    elRef = inject(ElementRef);
+    /** Currently selected values */
+    selectedValues = [];
+    isOpen = false;
+    isDisabled = false;
+    searchTerm = '';
+    onChange = () => { };
+    onTouched = () => { };
+    builtInErrorMessages = {
+        required: 'At least one option must be selected',
+    };
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        if (this.ngControl)
+            this.ngControl.valueAccessor = this;
+    }
+    ngOnInit() {
+        this.resolveConfig();
+    }
+    resolveConfig() {
+        const instanceId = this.explicitInstanceId || `mn-multi-select-${this.props.id}`;
+        this.uiConfig = this.configService.resolve('mn-multi-select', this.sectionPath, instanceId);
+        if (this.props.label) {
+            this.uiConfig = { ...this.uiConfig, label: this.props.label };
+        }
+        if (this.props.placeholder) {
+            this.uiConfig = { ...this.uiConfig, placeholder: this.props.placeholder };
+        }
+    }
+    // ========== ControlValueAccessor Implementation ==========
+    writeValue(val) {
+        this.selectedValues = Array.isArray(val) ? val : [];
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    // ========== Dropdown Logic ==========
+    toggle() {
+        if (this.isDisabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (!this.isOpen) {
+            this.searchTerm = '';
+        }
+    }
+    onDocumentClick(event) {
+        if (!this.elRef.nativeElement.contains(event.target)) {
+            if (this.isOpen) {
+                this.isOpen = false;
+                this.searchTerm = '';
+            }
+        }
+    }
+    toggleOption(option) {
+        if (option.disabled)
+            return;
+        const index = this.selectedValues.indexOf(option.value);
+        if (index > -1) {
+            this.selectedValues = this.selectedValues.filter(v => v !== option.value);
+        }
+        else {
+            if (this.props.maxSelections && this.selectedValues.length >= this.props.maxSelections) {
+                return;
+            }
+            this.selectedValues = [...this.selectedValues, option.value];
+        }
+        this.onChange(this.selectedValues);
+    }
+    removeOption(option, event) {
+        event.stopPropagation();
+        this.selectedValues = this.selectedValues.filter(v => v !== option.value);
+        this.onChange(this.selectedValues);
+    }
+    isSelected(option) {
+        return this.selectedValues.includes(option.value);
+    }
+    isMaxReached(option) {
+        if (!this.props.maxSelections)
+            return false;
+        return this.selectedValues.length >= this.props.maxSelections && !this.isSelected(option);
+    }
+    onSearch(term) {
+        this.searchTerm = term;
+    }
+    get filteredOptions() {
+        if (!this.searchTerm)
+            return this.props.options;
+        const lower = this.searchTerm.toLowerCase();
+        return this.props.options.filter(o => o.label.toLowerCase().includes(lower));
+    }
+    get selectedOptions() {
+        return this.props.options.filter(o => this.selectedValues.includes(o.value));
+    }
+    handleBlur() {
+        this.onTouched();
+    }
+    // ========== Error Handling ==========
+    get control() {
+        return this.ngControl?.control ?? null;
+    }
+    get showError() {
+        const c = this.control;
+        return !!c && c.invalid && (c.touched || c.dirty);
+    }
+    pickErrorKey(errors) {
+        if (this.props.errorPriority) {
+            for (const key of this.props.errorPriority) {
+                if (errors[key] !== undefined) {
+                    return key;
+                }
+            }
+        }
+        return Object.keys(errors)[0];
+    }
+    isRequired() {
+        if (!this.control)
+            return false;
+        return this.control.hasValidator(Validators.required);
+    }
+    resolveErrorMessageForKey(errorKey, errors) {
+        const errorArgs = errors[errorKey];
+        const customMsg = this.props.errorMessages?.[errorKey];
+        const useBuiltIn = this.props.useBuiltInErrorMessages !== false;
+        const builtInMsg = useBuiltIn ? this.builtInErrorMessages[errorKey] : undefined;
+        const fallbackMsg = this.props.defaultErrorMessage;
+        const msgDef = customMsg ?? builtInMsg ?? fallbackMsg ?? 'Invalid input';
+        if (typeof msgDef === 'function') {
+            return msgDef(errorArgs, errors);
+        }
+        return msgDef;
+    }
+    get errorMessages() {
+        const errors = this.control?.errors;
+        if (!errors)
+            return [];
+        return Object.keys(errors).map(key => this.resolveErrorMessageForKey(key, errors));
+    }
+    get errorMessage() {
+        const errors = this.control?.errors;
+        if (!errors)
+            return null;
+        const errorKey = this.pickErrorKey(errors);
+        return this.resolveErrorMessageForKey(errorKey, errors);
+    }
+    // ========== Resolved Properties ==========
+    get resolvedId() {
+        return this.props.id;
+    }
+    get resolvedName() {
+        return this.props?.name ?? null;
+    }
+    get triggerClasses() {
+        return mnMultiSelectVariants({
+            size: this.props.size,
+            borderRadius: this.props.borderRadius,
+            shadow: this.props.shadow,
+            fullWidth: this.props.fullWidth,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"flex flex-row items-center gap-x-1 flex-wrap min-h-[1.5rem]\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-gray-500\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <span class=\"inline-flex items-center gap-x-1 bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-md\">\n            {{ opt.label }}\n            <button\n              type=\"button\"\n              class=\"text-gray-400 hover:text-gray-600 cursor-pointer\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            >\u00D7</button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg class=\"w-4 h-4 text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <div class=\"relative z-50\">\n      <div class=\"absolute top-0 left-0 right-0 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto\">\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-gray-200\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-gray-300 rounded-md outline-none focus:border-blue-500\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer hover:bg-gray-50\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-brand-500 pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-gray-400\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"flex flex-row items-center gap-x-1 flex-wrap min-h-[1.5rem]\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-gray-500\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <span class=\"inline-flex items-center gap-x-1 bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-md\">\n            {{ opt.label }}\n            <button\n              type=\"button\"\n              class=\"text-gray-400 hover:text-gray-600 cursor-pointer\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            >\u00D7</button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg class=\"w-4 h-4 text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <div class=\"relative z-50\">\n      <div class=\"absolute top-0 left-0 right-0 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto\">\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-gray-200\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-gray-300 rounded-md outline-none focus:border-blue-500\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer hover:bg-gray-50\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-brand-500 pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-gray-400\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { props: [{
+                type: Input,
+                args: [{ required: true }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+// =========================
+// Enums / Value Types
+// =========================
+var ModalKind;
+(function (ModalKind) {
+    ModalKind["WIZARD"] = "wizard";
+    ModalKind["FORM"] = "form";
+    ModalKind["CONFIRMATION"] = "confirmation";
+    ModalKind["CUSTOM"] = "custom";
+})(ModalKind || (ModalKind = {}));
+var ModalSize;
+(function (ModalSize) {
+    ModalSize["SM"] = "sm";
+    ModalSize["MD"] = "md";
+    ModalSize["LG"] = "lg";
+    ModalSize["XL"] = "xl";
+    ModalSize["FULL"] = "full";
+})(ModalSize || (ModalSize = {}));
+var CloseMode;
+(function (CloseMode) {
+    CloseMode["ALLOWED"] = "allowed";
+    CloseMode["GUARDED"] = "guarded";
+    CloseMode["DISABLED"] = "disabled";
+})(CloseMode || (CloseMode = {}));
+var BackdropMode;
+(function (BackdropMode) {
+    BackdropMode["HIDE"] = "hide";
+    BackdropMode["STATIC"] = "static";
+    BackdropMode["CLOSABLE"] = "closable";
+})(BackdropMode || (BackdropMode = {}));
+var KeyboardMode;
+(function (KeyboardMode) {
+    KeyboardMode["ENABLED"] = "enabled";
+    KeyboardMode["DISABLED"] = "disabled";
+})(KeyboardMode || (KeyboardMode = {}));
+var ModalIntent;
+(function (ModalIntent) {
+    ModalIntent["NEUTRAL"] = "neutral";
+    ModalIntent["INFO"] = "info";
+    ModalIntent["SUCCESS"] = "success";
+    ModalIntent["WARNING"] = "warning";
+    ModalIntent["DANGER"] = "danger";
+})(ModalIntent || (ModalIntent = {}));
+var WizardFlowMode;
+(function (WizardFlowMode) {
+    WizardFlowMode["LINEAR"] = "linear";
+    WizardFlowMode["FREE"] = "free";
+})(WizardFlowMode || (WizardFlowMode = {}));
+var FormLayoutMode;
+(function (FormLayoutMode) {
+    FormLayoutMode["SINGLE_COLUMN"] = "single-column";
+    FormLayoutMode["TWO_COLUMN"] = "two-column";
+    FormLayoutMode["INLINE"] = "inline";
+})(FormLayoutMode || (FormLayoutMode = {}));
+var SubmitMode;
+(function (SubmitMode) {
+    SubmitMode["ONCE"] = "once";
+    SubmitMode["RETRYABLE"] = "retryable";
+})(SubmitMode || (SubmitMode = {}));
+var ConfirmationTone;
+(function (ConfirmationTone) {
+    ConfirmationTone["DEFAULT"] = "default";
+    ConfirmationTone["WARNING"] = "warning";
+    ConfirmationTone["DANGER"] = "danger";
+})(ConfirmationTone || (ConfirmationTone = {}));
+var FieldKind;
+(function (FieldKind) {
+    FieldKind["TEXT"] = "text";
+    FieldKind["NUMBER"] = "number";
+    FieldKind["SELECT"] = "select";
+    FieldKind["CHECKBOX"] = "checkbox";
+    FieldKind["DATE"] = "date";
+    FieldKind["TEXTAREA"] = "textarea";
+    FieldKind["DATETIME"] = "datetime";
+    FieldKind["MULTI_SELECT"] = "multi-select";
+    FieldKind["MULTI_SELECT_TABLE"] = "multi-select-table";
+    FieldKind["SINGLE_SELECT_TABLE"] = "single-select-table";
+    FieldKind["PASSWORD"] = "password";
+    FieldKind["FILE"] = "file";
+    FieldKind["COLOR"] = "color";
+    FieldKind["RATING"] = "rating";
+    FieldKind["SLIDER"] = "slider";
+    FieldKind["CUSTOM"] = "custom";
+})(FieldKind || (FieldKind = {}));
+var FieldAppearance;
+(function (FieldAppearance) {
+    FieldAppearance["OUTLINE"] = "outline";
+    FieldAppearance["FILLED"] = "filled";
+    FieldAppearance["GHOST"] = "ghost";
+})(FieldAppearance || (FieldAppearance = {}));
+var SelectionMode;
+(function (SelectionMode) {
+    SelectionMode["SINGLE"] = "single";
+    SelectionMode["MULTIPLE"] = "multiple";
+})(SelectionMode || (SelectionMode = {}));
+var OptionState;
+(function (OptionState) {
+    OptionState["ENABLED"] = "enabled";
+    OptionState["DISABLED"] = "disabled";
+})(OptionState || (OptionState = {}));
+var ActionStyle;
+(function (ActionStyle) {
+    ActionStyle["PRIMARY"] = "primary";
+    ActionStyle["SECONDARY"] = "secondary";
+    ActionStyle["DANGER"] = "danger";
+    ActionStyle["GHOST"] = "ghost";
+})(ActionStyle || (ActionStyle = {}));
+var StepState;
+(function (StepState) {
+    StepState["PENDING"] = "pending";
+    StepState["ACTIVE"] = "active";
+    StepState["COMPLETE"] = "complete";
+    StepState["DISABLED"] = "disabled";
+    StepState["HIDDEN"] = "hidden";
+})(StepState || (StepState = {}));
+var NavigationDirection;
+(function (NavigationDirection) {
+    NavigationDirection["FORWARD"] = "forward";
+    NavigationDirection["BACKWARD"] = "backward";
+    NavigationDirection["DIRECT"] = "direct";
+})(NavigationDirection || (NavigationDirection = {}));
+var ModalCloseReason;
+(function (ModalCloseReason) {
+    ModalCloseReason["COMPLETED"] = "completed";
+    ModalCloseReason["CANCELLED"] = "cancelled";
+    ModalCloseReason["DISMISSED"] = "dismissed";
+    ModalCloseReason["BACKDROP"] = "backdrop";
+    ModalCloseReason["ESCAPE"] = "escape";
+    ModalCloseReason["PROGRAMMATIC"] = "programmatic";
+    ModalCloseReason["GUARD_REJECTED"] = "guard_rejected";
+})(ModalCloseReason || (ModalCloseReason = {}));
+var ValidationStatus;
+(function (ValidationStatus) {
+    ValidationStatus["VALID"] = "valid";
+    ValidationStatus["INVALID"] = "invalid";
+    ValidationStatus["PENDING"] = "pending";
+})(ValidationStatus || (ValidationStatus = {}));
+var ValidationCode;
+(function (ValidationCode) {
+    ValidationCode["REQUIRED"] = "required";
+    ValidationCode["MIN"] = "min";
+    ValidationCode["MAX"] = "max";
+    ValidationCode["PATTERN"] = "pattern";
+    ValidationCode["CUSTOM"] = "custom";
+})(ValidationCode || (ValidationCode = {}));
+
+class StepBuilder {
+    config;
+    currentRow = [];
+    currentRowColumns = 1;
+    constructor(id, title) {
+        this.config = {
+            id,
+            title,
+            fields: [],
+            state: StepState.PENDING,
+        };
+    }
+    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) {
+        this.flushCurrentRow();
+        this.config.fields = this.config.fields || [];
+        this.config.fields.push(field);
+        if (!this.config.rows) {
+            this.config.rows = [];
+        }
+        this.config.rows.push({
+            columns: 1,
+            fields: [{ field, span: 1 }],
+        });
+        return this;
+    }
+    /**
+     * Start a new row with the specified number of columns.
+     * All subsequent `addToRow()` calls will add fields to this row.
+     */
+    row(columns = 2) {
+        this.flushCurrentRow();
+        this.currentRowColumns = columns;
+        return this;
+    }
+    /**
+     * Add a field to the current row started by `row()`.
+     */
+    addToRow(field, span = 1) {
+        this.config.fields = this.config.fields || [];
+        this.config.fields.push(field);
+        this.currentRow.push({ field, span });
+        return this;
+    }
+    flushCurrentRow() {
+        if (this.currentRow.length > 0) {
+            if (!this.config.rows) {
+                this.config.rows = [];
+            }
+            this.config.rows.push({
+                columns: this.currentRowColumns,
+                fields: [...this.currentRow],
+            });
+            this.currentRow = [];
+            this.currentRowColumns = 1;
+        }
+    }
+    /**
+     * Add a field group with a section header.
+     */
+    fieldGroup(group) {
+        this.flushCurrentRow();
+        if (!this.config.fieldGroups) {
+            this.config.fieldGroups = [];
+        }
+        this.config.fields = this.config.fields || [];
+        group.fields.forEach(f => this.config.fields.push(f));
+        if (!group.rows) {
+            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.
+     */
+    formValidators(validators) {
+        this.config.formValidators = validators;
+        return this;
+    }
+    /**
+     * Add Angular FormGroup-level validators for this step.
+     */
+    groupValidators(validators) {
+        this.config.groupValidators = validators;
+        return this;
+    }
+    /**
+     * Set initial values for fields in this step.
+     */
+    initialValue(value) {
+        this.config.initialValue = value;
+        return this;
+    }
+    /**
+     * Set a visibility condition for this step based on aggregated wizard data.
+     */
+    visible(condition) {
+        this.config.visible = condition;
+        return this;
+    }
+    build() {
+        this.flushCurrentRow();
+        return this.config;
+    }
+}
+
+class BaseModalBuilder {
+    config;
+    constructor(initialConfig) {
+        this.config = initialConfig;
+    }
+    title(title) {
+        this.config.title = title;
+        return this;
+    }
+    subtitle(subtitle) {
+        this.config.subtitle = subtitle;
+        return this;
+    }
+    description(description) {
+        this.config.description = description;
+        return this;
+    }
+    closeGuard(guard) {
+        this.config.closeGuard = guard;
+        return this;
+    }
+    size(size) {
+        this.config.size = size;
+        return this;
+    }
+    closeMode(mode) {
+        this.config.closeMode = mode;
+        return this;
+    }
+    backdrop(mode) {
+        this.config.backdrop = mode;
+        return this;
+    }
+    keyboard(mode) {
+        this.config.keyboard = mode;
+        return this;
+    }
+    intent(intent) {
+        this.config.intent = intent;
+        return this;
+    }
+    footerActions(actions) {
+        this.config.footerActions = actions;
+        return this;
+    }
+    polling(config) {
+        this.config.polling = config;
+        return this;
+    }
+    onCancel(handler) {
+        this.config.onCancel = handler;
+        return this;
+    }
+    i18n(labels) {
+        this.config.i18n = labels;
+        return this;
+    }
+    build() {
+        return Object.freeze({ ...this.config });
+    }
+}
+
+class WizardModalBuilder extends BaseModalBuilder {
+    constructor() {
+        super({
+            kind: ModalKind.WIZARD,
+            steps: [],
+        });
+    }
+    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);
+        }
+        return this;
+    }
+    addStep(title, buildFn, id) {
+        const stepId = id || `step-${this.config.steps.length}`;
+        const builder = new StepBuilder(stepId, title);
+        buildFn(builder);
+        this.config.steps.push(builder.build());
+        return this;
+    }
+    startAt(stepId) {
+        this.config.startStepId = stepId;
+        return this;
+    }
+    flow(mode) {
+        this.config.flow = mode;
+        return this;
+    }
+    onStepChange(handler) {
+        this.config.onStepChange = handler;
+        return this;
+    }
+    onComplete(handler) {
+        this.config.onComplete = handler;
+        return this;
+    }
+    onBeforeComplete(validators) {
+        this.config.onBeforeComplete = validators;
+        return this;
+    }
+}
+
+class FormModalBuilder extends BaseModalBuilder {
+    currentRow = [];
+    currentRowColumns = 1;
+    constructor() {
+        super({
+            kind: ModalKind.FORM,
+            fields: [],
+            rows: [],
+        });
+    }
+    /**
+     * Add a field as a full-width row (single column).
+     * This is the simple API — each field gets its own row.
+     */
+    field(field) {
+        this.flushCurrentRow();
+        this.config.fields.push(field);
+        this.config.rows.push({
+            columns: 1,
+            fields: [{ field, span: 1 }],
+        });
+        return this;
+    }
+    /**
+     * Start a new row with the specified number of columns.
+     * All subsequent `addToRow()` calls will add fields to this row
+     * until the next `row()` or `field()` call.
+     *
+     * @example
+     * .row(2)
+     *   .addToRow({ kind: FieldKind.TEXT, key: 'firstName', label: 'First Name' })
+     *   .addToRow({ kind: FieldKind.TEXT, key: 'lastName', label: 'Last Name' })
+     * .row(3)
+     *   .addToRow({ kind: FieldKind.TEXT, key: 'city', label: 'City' }, 2)
+     *   .addToRow({ kind: FieldKind.TEXT, key: 'zip', label: 'ZIP' })
+     */
+    row(columns = 2) {
+        this.flushCurrentRow();
+        this.currentRowColumns = columns;
+        return this;
+    }
+    /**
+     * 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;
+    }
+    flushCurrentRow() {
+        if (this.currentRow.length > 0) {
+            this.config.rows.push({
+                columns: this.currentRowColumns,
+                fields: [...this.currentRow],
+            });
+            this.currentRow = [];
+            this.currentRowColumns = 1;
+        }
+    }
+    layout(mode) {
+        this.config.layout = mode;
+        return this;
+    }
+    initialValue(value) {
+        this.config.initialValue = value;
+        return this;
+    }
+    submitMode(mode) {
+        this.config.submitMode = mode;
+        return this;
+    }
+    onComplete(handler) {
+        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;
+    }
+    /**
+     * Add Angular FormGroup-level validators.
+     * These are standard Angular ValidatorFn applied to the FormGroup itself.
+     */
+    groupValidators(validators) {
+        this.config.groupValidators = validators;
+        return this;
+    }
+    /**
+     * 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;
+    }
+    build() {
+        this.flushCurrentRow();
+        return super.build();
+    }
+}
+
+class ConfirmationModalBuilder extends BaseModalBuilder {
+    constructor() {
+        super({
+            kind: ModalKind.CONFIRMATION,
+            message: '',
+        });
+    }
+    message(text) {
+        this.config.message = text;
+        return this;
+    }
+    tone(tone) {
+        this.config.tone = tone;
+        return this;
+    }
+    confirmAction(action) {
+        this.config.confirm = action;
+        return this;
+    }
+    cancelAction(action) {
+        this.config.cancel = action;
+        return this;
+    }
+}
+
+class CustomModalBuilder extends BaseModalBuilder {
+    constructor() {
+        super({
+            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;
+    }
+}
+
+class ModalBuilder {
+    static wizard() {
+        return new WizardModalBuilder();
+    }
+    static form() {
+        return new FormModalBuilder();
+    }
+    static confirmation() {
+        return new ConfirmationModalBuilder();
+    }
+    static custom() {
+        return new CustomModalBuilder();
+    }
+}
+
+class MnModalRef {
+    componentRef;
+    config;
+    closeSubject = new Subject();
+    afterClosed$ = this.closeSubject.asObservable();
+    constructor(componentRef, config) {
+        this.componentRef = componentRef;
+        this.config = config;
+    }
+    close(result) {
+        const event = {
+            reason: ModalCloseReason.COMPLETED,
+            result,
+        };
+        this.animateAndDestroy(event);
+    }
+    dismiss(reason) {
+        const event = {
+            reason,
+        };
+        this.animateAndDestroy(event);
+    }
+    async animateAndDestroy(event) {
+        const shell = this.componentRef.instance;
+        if (shell && typeof shell.startClosing === 'function') {
+            await shell.startClosing();
+        }
+        this.closeSubject.next(event);
+        this.closeSubject.complete();
+        this.destroy();
+    }
+    update(config) {
+        Object.assign(this.config, config);
+        // Trigger change detection on the shell component
+        this.componentRef.changeDetectorRef.detectChanges();
+    }
+    destroy() {
+        this.componentRef.destroy();
+    }
+}
+
+class MnCustomFieldHostDirective {
+    vcr;
+    component;
+    inputs;
+    componentRef;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(vcr) {
+        this.vcr = vcr;
+    }
+    ngOnInit() {
+        if (!this.component)
+            return;
+        this.vcr.clear();
+        this.componentRef = this.vcr.createComponent(this.component);
+        // Pass inputs to the component
+        if (this.inputs) {
+            Object.entries(this.inputs).forEach(([key, value]) => {
+                this.componentRef.instance[key] = value;
+            });
+        }
+        // Wire up value accessor if the component supports it
+        const instance = this.componentRef.instance;
+        if (typeof instance.registerOnChange === 'function') {
+            instance.registerOnChange((val) => this.onChange(val));
+        }
+        if (typeof instance.registerOnTouched === 'function') {
+            instance.registerOnTouched(() => this.onTouched());
+        }
+    }
+    ngOnDestroy() {
+        this.componentRef?.destroy();
+    }
+    writeValue(val) {
+        const instance = this.componentRef?.instance;
+        if (instance && typeof instance.writeValue === 'function') {
+            instance.writeValue(val);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        const instance = this.componentRef?.instance;
+        if (instance && typeof instance.setDisabledState === 'function') {
+            instance.setDisabledState(isDisabled);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCustomFieldHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnCustomFieldHostDirective, isStandalone: true, selector: "[mnCustomFieldHost]", inputs: { component: "component", inputs: "inputs" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MnCustomFieldHostDirective),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCustomFieldHostDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mnCustomFieldHost]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MnCustomFieldHostDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { component: [{
+                type: Input
+            }], inputs: [{
+                type: Input
+            }] } });
+
+// ── Column Sort Type ──
+var ColumnSortType;
+(function (ColumnSortType) {
+    ColumnSortType["ALPHABETICAL"] = "ALPHABETICAL";
+    ColumnSortType["NUMERICAL"] = "NUMERICAL";
+    ColumnSortType["DATE"] = "DATE";
+    ColumnSortType["NONE"] = "NONE";
+})(ColumnSortType || (ColumnSortType = {}));
+
+class MnTable {
+    dataSource;
+    sortChange = new EventEmitter();
+    selectionChange = new EventEmitter();
+    rowClick = new EventEmitter();
+    filteredItems = [];
+    searchValue = '';
+    loadingMoreRows = false;
+    currentSort = null;
+    selectedIds = new Set();
+    dataSubscription;
+    searchSubject = new Subject();
+    searchSubscription;
+    ngOnInit() {
+        this.currentSort = this.dataSource.defaultSort ?? null;
+        this.filteredItems = this.dataSource.dataRows.value;
+        this.dataSubscription = this.dataSource.dataRows.subscribe(() => {
+            this.applyFilterAndSort(false);
+        });
+        this.searchSubscription = this.searchSubject
+            .pipe(debounceTime(300))
+            .subscribe(value => {
+            this.searchValue = value;
+            this.applyFilterAndSort(true);
+        });
+    }
+    ngOnDestroy() {
+        this.dataSubscription?.unsubscribe();
+        this.searchSubscription?.unsubscribe();
+    }
+    // ── Search ──
+    onSearch(searchString) {
+        this.searchSubject.next(searchString);
+    }
+    // ── Sorting ──
+    sort(column) {
+        if (!column.sortType || column.sortType === ColumnSortType.NONE)
+            return;
+        if (this.currentSort?.columnKey === column.key) {
+            this.currentSort = this.currentSort.direction === 'asc'
+                ? { columnKey: column.key, direction: 'desc' }
+                : null;
+        }
+        else {
+            this.currentSort = { columnKey: column.key, direction: 'asc' };
+        }
+        this.sortChange.emit(this.currentSort);
+        this.applyFilterAndSort(false);
+    }
+    getSortIcon(column) {
+        if (!this.currentSort || this.currentSort.columnKey !== column.key)
+            return '';
+        return this.currentSort.direction === 'asc' ? '▲' : '▼';
+    }
+    isSortable(column) {
+        return !!column.sortType && column.sortType !== ColumnSortType.NONE;
+    }
+    // ── Selection ──
+    isSelected(row) {
+        return this.selectedIds.has(this.dataSource.getID(row));
+    }
+    toggleRow(row) {
+        const id = this.dataSource.getID(row);
+        const mode = this.dataSource.selectionMode ?? 'none';
+        if (mode === 'single') {
+            this.selectedIds.clear();
+            this.selectedIds.add(id);
+        }
+        else if (mode === 'multi') {
+            if (this.selectedIds.has(id)) {
+                this.selectedIds.delete(id);
+            }
+            else {
+                this.selectedIds.add(id);
+            }
+        }
+        this.emitSelection();
+    }
+    toggleAll() {
+        if (this.selectedIds.size === this.filteredItems.length) {
+            this.selectedIds.clear();
+        }
+        else {
+            this.filteredItems.forEach(row => this.selectedIds.add(this.dataSource.getID(row)));
+        }
+        this.emitSelection();
+    }
+    get allSelected() {
+        return this.filteredItems.length > 0 && this.selectedIds.size === this.filteredItems.length;
+    }
+    get hasSelection() {
+        return (this.dataSource.selectionMode ?? 'none') !== 'none';
+    }
+    get isMultiSelect() {
+        return this.dataSource.selectionMode === 'multi';
+    }
+    // ── Row interaction ──
+    onRowClick(row) {
+        this.dataSource.onRowClick?.(row);
+        this.rowClick.emit(row);
+    }
+    // ── Pagination ──
+    loadMoreRows() {
+        if (!this.dataSource.loadAdditionalRows || this.loadingMoreRows)
+            return;
+        this.loadingMoreRows = true;
+        const promise = (this.searchValue.length > 0 && this.dataSource.searchForAdditionalItems)
+            ? this.dataSource.searchForAdditionalItems(this.searchValue)
+            : this.dataSource.loadAdditionalRows();
+        promise
+            .then(rows => this.processLoadedRows(rows))
+            .catch(() => this.loadingMoreRows = false);
+    }
+    get showLoadMore() {
+        const mode = this.dataSource.paginationMode ?? 'load-more';
+        const strategy = this.dataSource.paginationStrategy;
+        const hasMore = strategy ? strategy.hasMoreRows : !!this.dataSource.loadAdditionalRows;
+        return mode === 'load-more' && hasMore;
+    }
+    // ── Template helpers ──
+    isTemplateRef(value) {
+        return value instanceof TemplateRef;
+    }
+    getCellValue(column, row) {
+        if (typeof column.cell === 'function')
+            return column.cell(row);
+        return '';
+    }
+    trackByID = (_index, row) => {
+        return this.dataSource.getID(row);
+    };
+    trackByKey = (_index, column) => {
+        return column.key;
+    };
+    // ── Table CSS classes ──
+    get tableClasses() {
+        return 'w-full border-collapse overflow-y-hidden';
+    }
+    get hasRowActions() {
+        return !!this.dataSource.rowActions && this.dataSource.rowActions.length > 0;
+    }
+    getVisibleActions(row) {
+        return (this.dataSource.rowActions ?? []).filter(a => !a.isVisible || a.isVisible(row));
+    }
+    get totalColumnCount() {
+        let count = this.dataSource.columns.length;
+        if (this.hasSelection)
+            count++;
+        if (this.hasRowActions)
+            count++;
+        return count;
+    }
+    // ── Skeleton rows for loading ──
+    get skeletonRows() {
+        return Array.from({ length: 5 });
+    }
+    // ── Private ──
+    applyFilterAndSort(searchForItems) {
+        let items = this.dataSource.dataRows.value;
+        if (this.dataSource.isInSearch && this.dataSource.canSearch && this.searchValue.length > 0) {
+            const term = this.searchValue.toLowerCase();
+            items = items.filter(row => this.dataSource.isInSearch(row, term));
+        }
+        items = this.applySorting(items);
+        this.filteredItems = items;
+        if (searchForItems) {
+            this.loadMoreRows();
+        }
+    }
+    applySorting(items) {
+        if (!this.currentSort)
+            return items;
+        const column = this.dataSource.columns.find(c => c.key === this.currentSort.columnKey);
+        if (!column || !column.sortType || column.sortType === ColumnSortType.NONE)
+            return items;
+        const getValue = column.getRawValueToSort ?? ((row) => {
+            if (typeof column.cell === 'function')
+                return column.cell(row);
+            return '';
+        });
+        const dir = this.currentSort.direction === 'asc' ? 1 : -1;
+        return [...items].sort((a, b) => {
+            const va = getValue(a);
+            const vb = getValue(b);
+            if (va == null && vb == null)
+                return 0;
+            if (va == null)
+                return 1;
+            if (vb == null)
+                return -1;
+            switch (column.sortType) {
+                case ColumnSortType.ALPHABETICAL:
+                    return String(va).localeCompare(String(vb)) * dir;
+                case ColumnSortType.NUMERICAL:
+                    return (Number(va) - Number(vb)) * dir;
+                case ColumnSortType.DATE:
+                    return (new Date(va).getTime() - new Date(vb).getTime()) * dir;
+                default:
+                    return 0;
+            }
+        });
+    }
+    processLoadedRows(rows) {
+        const merged = [...new Map([...this.dataSource.dataRows.value, ...rows].map(item => [this.dataSource.getID(item), item])).values()];
+        this.dataSource.dataRows.next(merged);
+        this.loadingMoreRows = false;
+        this.applyFilterAndSort(false);
+    }
+    emitSelection() {
+        const rows = this.dataSource.dataRows.value.filter(r => this.selectedIds.has(this.dataSource.getID(r)));
+        this.dataSource.selectedRows?.next(rows);
+        this.selectionChange.emit(rows);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", inputs: { dataSource: "dataSource" }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick" }, ngImport: i0, template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  <div *ngIf=\"dataSource.canSearch\">\n    <input\n      type=\"text\"\n      class=\"input input-sm rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm focus:outline-none focus:border-brand-500 w-full max-w-xs\"\n      [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n      (input)=\"onSearch($any($event.target).value)\"\n      aria-label=\"Search table\"\n    />\n  </div>\n  <ng-container *ngIf=\"dataSource.toolbarTemplate\" [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr>\n        <!-- Selection checkbox column header -->\n        <th *ngIf=\"hasSelection\" class=\"w-10 text-center text-sm bg-gray-50 px-2 py-2\">\n          <label *ngIf=\"isMultiSelect\">\n            <input\n              type=\"checkbox\"\n              class=\"accent-brand-500\"\n              [checked]=\"allSelected\"\n              (change)=\"toggleAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </label>\n        </th>\n\n        <!-- Data columns -->\n        <th\n          *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\"\n          class=\"text-sm px-4 py-2\"\n          [class.cursor-pointer]=\"isSortable(column)\"\n          [class.select-none]=\"isSortable(column)\"\n          [class.hover:bg-gray-100]=\"isSortable(column)\"\n          [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n          [class.text-center]=\"column.align === 'center'\"\n          [class.text-right]=\"column.align === 'right'\"\n          [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n          [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n          [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n          [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n          [style.width]=\"column.width ?? null\"\n          [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n          (click)=\"sort(column)\"\n        >\n          <span class=\"inline-flex items-center gap-1\">\n            <ng-container *ngIf=\"isTemplateRef(column.header); else stringHeader\">\n              <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n            </ng-container>\n            <ng-template #stringHeader>\n              <span>{{ column.header }}</span>\n            </ng-template>\n            <span *ngIf=\"isSortable(column)\" class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n          </span>\n        </th>\n\n        <!-- Actions column header -->\n        <th *ngIf=\"hasRowActions\" class=\"text-sm px-4 py-2 text-right\">Actions</th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      <ng-container *ngIf=\"dataSource.isDataLoading; else content\">\n        <tr *ngFor=\"let _ of skeletonRows\" class=\"animate-pulse\">\n          <td *ngIf=\"hasSelection\" class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-gray-200\"></div></td>\n          <td *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\" class=\"px-4 py-3\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n          >\n            <div class=\"h-4 w-3/4 rounded bg-gray-200\"></div>\n          </td>\n          <td *ngIf=\"hasRowActions\" class=\"px-4 py-3\"><div class=\"h-4 w-16 rounded bg-gray-200\"></div></td>\n        </tr>\n      </ng-container>\n\n      <!-- Content -->\n      <ng-template #content>\n        <!-- Empty state -->\n        <tr *ngIf=\"filteredItems.length === 0\">\n          <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n            <ng-container *ngIf=\"dataSource.emptyTemplate; else defaultEmpty\">\n              <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #defaultEmpty>\n              <div class=\"flex flex-col items-center gap-2 text-gray-400\">\n                <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n              </div>\n            </ng-template>\n          </td>\n        </tr>\n\n        <!-- Data rows -->\n        <tr\n          *ngFor=\"let row of filteredItems; trackBy: trackByID; let odd = odd; let last = last\"\n          class=\"bg-white transition-colors duration-150\"\n          [class.bg-brand-50]=\"isSelected(row)\"\n          [class.bg-gray-50]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n          [class.hover:bg-gray-100]=\"dataSource.appearance?.hover !== false\"\n          [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n          [class.border-b]=\"!last\"\n          [class.border-gray-200]=\"!last\"\n          [class.border-b-1]=\"last\"\n          [class.border-black]=\"last\"\n          [class.shadow-3xl]=\"last\"\n          (click)=\"onRowClick(row)\"\n        >\n          <!-- Selection checkbox -->\n          <td *ngIf=\"hasSelection\" class=\"w-10 text-center px-2 py-2\">\n            <label>\n              <input\n                *ngIf=\"isMultiSelect; else radioTpl\"\n                type=\"checkbox\"\n                class=\"accent-brand-500\"\n                [checked]=\"isSelected(row)\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleRow(row)\"\n              />\n              <ng-template #radioTpl>\n                <input\n                  type=\"radio\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"isSelected(row)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleRow(row)\"\n                  name=\"mn-table-single-select\"\n                />\n              </ng-template>\n            </label>\n          </td>\n\n          <!-- Data cells -->\n          <td\n            *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\"\n            class=\"text-xs px-4 py-2\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            [style.width]=\"column.width ?? null\"\n          >\n            <ng-container *ngIf=\"isTemplateRef(column.cell); else stringCell\">\n              <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n            </ng-container>\n            <ng-template #stringCell>{{ getCellValue(column, row) }}</ng-template>\n          </td>\n\n          <!-- Row actions -->\n          <td *ngIf=\"hasRowActions\" class=\"text-right px-4 py-2\">\n            <div class=\"inline-flex items-center justify-end gap-2\">\n              <button\n                *ngFor=\"let action of getVisibleActions(row)\"\n                class=\"px-2 py-1 text-xs rounded hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n                [ngClass]=\"action.cssClass ?? ''\"\n                [disabled]=\"action.isDisabled ? action.isDisabled(row) : false\"\n                (click)=\"$event.stopPropagation(); action.onClick(row)\"\n                [attr.aria-label]=\"action.label\"\n              >\n                <span *ngIf=\"action.icon\" [innerHTML]=\"action.icon\"></span>\n                <span *ngIf=\"action.label\">{{ action.label }}</span>\n              </button>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n<div *ngIf=\"showLoadMore\" class=\"flex justify-center py-4\">\n  <button\n    class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n    (click)=\"loadMoreRows()\"\n    [disabled]=\"loadingMoreRows\"\n  >\n    <span *ngIf=\"loadingMoreRows\" class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n    Load more\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgForOf, NgIf, NgTemplateOutlet], template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  <div *ngIf=\"dataSource.canSearch\">\n    <input\n      type=\"text\"\n      class=\"input input-sm rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm focus:outline-none focus:border-brand-500 w-full max-w-xs\"\n      [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n      (input)=\"onSearch($any($event.target).value)\"\n      aria-label=\"Search table\"\n    />\n  </div>\n  <ng-container *ngIf=\"dataSource.toolbarTemplate\" [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr>\n        <!-- Selection checkbox column header -->\n        <th *ngIf=\"hasSelection\" class=\"w-10 text-center text-sm bg-gray-50 px-2 py-2\">\n          <label *ngIf=\"isMultiSelect\">\n            <input\n              type=\"checkbox\"\n              class=\"accent-brand-500\"\n              [checked]=\"allSelected\"\n              (change)=\"toggleAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </label>\n        </th>\n\n        <!-- Data columns -->\n        <th\n          *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\"\n          class=\"text-sm px-4 py-2\"\n          [class.cursor-pointer]=\"isSortable(column)\"\n          [class.select-none]=\"isSortable(column)\"\n          [class.hover:bg-gray-100]=\"isSortable(column)\"\n          [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n          [class.text-center]=\"column.align === 'center'\"\n          [class.text-right]=\"column.align === 'right'\"\n          [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n          [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n          [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n          [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n          [style.width]=\"column.width ?? null\"\n          [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n          (click)=\"sort(column)\"\n        >\n          <span class=\"inline-flex items-center gap-1\">\n            <ng-container *ngIf=\"isTemplateRef(column.header); else stringHeader\">\n              <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n            </ng-container>\n            <ng-template #stringHeader>\n              <span>{{ column.header }}</span>\n            </ng-template>\n            <span *ngIf=\"isSortable(column)\" class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n          </span>\n        </th>\n\n        <!-- Actions column header -->\n        <th *ngIf=\"hasRowActions\" class=\"text-sm px-4 py-2 text-right\">Actions</th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      <ng-container *ngIf=\"dataSource.isDataLoading; else content\">\n        <tr *ngFor=\"let _ of skeletonRows\" class=\"animate-pulse\">\n          <td *ngIf=\"hasSelection\" class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-gray-200\"></div></td>\n          <td *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\" class=\"px-4 py-3\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n          >\n            <div class=\"h-4 w-3/4 rounded bg-gray-200\"></div>\n          </td>\n          <td *ngIf=\"hasRowActions\" class=\"px-4 py-3\"><div class=\"h-4 w-16 rounded bg-gray-200\"></div></td>\n        </tr>\n      </ng-container>\n\n      <!-- Content -->\n      <ng-template #content>\n        <!-- Empty state -->\n        <tr *ngIf=\"filteredItems.length === 0\">\n          <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n            <ng-container *ngIf=\"dataSource.emptyTemplate; else defaultEmpty\">\n              <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #defaultEmpty>\n              <div class=\"flex flex-col items-center gap-2 text-gray-400\">\n                <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n              </div>\n            </ng-template>\n          </td>\n        </tr>\n\n        <!-- Data rows -->\n        <tr\n          *ngFor=\"let row of filteredItems; trackBy: trackByID; let odd = odd; let last = last\"\n          class=\"bg-white transition-colors duration-150\"\n          [class.bg-brand-50]=\"isSelected(row)\"\n          [class.bg-gray-50]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n          [class.hover:bg-gray-100]=\"dataSource.appearance?.hover !== false\"\n          [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n          [class.border-b]=\"!last\"\n          [class.border-gray-200]=\"!last\"\n          [class.border-b-1]=\"last\"\n          [class.border-black]=\"last\"\n          [class.shadow-3xl]=\"last\"\n          (click)=\"onRowClick(row)\"\n        >\n          <!-- Selection checkbox -->\n          <td *ngIf=\"hasSelection\" class=\"w-10 text-center px-2 py-2\">\n            <label>\n              <input\n                *ngIf=\"isMultiSelect; else radioTpl\"\n                type=\"checkbox\"\n                class=\"accent-brand-500\"\n                [checked]=\"isSelected(row)\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleRow(row)\"\n              />\n              <ng-template #radioTpl>\n                <input\n                  type=\"radio\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"isSelected(row)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleRow(row)\"\n                  name=\"mn-table-single-select\"\n                />\n              </ng-template>\n            </label>\n          </td>\n\n          <!-- Data cells -->\n          <td\n            *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\"\n            class=\"text-xs px-4 py-2\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            [style.width]=\"column.width ?? null\"\n          >\n            <ng-container *ngIf=\"isTemplateRef(column.cell); else stringCell\">\n              <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n            </ng-container>\n            <ng-template #stringCell>{{ getCellValue(column, row) }}</ng-template>\n          </td>\n\n          <!-- Row actions -->\n          <td *ngIf=\"hasRowActions\" class=\"text-right px-4 py-2\">\n            <div class=\"inline-flex items-center justify-end gap-2\">\n              <button\n                *ngFor=\"let action of getVisibleActions(row)\"\n                class=\"px-2 py-1 text-xs rounded hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n                [ngClass]=\"action.cssClass ?? ''\"\n                [disabled]=\"action.isDisabled ? action.isDisabled(row) : false\"\n                (click)=\"$event.stopPropagation(); action.onClick(row)\"\n                [attr.aria-label]=\"action.label\"\n              >\n                <span *ngIf=\"action.icon\" [innerHTML]=\"action.icon\"></span>\n                <span *ngIf=\"action.label\">{{ action.label }}</span>\n              </button>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n<div *ngIf=\"showLoadMore\" class=\"flex justify-center py-4\">\n  <button\n    class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n    (click)=\"loadMoreRows()\"\n    [disabled]=\"loadingMoreRows\"\n  >\n    <span *ngIf=\"loadingMoreRows\" class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n    Load more\n  </button>\n</div>\n" }]
+        }], propDecorators: { dataSource: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], rowClick: [{
+                type: Output
+            }] } });
+
+class MnFormBodyComponent {
+    fb;
+    config;
+    modalRef;
+    hideFooter = false;
+    form;
+    rows = [];
+    fieldGroups = [];
+    isSubmitting = false;
+    FieldKind = FieldKind;
+    ModalCloseReason = ModalCloseReason;
+    /** Cross-field validation errors: { fieldKey: errorMessage } */
+    formErrors = {};
+    /** Track which fields are currently visible (for conditional fields) */
+    fieldVisibility = {};
+    /** Track loading state per field for async data sources */
+    fieldLoading = {};
+    /** Dynamic options loaded from data sources */
+    fieldOptions = {};
+    valueChangesSubscription;
+    constructor(fb) {
+        this.fb = fb;
+    }
+    asField(field) {
+        return field;
+    }
+    asKey(key) {
+        return key;
+    }
+    asAny(val) {
+        return val;
+    }
+    hasRequiredValidator(field) {
+        const validators = field.validators;
+        if (!validators)
+            return false;
+        // Check if Validators.required is in the array by testing a dummy control
+        const control = this.fb.control(null, validators);
+        const errors = control.errors;
+        return errors != null && 'required' in errors;
+    }
+    /** Store table data sources keyed by field key for template access */
+    tableDataSources = {};
+    /** Resolved i18n labels with defaults */
+    get labels() {
+        const i = this.config;
+        const i18n = i.i18n || {};
+        return {
+            submit: i18n.submit || 'Submit',
+            cancel: i18n.cancel || 'Cancel',
+            submitting: i18n.submitting || 'Submitting...',
+            selectPlaceholder: i18n.selectPlaceholder || 'Select...',
+            loading: i18n.loading || 'Loading...',
+            fileUploadPrompt: i18n.fileUploadPrompt || 'Click or drag files here',
+        };
+    }
+    ngOnInit() {
+        this.initializeForm();
+        this.buildRows();
+        this.initializeVisibility();
+        this.initializeDataSources();
+        this.initializeTableFields();
+        this.subscribeToValueChanges();
+    }
+    ngOnDestroy() {
+        this.valueChangesSubscription?.unsubscribe();
+    }
+    initializeForm() {
+        const formControls = {};
+        this.config.fields.forEach(field => {
+            const fieldConfig = field;
+            let initialValue = this.config.initialValue?.[field.key] ?? null;
+            // Handle checkbox default values
+            if (field.kind === FieldKind.CHECKBOX && initialValue === null) {
+                initialValue = (fieldConfig.defaultValue ?? false);
+            }
+            const validators = fieldConfig.validators || [];
+            const asyncValidators = fieldConfig.asyncValidators || [];
+            formControls[field.key] = [initialValue, validators, asyncValidators];
+        });
+        this.form = this.fb.group(formControls);
+        // Apply Angular FormGroup-level validators
+        if (this.config.groupValidators && this.config.groupValidators.length > 0) {
+            this.form.setValidators(this.config.groupValidators);
+            this.form.updateValueAndValidity();
+        }
+        // Apply disabled/readOnly state to controls
+        this.config.fields.forEach(field => {
+            const fieldAny = field;
+            const control = this.form.get(field.key);
+            if (control && (fieldAny.disabled || fieldAny.readOnly)) {
+                control.disable();
+            }
+        });
+    }
+    isFieldReadOnly(field) {
+        return field.readOnly === true;
+    }
+    isFieldDisabled(field) {
+        return field.disabled === true;
+    }
+    /** Track which field groups are currently visible */
+    groupVisibility = {};
+    buildRows() {
+        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 }],
+            }));
+        }
+        // Build field groups
+        this.fieldGroups = this.config.fieldGroups || [];
+        // Initialize group visibility
+        this.initializeGroupVisibility();
+    }
+    initializeGroupVisibility() {
+        this.fieldGroups.forEach((group, index) => {
+            const key = group.title || `group-${index}`;
+            const isVisible = group.visible ? group.visible(this.form.value) : true;
+            this.groupVisibility[key] = isVisible;
+            // If group is hidden, clear validators on its fields
+            if (!isVisible) {
+                group.fields.forEach(field => {
+                    const control = this.form.get(field.key);
+                    if (control) {
+                        control.clearValidators();
+                        control.updateValueAndValidity({ emitEvent: false });
+                    }
+                });
+            }
+        });
+    }
+    updateGroupVisibility() {
+        const formValue = this.form.value;
+        this.fieldGroups.forEach((group, index) => {
+            const key = group.title || `group-${index}`;
+            const wasVisible = this.groupVisibility[key];
+            const isVisible = group.visible ? group.visible(formValue) : true;
+            this.groupVisibility[key] = isVisible;
+            if (!isVisible && wasVisible) {
+                // Group became hidden — clear validators on its fields
+                group.fields.forEach(field => {
+                    const control = this.form.get(field.key);
+                    if (control) {
+                        control.clearValidators();
+                        control.updateValueAndValidity({ emitEvent: false });
+                    }
+                });
+            }
+            else if (isVisible && !wasVisible) {
+                // Group became visible — restore validators
+                group.fields.forEach(field => {
+                    const fieldAny = field;
+                    const validators = fieldAny.validators || [];
+                    const control = this.form.get(field.key);
+                    if (control) {
+                        control.setValidators(validators);
+                        control.updateValueAndValidity({ emitEvent: false });
+                    }
+                });
+            }
+        });
+    }
+    isGroupVisible(group) {
+        const key = group.title || `group-${this.fieldGroups.indexOf(group)}`;
+        return this.groupVisibility[key] !== false;
+    }
+    // =========================
+    // Feature 1: Conditional/Dynamic Fields
+    // =========================
+    initializeVisibility() {
+        this.config.fields.forEach(field => {
+            const key = field.key;
+            const fieldAny = field;
+            const isVisible = fieldAny.visible ? fieldAny.visible(this.form.value) : true;
+            this.fieldVisibility[key] = isVisible;
+            // If initially hidden, clear validators so they don't block submit
+            if (!isVisible) {
+                const control = this.form.get(key);
+                if (control) {
+                    control.clearValidators();
+                    control.updateValueAndValidity({ emitEvent: false });
+                }
+            }
+        });
+    }
+    updateVisibility() {
+        const formValue = this.form.value;
+        this.config.fields.forEach(field => {
+            const key = field.key;
+            const fieldAny = field;
+            const wasVisible = this.fieldVisibility[key];
+            const isVisible = fieldAny.visible ? fieldAny.visible(formValue) : true;
+            this.fieldVisibility[key] = isVisible;
+            // When a field becomes hidden, clear its validators so it doesn't block submit
+            const control = this.form.get(key);
+            if (control) {
+                if (!isVisible && wasVisible) {
+                    control.clearValidators();
+                    control.updateValueAndValidity({ emitEvent: false });
+                }
+                else if (isVisible && !wasVisible) {
+                    // Restore validators
+                    const validators = fieldAny.validators || [];
+                    control.setValidators(validators);
+                    control.updateValueAndValidity({ emitEvent: false });
+                }
+            }
+        });
+    }
+    isFieldVisible(field) {
+        return this.fieldVisibility[field.key] !== false;
+    }
+    // =========================
+    // Feature 2: Cross-Field Validation
+    // =========================
+    runFormValidators() {
+        this.formErrors = {};
+        if (!this.config.formValidators)
+            return;
+        const formValue = this.form.value;
+        for (const validator of this.config.formValidators) {
+            const errors = validator(formValue);
+            if (errors) {
+                Object.assign(this.formErrors, errors);
+            }
+        }
+    }
+    getFieldError(key) {
+        return this.formErrors[key] || null;
+    }
+    get hasFormErrors() {
+        return Object.keys(this.formErrors).length > 0;
+    }
+    // =========================
+    // Feature 3: Async Data Sources
+    // =========================
+    initializeDataSources() {
+        this.config.fields.forEach(field => {
+            const fieldAny = field;
+            if (fieldAny.dataSource) {
+                this.loadFieldOptions(field.key, fieldAny.dataSource, this.form.value);
+            }
+        });
+    }
+    async loadFieldOptions(key, dataSource, formValue) {
+        this.fieldLoading[key] = true;
+        try {
+            const options = await dataSource.load(formValue);
+            this.fieldOptions[key] = options;
+        }
+        catch (error) {
+            console.error(`Failed to load options for field '${key}':`, error);
+            this.fieldOptions[key] = [];
+        }
+        finally {
+            this.fieldLoading[key] = false;
+        }
+    }
+    /** Get options for a field — uses dataSource options if available, otherwise static options */
+    getFieldOptions(field) {
+        const key = field.key;
+        if (this.fieldOptions[key] !== undefined) {
+            return this.fieldOptions[key];
+        }
+        return field.options || [];
+    }
+    isFieldLoading(key) {
+        return this.fieldLoading[key] === true;
+    }
+    // =========================
+    // Feature: Multi-Select Table Fields
+    // =========================
+    initializeTableFields() {
+        this.config.fields.forEach(field => {
+            if (field.kind === FieldKind.MULTI_SELECT_TABLE) {
+                const tableField = field;
+                const ds = tableField.tableDataSource;
+                // Force multi selection mode
+                ds.selectionMode = 'multi';
+                this.tableDataSources[field.key] = ds;
+                // Initialize form control with empty array if null
+                const control = this.form.get(field.key);
+                if (control && control.value === null) {
+                    control.setValue([], { emitEvent: false });
+                }
+            }
+            else if (field.kind === FieldKind.SINGLE_SELECT_TABLE) {
+                const tableField = field;
+                const ds = tableField.tableDataSource;
+                // Force single selection mode
+                ds.selectionMode = 'single';
+                this.tableDataSources[field.key] = ds;
+            }
+        });
+    }
+    onTableSelectionChange(field, selectedRows) {
+        if (field.kind === FieldKind.SINGLE_SELECT_TABLE) {
+            const tableField = field;
+            const getVal = tableField.getRowValue || tableField.tableDataSource.getID;
+            const value = selectedRows.length > 0 ? getVal(selectedRows[0]) : null;
+            const control = this.form.get(field.key);
+            if (control) {
+                control.setValue(value);
+                control.markAsTouched();
+            }
+        }
+        else {
+            const tableField = field;
+            const getVal = tableField.getRowValue || tableField.tableDataSource.getID;
+            const values = selectedRows.map(row => getVal(row));
+            const control = this.form.get(field.key);
+            if (control) {
+                control.setValue(values);
+                control.markAsTouched();
+            }
+        }
+    }
+    // =========================
+    // Feature: Rating Fields
+    // =========================
+    getRatingRange(field) {
+        const max = field.max || 5;
+        return Array.from({ length: max }, (_, i) => i + 1);
+    }
+    setRating(field, value) {
+        const control = this.form.get(field.key);
+        if (control) {
+            control.setValue(value);
+            control.markAsTouched();
+        }
+    }
+    getRatingValue(field) {
+        return this.form.get(field.key)?.value || 0;
+    }
+    // =========================
+    // Feature: Slider Fields
+    // =========================
+    onSliderChange(field, event) {
+        const input = event.target;
+        const value = parseFloat(input.value);
+        const control = this.form.get(field.key);
+        if (control) {
+            control.setValue(value);
+            control.markAsTouched();
+        }
+    }
+    getSliderValue(field) {
+        const f = field;
+        return this.form.get(field.key)?.value ?? f.min ?? 0;
+    }
+    // =========================
+    // Feature: Color Fields
+    // =========================
+    onColorChange(field, event) {
+        const input = event.target;
+        const control = this.form.get(field.key);
+        if (control) {
+            control.setValue(input.value);
+            control.markAsTouched();
+        }
+    }
+    setColorFromSwatch(field, color) {
+        const control = this.form.get(field.key);
+        if (control) {
+            control.setValue(color);
+            control.markAsTouched();
+        }
+    }
+    getColorValue(field) {
+        return this.form.get(field.key)?.value || '#000000';
+    }
+    // =========================
+    // Value Changes Subscription
+    // =========================
+    subscribeToValueChanges() {
+        // Initialize previousFormValue with current form state to avoid false "changed" on first emission
+        this.previousFormValue = { ...this.form.value };
+        this.valueChangesSubscription = this.form.valueChanges.subscribe(formValue => {
+            // Update conditional visibility
+            this.updateVisibility();
+            // Update group visibility
+            this.updateGroupVisibility();
+            // Run cross-field validators
+            this.runFormValidators();
+            // Reload data sources that depend on changed fields
+            this.reloadDependentDataSources(formValue);
+        });
+    }
+    previousFormValue = {};
+    reloadDependentDataSources(formValue) {
+        this.config.fields.forEach(field => {
+            const fieldAny = field;
+            const dataSource = fieldAny.dataSource;
+            if (!dataSource?.dependsOn)
+                return;
+            // Check if any dependency changed
+            const changed = dataSource.dependsOn.some((depKey) => {
+                return formValue[depKey] !== this.previousFormValue[depKey];
+            });
+            if (changed) {
+                this.loadFieldOptions(field.key, dataSource, formValue);
+            }
+        });
+        this.previousFormValue = { ...formValue };
+    }
+    getGridColumns(row) {
+        const cols = row.columns || 1;
+        return `repeat(${cols}, 1fr)`;
+    }
+    getGridSpan(rowField) {
+        const span = rowField.span || 1;
+        return span > 1 ? `span ${span}` : '';
+    }
+    // =========================
+    // Feature: File Upload Fields
+    // =========================
+    /** Store selected files keyed by field key */
+    fileSelections = {};
+    onFileChange(field, event) {
+        const input = event.target;
+        const fileField = field;
+        const files = Array.from(input.files || []);
+        const key = field.key;
+        // Validate file size
+        if (fileField.maxSize) {
+            const oversized = files.filter(f => f.size > fileField.maxSize);
+            if (oversized.length > 0) {
+                // Remove oversized files
+                const valid = files.filter(f => f.size <= fileField.maxSize);
+                this.fileSelections[key] = fileField.multiple
+                    ? [...(this.fileSelections[key] || []), ...valid]
+                    : valid.slice(0, 1);
+            }
+            else {
+                this.fileSelections[key] = fileField.multiple
+                    ? [...(this.fileSelections[key] || []), ...files]
+                    : files.slice(0, 1);
+            }
+        }
+        else {
+            this.fileSelections[key] = fileField.multiple
+                ? [...(this.fileSelections[key] || []), ...files]
+                : files.slice(0, 1);
+        }
+        // Enforce maxFiles
+        if (fileField.maxFiles && this.fileSelections[key].length > fileField.maxFiles) {
+            this.fileSelections[key] = this.fileSelections[key].slice(0, fileField.maxFiles);
+        }
+        const control = this.form.get(key);
+        if (control) {
+            control.setValue(this.fileSelections[key]);
+            control.markAsTouched();
+        }
+        // Reset input so same file can be re-selected
+        input.value = '';
+    }
+    removeFile(key, index) {
+        this.fileSelections[key] = (this.fileSelections[key] || []).filter((_, i) => i !== index);
+        const control = this.form.get(key);
+        if (control) {
+            control.setValue(this.fileSelections[key].length > 0 ? this.fileSelections[key] : null);
+        }
+    }
+    getSelectedFiles(key) {
+        return this.fileSelections[key] || [];
+    }
+    formatFileSize(bytes) {
+        if (bytes < 1024)
+            return bytes + ' B';
+        if (bytes < 1024 * 1024)
+            return (bytes / 1024).toFixed(1) + ' KB';
+        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+    }
+    getFileError(field) {
+        const control = this.form.get(field.key);
+        if (!control?.errors)
+            return 'This field is required';
+        if (control.errors['required'])
+            return 'Please select a file';
+        return 'Invalid file';
+    }
+    async submit() {
+        // Run cross-field validators before submit
+        this.runFormValidators();
+        if (this.form.invalid || this.isSubmitting || this.hasFormErrors) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        if (this.config.submitMode === SubmitMode.ONCE) {
+            this.isSubmitting = true;
+        }
+        const formValue = this.form.value;
+        try {
+            if (this.config.onComplete) {
+                await this.config.onComplete.handle(formValue);
+            }
+            this.modalRef.close(formValue);
+        }
+        catch (error) {
+            // Always allow retry on error, regardless of submit mode
+            this.isSubmitting = false;
+            console.error('Form submission error:', error);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFormBodyComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "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"] }] });
+}
+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"] }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { config: [{
+                type: Input
+            }], modalRef: [{
+                type: Input
+            }], hideFooter: [{
+                type: Input
+            }] } });
+
+class MnWizardBodyComponent {
+    cdr;
+    config;
+    modalRef;
+    formBodies;
+    currentStepId;
+    visitedStepIds = [];
+    isCurrentStepValid = true;
+    isCompleting = false;
+    wizardErrors = {};
+    /** Resolved i18n labels with defaults */
+    get labels() {
+        const i18n = this.config.i18n || {};
+        return {
+            next: i18n.next || 'Next',
+            back: i18n.back || 'Back',
+            close: i18n.close || 'Close',
+            complete: i18n.complete || 'Complete',
+            completing: i18n.completing || 'Completing...',
+        };
+    }
+    /** Pre-built form configs keyed by step id — only for steps that have fields */
+    stepFormConfigs = {};
+    statusSubscription;
+    formBodiesSubscription;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        // Pre-build form configs for all form-driven steps
+        for (const step of this.config.steps) {
+            if (step.fields && step.fields.length > 0) {
+                this.stepFormConfigs[step.id] = {
+                    kind: ModalKind.FORM,
+                    fields: step.fields,
+                    rows: step.rows,
+                    fieldGroups: step.fieldGroups,
+                    formValidators: step.formValidators,
+                    groupValidators: step.groupValidators,
+                    initialValue: step.initialValue,
+                };
+            }
+        }
+        this.currentStepId = this.config.startStepId || this.config.steps[0]?.id;
+        if (this.currentStepId) {
+            this.visitedStepIds.push(this.currentStepId);
+        }
+    }
+    ngAfterViewInit() {
+        // Subscribe to form bodies list changes to track validity
+        this.formBodiesSubscription = this.formBodies.changes.subscribe(() => {
+            this.trackCurrentStepValidity();
+        });
+        // Initial validity check
+        this.trackCurrentStepValidity();
+    }
+    ngOnDestroy() {
+        this.statusSubscription?.unsubscribe();
+        this.formBodiesSubscription?.unsubscribe();
+    }
+    asAny(val) {
+        return val;
+    }
+    isTextBody(step) {
+        return typeof step.body === 'string' || typeof step.body === 'number';
+    }
+    /** Get visible steps (filtered by visibility condition) */
+    get visibleSteps() {
+        return this.config.steps.filter(s => this.isStepVisible(s));
+    }
+    isStepVisible(step) {
+        if (!step.visible)
+            return true;
+        return step.visible(this.getAggregatedData());
+    }
+    get currentStep() {
+        return this.config.steps.find(s => s.id === this.currentStepId);
+    }
+    get currentVisibleIndex() {
+        return this.visibleSteps.findIndex(s => s.id === this.currentStepId);
+    }
+    get currentStepIndex() {
+        return this.config.steps.findIndex(s => s.id === this.currentStepId);
+    }
+    get canGoBack() {
+        return this.currentVisibleIndex > 0;
+    }
+    get canGoNext() {
+        return this.currentVisibleIndex < this.visibleSteps.length - 1;
+    }
+    get isLastStep() {
+        return this.currentVisibleIndex === this.visibleSteps.length - 1;
+    }
+    get isFreeFlow() {
+        return this.config.flow === WizardFlowMode.FREE;
+    }
+    canNavigateToStep(step) {
+        if (!this.isFreeFlow)
+            return false;
+        return this.isStepVisible(step);
+    }
+    async goToStep(step) {
+        if (!this.canNavigateToStep(step))
+            return;
+        if (step.id === this.currentStepId)
+            return;
+        const previousStepId = this.currentStepId;
+        this.currentStepId = step.id;
+        if (!this.visitedStepIds.includes(this.currentStepId)) {
+            this.visitedStepIds.push(this.currentStepId);
+        }
+        await this.notifyStepChange(previousStepId, NavigationDirection.DIRECT);
+        this.trackCurrentStepValidity();
+    }
+    /** Find the MnFormBodyComponent for the current step */
+    getCurrentFormBody() {
+        if (!this.formBodies)
+            return undefined;
+        const stepIndex = this.currentStepIndex;
+        // formBodies only contains entries for steps that have stepFormConfigs
+        // We need to find which form body index corresponds to the current step
+        const formStepIds = this.config.steps
+            .filter(s => this.stepFormConfigs[s.id])
+            .map(s => s.id);
+        const formIndex = formStepIds.indexOf(this.currentStepId);
+        if (formIndex === -1)
+            return undefined;
+        return this.formBodies.toArray()[formIndex];
+    }
+    trackCurrentStepValidity() {
+        // Unsubscribe from previous
+        this.statusSubscription?.unsubscribe();
+        this.statusSubscription = undefined;
+        const formBody = this.getCurrentFormBody();
+        if (formBody && formBody.form) {
+            this.isCurrentStepValid = formBody.form.valid;
+            this.statusSubscription = formBody.form.statusChanges.subscribe(() => {
+                this.isCurrentStepValid = formBody.form.valid;
+                this.cdr.detectChanges();
+            });
+        }
+        else {
+            this.isCurrentStepValid = true;
+        }
+        this.cdr.detectChanges();
+    }
+    async next() {
+        if (!this.canGoNext)
+            return;
+        const currentStep = this.currentStep;
+        // Validate embedded form if present
+        const formBody = this.getCurrentFormBody();
+        if (formBody && formBody.form.invalid) {
+            formBody.form.markAllAsTouched();
+            return;
+        }
+        if (currentStep?.guard?.canExit) {
+            const canExit = await currentStep.guard.canExit();
+            if (!canExit)
+                return;
+        }
+        if (currentStep?.validators) {
+            for (const validator of currentStep.validators) {
+                const result = await validator.validate();
+                if (result.status === 'invalid')
+                    return;
+            }
+        }
+        // Find next visible step
+        const nextStep = this.visibleSteps[this.currentVisibleIndex + 1];
+        if (!nextStep)
+            return;
+        if (nextStep.guard?.canEnter) {
+            const canEnter = await nextStep.guard.canEnter();
+            if (!canEnter)
+                return;
+        }
+        const previousStepId = this.currentStepId;
+        this.currentStepId = nextStep.id;
+        if (!this.visitedStepIds.includes(this.currentStepId)) {
+            this.visitedStepIds.push(this.currentStepId);
+        }
+        await this.notifyStepChange(previousStepId, NavigationDirection.FORWARD);
+        this.trackCurrentStepValidity();
+    }
+    async back() {
+        if (!this.canGoBack) {
+            // Call onCancel handler if configured
+            if (this.config.onCancel) {
+                await this.config.onCancel(ModalCloseReason.CANCELLED);
+            }
+            this.modalRef.dismiss(ModalCloseReason.CANCELLED);
+            return;
+        }
+        const prevStep = this.visibleSteps[this.currentVisibleIndex - 1];
+        const previousStepId = this.currentStepId;
+        this.currentStepId = prevStep.id;
+        await this.notifyStepChange(previousStepId, NavigationDirection.BACKWARD);
+        this.trackCurrentStepValidity();
+    }
+    async complete() {
+        if (this.isCompleting)
+            return;
+        const currentStep = this.currentStep;
+        // Validate embedded form if present
+        const formBody = this.getCurrentFormBody();
+        if (formBody && formBody.form.invalid) {
+            formBody.form.markAllAsTouched();
+            return;
+        }
+        if (currentStep?.validators) {
+            for (const validator of currentStep.validators) {
+                const result = await validator.validate();
+                if (result.status === 'invalid')
+                    return;
+            }
+        }
+        this.isCompleting = true;
+        this.wizardErrors = {};
+        this.cdr.detectChanges();
+        try {
+            const aggregatedData = this.getAggregatedData();
+            // Run cross-step validators (onBeforeComplete)
+            if (this.config.onBeforeComplete) {
+                for (const validator of this.config.onBeforeComplete) {
+                    const errors = await validator(aggregatedData);
+                    if (errors) {
+                        this.wizardErrors = { ...this.wizardErrors, ...errors };
+                    }
+                }
+                if (Object.keys(this.wizardErrors).length > 0) {
+                    this.isCompleting = false;
+                    this.cdr.detectChanges();
+                    return;
+                }
+            }
+            const result = {
+                status: ModalCloseReason.COMPLETED,
+                visitedStepIds: this.visitedStepIds,
+                payload: aggregatedData,
+            };
+            if (this.config.onComplete) {
+                await this.config.onComplete.handle(result);
+            }
+            this.modalRef.close(result);
+        }
+        catch (error) {
+            this.isCompleting = false;
+            this.cdr.detectChanges();
+            console.error('Wizard completion error:', error);
+        }
+    }
+    /** Collect form data from all form-driven steps, namespaced by step ID */
+    getAggregatedData() {
+        const aggregated = {};
+        if (!this.formBodies)
+            return aggregated;
+        const formStepIds = this.config.steps
+            .filter(s => this.stepFormConfigs[s.id])
+            .map(s => s.id);
+        this.formBodies.toArray().forEach((fb, index) => {
+            if (fb.form && formStepIds[index]) {
+                aggregated[formStepIds[index]] = { ...fb.form.value };
+            }
+        });
+        return aggregated;
+    }
+    async notifyStepChange(previousStepId, direction) {
+        if (this.config.onStepChange) {
+            await this.config.onStepChange.handle({
+                previousStepId,
+                currentStepId: this.currentStepId,
+                direction,
+            });
+        }
+    }
+    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" }] });
+}
+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" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
+                type: Input
+            }], modalRef: [{
+                type: Input
+            }], formBodies: [{
+                type: ViewChildren,
+                args: [MnFormBodyComponent]
+            }] } });
+
+class MnConfirmationBodyComponent {
+    config;
+    modalRef;
+    async confirm() {
+        const result = true;
+        if (this.config.confirm?.handler) {
+            await this.config.confirm.handler.handle(result);
+        }
+        this.modalRef.close(result);
+    }
+    cancel() {
+        const reason = this.config.cancel?.reason || ModalCloseReason.CANCELLED;
+        this.modalRef.dismiss(reason);
+    }
+    get confirmLabel() {
+        return this.config.confirm?.label || 'Confirm';
+    }
+    get cancelLabel() {
+        return this.config.cancel?.label || 'Cancel';
+    }
+    get confirmStyle() {
+        return this.config.confirm?.style || ActionStyle.PRIMARY;
+    }
+    get cancelStyle() {
+        return this.config.cancel?.style || ActionStyle.SECONDARY;
+    }
+    get toneClass() {
+        switch (this.config.tone) {
+            case ConfirmationTone.WARNING:
+                return 'tone-warning';
+            case ConfirmationTone.DANGER:
+                return 'tone-danger';
+            default:
+                return 'tone-default';
+        }
+    }
+    getButtonColor(style) {
+        switch (style) {
+            case ActionStyle.PRIMARY:
+                return 'primary';
+            case ActionStyle.DANGER:
+                return 'danger';
+            case ActionStyle.GHOST:
+                return 'secondary';
+            default:
+                return 'secondary';
+        }
+    }
+    getButtonVariant(style) {
+        switch (style) {
+            case ActionStyle.PRIMARY:
+            case ActionStyle.DANGER:
+                return 'fill';
+            case ActionStyle.GHOST:
+                return 'text';
+            default:
+                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);
+        }
+    }
+    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 MnModalShellComponent {
+    el;
+    config;
+    modalRef;
+    isClosing = false;
+    ModalKind = ModalKind;
+    previouslyFocusedElement = null;
+    focusTrapListener = null;
+    pollingTimer = null;
+    pollAttempts = 0;
+    constructor(el) {
+        this.el = el;
+    }
+    ngOnInit() {
+        this.startPollingIfConfigured();
+    }
+    ngAfterViewInit() {
+        this.previouslyFocusedElement = document.activeElement;
+        this.setupFocusTrap();
+        // Focus the modal container
+        const container = this.el.nativeElement.querySelector('.modal-container');
+        if (container) {
+            container.focus();
+        }
+    }
+    ngOnDestroy() {
+        this.removeFocusTrap();
+        this.stopPolling();
+        // Restore focus to previously focused element
+        if (this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus === 'function') {
+            this.previouslyFocusedElement.focus();
+        }
+    }
+    setupFocusTrap() {
+        this.focusTrapListener = (e) => {
+            if (e.key !== 'Tab')
+                return;
+            const focusable = this.el.nativeElement.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');
+            if (focusable.length === 0)
+                return;
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            if (e.shiftKey) {
+                if (document.activeElement === first) {
+                    e.preventDefault();
+                    last.focus();
+                }
+            }
+            else {
+                if (document.activeElement === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            }
+        };
+        this.el.nativeElement.addEventListener('keydown', this.focusTrapListener);
+    }
+    removeFocusTrap() {
+        if (this.focusTrapListener) {
+            this.el.nativeElement.removeEventListener('keydown', this.focusTrapListener);
+            this.focusTrapListener = null;
+        }
+    }
+    asWizard(config) {
+        return config;
+    }
+    asForm(config) {
+        return config;
+    }
+    asConfirmation(config) {
+        return config;
+    }
+    asCustom(config) {
+        return config;
+    }
+    asAny(val) {
+        return val;
+    }
+    get hostClasses() {
+        const size = this.config.size || ModalSize.MD;
+        const closing = this.isClosing ? ' closing' : '';
+        return `modal-shell modal-${size}${closing}`;
+    }
+    startClosing() {
+        this.isClosing = true;
+        return new Promise(resolve => setTimeout(resolve, 150));
+    }
+    onEscapeKey(event) {
+        if (this.config.keyboard === KeyboardMode.ENABLED) {
+            this.handleClose(ModalCloseReason.ESCAPE);
+            if (event && event.preventDefault) {
+                event.preventDefault();
+            }
+        }
+    }
+    onBackdropClick() {
+        if (this.config.backdrop === BackdropMode.CLOSABLE) {
+            this.handleClose(ModalCloseReason.BACKDROP);
+        }
+    }
+    onCloseButtonClick() {
+        this.handleClose(ModalCloseReason.DISMISSED);
+    }
+    async handleClose(reason) {
+        if (this.config.closeMode === CloseMode.DISABLED) {
+            return;
+        }
+        if (this.config.closeMode === CloseMode.GUARDED) {
+            if (this.config.closeGuard) {
+                const allowed = await this.config.closeGuard();
+                if (!allowed)
+                    return;
+            }
+        }
+        this.modalRef.dismiss(reason);
+    }
+    get showBackdrop() {
+        return this.config.backdrop !== BackdropMode.HIDE;
+    }
+    get containerSizeClass() {
+        switch (this.config.size || ModalSize.MD) {
+            case ModalSize.SM: return 'w-96';
+            case ModalSize.MD: return 'w-[32rem]';
+            case ModalSize.LG: return 'w-[48rem]';
+            case ModalSize.XL: return 'w-[64rem]';
+            case ModalSize.FULL: return 'w-[95vw] h-[95vh] max-h-[95vh]';
+            default: return 'w-[32rem]';
+        }
+    }
+    get showCloseButton() {
+        return this.config.closeMode !== CloseMode.DISABLED;
+    }
+    // =========================
+    // Footer Actions
+    // =========================
+    get hasCustomFooterActions() {
+        return !!this.config.footerActions && this.config.footerActions.length > 0;
+    }
+    get leftFooterActions() {
+        return (this.config.footerActions || []).filter(a => a.position === 'left');
+    }
+    get rightFooterActions() {
+        return (this.config.footerActions || []).filter(a => a.position !== 'left');
+    }
+    async onFooterAction(action) {
+        if (action.disabled)
+            return;
+        if (action.handler) {
+            await action.handler(this.modalRef);
+        }
+        if (action.closesModal) {
+            if (action.closeReason === ModalCloseReason.COMPLETED) {
+                this.modalRef.close();
+            }
+            else {
+                this.modalRef.dismiss(action.closeReason || ModalCloseReason.DISMISSED);
+            }
+        }
+    }
+    getActionButtonColor(style) {
+        switch (style) {
+            case ActionStyle.PRIMARY: return 'primary';
+            case ActionStyle.DANGER: return 'danger';
+            case ActionStyle.GHOST: return 'secondary';
+            default: return 'secondary';
+        }
+    }
+    getActionButtonVariant(style) {
+        switch (style) {
+            case ActionStyle.PRIMARY:
+            case ActionStyle.DANGER: return 'fill';
+            case ActionStyle.GHOST: return 'text';
+            default: return 'outline';
+        }
+    }
+    // =========================
+    // Polling
+    // =========================
+    startPollingIfConfigured() {
+        const polling = this.config.polling;
+        if (!polling)
+            return;
+        if (polling.autoStart === false)
+            return;
+        this.startPolling();
+    }
+    startPolling() {
+        const polling = this.config.polling;
+        if (!polling)
+            return;
+        this.pollingTimer = setInterval(async () => {
+            this.pollAttempts++;
+            try {
+                const shouldStop = await polling.onPoll(this.modalRef);
+                if (shouldStop === true) {
+                    this.stopPolling();
+                }
+            }
+            catch (e) {
+                console.error('Polling error:', e);
+            }
+            if (polling.maxAttempts && this.pollAttempts >= polling.maxAttempts) {
+                this.stopPolling();
+            }
+        }, polling.interval);
+    }
+    stopPolling() {
+        if (this.pollingTimer) {
+            clearInterval(this.pollingTimer);
+            this.pollingTimer = null;
+        }
+    }
+    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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-modal-shell', standalone: true, imports: [
+                        CommonModule,
+                        MnWizardBodyComponent,
+                        MnFormBodyComponent,
+                        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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { config: [{
+                type: Input
+            }], modalRef: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], onEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
+
+class MnModalService {
+    appRef = inject(ApplicationRef);
+    injector = inject(EnvironmentInjector);
+    open(config) {
+        // Create the modal shell component
+        const componentRef = createComponent(MnModalShellComponent, {
+            environmentInjector: this.injector,
+        });
+        // Set the config on the component
+        componentRef.instance.config = config;
+        // Create modal ref
+        const modalRef = new MnModalRef(componentRef, config);
+        componentRef.instance.modalRef = modalRef;
+        // Attach to application
+        this.appRef.attachView(componentRef.hostView);
+        const domElem = componentRef.location.nativeElement;
+        document.body.appendChild(domElem);
+        // Clean up on close
+        modalRef.afterClosed$.subscribe(() => {
+            this.appRef.detachView(componentRef.hostView);
+            domElem.remove();
+        });
+        return modalRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// Types
+
+class MnSectionDirective {
+    /** Section name contributed by this DOM node to the section path */
+    mnSection;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnSectionDirective, isStandalone: true, selector: "[mn-section]", inputs: { mnSection: ["mn-section", "mnSection"] }, providers: [
+            {
+                provide: MN_SECTION_PATH,
+                // Read parent MN_SECTION_PATH from ancestor injector (skipSelf to avoid self-reference),
+                // and read the attribute value using Attribute so it's available at provider creation time.
+                deps: [[new Optional(), new SkipSelf(), MN_SECTION_PATH], new Attribute('mn-section')],
+                useFactory: (parentPath, attr) => {
+                    const parent = Array.isArray(parentPath) ? parentPath : [];
+                    const name = (attr ?? '').trim();
+                    return name ? [...parent, name] : [...parent];
+                },
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnSectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mn-section]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: MN_SECTION_PATH,
+                            // Read parent MN_SECTION_PATH from ancestor injector (skipSelf to avoid self-reference),
+                            // and read the attribute value using Attribute so it's available at provider creation time.
+                            deps: [[new Optional(), new SkipSelf(), MN_SECTION_PATH], new Attribute('mn-section')],
+                            useFactory: (parentPath, attr) => {
+                                const parent = Array.isArray(parentPath) ? parentPath : [];
+                                const name = (attr ?? '').trim();
+                                return name ? [...parent, name] : [...parent];
+                            },
+                        },
+                    ],
+                }]
+        }], propDecorators: { mnSection: [{
+                type: Input,
+                args: ['mn-section']
+            }] } });
+
+class MnInstanceDirective {
+    /** Instance id for targeting per-component instance overrides */
+    mnInstance;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInstanceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnInstanceDirective, isStandalone: true, selector: "[mn-instance]", inputs: { mnInstance: ["mn-instance", "mnInstance"] }, providers: [
+            {
+                provide: MN_INSTANCE_ID,
+                // Read the attribute at provider creation time using Attribute token; Inputs may not be set yet.
+                deps: [new Attribute('mn-instance')],
+                useFactory: (attr) => (attr ?? '').trim() || null,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInstanceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mn-instance]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: MN_INSTANCE_ID,
+                            // Read the attribute at provider creation time using Attribute token; Inputs may not be set yet.
+                            deps: [new Attribute('mn-instance')],
+                            useFactory: (attr) => (attr ?? '').trim() || null,
+                        },
+                    ],
+                }]
+        }], propDecorators: { mnInstance: [{
+                type: Input,
+                args: ['mn-instance']
+            }] } });
+
+/**
+ * Provides an APP_INITIALIZER that configures the MnLanguageService and
+ * preloads the requested locales during application bootstrap.
+ *
+ * Usage in app.config.ts:
+ *   ...provideMnLanguage({
+ *     urlPattern: 'assets/i18n/{locale}.json',
+ *     defaultLocale: 'en',
+ *     preload: ['en', 'nl'],
+ *   })
+ */
+function provideMnLanguage(config) {
+    return [
+        {
+            provide: APP_INITIALIZER,
+            multi: true,
+            useFactory: (svc) => async () => {
+                svc.configure(config.urlPattern);
+                const localesToLoad = config.preload ?? [config.defaultLocale];
+                await Promise.all(localesToLoad.map(l => svc.loadLocale(l)));
+                await svc.setLocale(config.defaultLocale);
+            },
+            deps: [MnLanguageService],
+        },
+    ];
+}
+
+/**
+ * Pipe that translates a key via MnLanguageService.
+ *
+ * Usage in templates:
+ *   {{ 'form.email.label' | mnTranslate }}
+ *   {{ 'greeting' | mnTranslate:{ name: 'World' } }}
+ *
+ * Note: This pipe is impure so it re-evaluates when the locale changes.
+ */
+class MnTranslatePipe {
+    lang;
+    constructor(lang) {
+        this.lang = lang;
+    }
+    transform(key, params) {
+        return this.lang.translate(key, params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, deps: [{ token: MnLanguageService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, isStandalone: true, name: "mnTranslate", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'mnTranslate',
+                    standalone: true,
+                    pure: false,
+                }]
+        }], ctorParameters: () => [{ type: MnLanguageService }] });
+
 /*
  * Public API Surface of mn-lib
  */
@@ -1473,5 +4356,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_MN_ALERT_CONFIG, MN_ALERT_CONFIG, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_SECTION_PATH, MN_TEST_COMPONENT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnButton, MnConfigService, MnDualHorizontalImage, MnInformationCard, MnInputField, MnInstanceDirective, MnSectionDirective, MnTestComponent, MnTextarea, Test, dateTimeAdapter, defaultTextAdapter, mnAlertVariants, mnButtonVariants, mnInformationCardVariants, mnInputFieldVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnComponentConfig, provideMnConfig };
+export { ActionStyle, BackdropMode, BaseModalBuilder, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, 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 };
 //# sourceMappingURL=mn-angular-lib.mjs.map