mn-angular-lib 1.0.89 → 1.0.90

package/fesm2022/mn-angular-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, HostBinding, Input, Component, ChangeDetectionStrategy, ApplicationRef, APP_INITIALIZER, Pipe, signal, DestroyRef, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, Output, HostListener, ViewChild, ViewContainerRef, forwardRef, Renderer2, ChangeDetectorRef, afterEveryRender, TemplateRef, ViewChildren, EnvironmentInjector, createComponent, isSignal } from '@angular/core';
+import { InjectionToken, Injectable, inject, HostBinding, Input, Component, ChangeDetectionStrategy, ApplicationRef, APP_INITIALIZER, Pipe, signal, DestroyRef, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, computed, Output, HostListener, ViewChild, ViewContainerRef, forwardRef, Renderer2, ChangeDetectorRef, afterEveryRender, TemplateRef, ViewChildren, EnvironmentInjector, createComponent, isSignal } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
 import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, of, takeUntil, map, catchError } from 'rxjs';
 import * as i1 from '@angular/common';
@@ -9,8 +9,8 @@ import * as i2 from '@angular/forms';
 import { NgControl, Validators, FormsModule, NG_VALUE_ACCESSOR, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { HttpClient, HttpErrorResponse, HttpStatusCode, HttpParams } from '@angular/common/http';
 import JSON5 from 'json5';
-import { LucideX } from '@lucide/angular';
 import { DomSanitizer } from '@angular/platform-browser';
+import { LucideX } from '@lucide/angular';
 
 // projects/mn-angular-lib/src/lib/mn-mn-alert/mn-mn-alert.tokens.ts
 const MN_ALERT_CONFIG = new InjectionToken('MN_ALERT_CONFIG');
@@ -2009,6 +2009,596 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: [{ required: true }]
             }] } });
 
