mn-angular-lib 1.0.154 → 1.0.156

package/fesm2022/mn-angular-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, inject, HostBinding, Input, Component, ApplicationRef, APP_INITIALIZER, Pipe, DestroyRef, signal, ChangeDetectionStrategy, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, computed, Output, input, output, Injector, viewChildren, linkedSignal, afterNextRender, ChangeDetectorRef, viewChild, Renderer2, HostListener, ViewChild, TemplateRef, ViewContainerRef, forwardRef, afterEveryRender, ViewChildren, EnvironmentInjector, createComponent, isSignal, effect, untracked, ViewEncapsulation } from '@angular/core';
+import { InjectionToken, inject, Injectable, HostBinding, Input, Component, ApplicationRef, APP_INITIALIZER, Pipe, DestroyRef, signal, ChangeDetectionStrategy, Optional, SkipSelf, Attribute, Directive, ElementRef, EventEmitter, computed, Output, input, output, Injector, viewChildren, linkedSignal, afterNextRender, ChangeDetectorRef, viewChild, Renderer2, HostListener, ViewChild, TemplateRef, ViewContainerRef, forwardRef, afterEveryRender, ViewChildren, EnvironmentInjector, createComponent, isSignal, effect, untracked, ViewEncapsulation } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
 import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, of, takeUntil, map, catchError } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -11,6 +11,7 @@ import * as i1$1 from '@angular/forms';
 import { NgControl, Validators, FormsModule, NG_VALUE_ACCESSOR, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import JSON5 from 'json5';
 import { LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX, LucideCalendarDays, LucideChevronLeft, LucideChevronRight, LucideChevronDown, LucideEllipsisVertical, LucideSearchX, LucideDynamicIcon, LucideArrowLeft, LucideArrowRight, LucideCheck, LucideInbox, LucideFilter, LucideFunnel, LucideTriangleAlert, LucideCircleAlert } from '@lucide/angular';
+import { Router, ActivatedRoute } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
 
 // projects/mn-angular-lib/src/lib/mn-mn-alert/mn-mn-alert.tokens.ts
@@ -26,6 +27,7 @@ const DEFAULT_MN_ALERT_CONFIG = {
     },
     icons: {},
     fallbackDuration: 4000,
+    maxVisible: 3,
     finalize: (a) => a
 };
 
@@ -45,25 +47,55 @@ const uid = () => `mn_${++COUNTER}`;
 class MnAlertStore {
     _alerts$ = new BehaviorSubject([]);
     alerts$ = this._alerts$.asObservable();
+    /** Host configuration, when the app provided one. Only `maxVisible` is read here — the
+     *  per-kind durations are resolved by {@link MnAlertService} before an alert reaches the store. */
+    cfg = inject(MN_ALERT_CONFIG, { optional: true });
+    /** In-flight auto-dismiss timers keyed by alert id, so an alert that leaves early (dismissed
+     *  by hand, or pushed out by the visible cap) never fires a stale timeout later. */
+    timers = new Map();
+    /** How many alerts stay on screen at once; showing more drops the oldest ones. */
+    get maxVisible() {
+        const configured = this.cfg?.maxVisible;
+        return typeof configured === 'number' && configured > 0
+            ? configured
+            : DEFAULT_MN_ALERT_CONFIG.maxVisible;
+    }
     show(partial) {
         // Ensure every alert has a numeric duration: use provided or fall back to per-kind default
         const computedDuration = partial.duration ?? DEFAULT_MN_ALERT_CONFIG.durations[partial.kind ?? ''] ?? DEFAULT_MN_ALERT_CONFIG.fallbackDuration;
         const a = { id: uid(), ...partial, duration: computedDuration };
-        this._alerts$.next([...this._alerts$.value, a]);
+        // Newest alert last; anything beyond the cap is trimmed off the front (the oldest still
+        // visible), so a burst of alerts scrolls rather than piling up.
+        const queued = [...this._alerts$.value, a];
+        const overflow = queued.length - this.maxVisible;
+        if (overflow > 0) {
+            queued.splice(0, overflow).forEach(dropped => this.clearTimer(dropped.id));
+        }
+        this._alerts$.next(queued);
         if (typeof a.duration === 'number' && a.duration > 0) {
-            setTimeout(() => this.dismiss(a.id), a.duration);
+            this.timers.set(a.id, setTimeout(() => this.dismiss(a.id), a.duration));
         }
         return a.id;
     }
     dismiss(id) {
         const list = this._alerts$.value;
         if (list.some(x => x.id === id)) {
+            this.clearTimer(id);
             this._alerts$.next(list.filter(x => x.id !== id));
         }
     }
     clear() {
+        this.timers.forEach(t => clearTimeout(t));
+        this.timers.clear();
         this._alerts$.next([]);
     }
+    clearTimer(id) {
+        const timer = this.timers.get(id);
+        if (timer !== undefined) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertStore, providedIn: 'root' });
 }
