mn-angular-lib 0.0.66 → 0.0.67

package/fesm2022/mn-angular-lib.mjs

@@ -1594,6 +1594,10 @@ class MnTextarea {
     resolveConfig() {
         const instanceId = this.explicitInstanceId || `mn-textarea-${this.props.id}`;
         this.uiConfig = this.configService.resolve('mn-textarea', this.sectionPath, instanceId);
+        // Allow props to override uiConfig for label and placeholder
+        if (this.props.label) {
+            this.uiConfig = { ...this.uiConfig, label: this.props.label };
+        }
     }
     // ========== ControlValueAccessor Implementation ==========
     /**
@@ -3577,11 +3581,11 @@ class MnTable {
         this.selectionChange.emit(rows);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", inputs: { dataSource: "dataSource" }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick" }, ngImport: i0, template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  @if (dataSource.canSearch) {\n    <div>\n      <input\n        type=\"text\"\n        class=\"input input-sm rounded border border-base-300 bg-base-200 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full max-w-xs\"\n        [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n        (input)=\"onSearch($any($event.target).value)\"\n        aria-label=\"Search table\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm bg-base-200 px-2 py-2\">\n            @if (isMultiSelect) {\n              <label>\n                <input\n                  type=\"checkbox\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"allSelected\"\n                  (change)=\"toggleAll()\"\n                  aria-label=\"Select all rows\"\n                />\n              </label>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            class=\"text-sm px-4 py-2\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            [style.width]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row -->\n      @if (hasColumnFilters) {\n        <tr class=\"bg-base-100 border-b border-base-300\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-1\"\n              [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n              [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n              [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n              [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <input\n                    type=\"text\"\n                    class=\"input input-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full\"\n                    [placeholder]=\"column.filterPlaceholder ?? ''\"\n                    [value]=\"columnFilters[column.key]\"\n                    (input)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  />\n                } @else if (column.filterType === 'select') {\n                  <select\n                    class=\"select select-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content focus:outline-none focus:border-brand-500 w-full\"\n                    [value]=\"columnFilters[column.key]\"\n                    (change)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  >\n                    <option value=\"\">{{ column.filterPlaceholder ?? 'All' }}</option>\n                    @for (opt of column.filterOptions ?? []; track opt.value) {\n                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      @if (dataSource.isDataLoading) {\n        @for (_ of skeletonRows; track $index) {\n          <tr class=\"animate-pulse\">\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-base-300\"></div></td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n              >\n                <div class=\"h-4 w-3/4 rounded bg-base-300\"></div>\n              </td>\n            }\n          </tr>\n        }\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of filteredItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150\"\n            [class.bg-brand-50]=\"isSelected(row)\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td class=\"w-10 text-center px-2 py-2\">\n                <label>\n                  @if (isMultiSelect) {\n                    <input\n                      type=\"checkbox\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                    />\n                  } @else {\n                    <input\n                      type=\"radio\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                      name=\"mn-table-single-select\"\n                    />\n                  }\n                </label>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                class=\"text-xs px-4 py-2\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n                [style.width]=\"column.width ?? null\"\n              >\n                @if (isTemplateRef(column.cell)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n                } @else {\n                  {{ getCellValue(column, row) }}\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n      (click)=\"loadMoreRows()\"\n      [disabled]=\"loadingMoreRows\"\n    >\n      @if (loadingMoreRows) {\n        <span class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      Load more\n    </button>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", inputs: { dataSource: "dataSource" }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick" }, ngImport: i0, template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  @if (dataSource.canSearch) {\n    <div>\n      <input\n        type=\"text\"\n        class=\"input input-sm rounded border border-base-300 bg-base-200 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full max-w-xs\"\n        [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n        (input)=\"onSearch($any($event.target).value)\"\n        aria-label=\"Search table\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm bg-base-200 px-2 py-2\">\n            @if (isMultiSelect) {\n              <label>\n                <input\n                  type=\"checkbox\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"allSelected\"\n                  (change)=\"toggleAll()\"\n                  aria-label=\"Select all rows\"\n                />\n              </label>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            class=\"text-sm px-4 py-2\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            [style.width]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row -->\n      @if (hasColumnFilters) {\n        <tr class=\"bg-base-100 border-b border-base-300\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-1\"\n              [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n              [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n              [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n              [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <input\n                    type=\"text\"\n                    class=\"input input-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full\"\n                    [placeholder]=\"column.filterPlaceholder ?? ''\"\n                    [value]=\"columnFilters[column.key]\"\n                    [disabled]=\"column.filterDisabled ?? false\"\n                    [attr.autocomplete]=\"column.filterAutocomplete ?? null\"\n                    [attr.maxlength]=\"column.filterMaxLength ?? null\"\n                    (input)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  />\n                } @else if (column.filterType === 'select') {\n                  <select\n                    class=\"select select-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content focus:outline-none focus:border-brand-500 w-full\"\n                    [value]=\"columnFilters[column.key]\"\n                    [disabled]=\"column.filterDisabled ?? false\"\n                    (change)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  >\n                    <option value=\"\">{{ column.filterPlaceholder ?? 'All' }}</option>\n                    @for (opt of column.filterOptions ?? []; track opt.value) {\n                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      @if (dataSource.isDataLoading) {\n        @for (_ of skeletonRows; track $index) {\n          <tr class=\"animate-pulse\">\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-base-300\"></div></td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n              >\n                <div class=\"h-4 w-3/4 rounded bg-base-300\"></div>\n              </td>\n            }\n          </tr>\n        }\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of filteredItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150\"\n            [class.bg-brand-50]=\"isSelected(row)\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td class=\"w-10 text-center px-2 py-2\">\n                <label>\n                  @if (isMultiSelect) {\n                    <input\n                      type=\"checkbox\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                    />\n                  } @else {\n                    <input\n                      type=\"radio\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                      name=\"mn-table-single-select\"\n                    />\n                  }\n                </label>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                class=\"text-xs px-4 py-2\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n                [style.width]=\"column.width ?? null\"\n              >\n                @if (isTemplateRef(column.cell)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n                } @else {\n                  {{ getCellValue(column, row) }}\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n      (click)=\"loadMoreRows()\"\n      [disabled]=\"loadingMoreRows\"\n    >\n      @if (loadingMoreRows) {\n        <span class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      Load more\n    </button>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-table', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  @if (dataSource.canSearch) {\n    <div>\n      <input\n        type=\"text\"\n        class=\"input input-sm rounded border border-base-300 bg-base-200 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full max-w-xs\"\n        [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n        (input)=\"onSearch($any($event.target).value)\"\n        aria-label=\"Search table\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm bg-base-200 px-2 py-2\">\n            @if (isMultiSelect) {\n              <label>\n                <input\n                  type=\"checkbox\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"allSelected\"\n                  (change)=\"toggleAll()\"\n                  aria-label=\"Select all rows\"\n                />\n              </label>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            class=\"text-sm px-4 py-2\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            [style.width]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row -->\n      @if (hasColumnFilters) {\n        <tr class=\"bg-base-100 border-b border-base-300\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-1\"\n              [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n              [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n              [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n              [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <input\n                    type=\"text\"\n                    class=\"input input-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full\"\n                    [placeholder]=\"column.filterPlaceholder ?? ''\"\n                    [value]=\"columnFilters[column.key]\"\n                    (input)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  />\n                } @else if (column.filterType === 'select') {\n                  <select\n                    class=\"select select-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content focus:outline-none focus:border-brand-500 w-full\"\n                    [value]=\"columnFilters[column.key]\"\n                    (change)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  >\n                    <option value=\"\">{{ column.filterPlaceholder ?? 'All' }}</option>\n                    @for (opt of column.filterOptions ?? []; track opt.value) {\n                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      @if (dataSource.isDataLoading) {\n        @for (_ of skeletonRows; track $index) {\n          <tr class=\"animate-pulse\">\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-base-300\"></div></td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n              >\n                <div class=\"h-4 w-3/4 rounded bg-base-300\"></div>\n              </td>\n            }\n          </tr>\n        }\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of filteredItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150\"\n            [class.bg-brand-50]=\"isSelected(row)\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td class=\"w-10 text-center px-2 py-2\">\n                <label>\n                  @if (isMultiSelect) {\n                    <input\n                      type=\"checkbox\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                    />\n                  } @else {\n                    <input\n                      type=\"radio\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                      name=\"mn-table-single-select\"\n                    />\n                  }\n                </label>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                class=\"text-xs px-4 py-2\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n                [style.width]=\"column.width ?? null\"\n              >\n                @if (isTemplateRef(column.cell)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n                } @else {\n                  {{ getCellValue(column, row) }}\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n      (click)=\"loadMoreRows()\"\n      [disabled]=\"loadingMoreRows\"\n    >\n      @if (loadingMoreRows) {\n        <span class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      Load more\n    </button>\n  </div>\n}\n" }]
+            args: [{ selector: 'mn-table', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  @if (dataSource.canSearch) {\n    <div>\n      <input\n        type=\"text\"\n        class=\"input input-sm rounded border border-base-300 bg-base-200 px-3 py-1.5 text-sm text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full max-w-xs\"\n        [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n        (input)=\"onSearch($any($event.target).value)\"\n        aria-label=\"Search table\"\n      />\n    </div>\n  }\n  @if (dataSource.toolbarTemplate) {\n    <ng-container [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n  }\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        @if (hasSelection) {\n          <th class=\"w-10 text-center text-sm bg-base-200 px-2 py-2\">\n            @if (isMultiSelect) {\n              <label>\n                <input\n                  type=\"checkbox\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"allSelected\"\n                  (change)=\"toggleAll()\"\n                  aria-label=\"Select all rows\"\n                />\n              </label>\n            }\n          </th>\n        }\n\n        <!-- Data columns -->\n        @for (column of dataSource.columns; track column.key) {\n          <th\n            class=\"text-sm px-4 py-2\"\n            [class.cursor-pointer]=\"isSortable(column)\"\n            [class.select-none]=\"isSortable(column)\"\n            [class.hover:bg-base-200]=\"isSortable(column)\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            [style.width]=\"column.width ?? null\"\n            [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n            (click)=\"sort(column)\"\n          >\n            <span class=\"inline-flex items-center gap-1\">\n              @if (isTemplateRef(column.header)) {\n                <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n              } @else {\n                <span>{{ column.header }}</span>\n              }\n              @if (isSortable(column)) {\n                <span class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n              }\n            </span>\n          </th>\n        }\n\n      </tr>\n\n      <!-- Per-column filter row -->\n      @if (hasColumnFilters) {\n        <tr class=\"bg-base-100 border-b border-base-300\">\n          @if (hasSelection) {\n            <th class=\"px-2 py-1\"></th>\n          }\n          @for (column of dataSource.columns; track column.key) {\n            <th\n              class=\"px-4 py-1\"\n              [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n              [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n              [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n              [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            >\n              @if (column.filterable) {\n                @if ((column.filterType ?? 'text') === 'text') {\n                  <input\n                    type=\"text\"\n                    class=\"input input-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content placeholder-base-content/50 focus:outline-none focus:border-brand-500 w-full\"\n                    [placeholder]=\"column.filterPlaceholder ?? ''\"\n                    [value]=\"columnFilters[column.key]\"\n                    [disabled]=\"column.filterDisabled ?? false\"\n                    [attr.autocomplete]=\"column.filterAutocomplete ?? null\"\n                    [attr.maxlength]=\"column.filterMaxLength ?? null\"\n                    (input)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  />\n                } @else if (column.filterType === 'select') {\n                  <select\n                    class=\"select select-xs rounded border border-base-300 bg-base-200 px-2 py-1 text-xs text-base-content focus:outline-none focus:border-brand-500 w-full\"\n                    [value]=\"columnFilters[column.key]\"\n                    [disabled]=\"column.filterDisabled ?? false\"\n                    (change)=\"onColumnFilter(column.key, $any($event.target).value)\"\n                    (click)=\"$event.stopPropagation()\"\n                    [attr.aria-label]=\"'Filter ' + column.key\"\n                  >\n                    <option value=\"\">{{ column.filterPlaceholder ?? 'All' }}</option>\n                    @for (opt of column.filterOptions ?? []; track opt.value) {\n                      <option [value]=\"opt.value\">{{ opt.label }}</option>\n                    }\n                  </select>\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      @if (dataSource.isDataLoading) {\n        @for (_ of skeletonRows; track $index) {\n          <tr class=\"animate-pulse\">\n            @if (hasSelection) {\n              <td class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-base-300\"></div></td>\n            }\n            @for (column of dataSource.columns; track column.key) {\n              <td class=\"px-4 py-3\"\n                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n              >\n                <div class=\"h-4 w-3/4 rounded bg-base-300\"></div>\n              </td>\n            }\n          </tr>\n        }\n      } @else {\n        <!-- Empty state -->\n        @if (filteredItems.length === 0) {\n          <tr class=\"bg-base-100\">\n            <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n              @if (dataSource.emptyTemplate) {\n                <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n              } @else {\n                <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                  <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n                </div>\n              }\n            </td>\n          </tr>\n        }\n\n        <!-- Data rows -->\n        @for (row of filteredItems; track trackByID($index, row); let odd = $odd; let last = $last) {\n          <tr\n            class=\"bg-base-100 transition-colors duration-150\"\n            [class.bg-brand-50]=\"isSelected(row)\"\n            [class.bg-base-200]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n            [class.hover:bg-base-200]=\"dataSource.appearance?.hover !== false\"\n            [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n            [class.border-b]=\"!last\"\n            [class.border-base-300]=\"!last\"\n            [class.border-b-1]=\"last\"\n            [class.border-black]=\"last\"\n            [class.shadow-3xl]=\"last\"\n            (click)=\"onRowClick(row)\"\n          >\n            <!-- Selection checkbox -->\n            @if (hasSelection) {\n              <td class=\"w-10 text-center px-2 py-2\">\n                <label>\n                  @if (isMultiSelect) {\n                    <input\n                      type=\"checkbox\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                    />\n                  } @else {\n                    <input\n                      type=\"radio\"\n                      class=\"accent-brand-500\"\n                      [checked]=\"isSelected(row)\"\n                      (click)=\"$event.stopPropagation()\"\n                      (change)=\"toggleRow(row)\"\n                      name=\"mn-table-single-select\"\n                    />\n                  }\n                </label>\n              </td>\n            }\n\n            <!-- Data cells -->\n            @for (column of dataSource.columns; track column.key) {\n              <td\n                class=\"text-xs px-4 py-2\"\n                [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n                [class.text-center]=\"column.align === 'center'\"\n                [class.text-right]=\"column.align === 'right'\"\n                [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n                [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n                [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n                [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n                [style.width]=\"column.width ?? null\"\n              >\n                @if (isTemplateRef(column.cell)) {\n                  <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n                } @else {\n                  {{ getCellValue(column, row) }}\n                }\n              </td>\n            }\n\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n@if (showLoadMore) {\n  <div class=\"flex justify-center py-4\">\n    <button\n      class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n      (click)=\"loadMoreRows()\"\n      [disabled]=\"loadingMoreRows\"\n    >\n      @if (loadingMoreRows) {\n        <span class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n      }\n      Load more\n    </button>\n  </div>\n}\n" }]
         }], propDecorators: { dataSource: [{
                 type: Input
             }], sortChange: [{
@@ -4226,11 +4230,11 @@ class MnFormBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFormBodyComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "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 [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"flex flex-col gap-6\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\" [for]=\"asKey(rowField.field.key)\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"relative\">\n            <select\n              [id]=\"asKey(rowField.field.key)\"\n              [formControlName]=\"asKey(rowField.field.key)\"\n              class=\"w-full px-3 py-2 border border-base-300 rounded-xl text-base text-base-content bg-base-100 transition-all appearance-none pr-8 focus:outline-none focus:border-blue-500 focus:ring-[3px] focus:ring-blue-500/10 select-arrow\"\n              [class.opacity-50]=\"isFieldLoading(asKey(rowField.field.key)) || isFieldDisabled(rowField.field)\"\n              [attr.disabled]=\"isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field) ? '' : null\"\n            >\n              <option value=\"\" disabled selected hidden>\n                {{ isFieldLoading(asKey(rowField.field.key)) ? labels.loading : labels.selectPlaceholder }}\n              </option>\n              @for (option of getFieldOptions(rowField.field); track option.value) {\n                <option\n                  [value]=\"option.value\"\n                  [disabled]=\"option.state === 'disabled'\"\n                >\n                  {{ option.label }}\n                </option>\n              }\n            </select>\n            @if (isFieldLoading(asKey(rowField.field.key))) {\n              <div class=\"absolute right-8 top-1/2 -translate-y-1/2\">\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          </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              This field is required\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              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              Loading options...\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        <div class=\"flex flex-col gap-1\">\n          <label 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          <mn-table\n            [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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          <mn-table\n            [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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              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                  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                ></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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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-1\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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              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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div class=\"flex flex-col gap-1\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div\n            class=\"relative border-2 border-dashed border-base-300 rounded-xl p-6 text-center transition-colors hover:border-blue-400 hover:bg-blue-50/30\"\n            [class.border-red-300]=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n            [class.opacity-50]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n          >\n            <input\n              type=\"file\"\n              class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\"\n              [attr.accept]=\"asField(rowField.field).accept || null\"\n              [attr.multiple]=\"asField(rowField.field).multiple || null\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (change)=\"onFileChange(rowField.field, $event)\"\n            />\n            <div class=\"flex flex-col items-center gap-2\">\n              <svg class=\"w-8 h-8 text-base-content/40\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5\" />\n              </svg>\n              <p class=\"text-sm text-base-content/50\">{{ labels.fileUploadPrompt }}</p>\n              @if (asField(rowField.field).accept) {\n                <p class=\"text-xs text-base-content/40\">Accepted: {{ asField(rowField.field).accept }}</p>\n              }\n              @if (asField(rowField.field).maxSize) {\n                <p class=\"text-xs text-base-content/40\">Max size: {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n              }\n            </div>\n          </div>\n          <!-- Selected files list -->\n          @if (getSelectedFiles(asKey(rowField.field.key)).length > 0) {\n            <div class=\"flex flex-col gap-1 mt-2\">\n              @for (file of getSelectedFiles(asKey(rowField.field.key)); track file.name; let i = $index) {\n                <div class=\"flex items-center justify-between px-3 py-1.5 bg-base-200 rounded-lg text-sm\">\n                  <span class=\"text-base-content truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n                  <button type=\"button\" class=\"text-base-content/40 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n                </div>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFileError(rowField.field) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnTextarea, selector: "mn-lib-textarea", inputs: ["props"] }, { kind: "directive", type: MnCustomFieldHostDirective, selector: "[mnCustomFieldHost]", inputs: ["component", "inputs"] }, { kind: "component", type: MnTable, selector: "mn-table", inputs: ["dataSource"], outputs: ["sortChange", "selectionChange", "rowClick"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }] });
+    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 [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"flex flex-col gap-6\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\" [for]=\"asKey(rowField.field.key)\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"relative\">\n            <select\n              [id]=\"asKey(rowField.field.key)\"\n              [formControlName]=\"asKey(rowField.field.key)\"\n              class=\"w-full px-3 py-2 border border-base-300 rounded-xl text-base text-base-content bg-base-100 transition-all appearance-none pr-8 focus:outline-none focus:border-blue-500 focus:ring-[3px] focus:ring-blue-500/10 select-arrow\"\n              [class.opacity-50]=\"isFieldLoading(asKey(rowField.field.key)) || isFieldDisabled(rowField.field)\"\n              [attr.disabled]=\"isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field) ? '' : null\"\n            >\n              <option value=\"\" disabled selected hidden>\n                {{ isFieldLoading(asKey(rowField.field.key)) ? labels.loading : labels.selectPlaceholder }}\n              </option>\n              @for (option of getFieldOptions(rowField.field); track option.value) {\n                <option\n                  [value]=\"option.value\"\n                  [disabled]=\"option.state === 'disabled'\"\n                >\n                  {{ option.label }}\n                </option>\n              }\n            </select>\n            @if (isFieldLoading(asKey(rowField.field.key))) {\n              <div class=\"absolute right-8 top-1/2 -translate-y-1/2\">\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          </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              This field is required\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              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              Loading options...\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        <div class=\"flex flex-col gap-1\">\n          <label 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          <mn-table\n            [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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          <mn-table\n            [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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              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                  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                ></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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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-1\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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              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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div class=\"flex flex-col gap-1\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div\n            class=\"relative border-2 border-dashed border-base-300 rounded-xl p-6 text-center transition-colors hover:border-blue-400 hover:bg-blue-50/30\"\n            [class.border-red-300]=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n            [class.opacity-50]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n          >\n            <input\n              type=\"file\"\n              class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\"\n              [attr.accept]=\"asField(rowField.field).accept || null\"\n              [attr.multiple]=\"asField(rowField.field).multiple || null\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (change)=\"onFileChange(rowField.field, $event)\"\n            />\n            <div class=\"flex flex-col items-center gap-2\">\n              <svg class=\"w-8 h-8 text-base-content/40\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5\" />\n              </svg>\n              <p class=\"text-sm text-base-content/50\">{{ labels.fileUploadPrompt }}</p>\n              @if (asField(rowField.field).accept) {\n                <p class=\"text-xs text-base-content/40\">Accepted: {{ asField(rowField.field).accept }}</p>\n              }\n              @if (asField(rowField.field).maxSize) {\n                <p class=\"text-xs text-base-content/40\">Max size: {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n              }\n            </div>\n          </div>\n          <!-- Selected files list -->\n          @if (getSelectedFiles(asKey(rowField.field.key)).length > 0) {\n            <div class=\"flex flex-col gap-1 mt-2\">\n              @for (file of getSelectedFiles(asKey(rowField.field.key)); track file.name; let i = $index) {\n                <div class=\"flex items-center justify-between px-3 py-1.5 bg-base-200 rounded-lg text-sm\">\n                  <span class=\"text-base-content truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n                  <button type=\"button\" class=\"text-base-content/40 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n                </div>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFileError(rowField.field) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (mousedown)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnTextarea, selector: "mn-lib-textarea", inputs: ["props"] }, { kind: "directive", type: MnCustomFieldHostDirective, selector: "[mnCustomFieldHost]", inputs: ["component", "inputs"] }, { kind: "component", type: MnTable, selector: "mn-table", inputs: ["dataSource"], outputs: ["sortChange", "selectionChange", "rowClick"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnFormBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-form-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnInputField, MnCheckbox, MnDatetime, MnMultiSelect, MnTextarea, MnCustomFieldHostDirective, MnTable, MnCustomBodyHostComponent], template: "@if ((config.component || config.template) && !hideCustomBody) {\n  <mn-custom-body-host\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"mb-6 block\"\n  ></mn-custom-body-host>\n}\n\n<form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"flex flex-col gap-6\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\" [for]=\"asKey(rowField.field.key)\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"relative\">\n            <select\n              [id]=\"asKey(rowField.field.key)\"\n              [formControlName]=\"asKey(rowField.field.key)\"\n              class=\"w-full px-3 py-2 border border-base-300 rounded-xl text-base text-base-content bg-base-100 transition-all appearance-none pr-8 focus:outline-none focus:border-blue-500 focus:ring-[3px] focus:ring-blue-500/10 select-arrow\"\n              [class.opacity-50]=\"isFieldLoading(asKey(rowField.field.key)) || isFieldDisabled(rowField.field)\"\n              [attr.disabled]=\"isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field) ? '' : null\"\n            >\n              <option value=\"\" disabled selected hidden>\n                {{ isFieldLoading(asKey(rowField.field.key)) ? labels.loading : labels.selectPlaceholder }}\n              </option>\n              @for (option of getFieldOptions(rowField.field); track option.value) {\n                <option\n                  [value]=\"option.value\"\n                  [disabled]=\"option.state === 'disabled'\"\n                >\n                  {{ option.label }}\n                </option>\n              }\n            </select>\n            @if (isFieldLoading(asKey(rowField.field.key))) {\n              <div class=\"absolute right-8 top-1/2 -translate-y-1/2\">\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          </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              This field is required\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              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              Loading options...\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        <div class=\"flex flex-col gap-1\">\n          <label 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          <mn-table\n            [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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          <mn-table\n            [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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              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                  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                ></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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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-1\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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              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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div class=\"flex flex-col gap-1\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div\n            class=\"relative border-2 border-dashed border-base-300 rounded-xl p-6 text-center transition-colors hover:border-blue-400 hover:bg-blue-50/30\"\n            [class.border-red-300]=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n            [class.opacity-50]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n          >\n            <input\n              type=\"file\"\n              class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\"\n              [attr.accept]=\"asField(rowField.field).accept || null\"\n              [attr.multiple]=\"asField(rowField.field).multiple || null\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (change)=\"onFileChange(rowField.field, $event)\"\n            />\n            <div class=\"flex flex-col items-center gap-2\">\n              <svg class=\"w-8 h-8 text-base-content/40\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5\" />\n              </svg>\n              <p class=\"text-sm text-base-content/50\">{{ labels.fileUploadPrompt }}</p>\n              @if (asField(rowField.field).accept) {\n                <p class=\"text-xs text-base-content/40\">Accepted: {{ asField(rowField.field).accept }}</p>\n              }\n              @if (asField(rowField.field).maxSize) {\n                <p class=\"text-xs text-base-content/40\">Max size: {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n              }\n            </div>\n          </div>\n          <!-- Selected files list -->\n          @if (getSelectedFiles(asKey(rowField.field.key)).length > 0) {\n            <div class=\"flex flex-col gap-1 mt-2\">\n              @for (file of getSelectedFiles(asKey(rowField.field.key)); track file.name; let i = $index) {\n                <div class=\"flex items-center justify-between px-3 py-1.5 bg-base-200 rounded-lg text-sm\">\n                  <span class=\"text-base-content truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n                  <button type=\"button\" class=\"text-base-content/40 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n                </div>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFileError(rowField.field) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (click)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"] }]
+            args: [{ selector: 'mn-form-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnInputField, MnCheckbox, MnDatetime, MnMultiSelect, MnTextarea, MnCustomFieldHostDirective, MnTable, MnCustomBodyHostComponent], template: "@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 [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"flex flex-col gap-6\">\n  <!-- Shared field rendering template (must be inside form for formControlName) -->\n  <ng-template #fieldTemplate let-rowField>\n    @switch (rowField.field.kind) {\n      @case (FieldKind.TEXT) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'text',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mask: asField(rowField.field).mask,\n              autocomplete: asField(rowField.field).autocomplete,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.NUMBER) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'number',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.PASSWORD) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'password',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.SELECT) {\n        <div class=\"flex flex-col\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\" [for]=\"asKey(rowField.field.key)\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div class=\"relative\">\n            <select\n              [id]=\"asKey(rowField.field.key)\"\n              [formControlName]=\"asKey(rowField.field.key)\"\n              class=\"w-full px-3 py-2 border border-base-300 rounded-xl text-base text-base-content bg-base-100 transition-all appearance-none pr-8 focus:outline-none focus:border-blue-500 focus:ring-[3px] focus:ring-blue-500/10 select-arrow\"\n              [class.opacity-50]=\"isFieldLoading(asKey(rowField.field.key)) || isFieldDisabled(rowField.field)\"\n              [attr.disabled]=\"isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field) ? '' : null\"\n            >\n              <option value=\"\" disabled selected hidden>\n                {{ isFieldLoading(asKey(rowField.field.key)) ? labels.loading : labels.selectPlaceholder }}\n              </option>\n              @for (option of getFieldOptions(rowField.field); track option.value) {\n                <option\n                  [value]=\"option.value\"\n                  [disabled]=\"option.state === 'disabled'\"\n                >\n                  {{ option.label }}\n                </option>\n              }\n            </select>\n            @if (isFieldLoading(asKey(rowField.field.key))) {\n              <div class=\"absolute right-8 top-1/2 -translate-y-1/2\">\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          </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              This field is required\n            </div>\n          }\n          @if (getFieldError(asKey(rowField.field.key))) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFieldError(asKey(rowField.field.key)) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CHECKBOX) {\n        <div>\n          <mn-lib-checkbox\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-checkbox>\n        </div>\n      }\n\n      @case (FieldKind.DATE) {\n        <div>\n          <mn-lib-input-field\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              type: 'date',\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              startDate: asField(rowField.field).minDate,\n              endDate: asField(rowField.field).maxDate,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-input-field>\n        </div>\n      }\n\n      @case (FieldKind.DATETIME) {\n        <div>\n          <mn-lib-datetime\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              placeholder: asField(rowField.field).placeholder,\n              mode: asField(rowField.field).mode || 'datetime-local',\n              min: asField(rowField.field).min,\n              max: asField(rowField.field).max,\n              step: asField(rowField.field).step,\n              readonly: isFieldReadOnly(rowField.field)\n            })\"\n          ></mn-lib-datetime>\n        </div>\n      }\n\n      @case (FieldKind.TEXTAREA) {\n        <div>\n          <mn-lib-textarea\n            [formControlName]=\"asKey(rowField.field.key)\"\n            [props]=\"asAny({\n              id: asKey(rowField.field.key),\n              label: asField(rowField.field).label,\n              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              Loading options...\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        <div class=\"flex flex-col gap-1\">\n          <label 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          <mn-table\n            [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SINGLE_SELECT_TABLE) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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          <mn-table\n            [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.COLOR) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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              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                  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                ></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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.RATING) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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-1\">\n            @for (star of getRatingRange(rowField.field); track star) {\n              <button\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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.SLIDER) {\n        <div class=\"flex flex-col gap-1\">\n          <label 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              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              This field is required\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.FILE) {\n        <div class=\"flex flex-col gap-1\">\n          <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n            {{ asField(rowField.field).label }}\n            @if (hasRequiredValidator(rowField.field)) {\n              <span class=\"text-red-500\">*</span>\n            }\n          </label>\n          <div\n            class=\"relative border-2 border-dashed border-base-300 rounded-xl p-6 text-center transition-colors hover:border-blue-400 hover:bg-blue-50/30\"\n            [class.border-red-300]=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n            [class.opacity-50]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n          >\n            <input\n              type=\"file\"\n              class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\"\n              [attr.accept]=\"asField(rowField.field).accept || null\"\n              [attr.multiple]=\"asField(rowField.field).multiple || null\"\n              [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n              (change)=\"onFileChange(rowField.field, $event)\"\n            />\n            <div class=\"flex flex-col items-center gap-2\">\n              <svg class=\"w-8 h-8 text-base-content/40\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5\" />\n              </svg>\n              <p class=\"text-sm text-base-content/50\">{{ labels.fileUploadPrompt }}</p>\n              @if (asField(rowField.field).accept) {\n                <p class=\"text-xs text-base-content/40\">Accepted: {{ asField(rowField.field).accept }}</p>\n              }\n              @if (asField(rowField.field).maxSize) {\n                <p class=\"text-xs text-base-content/40\">Max size: {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n              }\n            </div>\n          </div>\n          <!-- Selected files list -->\n          @if (getSelectedFiles(asKey(rowField.field.key)).length > 0) {\n            <div class=\"flex flex-col gap-1 mt-2\">\n              @for (file of getSelectedFiles(asKey(rowField.field.key)); track file.name; let i = $index) {\n                <div class=\"flex items-center justify-between px-3 py-1.5 bg-base-200 rounded-lg text-sm\">\n                  <span class=\"text-base-content truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n                  <button type=\"button\" class=\"text-base-content/40 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n                </div>\n              }\n            </div>\n          }\n          @if (form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched) {\n            <div class=\"text-red-500 text-xs pl-2 pt-1\">\n              {{ getFileError(rowField.field) }}\n            </div>\n          }\n        </div>\n      }\n\n      @case (FieldKind.CUSTOM) {\n        <div>\n          <ng-container\n            mnCustomFieldHost\n            [component]=\"asField(rowField.field).component\"\n            [inputs]=\"asField(rowField.field).inputs\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n          ></ng-container>\n        </div>\n      }\n\n      @default {\n        <div></div>\n      }\n    }\n\n    <!-- Show cross-field error below any field that has one -->\n    @if (getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT) {\n      <div class=\"text-red-500 text-xs pl-2 pt-1\">\n        {{ getFieldError(asKey(rowField.field.key)) }}\n      </div>\n    }\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  @if (fieldGroups.length > 0) {\n    <div class=\"flex flex-col gap-6\">\n      @for (group of fieldGroups; track group.title) {\n        <div class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n          <div class=\"border-b border-base-300 pb-2\">\n            <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n            @if (group.description) {\n              <p class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n            }\n          </div>\n          @for (row of group.rows; track $index) {\n            <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n              @for (rowField of row.fields; track rowField.field.key) {\n                <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n                  <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Standard rows (no groups) -->\n  @if (rows.length > 0) {\n    <div class=\"flex flex-col gap-4\">\n      @for (row of rows; track $index) {\n        <div class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n          @for (rowField of row.fields; track rowField.field.key) {\n            <div class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n              <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  @if (formErrors['_form']) {\n    <div class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n      {{ formErrors['_form'] }}\n    </div>\n  }\n\n  @if (!hideFooter) {\n    <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n      <button\n        mnButton\n        type=\"button\"\n        [data]=\"{ variant: 'outline', color: 'secondary' }\"\n        (mousedown)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n      >\n        {{ labels.cancel }}\n      </button>\n\n      <div class=\"flex-1\"></div>\n\n      <button\n        mnButton\n        type=\"submit\"\n        [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n        [disabled]=\"form.invalid || isSubmitting\"\n      >\n        {{ isSubmitting ? labels.submitting : labels.submit }}\n      </button>\n    </div>\n  }\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{