+/**
+ * Tailwind-variants definition for the MnFileInput component.
+ *
+ * Mirrors the styling vocabulary of {@link mnInputFieldVariants} (size,
+ * borderRadius, shadow, fullWidth, disabled) so a file input visually matches the
+ * rest of the input family, and adds a `dropzone` toggle for the large dashed
+ * drop area used by the default display mode.
+ */
+const mnFileInputVariants = tv({
+    base: 'bg-base-100 border-1 border-base-300 text-base-content text-sm outline-none transition-colors duration-300 ease-in-out',
+    variants: {
+        /** Inner padding scale of the clickable control. */
+        size: {
+            sm: 'p-2',
+            md: 'p-3',
+            lg: 'p-4',
+        },
+        /** Corner rounding of the control. */
+        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',
+        },
+        /** Drop shadow toggle. */
+        shadow: {
+            true: 'shadow-lg',
+        },
+        /** Stretch the control to the full width of its container. */
+        fullWidth: {
+            true: 'w-full',
+        },
+        /** Renders the control as a large dashed dropzone with a hover accent. */
+        dropzone: {
+            true: 'flex flex-col items-center justify-center gap-2 p-6 border-2 border-dashed text-center cursor-pointer hover:border-primary',
+        },
+        /** Dimmed, non-interactive appearance. */
+        disabled: {
+            true: 'opacity-50 cursor-not-allowed pointer-events-none',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        borderRadius: 'lg',
+    },
+});
+
+const mnIconVariants = tv({
+    base: 'inline-flex shrink-0',
+    variants: {
+        color: {
+            current: 'text-current',
+            primary: 'text-primary',
+            secondary: 'text-neutral',
+            danger: 'text-error',
+            warning: 'text-warning',
+            success: 'text-success',
+            accent: 'text-accent',
+        },
+    },
+    defaultVariants: {
+        color: 'current',
+    },
+});
+
+// Inline SVGs sourced from the .svg files in the ./icons/ directory
+const pistolSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.72 14.56 9 10h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v4c2.5 0 1 4 1 4-4 6-1 6-1 6h3.38a1 1 0 0 0 .89-.55za1 1 0 0 1 .9-.56H13a2 2 0 0 0 2-2v-1a1 1 0 0 1 1-1" /></svg>`;
+const pendingSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v5l4 2" /><path d="M14 20.775A9 9 0 0112 21" /><path d="M19 17.656a9 9 0 01-1.5 1.456" /><path d="M21 12a9 9 0 01-.228 2" /><path d="M21 8h-5" /><path d="M7.5 19.794c-6-3.464-6-12.124 0-15.588A9 9 0 0112 3a9.75 9.75 0 016.74 2.74L21 8V3" /></svg>`;
+// Lucide icons (https://lucide.dev) — inner paths; mn-icon wraps them in a sized svg.
+const imagePlusSvg = `<path d="M16 5h6" /><path d="M19 2v6" /><path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5" /><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" /><circle cx="9" cy="9" r="2" />`;
+const uploadSvg = `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" x2="12" y1="3" y2="15" />`;
+const fileSvg = `<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" />`;
+const trash2Svg = `<path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /><line x1="10" x2="10" y1="11" y2="17" /><line x1="14" x2="14" y1="11" y2="17" />`;
+const xSvg = `<path d="M18 6 6 18" /><path d="m6 6 12 12" />`;
+const MN_ICON_MAP = {
+    pistol: pistolSvg,
+    pending: pendingSvg,
+    imagePlus: imagePlusSvg,
+    upload: uploadSvg,
+    file: fileSvg,
+    trash2: trash2Svg,
+    x: xSvg,
+};
+
+class MnIcon {
+    data = {};
+    sanitizer = inject(DomSanitizer);
+    el = inject(ElementRef);
+    svgContent = '';
+    get iconSize() {
+        return this.data.size ?? 24;
+    }
+    get hostClasses() {
+        return mnIconVariants({
+            color: this.data.color,
+        });
+    }
+    resolvedName = null;
+    ngOnInit() {
+        const attrs = this.el.nativeElement.attributes;
+        for (const item of Array.from(attrs)) {
+            const attr = item.name.toLowerCase();
+            if (attr.startsWith('mnicon')) {
+                const iconKey = attr.slice('mnicon'.length);
+                for (const key of Object.keys(MN_ICON_MAP)) {
+                    if (key.toLowerCase() === iconKey) {
+                        this.resolvedName = key;
+                        break;
+                    }
+                }
+                if (this.resolvedName)
+                    break;
+            }
+        }
+        this.updateContent();
+    }
+    ngOnChanges() {
+        this.updateContent();
+    }
+    updateContent() {
+        const name = this.data.name ?? this.resolvedName;
+        if (name) {
+            const raw = MN_ICON_MAP[name];
+            if (raw) {
+                const size = this.iconSize;
+                const isFullSvg = raw.trim().startsWith('<svg');
+                if (isFullSvg) {
+                    const sized = raw.replace(/<svg([^>]*)>/, (_match, attrs) => {
+                        let updated = attrs.replace(/width="[^"]*"/, `width="${size}"`);
+                        updated = updated.replace(/height="[^"]*"/, `height="${size}"`);
+                        if (!attrs.includes('width='))
+                            updated += ` width="${size}"`;
+                        if (!attrs.includes('height='))
+                            updated += ` height="${size}"`;
+                        return `<svg${updated}>`;
+                    });
+                    this.svgContent = this.sanitizer.bypassSecurityTrustHtml(sized);
+                }
+                else {
+                    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${raw}</svg>`;
+                    this.svgContent = this.sanitizer.bypassSecurityTrustHtml(svg);
+                }
+            }
+            else {
+                this.svgContent = '';
+            }
+        }
+        else {
+            this.svgContent = '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnIcon, isStandalone: true, selector: "mn-icon", inputs: { data: "data" }, host: { properties: { "class": "this.hostClasses" } }, usesOnChanges: true, ngImport: i0, template: "<span\n  [style.width.px]=\"iconSize\"\n  [style.height.px]=\"iconSize\"\n  style=\"display: inline-flex; align-items: center; justify-content: center;\"\n  [innerHTML]=\"svgContent\"\n></span>\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-icon', standalone: true, template: "<span\n  [style.width.px]=\"iconSize\"\n  [style.height.px]=\"iconSize\"\n  style=\"display: inline-flex; align-items: center; justify-content: center;\"\n  [innerHTML]=\"svgContent\"\n></span>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+// AUTO-GENERATED — do not edit manually.
+// Run `npm run generate:icons` to regenerate after modifying MN_ICON_MAP.
+class MnIconAttributes {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIconAttributes, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnIconAttributes, isStandalone: true, selector: "mn-icon[mnIconPistol], mn-icon[mnIconPending], mn-icon[mnIconImagePlus], mn-icon[mnIconUpload], mn-icon[mnIconFile], mn-icon[mnIconTrash2], mn-icon[mnIconX]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIconAttributes, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mn-icon[mnIconPistol], mn-icon[mnIconPending], mn-icon[mnIconImagePlus], mn-icon[mnIconUpload], mn-icon[mnIconFile], mn-icon[mnIconTrash2], mn-icon[mnIconX]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * MnFileInput Component
+ *
+ * A generic, accessible file input that implements Angular's ControlValueAccessor.
+ * It styles selection to match the rest of the input family, shows image previews
+ * (and a file icon + name for non-images), supports single or multiple selection,
+ * several display layouts, and client-side `accept` / `maxSize` / `maxFiles` limits.
+ *
+ * The form control value is the plain selection: `File | null` (single) or
+ * `File[]` (multiple). An optional `currentUrl`/`currentUrls` renders an
+ * already-saved image; removing it leaves the value untouched and emits `cleared`.
+ *
+ * @example
+ * ```html
+ * <mn-lib-file-input
+ *   formControlName="image"
+ *   [props]="{ id: 'image', label: 'Cover', accept: 'image/*', displayMode: 'dropzone' }"
+ *   (cleared)="onRemoveExisting()">
+ * </mn-lib-file-input>
+ * ```
+ */
+class MnFileInput {
+    ngControl = inject(NgControl, { optional: true, self: true });
+    /** Configuration properties for the file input. */
+    props;
+    /** Emits whenever the selected file(s) change (in addition to the form control). */
+    filesChange = new EventEmitter();
+    /** Emits when the user removes an already-saved image (`currentUrl(s)`). */
+    cleared = new EventEmitter();
+    /** Resolved UI configuration for the file input. */
+    uiConfig = {};
+    /** Currently selected files (always an array internally). */
+    files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    /** Transient message for a rejected selection (accept/maxSize/maxFiles). */
+    internalError = signal(null, ...(ngDevMode ? [{ debugName: "internalError" }] : []));
+    configService = inject(MnConfigService);
+    sectionPath = inject(MN_SECTION_PATH, { optional: true }) ?? [];
+    explicitInstanceId = inject(MN_INSTANCE_ID, { optional: true });
+    lang = inject(MnLanguageService);
+    destroyRef = inject(DestroyRef);
+    /** Object-URL previews aligned to {@link files}; null for non-image entries. */
+    previewUrls = signal([], ...(ngDevMode ? [{ debugName: "previewUrls" }] : []));
+    /** True once the user removed the single existing image. */
+    currentCleared = signal(false, ...(ngDevMode ? [{ debugName: "currentCleared" }] : []));
+    /** Indices of removed existing images (multiple mode). */
+    removedExisting = signal(new Set(), ...(ngDevMode ? [{ debugName: "removedExisting" }] : []));
+    /** Renderable entries: existing images (when nothing newer hides them) then new files. */
+    displayItems = computed(() => {
+        const items = [];
+        if (this.props.multiple) {
+            const urls = this.props.currentUrls ?? [];
+            const removed = this.removedExisting();
+            urls.forEach((url, i) => {
+                if (!removed.has(i))
+                    items.push(this.existingItem(url, i));
+            });
+        }
+        else if (this.files().length === 0 && this.props.currentUrl && !this.currentCleared()) {
+            items.push(this.existingItem(this.props.currentUrl, 0));
+        }
+        const previews = this.previewUrls();
+        this.files().forEach((file, i) => {
+            items.push({
+                name: file.name,
+                isImage: this.isImage(file),
+                previewUrl: previews[i] ?? null,
+                sizeLabel: this.humanFileSize(file.size),
+                index: i,
+                existing: false,
+            });
+        });
+        return items;
+    }, ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
+    /** Disabled state pushed by the forms API. */
+    formDisabled = false;
+    /**
+     * Built-in default error messages in English.
+     * Used when `useBuiltInErrorMessages` is true (default); overridable per-field.
+     */
+    builtInErrorMessages = {
+        required: 'This field is required',
+        accept: 'This file type is not allowed',
+        maxSize: (args) => `File is too large (max ${args.max})`,
+        maxFiles: (args) => `Too many files (max ${args.max})`,
+    };
+    /** Registers this component as the ControlValueAccessor for the injected control. */
+    constructor() {
+        if (this.ngControl)
+            this.ngControl.valueAccessor = this;
+    }
+    /** The effective display mode. */
+    get displayMode() {
+        return this.props.displayMode ?? 'dropzone';
+    }
+    /** Whether the control is disabled (via props or the forms API). */
+    get isDisabled() {
+        return this.formDisabled || !!this.props.disabled;
+    }
+    /** Native `accept` attribute value, or null for no restriction when unset. */
+    get acceptAttr() {
+        return this.props.accept ?? null;
+    }
+    // ========== ControlValueAccessor Implementation ==========
+    /** Resolved id for the file input element. */
+    get resolvedId() {
+        return this.props.id;
+    }
+    /** Resolved name attribute for the file input element. */
+    get resolvedName() {
+        return this.props.name ?? null;
+    }
+    /** Tailwind-variant classes for the clickable control. */
+    get controlClasses() {
+        return mnFileInputVariants({
+            size: this.props.size,
+            borderRadius: this.props.borderRadius,
+            shadow: this.props.shadow,
+            fullWidth: this.props.fullWidth ?? (this.displayMode !== 'compact'),
+            dropzone: this.displayMode === 'dropzone',
+            disabled: this.isDisabled,
+        });
+    }
+    /** The attached form control, if any. */
+    get control() {
+        return this.ngControl?.control ?? null;
+    }
+    // ========== Selection handling ==========
+    /** Whether to show control validation errors. */
+    get showError() {
+        const c = this.control;
+        return !!c && c.invalid && (c.touched || c.dirty);
+    }
+    /** All control error messages (used when `showAllErrors` is true). */
+    get errorMessages() {
+        const errors = this.control?.errors;
+        if (!errors)
+            return [];
+        return Object.keys(errors).map((key) => this.resolveControlError(key, errors));
+    }
+    /** Single control error message (priority-aware). */
+    get errorMessage() {
+        const errors = this.control?.errors;
+        if (!errors)
+            return null;
+        return this.resolveControlError(this.pickErrorKey(errors), errors);
+    }
+    ngOnInit() {
+        this.resolveConfig();
+        const sub = this.lang.locale$.pipe(skip(1)).subscribe(() => this.resolveConfig());
+        this.destroyRef.onDestroy(() => sub.unsubscribe());
+        this.destroyRef.onDestroy(() => this.revokeAll());
+    }
+    /**
+     * Writes a value from the form into the control.
+     * @param val A `File`, an array of `File`, or null/undefined.
+     */
+    writeValue(val) {
+        const next = Array.isArray(val) ? val.filter((f) => f instanceof File)
+            : val instanceof File ? [val]
+                : [];
+        this.setFiles(next);
+    }
+    /**
+     * Registers the form's change callback.
+     * @param fn Callback invoked with the new value.
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Registers the form's touched callback.
+     * @param fn Callback invoked when the control is touched.
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    // ========== Derived view state ==========
+    /**
+     * Sets the disabled state of the control.
+     * @param isDisabled Whether the control should be disabled.
+     */
+    setDisabledState(isDisabled) {
+        this.formDisabled = isDisabled;
+    }
+    /**
+     * Handles a file-picker change: validates the incoming files against the
+     * configured limits and updates the selection.
+     * @param event The native change event from the hidden file input.
+     */
+    onFileSelected(event) {
+        const input = event.target;
+        const incoming = Array.from(input.files ?? []);
+        input.value = '';
+        if (incoming.length === 0)
+            return;
+        this.addFiles(incoming);
+    }
+    /**
+     * Removes a newly-selected file by index.
+     * @param index Index into the current selection.
+     */
+    removeFile(index) {
+        const next = this.files().filter((_, i) => i !== index);
+        this.internalError.set(null);
+        this.setFiles(next);
+        this.emit();
+    }
+    /**
+     * Removes an already-saved image and notifies the consumer via `cleared`.
+     * @param index Index of the existing image (0 in single mode).
+     */
+    removeExisting(index) {
+        if (this.props.multiple) {
+            const set = new Set(this.removedExisting());
+            set.add(index);
+            this.removedExisting.set(set);
+        }
+        else {
+            this.currentCleared.set(true);
+        }
+        this.cleared.emit();
+        this.onTouched();
+    }
+    /** Whether the attached control carries a `required` validator. */
+    isRequired() {
+        return this.control?.hasValidator(Validators.required) ?? false;
+    }
+    /** Stable track key for a display item across renders. */
+    itemKey(item) {
+        return `${item.existing ? 'e' : 'f'}-${item.index}`;
+    }
+    /** Whether a file should render as an image. */
+    isImage(file) {
+        return (file.type ?? '').startsWith('image/');
+    }
+    /** Callback to notify Angular forms of value changes. */
+    onChange = () => {
+    };
+    // ========== Error handling (control validators) ==========
+    /** Callback to notify Angular forms when the control is touched. */
+    onTouched = () => {
+    };
+    /** Resolves UI strings from config, layering built-in defaults and prop overrides. */
+    resolveConfig() {
+        const instanceId = this.explicitInstanceId || `mn-file-input-${this.props.id}`;
+        const resolved = this.configService.resolve('mn-file-input', this.sectionPath, instanceId);
+        const builtIn = {
+            dropzoneHint: 'Click to upload or drag and drop',
+            replaceLabel: 'Replace',
+            removeLabel: 'Remove',
+        };
+        this.uiConfig = { ...builtIn, ...resolved };
+        if (this.props.label)
+            this.uiConfig = { ...this.uiConfig, label: this.props.label };
+        if (this.props.dropzoneHint)
+            this.uiConfig = { ...this.uiConfig, dropzoneHint: this.props.dropzoneHint };
+        if (this.props.replaceLabel)
+            this.uiConfig = { ...this.uiConfig, replaceLabel: this.props.replaceLabel };
+        if (this.props.removeLabel)
+            this.uiConfig = { ...this.uiConfig, removeLabel: this.props.removeLabel };
+    }
+    /**
+     * Validates and merges newly-picked files into the current selection.
+     * @param incoming The files chosen by the user.
+     */
+    addFiles(incoming) {
+        this.internalError.set(null);
+        let errorKey = null;
+        let errorArgs = {};
+        let accepted = incoming.filter((f) => this.matchesAccept(f));
+        if (accepted.length < incoming.length)
+            errorKey = 'accept';
+        if (this.props.maxSize != null) {
+            const max = this.props.maxSize;
+            const withinSize = accepted.filter((f) => f.size <= max);
+            if (withinSize.length < accepted.length) {
+                errorKey = 'maxSize';
+                errorArgs = { max: this.humanFileSize(max) };
+            }
+            accepted = withinSize;
+        }
+        let next = this.props.multiple ? [...this.files(), ...accepted] : accepted.slice(-1);
+        if (this.props.multiple && this.props.maxFiles != null && next.length > this.props.maxFiles) {
+            next = next.slice(0, this.props.maxFiles);
+            errorKey = 'maxFiles';
+            errorArgs = { max: this.props.maxFiles };
+        }
+        if (errorKey)
+            this.internalError.set(this.resolveMessage(errorKey, errorArgs));
+        this.setFiles(next);
+        this.emit();
+    }
+    /** Replaces the internal selection and rebuilds image previews. */
+    setFiles(next) {
+        this.revokeAll();
+        this.files.set(next);
+        this.previewUrls.set(next.map((f) => (this.isImage(f) ? URL.createObjectURL(f) : null)));
+    }
+    /** Emits the current value to the form and any listeners. */
+    emit() {
+        const value = this.props.multiple ? this.files() : (this.files()[0] ?? null);
+        this.onChange(value);
+        this.onTouched();
+        this.filesChange.emit(value);
+    }
+    /** Revokes any outstanding object-URL previews to avoid leaks. */
+    revokeAll() {
+        for (const url of this.previewUrls()) {
+            if (url)
+                URL.revokeObjectURL(url);
+        }
+    }
+    /** Builds a display item for an already-saved image. */
+    existingItem(url, index) {
+        return {
+            name: this.fileNameFromUrl(url),
+            isImage: true,
+            previewUrl: url,
+            sizeLabel: null,
+            index,
+            existing: true,
+        };
+    }
+    /** Picks which control error key to display. */
+    pickErrorKey(errors) {
+        if (this.props.errorPriority) {
+            for (const key of this.props.errorPriority) {
+                if (errors[key] !== undefined)
+                    return key;
+            }
+        }
+        return Object.keys(errors)[0];
+    }
+    // ========== Helpers ==========
+    /** Resolves a control error key to a message, interpolating its args. */
+    resolveControlError(key, errors) {
+        return this.resolveMessage(key, errors[key]);
+    }
+    /**
+     * Resolves a message for an error key using the same precedence as the other
+     * inputs: custom props > config > built-in > fallback > default.
+     */
+    resolveMessage(key, args) {
+        const customMsg = this.props.errorMessages?.[key];
+        const configMsg = this.uiConfig.errorMessages?.[key];
+        const useBuiltIn = this.props.useBuiltInErrorMessages !== false;
+        const builtInMsg = useBuiltIn ? this.builtInErrorMessages[key] : undefined;
+        const fallbackMsg = this.props.defaultErrorMessage;
+        const msgDef = customMsg ?? configMsg ?? builtInMsg ?? fallbackMsg ?? 'Invalid input';
+        if (typeof msgDef === 'function') {
+            return msgDef(args ?? {}, {});
+        }
+        if (args && typeof args === 'object') {
+            return msgDef.replace(/\{\{(\w+)}}/g, (_match, token) => {
+                const value = args[token];
+                return value !== undefined ? String(value) : `{{${token}}}`;
+            });
+        }
+        return msgDef;
+    }
+    /** Checks a file against the configured `accept` filter (extensions and MIME globs). */
+    matchesAccept(file) {
+        const accept = this.props.accept;
+        if (!accept)
+            return true;
+        const tokens = accept.split(',').map((t) => t.trim().toLowerCase()).filter(Boolean);
+        if (tokens.length === 0)
+            return true;
+        const name = file.name.toLowerCase();
+        const type = (file.type ?? '').toLowerCase();
+        return tokens.some((token) => {
+            if (token.startsWith('.'))
+                return name.endsWith(token);
+            if (token.endsWith('/*'))
+                return type.startsWith(token.slice(0, -1));
+            return type === token;
+        });
+    }
+    /** Formats a byte count as a human-readable size. */
+    humanFileSize(bytes) {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    /** Derives a display name from a URL (last path segment). */
+    fileNameFromUrl(url) {
+        const clean = url.split('?')[0].split('#')[0];
+        const segment = clean.substring(clean.lastIndexOf('/') + 1);
+        return segment || 'image';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnFileInput, isStandalone: true, selector: "mn-lib-file-input", inputs: { props: "props" }, outputs: { filesChange: "filesChange", cleared: "cleared" }, ngImport: i0, template: "<div [class.w-full]=\"props.fullWidth !== false && displayMode !== 'compact'\" class=\"flex flex-col\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Hidden native file input shared by every trigger -->\n  <input\n    #fileInput\n    (change)=\"onFileSelected($event)\"\n    [accept]=\"acceptAttr\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.multiple]=\"props.multiple || null\"\n    [attr.name]=\"resolvedName\"\n    [disabled]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    class=\"hidden\"\n    type=\"file\"\n  />\n\n  @switch (displayMode) {\n    <!-- Compact: inline button + filename chips -->\n    @case ('compact') {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <button\n          (click)=\"fileInput.click()\"\n          [disabled]=\"isDisabled\"\n          [ngClass]=\"controlClasses\"\n          class=\"inline-flex items-center gap-2 cursor-pointer hover:bg-base-200\"\n          type=\"button\">\n          <mn-icon [data]=\"{ size: 18 }\" mnIconUpload></mn-icon>\n          <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n        </button>\n        @for (item of displayItems(); track itemKey(item)) {\n          <span class=\"inline-flex items-center gap-1 text-sm text-base-content/70\">\n            @if (item.isImage && item.previewUrl) {\n              <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-6 w-6 rounded object-cover\"/>\n            } @else {\n              <mn-icon [data]=\"{ size: 16 }\" class=\"text-base-content/50\" mnIconFile></mn-icon>\n            }\n            <span class=\"max-w-40 truncate\">{{ item.name }}</span>\n            <button\n              (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n              [attr.aria-label]=\"uiConfig.removeLabel\"\n              class=\"text-base-content/50 hover:text-error cursor-pointer\"\n              type=\"button\">\n              <mn-icon [data]=\"{ size: 14 }\" mnIconX></mn-icon>\n            </button>\n          </span>\n        }\n      </div>\n    }\n\n    <!-- List: compact rows of file icon + name + size -->\n    @case ('list') {\n      <button\n        (click)=\"fileInput.click()\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"controlClasses\"\n        class=\"flex flex-row items-center justify-center gap-2 cursor-pointer hover:bg-base-200\"\n        type=\"button\">\n        <mn-icon [data]=\"{ size: 18 }\" mnIconUpload></mn-icon>\n        <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n      </button>\n      @if (displayItems().length > 0) {\n        <div class=\"mt-2 flex flex-col gap-1\">\n          @for (item of displayItems(); track itemKey(item)) {\n            <div class=\"flex items-center gap-2 rounded-lg bg-base-200 px-3 py-1.5 text-sm\">\n              <mn-icon [data]=\"{ size: 16 }\" class=\"text-base-content/50\" mnIconFile></mn-icon>\n              <span class=\"flex-1 truncate text-base-content\">{{ item.name }}</span>\n              @if (item.sizeLabel) {\n                <span class=\"text-base-content/50\">{{ item.sizeLabel }}</span>\n              }\n              <button\n                (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n                [attr.aria-label]=\"uiConfig.removeLabel\"\n                class=\"text-base-content/50 hover:text-error cursor-pointer\"\n                type=\"button\">\n                <mn-icon [data]=\"{ size: 16 }\" mnIconX></mn-icon>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <!-- Thumbnail: grid of tiles with overlay remove + add tile -->\n    @case ('thumbnail') {\n      <div class=\"flex flex-wrap gap-3\">\n        @for (item of displayItems(); track itemKey(item)) {\n          <div class=\"relative h-24 w-24 overflow-hidden rounded-xl border border-base-300 bg-base-100\">\n            @if (item.isImage && item.previewUrl) {\n              <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-full w-full object-cover\"/>\n            } @else {\n              <div class=\"flex h-full w-full flex-col items-center justify-center gap-1 p-1 text-center\">\n                <mn-icon [data]=\"{ size: 22 }\" class=\"text-base-content/50\" mnIconFile></mn-icon>\n                <span class=\"w-full truncate text-xs text-base-content/60\">{{ item.name }}</span>\n              </div>\n            }\n            <button\n              (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n              [attr.aria-label]=\"uiConfig.removeLabel\"\n              class=\"btn btn-circle btn-xs absolute top-1 right-1 border-none bg-black/60 text-white hover:bg-black/80\"\n              type=\"button\">\n              <mn-icon [data]=\"{ size: 14 }\" mnIconX></mn-icon>\n            </button>\n          </div>\n        }\n        @if (props.multiple || displayItems().length === 0) {\n          <button\n            (click)=\"fileInput.click()\"\n            [disabled]=\"isDisabled\"\n            class=\"flex h-24 w-24 flex-col items-center justify-center gap-1 rounded-xl border-2 border-dashed border-base-300 text-base-content/50 hover:border-primary cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed\"\n            type=\"button\">\n            <mn-icon [data]=\"{ size: 22 }\" mnIconImagePlus></mn-icon>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Dropzone (default): large dashed area + preview rows -->\n    @default {\n      <button\n        (click)=\"fileInput.click()\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"controlClasses\"\n        type=\"button\">\n        <mn-icon [data]=\"{ size: 28 }\" class=\"text-base-content/40\" mnIconImagePlus></mn-icon>\n        <span class=\"text-sm text-base-content/60\">{{ uiConfig.dropzoneHint }}</span>\n      </button>\n      @if (displayItems().length > 0) {\n        <div class=\"mt-2 flex flex-col gap-2\">\n          @for (item of displayItems(); track itemKey(item)) {\n            <div class=\"flex items-center gap-3 rounded-lg bg-base-200 p-2\">\n              @if (item.isImage && item.previewUrl) {\n                <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-12 w-12 rounded-md object-cover\"/>\n              } @else {\n                <mn-icon [data]=\"{ size: 24 }\" class=\"text-base-content/50\" mnIconFile></mn-icon>\n              }\n              <span class=\"flex-1 truncate text-sm text-base-content\">{{ item.name }}</span>\n              @if (item.sizeLabel) {\n                <span class=\"text-sm text-base-content/50\">{{ item.sizeLabel }}</span>\n              }\n              <button\n                (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n                [attr.aria-label]=\"uiConfig.removeLabel\"\n                class=\"btn btn-circle btn-sm btn-ghost text-base-content/60 hover:text-error\"\n                type=\"button\">\n                <mn-icon [data]=\"{ size: 16 }\" mnIconTrash2></mn-icon>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n\n  <!-- Selection-limit error (accept / maxSize / maxFiles) -->\n  @if (internalError(); as msg) {\n    <mn-error-message [errorMessage]=\"msg\" [id]=\"resolvedId + '-selection'\"></mn-error-message>\n  }\n\n  <!-- Control validation errors -->\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else if (errorMessage !== null) {\n      <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n    }\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: MnIcon, selector: "mn-icon", inputs: ["data"] }, { kind: "directive", type: MnIconAttributes, selector: "mn-icon[mnIconPistol], mn-icon[mnIconPending], mn-icon[mnIconImagePlus], mn-icon[mnIconUpload], mn-icon[mnIconFile], mn-icon[mnIconTrash2], mn-icon[mnIconX]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFileInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-lib-file-input', standalone: true, imports: [CommonModule, NgClass, MnErrorMessage, MnIcon, MnIconAttributes], template: "<div [class.w-full]=\"props.fullWidth !== false && displayMode !== 'compact'\" class=\"flex flex-col\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label [attr.for]=\"resolvedId\" class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Hidden native file input shared by every trigger -->\n  <input\n    #fileInput\n    (change)=\"onFileSelected($event)\"\n    [accept]=\"acceptAttr\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.multiple]=\"props.multiple || null\"\n    [attr.name]=\"resolvedName\"\n    [disabled]=\"isDisabled\"\n    [id]=\"resolvedId\"\n    class=\"hidden\"\n    type=\"file\"\n  />\n\n  @switch (displayMode) {\n    <!-- Compact: inline button + filename chips -->\n    @case ('compact') {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <button\n          (click)=\"fileInput.click()\"\n          [disabled]=\"isDisabled\"\n          [ngClass]=\"controlClasses\"\n          class=\"inline-flex items-center gap-2 cursor-pointer hover:bg-base-200\"\n          type=\"button\">\n          <mn-icon [data]=\"{ size: 18 }\" mnIconUpload></mn-icon>\n          <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n        </button>\n        @for (item of displayItems(); track itemKey(item)) {\n          <span class=\"inline-flex items-center gap-1 text-sm text-base-content/70\">\n            @if (item.isImage && item.previewUrl) {\n              <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-6 w-6 rounded object-cover\"/>\n            } @else {\n              <mn-icon [data]=\"{ size: 16 }\" class=\"text-base-content/50\" mnIconFile></mn-icon>\n            }\n            <span class=\"max-w-40 truncate\">{{ item.name }}</span>\n            <button\n              (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n              [attr.aria-label]=\"uiConfig.removeLabel\"\n              class=\"text-base-content/50 hover:text-error cursor-pointer\"\n              type=\"button\">\n              <mn-icon [data]=\"{ size: 14 }\" mnIconX></mn-icon>\n            </button>\n          </span>\n        }\n      </div>\n    }\n\n    <!-- List: compact rows of file icon + name + size -->\n    @case ('list') {\n      <button\n        (click)=\"fileInput.click()\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"controlClasses\"\n        class=\"flex flex-row items-center justify-center gap-2 cursor-pointer hover:bg-base-200\"\n        type=\"button\">\n        <mn-icon [data]=\"{ size: 18 }\" mnIconUpload></mn-icon>\n        <span class=\"text-sm\">{{ uiConfig.replaceLabel }}</span>\n      </button>\n      @if (displayItems().length > 0) {\n        <div class=\"mt-2 flex flex-col gap-1\">\n          @for (item of displayItems(); track itemKey(item)) {\n            <div class=\"flex items-center gap-2 rounded-lg bg-base-200 px-3 py-1.5 text-sm\">\n              <mn-icon [data]=\"{ size: 16 }\" class=\"text-base-content/50\" mnIconFile></mn-icon>\n              <span class=\"flex-1 truncate text-base-content\">{{ item.name }}</span>\n              @if (item.sizeLabel) {\n                <span class=\"text-base-content/50\">{{ item.sizeLabel }}</span>\n              }\n              <button\n                (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n                [attr.aria-label]=\"uiConfig.removeLabel\"\n                class=\"text-base-content/50 hover:text-error cursor-pointer\"\n                type=\"button\">\n                <mn-icon [data]=\"{ size: 16 }\" mnIconX></mn-icon>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <!-- Thumbnail: grid of tiles with overlay remove + add tile -->\n    @case ('thumbnail') {\n      <div class=\"flex flex-wrap gap-3\">\n        @for (item of displayItems(); track itemKey(item)) {\n          <div class=\"relative h-24 w-24 overflow-hidden rounded-xl border border-base-300 bg-base-100\">\n            @if (item.isImage && item.previewUrl) {\n              <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-full w-full object-cover\"/>\n            } @else {\n              <div class=\"flex h-full w-full flex-col items-center justify-center gap-1 p-1 text-center\">\n                <mn-icon [data]=\"{ size: 22 }\" class=\"text-base-content/50\" mnIconFile></mn-icon>\n                <span class=\"w-full truncate text-xs text-base-content/60\">{{ item.name }}</span>\n              </div>\n            }\n            <button\n              (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n              [attr.aria-label]=\"uiConfig.removeLabel\"\n              class=\"btn btn-circle btn-xs absolute top-1 right-1 border-none bg-black/60 text-white hover:bg-black/80\"\n              type=\"button\">\n              <mn-icon [data]=\"{ size: 14 }\" mnIconX></mn-icon>\n            </button>\n          </div>\n        }\n        @if (props.multiple || displayItems().length === 0) {\n          <button\n            (click)=\"fileInput.click()\"\n            [disabled]=\"isDisabled\"\n            class=\"flex h-24 w-24 flex-col items-center justify-center gap-1 rounded-xl border-2 border-dashed border-base-300 text-base-content/50 hover:border-primary cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed\"\n            type=\"button\">\n            <mn-icon [data]=\"{ size: 22 }\" mnIconImagePlus></mn-icon>\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Dropzone (default): large dashed area + preview rows -->\n    @default {\n      <button\n        (click)=\"fileInput.click()\"\n        [disabled]=\"isDisabled\"\n        [ngClass]=\"controlClasses\"\n        type=\"button\">\n        <mn-icon [data]=\"{ size: 28 }\" class=\"text-base-content/40\" mnIconImagePlus></mn-icon>\n        <span class=\"text-sm text-base-content/60\">{{ uiConfig.dropzoneHint }}</span>\n      </button>\n      @if (displayItems().length > 0) {\n        <div class=\"mt-2 flex flex-col gap-2\">\n          @for (item of displayItems(); track itemKey(item)) {\n            <div class=\"flex items-center gap-3 rounded-lg bg-base-200 p-2\">\n              @if (item.isImage && item.previewUrl) {\n                <img [src]=\"item.previewUrl\" alt=\"\" class=\"h-12 w-12 rounded-md object-cover\"/>\n              } @else {\n                <mn-icon [data]=\"{ size: 24 }\" class=\"text-base-content/50\" mnIconFile></mn-icon>\n              }\n              <span class=\"flex-1 truncate text-sm text-base-content\">{{ item.name }}</span>\n              @if (item.sizeLabel) {\n                <span class=\"text-sm text-base-content/50\">{{ item.sizeLabel }}</span>\n              }\n              <button\n                (click)=\"item.existing ? removeExisting(item.index) : removeFile(item.index)\"\n                [attr.aria-label]=\"uiConfig.removeLabel\"\n                class=\"btn btn-circle btn-sm btn-ghost text-base-content/60 hover:text-error\"\n                type=\"button\">\n                <mn-icon [data]=\"{ size: 16 }\" mnIconTrash2></mn-icon>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n\n  <!-- Selection-limit error (accept / maxSize / maxFiles) -->\n  @if (internalError(); as msg) {\n    <mn-error-message [errorMessage]=\"msg\" [id]=\"resolvedId + '-selection'\"></mn-error-message>\n  }\n\n  <!-- Control validation errors -->\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else if (errorMessage !== null) {\n      <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n    }\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input,
+                args: [{ required: true }]
+            }], filesChange: [{
+                type: Output
+            }], cleared: [{
+                type: Output
+            }] } });
+
 const mnCheckboxVariants = tv({
     base: 'mn-checkbox',
     variants: {
@@ -4031,7 +4621,7 @@ class MnCollectionBase {
     /**
      * Measured pixel height of one full page, applied as a persistent `min-height` floor
      * while paginated so a short page (the last page, or after a row is removed/filtered)
-     * can't collapse the body and jump the layout below it. Blank space fills the remainder
+     * can't collapse the body and jump the layout below it. Blank space fills the remaindernpm
      * at the bottom. Captured once a full page is actually on screen; `0` means unmeasured.
      * Distinct from the transient {@link lockedMinHeight} reload lock — both combine in
      * {@link bodyMinHeight} via `Math.max`.
@@ -5388,70 +5978,14 @@ class MnFormBodyComponent {
     // =========================
     // 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';
+    /**
+     * Invokes a FILE field's `onClear` callback when its existing image is removed.
+     * FILE fields render {@link MnFileInput}, which owns selection/validation and
+     * writes the value (`File | File[] | null`) straight to the form control.
+     * @param field The field whose existing image was cleared.
+     */
+    onFileCleared(field) {
+        field.onClear?.();
     }
     async submit() {
         // Run cross-field validators before submit
@@ -5477,11 +6011,11 @@ class MnFormBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFormBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnFormBodyComponent, isStandalone: true, selector: "mn-form-body", inputs: { config: "config", modalRef: "modalRef", hideFooter: "hideFooter", hideCustomBody: "hideCustomBody" }, outputs: { formStatusChange: "formStatusChange" }, viewQueries: [{ propertyName: "inputFields", predicate: MnInputField, descendants: true }, { propertyName: "textareas", predicate: MnTextarea, descendants: true }], ngImport: i0, template: "@if ((config.component || config.template) && !hideCustomBody) {\n  <mn-custom-body-host\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"mb-6 block\"\n  ></mn-custom-body-host>\n}\n\n<form (ngSubmit)=\"submit()\" [formGroup]=\"form\" class=\"flex flex-col gap-6 h-full\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <mn-lib-select\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"getSelectProps(rowField.field)\"\n          ></mn-lib-select>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-1 pl-2 pt-1\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              rows: asField(rowField.field).rows || 4,\n              resize: 'vertical',\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-textarea>\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT) {\n        <div>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-2 py-2 text-sm text-base-content/50\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n              {{ labels.loadingOptions }}\n            </div>\n          }\n          @if (!isFieldLoading(asKey(rowField.field.key))) {\n            <mn-lib-multi-select\n              [formControlName]=\"asKey(rowField.field.key)\"\n              [props]=\"asAny({\n                id: asKey(rowField.field.key),\n                label: asField(rowField.field).label,\n                options: getFieldOptions(rowField.field),\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n              })\"\n            ></mn-lib-multi-select>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"color\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"w-10 h-10 rounded-lg border border-base-300 cursor-pointer p-0.5\"\n              [value]=\"getColorValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onColorChange(rowField.field, $event)\"\n            />\n            <span class=\"text-sm text-base-content/60 font-mono\">{{ getColorValue(rowField.field) }}</span>\n          </div>\n          @if (asField(rowField.field).swatches) {\n            <div class=\"flex gap-1.5 mt-1\">\n              @for (swatch of asField(rowField.field).swatches; track swatch) {\n                <button\n                  mnButton\n                  [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                  type=\"button\"\n                  class=\"w-6 h-6 rounded-md border border-base-300 cursor-pointer transition-transform hover:scale-110\"\n                  [style.background-color]=\"swatch\"\n                  [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n                  [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n                  (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n                  [attr.aria-label]=\"'Select color ' + swatch\"\n                ></button>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <span [id]=\"'rating-label-' + asKey(rowField.field.key)\"\n                class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </span>\n          <div [attr.aria-labelledby]=\"'rating-label-' + asKey(rowField.field.key)\" class=\"flex items-center gap-1\"\n               role=\"group\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\n                mnButton\n                [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                type=\"button\"\n                class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n                [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n                [class.text-base-300]=\"star > getRatingValue(rowField.field)\"\n                [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n                (click)=\"setRating(rowField.field, star)\"\n              >\n                &#9733;\n              </button>\n            }\n            <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"range\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"flex-1 h-2 bg-base-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n              [attr.min]=\"asField(rowField.field).min ?? 0\"\n              [attr.max]=\"asField(rowField.field).max ?? 100\"\n              [attr.step]=\"asField(rowField.field).step ?? 1\"\n              [value]=\"getSliderValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onSliderChange(rowField.field, $event)\"\n            />\n            @if (asField(rowField.field).showValue !== false) {\n              <span class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n                {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n              </span>\n            }\n          </div>\n          <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n            <span>{{ asField(rowField.field).min ?? 0 }}</span>\n            <span>{{ asField(rowField.field).max ?? 100 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div\n            class=\"relative border-2 border-dashed border-base-300 rounded-xl p-6 text-center transition-colors hover:border-blue-400 hover:bg-blue-50/30\"\n            [class.border-red-300]=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n            [class.opacity-50]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n          >\n            <input\n              type=\"file\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\"\n              [attr.accept]=\"asField(rowField.field).accept || null\"\n              [attr.multiple]=\"asField(rowField.field).multiple || null\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (change)=\"onFileChange(rowField.field, $event)\"\n            />\n            <div class=\"flex flex-col items-center gap-2\">\n              <svg class=\"w-8 h-8 text-base-content/40\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5\" />\n              </svg>\n              <p class=\"text-sm text-base-content/50\">{{ labels.fileUploadPrompt }}</p>\n              @if (asField(rowField.field).accept) {\n                <p class=\"text-xs text-base-content/40\">{{ labels.accepted }} {{ asField(rowField.field).accept }}</p>\n              }\n              @if (asField(rowField.field).maxSize) {\n                <p class=\"text-xs text-base-content/40\">{{ labels.maxSize }} {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n              }\n            </div>\n          </div>\n          <!-- Selected files list -->\n          @if (getSelectedFiles(asKey(rowField.field.key)).length > 0) {\n            <div class=\"flex flex-col gap-1 mt-2\">\n              @for (file of getSelectedFiles(asKey(rowField.field.key)); track file.name; let i = $index) {\n                <div class=\"flex items-center justify-between px-3 py-1.5 bg-base-200 rounded-lg text-sm\">\n                  <span class=\"text-base-content truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n                  <button mnButton [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\" type=\"button\" class=\"text-base-content/40 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n                </div>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFileError(rowField.field) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Shared template for MULTI_SELECT_TABLE and SINGLE_SELECT_TABLE -->\n  <ng-template #selectTableTemplate let-rowField>\n    <div class=\"flex flex-col gap-1\">\n      @if (asField(rowField.field).label) {\n        <span class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          @if (hasRequiredValidator(rowField.field)) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </span>\n      }\n      <mn-table\n        [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n        [attr.aria-label]=\"asField(rowField.field).label || null\"\n        (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n      ></mn-table>\n      @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n        <div class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ labels.fieldRequired }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 pb-6 border-t border-base-300 mt-auto sticky bottom-0 bg-base-100 z-10\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (mousedown)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnTextarea, selector: "mn-lib-textarea", inputs: ["props"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "directive", type: MnCustomFieldHostDirective, selector: "[mnCustomFieldHost]", inputs: ["component", "inputs"] }, { kind: "component", type: MnTable, selector: "mn-table", outputs: ["sortChange", "rowClick"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnFormBodyComponent, isStandalone: true, selector: "mn-form-body", inputs: { config: "config", modalRef: "modalRef", hideFooter: "hideFooter", hideCustomBody: "hideCustomBody" }, outputs: { formStatusChange: "formStatusChange" }, viewQueries: [{ propertyName: "inputFields", predicate: MnInputField, descendants: true }, { propertyName: "textareas", predicate: MnTextarea, descendants: true }], ngImport: i0, template: "@if ((config.component || config.template) && !hideCustomBody) {\n  <mn-custom-body-host\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"mb-6 block\"\n  ></mn-custom-body-host>\n}\n\n<form (ngSubmit)=\"submit()\" [formGroup]=\"form\" class=\"flex flex-col gap-6 h-full\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <mn-lib-select\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"getSelectProps(rowField.field)\"\n          ></mn-lib-select>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-1 pl-2 pt-1\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              rows: asField(rowField.field).rows || 4,\n              resize: 'vertical',\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-textarea>\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT) {\n        <div>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-2 py-2 text-sm text-base-content/50\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n              {{ labels.loadingOptions }}\n            </div>\n          }\n          @if (!isFieldLoading(asKey(rowField.field.key))) {\n            <mn-lib-multi-select\n              [formControlName]=\"asKey(rowField.field.key)\"\n              [props]=\"asAny({\n                id: asKey(rowField.field.key),\n                label: asField(rowField.field).label,\n                options: getFieldOptions(rowField.field),\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n              })\"\n            ></mn-lib-multi-select>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"color\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"w-10 h-10 rounded-lg border border-base-300 cursor-pointer p-0.5\"\n              [value]=\"getColorValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onColorChange(rowField.field, $event)\"\n            />\n            <span class=\"text-sm text-base-content/60 font-mono\">{{ getColorValue(rowField.field) }}</span>\n          </div>\n          @if (asField(rowField.field).swatches) {\n            <div class=\"flex gap-1.5 mt-1\">\n              @for (swatch of asField(rowField.field).swatches; track swatch) {\n                <button\n                  mnButton\n                  [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                  type=\"button\"\n                  class=\"w-6 h-6 rounded-md border border-base-300 cursor-pointer transition-transform hover:scale-110\"\n                  [style.background-color]=\"swatch\"\n                  [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n                  [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n                  (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n                  [attr.aria-label]=\"'Select color ' + swatch\"\n                ></button>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <span [id]=\"'rating-label-' + asKey(rowField.field.key)\"\n                class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </span>\n          <div [attr.aria-labelledby]=\"'rating-label-' + asKey(rowField.field.key)\" class=\"flex items-center gap-1\"\n               role=\"group\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\n                mnButton\n                [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                type=\"button\"\n                class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n                [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n                [class.text-base-300]=\"star > getRatingValue(rowField.field)\"\n                [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n                (click)=\"setRating(rowField.field, star)\"\n              >\n                &#9733;\n              </button>\n            }\n            <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"range\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"flex-1 h-2 bg-base-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n              [attr.min]=\"asField(rowField.field).min ?? 0\"\n              [attr.max]=\"asField(rowField.field).max ?? 100\"\n              [attr.step]=\"asField(rowField.field).step ?? 1\"\n              [value]=\"getSliderValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onSliderChange(rowField.field, $event)\"\n            />\n            @if (asField(rowField.field).showValue !== false) {\n              <span class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n                {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n              </span>\n            }\n          </div>\n          <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n            <span>{{ asField(rowField.field).min ?? 0 }}</span>\n            <span>{{ asField(rowField.field).max ?? 100 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div>\n          <mn-lib-file-input\n            (cleared)=\"onFileCleared(rowField.field)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              accept: asField(rowField.field).accept,\n              multiple: asField(rowField.field).multiple,\n              maxFiles: asField(rowField.field).maxFiles,\n              maxSize: asField(rowField.field).maxSize,\n              displayMode: asField(rowField.field).displayMode,\n              dropzoneHint: asField(rowField.field).dropzoneHint,\n              replaceLabel: asField(rowField.field).replaceLabel,\n              removeLabel: asField(rowField.field).removeLabel,\n              currentUrl: asField(rowField.field).currentUrl,\n              currentUrls: asField(rowField.field).currentUrls,\n              disabled: isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\n            })\"\n          ></mn-lib-file-input>\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Shared template for MULTI_SELECT_TABLE and SINGLE_SELECT_TABLE -->\n  <ng-template #selectTableTemplate let-rowField>\n    <div class=\"flex flex-col gap-1\">\n      @if (asField(rowField.field).label) {\n        <span class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          @if (hasRequiredValidator(rowField.field)) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </span>\n      }\n      <mn-table\n        [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n        [attr.aria-label]=\"asField(rowField.field).label || null\"\n        (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n      ></mn-table>\n      @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n        <div class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ labels.fieldRequired }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 pb-6 border-t border-base-300 mt-auto sticky bottom-0 bg-base-100 z-10\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (mousedown)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props", "checked"], outputs: ["checkedChange"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnTextarea, selector: "mn-lib-textarea", inputs: ["props"] }, { kind: "component", type: MnFileInput, selector: "mn-lib-file-input", inputs: ["props"], outputs: ["filesChange", "cleared"] }, { kind: "component", type: MnSelect, selector: "mn-lib-select", inputs: ["props"] }, { kind: "directive", type: MnCustomFieldHostDirective, selector: "[mnCustomFieldHost]", inputs: ["component", "inputs"] }, { kind: "component", type: MnTable, selector: "mn-table", outputs: ["sortChange", "rowClick"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFormBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-form-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnInputField, MnCheckbox, MnDatetime, MnMultiSelect, MnTextarea, MnSelect, MnCustomFieldHostDirective, MnTable, MnCustomBodyHostComponent], template: "@if ((config.component || config.template) && !hideCustomBody) {\n  <mn-custom-body-host\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"mb-6 block\"\n  ></mn-custom-body-host>\n}\n\n<form (ngSubmit)=\"submit()\" [formGroup]=\"form\" class=\"flex flex-col gap-6 h-full\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <mn-lib-select\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"getSelectProps(rowField.field)\"\n          ></mn-lib-select>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-1 pl-2 pt-1\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              rows: asField(rowField.field).rows || 4,\n              resize: 'vertical',\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-textarea>\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT) {\n        <div>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-2 py-2 text-sm text-base-content/50\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n              {{ labels.loadingOptions }}\n            </div>\n          }\n          @if (!isFieldLoading(asKey(rowField.field.key))) {\n            <mn-lib-multi-select\n              [formControlName]=\"asKey(rowField.field.key)\"\n              [props]=\"asAny({\n                id: asKey(rowField.field.key),\n                label: asField(rowField.field).label,\n                options: getFieldOptions(rowField.field),\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n              })\"\n            ></mn-lib-multi-select>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"color\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"w-10 h-10 rounded-lg border border-base-300 cursor-pointer p-0.5\"\n              [value]=\"getColorValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onColorChange(rowField.field, $event)\"\n            />\n            <span class=\"text-sm text-base-content/60 font-mono\">{{ getColorValue(rowField.field) }}</span>\n          </div>\n          @if (asField(rowField.field).swatches) {\n            <div class=\"flex gap-1.5 mt-1\">\n              @for (swatch of asField(rowField.field).swatches; track swatch) {\n                <button\n                  mnButton\n                  [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                  type=\"button\"\n                  class=\"w-6 h-6 rounded-md border border-base-300 cursor-pointer transition-transform hover:scale-110\"\n                  [style.background-color]=\"swatch\"\n                  [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n                  [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n                  (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n                  [attr.aria-label]=\"'Select color ' + swatch\"\n                ></button>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <span [id]=\"'rating-label-' + asKey(rowField.field.key)\"\n                class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </span>\n          <div [attr.aria-labelledby]=\"'rating-label-' + asKey(rowField.field.key)\" class=\"flex items-center gap-1\"\n               role=\"group\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\n                mnButton\n                [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                type=\"button\"\n                class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n                [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n                [class.text-base-300]=\"star > getRatingValue(rowField.field)\"\n                [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n                (click)=\"setRating(rowField.field, star)\"\n              >\n                &#9733;\n              </button>\n            }\n            <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"range\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"flex-1 h-2 bg-base-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n              [attr.min]=\"asField(rowField.field).min ?? 0\"\n              [attr.max]=\"asField(rowField.field).max ?? 100\"\n              [attr.step]=\"asField(rowField.field).step ?? 1\"\n              [value]=\"getSliderValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onSliderChange(rowField.field, $event)\"\n            />\n            @if (asField(rowField.field).showValue !== false) {\n              <span class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n                {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n              </span>\n            }\n          </div>\n          <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n            <span>{{ asField(rowField.field).min ?? 0 }}</span>\n            <span>{{ asField(rowField.field).max ?? 100 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div\n            class=\"relative border-2 border-dashed border-base-300 rounded-xl p-6 text-center transition-colors hover:border-blue-400 hover:bg-blue-50/30\"\n            [class.border-red-300]=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n            [class.opacity-50]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n          >\n            <input\n              type=\"file\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\"\n              [attr.accept]=\"asField(rowField.field).accept || null\"\n              [attr.multiple]=\"asField(rowField.field).multiple || null\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (change)=\"onFileChange(rowField.field, $event)\"\n            />\n            <div class=\"flex flex-col items-center gap-2\">\n              <svg class=\"w-8 h-8 text-base-content/40\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5\" />\n              </svg>\n              <p class=\"text-sm text-base-content/50\">{{ labels.fileUploadPrompt }}</p>\n              @if (asField(rowField.field).accept) {\n                <p class=\"text-xs text-base-content/40\">{{ labels.accepted }} {{ asField(rowField.field).accept }}</p>\n              }\n              @if (asField(rowField.field).maxSize) {\n                <p class=\"text-xs text-base-content/40\">{{ labels.maxSize }} {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n              }\n            </div>\n          </div>\n          <!-- Selected files list -->\n          @if (getSelectedFiles(asKey(rowField.field.key)).length > 0) {\n            <div class=\"flex flex-col gap-1 mt-2\">\n              @for (file of getSelectedFiles(asKey(rowField.field.key)); track file.name; let i = $index) {\n                <div class=\"flex items-center justify-between px-3 py-1.5 bg-base-200 rounded-lg text-sm\">\n                  <span class=\"text-base-content truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n                  <button mnButton [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\" type=\"button\" class=\"text-base-content/40 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n                </div>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFileError(rowField.field) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Shared template for MULTI_SELECT_TABLE and SINGLE_SELECT_TABLE -->\n  <ng-template #selectTableTemplate let-rowField>\n    <div class=\"flex flex-col gap-1\">\n      @if (asField(rowField.field).label) {\n        <span class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          @if (hasRequiredValidator(rowField.field)) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </span>\n      }\n      <mn-table\n        [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n        [attr.aria-label]=\"asField(rowField.field).label || null\"\n        (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n      ></mn-table>\n      @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n        <div class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ labels.fieldRequired }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 pb-6 border-t border-base-300 mt-auto sticky bottom-0 bg-base-100 z-10\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (mousedown)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"] }]
+            args: [{ selector: 'mn-form-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnInputField, MnCheckbox, MnDatetime, MnMultiSelect, MnTextarea, MnFileInput, MnSelect, MnCustomFieldHostDirective, MnTable, MnCustomBodyHostComponent], template: "@if ((config.component || config.template) && !hideCustomBody) {\n  <mn-custom-body-host\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"mb-6 block\"\n  ></mn-custom-body-host>\n}\n\n<form (ngSubmit)=\"submit()\" [formGroup]=\"form\" class=\"flex flex-col gap-6 h-full\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <mn-lib-select\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"getSelectProps(rowField.field)\"\n          ></mn-lib-select>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-1 pl-2 pt-1\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              rows: asField(rowField.field).rows || 4,\n              resize: 'vertical',\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-textarea>\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT) {\n        <div>\n          @if (isFieldLoading(asKey(rowField.field.key))) {\n            <div class=\"flex items-center gap-2 py-2 text-sm text-base-content/50\">\n              <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n              {{ labels.loadingOptions }}\n            </div>\n          }\n          @if (!isFieldLoading(asKey(rowField.field.key))) {\n            <mn-lib-multi-select\n              [formControlName]=\"asKey(rowField.field.key)\"\n              [props]=\"asAny({\n                id: asKey(rowField.field.key),\n                label: asField(rowField.field).label,\n                options: getFieldOptions(rowField.field),\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n              })\"\n            ></mn-lib-multi-select>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"color\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"w-10 h-10 rounded-lg border border-base-300 cursor-pointer p-0.5\"\n              [value]=\"getColorValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onColorChange(rowField.field, $event)\"\n            />\n            <span class=\"text-sm text-base-content/60 font-mono\">{{ getColorValue(rowField.field) }}</span>\n          </div>\n          @if (asField(rowField.field).swatches) {\n            <div class=\"flex gap-1.5 mt-1\">\n              @for (swatch of asField(rowField.field).swatches; track swatch) {\n                <button\n                  mnButton\n                  [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                  type=\"button\"\n                  class=\"w-6 h-6 rounded-md border border-base-300 cursor-pointer transition-transform hover:scale-110\"\n                  [style.background-color]=\"swatch\"\n                  [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n                  [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n                  (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n                  [attr.aria-label]=\"'Select color ' + swatch\"\n                ></button>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <span [id]=\"'rating-label-' + asKey(rowField.field.key)\"\n                class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </span>\n          <div [attr.aria-labelledby]=\"'rating-label-' + asKey(rowField.field.key)\" class=\"flex items-center gap-1\"\n               role=\"group\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\n                mnButton\n                [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                type=\"button\"\n                class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n                [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n                [class.text-base-300]=\"star > getRatingValue(rowField.field)\"\n                [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n                (click)=\"setRating(rowField.field, star)\"\n              >\n                &#9733;\n              </button>\n            }\n            <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"range\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"flex-1 h-2 bg-base-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n              [attr.min]=\"asField(rowField.field).min ?? 0\"\n              [attr.max]=\"asField(rowField.field).max ?? 100\"\n              [attr.step]=\"asField(rowField.field).step ?? 1\"\n              [value]=\"getSliderValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onSliderChange(rowField.field, $event)\"\n            />\n            @if (asField(rowField.field).showValue !== false) {\n              <span class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n                {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n              </span>\n            }\n          </div>\n          <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n            <span>{{ asField(rowField.field).min ?? 0 }}</span>\n            <span>{{ asField(rowField.field).max ?? 100 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div>\n          <mn-lib-file-input\n            (cleared)=\"onFileCleared(rowField.field)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              accept: asField(rowField.field).accept,\n              multiple: asField(rowField.field).multiple,\n              maxFiles: asField(rowField.field).maxFiles,\n              maxSize: asField(rowField.field).maxSize,\n              displayMode: asField(rowField.field).displayMode,\n              dropzoneHint: asField(rowField.field).dropzoneHint,\n              replaceLabel: asField(rowField.field).replaceLabel,\n              removeLabel: asField(rowField.field).removeLabel,\n              currentUrl: asField(rowField.field).currentUrl,\n              currentUrls: asField(rowField.field).currentUrls,\n              disabled: isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\n            })\"\n          ></mn-lib-file-input>\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Shared template for MULTI_SELECT_TABLE and SINGLE_SELECT_TABLE -->\n  <ng-template #selectTableTemplate let-rowField>\n    <div class=\"flex flex-col gap-1\">\n      @if (asField(rowField.field).label) {\n        <span class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          @if (hasRequiredValidator(rowField.field)) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </span>\n      }\n      <mn-table\n        [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n        [attr.aria-label]=\"asField(rowField.field).label || null\"\n        (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n      ></mn-table>\n      @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n        <div class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ labels.fieldRequired }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 pb-6 border-t border-base-300 mt-auto sticky bottom-0 bg-base-100 z-10\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (mousedown)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -8001,126 +8535,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 type: Output
             }] } });
 
-const mnIconVariants = tv({
-    base: 'inline-flex shrink-0',
-    variants: {
-        color: {
-            current: 'text-current',
-            primary: 'text-primary',
-            secondary: 'text-neutral',
-            danger: 'text-error',
-            warning: 'text-warning',
-            success: 'text-success',
-            accent: 'text-accent',
-        },
-    },
-    defaultVariants: {
-        color: 'current',
-    },
-});
-
-// Inline SVGs sourced from the .svg files in the ./icons/ directory
-const pistolSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.72 14.56 9 10h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v4c2.5 0 1 4 1 4-4 6-1 6-1 6h3.38a1 1 0 0 0 .89-.55za1 1 0 0 1 .9-.56H13a2 2 0 0 0 2-2v-1a1 1 0 0 1 1-1" /></svg>`;
-const pendingSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v5l4 2" /><path d="M14 20.775A9 9 0 0112 21" /><path d="M19 17.656a9 9 0 01-1.5 1.456" /><path d="M21 12a9 9 0 01-.228 2" /><path d="M21 8h-5" /><path d="M7.5 19.794c-6-3.464-6-12.124 0-15.588A9 9 0 0112 3a9.75 9.75 0 016.74 2.74L21 8V3" /></svg>`;
-const MN_ICON_MAP = {
-    pistol: pistolSvg,
-    pending: pendingSvg,
-};
-
-class MnIcon {
-    data = {};
-    sanitizer = inject(DomSanitizer);
-    el = inject(ElementRef);
-    svgContent = '';
-    get iconSize() {
-        return this.data.size ?? 24;
-    }
-    get hostClasses() {
-        return mnIconVariants({
-            color: this.data.color,
-        });
-    }
-    resolvedName = null;
-    ngOnInit() {
-        const attrs = this.el.nativeElement.attributes;
-        for (const item of Array.from(attrs)) {
-            const attr = item.name.toLowerCase();
-            if (attr.startsWith('mnicon')) {
-                const iconKey = attr.slice('mnicon'.length);
-                for (const key of Object.keys(MN_ICON_MAP)) {
-                    if (key.toLowerCase() === iconKey) {
-                        this.resolvedName = key;
-                        break;
-                    }
-                }
-                if (this.resolvedName)
-                    break;
-            }
-        }
-        this.updateContent();
-    }
-    ngOnChanges() {
-        this.updateContent();
-    }
-    updateContent() {
-        const name = this.data.name ?? this.resolvedName;
-        if (name) {
-            const raw = MN_ICON_MAP[name];
-            if (raw) {
-                const size = this.iconSize;
-                const isFullSvg = raw.trim().startsWith('<svg');
-                if (isFullSvg) {
-                    const sized = raw.replace(/<svg([^>]*)>/, (_match, attrs) => {
-                        let updated = attrs.replace(/width="[^"]*"/, `width="${size}"`);
-                        updated = updated.replace(/height="[^"]*"/, `height="${size}"`);
-                        if (!attrs.includes('width='))
-                            updated += ` width="${size}"`;
-                        if (!attrs.includes('height='))
-                            updated += ` height="${size}"`;
-                        return `<svg${updated}>`;
-                    });
-                    this.svgContent = this.sanitizer.bypassSecurityTrustHtml(sized);
-                }
-                else {
-                    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${raw}</svg>`;
-                    this.svgContent = this.sanitizer.bypassSecurityTrustHtml(svg);
-                }
-            }
-            else {
-                this.svgContent = '';
-            }
-        }
-        else {
-            this.svgContent = '';
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnIcon, isStandalone: true, selector: "mn-icon", inputs: { data: "data" }, host: { properties: { "class": "this.hostClasses" } }, usesOnChanges: true, ngImport: i0, template: "<span\n  [style.width.px]=\"iconSize\"\n  [style.height.px]=\"iconSize\"\n  style=\"display: inline-flex; align-items: center; justify-content: center;\"\n  [innerHTML]=\"svgContent\"\n></span>\n" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIcon, decorators: [{
-            type: Component,
-            args: [{ selector: 'mn-icon', standalone: true, template: "<span\n  [style.width.px]=\"iconSize\"\n  [style.height.px]=\"iconSize\"\n  style=\"display: inline-flex; align-items: center; justify-content: center;\"\n  [innerHTML]=\"svgContent\"\n></span>\n" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-// AUTO-GENERATED — do not edit manually.
-// Run `npm run generate:icons` to regenerate after modifying MN_ICON_MAP.
-class MnIconAttributes {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIconAttributes, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: MnIconAttributes, isStandalone: true, selector: "mn-icon[mnIconPistol], mn-icon[mnIconPending]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnIconAttributes, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'mn-icon[mnIconPistol], mn-icon[mnIconPending]',
-                    standalone: true,
-                }]
-        }] });
-
 /**
  * Injection token for the base URL used by all CRUD service requests.
  *
@@ -8622,5 +9036,5 @@ function enableMnPreviewMode(configService, langService, allowedOrigins) {
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnSelectableCollectionBase, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
+export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnSelect, MnSelectableCollectionBase, MnShowAboveDirective, MnShowBelowDirective, MnSkeleton, MnTabComponent, MnTable, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnBadgeVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
 //# sourceMappingURL=mn-angular-lib.mjs.map