@@ -749,6 +781,17 @@ class MnAlertOutletComponent {
     getAlertClasses(a) {
         return mnAlertVariants({ kind: a.kind, variant: a.variant });
     }
+    /**
+     * The lifetime (ms) to run the countdown bar over, or null when no bar should show: an alert
+     * that never auto-dismisses has nothing to count down, and one already leaving would only
+     * restart the animation mid-exit.
+     */
+    countdownDuration(v) {
+        if (v.leaving)
+            return null;
+        const duration = v.alert.duration;
+        return typeof duration === 'number' && duration > 0 ? duration : null;
+    }
     contextFor(a) {
         return {
             $implicit: a,
@@ -924,11 +967,11 @@ class MnAlertOutletComponent {
             && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnAlertOutletComponent, isStandalone: true, selector: "mn-alert-outlet", inputs: { swipeAxis: "swipeAxis", template: "template" }, ngImport: i0, template: "<div class=\"fixed top-4 left-0 right-0 z-[9999] flex flex-col w-full px-2 sm:px-0 sm:left-auto sm:right-4 sm:max-w-sm\">\n  @for (v of views(); track trackById($index, v)) {\n    <div\n      class=\"mn-alert-item\"\n      [class.dragging]=\"v.dragging\"\n      [class.leaving]=\"v.leaving\"\n      [style.touch-action]=\"touchAction\"\n      [style.transform]=\"itemTransform(v)\"\n      [style.opacity]=\"itemOpacity(v)\"\n      (pointerdown)=\"onPointerDown($event, v)\"\n      (pointermove)=\"onPointerMove($event, v)\"\n      (pointerup)=\"onPointerUp($event, v)\"\n      (pointercancel)=\"onPointerUp($event, v)\"\n    >\n      <div class=\"mn-alert-inner\">\n        @if (template) {\n          <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"contextFor(v.alert)\">\n          </ng-container>\n        } @else {\n          <div [class]=\"getAlertClasses(v.alert)\" [class.extra]=\"v.alert.cssClass\" class=\"relative\">\n            <div class=\"flex-1 min-w-0 pr-8\">\n              <h4 class=\"font-semibold text-sm\">{{ v.alert.title }}</h4>\n              @if (v.alert.subTitle) {\n                <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ v.alert.subTitle }}</p>\n              }\n            </div>\n            <button\n              [attr.aria-label]=\"closeLabel\"\n              mnButton\n              [data]=\"{ size: 'md', variant: 'text' }\"\n              (click)=\"dismissAlert(v.alert.id)\"\n              class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n              type=\"button\"\n            >\n              &times;\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-alert-exit: .32s}.mn-alert-item{display:grid;grid-template-rows:1fr;margin-bottom:.75rem;touch-action:pan-y;cursor:grab;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity var(--mn-alert-exit) ease,grid-template-rows var(--mn-alert-exit) cubic-bezier(.4,0,.2,1),margin-bottom var(--mn-alert-exit) cubic-bezier(.4,0,.2,1)}.mn-alert-item:last-child{margin-bottom:0}.mn-alert-item.dragging{transition:none;cursor:grabbing;-webkit-user-select:none;user-select:none}.mn-alert-inner{min-height:0}.mn-alert-item.leaving{grid-template-rows:0fr;opacity:0;margin-bottom:0;pointer-events:none}.mn-alert-item.leaving .mn-alert-inner{overflow:hidden}@media(prefers-reduced-motion:reduce){.mn-alert-item{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnAlertOutletComponent, isStandalone: true, selector: "mn-alert-outlet", inputs: { swipeAxis: "swipeAxis", template: "template" }, ngImport: i0, template: "<div class=\"fixed top-4 left-0 right-0 z-[9999] flex flex-col w-full px-2 sm:px-0 sm:left-auto sm:right-4 sm:max-w-sm\">\n  @for (v of views(); track trackById($index, v)) {\n    <div\n      class=\"mn-alert-item\"\n      [class.dragging]=\"v.dragging\"\n      [class.leaving]=\"v.leaving\"\n      [style.touch-action]=\"touchAction\"\n      [style.transform]=\"itemTransform(v)\"\n      [style.opacity]=\"itemOpacity(v)\"\n      (pointerdown)=\"onPointerDown($event, v)\"\n      (pointermove)=\"onPointerMove($event, v)\"\n      (pointerup)=\"onPointerUp($event, v)\"\n      (pointercancel)=\"onPointerUp($event, v)\"\n    >\n      <div class=\"mn-alert-inner\">\n        @if (template) {\n          <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"contextFor(v.alert)\">\n          </ng-container>\n        } @else {\n          <div [class.extra]=\"v.alert.cssClass\" [class]=\"getAlertClasses(v.alert)\" class=\"relative overflow-hidden\">\n            <div class=\"flex-1 min-w-0 pr-8\">\n              <h4 class=\"font-semibold text-sm\">{{ v.alert.title }}</h4>\n              @if (v.alert.subTitle) {\n                <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ v.alert.subTitle }}</p>\n              }\n            </div>\n            <button\n              [attr.aria-label]=\"closeLabel\"\n              mnButton\n              [data]=\"{ size: 'md', variant: 'text' }\"\n              (click)=\"dismissAlert(v.alert.id)\"\n              class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n              type=\"button\"\n            >\n              &times;\n            </button>\n            @if (countdownDuration(v); as ms) {\n              <span aria-hidden=\"true\" class=\"mn-alert-progress\">\n                <span [style.animation-duration.ms]=\"ms\" class=\"mn-alert-progress-bar\"></span>\n              </span>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-alert-exit: .32s}.mn-alert-item{display:grid;grid-template-rows:1fr;margin-bottom:.75rem;touch-action:pan-y;cursor:grab;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity var(--mn-alert-exit) ease,grid-template-rows var(--mn-alert-exit) cubic-bezier(.4,0,.2,1),margin-bottom var(--mn-alert-exit) cubic-bezier(.4,0,.2,1)}.mn-alert-item:last-child{margin-bottom:0}.mn-alert-item.dragging{transition:none;cursor:grabbing;-webkit-user-select:none;user-select:none}.mn-alert-inner{min-height:0}.mn-alert-item.leaving{grid-template-rows:0fr;opacity:0;margin-bottom:0;pointer-events:none}.mn-alert-item.leaving .mn-alert-inner{overflow:hidden}.mn-alert-progress{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;background-color:color-mix(in srgb,currentColor 18%,transparent);pointer-events:none}.mn-alert-progress-bar{display:block;height:100%;background-color:currentColor;opacity:.55;transform-origin:left center;animation-name:mn-alert-countdown;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes mn-alert-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.mn-alert-item{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnAlertOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-alert-outlet', standalone: true, imports: [CommonModule, MnButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fixed top-4 left-0 right-0 z-[9999] flex flex-col w-full px-2 sm:px-0 sm:left-auto sm:right-4 sm:max-w-sm\">\n  @for (v of views(); track trackById($index, v)) {\n    <div\n      class=\"mn-alert-item\"\n      [class.dragging]=\"v.dragging\"\n      [class.leaving]=\"v.leaving\"\n      [style.touch-action]=\"touchAction\"\n      [style.transform]=\"itemTransform(v)\"\n      [style.opacity]=\"itemOpacity(v)\"\n      (pointerdown)=\"onPointerDown($event, v)\"\n      (pointermove)=\"onPointerMove($event, v)\"\n      (pointerup)=\"onPointerUp($event, v)\"\n      (pointercancel)=\"onPointerUp($event, v)\"\n    >\n      <div class=\"mn-alert-inner\">\n        @if (template) {\n          <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"contextFor(v.alert)\">\n          </ng-container>\n        } @else {\n          <div [class]=\"getAlertClasses(v.alert)\" [class.extra]=\"v.alert.cssClass\" class=\"relative\">\n            <div class=\"flex-1 min-w-0 pr-8\">\n              <h4 class=\"font-semibold text-sm\">{{ v.alert.title }}</h4>\n              @if (v.alert.subTitle) {\n                <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ v.alert.subTitle }}</p>\n              }\n            </div>\n            <button\n              [attr.aria-label]=\"closeLabel\"\n              mnButton\n              [data]=\"{ size: 'md', variant: 'text' }\"\n              (click)=\"dismissAlert(v.alert.id)\"\n              class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n              type=\"button\"\n            >\n              &times;\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-alert-exit: .32s}.mn-alert-item{display:grid;grid-template-rows:1fr;margin-bottom:.75rem;touch-action:pan-y;cursor:grab;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity var(--mn-alert-exit) ease,grid-template-rows var(--mn-alert-exit) cubic-bezier(.4,0,.2,1),margin-bottom var(--mn-alert-exit) cubic-bezier(.4,0,.2,1)}.mn-alert-item:last-child{margin-bottom:0}.mn-alert-item.dragging{transition:none;cursor:grabbing;-webkit-user-select:none;user-select:none}.mn-alert-inner{min-height:0}.mn-alert-item.leaving{grid-template-rows:0fr;opacity:0;margin-bottom:0;pointer-events:none}.mn-alert-item.leaving .mn-alert-inner{overflow:hidden}@media(prefers-reduced-motion:reduce){.mn-alert-item{transition:none}}\n"] }]
+            args: [{ selector: 'mn-alert-outlet', standalone: true, imports: [CommonModule, MnButton], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fixed top-4 left-0 right-0 z-[9999] flex flex-col w-full px-2 sm:px-0 sm:left-auto sm:right-4 sm:max-w-sm\">\n  @for (v of views(); track trackById($index, v)) {\n    <div\n      class=\"mn-alert-item\"\n      [class.dragging]=\"v.dragging\"\n      [class.leaving]=\"v.leaving\"\n      [style.touch-action]=\"touchAction\"\n      [style.transform]=\"itemTransform(v)\"\n      [style.opacity]=\"itemOpacity(v)\"\n      (pointerdown)=\"onPointerDown($event, v)\"\n      (pointermove)=\"onPointerMove($event, v)\"\n      (pointerup)=\"onPointerUp($event, v)\"\n      (pointercancel)=\"onPointerUp($event, v)\"\n    >\n      <div class=\"mn-alert-inner\">\n        @if (template) {\n          <ng-container\n            [ngTemplateOutlet]=\"template\"\n            [ngTemplateOutletContext]=\"contextFor(v.alert)\">\n          </ng-container>\n        } @else {\n          <div [class.extra]=\"v.alert.cssClass\" [class]=\"getAlertClasses(v.alert)\" class=\"relative overflow-hidden\">\n            <div class=\"flex-1 min-w-0 pr-8\">\n              <h4 class=\"font-semibold text-sm\">{{ v.alert.title }}</h4>\n              @if (v.alert.subTitle) {\n                <p class=\"text-sm mt-1 opacity-90 leading-tight\">{{ v.alert.subTitle }}</p>\n              }\n            </div>\n            <button\n              [attr.aria-label]=\"closeLabel\"\n              mnButton\n              [data]=\"{ size: 'md', variant: 'text' }\"\n              (click)=\"dismissAlert(v.alert.id)\"\n              class=\"absolute top-2 right-2 shrink-0 !text-current hover:!bg-current/10\"\n              type=\"button\"\n            >\n              &times;\n            </button>\n            @if (countdownDuration(v); as ms) {\n              <span aria-hidden=\"true\" class=\"mn-alert-progress\">\n                <span [style.animation-duration.ms]=\"ms\" class=\"mn-alert-progress-bar\"></span>\n              </span>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{--mn-alert-exit: .32s}.mn-alert-item{display:grid;grid-template-rows:1fr;margin-bottom:.75rem;touch-action:pan-y;cursor:grab;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity var(--mn-alert-exit) ease,grid-template-rows var(--mn-alert-exit) cubic-bezier(.4,0,.2,1),margin-bottom var(--mn-alert-exit) cubic-bezier(.4,0,.2,1)}.mn-alert-item:last-child{margin-bottom:0}.mn-alert-item.dragging{transition:none;cursor:grabbing;-webkit-user-select:none;user-select:none}.mn-alert-inner{min-height:0}.mn-alert-item.leaving{grid-template-rows:0fr;opacity:0;margin-bottom:0;pointer-events:none}.mn-alert-item.leaving .mn-alert-inner{overflow:hidden}.mn-alert-progress{position:absolute;left:0;right:0;bottom:0;height:3px;overflow:hidden;background-color:color-mix(in srgb,currentColor 18%,transparent);pointer-events:none}.mn-alert-progress-bar{display:block;height:100%;background-color:currentColor;opacity:.55;transform-origin:left center;animation-name:mn-alert-countdown;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes mn-alert-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(prefers-reduced-motion:reduce){.mn-alert-item{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { swipeAxis: [{
                 type: Input
             }], template: [{
@@ -2342,10 +2385,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * 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.
+ * drop area used by the default display mode plus a `dragging` toggle for the
+ * "release to drop" state while files hover over that dropzone.
  */
 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',
+    base: 'bg-base-100 border-1 border-base-300 text-base-content text-sm outline-none transition-all duration-300 ease-in-out',
     variants: {
         /** Inner padding scale of the clickable control. */
         size: {
@@ -2377,6 +2421,10 @@ const mnFileInputVariants = tv({
         dropzone: {
             true: 'flex flex-col items-center justify-center gap-2 p-6 border-2 border-dashed text-center cursor-pointer hover:border-primary',
         },
+        /** Highlighted "release to drop" appearance while files hover the dropzone. */
+        dragging: {
+            true: 'border-primary bg-primary/10 ring-4 ring-primary/20 scale-[1.01] duration-150',
+        },
         /** Dimmed, non-interactive appearance. */
         disabled: {
             true: 'opacity-50 cursor-not-allowed pointer-events-none',
@@ -2396,6 +2444,10 @@ const mnFileInputVariants = tv({
  * (and a file icon + name for non-images), supports single or multiple selection,
  * several display layouts, and client-side `accept` / `maxSize` / `maxFiles` limits.
  *
+ * Every display mode but `compact` is also a real drop target: dragging files
+ * over it switches the area to a highlighted "release to drop" state, and
+ * dropping runs the files through the same validation as the file picker.
+ *
  * 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`.
@@ -2421,6 +2473,8 @@ class MnFileInput {
     uiConfig = {};
     /** Currently selected files (always an array internally). */
     files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    /** True while files are dragged over the dropzone ("release to drop" state). */
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
     /** Transient message for a rejected selection (accept/maxSize/maxFiles). */
     internalError = signal(null, ...(ngDevMode ? [{ debugName: "internalError" }] : []));
     configService = inject(MnConfigService);
@@ -2463,6 +2517,11 @@ class MnFileInput {
     }, ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
     /** Disabled state pushed by the forms API. */
     formDisabled = false;
+    /**
+     * Nesting depth of the current drag, so that moving across child elements of
+     * the dropzone does not flicker {@link isDragging} off and on again.
+     */
+    dragDepth = 0;
     /**
      * Built-in default error messages in English.
      * Used when `useBuiltInErrorMessages` is true (default); overridable per-field.
@@ -2482,6 +2541,13 @@ class MnFileInput {
     get displayMode() {
         return this.props.displayMode ?? 'dropzone';
     }
+    /**
+     * Whether the current display mode acts as a drop target. `compact` is an
+     * inline button sized for a form row, too small to aim a drag at.
+     */
+    get supportsDrop() {
+        return this.displayMode !== 'compact';
+    }
     /** Whether the control is disabled (via props or the forms API). */
     get isDisabled() {
         return this.formDisabled || !!this.props.disabled;
@@ -2507,6 +2573,7 @@ class MnFileInput {
             shadow: this.props.shadow,
             fullWidth: this.props.fullWidth ?? (this.displayMode !== 'compact'),
             dropzone: this.displayMode === 'dropzone',
+            dragging: this.isDragging(),
             disabled: this.isDisabled,
         });
     }
@@ -2585,6 +2652,57 @@ class MnFileInput {
             return;
         this.addFiles(incoming);
     }
+    /**
+     * Arms the "release to drop" state when a file drag enters the dropzone.
+     * @param event The native dragenter event.
+     */
+    onDragEnter(event) {
+        if (!this.acceptsDrag(event))
+            return;
+        event.preventDefault();
+        this.dragDepth++;
+        this.isDragging.set(true);
+    }
+    /**
+     * Keeps the drop target alive; without a prevented dragover the browser never
+     * fires a drop event.
+     * @param event The native dragover event.
+     */
+    onDragOver(event) {
+        if (!this.acceptsDrag(event))
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'copy';
+        this.isDragging.set(true);
+    }
+    /**
+     * Disarms the "release to drop" state once the drag has left the dropzone
+     * entirely (and not merely crossed into one of its children).
+     * @param event The native dragleave event.
+     */
+    onDragLeave(event) {
+        if (!this.isDragging())
+            return;
+        event.preventDefault();
+        this.dragDepth = Math.max(0, this.dragDepth - 1);
+        if (this.dragDepth === 0)
+            this.isDragging.set(false);
+    }
+    /**
+     * Accepts the dropped files through the same validation as the file picker.
+     * @param event The native drop event.
+     */
+    onDrop(event) {
+        if (!this.acceptsDrag(event))
+            return;
+        event.preventDefault();
+        this.resetDrag();
+        const dropped = Array.from(event.dataTransfer?.files ?? []);
+        if (dropped.length === 0)
+            return;
+        this.addFiles(dropped);
+    }
     /**
      * Removes a newly-selected file by index.
      * @param index Index into the current selection.
@@ -2636,6 +2754,7 @@ class MnFileInput {
         const resolved = this.configService.resolve('mn-file-input', this.sectionPath, instanceId);
         const builtIn = {
             dropzoneHint: 'Click to upload or drag and drop',
+            dropActiveHint: 'Release to drop',
             replaceLabel: 'Replace',
             removeLabel: 'Remove',
         };
@@ -2644,6 +2763,8 @@ class MnFileInput {
             this.uiConfig = { ...this.uiConfig, label: this.props.label };
         if (this.props.dropzoneHint)
             this.uiConfig = { ...this.uiConfig, dropzoneHint: this.props.dropzoneHint };
+        if (this.props.dropActiveHint)
+            this.uiConfig = { ...this.uiConfig, dropActiveHint: this.props.dropActiveHint };
         if (this.props.replaceLabel)
             this.uiConfig = { ...this.uiConfig, replaceLabel: this.props.replaceLabel };
         if (this.props.removeLabel)
@@ -2748,6 +2869,23 @@ class MnFileInput {
         }
         return msgDef;
     }
+    /**
+     * Whether a drag event should be treated as a file drop on this control.
+     * Ignores disabled controls, modes without a drop target, and drags that
+     * carry something other than files (selected text, a link, …) so the page
+     * keeps its default behaviour.
+     */
+    acceptsDrag(event) {
+        if (this.isDisabled || !this.supportsDrop)
+            return false;
+        const types = event.dataTransfer?.types;
+        return !types || Array.from(types).includes('Files');
+    }
+    /** Clears the drag state and its nesting counter. */
+    resetDrag() {
+        this.dragDepth = 0;
+        this.isDragging.set(false);
+    }
     /** Checks a file against the configured `accept` filter (extensions and MIME globs). */
     matchesAccept(file) {
         const accept = this.props.accept;
@@ -2781,11 +2919,11 @@ class MnFileInput {
         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          <svg lucideUpload [size]=\"18\"></svg>\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              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\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              <svg lucideX [size]=\"14\"></svg>\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        <svg lucideUpload [size]=\"18\"></svg>\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              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\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                <svg lucideX [size]=\"16\"></svg>\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                <svg lucideFile [size]=\"22\" class=\"text-base-content/50\"></svg>\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=\"inline-flex h-6 w-6 items-center justify-center rounded-full cursor-pointer transition-colors absolute top-1 right-1 border-none bg-black/60 text-white hover:bg-black/80\"\n              type=\"button\">\n              <svg lucideX [size]=\"14\"></svg>\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            <svg lucideImagePlus [size]=\"22\"></svg>\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        <svg lucideImagePlus [size]=\"28\" class=\"text-base-content/40\"></svg>\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                <svg lucideFile [size]=\"24\" class=\"text-base-content/50\"></svg>\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=\"inline-flex h-8 w-8 items-center justify-center rounded-full cursor-pointer transition-colors hover:bg-base-200 text-base-content/60 hover:text-error\"\n                type=\"button\">\n                <svg lucideTrash2 [size]=\"16\"></svg>\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: LucideFile, selector: "svg[lucideFile]" }, { kind: "component", type: LucideImagePlus, selector: "svg[lucideImagePlus]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: LucideUpload, selector: "svg[lucideUpload]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
+    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: "<!--\n  Drag handling sits on the wrapper so a drop anywhere inside the control counts.\n  onDragEnter/onDragLeave balance out as the drag crosses children, and\n  acceptsDrag() ignores the modes that have no drop target.\n-->\n<div\n  (dragenter)=\"onDragEnter($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.w-full]=\"props.fullWidth !== false && displayMode !== 'compact'\"\n  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          <svg lucideUpload [size]=\"18\"></svg>\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              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\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              <svg lucideX [size]=\"14\"></svg>\n            </button>\n          </span>\n        }\n      </div>\n    }\n\n    <!-- List: compact rows of file icon + name + size -->\n    @case ('list') {\n    <div class=\"relative flex flex-col\">\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        <svg lucideUpload [size]=\"18\"></svg>\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              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\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                <svg lucideX [size]=\"16\"></svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n      @if (isDragging()) {\n        <ng-container [ngTemplateOutlet]=\"dropOverlay\"></ng-container>\n      }\n    </div>\n    }\n\n    <!-- Thumbnail: grid of tiles with overlay remove + add tile -->\n    @case ('thumbnail') {\n    <div class=\"relative 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                <svg lucideFile [size]=\"22\" class=\"text-base-content/50\"></svg>\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=\"inline-flex h-6 w-6 items-center justify-center rounded-full cursor-pointer transition-colors absolute top-1 right-1 border-none bg-black/60 text-white hover:bg-black/80\"\n              type=\"button\">\n              <svg lucideX [size]=\"14\"></svg>\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            <svg lucideImagePlus [size]=\"22\"></svg>\n          </button>\n        }\n      @if (isDragging()) {\n        <ng-container [ngTemplateOutlet]=\"dropOverlay\"></ng-container>\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        <!-- Inert so a drag crossing the icon/hint never reads as leaving the zone -->\n        <span aria-live=\"polite\" class=\"pointer-events-none flex flex-col items-center gap-2\">\n          @if (isDragging()) {\n            <svg [size]=\"28\" class=\"animate-bounce text-primary\" lucideUpload></svg>\n            <span class=\"text-sm font-medium text-primary\">{{ uiConfig.dropActiveHint }}</span>\n          } @else {\n            <svg [size]=\"28\" class=\"text-base-content/40\" lucideImagePlus></svg>\n            <span class=\"text-sm text-base-content/60\">{{ uiConfig.dropzoneHint }}</span>\n          }\n        </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                <svg lucideFile [size]=\"24\" class=\"text-base-content/50\"></svg>\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=\"inline-flex h-8 w-8 items-center justify-center rounded-full cursor-pointer transition-colors text-error hover:bg-error/10\"\n                type=\"button\">\n                <svg lucideTrash2 [size]=\"16\"></svg>\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\n<!--\n  \"Release to drop\" cover for the modes that render their own layout instead of a\n  dropzone. Absolutely positioned so arming it never shifts the layout, and inert\n  so the drag keeps reaching the elements underneath.\n-->\n<ng-template #dropOverlay>\n  <div\n    aria-live=\"polite\"\n    class=\"pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-primary bg-base-100/90 text-center\">\n    <svg [size]=\"24\" class=\"animate-bounce text-primary\" lucideUpload></svg>\n    <span class=\"px-2 text-sm font-medium text-primary\">{{ uiConfig.dropActiveHint }}</span>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { kind: "component", type: LucideFile, selector: "svg[lucideFile]" }, { kind: "component", type: LucideImagePlus, selector: "svg[lucideImagePlus]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: LucideUpload, selector: "svg[lucideUpload]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] });
 }
 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, LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX], 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          <svg lucideUpload [size]=\"18\"></svg>\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              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\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              <svg lucideX [size]=\"14\"></svg>\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        <svg lucideUpload [size]=\"18\"></svg>\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              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\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                <svg lucideX [size]=\"16\"></svg>\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                <svg lucideFile [size]=\"22\" class=\"text-base-content/50\"></svg>\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=\"inline-flex h-6 w-6 items-center justify-center rounded-full cursor-pointer transition-colors absolute top-1 right-1 border-none bg-black/60 text-white hover:bg-black/80\"\n              type=\"button\">\n              <svg lucideX [size]=\"14\"></svg>\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            <svg lucideImagePlus [size]=\"22\"></svg>\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        <svg lucideImagePlus [size]=\"28\" class=\"text-base-content/40\"></svg>\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                <svg lucideFile [size]=\"24\" class=\"text-base-content/50\"></svg>\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=\"inline-flex h-8 w-8 items-center justify-center rounded-full cursor-pointer transition-colors hover:bg-base-200 text-base-content/60 hover:text-error\"\n                type=\"button\">\n                <svg lucideTrash2 [size]=\"16\"></svg>\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" }]
+            args: [{ selector: 'mn-lib-file-input', standalone: true, imports: [CommonModule, NgClass, MnErrorMessage, LucideFile, LucideImagePlus, LucideTrash2, LucideUpload, LucideX], template: "<!--\n  Drag handling sits on the wrapper so a drop anywhere inside the control counts.\n  onDragEnter/onDragLeave balance out as the drag crosses children, and\n  acceptsDrag() ignores the modes that have no drop target.\n-->\n<div\n  (dragenter)=\"onDragEnter($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.w-full]=\"props.fullWidth !== false && displayMode !== 'compact'\"\n  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          <svg lucideUpload [size]=\"18\"></svg>\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              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\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              <svg lucideX [size]=\"14\"></svg>\n            </button>\n          </span>\n        }\n      </div>\n    }\n\n    <!-- List: compact rows of file icon + name + size -->\n    @case ('list') {\n    <div class=\"relative flex flex-col\">\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        <svg lucideUpload [size]=\"18\"></svg>\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              <svg lucideFile [size]=\"16\" class=\"text-base-content/50\"></svg>\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                <svg lucideX [size]=\"16\"></svg>\n              </button>\n            </div>\n          }\n        </div>\n      }\n      @if (isDragging()) {\n        <ng-container [ngTemplateOutlet]=\"dropOverlay\"></ng-container>\n      }\n    </div>\n    }\n\n    <!-- Thumbnail: grid of tiles with overlay remove + add tile -->\n    @case ('thumbnail') {\n    <div class=\"relative 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                <svg lucideFile [size]=\"22\" class=\"text-base-content/50\"></svg>\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=\"inline-flex h-6 w-6 items-center justify-center rounded-full cursor-pointer transition-colors absolute top-1 right-1 border-none bg-black/60 text-white hover:bg-black/80\"\n              type=\"button\">\n              <svg lucideX [size]=\"14\"></svg>\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            <svg lucideImagePlus [size]=\"22\"></svg>\n          </button>\n        }\n      @if (isDragging()) {\n        <ng-container [ngTemplateOutlet]=\"dropOverlay\"></ng-container>\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        <!-- Inert so a drag crossing the icon/hint never reads as leaving the zone -->\n        <span aria-live=\"polite\" class=\"pointer-events-none flex flex-col items-center gap-2\">\n          @if (isDragging()) {\n            <svg [size]=\"28\" class=\"animate-bounce text-primary\" lucideUpload></svg>\n            <span class=\"text-sm font-medium text-primary\">{{ uiConfig.dropActiveHint }}</span>\n          } @else {\n            <svg [size]=\"28\" class=\"text-base-content/40\" lucideImagePlus></svg>\n            <span class=\"text-sm text-base-content/60\">{{ uiConfig.dropzoneHint }}</span>\n          }\n        </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                <svg lucideFile [size]=\"24\" class=\"text-base-content/50\"></svg>\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=\"inline-flex h-8 w-8 items-center justify-center rounded-full cursor-pointer transition-colors text-error hover:bg-error/10\"\n                type=\"button\">\n                <svg lucideTrash2 [size]=\"16\"></svg>\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\n<!--\n  \"Release to drop\" cover for the modes that render their own layout instead of a\n  dropzone. Absolutely positioned so arming it never shifts the layout, and inert\n  so the drag keeps reaching the elements underneath.\n-->\n<ng-template #dropOverlay>\n  <div\n    aria-live=\"polite\"\n    class=\"pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-primary bg-base-100/90 text-center\">\n    <svg [size]=\"24\" class=\"animate-bounce text-primary\" lucideUpload></svg>\n    <span class=\"px-2 text-sm font-medium text-primary\">{{ uiConfig.dropActiveHint }}</span>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4005,8 +4143,14 @@ class MnMultiSelect {
     /** Layout classes for the anchored popover panel. The mobile sheet is rendered by
      *  mn-bottom-sheet instead, so it no longer needs a branch here. */
     panelClasses = 'fixed z-9999 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto';
+    /** Layout classes for the invisible click shield rendered under the anchored panel.
+     *  One step below the panel's z-index so the panel itself stays clickable, and above
+     *  any modal/drawer chrome (which tops out well under 9998). */
+    shieldClasses = 'fixed inset-0 z-9998';
     /** The anchored popover panel currently moved into `document.body`, if any. */
     movedPanel = null;
+    /** The click shield currently moved into `document.body`, if any. */
+    movedShield = null;
     /** Option count at which the search input auto-enables when `searchable` is unset. */
     static DEFAULT_SEARCH_THRESHOLD = 8;
     /** Tailwind's `sm` breakpoint — below this the panel renders as a bottom sheet.
@@ -4052,6 +4196,13 @@ class MnMultiSelect {
     set dropdownRef(ref) {
         this.movedPanel = this.portal(ref?.nativeElement ?? null, this.movedPanel);
     }
+    /**
+     * The click shield sitting under the anchored panel, portalled alongside it for the same
+     * reason: `position: fixed` must resolve against the viewport, not a transformed ancestor.
+     */
+    set shieldRef(ref) {
+        this.movedShield = this.portal(ref?.nativeElement ?? null, this.movedShield);
+    }
     /** Currently selected values */
     selectedValues = [];
     isOpen = false;
@@ -4125,6 +4276,7 @@ class MnMultiSelect {
             this.unlockBodyScroll();
             // Guarantee the portalled elements never outlive the component.
             this.movedPanel = this.portal(null, this.movedPanel);
+            this.movedShield = this.portal(null, this.movedShield);
             this.movedSheet = this.portal(null, this.movedSheet);
         });
     }
@@ -4183,6 +4335,19 @@ class MnMultiSelect {
         const threshold = this.props.searchThreshold ?? MnMultiSelect.DEFAULT_SEARCH_THRESHOLD;
         return this.props.options.length >= threshold;
     }
+    /**
+     * Dismisses the anchored panel from a shield click, and stops the event there.
+     *
+     * Swallowing it is the point: the shield spans the viewport, so the click would otherwise
+     * land on whatever the panel was floating over. Inside a modal that is the modal's own
+     * backdrop, and "close the dropdown" would double as "throw away the modal". A first click
+     * that only dismisses the overlay is also how native selects and menus behave.
+     */
+    onShieldClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.close();
+    }
     onDocumentClick(event) {
         const target = event.target;
         // The panel lives at the body root once open, so it is not a descendant of the
@@ -4510,11 +4675,11 @@ class MnMultiSelect {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it needs a header to name the field and\n               an explicit way out \u2014 tapping the trigger again is not reachable here. -->\n          <div class=\"flex items-center justify-between gap-x-2 px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"uiConfig.closeLabel || 'Close'\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: props.searchPlaceholder || 'Search...',\n            ariaLabel: props.searchPlaceholder || 'Search...',\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ uiConfig.noOptionsFound || 'No options found' }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { 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: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onWindowScrollOrResize()", "window:resize": "onWindowScrollOrResize()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "shieldRef", first: true, predicate: ["shield"], descendants: true }, { propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- Only the \u00D7 removes. The chip body deliberately carries no handler, so a click\n               anywhere on it bubbles to the trigger and just opens/closes the panel \u2014 clicking\n               the trigger to dismiss the dropdown must never silently delete a selection. -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it needs a header to name the field and\n               an explicit way out \u2014 tapping the trigger again is not reachable here. -->\n          <div class=\"flex items-center justify-between gap-x-2 px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"uiConfig.closeLabel || 'Close'\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to\n           dismiss\" is literally true. It also *consumes* that click: without it the click\n           reaches whatever sits underneath \u2014 inside a modal that is the modal's own\n           backdrop, so dismissing the dropdown would tear down the whole modal with it.\n           Portalled to document.body for the same reason the panel is. It is aria-hidden\n           and unfocusable: the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: props.searchPlaceholder || 'Search...',\n            ariaLabel: props.searchPlaceholder || 'Search...',\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ uiConfig.noOptionsFound || 'No options found' }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MnErrorMessage, selector: "mn-error-message", inputs: ["errorMessage", "id"] }, { 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: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, MnErrorMessage, MnButton, MnInputField, MnBottomSheet, LucideX, LucideChevronDown], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md cursor-pointer\"\n            (click)=\"removeOption(opt, $event)\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it needs a header to name the field and\n               an explicit way out \u2014 tapping the trigger again is not reachable here. -->\n          <div class=\"flex items-center justify-between gap-x-2 px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"uiConfig.closeLabel || 'Close'\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: props.searchPlaceholder || 'Search...',\n            ariaLabel: props.searchPlaceholder || 'Search...',\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ uiConfig.noOptionsFound || 'No options found' }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, MnErrorMessage, MnButton, MnInputField, MnBottomSheet, LucideX, LucideChevronDown], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    #trigger\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-listbox' : null\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <!-- `pr-6` reserves the gutter the caret is absolutely positioned in (right-2 +\n         w-4), so a value can never render underneath it. `min-w-0` lets the chips\n         shrink below their content width, which is what makes truncation possible. -->\n    <div class=\"flex flex-row items-center gap-x-2 flex-wrap min-h-6 min-w-0 pr-6\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else if (isCollapsed) {\n        <span\n          class=\"inline-flex items-center max-w-full truncate bg-base-200 border border-accent text-base-content text-xs px-2 py-0.5 rounded-md\">\n          {{ collapseSummaryText }}\n        </span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <!-- Only the \u00D7 removes. The chip body deliberately carries no handler, so a click\n               anywhere on it bubbles to the trigger and just opens/closes the panel \u2014 clicking\n               the trigger to dismiss the dropdown must never silently delete a selection. -->\n          <span\n            class=\"inline-flex items-center gap-x-1 max-w-full min-w-0 bg-base-200 border border-accent text-base-content text-xs pl-2 py-0.5 rounded-md\">\n            <span [attr.title]=\"opt.label\" class=\"truncate\">{{ opt.label }}</span>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary', hover: false }\"\n              type=\"button\"\n              class=\"text-base-content/50 cursor-pointer shrink-0\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            ><svg lucideX [size]=\"18\"></svg></button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg [size]=\"16\" class=\"text-base-content/50\" lucideChevronDown></svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the panel is presented as a shared bottom sheet: the sheet chrome\n           (backdrop, grabber, swipe/flick-to-dismiss, slide animation) lives in\n           mn-bottom-sheet; this component only projects the field's content into it.\n           The sheet host is portalled to document.body (see the `sheet` ViewChild) so\n           its `position: fixed` anchors to the viewport, not a transformed ancestor. -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"uiConfig.ariaLabel || uiConfig.label || props.label || uiConfig.placeholder || props.placeholder\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div\n          [id]=\"resolvedId + '-listbox'\"\n          aria-multiselectable=\"true\"\n          class=\"flex flex-col flex-1 min-h-0 overflow-hidden\"\n          role=\"listbox\"\n        >\n          <!-- The sheet covers its own trigger, so it needs a header to name the field and\n               an explicit way out \u2014 tapping the trigger again is not reachable here. -->\n          <div class=\"flex items-center justify-between gap-x-2 px-4 pt-1 pb-2 shrink-0\">\n            <p class=\"text-base font-medium text-base-content truncate\">\n              {{ uiConfig.label || props.label || uiConfig.placeholder || props.placeholder || '' }}\n            </p>\n            <button\n              mnButton\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              type=\"button\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"uiConfig.closeLabel || 'Close'\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n        </div>\n      </mn-bottom-sheet>\n    } @else {\n      <!-- A transparent full-viewport shield behind the panel, so \"click anywhere to\n           dismiss\" is literally true. It also *consumes* that click: without it the click\n           reaches whatever sits underneath \u2014 inside a modal that is the modal's own\n           backdrop, so dismissing the dropdown would tear down the whole modal with it.\n           Portalled to document.body for the same reason the panel is. It is aria-hidden\n           and unfocusable: the keyboard equivalent of this click is Escape. -->\n      <div\n        #shield\n        (click)=\"onShieldClick($event)\"\n        [id]=\"resolvedId + '-shield'\"\n        [ngClass]=\"shieldClasses\"\n        aria-hidden=\"true\"\n      ></div>\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        #dropdown\n        (click)=\"$event.stopPropagation()\"\n        [id]=\"resolvedId + '-listbox'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.width]=\"dropdownStyle.width\"\n        aria-multiselectable=\"true\"\n        role=\"listbox\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelBody\"></ng-container>\n      </div>\n    }\n  }\n\n  <!-- The search box + option list, shared verbatim by the sheet and the anchored\n       popover. `isSheet` only tunes spacing/sizing and which element scrolls: in sheet\n       mode the list is the flex scroller; anchored, the popover itself scrolls. -->\n  <ng-template #panelBody>\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        [ngClass]=\"isSheet ? 'px-4 py-2' : 'p-2'\"\n        class=\"border-b border-base-300 shrink-0\"\n      >\n        <mn-lib-input-field\n          (ngModelChange)=\"onSearch($event)\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          [ngModel]=\"searchTerm\"\n          [props]=\"{\n            id: resolvedId + '-search',\n            type: 'search',\n            placeholder: props.searchPlaceholder || 'Search...',\n            ariaLabel: props.searchPlaceholder || 'Search...',\n            fullWidth: true,\n            size: 'sm'\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n    <div [ngClass]=\"isSheet ? 'flex-1 overflow-auto overscroll-contain' : ''\">\n      @for (opt of filteredOptions; track opt.value) {\n        <div\n          (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          (keyup.enter)=\"toggleOption(opt)\"\n          (keyup.space)=\"toggleOption(opt)\"\n          [attr.aria-selected]=\"isSelected(opt)\"\n          [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n          [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n          [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\"\n          class=\"flex items-center gap-x-2 cursor-pointer text-base-content hover:bg-base-200\"\n          role=\"option\"\n          tabindex=\"0\"\n        >\n          <input\n            [checked]=\"isSelected(opt)\"\n            [disabled]=\"opt.disabled || isMaxReached(opt)\"\n            class=\"w-4 h-4 accent-primary pointer-events-none shrink-0\"\n            tabindex=\"-1\"\n            type=\"checkbox\"\n          />\n          <span>{{ opt.label }}</span>\n        </div>\n      }\n      @if (filteredOptions.length === 0) {\n        <div [ngClass]=\"isSheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm'\" class=\"text-base-content/50\">\n          {{ uiConfig.noOptionsFound || 'No options found' }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage !== null) {\n        <mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4524,6 +4689,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }], dropdownRef: [{
                 type: ViewChild,
                 args: ['dropdown', { static: false }]
+            }], shieldRef: [{
+                type: ViewChild,
+                args: ['shield', { static: false }]
             }], sheetRef: [{
                 type: ViewChild,
                 args: ['sheet', { static: false, read: ElementRef }]
@@ -5153,6 +5321,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 args: ['window:resize', []]
             }] } });
 
+/** QWERTY letter rows, lower-case. Rendered upper-case when {@link MnKeyboard.uppercase} is set. */
+const ALPHA_ROWS = [
+    ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
+    ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
+    ['z', 'x', 'c', 'v', 'b', 'n', 'm'],
+];
+/** The digit row that sits above the letters on an alphanumeric keyboard. */
+const DIGIT_ROW = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+/** Phone-style pad rows for the numeric layout. */
+const NUMERIC_ROWS = [
+    ['1', '2', '3'],
+    ['4', '5', '6'],
+    ['7', '8', '9'],
+    ['0'],
+];
+/**
+ * An on-screen keyboard for touch devices that have no keyboard of their own.
+ *
+ * It exists for unattended screens — a tablet on a wall, a kiosk by a door — where
+ * the OS keyboard is either unavailable or unwanted, and where the same field may
+ * need to take a membership number *or* a name. Hence one component with a
+ * {@link layout} switch rather than a separate number pad and text pad.
+ *
+ * It is a controlled component: it never owns the text. The host passes {@link value}
+ * and reacts to {@link valueChange}, exactly like a form control, so the same value
+ * can also be filled by a barcode scanner or a real keyboard without this component
+ * fighting it.
+ *
+ * With {@link presentation} set to `sheet` it mounts inside an {@link MnBottomSheet},
+ * rising from the bottom of the screen and swipeable away — the shape a kiosk wants
+ * so the keys do not permanently occupy half the display.
+ *
+ * The library ships no user-facing English, so every named key takes its caption
+ * from {@link labels}.
+ */
+class MnKeyboard {
+    /** The current text. This component never mutates it — see {@link valueChange}. */
+    value = '';
+    /** Which keys to render. */
+    layout = 'alphanumeric';
+    /** Whether the keys sit in the page or rise from the bottom as a sheet. */
+    presentation = 'inline';
+    /**
+     * Captions and accessible names for the named keys.
+     *
+     * The defaults are language-neutral glyphs rather than words, so a consumer that
+     * forgets to translate still ships no English (or Dutch) from the library. The
+     * accessible name for the keyboard as a whole has no neutral glyph, so it
+     * defaults to empty and the attribute is simply omitted until a host supplies one.
+     */
+    labels = {
+        backspace: '⌫',
+        clear: '⨯',
+        space: '␣',
+        submit: '⏎',
+        keyboard: '',
+    };
+    /** Whether letters are rendered (and typed) upper-case. */
+    uppercase = false;
+    /** Whether to offer a space key. Off for a field that can never contain one. */
+    allowSpace = true;
+    /** Whether to offer a submit key. */
+    showSubmit = true;
+    /** Whether the submit key is currently actionable. */
+    submitDisabled = false;
+    /** Hard cap on the text length, or null for none. */
+    maxLength = null;
+    /** Cap on the sheet height as a fraction of the viewport, in vh (sheet presentation only). */
+    sheetMaxHeightVh = 60;
+    /** Emits the full text after every key press, so the host can drive its own field. */
+    valueChange = new EventEmitter();
+    /** Emits when the submit key is pressed. */
+    submitted = new EventEmitter();
+    /** Emits when a sheet-presented keyboard is swiped or tapped away. */
+    dismissed = new EventEmitter();
+    get hostClasses() {
+        return `mn-keyboard mn-keyboard-${this.layout}`;
+    }
+    /** The character rows to render, driven by {@link layout}. */
+    get rows() {
+        if (this.layout === 'numeric') {
+            return NUMERIC_ROWS;
+        }
+        const letters = this.uppercase
+            ? ALPHA_ROWS.map((row) => row.map((key) => key.toUpperCase()))
+            : ALPHA_ROWS;
+        return this.layout === 'alpha' ? letters : [[...DIGIT_ROW], ...letters];
+    }
+    /** Whether the space key should be offered (never on a digits-only pad). */
+    get spaceVisible() {
+        return this.allowSpace && this.layout !== 'numeric';
+    }
+    /**
+     * Appends a character, respecting {@link maxLength}.
+     * @param key The character pressed.
+     */
+    press(key) {
+        this.emit(this.value + key);
+    }
+    /** Appends a space. */
+    pressSpace() {
+        this.emit(this.value + ' ');
+    }
+    /** Removes the last character. */
+    backspace() {
+        this.emit(this.value.slice(0, -1));
+    }
+    /** Empties the field. */
+    clear() {
+        this.emit('');
+    }
+    /** Reports a submit press. The host decides what submitting means. */
+    submit() {
+        if (this.submitDisabled) {
+            return;
+        }
+        this.submitted.emit(this.value);
+    }
+    /** Reports that a sheet-presented keyboard was dismissed. */
+    onDismiss() {
+        this.dismissed.emit();
+    }
+    /**
+     * Emits a new value, clamped to {@link maxLength}.
+     *
+     * Clamping happens here rather than in each key handler so a paste-like burst
+     * from a scanner and a tapped key are bounded the same way.
+     * @param next The candidate text.
+     */
+    emit(next) {
+        const clamped = this.maxLength !== null && next.length > this.maxLength
+            ? next.slice(0, this.maxLength)
+            : next;
+        if (clamped === this.value) {
+            return;
+        }
+        this.value = clamped;
+        this.valueChange.emit(clamped);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnKeyboard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnKeyboard, isStandalone: true, selector: "mn-keyboard", inputs: { value: "value", layout: "layout", presentation: "presentation", labels: "labels", uppercase: "uppercase", allowSpace: "allowSpace", showSubmit: "showSubmit", submitDisabled: "submitDisabled", maxLength: "maxLength", sheetMaxHeightVh: "sheetMaxHeightVh" }, outputs: { valueChange: "valueChange", submitted: "submitted", dismissed: "dismissed" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<!-- The key block. Rendered directly for `inline`, or projected into the sheet below. -->\n<ng-template #keys>\n  <div [attr.aria-label]=\"labels.keyboard || null\" class=\"mn-keyboard-keys flex flex-col gap-2 p-3\" role=\"group\">\n    @for (row of rows; track $index) {\n      <div class=\"flex justify-center gap-2\">\n        @for (key of row; track key) {\n          <button\n            (click)=\"press(key)\"\n            class=\"mn-keyboard-key flex-1 rounded-lg border border-base-300 bg-base-100 py-4 text-xl font-semibold text-base-content shadow-sm transition-colors hover:bg-base-200 active:bg-base-300\"\n            type=\"button\"\n          >\n            {{ key }}\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"flex justify-center gap-2\">\n      <button\n        (click)=\"backspace()\"\n        [attr.aria-label]=\"labels.backspace\"\n        class=\"mn-keyboard-key mn-keyboard-key-action flex-1 rounded-lg border border-base-300 bg-base-200 py-4 text-base font-medium text-base-content shadow-sm transition-colors hover:bg-base-300\"\n        type=\"button\"\n      >\n        {{ labels.backspace }}\n      </button>\n\n      @if (spaceVisible) {\n        <button\n          (click)=\"pressSpace()\"\n          [attr.aria-label]=\"labels.space\"\n          class=\"mn-keyboard-key mn-keyboard-key-space flex-1 rounded-lg border border-base-300 bg-base-200 py-4 text-base font-medium text-base-content shadow-sm transition-colors hover:bg-base-300\"\n          style=\"flex-grow: 3\"\n          type=\"button\"\n        >\n          {{ labels.space }}\n        </button>\n      }\n\n      <button\n        (click)=\"clear()\"\n        [attr.aria-label]=\"labels.clear\"\n        class=\"mn-keyboard-key mn-keyboard-key-action flex-1 rounded-lg border border-base-300 bg-base-200 py-4 text-base font-medium text-base-content shadow-sm transition-colors hover:bg-base-300\"\n        type=\"button\"\n      >\n        {{ labels.clear }}\n      </button>\n\n      @if (showSubmit) {\n        <button\n          (click)=\"submit()\"\n          [attr.aria-label]=\"labels.submit\"\n          [disabled]=\"submitDisabled\"\n          class=\"mn-keyboard-key mn-keyboard-key-submit flex-1 rounded-lg bg-primary py-4 text-base font-semibold text-primary-content shadow-sm transition-colors hover:opacity-90 disabled:opacity-50\"\n          style=\"flex-grow: 2\"\n          type=\"button\"\n        >\n          {{ labels.submit }}\n        </button>\n      }\n    </div>\n  </div>\n</ng-template>\n\n@if (presentation === 'sheet') {\n  <mn-bottom-sheet\n    (dismiss)=\"onDismiss()\"\n    [ariaLabel]=\"labels.keyboard || undefined\"\n    [maxHeightVh]=\"sheetMaxHeightVh\"\n  >\n    <ng-container [ngTemplateOutlet]=\"keys\"></ng-container>\n  </mn-bottom-sheet>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"keys\"></ng-container>\n}\n", styles: [":host{display:block}.mn-keyboard-key{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}\n"], dependencies: [{ kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnKeyboard, decorators: [{
+            type: Component,
+            args: [{ selector: 'mn-keyboard', standalone: true, imports: [MnBottomSheet, NgTemplateOutlet], template: "<!-- The key block. Rendered directly for `inline`, or projected into the sheet below. -->\n<ng-template #keys>\n  <div [attr.aria-label]=\"labels.keyboard || null\" class=\"mn-keyboard-keys flex flex-col gap-2 p-3\" role=\"group\">\n    @for (row of rows; track $index) {\n      <div class=\"flex justify-center gap-2\">\n        @for (key of row; track key) {\n          <button\n            (click)=\"press(key)\"\n            class=\"mn-keyboard-key flex-1 rounded-lg border border-base-300 bg-base-100 py-4 text-xl font-semibold text-base-content shadow-sm transition-colors hover:bg-base-200 active:bg-base-300\"\n            type=\"button\"\n          >\n            {{ key }}\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"flex justify-center gap-2\">\n      <button\n        (click)=\"backspace()\"\n        [attr.aria-label]=\"labels.backspace\"\n        class=\"mn-keyboard-key mn-keyboard-key-action flex-1 rounded-lg border border-base-300 bg-base-200 py-4 text-base font-medium text-base-content shadow-sm transition-colors hover:bg-base-300\"\n        type=\"button\"\n      >\n        {{ labels.backspace }}\n      </button>\n\n      @if (spaceVisible) {\n        <button\n          (click)=\"pressSpace()\"\n          [attr.aria-label]=\"labels.space\"\n          class=\"mn-keyboard-key mn-keyboard-key-space flex-1 rounded-lg border border-base-300 bg-base-200 py-4 text-base font-medium text-base-content shadow-sm transition-colors hover:bg-base-300\"\n          style=\"flex-grow: 3\"\n          type=\"button\"\n        >\n          {{ labels.space }}\n        </button>\n      }\n\n      <button\n        (click)=\"clear()\"\n        [attr.aria-label]=\"labels.clear\"\n        class=\"mn-keyboard-key mn-keyboard-key-action flex-1 rounded-lg border border-base-300 bg-base-200 py-4 text-base font-medium text-base-content shadow-sm transition-colors hover:bg-base-300\"\n        type=\"button\"\n      >\n        {{ labels.clear }}\n      </button>\n\n      @if (showSubmit) {\n        <button\n          (click)=\"submit()\"\n          [attr.aria-label]=\"labels.submit\"\n          [disabled]=\"submitDisabled\"\n          class=\"mn-keyboard-key mn-keyboard-key-submit flex-1 rounded-lg bg-primary py-4 text-base font-semibold text-primary-content shadow-sm transition-colors hover:opacity-90 disabled:opacity-50\"\n          style=\"flex-grow: 2\"\n          type=\"button\"\n        >\n          {{ labels.submit }}\n        </button>\n      }\n    </div>\n  </div>\n</ng-template>\n\n@if (presentation === 'sheet') {\n  <mn-bottom-sheet\n    (dismiss)=\"onDismiss()\"\n    [ariaLabel]=\"labels.keyboard || undefined\"\n    [maxHeightVh]=\"sheetMaxHeightVh\"\n  >\n    <ng-container [ngTemplateOutlet]=\"keys\"></ng-container>\n  </mn-bottom-sheet>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"keys\"></ng-container>\n}\n", styles: [":host{display:block}.mn-keyboard-key{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], presentation: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], uppercase: [{
+                type: Input
+            }], allowSpace: [{
+                type: Input
+            }], showSubmit: [{
+                type: Input
+            }], submitDisabled: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], sheetMaxHeightVh: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], submitted: [{
+                type: Output
+            }], dismissed: [{
+                type: Output
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
 const mnSelectVariants = tv({
     base: 'bg-base-100 border-1 border-base-300 text-base-content text-sm cursor-pointer hover:bg-base-200 transition-colors duration-300',
     variants: {
@@ -9006,11 +9350,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              fullWidth: true\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              fullWidth: true\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              fullWidth: true\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              fullWidth: true\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              fullWidth: true\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                placeholder: asField(rowField.field).placeholder,\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                collapseThreshold: asField(rowField.field).collapseThreshold,\n                collapsePlaceholder: asField(rowField.field).collapsePlaceholder,\n                allSelectedPlaceholder: asField(rowField.field).allSelectedPlaceholder,\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 [style.--mn-form-cols]=\"row.columns || 1\" class=\"grid gap-4 mn-form-row\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div [style.--mn-form-span]=\"rowField.span || 1\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\"\n                     class=\"flex flex-col gap-2 mn-form-cell\">\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 [style.--mn-form-cols]=\"row.columns || 1\" class=\"grid gap-4 mn-form-row\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div [style.--mn-form-span]=\"rowField.span || 1\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\"\n                 class=\"flex flex-col gap-2 mn-form-cell\">\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        @if (cancelIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\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        @if (submitIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\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}.mn-form-row{grid-template-columns:repeat(var(--mn-form-cols, 1),minmax(0,1fr))}.mn-form-cell{grid-column:span var(--mn-form-span, 1)}@media(max-width:639.98px){.mn-form-row{grid-template-columns:1fr}.mn-form-cell{grid-column:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
+    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              fullWidth: true\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              fullWidth: true\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              fullWidth: true\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              fullWidth: true\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              fullWidth: true\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                placeholder: asField(rowField.field).placeholder,\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                collapseThreshold: asField(rowField.field).collapseThreshold,\n                collapsePlaceholder: asField(rowField.field).collapsePlaceholder,\n                allSelectedPlaceholder: asField(rowField.field).allSelectedPlaceholder,\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              dropActiveHint: asField(rowField.field).dropActiveHint,\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 [style.--mn-form-cols]=\"row.columns || 1\" class=\"grid gap-4 mn-form-row\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div [style.--mn-form-span]=\"rowField.span || 1\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\"\n                     class=\"flex flex-col gap-2 mn-form-cell\">\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 [style.--mn-form-cols]=\"row.columns || 1\" class=\"grid gap-4 mn-form-row\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div [style.--mn-form-span]=\"rowField.span || 1\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\"\n                 class=\"flex flex-col gap-2 mn-form-cell\">\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        @if (cancelIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\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        @if (submitIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\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}.mn-form-row{grid-template-columns:repeat(var(--mn-form-cols, 1),minmax(0,1fr))}.mn-form-cell{grid-column:span var(--mn-form-span, 1)}@media(max-width:639.98px){.mn-form-row{grid-template-columns:1fr}.mn-form-cell{grid-column:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
 }
 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, MnFileInput, MnSelect, MnCustomFieldHostDirective, MnTable, MnCustomBodyHostComponent, LucideDynamicIcon], 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              fullWidth: true\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              fullWidth: true\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              fullWidth: true\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              fullWidth: true\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              fullWidth: true\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                placeholder: asField(rowField.field).placeholder,\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                collapseThreshold: asField(rowField.field).collapseThreshold,\n                collapsePlaceholder: asField(rowField.field).collapsePlaceholder,\n                allSelectedPlaceholder: asField(rowField.field).allSelectedPlaceholder,\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 [style.--mn-form-cols]=\"row.columns || 1\" class=\"grid gap-4 mn-form-row\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div [style.--mn-form-span]=\"rowField.span || 1\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\"\n                     class=\"flex flex-col gap-2 mn-form-cell\">\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 [style.--mn-form-cols]=\"row.columns || 1\" class=\"grid gap-4 mn-form-row\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div [style.--mn-form-span]=\"rowField.span || 1\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\"\n                 class=\"flex flex-col gap-2 mn-form-cell\">\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        @if (cancelIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\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        @if (submitIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\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}.mn-form-row{grid-template-columns:repeat(var(--mn-form-cols, 1),minmax(0,1fr))}.mn-form-cell{grid-column:span var(--mn-form-span, 1)}@media(max-width:639.98px){.mn-form-row{grid-template-columns:1fr}.mn-form-cell{grid-column:auto}}\n"] }]
+            args: [{ selector: 'mn-form-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnInputField, MnCheckbox, MnDatetime, MnMultiSelect, MnTextarea, MnFileInput, MnSelect, MnCustomFieldHostDirective, MnTable, MnCustomBodyHostComponent, LucideDynamicIcon], 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              fullWidth: true\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              fullWidth: true\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              fullWidth: true\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              fullWidth: true\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              fullWidth: true\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                placeholder: asField(rowField.field).placeholder,\n                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                collapseThreshold: asField(rowField.field).collapseThreshold,\n                collapsePlaceholder: asField(rowField.field).collapsePlaceholder,\n                allSelectedPlaceholder: asField(rowField.field).allSelectedPlaceholder,\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              dropActiveHint: asField(rowField.field).dropActiveHint,\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 [style.--mn-form-cols]=\"row.columns || 1\" class=\"grid gap-4 mn-form-row\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div [style.--mn-form-span]=\"rowField.span || 1\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\"\n                     class=\"flex flex-col gap-2 mn-form-cell\">\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 [style.--mn-form-cols]=\"row.columns || 1\" class=\"grid gap-4 mn-form-row\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div [style.--mn-form-span]=\"rowField.span || 1\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\"\n                 class=\"flex flex-col gap-2 mn-form-cell\">\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        @if (cancelIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\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        @if (submitIcon; as icon) {\n          <svg [lucideIcon]=\"icon\" [size]=\"actionIconSize\" class=\"mr-2\"></svg>\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}.mn-form-row{grid-template-columns:repeat(var(--mn-form-cols, 1),minmax(0,1fr))}.mn-form-cell{grid-column:span var(--mn-form-span, 1)}@media(max-width:639.98px){.mn-form-row{grid-template-columns:1fr}.mn-form-cell{grid-column:auto}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -10648,6 +10992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  */
 class CalendarMonthComponent {
     lang = inject(MnLanguageService);
+    cdr = inject(ChangeDetectorRef);
     /**
      * Accessible name for this control. Resolved through the conventional
      * `mnCalendar.monthView` key so an app can translate it, falling back to English when the
@@ -10683,16 +11028,22 @@ class CalendarMonthComponent {
         this.weekdayLabels = resolved.shortDayNames;
         this.moreEventsLabel = resolved.moreEventsLabel;
         this.buildMonth();
+        // Both subscriptions mark the view: the grid is rebuilt into plain fields, so in a zoneless
+        // app nothing else tells Angular this component has to be re-rendered. Without it a month
+        // whose events arrive from a stream — a fetch, a parent seeding its list — stays blank until
+        // some unrelated interaction happens to trigger change detection.
         if (this.eventsChanged) {
             this.eventsChanged.pipe(takeUntil(this.destroy$)).subscribe(events => {
                 this.events = events;
                 this.buildMonth();
+                this.cdr.markForCheck();
             });
         }
         if (this.focusDayChanged) {
             this.focusDayChanged.pipe(takeUntil(this.destroy$)).subscribe(date => {
                 this.focusDay = date;
                 this.buildMonth();
+                this.cdr.markForCheck();
             });
         }
     }
@@ -11502,6 +11853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  */
 class UpcomingEventsComponent {
     lang = inject(MnLanguageService);
+    cdr = inject(ChangeDetectorRef);
     /**
      * Accessible name for this control. Resolved through the conventional
      * `mnCalendar.upcomingEvents` key so an app can translate it, falling back to English when the
@@ -11536,6 +11888,9 @@ class UpcomingEventsComponent {
         const resolved = this.config ? resolveCalendarConfig(this.config) : { ...DEFAULT_CALENDAR_CONFIG };
         this.title = resolved.upcomingEventsTitle;
         this.noEventsMessage = resolved.noUpcomingEvents;
+        // Marked because the list is a plain field: in a zoneless app a stream emission is not by
+        // itself a reason for Angular to re-render, so the sidebar would keep showing the events it
+        // was first given.
         if (this.eventsChanged) {
             this.eventsChanged.pipe(takeUntil(this.destroy$)).subscribe(events => {
                 const now = new Date();
@@ -11543,6 +11898,7 @@ class UpcomingEventsComponent {
                     .filter(e => e.endTime > now)
                     .sort((a, b) => a.startTime.getTime() - b.startTime.getTime())
                     .slice(0, 10);
+                this.cdr.markForCheck();
             });
         }
     }
@@ -11636,6 +11992,7 @@ class CalendarViewComponent {
     mnConfigRef;
     destroyRef = inject(DestroyRef);
     lang = inject(MnLanguageService);
+    cdr = inject(ChangeDetectorRef);
     constructor() {
         const mnConfig = inject(MN_CALENDAR_CONFIG, { optional: true });
         const legacyConfig = inject(CALENDAR_CONFIG, { optional: true });
@@ -11650,9 +12007,12 @@ class CalendarViewComponent {
     }
     ngOnInit() {
         this.rebuildFromConfig();
-        // Re-resolve config when locale changes (supports $translate in mn-config).
+        // Re-resolve config when locale changes (supports $translate in mn-config). Marked because
+        // the labels it rebuilds are plain fields: a locale switch arrives on a stream, which in a
+        // zoneless app is not by itself a reason for Angular to re-render the toolbar.
         const sub = this.lang.locale$.pipe(skip(1)).subscribe(() => {
             this.rebuildFromConfig();
+            this.cdr.markForCheck();
         });
         this.destroyRef.onDestroy(() => sub.unsubscribe());
         this.checkMobileView();
@@ -11857,11 +12217,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 /** Fallback number of skeleton tabs when no items are known and no count is given. */
 const DEFAULT_SKELETON_TAB_COUNT = 3;
+/** Query parameter the active tab is mirrored in unless the data source names another. */
+const DEFAULT_TAB_URL_PARAM = 'tab';
+/** Key used for a label that slugs to nothing (e.g. punctuation only). */
+const FALLBACK_TAB_URL_KEY = 'tab';
+/**
+ * Slugs a tab label into the value it takes in the URL: the last segment of a
+ * translation key, kebab-cased. `matches.hub.tab.entrants` → `entrants`,
+ * `members.tabMembers` → `tab-members`.
+ * @param label - The tab's label or translation key.
+ */
+function tabUrlKey(label) {
+    const segment = label.split('.').pop() ?? label;
+    const slug = segment
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/[^a-zA-Z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .toLowerCase();
+    return slug || FALLBACK_TAB_URL_KEY;
+}
 /**
  * Tab component that renders a horizontal tab bar.
  * Supports translation keys for labels via MnTranslatePipe.
+ *
+ * The active tab is mirrored in the URL query string by default, so a reload,
+ * a back button or a shared link lands on the same tab; see
+ * {@link MnTabDataSource.urlParam} to rename that parameter or switch it off.
  */
 class MnTabComponent {
+    /**
+     * Router the active tab is written to. Optional: a tab bar used outside a
+     * routed application still works, it just has no URL to mirror into.
+     */
+    router = inject(Router, { optional: true });
+    /** Route the tab value is read back from; absent for the same reason as {@link router}. */
+    route = inject(ActivatedRoute, { optional: true });
+    /** Watches the URL so a deep link, a back button or an in-app link moves the tab bar. */
+    queryParamsSub;
+    /**
+     * URL keys of the current items, memoised on the items array so a slug is
+     * computed once per tab set rather than on every change-detection pass.
+     */
+    urlKeyCache;
+    /** URL key of {@link currentActive}, so a rebuilt tab set can be recognised as the same tab. */
+    currentKey;
+    /**
+     * Key of a selection whose URL write has not landed yet. Navigation is
+     * asynchronous, so a consumer that rebuilds its tabs in response to the click
+     * can be resolved against a URL that still names the previous tab; until the
+     * write completes, this is the truth about what the user picked.
+     */
+    pendingKey;
+    /** Set on destroy so a deferred restore can't announce a tab nobody is showing. */
+    destroyed = false;
     /** The horizontally-scrolling wrapper the edge fade is painted onto. */
     scrollContainer;
     /** The tab row; queried for the active tab so the indicator can measure it. */
@@ -11925,6 +12333,16 @@ class MnTabComponent {
             (this.dataSource.items.length || DEFAULT_SKELETON_TAB_COUNT);
         return Array.from({ length: count }, (_, index) => index);
     }
+    constructor() {
+        // The URL is a second source of truth for the selection: a deep link, an
+        // in-app link into another tab of the page already on screen, or the back
+        // button all change it without a click landing on this component.
+        this.queryParamsSub = this.route?.queryParamMap.subscribe((params) => {
+            const param = this.urlParam();
+            if (param)
+                this.activateUrlKey(params.get(param));
+        });
+    }
     /**
      * Re-resolves the active tab on every change-detection pass.
      *
@@ -11964,6 +12382,8 @@ class MnTabComponent {
         this.updateIndicator(false);
     }
     ngOnDestroy() {
+        this.destroyed = true;
+        this.queryParamsSub?.unsubscribe();
         this.resizeObserver?.disconnect();
         if (this.indicatorFrame !== undefined)
             cancelAnimationFrame(this.indicatorFrame);
@@ -11997,16 +12417,28 @@ class MnTabComponent {
         el.style.setProperty('-webkit-mask-image', mask);
     }
     /**
-     * Sets the given tab item as active, invoking deactivate/activate callbacks.
+     * Sets the given tab item as active, invoking deactivate/activate callbacks,
+     * and records the selection in the URL so it survives a reload or a share.
      * @param item - The tab item to activate.
      */
     setActive(item) {
         if (this.currentActive === item) {
             return;
         }
+        this.activate(item);
+        this.writeUrl(item);
+    }
+    /**
+     * Moves the selection to `item` and tells the consumer about it: the
+     * deactivate/activate/emit sequence a click produces, shared by the click
+     * path and the URL-driven ones (deep link, back button), which owe the
+     * consumer the same notifications.
+     * @param item - The tab item to activate.
+     */
+    activate(item) {
         this.currentActive?.onDeactivate?.();
         item.onClick?.();
-        this.currentActive = item;
+        this.select(item);
         this.activeChange.emit(item);
         // Slide the underline to the new tab. Measure on the next frame, after
         // change detection has applied the active tab's `font-bold` (which widens
@@ -12082,14 +12514,16 @@ class MnTabComponent {
     }
     /**
      * Ensures {@link currentActive} references a tab that still exists in the data
-     * source, falling back to the configured default tab when the current
-     * selection is missing or stale (e.g. after the items array is replaced).
+     * source, preferring the tab named in the URL and falling back to the
+     * configured default tab when the current selection is missing or stale
+     * (e.g. after the items array is replaced).
      */
     syncActiveTab() {
         const items = this.dataSource?.items;
         if (!items || items.length === 0) {
             if (this.currentActive !== undefined) {
                 this.currentActive = undefined;
+                this.currentKey = undefined;
                 this.scheduleIndicator(false);
             }
             return;
@@ -12099,9 +12533,131 @@ class MnTabComponent {
         }
         const defaultIndex = this.dataSource.defaultActive;
         const index = defaultIndex >= 0 && defaultIndex < items.length ? defaultIndex : 0;
-        this.currentActive = items[index];
+        const fallback = items[index];
+        const restored = this.itemFromUrl(items);
+        const previousKey = this.currentKey;
+        this.select(restored ?? fallback);
         // Selection resolved from data (not a user click): snap, don't slide.
         this.scheduleIndicator(false);
+        if (restored && restored !== fallback && this.currentKey !== previousKey) {
+            // The URL asks for a tab the consumer has not rendered, so this selection
+            // has to be announced like a click's would be — but only the first time,
+            // or a consumer that rebuilds its items array would re-run the tab's
+            // callbacks on every rebuild. Deferred out of the change-detection pass
+            // that resolved it: the consumer will flip its own state in response, and
+            // doing that mid-pass writes to bindings that have already been checked.
+            queueMicrotask(() => this.announceRestored(restored));
+        }
+    }
+    /**
+     * Records `item` as the selection, remembering its URL key so the same tab is
+     * recognised after the consumer rebuilds the items array.
+     * @param item - The newly selected tab.
+     */
+    select(item) {
+        const items = this.dataSource.items;
+        this.currentActive = item;
+        this.currentKey = this.urlKeys(items)[items.indexOf(item)];
+    }
+    /**
+     * Runs the restored tab's callbacks a change-detection pass later, unless the
+     * selection moved on in the meantime (a click, or another tab set arriving).
+     * @param item - The tab restored from the URL.
+     */
+    announceRestored(item) {
+        if (this.destroyed || this.currentActive !== item)
+            return;
+        item.onClick?.();
+        this.activeChange.emit(item);
+    }
+    /**
+     * Activates the tab a URL value names, when it is not the tab already on
+     * screen. Values naming no known tab are ignored: another tab bar on the page
+     * may own that parameter, and a stale link should leave the default standing.
+     * @param key - The value read from the query parameter, if any.
+     */
+    activateUrlKey(key) {
+        const items = this.dataSource?.items;
+        if (!key || !items?.length)
+            return;
+        const item = items[this.urlKeys(items).indexOf(key)];
+        if (!item || item === this.currentActive)
+            return;
+        this.activate(item);
+    }
+    /**
+     * The query parameter this tab bar mirrors into, or undefined when there is
+     * nothing to mirror into (no router) or the consumer switched it off.
+     */
+    urlParam() {
+        if (!this.router || !this.route)
+            return undefined;
+        const param = this.dataSource?.urlParam ?? DEFAULT_TAB_URL_PARAM;
+        return param === false || param === '' ? undefined : param;
+    }
+    /**
+     * The tab the current URL asks for, if it names one of `items`.
+     * @param items - The tab set to resolve the URL value against.
+     */
+    itemFromUrl(items) {
+        const param = this.urlParam();
+        if (!param)
+            return undefined;
+        const key = this.pendingKey ?? this.route?.snapshot.queryParamMap.get(param);
+        if (!key)
+            return undefined;
+        const index = this.urlKeys(items).indexOf(key);
+        return index === -1 ? undefined : items[index];
+    }
+    /**
+     * Records the active tab in the query string, replacing the current history
+     * entry: switching tabs is not a navigation to walk back through, and back
+     * should leave the page rather than retrace its tabs.
+     * @param item - The tab that just became active.
+     */
+    writeUrl(item) {
+        const param = this.urlParam();
+        if (!param || !this.router)
+            return;
+        const items = this.dataSource.items;
+        const key = this.urlKeys(items)[items.indexOf(item)];
+        if (!key)
+            return;
+        this.pendingKey = key;
+        // No path commands and no `relativeTo`, so only the query string changes.
+        // That holds wherever the tab bar sits, including a modal body, which has
+        // no route of its own to be relative to.
+        void this.router
+            .navigate([], {
+            queryParams: { [param]: key },
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        })
+            .catch(() => undefined)
+            .then(() => {
+            // Only clear our own write; a later click already owns the pending key.
+            if (this.pendingKey === key)
+                this.pendingKey = undefined;
+        });
+    }
+    /**
+     * The URL key of every tab, in item order: the item's `id`, else a slug of
+     * its label. Repeats are numbered so each tab still round-trips through the
+     * URL; give such tabs an explicit `id` to choose the value yourself.
+     * @param items - The tab set to key.
+     */
+    urlKeys(items) {
+        if (this.urlKeyCache?.items === items)
+            return this.urlKeyCache.keys;
+        const used = new Map();
+        const keys = items.map((item) => {
+            const base = item.id ?? tabUrlKey(item.label);
+            const taken = used.get(base) ?? 0;
+            used.set(base, taken + 1);
+            return taken === 0 ? base : `${base}-${taken + 1}`;
+        });
+        this.urlKeyCache = { items, keys };
+        return keys;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTabComponent, isStandalone: true, selector: "mn-tab", inputs: { dataSource: "dataSource", scrollable: "scrollable", justified: "justified" }, outputs: { activeChange: "activeChange" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true }, { propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true }], ngImport: i0, template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      #tabList\n      role=\"tablist\"\n      class=\"tabs relative flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      <!--\n        Shared sliding indicator: a single underline that travels to the active\n        tab, rather than each tab flipping its own border on/off (which snaps).\n        Pinned to left-0/top-auto so offsetLeft maps 1:1 regardless of the\n        flex justify-content or the justified full-width layout; position and\n        width are measured and set from TS. Sits on the same baseline as the\n        hover ::after so hover \u2192 select reads as one continuous underline.\n      -->\n      <div\n        #indicator\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute left-0 top-auto bottom-0 h-[2px] w-0 bg-primary opacity-0 transition-[transform,width] duration-300 ease-out motion-reduce:transition-none\"\n      ></div>\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 border-transparent cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MnBadge, selector: "span[mnBadge]", inputs: ["data"] }, { kind: "component", type: MnSkeleton, selector: "mn-skeleton", inputs: ["data"] }, { kind: "pipe", type: MnTranslatePipe, name: "mnTranslate" }] });
@@ -12109,7 +12665,7 @@ class MnTabComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mn-tab', standalone: true, imports: [MnTranslatePipe, CommonModule, MnBadge, MnSkeleton], template: "<div class=\"mb-10\">\n  <div\n    #scrollContainer\n    (scroll)=\"updateEdgeFades()\"\n    class=\"flex justify-start scrollbar-hide\"\n    [class.overflow-x-auto]=\"scrollable\"\n    [class.overflow-y-hidden]=\"scrollable\"\n  >\n    <div\n      #tabList\n      role=\"tablist\"\n      class=\"tabs relative flex flex-nowrap -mb-[1px] border-b border-base-300\"\n      [class.w-full]=\"justified\"\n    >\n      <!--\n        Shared sliding indicator: a single underline that travels to the active\n        tab, rather than each tab flipping its own border on/off (which snaps).\n        Pinned to left-0/top-auto so offsetLeft maps 1:1 regardless of the\n        flex justify-content or the justified full-width layout; position and\n        width are measured and set from TS. Sits on the same baseline as the\n        hover ::after so hover \u2192 select reads as one continuous underline.\n      -->\n      <div\n        #indicator\n        aria-hidden=\"true\"\n        class=\"pointer-events-none absolute left-0 top-auto bottom-0 h-[2px] w-0 bg-primary opacity-0 transition-[transform,width] duration-300 ease-out motion-reduce:transition-none\"\n      ></div>\n      @if (isLoadingState) {\n        @for (i of skeletonTabs; track i) {\n          <div\n            [class.flex-1]=\"justified\"\n            class=\"tab px-4 py-2 border-b-2 border-transparent flex items-center justify-center\"\n          >\n            <mn-skeleton [data]=\"{ shape: 'rectangle', width: '4.5rem', height: '1rem' }\"></mn-skeleton>\n          </div>\n        }\n      } @else {\n        @for (item of dataSource.items; track item.label) {\n          <div\n            (click)=\"setActive(item)\"\n            (keyup.enter)=\"setActive(item)\"\n            (keyup.space)=\"setActive(item)\"\n            [attr.aria-selected]=\"currentActive === item\"\n            [class.hover:after:scale-x-100]=\"currentActive !== item\"\n            [class.flex-1]=\"justified\"\n            [class.font-bold]=\"currentActive === item\"\n            [class.text-base-content]=\"currentActive !== item\"\n            [class.text-primary]=\"currentActive === item\"\n            class=\"tab relative px-4 py-2 border-b-2 border-transparent cursor-pointer select-none transition-colors whitespace-nowrap text-center flex items-center gap-2 after:content-[''] after:absolute after:inset-x-0 after:-bottom-[2px] after:h-[2px] after:bg-primary/60 after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-out\"\n            role=\"tab\"\n            tabindex=\"0\"\n          >\n            {{ item.label | mnTranslate }}\n            @let badge = getBadge(item);\n            @if (badge && badge > 0) {\n              <span [data]=\"{ size: 'sm', color: 'accent', variant: 'fill' }\" mnBadge>{{ badge }}</span>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { scrollContainer: [{
+        }], ctorParameters: () => [], propDecorators: { scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer']
             }], tabList: [{
@@ -13107,5 +13663,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_DROPDOWN_CONFIG, MN_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MODAL_ACTION_ICONS, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MODAL_ACTION_ICON_SIZE, MODAL_ACTION_ICON_SIZE_SM, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnBottomSheet, MnBreadcrumbs, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDropdown, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnRichTextEditor, 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, defaultFilterPredicate, defaultIconForStyle, defaultTextAdapter, emptyFilterValue, enableMnPreviewMode, isFilterValueActive, isTranslatable, matchesColumnFilter, mnAlertVariants, mnBadgeVariants, mnBreadcrumbsVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnDropdownTriggerVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig, resolveFilterableValue };
+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_DROPDOWN_CONFIG, MN_HAPTICS, MN_ICON_MAP, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MODAL_ACTION_ICONS, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_SELECT_CONFIG, MN_TEXTAREA_CONFIG, MODAL_ACTION_ICON_SIZE, MODAL_ACTION_ICON_SIZE_SM, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnBadge, MnBottomSheet, MnBreadcrumbs, MnButton, MnCheckbox, MnCollectionBase, MnCollectionPagination, MnCollectionState, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDateSelectorBar, MnDatetime, MnDropdown, MnDualHorizontalImage, MnFileInput, MnFormBodyComponent, MnGrid, MnHiddenBelowDirective, MnHttpService, MnIcon, MnIconAttributes, MnInformationCard, MnInputField, MnInstanceDirective, MnKeyboard, MnLanguageService, MnList, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnRichTextEditor, 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, defaultFilterPredicate, defaultIconForStyle, defaultTextAdapter, emptyFilterValue, enableMnPreviewMode, isFilterValueActive, isTranslatable, matchesColumnFilter, mnAlertVariants, mnBadgeVariants, mnBreadcrumbsVariants, mnButtonVariants, mnCheckboxVariants, mnCheckboxWrapperVariants, mnDatetimeVariants, mnDropdownTriggerVariants, mnFileInputVariants, mnIconVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnSelectVariants, mnSkeletonVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig, resolveFilterableValue };
 //# sourceMappingURL=mn-angular-lib.mjs.map