mn-angular-lib 0.0.54 → 0.0.56

package/fesm2022/mn-angular-lib.mjs

@@ -173,11 +173,11 @@ const mnAlertVariants = tv({
     base: 'flex items-start gap-3 p-4 border rounded-xl shadow-sm transition-all duration-300',
     variants: {
         kind: {
-            success: 'bg-green-50 border-green-200 text-green-800',
-            info: 'bg-blue-50 border-blue-200 text-blue-800',
-            warning: 'bg-amber-50 border-amber-200 text-amber-800',
-            error: 'bg-red-50 border-red-200 text-red-800',
-            default: 'bg-white border-gray-200 text-gray-800',
+            success: 'bg-success/10 border-success/30 text-success',
+            info: 'bg-info/10 border-info/30 text-info',
+            warning: 'bg-warning/10 border-warning/30 text-warning',
+            error: 'bg-error/10 border-error/30 text-error',
+            default: 'bg-base-100 border-base-300 text-base-content',
         },
         variant: {
             fill: '',
@@ -189,22 +189,22 @@ const mnAlertVariants = tv({
         {
             kind: 'success',
             variant: 'fill',
-            class: 'bg-green-600 border-green-700 text-white'
+            class: 'bg-success border-success text-success-content'
         },
         {
             kind: 'info',
             variant: 'fill',
-            class: 'bg-blue-600 border-blue-700 text-white'
+            class: 'bg-info border-info text-info-content'
         },
         {
             kind: 'warning',
             variant: 'fill',
-            class: 'bg-amber-500 border-amber-600 text-white'
+            class: 'bg-warning border-warning text-warning-content'
         },
         {
             kind: 'error',
             variant: 'fill',
-            class: 'bg-red-600 border-red-700 text-white'
+            class: 'bg-error border-error text-error-content'
         }
     ],
     defaultVariants: {
@@ -289,23 +289,23 @@ const mnButtonVariants = tv({
     },
     compoundVariants: [
         // Fill
-        { variant: 'fill', color: 'primary', class: 'bg-brand-500 text-black hover:bg-brand-700' },
-        { variant: 'fill', color: 'secondary', class: 'bg-gray-600 text-white hover:bg-gray-700' },
-        { variant: 'fill', color: 'danger', class: 'bg-red-600 text-white hover:bg-red-700' },
-        { variant: 'fill', color: 'warning', class: 'bg-amber-500 text-black hover:bg-amber-600' },
-        { variant: 'fill', color: 'success', class: 'bg-green-600 text-white hover:bg-green-700' },
+        { variant: 'fill', color: 'primary', class: 'bg-primary text-primary-content hover:bg-primary/80' },
+        { variant: 'fill', color: 'secondary', class: 'bg-neutral text-neutral-content hover:bg-neutral/80' },
+        { variant: 'fill', color: 'danger', class: 'bg-error text-error-content hover:bg-error/80' },
+        { variant: 'fill', color: 'warning', class: 'bg-warning text-warning-content hover:bg-warning/80' },
+        { variant: 'fill', color: 'success', class: 'bg-success text-success-content hover:bg-success/80' },
         // Outline
-        { variant: 'outline', color: 'primary', class: 'border-brand-500 text-brand-500 hover:bg-brand-100' },
-        { variant: 'outline', color: 'secondary', class: 'border-gray-600 text-gray-700 hover:bg-gray-100' },
-        { variant: 'outline', color: 'danger', class: 'border-red-600 text-red-600 hover:bg-red-100' },
-        { variant: 'outline', color: 'warning', class: 'border-amber-500 text-amber-600 hover:bg-amber-100' },
-        { variant: 'outline', color: 'success', class: 'border-green-600 text-green-600 hover:bg-green-100' },
+        { variant: 'outline', color: 'primary', class: 'border-primary text-primary hover:bg-primary/10' },
+        { variant: 'outline', color: 'secondary', class: 'border-neutral text-neutral hover:bg-neutral/10' },
+        { variant: 'outline', color: 'danger', class: 'border-error text-error hover:bg-error/10' },
+        { variant: 'outline', color: 'warning', class: 'border-warning text-warning hover:bg-warning/10' },
+        { variant: 'outline', color: 'success', class: 'border-success text-success hover:bg-success/10' },
         // Text
-        { variant: 'text', color: 'primary', class: 'text-brand-500 hover:bg-brand-100' },
-        { variant: 'text', color: 'secondary', class: 'text-gray-700 hover:bg-gray-100' },
-        { variant: 'text', color: 'danger', class: 'text-red-600 hover:bg-red-100' },
-        { variant: 'text', color: 'warning', class: 'text-amber-600 hover:bg-amber-100' },
-        { variant: 'text', color: 'success', class: 'text-green-600 hover:bg-green-100' },
+        { variant: 'text', color: 'primary', class: 'text-primary hover:bg-primary/10' },
+        { variant: 'text', color: 'secondary', class: 'text-neutral hover:bg-neutral/10' },
+        { variant: 'text', color: 'danger', class: 'text-error hover:bg-error/10' },
+        { variant: 'text', color: 'warning', class: 'text-warning hover:bg-warning/10' },
+        { variant: 'text', color: 'success', class: 'text-success hover:bg-success/10' },
     ],
     defaultVariants: {
         size: 'md',
@@ -553,7 +553,7 @@ function pickAdapter(type) {
 }
 
 const mnInputFieldVariants = tv({
-    base: 'bg-white border-1 border-gray-500 placeholder-gray-500 text-sm',
+    base: 'bg-base-100 border-1 border-base-300 placeholder-base-content/50 text-base-content text-sm',
     variants: {
         shadow: {
             true: 'shadow-lg',
@@ -1452,7 +1452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 const mnTextareaVariants = tv({
-    base: 'bg-white border-1 border-gray-500 placeholder-gray-500 text-sm',
+    base: 'bg-base-100 border-1 border-base-300 placeholder-base-content/50 text-base-content text-sm',
     variants: {
         shadow: {
             true: 'shadow-lg',
@@ -1916,7 +1916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 const mnDatetimeVariants = tv({
-    base: 'bg-white border-1 border-gray-500 placeholder-gray-500 text-sm',
+    base: 'bg-base-100 border-1 border-base-300 placeholder-base-content/50 text-base-content text-sm',
     variants: {
         shadow: {
             true: 'shadow-lg',
@@ -2092,7 +2092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }] } });
 
 const mnMultiSelectVariants = tv({
-    base: 'bg-white border-1 border-gray-500 text-sm cursor-pointer',
+    base: 'bg-base-100 border-1 border-base-300 text-base-content text-sm cursor-pointer',
     variants: {
         shadow: {
             true: 'shadow-lg',
@@ -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\">{{ 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\">\n            {{ opt.label }}\n            <button\n              type=\"button\"\n              class=\"text-gray-400 hover:text-gray-600 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-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\">\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-gray-200\">\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\"\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\"\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\">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-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"] }] });
 }
 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\">{{ 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\">\n            {{ opt.label }}\n            <button\n              type=\"button\"\n              class=\"text-gray-400 hover:text-gray-600 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-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\">\n        @if (props.searchable) {\n          <div class=\"p-2 border-b border-gray-200\">\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\"\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\"\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\">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-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" }]
         }], 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\"\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\">\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\"></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\"></div>\n          </td>\n          <td *ngIf=\"hasRowActions\" class=\"px-4 py-3\"><div class=\"h-4 w-16 rounded bg-gray-200\"></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\">\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\"\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\"\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-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"] }] });
 }
 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\"\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\">\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\"></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\"></div>\n          </td>\n          <td *ngIf=\"hasRowActions\" class=\"px-4 py-3\"><div class=\"h-4 w-16 rounded bg-gray-200\"></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\">\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\"\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\"\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-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" }]
         }], propDecorators: { dataSource: [{
                 type: Input
             }], sortChange: [{
@@ -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]\" *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-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 }] });
 }
 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]\" *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-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" }]
         }], 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\"\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\">\n    <div class=\"flex flex-col gap-0.5\">\n      <h2 class=\"m-0 text-xl font-semibold text-gray-900\" *ngIf=\"config.title\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      <p class=\"m-0 text-sm text-gray-500 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-gray-500 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-gray-100 hover:text-gray-900\"\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\" *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\">\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-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"] }] });
 }
 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\"\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\">\n    <div class=\"flex flex-col gap-0.5\">\n      <h2 class=\"m-0 text-xl font-semibold text-gray-900\" *ngIf=\"config.title\" id=\"mn-modal-title\">{{ config.title }}</h2>\n      <p class=\"m-0 text-sm text-gray-500 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-gray-500 p-0 w-8 h-8 flex items-center justify-center rounded transition-colors hover:bg-gray-100 hover:text-gray-900\"\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\" *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\">\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-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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { config: [{
                 type: Input
             }], modalRef: [{