mn-angular-lib 0.0.56 → 0.0.58

package/fesm2022/mn-angular-lib.mjs

@@ -1901,11 +1901,11 @@ class MnCheckbox {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCheckbox, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCheckbox, isStandalone: true, selector: "mn-lib-checkbox", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <label class=\"flex flex-row items-center gap-x-2 cursor-pointer\" [attr.for]=\"resolvedId\">\n    <input\n      type=\"checkbox\"\n      [id]=\"resolvedId\"\n      [attr.name]=\"resolvedName\"\n      [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n      [attr.aria-invalid]=\"showError || null\"\n      [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"text-sm text-gray-700 select-none\">{{ uiConfig.label || props.label }}</span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnCheckbox, isStandalone: true, selector: "mn-lib-checkbox", inputs: { props: "props" }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  <label class=\"flex flex-row items-center gap-x-2 cursor-pointer\" [attr.for]=\"resolvedId\">\n    <input\n      type=\"checkbox\"\n      [id]=\"resolvedId\"\n      [attr.name]=\"resolvedName\"\n      [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n      [attr.aria-invalid]=\"showError || null\"\n      [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"text-sm text-base-content select-none\">{{ uiConfig.label || props.label }}</span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-checkbox', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col\">\n  <label class=\"flex flex-row items-center gap-x-2 cursor-pointer\" [attr.for]=\"resolvedId\">\n    <input\n      type=\"checkbox\"\n      [id]=\"resolvedId\"\n      [attr.name]=\"resolvedName\"\n      [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n      [attr.aria-invalid]=\"showError || null\"\n      [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"text-sm text-gray-700 select-none\">{{ uiConfig.label || props.label }}</span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'mn-lib-checkbox', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col\">\n  <label class=\"flex flex-row items-center gap-x-2 cursor-pointer\" [attr.for]=\"resolvedId\">\n    <input\n      type=\"checkbox\"\n      [id]=\"resolvedId\"\n      [attr.name]=\"resolvedName\"\n      [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n      [attr.aria-invalid]=\"showError || null\"\n      [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n      [disabled]=\"isDisabled\"\n      [checked]=\"value\"\n      [ngClass]=\"checkboxClasses\"\n      (change)=\"handleChange($any($event.target).checked)\"\n      (blur)=\"handleBlur()\"\n    />\n    @if (uiConfig.label || props.label) {\n      <span class=\"text-sm text-base-content select-none\">{{ uiConfig.label || props.label }}</span>\n    }\n  </label>\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -2308,11 +2308,11 @@ class MnMultiSelect {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"flex flex-row items-center gap-x-1 flex-wrap min-h-[1.5rem]\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-gray-500 dark:text-gray-400\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <span class=\"inline-flex items-center gap-x-1 bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-md dark:bg-gray-700 dark:text-gray-200\">\n            {{ opt.label }}\n            <button\n              type=\"button\"\n              class=\"text-gray-400 hover:text-gray-600 cursor-pointer dark:text-gray-400 dark:hover:text-gray-200\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            >\u00D7</button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg class=\"w-4 h-4 text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <div class=\"relative z-50\">\n      <div class=\"absolute top-0 left-0 right-0 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto dark:bg-gray-800 dark:border-gray-600\">\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-gray-200 dark:border-gray-700\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-gray-300 rounded-md outline-none focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-700\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-brand-500 pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-gray-400 dark:text-gray-500\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MnMultiSelect, isStandalone: true, selector: "mn-lib-multi-select", inputs: { props: "props" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"flex flex-row items-center gap-x-1 flex-wrap min-h-[1.5rem]\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <span class=\"inline-flex items-center gap-x-1 bg-base-200 text-base-content text-xs px-2 py-0.5 rounded-md\">\n            {{ opt.label }}\n            <button\n              type=\"button\"\n              class=\"text-base-content/50 hover:text-base-content cursor-pointer\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            >\u00D7</button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg class=\"w-4 h-4 text-base-content/50\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <div class=\"relative z-50\">\n      <div class=\"absolute top-0 left-0 right-0 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto\">\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-base-300\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-base-300 rounded-md outline-none focus:border-brand-500 bg-base-200 text-base-content placeholder-base-content/50\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer text-base-content hover:bg-base-200\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-brand-500 pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-base-content/50\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MnErrorMessage, selector: "lib-mn-error-message", inputs: ["errorMessage", "id"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnMultiSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"flex flex-row items-center gap-x-1 flex-wrap min-h-[1.5rem]\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-gray-500 dark:text-gray-400\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <span class=\"inline-flex items-center gap-x-1 bg-gray-100 text-gray-700 text-xs px-2 py-0.5 rounded-md dark:bg-gray-700 dark:text-gray-200\">\n            {{ opt.label }}\n            <button\n              type=\"button\"\n              class=\"text-gray-400 hover:text-gray-600 cursor-pointer dark:text-gray-400 dark:hover:text-gray-200\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            >\u00D7</button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg class=\"w-4 h-4 text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <div class=\"relative z-50\">\n      <div class=\"absolute top-0 left-0 right-0 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto dark:bg-gray-800 dark:border-gray-600\">\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-gray-200 dark:border-gray-700\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-gray-300 rounded-md outline-none focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-700\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-brand-500 pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-gray-400 dark:text-gray-500\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'mn-lib-multi-select', standalone: true, imports: [NgClass, MnErrorMessage], template: "<div class=\"flex flex-col h-full\" [class.is-fullwidth]=\"props.fullWidth\">\n  @if (uiConfig.label || props.label) {\n    <label class=\"pl-2 pb-1 flex flex-row gap-x-0.5! text-base!\" [attr.for]=\"resolvedId\">\n      <p>{{ uiConfig.label || props.label }}</p>\n      @if (isRequired()) {\n        <span class=\"text-red-500\">*</span>\n      }\n    </label>\n  }\n\n  <!-- Trigger -->\n  <div\n    [id]=\"resolvedId\"\n    [ngClass]=\"triggerClasses\"\n    class=\"relative\"\n    [attr.aria-label]=\"uiConfig.ariaLabel || uiConfig.label || props.label || null\"\n    [attr.aria-invalid]=\"showError || null\"\n    [attr.aria-describedby]=\"showError ? resolvedId + '-error' : null\"\n    [attr.aria-expanded]=\"isOpen\"\n    role=\"combobox\"\n    tabindex=\"0\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"handleBlur()\"\n  >\n    <div class=\"flex flex-row items-center gap-x-1 flex-wrap min-h-[1.5rem]\">\n      @if (selectedOptions.length === 0) {\n        <span class=\"text-base-content/50\">{{ uiConfig.placeholder || props.placeholder || 'Select...' }}</span>\n      } @else {\n        @for (opt of selectedOptions; track opt.value) {\n          <span class=\"inline-flex items-center gap-x-1 bg-base-200 text-base-content text-xs px-2 py-0.5 rounded-md\">\n            {{ opt.label }}\n            <button\n              type=\"button\"\n              class=\"text-base-content/50 hover:text-base-content cursor-pointer\"\n              (click)=\"removeOption(opt, $event)\"\n              [attr.aria-label]=\"'Remove ' + opt.label\"\n            >\u00D7</button>\n          </span>\n        }\n      }\n    </div>\n    <div class=\"absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none\">\n      <svg class=\"w-4 h-4 text-base-content/50\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n        <path fill=\"currentColor\" d=\"M6 8L1 3h10z\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Dropdown -->\n  @if (isOpen) {\n    <div class=\"relative z-50\">\n      <div class=\"absolute top-0 left-0 right-0 bg-base-100 border border-base-300 rounded-md shadow-lg max-h-60 overflow-auto\">\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-base-300\">\n            <input\n              type=\"text\"\n              class=\"w-full p-1.5 text-sm border border-base-300 rounded-md outline-none focus:border-brand-500 bg-base-200 text-base-content placeholder-base-content/50\"\n              [placeholder]=\"props.searchPlaceholder || 'Search...'\"\n              [value]=\"searchTerm\"\n              (input)=\"onSearch(($any($event.target)).value)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n        }\n        @for (opt of filteredOptions; track opt.value) {\n          <div\n            class=\"flex items-center gap-x-2 px-3 py-2 text-sm cursor-pointer text-base-content hover:bg-base-200\"\n            [class.opacity-50]=\"opt.disabled || isMaxReached(opt)\"\n            [class.pointer-events-none]=\"opt.disabled || isMaxReached(opt)\"\n            (click)=\"toggleOption(opt); $event.stopPropagation()\"\n          >\n            <input\n              type=\"checkbox\"\n              class=\"w-4 h-4 accent-brand-500 pointer-events-none\"\n              [checked]=\"isSelected(opt)\"\n              [disabled]=\"opt.disabled || isMaxReached(opt)\"\n              tabindex=\"-1\"\n            />\n            <span>{{ opt.label }}</span>\n          </div>\n        }\n        @if (filteredOptions.length === 0) {\n          <div class=\"px-3 py-2 text-sm text-base-content/50\">No options found</div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (showError) {\n    @if (props.showAllErrors) {\n      <div class=\"flex flex-col gap-y-1 mt-1\">\n        @for (error of errorMessages; track $index) {\n          <lib-mn-error-message [errorMessage]=\"error\" [id]=\"resolvedId + '-' + $index\"></lib-mn-error-message>\n        }\n      </div>\n    } @else {\n      @if (errorMessage != null) {\n        <lib-mn-error-message [errorMessage]=\"errorMessage\" [id]=\"resolvedId\"></lib-mn-error-message>\n      }\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -3521,11 +3521,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: "14.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", inputs: { dataSource: "dataSource" }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick" }, ngImport: i0, template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  <div *ngIf=\"dataSource.canSearch\">\n    <input\n      type=\"text\"\n      class=\"input input-sm rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm focus:outline-none focus:border-brand-500 w-full max-w-xs dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400\"\n      [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n      (input)=\"onSearch($any($event.target).value)\"\n      aria-label=\"Search table\"\n    />\n  </div>\n  <ng-container *ngIf=\"dataSource.toolbarTemplate\" [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr>\n        <!-- Selection checkbox column header -->\n        <th *ngIf=\"hasSelection\" class=\"w-10 text-center text-sm bg-gray-50 px-2 py-2 dark:bg-gray-800\">\n          <label *ngIf=\"isMultiSelect\">\n            <input\n              type=\"checkbox\"\n              class=\"accent-brand-500\"\n              [checked]=\"allSelected\"\n              (change)=\"toggleAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </label>\n        </th>\n\n        <!-- Data columns -->\n        <th\n          *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\"\n          class=\"text-sm px-4 py-2\"\n          [class.cursor-pointer]=\"isSortable(column)\"\n          [class.select-none]=\"isSortable(column)\"\n          [class.hover:bg-gray-100]=\"isSortable(column)\"\n          [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n          [class.text-center]=\"column.align === 'center'\"\n          [class.text-right]=\"column.align === 'right'\"\n          [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n          [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n          [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n          [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n          [style.width]=\"column.width ?? null\"\n          [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n          (click)=\"sort(column)\"\n        >\n          <span class=\"inline-flex items-center gap-1\">\n            <ng-container *ngIf=\"isTemplateRef(column.header); else stringHeader\">\n              <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n            </ng-container>\n            <ng-template #stringHeader>\n              <span>{{ column.header }}</span>\n            </ng-template>\n            <span *ngIf=\"isSortable(column)\" class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n          </span>\n        </th>\n\n        <!-- Actions column header -->\n        <th *ngIf=\"hasRowActions\" class=\"text-sm px-4 py-2 text-right\">Actions</th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      <ng-container *ngIf=\"dataSource.isDataLoading; else content\">\n        <tr *ngFor=\"let _ of skeletonRows\" class=\"animate-pulse\">\n          <td *ngIf=\"hasSelection\" class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-gray-200 dark:bg-gray-700\"></div></td>\n          <td *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\" class=\"px-4 py-3\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n          >\n            <div class=\"h-4 w-3/4 rounded bg-gray-200 dark:bg-gray-700\"></div>\n          </td>\n          <td *ngIf=\"hasRowActions\" class=\"px-4 py-3\"><div class=\"h-4 w-16 rounded bg-gray-200 dark:bg-gray-700\"></div></td>\n        </tr>\n      </ng-container>\n\n      <!-- Content -->\n      <ng-template #content>\n        <!-- Empty state -->\n        <tr *ngIf=\"filteredItems.length === 0\">\n          <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n            <ng-container *ngIf=\"dataSource.emptyTemplate; else defaultEmpty\">\n              <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #defaultEmpty>\n              <div class=\"flex flex-col items-center gap-2 text-gray-400 dark:text-gray-500\">\n                <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n              </div>\n            </ng-template>\n          </td>\n        </tr>\n\n        <!-- Data rows -->\n        <tr\n          *ngFor=\"let row of filteredItems; trackBy: trackByID; let odd = odd; let last = last\"\n          class=\"bg-white transition-colors duration-150 dark:bg-gray-900\"\n          [class.bg-brand-50]=\"isSelected(row)\"\n          [class.bg-gray-50]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n          [class.hover:bg-gray-100]=\"dataSource.appearance?.hover !== false\"\n          [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n          [class.border-b]=\"!last\"\n          [class.border-gray-200]=\"!last\"\n          [class.border-b-1]=\"last\"\n          [class.border-black]=\"last\"\n          [class.shadow-3xl]=\"last\"\n          (click)=\"onRowClick(row)\"\n        >\n          <!-- Selection checkbox -->\n          <td *ngIf=\"hasSelection\" class=\"w-10 text-center px-2 py-2\">\n            <label>\n              <input\n                *ngIf=\"isMultiSelect; else radioTpl\"\n                type=\"checkbox\"\n                class=\"accent-brand-500\"\n                [checked]=\"isSelected(row)\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleRow(row)\"\n              />\n              <ng-template #radioTpl>\n                <input\n                  type=\"radio\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"isSelected(row)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleRow(row)\"\n                  name=\"mn-table-single-select\"\n                />\n              </ng-template>\n            </label>\n          </td>\n\n          <!-- Data cells -->\n          <td\n            *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\"\n            class=\"text-xs px-4 py-2\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            [style.width]=\"column.width ?? null\"\n          >\n            <ng-container *ngIf=\"isTemplateRef(column.cell); else stringCell\">\n              <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n            </ng-container>\n            <ng-template #stringCell>{{ getCellValue(column, row) }}</ng-template>\n          </td>\n\n          <!-- Row actions -->\n          <td *ngIf=\"hasRowActions\" class=\"text-right px-4 py-2\">\n            <div class=\"inline-flex items-center justify-end gap-2\">\n              <button\n                *ngFor=\"let action of getVisibleActions(row)\"\n                class=\"px-2 py-1 text-xs rounded hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed dark:hover:bg-gray-700\"\n                [ngClass]=\"action.cssClass ?? ''\"\n                [disabled]=\"action.isDisabled ? action.isDisabled(row) : false\"\n                (click)=\"$event.stopPropagation(); action.onClick(row)\"\n                [attr.aria-label]=\"action.label\"\n              >\n                <span *ngIf=\"action.icon\" [innerHTML]=\"action.icon\"></span>\n                <span *ngIf=\"action.label\">{{ action.label }}</span>\n              </button>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n<div *ngIf=\"showLoadMore\" class=\"flex justify-center py-4\">\n  <button\n    class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n    (click)=\"loadMoreRows()\"\n    [disabled]=\"loadingMoreRows\"\n  >\n    <span *ngIf=\"loadingMoreRows\" class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n    Load more\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnTable, isStandalone: true, selector: "mn-table", inputs: { dataSource: "dataSource" }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick" }, ngImport: i0, template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  <div *ngIf=\"dataSource.canSearch\">\n    <input\n      type=\"text\"\n      class=\"input input-sm rounded border border-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  <ng-container *ngIf=\"dataSource.toolbarTemplate\" [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        <th *ngIf=\"hasSelection\" class=\"w-10 text-center text-sm bg-base-200 px-2 py-2\">\n          <label *ngIf=\"isMultiSelect\">\n            <input\n              type=\"checkbox\"\n              class=\"accent-brand-500\"\n              [checked]=\"allSelected\"\n              (change)=\"toggleAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </label>\n        </th>\n\n        <!-- Data columns -->\n        <th\n          *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\"\n          class=\"text-sm px-4 py-2\"\n          [class.cursor-pointer]=\"isSortable(column)\"\n          [class.select-none]=\"isSortable(column)\"\n          [class.hover:bg-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            <ng-container *ngIf=\"isTemplateRef(column.header); else stringHeader\">\n              <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n            </ng-container>\n            <ng-template #stringHeader>\n              <span>{{ column.header }}</span>\n            </ng-template>\n            <span *ngIf=\"isSortable(column)\" class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n          </span>\n        </th>\n\n        <!-- Actions column header -->\n        <th *ngIf=\"hasRowActions\" class=\"text-sm px-4 py-2 text-right\">Actions</th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      <ng-container *ngIf=\"dataSource.isDataLoading; else content\">\n        <tr *ngFor=\"let _ of skeletonRows\" class=\"animate-pulse\">\n          <td *ngIf=\"hasSelection\" class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-base-300\"></div></td>\n          <td *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\" class=\"px-4 py-3\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n          >\n            <div class=\"h-4 w-3/4 rounded bg-base-300\"></div>\n          </td>\n          <td *ngIf=\"hasRowActions\" class=\"px-4 py-3\"><div class=\"h-4 w-16 rounded bg-base-300\"></div></td>\n        </tr>\n      </ng-container>\n\n      <!-- Content -->\n      <ng-template #content>\n        <!-- Empty state -->\n        <tr *ngIf=\"filteredItems.length === 0\" class=\"bg-base-100\">\n          <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n            <ng-container *ngIf=\"dataSource.emptyTemplate; else defaultEmpty\">\n              <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #defaultEmpty>\n              <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n              </div>\n            </ng-template>\n          </td>\n        </tr>\n\n        <!-- Data rows -->\n        <tr\n          *ngFor=\"let row of filteredItems; trackBy: trackByID; let odd = odd; let last = last\"\n          class=\"bg-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          <td *ngIf=\"hasSelection\" class=\"w-10 text-center px-2 py-2\">\n            <label>\n              <input\n                *ngIf=\"isMultiSelect; else radioTpl\"\n                type=\"checkbox\"\n                class=\"accent-brand-500\"\n                [checked]=\"isSelected(row)\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleRow(row)\"\n              />\n              <ng-template #radioTpl>\n                <input\n                  type=\"radio\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"isSelected(row)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleRow(row)\"\n                  name=\"mn-table-single-select\"\n                />\n              </ng-template>\n            </label>\n          </td>\n\n          <!-- Data cells -->\n          <td\n            *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\"\n            class=\"text-xs px-4 py-2\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            [style.width]=\"column.width ?? null\"\n          >\n            <ng-container *ngIf=\"isTemplateRef(column.cell); else stringCell\">\n              <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n            </ng-container>\n            <ng-template #stringCell>{{ getCellValue(column, row) }}</ng-template>\n          </td>\n\n          <!-- Row actions -->\n          <td *ngIf=\"hasRowActions\" class=\"text-right px-4 py-2\">\n            <div class=\"inline-flex items-center justify-end gap-2\">\n              <button\n                *ngFor=\"let action of getVisibleActions(row)\"\n                class=\"px-2 py-1 text-xs rounded hover:bg-base-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n                [ngClass]=\"action.cssClass ?? ''\"\n                [disabled]=\"action.isDisabled ? action.isDisabled(row) : false\"\n                (click)=\"$event.stopPropagation(); action.onClick(row)\"\n                [attr.aria-label]=\"action.label\"\n              >\n                <span *ngIf=\"action.icon\" [innerHTML]=\"action.icon\"></span>\n                <span *ngIf=\"action.label\">{{ action.label }}</span>\n              </button>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n<div *ngIf=\"showLoadMore\" class=\"flex justify-center py-4\">\n  <button\n    class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n    (click)=\"loadMoreRows()\"\n    [disabled]=\"loadingMoreRows\"\n  >\n    <span *ngIf=\"loadingMoreRows\" class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n    Load more\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnTable, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgForOf, NgIf, NgTemplateOutlet], template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  <div *ngIf=\"dataSource.canSearch\">\n    <input\n      type=\"text\"\n      class=\"input input-sm rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm focus:outline-none focus:border-brand-500 w-full max-w-xs dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400\"\n      [placeholder]=\"dataSource.searchPlaceholder ?? 'Search...'\"\n      (input)=\"onSearch($any($event.target).value)\"\n      aria-label=\"Search table\"\n    />\n  </div>\n  <ng-container *ngIf=\"dataSource.toolbarTemplate\" [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr>\n        <!-- Selection checkbox column header -->\n        <th *ngIf=\"hasSelection\" class=\"w-10 text-center text-sm bg-gray-50 px-2 py-2 dark:bg-gray-800\">\n          <label *ngIf=\"isMultiSelect\">\n            <input\n              type=\"checkbox\"\n              class=\"accent-brand-500\"\n              [checked]=\"allSelected\"\n              (change)=\"toggleAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </label>\n        </th>\n\n        <!-- Data columns -->\n        <th\n          *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\"\n          class=\"text-sm px-4 py-2\"\n          [class.cursor-pointer]=\"isSortable(column)\"\n          [class.select-none]=\"isSortable(column)\"\n          [class.hover:bg-gray-100]=\"isSortable(column)\"\n          [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n          [class.text-center]=\"column.align === 'center'\"\n          [class.text-right]=\"column.align === 'right'\"\n          [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n          [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n          [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n          [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n          [style.width]=\"column.width ?? null\"\n          [attr.aria-sort]=\"currentSort?.columnKey === column.key ? (currentSort!.direction === 'asc' ? 'ascending' : 'descending') : null\"\n          (click)=\"sort(column)\"\n        >\n          <span class=\"inline-flex items-center gap-1\">\n            <ng-container *ngIf=\"isTemplateRef(column.header); else stringHeader\">\n              <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n            </ng-container>\n            <ng-template #stringHeader>\n              <span>{{ column.header }}</span>\n            </ng-template>\n            <span *ngIf=\"isSortable(column)\" class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n          </span>\n        </th>\n\n        <!-- Actions column header -->\n        <th *ngIf=\"hasRowActions\" class=\"text-sm px-4 py-2 text-right\">Actions</th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      <ng-container *ngIf=\"dataSource.isDataLoading; else content\">\n        <tr *ngFor=\"let _ of skeletonRows\" class=\"animate-pulse\">\n          <td *ngIf=\"hasSelection\" class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-gray-200 dark:bg-gray-700\"></div></td>\n          <td *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\" class=\"px-4 py-3\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n          >\n            <div class=\"h-4 w-3/4 rounded bg-gray-200 dark:bg-gray-700\"></div>\n          </td>\n          <td *ngIf=\"hasRowActions\" class=\"px-4 py-3\"><div class=\"h-4 w-16 rounded bg-gray-200 dark:bg-gray-700\"></div></td>\n        </tr>\n      </ng-container>\n\n      <!-- Content -->\n      <ng-template #content>\n        <!-- Empty state -->\n        <tr *ngIf=\"filteredItems.length === 0\">\n          <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n            <ng-container *ngIf=\"dataSource.emptyTemplate; else defaultEmpty\">\n              <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #defaultEmpty>\n              <div class=\"flex flex-col items-center gap-2 text-gray-400 dark:text-gray-500\">\n                <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n              </div>\n            </ng-template>\n          </td>\n        </tr>\n\n        <!-- Data rows -->\n        <tr\n          *ngFor=\"let row of filteredItems; trackBy: trackByID; let odd = odd; let last = last\"\n          class=\"bg-white transition-colors duration-150 dark:bg-gray-900\"\n          [class.bg-brand-50]=\"isSelected(row)\"\n          [class.bg-gray-50]=\"!isSelected(row) && odd && dataSource.appearance?.striped\"\n          [class.hover:bg-gray-100]=\"dataSource.appearance?.hover !== false\"\n          [class.cursor-pointer]=\"!!dataSource.onRowClick\"\n          [class.border-b]=\"!last\"\n          [class.border-gray-200]=\"!last\"\n          [class.border-b-1]=\"last\"\n          [class.border-black]=\"last\"\n          [class.shadow-3xl]=\"last\"\n          (click)=\"onRowClick(row)\"\n        >\n          <!-- Selection checkbox -->\n          <td *ngIf=\"hasSelection\" class=\"w-10 text-center px-2 py-2\">\n            <label>\n              <input\n                *ngIf=\"isMultiSelect; else radioTpl\"\n                type=\"checkbox\"\n                class=\"accent-brand-500\"\n                [checked]=\"isSelected(row)\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleRow(row)\"\n              />\n              <ng-template #radioTpl>\n                <input\n                  type=\"radio\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"isSelected(row)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleRow(row)\"\n                  name=\"mn-table-single-select\"\n                />\n              </ng-template>\n            </label>\n          </td>\n\n          <!-- Data cells -->\n          <td\n            *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\"\n            class=\"text-xs px-4 py-2\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            [style.width]=\"column.width ?? null\"\n          >\n            <ng-container *ngIf=\"isTemplateRef(column.cell); else stringCell\">\n              <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n            </ng-container>\n            <ng-template #stringCell>{{ getCellValue(column, row) }}</ng-template>\n          </td>\n\n          <!-- Row actions -->\n          <td *ngIf=\"hasRowActions\" class=\"text-right px-4 py-2\">\n            <div class=\"inline-flex items-center justify-end gap-2\">\n              <button\n                *ngFor=\"let action of getVisibleActions(row)\"\n                class=\"px-2 py-1 text-xs rounded hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed dark:hover:bg-gray-700\"\n                [ngClass]=\"action.cssClass ?? ''\"\n                [disabled]=\"action.isDisabled ? action.isDisabled(row) : false\"\n                (click)=\"$event.stopPropagation(); action.onClick(row)\"\n                [attr.aria-label]=\"action.label\"\n              >\n                <span *ngIf=\"action.icon\" [innerHTML]=\"action.icon\"></span>\n                <span *ngIf=\"action.label\">{{ action.label }}</span>\n              </button>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n<div *ngIf=\"showLoadMore\" class=\"flex justify-center py-4\">\n  <button\n    class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n    (click)=\"loadMoreRows()\"\n    [disabled]=\"loadingMoreRows\"\n  >\n    <span *ngIf=\"loadingMoreRows\" class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n    Load more\n  </button>\n</div>\n" }]
+            args: [{ selector: 'mn-table', standalone: true, imports: [NgClass, NgForOf, NgIf, NgTemplateOutlet], template: "<!-- Toolbar: search + custom toolbar template -->\n<div class=\"flex flex-row items-center justify-end gap-2 mb-3\">\n  <div *ngIf=\"dataSource.canSearch\">\n    <input\n      type=\"text\"\n      class=\"input input-sm rounded border border-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  <ng-container *ngIf=\"dataSource.toolbarTemplate\" [ngTemplateOutlet]=\"dataSource.toolbarTemplate\"></ng-container>\n</div>\n\n<!-- Table wrapper with horizontal scroll -->\n<div class=\"overflow-x-auto\" role=\"region\" aria-label=\"Data table\">\n  <table [class]=\"tableClasses\">\n    <thead>\n      <tr class=\"bg-base-100\">\n        <!-- Selection checkbox column header -->\n        <th *ngIf=\"hasSelection\" class=\"w-10 text-center text-sm bg-base-200 px-2 py-2\">\n          <label *ngIf=\"isMultiSelect\">\n            <input\n              type=\"checkbox\"\n              class=\"accent-brand-500\"\n              [checked]=\"allSelected\"\n              (change)=\"toggleAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </label>\n        </th>\n\n        <!-- Data columns -->\n        <th\n          *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\"\n          class=\"text-sm px-4 py-2\"\n          [class.cursor-pointer]=\"isSortable(column)\"\n          [class.select-none]=\"isSortable(column)\"\n          [class.hover:bg-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            <ng-container *ngIf=\"isTemplateRef(column.header); else stringHeader\">\n              <ng-container [ngTemplateOutlet]=\"$any(column.header)\"></ng-container>\n            </ng-container>\n            <ng-template #stringHeader>\n              <span>{{ column.header }}</span>\n            </ng-template>\n            <span *ngIf=\"isSortable(column)\" class=\"text-[0.65rem] opacity-70 min-w-3 inline-block\">{{ getSortIcon(column) }}</span>\n          </span>\n        </th>\n\n        <!-- Actions column header -->\n        <th *ngIf=\"hasRowActions\" class=\"text-sm px-4 py-2 text-right\">Actions</th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Loading state -->\n      <ng-container *ngIf=\"dataSource.isDataLoading; else content\">\n        <tr *ngFor=\"let _ of skeletonRows\" class=\"animate-pulse\">\n          <td *ngIf=\"hasSelection\" class=\"px-2 py-3\"><div class=\"h-4 w-4 rounded bg-base-300\"></div></td>\n          <td *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\" class=\"px-4 py-3\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n          >\n            <div class=\"h-4 w-3/4 rounded bg-base-300\"></div>\n          </td>\n          <td *ngIf=\"hasRowActions\" class=\"px-4 py-3\"><div class=\"h-4 w-16 rounded bg-base-300\"></div></td>\n        </tr>\n      </ng-container>\n\n      <!-- Content -->\n      <ng-template #content>\n        <!-- Empty state -->\n        <tr *ngIf=\"filteredItems.length === 0\" class=\"bg-base-100\">\n          <td [attr.colspan]=\"totalColumnCount\" class=\"text-center text-xs py-8\">\n            <ng-container *ngIf=\"dataSource.emptyTemplate; else defaultEmpty\">\n              <ng-container [ngTemplateOutlet]=\"dataSource.emptyTemplate\"></ng-container>\n            </ng-container>\n            <ng-template #defaultEmpty>\n              <div class=\"flex flex-col items-center gap-2 text-base-content/50\">\n                <p class=\"text-sm\">{{ dataSource.emptyMessage }}</p>\n              </div>\n            </ng-template>\n          </td>\n        </tr>\n\n        <!-- Data rows -->\n        <tr\n          *ngFor=\"let row of filteredItems; trackBy: trackByID; let odd = odd; let last = last\"\n          class=\"bg-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          <td *ngIf=\"hasSelection\" class=\"w-10 text-center px-2 py-2\">\n            <label>\n              <input\n                *ngIf=\"isMultiSelect; else radioTpl\"\n                type=\"checkbox\"\n                class=\"accent-brand-500\"\n                [checked]=\"isSelected(row)\"\n                (click)=\"$event.stopPropagation()\"\n                (change)=\"toggleRow(row)\"\n              />\n              <ng-template #radioTpl>\n                <input\n                  type=\"radio\"\n                  class=\"accent-brand-500\"\n                  [checked]=\"isSelected(row)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleRow(row)\"\n                  name=\"mn-table-single-select\"\n                />\n              </ng-template>\n            </label>\n          </td>\n\n          <!-- Data cells -->\n          <td\n            *ngFor=\"let column of dataSource.columns; trackBy: trackByKey\"\n            class=\"text-xs px-4 py-2\"\n            [class.text-left]=\"(column.align ?? 'left') === 'left'\"\n            [class.text-center]=\"column.align === 'center'\"\n            [class.text-right]=\"column.align === 'right'\"\n            [class.hidden]=\"column.hiddenBelow === 'sm' || column.hiddenBelow === 'md' || column.hiddenBelow === 'lg'\"\n            [class.sm:table-cell]=\"column.hiddenBelow === 'sm'\"\n            [class.md:table-cell]=\"column.hiddenBelow === 'md'\"\n            [class.lg:table-cell]=\"column.hiddenBelow === 'lg'\"\n            [style.width]=\"column.width ?? null\"\n          >\n            <ng-container *ngIf=\"isTemplateRef(column.cell); else stringCell\">\n              <ng-container [ngTemplateOutlet]=\"$any(column.cell)\" [ngTemplateOutletContext]=\"{ $implicit: row, data: row }\"></ng-container>\n            </ng-container>\n            <ng-template #stringCell>{{ getCellValue(column, row) }}</ng-template>\n          </td>\n\n          <!-- Row actions -->\n          <td *ngIf=\"hasRowActions\" class=\"text-right px-4 py-2\">\n            <div class=\"inline-flex items-center justify-end gap-2\">\n              <button\n                *ngFor=\"let action of getVisibleActions(row)\"\n                class=\"px-2 py-1 text-xs rounded hover:bg-base-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n                [ngClass]=\"action.cssClass ?? ''\"\n                [disabled]=\"action.isDisabled ? action.isDisabled(row) : false\"\n                (click)=\"$event.stopPropagation(); action.onClick(row)\"\n                [attr.aria-label]=\"action.label\"\n              >\n                <span *ngIf=\"action.icon\" [innerHTML]=\"action.icon\"></span>\n                <span *ngIf=\"action.label\">{{ action.label }}</span>\n              </button>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n\n<!-- Load more button -->\n<div *ngIf=\"showLoadMore\" class=\"flex justify-center py-4\">\n  <button\n    class=\"px-4 py-1.5 text-sm rounded border border-brand-500 text-brand-500 hover:bg-brand-100 transition-colors disabled:opacity-50\"\n    (click)=\"loadMoreRows()\"\n    [disabled]=\"loadingMoreRows\"\n  >\n    <span *ngIf=\"loadingMoreRows\" class=\"inline-block w-3 h-3 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mr-2\"></span>\n    Load more\n  </button>\n</div>\n" }]
         }], propDecorators: { dataSource: [{
                 type: Input
             }], sortChange: [{
@@ -4170,11 +4170,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: "14.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: "<mn-custom-body-host\n  *ngIf=\"(config.component || config.template) && !hideCustomBody\"\n  [config]=\"asAny(config)\"\n  [modalRef]=\"asAny(modalRef)\"\n  class=\"mb-6 block\"\n></mn-custom-body-host>\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    <ng-container [ngSwitch]=\"rowField.field.kind\">\n      <div *ngSwitchCase=\"FieldKind.TEXT\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'text',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            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      <div *ngSwitchCase=\"FieldKind.NUMBER\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'number',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.PASSWORD\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'password',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SELECT\" class=\"flex flex-col\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\" [for]=\"asKey(rowField.field.key)\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"relative\">\n          <select\n            [id]=\"asKey(rowField.field.key)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            class=\"w-full px-3 py-2 border border-gray-300 rounded-xl text-base text-gray-900 bg-white transition-all appearance-none pr-8 focus:outline-none focus:border-blue-500 focus:ring-[3px] focus:ring-blue-500/10 select-arrow\"\n            [class.opacity-50]=\"isFieldLoading(asKey(rowField.field.key)) || 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            <option\n              *ngFor=\"let option of getFieldOptions(rowField.field)\"\n              [value]=\"option.value\"\n              [disabled]=\"option.state === 'disabled'\"\n            >\n              {{ option.label }}\n            </option>\n          </select>\n          <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"absolute right-8 top-1/2 -translate-y-1/2\">\n            <div class=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CHECKBOX\">\n        <mn-lib-checkbox\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-checkbox>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.DATE\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'date',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            startDate: asField(rowField.field).minDate,\n            endDate: asField(rowField.field).maxDate,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.DATETIME\">\n        <mn-lib-datetime\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            mode: asField(rowField.field).mode || 'datetime-local',\n            min: asField(rowField.field).min,\n            max: asField(rowField.field).max,\n            step: asField(rowField.field).step,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-datetime>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.TEXTAREA\">\n        <mn-lib-textarea\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            rows: asField(rowField.field).rows || 4,\n            resize: 'vertical',\n            autocomplete: asField(rowField.field).autocomplete,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-textarea>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT\">\n        <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"flex items-center gap-2 py-2 text-sm text-gray-500\">\n          <div class=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          Loading options...\n        </div>\n        <mn-lib-multi-select\n          *ngIf=\"!isFieldLoading(asKey(rowField.field.key))\"\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            options: getFieldOptions(rowField.field),\n            searchable: asField(rowField.field).searchable,\n            searchPlaceholder: asField(rowField.field).searchPlaceholder,\n            maxSelections: asField(rowField.field).maxSelections,\n            disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-multi-select>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SINGLE_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.COLOR\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-3\">\n          <input\n            type=\"color\"\n            class=\"w-10 h-10 rounded-lg border border-gray-300 cursor-pointer p-0.5\"\n            [value]=\"getColorValue(rowField.field)\"\n            [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n            (input)=\"onColorChange(rowField.field, $event)\"\n          />\n          <span class=\"text-sm text-gray-600 font-mono\">{{ getColorValue(rowField.field) }}</span>\n        </div>\n        <div *ngIf=\"asField(rowField.field).swatches\" class=\"flex gap-1.5 mt-1\">\n          <button\n            *ngFor=\"let swatch of asField(rowField.field).swatches\"\n            type=\"button\"\n            class=\"w-6 h-6 rounded-md border border-gray-300 cursor-pointer transition-transform hover:scale-110\"\n            [style.background-color]=\"swatch\"\n            [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n            [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n            (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n          ></button>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.RATING\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-1\">\n          <button\n            *ngFor=\"let star of getRatingRange(rowField.field)\"\n            type=\"button\"\n            class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n            [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n            [class.text-gray-300]=\"star > getRatingValue(rowField.field)\"\n            [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n            (click)=\"setRating(rowField.field, star)\"\n          >\n            &#9733;\n          </button>\n          <span class=\"text-sm text-gray-500 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SLIDER\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-3\">\n          <input\n            type=\"range\"\n            class=\"flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n            [attr.min]=\"asField(rowField.field).min ?? 0\"\n            [attr.max]=\"asField(rowField.field).max ?? 100\"\n            [attr.step]=\"asField(rowField.field).step ?? 1\"\n            [value]=\"getSliderValue(rowField.field)\"\n            [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n            (input)=\"onSliderChange(rowField.field, $event)\"\n          />\n          <span *ngIf=\"asField(rowField.field).showValue !== false\" class=\"text-sm text-gray-600 min-w-[3rem] text-right\">\n            {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n          </span>\n        </div>\n        <div class=\"flex justify-between text-xs text-gray-400 px-1\">\n          <span>{{ asField(rowField.field).min ?? 0 }}</span>\n          <span>{{ asField(rowField.field).max ?? 100 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.FILE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div\n          class=\"relative border-2 border-dashed border-gray-300 rounded-xl p-6 text-center transition-colors hover:border-blue-400 hover:bg-blue-50/30\"\n          [class.border-red-300]=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          [class.opacity-50]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n        >\n          <input\n            type=\"file\"\n            class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\"\n            [attr.accept]=\"asField(rowField.field).accept || null\"\n            [attr.multiple]=\"asField(rowField.field).multiple || null\"\n            [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n            (change)=\"onFileChange(rowField.field, $event)\"\n          />\n          <div class=\"flex flex-col items-center gap-2\">\n            <svg class=\"w-8 h-8 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5\" />\n            </svg>\n            <p class=\"text-sm text-gray-500\">{{ labels.fileUploadPrompt }}</p>\n            <p *ngIf=\"asField(rowField.field).accept\" class=\"text-xs text-gray-400\">Accepted: {{ asField(rowField.field).accept }}</p>\n            <p *ngIf=\"asField(rowField.field).maxSize\" class=\"text-xs text-gray-400\">Max size: {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n          </div>\n        </div>\n        <!-- Selected files list -->\n        <div *ngIf=\"getSelectedFiles(asKey(rowField.field.key)).length > 0\" class=\"flex flex-col gap-1 mt-2\">\n          <div *ngFor=\"let file of getSelectedFiles(asKey(rowField.field.key)); let i = index\" class=\"flex items-center justify-between px-3 py-1.5 bg-gray-50 rounded-lg text-sm\">\n            <span class=\"text-gray-700 truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n            <button type=\"button\" class=\"text-gray-400 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          {{ getFileError(rowField.field) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CUSTOM\">\n        <ng-container\n          mnCustomFieldHost\n          [component]=\"asField(rowField.field).component\"\n          [inputs]=\"asField(rowField.field).inputs\"\n          [formControlName]=\"asKey(rowField.field.key)\"\n        ></ng-container>\n      </div>\n\n      <div *ngSwitchDefault>\n      </div>\n    </ng-container>\n\n    <!-- Show cross-field error below any field that has one -->\n    <div\n      *ngIf=\"getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT\"\n      class=\"text-red-500 text-xs pl-2 pt-1\"\n    >\n      {{ getFieldError(asKey(rowField.field.key)) }}\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  <div *ngIf=\"fieldGroups.length > 0\" class=\"flex flex-col gap-6\">\n    <div *ngFor=\"let group of fieldGroups\" class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n      <div class=\"border-b border-gray-200 pb-2\">\n        <h3 class=\"text-base font-semibold text-gray-900\">{{ group.title }}</h3>\n        <p *ngIf=\"group.description\" class=\"text-sm text-gray-500 mt-0.5\">{{ group.description }}</p>\n      </div>\n      <div *ngFor=\"let row of group.rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n        <div *ngFor=\"let rowField of row.fields\" class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n          <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Standard rows (no groups) -->\n  <div class=\"flex flex-col gap-4\" *ngIf=\"rows.length > 0\">\n    <div *ngFor=\"let row of rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n      <div *ngFor=\"let rowField of row.fields\" class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n        <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  <div *ngIf=\"formErrors['_form']\" class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n    {{ formErrors['_form'] }}\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-gray-200\" *ngIf=\"!hideFooter\">\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n    >\n      {{ labels.cancel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      type=\"submit\"\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n      [disabled]=\"form.invalid || isSubmitting\"\n    >\n      {{ isSubmitting ? labels.submitting : labels.submit }}\n    </button>\n  </div>\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnTextarea, selector: "mn-lib-textarea", inputs: ["props"] }, { kind: "directive", type: MnCustomFieldHostDirective, selector: "[mnCustomFieldHost]", inputs: ["component", "inputs"] }, { kind: "component", type: MnTable, selector: "mn-table", inputs: ["dataSource"], outputs: ["sortChange", "selectionChange", "rowClick"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnFormBodyComponent, isStandalone: true, selector: "mn-form-body", inputs: { config: "config", modalRef: "modalRef", hideFooter: "hideFooter", hideCustomBody: "hideCustomBody" }, outputs: { formStatusChange: "formStatusChange" }, viewQueries: [{ propertyName: "inputFields", predicate: MnInputField, descendants: true }, { propertyName: "textareas", predicate: MnTextarea, descendants: true }], ngImport: i0, template: "<mn-custom-body-host\n  *ngIf=\"(config.component || config.template) && !hideCustomBody\"\n  [config]=\"asAny(config)\"\n  [modalRef]=\"asAny(modalRef)\"\n  class=\"mb-6 block\"\n></mn-custom-body-host>\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    <ng-container [ngSwitch]=\"rowField.field.kind\">\n      <div *ngSwitchCase=\"FieldKind.TEXT\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'text',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            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      <div *ngSwitchCase=\"FieldKind.NUMBER\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'number',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.PASSWORD\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'password',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SELECT\" class=\"flex flex-col\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\" [for]=\"asKey(rowField.field.key)\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"relative\">\n          <select\n            [id]=\"asKey(rowField.field.key)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            class=\"w-full px-3 py-2 border border-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            <option\n              *ngFor=\"let option of getFieldOptions(rowField.field)\"\n              [value]=\"option.value\"\n              [disabled]=\"option.state === 'disabled'\"\n            >\n              {{ option.label }}\n            </option>\n          </select>\n          <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"absolute right-8 top-1/2 -translate-y-1/2\">\n            <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CHECKBOX\">\n        <mn-lib-checkbox\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-checkbox>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.DATE\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'date',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            startDate: asField(rowField.field).minDate,\n            endDate: asField(rowField.field).maxDate,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.DATETIME\">\n        <mn-lib-datetime\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            mode: asField(rowField.field).mode || 'datetime-local',\n            min: asField(rowField.field).min,\n            max: asField(rowField.field).max,\n            step: asField(rowField.field).step,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-datetime>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.TEXTAREA\">\n        <mn-lib-textarea\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            rows: asField(rowField.field).rows || 4,\n            resize: 'vertical',\n            autocomplete: asField(rowField.field).autocomplete,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-textarea>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT\">\n        <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"flex items-center gap-2 py-2 text-sm text-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        <mn-lib-multi-select\n          *ngIf=\"!isFieldLoading(asKey(rowField.field.key))\"\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            options: getFieldOptions(rowField.field),\n            searchable: asField(rowField.field).searchable,\n            searchPlaceholder: asField(rowField.field).searchPlaceholder,\n            maxSelections: asField(rowField.field).maxSelections,\n            disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-multi-select>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SINGLE_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.COLOR\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-3\">\n          <input\n            type=\"color\"\n            class=\"w-10 h-10 rounded-lg border border-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        <div *ngIf=\"asField(rowField.field).swatches\" class=\"flex gap-1.5 mt-1\">\n          <button\n            *ngFor=\"let swatch of asField(rowField.field).swatches\"\n            type=\"button\"\n            class=\"w-6 h-6 rounded-md border border-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        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.RATING\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-1\">\n          <button\n            *ngFor=\"let star of getRatingRange(rowField.field)\"\n            type=\"button\"\n            class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n            [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n            [class.text-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          <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SLIDER\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-3\">\n          <input\n            type=\"range\"\n            class=\"flex-1 h-2 bg-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          <span *ngIf=\"asField(rowField.field).showValue !== false\" class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n            {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n          </span>\n        </div>\n        <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n          <span>{{ asField(rowField.field).min ?? 0 }}</span>\n          <span>{{ asField(rowField.field).max ?? 100 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.FILE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div\n          class=\"relative border-2 border-dashed border-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            <p *ngIf=\"asField(rowField.field).accept\" class=\"text-xs text-base-content/40\">Accepted: {{ asField(rowField.field).accept }}</p>\n            <p *ngIf=\"asField(rowField.field).maxSize\" class=\"text-xs text-base-content/40\">Max size: {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n          </div>\n        </div>\n        <!-- Selected files list -->\n        <div *ngIf=\"getSelectedFiles(asKey(rowField.field.key)).length > 0\" class=\"flex flex-col gap-1 mt-2\">\n          <div *ngFor=\"let file of getSelectedFiles(asKey(rowField.field.key)); let i = index\" class=\"flex items-center justify-between px-3 py-1.5 bg-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        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          {{ getFileError(rowField.field) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CUSTOM\">\n        <ng-container\n          mnCustomFieldHost\n          [component]=\"asField(rowField.field).component\"\n          [inputs]=\"asField(rowField.field).inputs\"\n          [formControlName]=\"asKey(rowField.field.key)\"\n        ></ng-container>\n      </div>\n\n      <div *ngSwitchDefault>\n      </div>\n    </ng-container>\n\n    <!-- Show cross-field error below any field that has one -->\n    <div\n      *ngIf=\"getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT\"\n      class=\"text-red-500 text-xs pl-2 pt-1\"\n    >\n      {{ getFieldError(asKey(rowField.field.key)) }}\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  <div *ngIf=\"fieldGroups.length > 0\" class=\"flex flex-col gap-6\">\n    <div *ngFor=\"let group of fieldGroups\" class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n      <div class=\"border-b border-base-300 pb-2\">\n        <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n        <p *ngIf=\"group.description\" class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n      </div>\n      <div *ngFor=\"let row of group.rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n        <div *ngFor=\"let rowField of row.fields\" class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n          <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Standard rows (no groups) -->\n  <div class=\"flex flex-col gap-4\" *ngIf=\"rows.length > 0\">\n    <div *ngFor=\"let row of rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n      <div *ngFor=\"let rowField of row.fields\" class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n        <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  <div *ngIf=\"formErrors['_form']\" class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n    {{ formErrors['_form'] }}\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\" *ngIf=\"!hideFooter\">\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n    >\n      {{ labels.cancel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      type=\"submit\"\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n      [disabled]=\"form.invalid || isSubmitting\"\n    >\n      {{ isSubmitting ? labels.submitting : labels.submit }}\n    </button>\n  </div>\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnInputField, selector: "mn-lib-input-field", inputs: ["props"] }, { kind: "component", type: MnCheckbox, selector: "mn-lib-checkbox", inputs: ["props"] }, { kind: "component", type: MnDatetime, selector: "mn-lib-datetime", inputs: ["props"] }, { kind: "component", type: MnMultiSelect, selector: "mn-lib-multi-select", inputs: ["props"] }, { kind: "component", type: MnTextarea, selector: "mn-lib-textarea", inputs: ["props"] }, { kind: "directive", type: MnCustomFieldHostDirective, selector: "[mnCustomFieldHost]", inputs: ["component", "inputs"] }, { kind: "component", type: MnTable, selector: "mn-table", inputs: ["dataSource"], outputs: ["sortChange", "selectionChange", "rowClick"] }, { 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: "<mn-custom-body-host\n  *ngIf=\"(config.component || config.template) && !hideCustomBody\"\n  [config]=\"asAny(config)\"\n  [modalRef]=\"asAny(modalRef)\"\n  class=\"mb-6 block\"\n></mn-custom-body-host>\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    <ng-container [ngSwitch]=\"rowField.field.kind\">\n      <div *ngSwitchCase=\"FieldKind.TEXT\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'text',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            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      <div *ngSwitchCase=\"FieldKind.NUMBER\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'number',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.PASSWORD\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'password',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SELECT\" class=\"flex flex-col\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\" [for]=\"asKey(rowField.field.key)\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"relative\">\n          <select\n            [id]=\"asKey(rowField.field.key)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            class=\"w-full px-3 py-2 border border-gray-300 rounded-xl text-base text-gray-900 bg-white transition-all appearance-none pr-8 focus:outline-none focus:border-blue-500 focus:ring-[3px] focus:ring-blue-500/10 select-arrow\"\n            [class.opacity-50]=\"isFieldLoading(asKey(rowField.field.key)) || 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            <option\n              *ngFor=\"let option of getFieldOptions(rowField.field)\"\n              [value]=\"option.value\"\n              [disabled]=\"option.state === 'disabled'\"\n            >\n              {{ option.label }}\n            </option>\n          </select>\n          <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"absolute right-8 top-1/2 -translate-y-1/2\">\n            <div class=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CHECKBOX\">\n        <mn-lib-checkbox\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-checkbox>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.DATE\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'date',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            startDate: asField(rowField.field).minDate,\n            endDate: asField(rowField.field).maxDate,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.DATETIME\">\n        <mn-lib-datetime\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            mode: asField(rowField.field).mode || 'datetime-local',\n            min: asField(rowField.field).min,\n            max: asField(rowField.field).max,\n            step: asField(rowField.field).step,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-datetime>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.TEXTAREA\">\n        <mn-lib-textarea\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            rows: asField(rowField.field).rows || 4,\n            resize: 'vertical',\n            autocomplete: asField(rowField.field).autocomplete,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-textarea>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT\">\n        <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"flex items-center gap-2 py-2 text-sm text-gray-500\">\n          <div class=\"w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          Loading options...\n        </div>\n        <mn-lib-multi-select\n          *ngIf=\"!isFieldLoading(asKey(rowField.field.key))\"\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            options: getFieldOptions(rowField.field),\n            searchable: asField(rowField.field).searchable,\n            searchPlaceholder: asField(rowField.field).searchPlaceholder,\n            maxSelections: asField(rowField.field).maxSelections,\n            disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-multi-select>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SINGLE_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.COLOR\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-3\">\n          <input\n            type=\"color\"\n            class=\"w-10 h-10 rounded-lg border border-gray-300 cursor-pointer p-0.5\"\n            [value]=\"getColorValue(rowField.field)\"\n            [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n            (input)=\"onColorChange(rowField.field, $event)\"\n          />\n          <span class=\"text-sm text-gray-600 font-mono\">{{ getColorValue(rowField.field) }}</span>\n        </div>\n        <div *ngIf=\"asField(rowField.field).swatches\" class=\"flex gap-1.5 mt-1\">\n          <button\n            *ngFor=\"let swatch of asField(rowField.field).swatches\"\n            type=\"button\"\n            class=\"w-6 h-6 rounded-md border border-gray-300 cursor-pointer transition-transform hover:scale-110\"\n            [style.background-color]=\"swatch\"\n            [class.ring-2]=\"getColorValue(rowField.field) === swatch\"\n            [class.ring-blue-500]=\"getColorValue(rowField.field) === swatch\"\n            (click)=\"setColorFromSwatch(rowField.field, swatch)\"\n          ></button>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.RATING\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-1\">\n          <button\n            *ngFor=\"let star of getRatingRange(rowField.field)\"\n            type=\"button\"\n            class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n            [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n            [class.text-gray-300]=\"star > getRatingValue(rowField.field)\"\n            [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n            (click)=\"setRating(rowField.field, star)\"\n          >\n            &#9733;\n          </button>\n          <span class=\"text-sm text-gray-500 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SLIDER\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-3\">\n          <input\n            type=\"range\"\n            class=\"flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n            [attr.min]=\"asField(rowField.field).min ?? 0\"\n            [attr.max]=\"asField(rowField.field).max ?? 100\"\n            [attr.step]=\"asField(rowField.field).step ?? 1\"\n            [value]=\"getSliderValue(rowField.field)\"\n            [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n            (input)=\"onSliderChange(rowField.field, $event)\"\n          />\n          <span *ngIf=\"asField(rowField.field).showValue !== false\" class=\"text-sm text-gray-600 min-w-[3rem] text-right\">\n            {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n          </span>\n        </div>\n        <div class=\"flex justify-between text-xs text-gray-400 px-1\">\n          <span>{{ asField(rowField.field).min ?? 0 }}</span>\n          <span>{{ asField(rowField.field).max ?? 100 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.FILE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-gray-700\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div\n          class=\"relative border-2 border-dashed border-gray-300 rounded-xl p-6 text-center transition-colors hover:border-blue-400 hover:bg-blue-50/30\"\n          [class.border-red-300]=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          [class.opacity-50]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n        >\n          <input\n            type=\"file\"\n            class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer\"\n            [attr.accept]=\"asField(rowField.field).accept || null\"\n            [attr.multiple]=\"asField(rowField.field).multiple || null\"\n            [disabled]=\"isFieldReadOnly(rowField.field) || isFieldDisabled(rowField.field)\"\n            (change)=\"onFileChange(rowField.field, $event)\"\n          />\n          <div class=\"flex flex-col items-center gap-2\">\n            <svg class=\"w-8 h-8 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5\" />\n            </svg>\n            <p class=\"text-sm text-gray-500\">{{ labels.fileUploadPrompt }}</p>\n            <p *ngIf=\"asField(rowField.field).accept\" class=\"text-xs text-gray-400\">Accepted: {{ asField(rowField.field).accept }}</p>\n            <p *ngIf=\"asField(rowField.field).maxSize\" class=\"text-xs text-gray-400\">Max size: {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n          </div>\n        </div>\n        <!-- Selected files list -->\n        <div *ngIf=\"getSelectedFiles(asKey(rowField.field.key)).length > 0\" class=\"flex flex-col gap-1 mt-2\">\n          <div *ngFor=\"let file of getSelectedFiles(asKey(rowField.field.key)); let i = index\" class=\"flex items-center justify-between px-3 py-1.5 bg-gray-50 rounded-lg text-sm\">\n            <span class=\"text-gray-700 truncate\">{{ file.name }} ({{ formatFileSize(file.size) }})</span>\n            <button type=\"button\" class=\"text-gray-400 hover:text-red-500 ml-2 cursor-pointer\" (click)=\"removeFile(asKey(rowField.field.key), i)\">&times;</button>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          {{ getFileError(rowField.field) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CUSTOM\">\n        <ng-container\n          mnCustomFieldHost\n          [component]=\"asField(rowField.field).component\"\n          [inputs]=\"asField(rowField.field).inputs\"\n          [formControlName]=\"asKey(rowField.field.key)\"\n        ></ng-container>\n      </div>\n\n      <div *ngSwitchDefault>\n      </div>\n    </ng-container>\n\n    <!-- Show cross-field error below any field that has one -->\n    <div\n      *ngIf=\"getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT\"\n      class=\"text-red-500 text-xs pl-2 pt-1\"\n    >\n      {{ getFieldError(asKey(rowField.field.key)) }}\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  <div *ngIf=\"fieldGroups.length > 0\" class=\"flex flex-col gap-6\">\n    <div *ngFor=\"let group of fieldGroups\" class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n      <div class=\"border-b border-gray-200 pb-2\">\n        <h3 class=\"text-base font-semibold text-gray-900\">{{ group.title }}</h3>\n        <p *ngIf=\"group.description\" class=\"text-sm text-gray-500 mt-0.5\">{{ group.description }}</p>\n      </div>\n      <div *ngFor=\"let row of group.rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n        <div *ngFor=\"let rowField of row.fields\" class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n          <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Standard rows (no groups) -->\n  <div class=\"flex flex-col gap-4\" *ngIf=\"rows.length > 0\">\n    <div *ngFor=\"let row of rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n      <div *ngFor=\"let rowField of row.fields\" class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n        <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  <div *ngIf=\"formErrors['_form']\" class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n    {{ formErrors['_form'] }}\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-gray-200\" *ngIf=\"!hideFooter\">\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n    >\n      {{ labels.cancel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      type=\"submit\"\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n      [disabled]=\"form.invalid || isSubmitting\"\n    >\n      {{ isSubmitting ? labels.submitting : labels.submit }}\n    </button>\n  </div>\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"] }]
+            args: [{ selector: 'mn-form-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnInputField, MnCheckbox, MnDatetime, MnMultiSelect, MnTextarea, MnCustomFieldHostDirective, MnTable, MnCustomBodyHostComponent], template: "<mn-custom-body-host\n  *ngIf=\"(config.component || config.template) && !hideCustomBody\"\n  [config]=\"asAny(config)\"\n  [modalRef]=\"asAny(modalRef)\"\n  class=\"mb-6 block\"\n></mn-custom-body-host>\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    <ng-container [ngSwitch]=\"rowField.field.kind\">\n      <div *ngSwitchCase=\"FieldKind.TEXT\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'text',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            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      <div *ngSwitchCase=\"FieldKind.NUMBER\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'number',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.PASSWORD\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'password',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SELECT\" class=\"flex flex-col\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\" [for]=\"asKey(rowField.field.key)\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"relative\">\n          <select\n            [id]=\"asKey(rowField.field.key)\"\n            [formControlName]=\"asKey(rowField.field.key)\"\n            class=\"w-full px-3 py-2 border border-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            <option\n              *ngFor=\"let option of getFieldOptions(rowField.field)\"\n              [value]=\"option.value\"\n              [disabled]=\"option.state === 'disabled'\"\n            >\n              {{ option.label }}\n            </option>\n          </select>\n          <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"absolute right-8 top-1/2 -translate-y-1/2\">\n            <div class=\"w-4 h-4 border-2 border-base-300 border-t-blue-500 rounded-full animate-spin\"></div>\n          </div>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CHECKBOX\">\n        <mn-lib-checkbox\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-checkbox>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.DATE\">\n        <mn-lib-input-field\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            type: 'date',\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            startDate: asField(rowField.field).minDate,\n            endDate: asField(rowField.field).maxDate,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-input-field>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.DATETIME\">\n        <mn-lib-datetime\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            placeholder: asField(rowField.field).placeholder,\n            mode: asField(rowField.field).mode || 'datetime-local',\n            min: asField(rowField.field).min,\n            max: asField(rowField.field).max,\n            step: asField(rowField.field).step,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-datetime>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.TEXTAREA\">\n        <mn-lib-textarea\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            rows: asField(rowField.field).rows || 4,\n            resize: 'vertical',\n            autocomplete: asField(rowField.field).autocomplete,\n            readonly: isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-textarea>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT\">\n        <div *ngIf=\"isFieldLoading(asKey(rowField.field.key))\" class=\"flex items-center gap-2 py-2 text-sm text-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        <mn-lib-multi-select\n          *ngIf=\"!isFieldLoading(asKey(rowField.field.key))\"\n          [formControlName]=\"asKey(rowField.field.key)\"\n          [props]=\"asAny({\n            id: asKey(rowField.field.key),\n            label: asField(rowField.field).label,\n            options: getFieldOptions(rowField.field),\n            searchable: asField(rowField.field).searchable,\n            searchPlaceholder: asField(rowField.field).searchPlaceholder,\n            maxSelections: asField(rowField.field).maxSelections,\n            disabled: isFieldDisabled(rowField.field) || isFieldReadOnly(rowField.field)\n          })\"\n        ></mn-lib-multi-select>\n        <div *ngIf=\"getFieldError(asKey(rowField.field.key))\" class=\"text-red-500 text-xs pl-2 pt-1\">\n          {{ getFieldError(asKey(rowField.field.key)) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.MULTI_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SINGLE_SELECT_TABLE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <mn-table\n          [dataSource]=\"tableDataSources[asKey(rowField.field.key)]\"\n          (selectionChange)=\"onTableSelectionChange(rowField.field, $event)\"\n        ></mn-table>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.COLOR\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-3\">\n          <input\n            type=\"color\"\n            class=\"w-10 h-10 rounded-lg border border-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        <div *ngIf=\"asField(rowField.field).swatches\" class=\"flex gap-1.5 mt-1\">\n          <button\n            *ngFor=\"let swatch of asField(rowField.field).swatches\"\n            type=\"button\"\n            class=\"w-6 h-6 rounded-md border border-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        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.RATING\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-1\">\n          <button\n            *ngFor=\"let star of getRatingRange(rowField.field)\"\n            type=\"button\"\n            class=\"text-2xl cursor-pointer transition-colors focus:outline-none\"\n            [class.text-yellow-400]=\"star <= getRatingValue(rowField.field)\"\n            [class.text-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          <span class=\"text-sm text-base-content/50 ml-2\">{{ getRatingValue(rowField.field) }} / {{ asField(rowField.field).max || 5 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.SLIDER\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div class=\"flex items-center gap-3\">\n          <input\n            type=\"range\"\n            class=\"flex-1 h-2 bg-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          <span *ngIf=\"asField(rowField.field).showValue !== false\" class=\"text-sm text-base-content/60 min-w-[3rem] text-right\">\n            {{ getSliderValue(rowField.field) }}{{ asField(rowField.field).unit || '' }}\n          </span>\n        </div>\n        <div class=\"flex justify-between text-xs text-base-content/40 px-1\">\n          <span>{{ asField(rowField.field).min ?? 0 }}</span>\n          <span>{{ asField(rowField.field).max ?? 100 }}</span>\n        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          This field is required\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.FILE\" class=\"flex flex-col gap-1\">\n        <label class=\"pl-2 pb-1 flex flex-row gap-0.5 text-base font-medium text-base-content\">\n          {{ asField(rowField.field).label }}\n          <span *ngIf=\"hasRequiredValidator(rowField.field)\" class=\"text-red-500\">*</span>\n        </label>\n        <div\n          class=\"relative border-2 border-dashed border-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            <p *ngIf=\"asField(rowField.field).accept\" class=\"text-xs text-base-content/40\">Accepted: {{ asField(rowField.field).accept }}</p>\n            <p *ngIf=\"asField(rowField.field).maxSize\" class=\"text-xs text-base-content/40\">Max size: {{ formatFileSize(asField(rowField.field).maxSize) }}</p>\n          </div>\n        </div>\n        <!-- Selected files list -->\n        <div *ngIf=\"getSelectedFiles(asKey(rowField.field.key)).length > 0\" class=\"flex flex-col gap-1 mt-2\">\n          <div *ngFor=\"let file of getSelectedFiles(asKey(rowField.field.key)); let i = index\" class=\"flex items-center justify-between px-3 py-1.5 bg-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        </div>\n        <div\n          *ngIf=\"form.get(asKey(rowField.field.key))?.invalid && form.get(asKey(rowField.field.key))?.touched\"\n          class=\"text-red-500 text-xs pl-2 pt-1\"\n        >\n          {{ getFileError(rowField.field) }}\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"FieldKind.CUSTOM\">\n        <ng-container\n          mnCustomFieldHost\n          [component]=\"asField(rowField.field).component\"\n          [inputs]=\"asField(rowField.field).inputs\"\n          [formControlName]=\"asKey(rowField.field.key)\"\n        ></ng-container>\n      </div>\n\n      <div *ngSwitchDefault>\n      </div>\n    </ng-container>\n\n    <!-- Show cross-field error below any field that has one -->\n    <div\n      *ngIf=\"getFieldError(asKey(rowField.field.key)) && rowField.field.kind !== FieldKind.SELECT && rowField.field.kind !== FieldKind.MULTI_SELECT\"\n      class=\"text-red-500 text-xs pl-2 pt-1\"\n    >\n      {{ getFieldError(asKey(rowField.field.key)) }}\n    </div>\n  </ng-template>\n\n  <!-- Field Groups (sections with headers) -->\n  <div *ngIf=\"fieldGroups.length > 0\" class=\"flex flex-col gap-6\">\n    <div *ngFor=\"let group of fieldGroups\" class=\"flex flex-col gap-4\" [style.display]=\"isGroupVisible(group) ? '' : 'none'\">\n      <div class=\"border-b border-base-300 pb-2\">\n        <h3 class=\"text-base font-semibold text-base-content\">{{ group.title }}</h3>\n        <p *ngIf=\"group.description\" class=\"text-sm text-base-content/50 mt-0.5\">{{ group.description }}</p>\n      </div>\n      <div *ngFor=\"let row of group.rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n        <div *ngFor=\"let rowField of row.fields\" class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n          <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Standard rows (no groups) -->\n  <div class=\"flex flex-col gap-4\" *ngIf=\"rows.length > 0\">\n    <div *ngFor=\"let row of rows\" class=\"grid gap-4\" [style.grid-template-columns]=\"getGridColumns(row)\">\n      <div *ngFor=\"let rowField of row.fields\" class=\"flex flex-col gap-2\" [style.grid-column]=\"getGridSpan(rowField)\" [style.display]=\"isFieldVisible(rowField.field) ? '' : 'none'\">\n        <ng-container [ngTemplateOutlet]=\"fieldTemplate\" [ngTemplateOutletContext]=\"{ $implicit: rowField }\"></ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Form-level errors (not tied to a specific field) -->\n  <div *ngIf=\"formErrors['_form']\" class=\"text-red-500 text-sm px-2 py-1 bg-red-50 rounded-md\">\n    {{ formErrors['_form'] }}\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\" *ngIf=\"!hideFooter\">\n    <button\n      mnButton\n      type=\"button\"\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"modalRef.dismiss(ModalCloseReason.CANCELLED)\"\n    >\n      {{ labels.cancel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      type=\"submit\"\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: form.invalid || isSubmitting }\"\n      [disabled]=\"form.invalid || isSubmitting\"\n    >\n      {{ isSubmitting ? labels.submitting : labels.submit }}\n    </button>\n  </div>\n</form>\n", styles: [".select-arrow{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right .75rem center}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -4481,11 +4481,11 @@ class MnWizardBodyComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  <mn-custom-body-host\n    *ngIf=\"config.component || config.template\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"block\"\n  ></mn-custom-body-host>\n\n  <div class=\"flex gap-2 pb-4 border-b border-gray-200\">\n    <div\n      *ngFor=\"let step of visibleSteps; let i = index\"\n      class=\"flex items-center gap-2 flex-1\"\n      [class.active]=\"step.id === currentStepId\"\n      [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n      [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n      (click)=\"isFreeFlow ? goToStep(step) : null\"\n    >\n      <div\n        class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n        [ngClass]=\"{\n          'bg-blue-500 text-white': step.id === currentStepId,\n          'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n          'bg-gray-200 text-gray-500': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n        }\"\n      >{{ i + 1 }}</div>\n      <div\n        class=\"text-sm\"\n        [ngClass]=\"{\n          'text-gray-900 font-semibold': step.id === currentStepId,\n          'text-gray-500': step.id !== currentStepId\n        }\"\n      >{{ step.title }}</div>\n    </div>\n  </div>\n\n  <div class=\"min-h-48\">\n    <ng-container *ngFor=\"let step of config.steps\">\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">{{ step.title }}</h3>\n        <div class=\"text-gray-700\">\n          <!-- Form step -->\n          <mn-form-body\n            *ngIf=\"stepFormConfigs[step.id]\"\n            [config]=\"stepFormConfigs[step.id]\"\n            [modalRef]=\"asAny(modalRef)\"\n            [hideFooter]=\"true\"\n            [hideCustomBody]=\"true\"\n          ></mn-form-body>\n\n          <!-- Text body -->\n          <div *ngIf=\"!stepFormConfigs[step.id] && isTextBody(step)\">\n            {{ step.body }}\n          </div>\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  <div *ngIf=\"wizardErrors && (wizardErrors | keyvalue).length > 0\" class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n    <div *ngFor=\"let err of wizardErrors | keyvalue\" class=\"text-red-500 text-sm\">\n      {{ err.value }}\n    </div>\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-gray-200\">\n    <button\n      *ngIf=\"!currentStep?.hideBack\"\n      mnButton\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"back()\"\n    >\n      {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      *ngIf=\"!isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n      (click)=\"next()\"\n    >\n      {{ currentStep?.nextLabel || labels.next }}\n    </button>\n\n    <button\n      *ngIf=\"isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n      [disabled]=\"!isCurrentStepValid || isCompleting\"\n      (click)=\"complete()\"\n    >\n      {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnWizardBodyComponent, isStandalone: true, selector: "mn-wizard-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBodies", predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  <mn-custom-body-host\n    *ngIf=\"config.component || config.template\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"block\"\n  ></mn-custom-body-host>\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    <div\n      *ngFor=\"let step of visibleSteps; let i = index\"\n      class=\"flex items-center gap-2 flex-1\"\n      [class.active]=\"step.id === currentStepId\"\n      [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n      [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n      (click)=\"isFreeFlow ? goToStep(step) : null\"\n    >\n      <div\n        class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n        [ngClass]=\"{\n          'bg-blue-500 text-white': step.id === currentStepId,\n          'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n          'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n        }\"\n      >{{ i + 1 }}</div>\n      <div\n        class=\"text-sm\"\n        [ngClass]=\"{\n          'text-base-content font-semibold': step.id === currentStepId,\n          'text-base-content/50': step.id !== currentStepId\n        }\"\n      >{{ step.title }}</div>\n    </div>\n  </div>\n\n  <div class=\"min-h-48\">\n    <ng-container *ngFor=\"let step of config.steps\">\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          <mn-form-body\n            *ngIf=\"stepFormConfigs[step.id]\"\n            [config]=\"stepFormConfigs[step.id]\"\n            [modalRef]=\"asAny(modalRef)\"\n            [hideFooter]=\"true\"\n            [hideCustomBody]=\"true\"\n          ></mn-form-body>\n\n          <!-- Text body -->\n          <div *ngIf=\"!stepFormConfigs[step.id] && isTextBody(step)\">\n            {{ step.body }}\n          </div>\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  <div *ngIf=\"wizardErrors && (wizardErrors | keyvalue).length > 0\" class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n    <div *ngFor=\"let err of wizardErrors | keyvalue\" class=\"text-red-500 text-sm\">\n      {{ err.value }}\n    </div>\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    <button\n      *ngIf=\"!currentStep?.hideBack\"\n      mnButton\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"back()\"\n    >\n      {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      *ngIf=\"!isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n      (click)=\"next()\"\n    >\n      {{ currentStep?.nextLabel || labels.next }}\n    </button>\n\n    <button\n      *ngIf=\"isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n      [disabled]=\"!isCurrentStepValid || isCompleting\"\n      (click)=\"complete()\"\n    >\n      {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnWizardBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent], template: "<div class=\"flex flex-col gap-6\">\n  <mn-custom-body-host\n    *ngIf=\"config.component || config.template\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"block\"\n  ></mn-custom-body-host>\n\n  <div class=\"flex gap-2 pb-4 border-b border-gray-200\">\n    <div\n      *ngFor=\"let step of visibleSteps; let i = index\"\n      class=\"flex items-center gap-2 flex-1\"\n      [class.active]=\"step.id === currentStepId\"\n      [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n      [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n      (click)=\"isFreeFlow ? goToStep(step) : null\"\n    >\n      <div\n        class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n        [ngClass]=\"{\n          'bg-blue-500 text-white': step.id === currentStepId,\n          'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n          'bg-gray-200 text-gray-500': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n        }\"\n      >{{ i + 1 }}</div>\n      <div\n        class=\"text-sm\"\n        [ngClass]=\"{\n          'text-gray-900 font-semibold': step.id === currentStepId,\n          'text-gray-500': step.id !== currentStepId\n        }\"\n      >{{ step.title }}</div>\n    </div>\n  </div>\n\n  <div class=\"min-h-48\">\n    <ng-container *ngFor=\"let step of config.steps\">\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-gray-900 mb-4\">{{ step.title }}</h3>\n        <div class=\"text-gray-700\">\n          <!-- Form step -->\n          <mn-form-body\n            *ngIf=\"stepFormConfigs[step.id]\"\n            [config]=\"stepFormConfigs[step.id]\"\n            [modalRef]=\"asAny(modalRef)\"\n            [hideFooter]=\"true\"\n            [hideCustomBody]=\"true\"\n          ></mn-form-body>\n\n          <!-- Text body -->\n          <div *ngIf=\"!stepFormConfigs[step.id] && isTextBody(step)\">\n            {{ step.body }}\n          </div>\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  <div *ngIf=\"wizardErrors && (wizardErrors | keyvalue).length > 0\" class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n    <div *ngFor=\"let err of wizardErrors | keyvalue\" class=\"text-red-500 text-sm\">\n      {{ err.value }}\n    </div>\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-gray-200\">\n    <button\n      *ngIf=\"!currentStep?.hideBack\"\n      mnButton\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"back()\"\n    >\n      {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      *ngIf=\"!isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n      (click)=\"next()\"\n    >\n      {{ currentStep?.nextLabel || labels.next }}\n    </button>\n\n    <button\n      *ngIf=\"isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n      [disabled]=\"!isCurrentStepValid || isCompleting\"\n      (click)=\"complete()\"\n    >\n      {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n    </button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-wizard-body', standalone: true, imports: [CommonModule, ReactiveFormsModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent], template: "<div class=\"flex flex-col gap-6\">\n  <mn-custom-body-host\n    *ngIf=\"config.component || config.template\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    class=\"block\"\n  ></mn-custom-body-host>\n\n  <div class=\"flex gap-2 pb-4 border-b border-base-300\">\n    <div\n      *ngFor=\"let step of visibleSteps; let i = index\"\n      class=\"flex items-center gap-2 flex-1\"\n      [class.active]=\"step.id === currentStepId\"\n      [class.complete]=\"visitedStepIds.includes(step.id) && step.id !== currentStepId\"\n      [class.cursor-pointer]=\"isFreeFlow && canNavigateToStep(step)\"\n      (click)=\"isFreeFlow ? goToStep(step) : null\"\n    >\n      <div\n        class=\"w-8 h-8 rounded-full flex items-center justify-center font-semibold transition-all text-sm\"\n        [ngClass]=\"{\n          'bg-blue-500 text-white': step.id === currentStepId,\n          'bg-green-500 text-white': visitedStepIds.includes(step.id) && step.id !== currentStepId,\n          'bg-base-200 text-base-content/50': !visitedStepIds.includes(step.id) && step.id !== currentStepId\n        }\"\n      >{{ i + 1 }}</div>\n      <div\n        class=\"text-sm\"\n        [ngClass]=\"{\n          'text-base-content font-semibold': step.id === currentStepId,\n          'text-base-content/50': step.id !== currentStepId\n        }\"\n      >{{ step.title }}</div>\n    </div>\n  </div>\n\n  <div class=\"min-h-48\">\n    <ng-container *ngFor=\"let step of config.steps\">\n      <div [style.display]=\"step.id === currentStepId ? 'block' : 'none'\">\n        <h3 class=\"text-lg font-semibold text-base-content mb-4\">{{ step.title }}</h3>\n        <div class=\"text-base-content/80\">\n          <!-- Form step -->\n          <mn-form-body\n            *ngIf=\"stepFormConfigs[step.id]\"\n            [config]=\"stepFormConfigs[step.id]\"\n            [modalRef]=\"asAny(modalRef)\"\n            [hideFooter]=\"true\"\n            [hideCustomBody]=\"true\"\n          ></mn-form-body>\n\n          <!-- Text body -->\n          <div *ngIf=\"!stepFormConfigs[step.id] && isTextBody(step)\">\n            {{ step.body }}\n          </div>\n\n          <!-- Dynamic content container for component/template bodies -->\n          <ng-container #dynamicContainer></ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Wizard-level errors (from onBeforeComplete) -->\n  <div *ngIf=\"wizardErrors && (wizardErrors | keyvalue).length > 0\" class=\"flex flex-col gap-1 px-2 py-2 bg-red-50 rounded-md\">\n    <div *ngFor=\"let err of wizardErrors | keyvalue\" class=\"text-red-500 text-sm\">\n      {{ err.value }}\n    </div>\n  </div>\n\n  <div class=\"flex gap-3 pt-4 border-t border-base-300\">\n    <button\n      *ngIf=\"!currentStep?.hideBack\"\n      mnButton\n      [data]=\"{ variant: 'outline', color: 'secondary' }\"\n      (click)=\"back()\"\n    >\n      {{ currentStep?.backLabel || (canGoBack ? labels.back : labels.close) }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      *ngIf=\"!isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid }\"\n      (click)=\"next()\"\n    >\n      {{ currentStep?.nextLabel || labels.next }}\n    </button>\n\n    <button\n      *ngIf=\"isLastStep\"\n      mnButton\n      [data]=\"{ variant: 'fill', color: 'primary', disabled: !isCurrentStepValid || isCompleting }\"\n      [disabled]=\"!isCurrentStepValid || isCompleting\"\n      (click)=\"complete()\"\n    >\n      {{ currentStep?.nextLabel || (isCompleting ? labels.completing : labels.complete) }}\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -4588,11 +4588,11 @@ class MnConfirmationBodyComponent {
         return field;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnConfirmationBodyComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnConfirmationBodyComponent, isStandalone: true, selector: "mn-confirmation-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBody", first: true, predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\" [ngClass]=\"toneClass\">\n  <!-- Custom Content (Component or Template) -->\n  <mn-custom-body-host\n    *ngIf=\"config.component || config.template\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n  ></mn-custom-body-host>\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    <div *ngIf=\"config.tone === 'warning' || config.tone === 'danger'\"\n         class=\"w-12 h-12 rounded-full flex items-center justify-center\"\n         [ngClass]=\"{\n           'bg-blue-100 text-blue-500': config.tone !== 'warning' && config.tone !== 'danger',\n           'bg-amber-100 text-amber-500': config.tone === 'warning',\n           'bg-red-100 text-red-500': config.tone === 'danger'\n         }\">\n      <svg\n        *ngIf=\"config.tone === 'warning'\"\n        class=\"w-6 h-6\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"config.tone === 'danger'\"\n        class=\"w-6 h-6\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z\"\n        />\n      </svg>\n    </div>\n\n    <div class=\"text-base text-gray-700 leading-relaxed max-w-[28rem] dark:text-gray-300\" *ngIf=\"config.message\">\n      {{ config.message }}\n    </div>\n  </div>\n\n  <!-- Form Fields / Rows -->\n  <mn-form-body\n    *ngIf=\"hasFormFields\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    [hideFooter]=\"true\"\n    [hideCustomBody]=\"true\"\n    (formStatusChange)=\"onFormStatusChange($event)\"\n  ></mn-form-body>\n\n  <div class=\"flex gap-3 w-full\">\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(cancelStyle),\n        color: getButtonColor(cancelStyle)\n      }\"\n      (click)=\"cancel()\"\n    >\n      {{ cancelLabel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(confirmStyle),\n        color: getButtonColor(confirmStyle),\n        disabled: isConfirmDisabled\n      }\"\n      [disabled]=\"isConfirmDisabled\"\n      (click)=\"confirm()\"\n    >\n      {{ confirmLabel }}\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnConfirmationBodyComponent, isStandalone: true, selector: "mn-confirmation-body", inputs: { config: "config", modalRef: "modalRef" }, viewQueries: [{ propertyName: "formBody", first: true, predicate: MnFormBodyComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-6\" [ngClass]=\"toneClass\">\n  <!-- Custom Content (Component or Template) -->\n  <mn-custom-body-host\n    *ngIf=\"config.component || config.template\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n  ></mn-custom-body-host>\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    <div *ngIf=\"config.tone === 'warning' || config.tone === 'danger'\"\n         class=\"w-12 h-12 rounded-full flex items-center justify-center\"\n         [ngClass]=\"{\n           'bg-blue-100 text-blue-500': config.tone !== 'warning' && config.tone !== 'danger',\n           'bg-amber-100 text-amber-500': config.tone === 'warning',\n           'bg-red-100 text-red-500': config.tone === 'danger'\n         }\">\n      <svg\n        *ngIf=\"config.tone === 'warning'\"\n        class=\"w-6 h-6\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"config.tone === 'danger'\"\n        class=\"w-6 h-6\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z\"\n        />\n      </svg>\n    </div>\n\n    <div class=\"text-base text-base-content/80 leading-relaxed max-w-[28rem]\" *ngIf=\"config.message\">\n      {{ config.message }}\n    </div>\n  </div>\n\n  <!-- Form Fields / Rows -->\n  <mn-form-body\n    *ngIf=\"hasFormFields\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    [hideFooter]=\"true\"\n    [hideCustomBody]=\"true\"\n    (formStatusChange)=\"onFormStatusChange($event)\"\n  ></mn-form-body>\n\n  <div class=\"flex gap-3 w-full\">\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(cancelStyle),\n        color: getButtonColor(cancelStyle)\n      }\"\n      (click)=\"cancel()\"\n    >\n      {{ cancelLabel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(confirmStyle),\n        color: getButtonColor(confirmStyle),\n        disabled: isConfirmDisabled\n      }\"\n      [disabled]=\"isConfirmDisabled\"\n      (click)=\"confirm()\"\n    >\n      {{ confirmLabel }}\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnConfirmationBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mn-confirmation-body', standalone: true, imports: [CommonModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, ReactiveFormsModule], template: "<div class=\"flex flex-col gap-6\" [ngClass]=\"toneClass\">\n  <!-- Custom Content (Component or Template) -->\n  <mn-custom-body-host\n    *ngIf=\"config.component || config.template\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n  ></mn-custom-body-host>\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    <div *ngIf=\"config.tone === 'warning' || config.tone === 'danger'\"\n         class=\"w-12 h-12 rounded-full flex items-center justify-center\"\n         [ngClass]=\"{\n           'bg-blue-100 text-blue-500': config.tone !== 'warning' && config.tone !== 'danger',\n           'bg-amber-100 text-amber-500': config.tone === 'warning',\n           'bg-red-100 text-red-500': config.tone === 'danger'\n         }\">\n      <svg\n        *ngIf=\"config.tone === 'warning'\"\n        class=\"w-6 h-6\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"config.tone === 'danger'\"\n        class=\"w-6 h-6\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z\"\n        />\n      </svg>\n    </div>\n\n    <div class=\"text-base text-gray-700 leading-relaxed max-w-[28rem] dark:text-gray-300\" *ngIf=\"config.message\">\n      {{ config.message }}\n    </div>\n  </div>\n\n  <!-- Form Fields / Rows -->\n  <mn-form-body\n    *ngIf=\"hasFormFields\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    [hideFooter]=\"true\"\n    [hideCustomBody]=\"true\"\n    (formStatusChange)=\"onFormStatusChange($event)\"\n  ></mn-form-body>\n\n  <div class=\"flex gap-3 w-full\">\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(cancelStyle),\n        color: getButtonColor(cancelStyle)\n      }\"\n      (click)=\"cancel()\"\n    >\n      {{ cancelLabel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(confirmStyle),\n        color: getButtonColor(confirmStyle),\n        disabled: isConfirmDisabled\n      }\"\n      [disabled]=\"isConfirmDisabled\"\n      (click)=\"confirm()\"\n    >\n      {{ confirmLabel }}\n    </button>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mn-confirmation-body', standalone: true, imports: [CommonModule, MnButton, MnFormBodyComponent, MnCustomBodyHostComponent, ReactiveFormsModule], template: "<div class=\"flex flex-col gap-6\" [ngClass]=\"toneClass\">\n  <!-- Custom Content (Component or Template) -->\n  <mn-custom-body-host\n    *ngIf=\"config.component || config.template\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n  ></mn-custom-body-host>\n\n  <div class=\"flex flex-col items-center text-center gap-6\">\n    <div *ngIf=\"config.tone === 'warning' || config.tone === 'danger'\"\n         class=\"w-12 h-12 rounded-full flex items-center justify-center\"\n         [ngClass]=\"{\n           'bg-blue-100 text-blue-500': config.tone !== 'warning' && config.tone !== 'danger',\n           'bg-amber-100 text-amber-500': config.tone === 'warning',\n           'bg-red-100 text-red-500': config.tone === 'danger'\n         }\">\n      <svg\n        *ngIf=\"config.tone === 'warning'\"\n        class=\"w-6 h-6\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z\"\n        />\n      </svg>\n      <svg\n        *ngIf=\"config.tone === 'danger'\"\n        class=\"w-6 h-6\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke-width=\"1.5\"\n        stroke=\"currentColor\"\n      >\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z\"\n        />\n      </svg>\n    </div>\n\n    <div class=\"text-base text-base-content/80 leading-relaxed max-w-[28rem]\" *ngIf=\"config.message\">\n      {{ config.message }}\n    </div>\n  </div>\n\n  <!-- Form Fields / Rows -->\n  <mn-form-body\n    *ngIf=\"hasFormFields\"\n    [config]=\"asAny(config)\"\n    [modalRef]=\"asAny(modalRef)\"\n    [hideFooter]=\"true\"\n    [hideCustomBody]=\"true\"\n    (formStatusChange)=\"onFormStatusChange($event)\"\n  ></mn-form-body>\n\n  <div class=\"flex gap-3 w-full\">\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(cancelStyle),\n        color: getButtonColor(cancelStyle)\n      }\"\n      (click)=\"cancel()\"\n    >\n      {{ cancelLabel }}\n    </button>\n\n    <div class=\"flex-1\"></div>\n\n    <button\n      mnButton\n      [data]=\"{\n        variant: getButtonVariant(confirmStyle),\n        color: getButtonColor(confirmStyle),\n        disabled: isConfirmDisabled\n      }\"\n      [disabled]=\"isConfirmDisabled\"\n      (click)=\"confirm()\"\n    >\n      {{ confirmLabel }}\n    </button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{
@@ -4832,7 +4832,7 @@ class MnModalShellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" *ngIf=\"showBackdrop\" (click)=\"onBackdropClick()\"></div>\n\n<div\n  class=\"modal-container relative bg-white rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col dark:bg-gray-900\"\n  [ngClass]=\"[containerSizeClass, animationClass]\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <div class=\"flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700\">\n    <div class=\"flex flex-col gap-0.5\">\n      <h2 class=\"m-0 text-xl font-semibold text-gray-900 dark:text-gray-100\" *ngIf=\"config.title\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      <p class=\"m-0 text-sm text-gray-500 font-normal dark:text-gray-400\" *ngIf=\"config.subtitle\">{{ config.subtitle }}</p>\n    </div>\n    <button\n      *ngIf=\"showCloseButton\"\n      class=\"bg-transparent border-none text-2xl cursor-pointer text-gray-500 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100\"\n      (click)=\"onCloseButtonClick()\"\n      aria-label=\"Close modal\"\n    >\n      \u00D7\n    </button>\n  </div>\n  <p class=\"m-0 px-6 text-sm text-gray-500 leading-relaxed dark:text-gray-400\" *ngIf=\"config.description\" id=\"mn-modal-description\">{{ config.description }}</p>\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    <mn-wizard-body\n      *ngIf=\"config.kind === ModalKind.WIZARD\"\n      [config]=\"asWizard(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-wizard-body>\n\n    <mn-form-body\n      *ngIf=\"config.kind === ModalKind.FORM\"\n      [config]=\"asForm(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-form-body>\n\n    <mn-confirmation-body\n      *ngIf=\"config.kind === ModalKind.CONFIRMATION\"\n      [config]=\"asConfirmation(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-confirmation-body>\n\n    <mn-custom-body-host\n      *ngIf=\"config.kind === ModalKind.CUSTOM\"\n      [config]=\"asCustom(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-custom-body-host>\n  </div>\n\n  <!-- Custom Footer Actions -->\n  <div *ngIf=\"hasCustomFooterActions\" class=\"flex gap-3 p-6 border-t border-gray-200 dark:border-gray-700\">\n    <ng-container *ngFor=\"let action of leftFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n\n    <div class=\"flex-1\"></div>\n\n    <ng-container *ngFor=\"let action of rightFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: MnModalShellComponent, isStandalone: true, selector: "mn-modal-shell", inputs: { config: "config", modalRef: "modalRef" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" *ngIf=\"showBackdrop\" (click)=\"onBackdropClick()\"></div>\n\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [ngClass]=\"[containerSizeClass, animationClass]\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <div class=\"flex items-center justify-between p-6 border-b border-base-300\">\n    <div class=\"flex flex-col gap-0.5\">\n      <h2 class=\"m-0 text-xl font-semibold text-base-content\" *ngIf=\"config.title\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      <p class=\"m-0 text-sm text-base-content/60 font-normal\" *ngIf=\"config.subtitle\">{{ config.subtitle }}</p>\n    </div>\n    <button\n      *ngIf=\"showCloseButton\"\n      class=\"bg-transparent border-none text-2xl cursor-pointer text-base-content/50 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-base-200 hover:text-base-content\"\n      (click)=\"onCloseButtonClick()\"\n      aria-label=\"Close modal\"\n    >\n      \u00D7\n    </button>\n  </div>\n  <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" *ngIf=\"config.description\" id=\"mn-modal-description\">{{ config.description }}</p>\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    <mn-wizard-body\n      *ngIf=\"config.kind === ModalKind.WIZARD\"\n      [config]=\"asWizard(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-wizard-body>\n\n    <mn-form-body\n      *ngIf=\"config.kind === ModalKind.FORM\"\n      [config]=\"asForm(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-form-body>\n\n    <mn-confirmation-body\n      *ngIf=\"config.kind === ModalKind.CONFIRMATION\"\n      [config]=\"asConfirmation(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-confirmation-body>\n\n    <mn-custom-body-host\n      *ngIf=\"config.kind === ModalKind.CUSTOM\"\n      [config]=\"asCustom(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-custom-body-host>\n  </div>\n\n  <!-- Custom Footer Actions -->\n  <div *ngIf=\"hasCustomFooterActions\" class=\"flex gap-3 p-6 border-t border-base-300\">\n    <ng-container *ngFor=\"let action of leftFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n\n    <div class=\"flex-1\"></div>\n\n    <ng-container *ngFor=\"let action of rightFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MnWizardBodyComponent, selector: "mn-wizard-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnFormBodyComponent, selector: "mn-form-body", inputs: ["config", "modalRef", "hideFooter", "hideCustomBody"], outputs: ["formStatusChange"] }, { kind: "component", type: MnConfirmationBodyComponent, selector: "mn-confirmation-body", inputs: ["config", "modalRef"] }, { kind: "component", type: MnCustomBodyHostComponent, selector: "mn-custom-body-host", inputs: ["config", "modalRef"] }, { kind: "component", type: MnButton, selector: "button[mnButton], a[mnButton]", inputs: ["data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MnModalShellComponent, decorators: [{
             type: Component,
@@ -4843,7 +4843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MnConfirmationBodyComponent,
                         MnCustomBodyHostComponent,
                         MnButton,
-                    ], template: "<div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" *ngIf=\"showBackdrop\" (click)=\"onBackdropClick()\"></div>\n\n<div\n  class=\"modal-container relative bg-white rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col dark:bg-gray-900\"\n  [ngClass]=\"[containerSizeClass, animationClass]\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <div class=\"flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700\">\n    <div class=\"flex flex-col gap-0.5\">\n      <h2 class=\"m-0 text-xl font-semibold text-gray-900 dark:text-gray-100\" *ngIf=\"config.title\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      <p class=\"m-0 text-sm text-gray-500 font-normal dark:text-gray-400\" *ngIf=\"config.subtitle\">{{ config.subtitle }}</p>\n    </div>\n    <button\n      *ngIf=\"showCloseButton\"\n      class=\"bg-transparent border-none text-2xl cursor-pointer text-gray-500 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100\"\n      (click)=\"onCloseButtonClick()\"\n      aria-label=\"Close modal\"\n    >\n      \u00D7\n    </button>\n  </div>\n  <p class=\"m-0 px-6 text-sm text-gray-500 leading-relaxed dark:text-gray-400\" *ngIf=\"config.description\" id=\"mn-modal-description\">{{ config.description }}</p>\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    <mn-wizard-body\n      *ngIf=\"config.kind === ModalKind.WIZARD\"\n      [config]=\"asWizard(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-wizard-body>\n\n    <mn-form-body\n      *ngIf=\"config.kind === ModalKind.FORM\"\n      [config]=\"asForm(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-form-body>\n\n    <mn-confirmation-body\n      *ngIf=\"config.kind === ModalKind.CONFIRMATION\"\n      [config]=\"asConfirmation(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-confirmation-body>\n\n    <mn-custom-body-host\n      *ngIf=\"config.kind === ModalKind.CUSTOM\"\n      [config]=\"asCustom(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-custom-body-host>\n  </div>\n\n  <!-- Custom Footer Actions -->\n  <div *ngIf=\"hasCustomFooterActions\" class=\"flex gap-3 p-6 border-t border-gray-200 dark:border-gray-700\">\n    <ng-container *ngFor=\"let action of leftFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n\n    <div class=\"flex-1\"></div>\n\n    <ng-container *ngFor=\"let action of rightFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}\n"] }]
+                    ], template: "<div class=\"modal-backdrop absolute inset-0 bg-black/50 animate-[fadeIn_0.2s_ease-in-out]\" *ngIf=\"showBackdrop\" (click)=\"onBackdropClick()\"></div>\n\n<div\n  class=\"modal-container relative bg-base-100 rounded-lg shadow-xl max-h-[90vh] overflow-hidden flex flex-col\"\n  [ngClass]=\"[containerSizeClass, animationClass]\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-labelledby]=\"config.title ? 'mn-modal-title' : null\"\n  [attr.aria-describedby]=\"config.description ? 'mn-modal-description' : null\"\n  tabindex=\"-1\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <div class=\"flex items-center justify-between p-6 border-b border-base-300\">\n    <div class=\"flex flex-col gap-0.5\">\n      <h2 class=\"m-0 text-xl font-semibold text-base-content\" *ngIf=\"config.title\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      <p class=\"m-0 text-sm text-base-content/60 font-normal\" *ngIf=\"config.subtitle\">{{ config.subtitle }}</p>\n    </div>\n    <button\n      *ngIf=\"showCloseButton\"\n      class=\"bg-transparent border-none text-2xl cursor-pointer text-base-content/50 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-base-200 hover:text-base-content\"\n      (click)=\"onCloseButtonClick()\"\n      aria-label=\"Close modal\"\n    >\n      \u00D7\n    </button>\n  </div>\n  <p class=\"m-0 px-6 text-sm text-base-content/60 leading-relaxed\" *ngIf=\"config.description\" id=\"mn-modal-description\">{{ config.description }}</p>\n\n  <div class=\"flex-1 overflow-y-auto p-6\">\n    <mn-wizard-body\n      *ngIf=\"config.kind === ModalKind.WIZARD\"\n      [config]=\"asWizard(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-wizard-body>\n\n    <mn-form-body\n      *ngIf=\"config.kind === ModalKind.FORM\"\n      [config]=\"asForm(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-form-body>\n\n    <mn-confirmation-body\n      *ngIf=\"config.kind === ModalKind.CONFIRMATION\"\n      [config]=\"asConfirmation(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-confirmation-body>\n\n    <mn-custom-body-host\n      *ngIf=\"config.kind === ModalKind.CUSTOM\"\n      [config]=\"asCustom(config)\"\n      [modalRef]=\"asAny(modalRef)\"\n    ></mn-custom-body-host>\n  </div>\n\n  <!-- Custom Footer Actions -->\n  <div *ngIf=\"hasCustomFooterActions\" class=\"flex gap-3 p-6 border-t border-base-300\">\n    <ng-container *ngFor=\"let action of leftFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n\n    <div class=\"flex-1\"></div>\n\n    <ng-container *ngFor=\"let action of rightFooterActions\">\n      <button\n        mnButton\n        [data]=\"{\n          variant: getActionButtonVariant(action.style),\n          color: getActionButtonColor(action.style),\n          disabled: action.disabled\n        }\"\n        [disabled]=\"action.disabled\"\n        (click)=\"onFooterAction(action)\"\n      >\n        {{ action.label }}\n      </button>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;transition:transform .3s ease-in-out,filter .3s ease-in-out,opacity .3s ease-in-out}:host(.is-stacked){transform:scale(.96) translateY(-1rem);filter:brightness(.9) blur(1px);pointer-events:none;opacity:.8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(1rem)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}:host(.closing) .modal-backdrop{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-slide .modal-container{animation:slideOut .15s ease-in-out forwards}:host(.closing).anim-fade .modal-container{animation:fadeOut .15s ease-in-out forwards}:host(.closing).anim-zoom .modal-container{animation:zoomOut .15s ease-in-out forwards}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{