mn-angular-lib 1.0.151 → 1.0.154

package/fesm2022/mn-angular-lib.mjs

@@ -1937,7 +1937,7 @@ class MnInputField {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInputField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnInputField, isStandalone: true, selector: "mn-lib-input-field", inputs: { props: "props" }, host: { properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <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  }\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnInputField, isStandalone: true, selector: "mn-lib-input-field", inputs: { props: "props" }, host: { properties: { "style.display": "props?.fullWidth ? 'block' : null", "style.width": "props?.fullWidth ? '100%' : null" } }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <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  }\n</div>\n", styles: ["input::-webkit-search-cancel-button{cursor:pointer}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnInputField, decorators: [{
             type: Component,
@@ -1950,7 +1950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         // real width when fullWidth is requested so 100% has something to fill.
                         '[style.display]': "props?.fullWidth ? 'block' : null",
                         '[style.width]': "props?.fullWidth ? '100%' : null",
-                    }, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <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  }\n</div>\n" }]
+                    }, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  <!-- Label -->\n  @if (uiConfig.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500 \">*</span>\n      }\n    </label>\n  }\n\n  <!-- Input Element -->\n  <input\n    [id]=\"resolvedId\"\n    [attr.name]=\"resolvedName\"\n    [type]=\"props.type\"\n    [attr.placeholder]=\"uiConfig.placeholder || null\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [disabled]=\"isDisabled\"\n    [attr.autocomplete]=\"props.autocomplete || null\"\n    [attr.min]=\"minAttr\"\n    [attr.max]=\"maxAttr\"\n    [ngModel]=\"value\"\n    [ngClass]=\"inputClasses\"\n    (input)=\"handleInput(($any($event.target)).value)\"\n    (search)=\"handleInput(($any($event.target)).value)\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Error Messages -->\n  @if (showError) {\n    <!-- Show all errors mode -->\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1\">\n        @for (error of errorMessages; track $index) {\n          <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  }\n</div>\n", styles: ["input::-webkit-search-cancel-button{cursor:pointer}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4391,12 +4391,21 @@ class MnMultiSelect {
     }
     // ========== Collapse Summary ==========
     /**
-     * Whether the collapse-to-summary feature is opted into. Active when either
-     * `collapsePlaceholder` or `collapseThreshold` is supplied; existing usages
-     * with neither prop are unaffected.
+     * Whether the collapse-to-summary feature is opted into. Active when any of
+     * `collapsePlaceholder`, `collapseThreshold` or `allSelectedPlaceholder` is
+     * supplied; existing usages with none of them are unaffected.
      */
     get collapseEnabled() {
-        return this.props.collapsePlaceholder !== undefined || this.props.collapseThreshold !== undefined;
+        return (this.props.collapsePlaceholder !== undefined ||
+            this.props.collapseThreshold !== undefined ||
+            this.props.allSelectedPlaceholder !== undefined);
+    }
+    /**
+     * Whether every available option is currently selected. False for an empty select, where
+     * "all of them" would be a claim about nothing.
+     */
+    get allSelected() {
+        return this.props.options.length > 0 && this.selectedOptions.length === this.props.options.length;
     }
     /**
      * The threshold above which the trigger collapses. Defaults to 5 when collapsing
@@ -4406,20 +4415,27 @@ class MnMultiSelect {
         return this.props.collapseThreshold ?? 5;
     }
     /**
-     * Whether the trigger should currently render the count summary instead of the
-     * individual chips: only when collapsing is enabled and the number of selected
-     * options exceeds the effective threshold.
+     * Whether the trigger should currently render a summary instead of the individual
+     * chips: when the number of selected options exceeds the effective threshold, or
+     * when every option is selected and a summary for that case was supplied.
      */
     get isCollapsed() {
-        return this.collapseEnabled && this.selectedOptions.length > this.effectiveCollapseThreshold;
+        if (!this.collapseEnabled)
+            return false;
+        // "Everything is selected" is worth saying at any count, so it collapses on its own rather
+        // than waiting for the threshold a small option list would never reach.
+        if (this.allSelected && this.props.allSelectedPlaceholder !== undefined)
+            return true;
+        return this.selectedOptions.length > this.effectiveCollapseThreshold;
     }
     /**
      * The summary text shown while collapsed, with the `{count}` token replaced by
-     * the number of selected options. Falls back to `"{count} selected"` when no
-     * `collapsePlaceholder` is provided.
+     * the number of selected options. `allSelectedPlaceholder` wins while everything
+     * is selected, then `collapsePlaceholder`, then `"{count} selected"`.
      */
     get collapseSummaryText() {
-        const template = this.props.collapsePlaceholder ?? '{count} selected';
+        const allSelectedTemplate = this.allSelected ? this.props.allSelectedPlaceholder : undefined;
+        const template = allSelectedTemplate ?? this.props.collapsePlaceholder ?? '{count} selected';
         return template.replace(/\{count}/g, String(this.selectedOptions.length));
     }
     handleBlur() {
@@ -4641,6 +4657,14 @@ class MnDropdown {
      * or when the menu is not searchable, leaving the plain content-height popover untouched.
      */
     panelFloorPx = null;
+    /**
+     * The anchored popover's opened width, locked for the same reason as {@link panelFloorPx}:
+     * the panel is content-sized between its `min-w`/`max-w` bounds, so a filtered list that
+     * drops the widest item would otherwise shrink the popover mid-type. Captured on the same
+     * next-frame pass as the height, so applying it is jump-free. Null while closed or when the
+     * menu is not searchable, leaving the plain content-width popover untouched.
+     */
+    panelWidthPx = null;
     /**
      * The mobile sheet's opened height, applied as a `min-height` floor for the same reason
      * as {@link panelFloorPx} — mirroring mn-multi-select's sheet floor. Null while anchored,
@@ -4672,6 +4696,7 @@ class MnDropdown {
         }
         else if (!el) {
             this.panelFloorPx = null;
+            this.panelWidthPx = null;
         }
     }
     /**
@@ -4755,6 +4780,7 @@ class MnDropdown {
         this.isOpen = false;
         this.searchTerm = '';
         this.panelFloorPx = null;
+        this.panelWidthPx = null;
         this.sheetFloorPx = null;
         this.stopWatchingTrigger();
         this.unlockBodyScroll();
@@ -4898,15 +4924,17 @@ class MnDropdown {
     }
     // ── Height floors (searchable only) ──
     /**
-     * Records the anchored popover's opened height and locks it via {@link panelFloorPx}.
-     * Measured on the next frame so the read reflects the fully-rendered, unfiltered list
-     * (the search box is empty on open) and never forces a reflow mid change-detection. The
-     * value equals the current height, so applying it is jump-free — it only stops a later,
-     * shorter filtered list from shrinking the panel.
+     * Records the anchored popover's opened height and width, locking them via
+     * {@link panelFloorPx} / {@link panelWidthPx}. Measured on the next frame so the read
+     * reflects the fully-rendered, unfiltered list (the search box is empty on open) and never
+     * forces a reflow mid change-detection. Both values equal the current dimensions, so
+     * applying them is jump-free — they only stop a later, shorter/narrower filtered list from
+     * shrinking the panel.
      */
     capturePanelFloor(panelEl) {
         if (typeof requestAnimationFrame !== 'function') {
             this.panelFloorPx = panelEl.offsetHeight;
+            this.panelWidthPx = panelEl.offsetWidth;
             return;
         }
         requestAnimationFrame(() => {
@@ -4914,6 +4942,7 @@ class MnDropdown {
             if (!this.isOpen || this.movedPanel !== panelEl)
                 return;
             this.panelFloorPx = panelEl.offsetHeight;
+            this.panelWidthPx = panelEl.offsetWidth;
             this.cdr.markForCheck();
         });
     }
@@ -4972,7 +5001,7 @@ class MnDropdown {
     }
     /** Whether a list entry is a {@link MnDropdownSeparator} rather than a command. */
     isSeparator(item) {
-        return item.separator === true;
+        return item.separator;
     }
     /**
      * Narrows a list entry to a command, or null for a separator. Used as `@if (asAction(item);
@@ -5093,11 +5122,11 @@ class MnDropdown {
         return this.datasource.id ?? this.autoId;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDropdown, isStandalone: true, selector: "mn-lib-dropdown", inputs: { datasource: "datasource" }, 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, read: ElementRef }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"relative inline-flex\">\n  <!-- Trigger -->\n  <button\n    #trigger\n    mnButton\n    type=\"button\"\n    [id]=\"resolvedId\"\n    [data]=\"triggerData\"\n    [ngClass]=\"triggerClasses\"\n    [attr.aria-label]=\"triggerLabelText ? null : triggerAriaLabel\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-menu' : null\"\n    (click)=\"toggle()\"\n  >\n    @if (triggerLabelText) {\n      <span class=\"truncate\">{{ triggerLabelText }}</span>\n    }\n    <!-- One glyph, rendered like a menu item's icon: a caller's template, else lucide data\n         (a preset resolves to its own data). No per-preset switch. -->\n    @if (triggerIconTemplate; as tpl) {\n      <span class=\"shrink-0 inline-flex items-center\">\n        <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n      </span>\n    } @else if (triggerIconData; as glyph) {\n      <span class=\"shrink-0 inline-flex items-center\">\n        <svg [lucideIcon]=\"glyph.data\" [size]=\"glyph.size\" [class.opacity-70]=\"glyph.dim\"></svg>\n      </span>\n    }\n  </button>\n\n  <!-- Menu -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the menu is presented as the shared bottom sheet: chrome (backdrop,\n           grabber, swipe-to-dismiss, slide animation) lives in mn-bottom-sheet; this\n           component only projects the item list into it. The host is portalled to\n           document.body (see the `sheet` ViewChild). -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"menuLabel || triggerAriaLabel\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div [id]=\"resolvedId + '-menu'\" role=\"menu\" class=\"flex flex-col flex-1 min-h-0 overflow-hidden\">\n          <!-- The sheet covers its own trigger, so it needs a header and an explicit way out. -->\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-bold text-base-content truncate\">{{ menuLabel || triggerAriaLabel }}</p>\n            <button\n              mnButton\n              type=\"button\"\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"closeLabel\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"searchBox\" [ngTemplateOutletContext]=\"{ sheet: true }\"></ng-container>\n          <div class=\"flex-1 flex flex-col overflow-auto overscroll-contain\">\n            <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: true }\"></ng-container>\n          </div>\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 + '-menu'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.height.px]=\"panelFloorPx\"\n        role=\"menu\"\n      >\n        @if (menuLabel) {\n          <p class=\"px-3 pt-1 pb-1.5 text-xs font-medium text-base-content/50 truncate shrink-0\">{{ menuLabel }}</p>\n        }\n        <ng-container [ngTemplateOutlet]=\"searchBox\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n        @if (isSearchable) {\n          <!-- Its own scroll region so the pinned search box above stays fixed and the\n               locked panel height (panelFloorPx) doesn't change as the list filters. The\n               flex column lets the empty state fill and centre in the reserved space. -->\n          <div class=\"flex-1 min-h-0 flex flex-col overflow-auto\">\n            <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n          </div>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n        }\n      </div>\n    }\n  }\n\n  <!-- The item list, shared verbatim by the sheet and the anchored popover. `sheet`\n       only tunes the spacing so touch targets are roomier on mobile. -->\n  <ng-template #items let-sheet=\"sheet\">\n    @for (item of filteredActions; track $index) {\n      @if (asAction(item); as action) {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          [disabled]=\"action.disabled\"\n          [class.opacity-50]=\"action.disabled\"\n          [class.pointer-events-none]=\"action.disabled\"\n          [ngClass]=\"[actionColorClass(action), sheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm']\"\n          class=\"flex w-full shrink-0 items-center gap-x-2.5 text-left cursor-pointer hover:bg-base-200 focus-visible:bg-base-200 focus:outline-none transition-colors\"\n          (click)=\"select(action)\"\n        >\n          @if (action.icon) {\n            <span class=\"shrink-0 inline-flex items-center\">\n              @if (isTemplateRef(action.icon)) {\n                <ng-container [ngTemplateOutlet]=\"action.icon\"></ng-container>\n              } @else {\n                <!-- Data icon: rendered here so the item sizes it to match its own text\n                     (larger in the sheet, where the rows are touch-sized). -->\n                <svg [lucideIcon]=\"$any(action.icon)\" [size]=\"sheet ? 18 : 16\"></svg>\n              }\n            </span>\n          }\n          <span class=\"truncate\">{{ actionLabel(action) }}</span>\n        </button>\n      } @else {\n        <hr role=\"separator\" [ngClass]=\"sheet ? 'mx-4 my-1.5' : 'mx-2 my-1'\" class=\"shrink-0 border-t border-base-300\" />\n      }\n    }\n    @if (isSearchable && filteredActions.length === 0) {\n      <div class=\"flex-1 flex flex-col items-center justify-center gap-2 px-4 py-6 text-center text-base-content/50\">\n        <svg lucideSearchX [size]=\"sheet ? 28 : 24\" class=\"opacity-60\"></svg>\n        <span [ngClass]=\"sheet ? 'text-base' : 'text-sm'\">{{ searchEmptyLabel }}</span>\n      </div>\n    }\n  </ng-template>\n\n  <!-- The filter input, shared by the sheet and the anchored popover. Autofocused on\n       desktop (`!sheet`) so typing starts immediately; deliberately not on mobile, where\n       it would pop the soft keyboard and fight the viewport-anchored sheet. Enter runs\n       the first visible action via the wrapper's bubbled keydown. -->\n  <ng-template #searchBox let-sheet=\"sheet\">\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        (keydown.enter)=\"selectFirstVisible()\"\n        [ngClass]=\"sheet ? '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: searchPlaceholder,\n            ariaLabel: searchPlaceholder,\n            fullWidth: true,\n            size: 'sm',\n            autoFocus: !sheet\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n  </ng-template>\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: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideSearchX, selector: "svg[lucideSearchX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnDropdown, isStandalone: true, selector: "mn-lib-dropdown", inputs: { datasource: "datasource" }, 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, read: ElementRef }, { propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"relative inline-flex\">\n  <!-- Trigger -->\n  <button\n    #trigger\n    mnButton\n    type=\"button\"\n    [id]=\"resolvedId\"\n    [data]=\"triggerData\"\n    [ngClass]=\"triggerClasses\"\n    [attr.aria-label]=\"triggerLabelText ? null : triggerAriaLabel\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-menu' : null\"\n    (click)=\"toggle()\"\n  >\n    @if (triggerLabelText) {\n      <span class=\"truncate\">{{ triggerLabelText }}</span>\n    }\n    <!-- One glyph, rendered like a menu item's icon: a caller's template, else lucide data\n         (a preset resolves to its own data). No per-preset switch. -->\n    @if (triggerIconTemplate; as tpl) {\n      <span class=\"shrink-0 inline-flex items-center\">\n        <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n      </span>\n    } @else if (triggerIconData; as glyph) {\n      <span class=\"shrink-0 inline-flex items-center\">\n        <svg [lucideIcon]=\"glyph.data\" [size]=\"glyph.size\" [class.opacity-70]=\"glyph.dim\"></svg>\n      </span>\n    }\n  </button>\n\n  <!-- Menu -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the menu is presented as the shared bottom sheet: chrome (backdrop,\n           grabber, swipe-to-dismiss, slide animation) lives in mn-bottom-sheet; this\n           component only projects the item list into it. The host is portalled to\n           document.body (see the `sheet` ViewChild). -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"menuLabel || triggerAriaLabel\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div [id]=\"resolvedId + '-menu'\" role=\"menu\" class=\"flex flex-col flex-1 min-h-0 overflow-hidden\">\n          <!-- The sheet covers its own trigger, so it needs a header and an explicit way out. -->\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-bold text-base-content truncate\">{{ menuLabel || triggerAriaLabel }}</p>\n            <button\n              mnButton\n              type=\"button\"\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"closeLabel\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"searchBox\" [ngTemplateOutletContext]=\"{ sheet: true }\"></ng-container>\n          <div class=\"flex-1 flex flex-col overflow-auto overscroll-contain\">\n            <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: true }\"></ng-container>\n          </div>\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 + '-menu'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.height.px]=\"panelFloorPx\"\n        [style.width.px]=\"panelWidthPx\"\n        role=\"menu\"\n      >\n        @if (menuLabel) {\n          <p class=\"px-3 pt-1 pb-1.5 text-xs font-medium text-base-content/50 truncate shrink-0\">{{ menuLabel }}</p>\n        }\n        <ng-container [ngTemplateOutlet]=\"searchBox\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n        @if (isSearchable) {\n          <!-- Its own scroll region so the pinned search box above stays fixed and the\n               locked panel height (panelFloorPx) doesn't change as the list filters. The\n               flex column lets the empty state fill and centre in the reserved space. -->\n          <div class=\"flex-1 min-h-0 flex flex-col overflow-auto\">\n            <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n          </div>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n        }\n      </div>\n    }\n  }\n\n  <!-- The item list, shared verbatim by the sheet and the anchored popover. `sheet`\n       only tunes the spacing so touch targets are roomier on mobile. -->\n  <ng-template #items let-sheet=\"sheet\">\n    @for (item of filteredActions; track $index) {\n      @if (asAction(item); as action) {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          [disabled]=\"action.disabled\"\n          [class.opacity-50]=\"action.disabled\"\n          [class.pointer-events-none]=\"action.disabled\"\n          [ngClass]=\"[actionColorClass(action), sheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm']\"\n          class=\"flex w-full shrink-0 items-center gap-x-2.5 text-left cursor-pointer hover:bg-base-200 focus-visible:bg-base-200 focus:outline-none transition-colors\"\n          (click)=\"select(action)\"\n        >\n          @if (action.icon) {\n            <span class=\"shrink-0 inline-flex items-center\">\n              @if (isTemplateRef(action.icon)) {\n                <ng-container [ngTemplateOutlet]=\"action.icon\"></ng-container>\n              } @else {\n                <!-- Data icon: rendered here so the item sizes it to match its own text\n                     (larger in the sheet, where the rows are touch-sized). -->\n                <svg [lucideIcon]=\"$any(action.icon)\" [size]=\"sheet ? 18 : 16\"></svg>\n              }\n            </span>\n          }\n          <span class=\"truncate\">{{ actionLabel(action) }}</span>\n        </button>\n      } @else {\n        <hr role=\"separator\" [ngClass]=\"sheet ? 'mx-4 my-1.5' : 'mx-2 my-1'\" class=\"shrink-0 border-t border-base-300\" />\n      }\n    }\n    @if (isSearchable && filteredActions.length === 0) {\n      <div class=\"flex-1 flex flex-col items-center justify-center gap-2 px-4 py-6 text-center text-base-content/50\">\n        <svg lucideSearchX [size]=\"sheet ? 28 : 24\" class=\"opacity-60\"></svg>\n        <span [ngClass]=\"sheet ? 'text-base' : 'text-sm'\">{{ searchEmptyLabel }}</span>\n      </div>\n    }\n  </ng-template>\n\n  <!-- The filter input, shared by the sheet and the anchored popover. Autofocused on\n       desktop (`!sheet`) so typing starts immediately; deliberately not on mobile, where\n       it would pop the soft keyboard and fight the viewport-anchored sheet. Enter runs\n       the first visible action via the wrapper's bubbled keydown. -->\n  <ng-template #searchBox let-sheet=\"sheet\">\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        (keydown.enter)=\"selectFirstVisible()\"\n        [ngClass]=\"sheet ? '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: searchPlaceholder,\n            ariaLabel: searchPlaceholder,\n            fullWidth: true,\n            size: 'sm',\n            autoFocus: !sheet\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n  </ng-template>\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: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnBottomSheet, selector: "mn-bottom-sheet", inputs: ["showBackdrop", "showGrabber", "dismissible", "minHeightPx", "maxHeightVh", "containerClass", "ariaLabel", "ariaLabelledby", "growWithKeyboard", "dismissGuard"], outputs: ["dismiss"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideSearchX, selector: "svg[lucideSearchX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnDropdown, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-dropdown', standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, MnButton, MnBottomSheet, MnInputField, LucideX, LucideSearchX, LucideDynamicIcon], template: "<div class=\"relative inline-flex\">\n  <!-- Trigger -->\n  <button\n    #trigger\n    mnButton\n    type=\"button\"\n    [id]=\"resolvedId\"\n    [data]=\"triggerData\"\n    [ngClass]=\"triggerClasses\"\n    [attr.aria-label]=\"triggerLabelText ? null : triggerAriaLabel\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-menu' : null\"\n    (click)=\"toggle()\"\n  >\n    @if (triggerLabelText) {\n      <span class=\"truncate\">{{ triggerLabelText }}</span>\n    }\n    <!-- One glyph, rendered like a menu item's icon: a caller's template, else lucide data\n         (a preset resolves to its own data). No per-preset switch. -->\n    @if (triggerIconTemplate; as tpl) {\n      <span class=\"shrink-0 inline-flex items-center\">\n        <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n      </span>\n    } @else if (triggerIconData; as glyph) {\n      <span class=\"shrink-0 inline-flex items-center\">\n        <svg [lucideIcon]=\"glyph.data\" [size]=\"glyph.size\" [class.opacity-70]=\"glyph.dim\"></svg>\n      </span>\n    }\n  </button>\n\n  <!-- Menu -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the menu is presented as the shared bottom sheet: chrome (backdrop,\n           grabber, swipe-to-dismiss, slide animation) lives in mn-bottom-sheet; this\n           component only projects the item list into it. The host is portalled to\n           document.body (see the `sheet` ViewChild). -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"menuLabel || triggerAriaLabel\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div [id]=\"resolvedId + '-menu'\" role=\"menu\" class=\"flex flex-col flex-1 min-h-0 overflow-hidden\">\n          <!-- The sheet covers its own trigger, so it needs a header and an explicit way out. -->\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-bold text-base-content truncate\">{{ menuLabel || triggerAriaLabel }}</p>\n            <button\n              mnButton\n              type=\"button\"\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"closeLabel\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"searchBox\" [ngTemplateOutletContext]=\"{ sheet: true }\"></ng-container>\n          <div class=\"flex-1 flex flex-col overflow-auto overscroll-contain\">\n            <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: true }\"></ng-container>\n          </div>\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 + '-menu'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.height.px]=\"panelFloorPx\"\n        role=\"menu\"\n      >\n        @if (menuLabel) {\n          <p class=\"px-3 pt-1 pb-1.5 text-xs font-medium text-base-content/50 truncate shrink-0\">{{ menuLabel }}</p>\n        }\n        <ng-container [ngTemplateOutlet]=\"searchBox\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n        @if (isSearchable) {\n          <!-- Its own scroll region so the pinned search box above stays fixed and the\n               locked panel height (panelFloorPx) doesn't change as the list filters. The\n               flex column lets the empty state fill and centre in the reserved space. -->\n          <div class=\"flex-1 min-h-0 flex flex-col overflow-auto\">\n            <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n          </div>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n        }\n      </div>\n    }\n  }\n\n  <!-- The item list, shared verbatim by the sheet and the anchored popover. `sheet`\n       only tunes the spacing so touch targets are roomier on mobile. -->\n  <ng-template #items let-sheet=\"sheet\">\n    @for (item of filteredActions; track $index) {\n      @if (asAction(item); as action) {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          [disabled]=\"action.disabled\"\n          [class.opacity-50]=\"action.disabled\"\n          [class.pointer-events-none]=\"action.disabled\"\n          [ngClass]=\"[actionColorClass(action), sheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm']\"\n          class=\"flex w-full shrink-0 items-center gap-x-2.5 text-left cursor-pointer hover:bg-base-200 focus-visible:bg-base-200 focus:outline-none transition-colors\"\n          (click)=\"select(action)\"\n        >\n          @if (action.icon) {\n            <span class=\"shrink-0 inline-flex items-center\">\n              @if (isTemplateRef(action.icon)) {\n                <ng-container [ngTemplateOutlet]=\"action.icon\"></ng-container>\n              } @else {\n                <!-- Data icon: rendered here so the item sizes it to match its own text\n                     (larger in the sheet, where the rows are touch-sized). -->\n                <svg [lucideIcon]=\"$any(action.icon)\" [size]=\"sheet ? 18 : 16\"></svg>\n              }\n            </span>\n          }\n          <span class=\"truncate\">{{ actionLabel(action) }}</span>\n        </button>\n      } @else {\n        <hr role=\"separator\" [ngClass]=\"sheet ? 'mx-4 my-1.5' : 'mx-2 my-1'\" class=\"shrink-0 border-t border-base-300\" />\n      }\n    }\n    @if (isSearchable && filteredActions.length === 0) {\n      <div class=\"flex-1 flex flex-col items-center justify-center gap-2 px-4 py-6 text-center text-base-content/50\">\n        <svg lucideSearchX [size]=\"sheet ? 28 : 24\" class=\"opacity-60\"></svg>\n        <span [ngClass]=\"sheet ? 'text-base' : 'text-sm'\">{{ searchEmptyLabel }}</span>\n      </div>\n    }\n  </ng-template>\n\n  <!-- The filter input, shared by the sheet and the anchored popover. Autofocused on\n       desktop (`!sheet`) so typing starts immediately; deliberately not on mobile, where\n       it would pop the soft keyboard and fight the viewport-anchored sheet. Enter runs\n       the first visible action via the wrapper's bubbled keydown. -->\n  <ng-template #searchBox let-sheet=\"sheet\">\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        (keydown.enter)=\"selectFirstVisible()\"\n        [ngClass]=\"sheet ? '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: searchPlaceholder,\n            ariaLabel: searchPlaceholder,\n            fullWidth: true,\n            size: 'sm',\n            autoFocus: !sheet\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'mn-lib-dropdown', standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, MnButton, MnBottomSheet, MnInputField, LucideX, LucideSearchX, LucideDynamicIcon], template: "<div class=\"relative inline-flex\">\n  <!-- Trigger -->\n  <button\n    #trigger\n    mnButton\n    type=\"button\"\n    [id]=\"resolvedId\"\n    [data]=\"triggerData\"\n    [ngClass]=\"triggerClasses\"\n    [attr.aria-label]=\"triggerLabelText ? null : triggerAriaLabel\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"isOpen ? resolvedId + '-menu' : null\"\n    (click)=\"toggle()\"\n  >\n    @if (triggerLabelText) {\n      <span class=\"truncate\">{{ triggerLabelText }}</span>\n    }\n    <!-- One glyph, rendered like a menu item's icon: a caller's template, else lucide data\n         (a preset resolves to its own data). No per-preset switch. -->\n    @if (triggerIconTemplate; as tpl) {\n      <span class=\"shrink-0 inline-flex items-center\">\n        <ng-container [ngTemplateOutlet]=\"tpl\"></ng-container>\n      </span>\n    } @else if (triggerIconData; as glyph) {\n      <span class=\"shrink-0 inline-flex items-center\">\n        <svg [lucideIcon]=\"glyph.data\" [size]=\"glyph.size\" [class.opacity-70]=\"glyph.dim\"></svg>\n      </span>\n    }\n  </button>\n\n  <!-- Menu -->\n  @if (isOpen) {\n    @if (isSheet) {\n      <!-- On mobile the menu is presented as the shared bottom sheet: chrome (backdrop,\n           grabber, swipe-to-dismiss, slide animation) lives in mn-bottom-sheet; this\n           component only projects the item list into it. The host is portalled to\n           document.body (see the `sheet` ViewChild). -->\n      <mn-bottom-sheet\n        #sheet\n        (dismiss)=\"close()\"\n        [ariaLabel]=\"menuLabel || triggerAriaLabel\"\n        [maxHeightVh]=\"80\"\n        [minHeightPx]=\"sheetFloorPx\"\n      >\n        <div [id]=\"resolvedId + '-menu'\" role=\"menu\" class=\"flex flex-col flex-1 min-h-0 overflow-hidden\">\n          <!-- The sheet covers its own trigger, so it needs a header and an explicit way out. -->\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-bold text-base-content truncate\">{{ menuLabel || triggerAriaLabel }}</p>\n            <button\n              mnButton\n              type=\"button\"\n              [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n              class=\"shrink-0 cursor-pointer\"\n              (click)=\"close()\"\n              [attr.aria-label]=\"closeLabel\"\n            ><svg lucideX [size]=\"20\"></svg></button>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"searchBox\" [ngTemplateOutletContext]=\"{ sheet: true }\"></ng-container>\n          <div class=\"flex-1 flex flex-col overflow-auto overscroll-contain\">\n            <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: true }\"></ng-container>\n          </div>\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 + '-menu'\"\n        [ngClass]=\"panelClasses\"\n        [style.left]=\"dropdownStyle.left\"\n        [style.top]=\"dropdownStyle.top\"\n        [style.height.px]=\"panelFloorPx\"\n        [style.width.px]=\"panelWidthPx\"\n        role=\"menu\"\n      >\n        @if (menuLabel) {\n          <p class=\"px-3 pt-1 pb-1.5 text-xs font-medium text-base-content/50 truncate shrink-0\">{{ menuLabel }}</p>\n        }\n        <ng-container [ngTemplateOutlet]=\"searchBox\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n        @if (isSearchable) {\n          <!-- Its own scroll region so the pinned search box above stays fixed and the\n               locked panel height (panelFloorPx) doesn't change as the list filters. The\n               flex column lets the empty state fill and centre in the reserved space. -->\n          <div class=\"flex-1 min-h-0 flex flex-col overflow-auto\">\n            <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n          </div>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"items\" [ngTemplateOutletContext]=\"{ sheet: false }\"></ng-container>\n        }\n      </div>\n    }\n  }\n\n  <!-- The item list, shared verbatim by the sheet and the anchored popover. `sheet`\n       only tunes the spacing so touch targets are roomier on mobile. -->\n  <ng-template #items let-sheet=\"sheet\">\n    @for (item of filteredActions; track $index) {\n      @if (asAction(item); as action) {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          [disabled]=\"action.disabled\"\n          [class.opacity-50]=\"action.disabled\"\n          [class.pointer-events-none]=\"action.disabled\"\n          [ngClass]=\"[actionColorClass(action), sheet ? 'px-4 py-3 text-base' : 'px-3 py-2 text-sm']\"\n          class=\"flex w-full shrink-0 items-center gap-x-2.5 text-left cursor-pointer hover:bg-base-200 focus-visible:bg-base-200 focus:outline-none transition-colors\"\n          (click)=\"select(action)\"\n        >\n          @if (action.icon) {\n            <span class=\"shrink-0 inline-flex items-center\">\n              @if (isTemplateRef(action.icon)) {\n                <ng-container [ngTemplateOutlet]=\"action.icon\"></ng-container>\n              } @else {\n                <!-- Data icon: rendered here so the item sizes it to match its own text\n                     (larger in the sheet, where the rows are touch-sized). -->\n                <svg [lucideIcon]=\"$any(action.icon)\" [size]=\"sheet ? 18 : 16\"></svg>\n              }\n            </span>\n          }\n          <span class=\"truncate\">{{ actionLabel(action) }}</span>\n        </button>\n      } @else {\n        <hr role=\"separator\" [ngClass]=\"sheet ? 'mx-4 my-1.5' : 'mx-2 my-1'\" class=\"shrink-0 border-t border-base-300\" />\n      }\n    }\n    @if (isSearchable && filteredActions.length === 0) {\n      <div class=\"flex-1 flex flex-col items-center justify-center gap-2 px-4 py-6 text-center text-base-content/50\">\n        <svg lucideSearchX [size]=\"sheet ? 28 : 24\" class=\"opacity-60\"></svg>\n        <span [ngClass]=\"sheet ? 'text-base' : 'text-sm'\">{{ searchEmptyLabel }}</span>\n      </div>\n    }\n  </ng-template>\n\n  <!-- The filter input, shared by the sheet and the anchored popover. Autofocused on\n       desktop (`!sheet`) so typing starts immediately; deliberately not on mobile, where\n       it would pop the soft keyboard and fight the viewport-anchored sheet. Enter runs\n       the first visible action via the wrapper's bubbled keydown. -->\n  <ng-template #searchBox let-sheet=\"sheet\">\n    @if (isSearchable) {\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n      <div\n        (click)=\"$event.stopPropagation()\"\n        (keydown.enter)=\"selectFirstVisible()\"\n        [ngClass]=\"sheet ? '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: searchPlaceholder,\n            ariaLabel: searchPlaceholder,\n            fullWidth: true,\n            size: 'sm',\n            autoFocus: !sheet\n          }\"\n        ></mn-lib-input-field>\n      </div>\n    }\n  </ng-template>\n</div>\n" }]
         }], propDecorators: { datasource: [{
                 type: Input,
                 args: [{ required: true }]
@@ -8977,11 +9006,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                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n              })\"\n            ></mn-lib-multi-select>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"color\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"w-10 h-10 rounded-lg border border-base-300 cursor-pointer p-0.5\"\n              [value]=\"getColorValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onColorChange(rowField.field, $event)\"\n            />\n            <span class=\"text-sm text-base-content/60 font-mono\">{{ getColorValue(rowField.field) }}</span>\n          </div>\n          @if (asField(rowField.field).swatches) {\n            <div class=\"flex gap-1.5 mt-1\">\n              @for (swatch of asField(rowField.field).swatches; track swatch) {\n                <button\n                  mnButton\n                  [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                  type=\"button\"\n                  class=\"w-6 h-6 rounded-md border border-base-300 cursor-pointer transition-transform hover:scale-110\"\n                  [style.background-color]=\"swatch\"\n                  [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n                  [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n                  (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n                  [attr.aria-label]=\"'Select color ' + swatch\"\n                ></button>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <span [id]=\"'rating-label-' + asKey(rowField.field.key)\"\n                class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </span>\n          <div [attr.aria-labelledby]=\"'rating-label-' + asKey(rowField.field.key)\" class=\"flex items-center gap-1\"\n               role=\"group\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\n                mnButton\n                [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                type=\"button\"\n                class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n                [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n                [class.text-base-300]=\"star > getRatingValue(rowField.field)\"\n                [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n                (click)=\"setRating(rowField.field, star)\"\n              >\n                &#9733;\n              </button>\n            }\n            <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"range\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"flex-1 h-2 bg-base-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n              [attr.min]=\"asField(rowField.field).min ?? 0\"\n              [attr.max]=\"asField(rowField.field).max ?? 100\"\n              [attr.step]=\"asField(rowField.field).step ?? 1\"\n              [value]=\"getSliderValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onSliderChange(rowField.field, $event)\"\n            />\n            @if (asField(rowField.field).showValue !== false) {\n              <span class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n                {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n              </span>\n            }\n          </div>\n          <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n            <span>{{ asField(rowField.field).min ?? 0 }}</span>\n            <span>{{ asField(rowField.field).max ?? 100 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div>\n          <mn-lib-file-input\n            (cleared)=\"onFileCleared(rowField.field)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              accept: asField(rowField.field).accept,\n              multiple: asField(rowField.field).multiple,\n              maxFiles: asField(rowField.field).maxFiles,\n              maxSize: asField(rowField.field).maxSize,\n              displayMode: asField(rowField.field).displayMode,\n              dropzoneHint: asField(rowField.field).dropzoneHint,\n              replaceLabel: asField(rowField.field).replaceLabel,\n              removeLabel: asField(rowField.field).removeLabel,\n              currentUrl: asField(rowField.field).currentUrl,\n              currentUrls: asField(rowField.field).currentUrls,\n              disabled: isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\n            })\"\n          ></mn-lib-file-input>\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Shared template for MULTI_SELECT_TABLE and SINGLE_SELECT_TABLE -->\n  <ng-template #selectTableTemplate let-rowField>\n    <div class=\"flex flex-col gap-1\">\n      @if (asField(rowField.field).label) {\n        <span class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          @if (hasRequiredValidator(rowField.field)) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </span>\n      }\n      <mn-table\n        [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n        [attr.aria-label]=\"asField(rowField.field).label || null\"\n        (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n      ></mn-table>\n      @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n        <div class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ labels.fieldRequired }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div [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              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                searchable: asField(rowField.field).searchable,\n                searchPlaceholder: asField(rowField.field).searchPlaceholder,\n                maxSelections: asField(rowField.field).maxSelections,\n                disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n              })\"\n            ></mn-lib-multi-select>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.MULTI_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <ng-container [ngTemplateOutlet]=\"selectTableTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"color\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"w-10 h-10 rounded-lg border border-base-300 cursor-pointer p-0.5\"\n              [value]=\"getColorValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onColorChange(rowField.field, $event)\"\n            />\n            <span class=\"text-sm text-base-content/60 font-mono\">{{ getColorValue(rowField.field) }}</span>\n          </div>\n          @if (asField(rowField.field).swatches) {\n            <div class=\"flex gap-1.5 mt-1\">\n              @for (swatch of asField(rowField.field).swatches; track swatch) {\n                <button\n                  mnButton\n                  [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                  type=\"button\"\n                  class=\"w-6 h-6 rounded-md border border-base-300 cursor-pointer transition-transform hover:scale-110\"\n                  [style.background-color]=\"swatch\"\n                  [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n                  [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n                  (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n                  [attr.aria-label]=\"'Select color ' + swatch\"\n                ></button>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <span [id]=\"'rating-label-' + asKey(rowField.field.key)\"\n                class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </span>\n          <div [attr.aria-labelledby]=\"'rating-label-' + asKey(rowField.field.key)\" class=\"flex items-center gap-1\"\n               role=\"group\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\n                mnButton\n                [data]=\"{ size: 'sm', variant: 'text', color: 'secondary' }\"\n                type=\"button\"\n                class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n                [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n                [class.text-base-300]=\"star > getRatingValue(rowField.field)\"\n                [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n                (click)=\"setRating(rowField.field, star)\"\n              >\n                &#9733;\n              </button>\n            }\n            <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label [for]=\"'field-' + asKey(rowField.field.key)\"\n                 class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"flex items-center gap-3\">\n            <input\n              type=\"range\"\n              [id]=\"'field-' + asKey(rowField.field.key)\"\n              class=\"flex-1 h-2 bg-base-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n              [attr.min]=\"asField(rowField.field).min ?? 0\"\n              [attr.max]=\"asField(rowField.field).max ?? 100\"\n              [attr.step]=\"asField(rowField.field).step ?? 1\"\n              [value]=\"getSliderValue(rowField.field)\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (input)=\"onSliderChange(rowField.field, $event)\"\n            />\n            @if (asField(rowField.field).showValue !== false) {\n              <span class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n                {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n              </span>\n            }\n          </div>\n          <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n            <span>{{ asField(rowField.field).min ?? 0 }}</span>\n            <span>{{ asField(rowField.field).max ?? 100 }}</span>\n          </div>\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ labels.fieldRequired }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div>\n          <mn-lib-file-input\n            (cleared)=\"onFileCleared(rowField.field)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              accept: asField(rowField.field).accept,\n              multiple: asField(rowField.field).multiple,\n              maxFiles: asField(rowField.field).maxFiles,\n              maxSize: asField(rowField.field).maxSize,\n              displayMode: asField(rowField.field).displayMode,\n              dropzoneHint: asField(rowField.field).dropzoneHint,\n              replaceLabel: asField(rowField.field).replaceLabel,\n              removeLabel: asField(rowField.field).removeLabel,\n              currentUrl: asField(rowField.field).currentUrl,\n              currentUrls: asField(rowField.field).currentUrls,\n              disabled: isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\n            })\"\n          ></mn-lib-file-input>\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Shared template for MULTI_SELECT_TABLE and SINGLE_SELECT_TABLE -->\n  <ng-template #selectTableTemplate let-rowField>\n    <div class=\"flex flex-col gap-1\">\n      @if (asField(rowField.field).label) {\n        <span class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          @if (hasRequiredValidator(rowField.field)) {\n            <span class=\"text-red-500\">*</span>\n          }\n        </span>\n      }\n      <mn-table\n        [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n        [attr.aria-label]=\"asField(rowField.field).label || null\"\n        (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n      ></mn-table>\n      @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n        <div class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ labels.fieldRequired }}\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div [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              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: [{