@nanahoshi/mona-ui 0.1.0 → 0.2.0

package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-C3eZIaJK.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BRZUd8cE.mjs}

@@ -5,9 +5,9 @@ import { isPlatformBrowser, DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@an
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { form } from '@angular/forms/signals';
 import { ImmutableList, ImmutableDictionary, ImmutableSet, KeyValuePair, Dictionary, select, sequenceEqual, orderBy, any } from '@mirei/ts-collections';
+import { Query } from '@nanahoshi/mona-ui/query';
 import { Subject, BehaviorSubject, filter, startWith, pairwise, map, skip, fromEvent, take, debounceTime } from 'rxjs';
 import { v4 } from 'uuid';
-import { Query } from '@nanahoshi/mona-ui/query';
 import { ContextMenuItemComponent } from '@nanahoshi/mona-ui/contextmenu';
 import { CdkDropList, CdkDrag, CdkDragPreview, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
@@ -17,7 +17,6 @@ import { PagerComponent } from '@nanahoshi/mona-ui/pager';
 import { PlaceholderComponent } from '@nanahoshi/mona-ui/placeholder';
 import { PopupService, PopupComponent } from '@nanahoshi/mona-ui/popup';
 import { PopupMenuComponent, PopupMenuCheckboxItemComponent, PopupMenuItemComponent, PopupMenuTextTemplateDirective } from '@nanahoshi/mona-ui/popup-menu';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { cva } from 'class-variance-authority';
@@ -2839,16 +2838,20 @@ class GridLockedCellDirective {
         this.#gridService = inject(GridService);
         this.bodyLocked = computed(() => this.state() != null && !this.lockedCellHeader(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bodyLocked" }] : /* istanbul ignore next */ []));
-        this.clipPath = computed(() => {
-            const state = this.state();
-            const edgeOffset = state?.edge ? "1px" : "0px";
-            return state?.side === "right"
-                ? `inset(0px 0px ${edgeOffset} -8px)`
-                : state?.side === "left"
-                    ? `inset(0px -8px ${edgeOffset} 0px)`
-                    : null;
+        this.borderLeft = computed(() => {
+            if (!this.rightEdge()) {
+                return null;
+            }
+            return `1px solid var(--color-border)`;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "clipPath" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "borderLeft" }] : /* istanbul ignore next */ []));
+        this.borderRight = computed(() => {
+            if (!this.leftEdge()) {
+                return null;
+            }
+            return `1px solid var(--color-border)`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "borderRight" }] : /* istanbul ignore next */ []));
         this.footerCell = this.#hostElementRef.nativeElement.hasAttribute("monaGridFooterTableCell");
         this.headerLocked = computed(() => this.state() != null && this.lockedCellHeader(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerLocked" }] : /* istanbul ignore next */ []));
@@ -2907,7 +2910,7 @@ class GridLockedCellDirective {
     #hostElementRef;
     #gridService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLockedCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridLockedCellDirective, isStandalone: true, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, lockedCellHeader: { classPropertyName: "lockedCellHeader", publicName: "lockedCellHeader", isSignal: true, isRequired: false, transformFunction: null }, lockedStructuralOffset: { classPropertyName: "lockedStructuralOffset", publicName: "lockedStructuralOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.position": "position()", "style.left.px": "leftOffset()", "style.right.px": "rightOffset()", "style.z-index": "zIndex()", "class.bg-header-background": "headerLocked() || footerCell", "class.bg-inherit": "bodyLocked()", "style.box-shadow": "rightEdge() ? '-2px 0 4px 0 rgba(0, 0, 0, 0.15)' : leftEdge() ? '2px 0 4px 0 rgba(0, 0, 0, 0.15)' : null", "style.clip-path": "clipPath()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridLockedCellDirective, isStandalone: true, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, lockedCellHeader: { classPropertyName: "lockedCellHeader", publicName: "lockedCellHeader", isSignal: true, isRequired: false, transformFunction: null }, lockedStructuralOffset: { classPropertyName: "lockedStructuralOffset", publicName: "lockedStructuralOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.position": "position()", "style.left.px": "leftOffset()", "style.right.px": "rightOffset()", "style.z-index": "zIndex()", "class.bg-header-background": "headerLocked() || footerCell", "class.bg-inherit": "bodyLocked()", "style.border-left": "borderLeft()", "style.border-right": "borderRight()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridLockedCellDirective, decorators: [{
             type: Directive,
@@ -2920,8 +2923,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[style.z-index]": "zIndex()",
                         "[class.bg-header-background]": "headerLocked() || footerCell",
                         "[class.bg-inherit]": "bodyLocked()",
-                        "[style.box-shadow]": "rightEdge() ? '-2px 0 4px 0 rgba(0, 0, 0, 0.15)' : leftEdge() ? '2px 0 4px 0 rgba(0, 0, 0, 0.15)' : null",
-                        "[style.clip-path]": "clipPath()"
+                        "[style.border-left]": "borderLeft()",
+                        "[style.border-right]": "borderRight()"
                     }
                 }]
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], lockedCellHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedCellHeader", required: false }] }], lockedStructuralOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockedStructuralOffset", required: false }] }] } });
@@ -3241,11 +3244,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }] });
 
 const gridRowHeightClass = "h-9";
-const gridBaseVariants = cva(`
-        relative flex flex-col
-        h-full overflow-hidden
-        bg-background border border-border
-        text-foreground text-sm
+const gridBaseThemeVariants = cva(`
+        relative flex flex-col
+        h-full overflow-hidden
+        text-foreground text-sm
+        bg-surface border border-border
     `, {
     variants: {
         rounded: {
@@ -3256,15 +3259,15 @@ const gridBaseVariants = cva(`
         }
     }
 });
-const gridCellBaseVariants = cva(`
-        absolute inset-0
-        flex w-full
-        border-b border-b-border
+const gridCellBaseThemeVariants = cva(`
+        absolute inset-0
+        flex w-full
+        shadow-[inset_0_-1px_0_0_var(--color-border-subtle)]
     `);
-const gridCellContainerVariants = cva(`
-        flex h-full w-full items-center
-        flex-1 outline-none
-        overflow-hidden
+const gridCellContainerThemeVariants = cva(`
+        flex h-full w-full items-center
+        flex-1 outline-none
+        overflow-hidden
     `, {
     variants: {
         editing: {
@@ -3276,40 +3279,41 @@ const gridCellContainerVariants = cva(`
         editing: false
     }
 });
-const gridCellDirtyIndicatorVariants = cva(`
-    absolute top-0 right-0 w-0 h-0
-    border-t-[8px] border-l-[8px]
-    border-t-destructive border-l-transparent
-    pointer-events-none
+const gridCellDirtyIndicatorThemeVariants = cva(`
+    absolute top-0 right-0 w-0 h-0
+    border-t-[8px] border-l-[8px]
+    border-t-destructive border-l-transparent
+    pointer-events-none
 `);
-const gridCellEditorBaseVariants = cva(`
-    w-full h-full border border-solid border-primary/40 flex items-center
+const gridCellEditorBaseThemeVariants = cva(`
+    flex h-full w-full items-center
+    bg-input-background border border-focus-indicator/40
 `);
-const gridCellEditorInputVariants = cva(`
-    w-full h-full border-transparent
-    data-[expanded='true']:border-primary
-    data-[expanded='true']:focus-within:border-primary/40
+const gridCellEditorInputThemeVariants = cva(`
+    h-full w-full border-transparent
+    data-[expanded='true']:border-focus-indicator
+    data-[expanded='true']:focus-within:border-focus-indicator/40
 `);
-const gridCellTextVariants = cva(`
-    truncate cursor-default select-none
+const gridCellTextThemeVariants = cva(`
+    truncate cursor-default select-none
 `);
-const gridColumnActionsVariants = cva(`
-    flex items-center justify-center
-    text-xs [&_i]:text-xs
+const gridColumnActionsThemeVariants = cva(`
+    flex items-center justify-center
+    text-xs [&_i]:text-xs
 `);
-const gridColumnDragPreviewVariants = cva(`
-        flex items-center justify-center
-        bg-background! text-foreground!
-        border! border-border! rounded-md
-        shadow-sm! px-2! py-0.5!
+const gridColumnDragPreviewThemeVariants = cva(`
+        flex items-center justify-center
+        px-2! py-0.5!
+        bg-surface-raised! text-foreground!
+        border! border-border! rounded-md shadow-(--shadow-overlay)!
     `);
-const gridColumnDropHintVariants = cva(`
-    absolute flex w-1 h-full bg-primary z-10! top-0 bottom-0
+const gridColumnDropHintThemeVariants = cva(`
+    absolute flex w-1 h-full bg-primary z-10! top-0 bottom-0
 `);
-const gridColumnResizerVariants = cva(`
-    absolute top-0 bottom-0 w-3 bg-transparent cursor-col-resize z-10 -right-1.5
+const gridColumnResizerThemeVariants = cva(`
+    absolute top-0 bottom-0 w-3 bg-transparent cursor-col-resize z-10 -right-1.5
 `);
-const gridDetailContentCellVariants = cva(`border-b border-b-border`, {
+const gridDetailContentCellThemeVariants = cva(`border-b border-b-border-subtle`, {
     variants: {
         nextIsGroup: {
             true: "",
@@ -3317,8 +3321,8 @@ const gridDetailContentCellVariants = cva(`border-b border-b-border`, {
         }
     }
 });
-const gridDetailIndentCellVariants = cva(`
-        border-r border-r-border border-b border-b-border
+const gridDetailIndentCellThemeVariants = cva(`
+        border-r border-r-border-subtle border-b border-b-border-subtle
     `, {
     variants: {
         nextIsGroup: {
@@ -3327,67 +3331,69 @@ const gridDetailIndentCellVariants = cva(`
         }
     }
 });
-const gridDetailRowVariants = cva(`
-    border-b border-b-border
+const gridDetailRowThemeVariants = cva(`
+    border-b border-b-border-subtle
 `);
-const gridFilterRowCellVariants = cva(`flex items-center px-1 py-0.5 w-full`);
-const gridFooterVariants = cva(`
-        flex flex-row grow-0 shrink-0 basis-auto
-        overflow-hidden
-        bg-header-background border-r border-r-border border-t border-t-border
+const gridFilterRowCellThemeVariants = cva(`flex items-center px-1 py-0.5 w-full`);
+const gridFooterThemeVariants = cva(`
+        flex flex-row grow-0 shrink-0 basis-auto
+        overflow-hidden
+        bg-surface-muted border-r border-r-border-subtle border-t border-t-border-subtle
     `);
-const gridFooterTableVariants = cva(`
-        border-separate border-spacing-0 table-fixed
+const gridFooterTableThemeVariants = cva(`
+        border-separate border-spacing-0 table-fixed
     `);
-const gridFooterTableRowVariants = cva(`relative inline-flex [&>td:last-child]:border-r-0`);
-const gridFooterTableCellVariants = cva(`
-        relative overflow-hidden
-        text-left align-middle px-2 py-2
-        border-r border-r-border border-b border-b-border
-        bg-header-background font-medium
+const gridFooterTableRowThemeVariants = cva(`relative inline-flex [&>td:last-child]:border-r-0`);
+const gridFooterTableCellThemeVariants = cva(`
+        relative overflow-hidden
+        text-left align-middle px-2 py-2
+        bg-surface-muted
+        border-r border-r-border-subtle border-b border-b-border-subtle
+        font-medium
     `);
-const gridGroupPanelPlaceholderVariants = cva(`
-    truncate opacity-70
+const gridGroupPanelPlaceholderThemeVariants = cva(`
+    truncate text-muted-foreground
 `);
-const gridGroupPanelVariants = cva(`
-        flex items-center flex-wrap
-        p-1 h-auto gap-1
-        border-b border-b-border
+const gridGroupPanelThemeVariants = cva(`
+        flex items-center flex-wrap
+        p-1 h-auto gap-1
+        bg-surface-muted border-b border-b-border-subtle
     `);
-const gridGroupRowVariants = cva(`
-        w-full bg-header-background
-        border-r border-r-border
-        relative z-10
+const gridGroupRowThemeVariants = cva(`
+        relative z-10
+        w-full
+        bg-surface-muted border-r border-r-border-subtle
     `);
-const gridHeaderVariants = cva(`
-        flex flex-row grow-0 shrink-0 basis-auto
-        overflow-hidden
-        bg-header-background border-r border-r-border
+const gridHeaderThemeVariants = cva(`
+        flex flex-row grow-0 shrink-0 basis-auto
+        overflow-hidden
+        bg-surface-muted border-r border-r-border-subtle
     `);
-const gridHeaderTableVariants = cva(`
-        border-separate border-spacing-0 table-fixed
+const gridHeaderTableThemeVariants = cva(`
+        border-separate border-spacing-0 table-fixed
     `);
-const gridHeaderTableRowVariants = cva(`relative inline-flex not-first:border-t not-first:border-t-border [&>th:last-child]:border-r-0`);
-const gridHeaderTableCellVariants = cva(`
-        relative select-none
-        text-left overflow-visible
-        outline-none border-r border-r-border
-        after:absolute after:inset-0 after:pointer-events-none
-        focus:after:ring-1 focus:after:ring-inset focus:after:ring-primary/40
+const gridHeaderTableRowThemeVariants = cva(`relative inline-flex not-first:border-t not-first:border-t-border-subtle [&>th:last-child]:border-r-0`);
+const gridHeaderTableCellThemeVariants = cva(`
+        relative select-none
+        text-left overflow-visible
+        outline-none border-r border-r-border-subtle
+        after:absolute after:inset-0 after:pointer-events-none
+        focus:after:ring-1 focus:after:ring-inset focus:after:ring-focus-indicator/35
     `);
-const gridHeaderTableColumnWrapVariants = cva(`
-        w-full h-full px-1
-        flex items-center justify-between
-        cursor-pointer overflow-hidden
+const gridHeaderTableColumnWrapThemeVariants = cva(`
+        w-full h-full px-1
+        flex items-center justify-between
+        cursor-pointer overflow-hidden
     `);
-const gridHeaderTableColumnTitleVariants = cva(`
-        flex-1 px-1 py-2 truncate
-        font-medium
+const gridHeaderTableColumnTitleThemeVariants = cva(`
+        flex-1 px-1 py-2 truncate
+        font-medium
     `);
-const gridListBaseVariants = cva(`
-        w-full h-full
-        border-t border-t-border
-        outline-none
+const gridListBaseThemeVariants = cva(`
+        w-full h-full
+        outline-none
+        border-t border-t-border-subtle
+        [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
     `, {
     variants: {
         virtual: {
@@ -3396,28 +3402,28 @@ const gridListBaseVariants = cva(`
         }
     }
 });
-const gridListTableVariants = cva(`
-        border-separate border-spacing-0 w-full table-fixed
+const gridListTableThemeVariants = cva(`
+        border-separate border-spacing-0 w-full table-fixed
     `);
-const gridListTableRowVariants = cva(``, {
+const gridListTableRowThemeVariants = cva(``, {
     variants: {
         selected: {
-            true: `
-                    ${gridRowHeightClass}
-                    bg-primary text-primary-foreground
+            true: `
+                    ${gridRowHeightClass}
+                    bg-(--color-selected) text-(--color-selected-foreground) hover:bg-(--color-selected-active)
                 `,
-            false: `${gridRowHeightClass} odd:bg-background even:bg-background-dark `
+            false: `${gridRowHeightClass} bg-surface hover:bg-hover`
         }
     }
 });
-const gridListTableCellVariants = cva(`
-        relative
-        ${gridRowHeightClass}
-        outline-none z-1
-        align-top
-        after:content-[''] after:block
-        after:absolute after:inset-0 after:pointer-events-none
-        focus:after:ring-1 focus:after:ring-inset focus:after:ring-primary/40
+const gridListTableCellThemeVariants = cva(`
+        relative
+        ${gridRowHeightClass}
+        outline-none z-1
+        align-top
+        after:content-[''] after:block
+        after:absolute after:inset-0 after:pointer-events-none
+        focus:after:ring-1 focus:after:ring-inset focus:after:ring-focus-indicator/35
     `, {
     variants: {
         groupHeader: {
@@ -3438,7 +3444,7 @@ const gridListTableCellVariants = cva(`
         },
         lastInRow: {
             true: "",
-            false: "border-r border-r-border"
+            false: "border-r border-r-border-subtle"
         },
         masterDetailContent: {
             true: "",
@@ -3491,12 +3497,12 @@ const gridListTableCellVariants = cva(`
         {
             grouped: true,
             indentCell: true,
-            class: "bg-header-background border-b border-b-border"
+            class: "bg-surface-muted shadow-[inset_0_-1px_0_0_var(--color-border-subtle)]"
         },
         {
             grouped: true,
             indentCell: false,
-            class: "border-b border-b-border"
+            class: "shadow-[inset_0_-1px_0_0_var(--color-border-subtle)]"
         },
         {
             grouped: true,
@@ -3511,276 +3517,11 @@ const gridListTableCellVariants = cva(`
         }
     ]
 });
-const gridNoDataVariants = cva(`
-        flex items-center justify-center h-full
-        border-t border-t-border
+const gridNoDataThemeVariants = cva(`
+        flex items-center justify-center h-full
+        text-muted-foreground border-t border-t-border-subtle
     `);
 
-const gridBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridBaseVariants;
-        default:
-            return gridBaseVariants;
-    }
-};
-const gridCellBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridCellBaseVariants;
-        default:
-            return gridCellBaseVariants;
-    }
-};
-const gridCellContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridCellContainerVariants;
-        default:
-            return gridCellContainerVariants;
-    }
-};
-const gridCellDirtyIndicatorThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridCellDirtyIndicatorVariants;
-        default:
-            return gridCellDirtyIndicatorVariants;
-    }
-};
-const gridCellEditorBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridCellEditorBaseVariants;
-        default:
-            return gridCellEditorBaseVariants;
-    }
-};
-const gridCellEditorInputThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridCellEditorInputVariants;
-        default:
-            return gridCellEditorInputVariants;
-    }
-};
-const gridCellTextThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridCellTextVariants;
-        default:
-            return gridCellTextVariants;
-    }
-};
-const gridColumnActionsThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridColumnActionsVariants;
-        default:
-            return gridColumnActionsVariants;
-    }
-};
-const gridColumnDragPreviewThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridColumnDragPreviewVariants;
-        default:
-            return gridColumnDragPreviewVariants;
-    }
-};
-const gridColumnResizerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridColumnResizerVariants;
-        default:
-            return gridColumnResizerVariants;
-    }
-};
-const gridColumnDropHintThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridColumnDropHintVariants;
-        default:
-            return gridColumnDropHintVariants;
-    }
-};
-const gridFilterRowCellThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridFilterRowCellVariants;
-        default:
-            return gridFilterRowCellVariants;
-    }
-};
-const gridFooterThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridFooterVariants;
-        default:
-            return gridFooterVariants;
-    }
-};
-const gridFooterTableThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridFooterTableVariants;
-        default:
-            return gridFooterTableVariants;
-    }
-};
-const gridFooterTableRowThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridFooterTableRowVariants;
-        default:
-            return gridFooterTableRowVariants;
-    }
-};
-const gridFooterTableCellThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridFooterTableCellVariants;
-        default:
-            return gridFooterTableCellVariants;
-    }
-};
-const gridGroupPanelPlaceholderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridGroupPanelPlaceholderVariants;
-        default:
-            return gridGroupPanelPlaceholderVariants;
-    }
-};
-const gridGroupPanelThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridGroupPanelVariants;
-        default:
-            return gridGroupPanelVariants;
-    }
-};
-const gridGroupRowThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridGroupRowVariants;
-        default:
-            return gridGroupRowVariants;
-    }
-};
-const gridHeaderTableCellThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridHeaderTableCellVariants;
-        default:
-            return gridHeaderTableCellVariants;
-    }
-};
-const gridHeaderTableColumnTitleThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridHeaderTableColumnTitleVariants;
-        default:
-            return gridHeaderTableColumnTitleVariants;
-    }
-};
-const gridHeaderTableColumnWrapThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridHeaderTableColumnWrapVariants;
-        default:
-            return gridHeaderTableColumnWrapVariants;
-    }
-};
-const gridHeaderTableRowThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridHeaderTableRowVariants;
-        default:
-            return gridHeaderTableRowVariants;
-    }
-};
-const gridHeaderTableThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridHeaderTableVariants;
-        default:
-            return gridHeaderTableVariants;
-    }
-};
-const gridHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridHeaderVariants;
-        default:
-            return gridHeaderVariants;
-    }
-};
-const gridListTableCellThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridListTableCellVariants;
-        default:
-            return gridListTableCellVariants;
-    }
-};
-const gridListTableRowThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridListTableRowVariants;
-        default:
-            return gridListTableRowVariants;
-    }
-};
-const gridListTableThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridListTableVariants;
-        default:
-            return gridListTableVariants;
-    }
-};
-const gridListBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridListBaseVariants;
-        default:
-            return gridListBaseVariants;
-    }
-};
-const gridNoDataThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridNoDataVariants;
-        default:
-            return gridNoDataVariants;
-    }
-};
-const gridDetailRowThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridDetailRowVariants;
-        default:
-            return gridDetailRowVariants;
-    }
-};
-const gridDetailIndentCellThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridDetailIndentCellVariants;
-        default:
-            return gridDetailIndentCellVariants;
-    }
-};
-const gridDetailContentCellThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return gridDetailContentCellVariants;
-        default:
-            return gridDetailContentCellVariants;
-    }
-};
-
 const FOCUSABLE_TARGET_SELECTOR$1 = "button, input, select, textarea, a[href], [tabindex]";
 class GridLogicalCellDirective {
     #cellData;
@@ -3790,7 +3531,6 @@ class GridLogicalCellDirective {
     #gridNavigationService;
     #gridService;
     #hostElementRef;
-    #themeService;
     constructor() {
         this.#cellData = computed(() => {
             const data = {
@@ -3816,15 +3556,13 @@ class GridLogicalCellDirective {
         this.#gridNavigationService = inject(GridNavigationService);
         this.#gridService = inject(GridService);
         this.#hostElementRef = inject((ElementRef));
-        this.#themeService = inject(ThemeService);
         this.ariaColIndex = computed(() => this.colIndex() + this.#gridService.groupColumns().length + 1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaColIndex" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
             if (this.#hostElementRef.nativeElement.tagName === "TH") {
                 return "";
             }
-            const theme = this.#themeService.theme();
-            return gridListTableCellThemeVariants(theme)({
+            return gridListTableCellThemeVariants({
                 groupHeader: this.groupHeader(),
                 lastInRow: this.lastInRow() || this.groupHeader()
             });
@@ -4325,7 +4063,7 @@ class GridColumnChooserComponent {
         this.filterText.set("");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridColumnChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: GridColumnChooserComponent, isStandalone: true, selector: "mona-grid-column-chooser", outputs: { apply: "apply", cancel: "cancel" }, ngImport: i0, template: "<mona-list-view\r\n    [items]=\"columnListSource()\"\r\n    [textField]=\"'title'\"\r\n    [height]=\"'auto'\"\r\n    [maxHeight]=\"300\"\r\n    [monaListViewSelectable]=\"{ enabled: true, mode: 'multiple', checkboxes: true }\"\r\n    [selectBy]=\"'field'\"\r\n    [selectedKeys]=\"selectedColumnFields()\"\r\n    (selectedKeysChange)=\"onSelectedKeysChange($event)\"\r\n    [rounded]=\"'none'\"\r\n    [size]=\"'small'\"\r\n    class=\"shadow-lg\">\r\n    <ng-template monaListViewHeaderTemplate>\r\n        <div class=\"flex p-1 bg-header-background border-b border-b-border\">\r\n            <mona-filter-input\r\n                [filter]=\"filterText()\"\r\n                (filterChange)=\"filterText.set($event.filter)\"></mona-filter-input>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template monaListViewFooterTemplate>\r\n        <div class=\"flex px-3 py-1 font-medium bg-header-background border-t border-t-border\">\r\n            {{ selectedColumnFields().length }} selected columns\r\n        </div>\r\n        <div class=\"flex gap-2 px-2 py-2 bg-header-background border-t border-t-border\">\r\n            <button class=\"flex-1\" monaButton [size]=\"'small'\" look=\"primary\" (click)=\"onApplyClick()\">Apply</button>\r\n            <button class=\"flex-1\" monaButton [size]=\"'small'\" (click)=\"onCancelClick()\">Cancel</button>\r\n        </div>\r\n    </ng-template>\r\n</mona-list-view>\r\n", dependencies: [{ kind: "component", type: ListViewComponent, selector: "mona-list-view", inputs: ["aria-label", "height", "listClass", "listItemClass", "listItemStyle", "listStyle", "items", "maxHeight", "maxWidth", "rounded", "size", "textField", "class", "width"], outputs: ["scrollBottom"] }, { kind: "directive", type: ListViewHeaderTemplateDirective, selector: "ng-template[monaListViewHeaderTemplate]" }, { kind: "component", type: FilterInputComponent, selector: "mona-filter-input", inputs: ["debounce", "filter", "placeholder", "size"], outputs: ["filterChange", "inputBlur", "inputFocus"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: ListViewSelectableDirective, selector: "mona-list-view[monaListViewSelectable]", inputs: ["monaListViewSelectable", "selectBy", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "directive", type: ListViewFooterTemplateDirective, selector: "ng-template[monaListViewFooterTemplate]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: GridColumnChooserComponent, isStandalone: true, selector: "mona-grid-column-chooser", outputs: { apply: "apply", cancel: "cancel" }, ngImport: i0, template: "<mona-list-view\n    [items]=\"columnListSource()\"\n    [textField]=\"'title'\"\n    [height]=\"'auto'\"\n    [maxHeight]=\"300\"\n    [monaListViewSelectable]=\"{ enabled: true, mode: 'multiple', checkboxes: true }\"\n    [selectBy]=\"'field'\"\n    [selectedKeys]=\"selectedColumnFields()\"\n    (selectedKeysChange)=\"onSelectedKeysChange($event)\"\n    [rounded]=\"'none'\"\n    [size]=\"'small'\"\n    class=\"shadow-lg\">\n    <ng-template monaListViewHeaderTemplate>\n        <div class=\"flex p-1 bg-header-background border-b border-b-border\">\n            <mona-filter-input\n                [filter]=\"filterText()\"\n                (filterChange)=\"filterText.set($event.filter)\"></mona-filter-input>\n        </div>\n    </ng-template>\n    <ng-template monaListViewFooterTemplate>\n        <div class=\"flex px-3 py-1 font-medium bg-header-background border-t border-t-border\">\n            {{ selectedColumnFields().length }} selected columns\n        </div>\n        <div class=\"flex gap-2 px-2 py-2 bg-header-background border-t border-t-border\">\n            <button class=\"flex-1\" monaButton [size]=\"'small'\" look=\"primary\" (click)=\"onApplyClick()\">Apply</button>\n            <button class=\"flex-1\" monaButton [size]=\"'small'\" (click)=\"onCancelClick()\">Cancel</button>\n        </div>\n    </ng-template>\n</mona-list-view>\n", dependencies: [{ kind: "component", type: ListViewComponent, selector: "mona-list-view", inputs: ["aria-label", "height", "listClass", "listItemClass", "listItemStyle", "listStyle", "items", "maxHeight", "maxWidth", "rounded", "size", "textField", "class", "width"], outputs: ["scrollBottom"] }, { kind: "directive", type: ListViewHeaderTemplateDirective, selector: "ng-template[monaListViewHeaderTemplate]" }, { kind: "component", type: FilterInputComponent, selector: "mona-filter-input", inputs: ["debounce", "filter", "placeholder", "size"], outputs: ["filterChange", "inputBlur", "inputFocus"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: ListViewSelectableDirective, selector: "mona-list-view[monaListViewSelectable]", inputs: ["monaListViewSelectable", "selectBy", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "directive", type: ListViewFooterTemplateDirective, selector: "ng-template[monaListViewFooterTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridColumnChooserComponent, decorators: [{
             type: Component,
@@ -4336,7 +4074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         ButtonDirective,
                         ListViewSelectableDirective,
                         ListViewFooterTemplateDirective
-                    ], template: "<mona-list-view\r\n    [items]=\"columnListSource()\"\r\n    [textField]=\"'title'\"\r\n    [height]=\"'auto'\"\r\n    [maxHeight]=\"300\"\r\n    [monaListViewSelectable]=\"{ enabled: true, mode: 'multiple', checkboxes: true }\"\r\n    [selectBy]=\"'field'\"\r\n    [selectedKeys]=\"selectedColumnFields()\"\r\n    (selectedKeysChange)=\"onSelectedKeysChange($event)\"\r\n    [rounded]=\"'none'\"\r\n    [size]=\"'small'\"\r\n    class=\"shadow-lg\">\r\n    <ng-template monaListViewHeaderTemplate>\r\n        <div class=\"flex p-1 bg-header-background border-b border-b-border\">\r\n            <mona-filter-input\r\n                [filter]=\"filterText()\"\r\n                (filterChange)=\"filterText.set($event.filter)\"></mona-filter-input>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template monaListViewFooterTemplate>\r\n        <div class=\"flex px-3 py-1 font-medium bg-header-background border-t border-t-border\">\r\n            {{ selectedColumnFields().length }} selected columns\r\n        </div>\r\n        <div class=\"flex gap-2 px-2 py-2 bg-header-background border-t border-t-border\">\r\n            <button class=\"flex-1\" monaButton [size]=\"'small'\" look=\"primary\" (click)=\"onApplyClick()\">Apply</button>\r\n            <button class=\"flex-1\" monaButton [size]=\"'small'\" (click)=\"onCancelClick()\">Cancel</button>\r\n        </div>\r\n    </ng-template>\r\n</mona-list-view>\r\n" }]
+                    ], template: "<mona-list-view\n    [items]=\"columnListSource()\"\n    [textField]=\"'title'\"\n    [height]=\"'auto'\"\n    [maxHeight]=\"300\"\n    [monaListViewSelectable]=\"{ enabled: true, mode: 'multiple', checkboxes: true }\"\n    [selectBy]=\"'field'\"\n    [selectedKeys]=\"selectedColumnFields()\"\n    (selectedKeysChange)=\"onSelectedKeysChange($event)\"\n    [rounded]=\"'none'\"\n    [size]=\"'small'\"\n    class=\"shadow-lg\">\n    <ng-template monaListViewHeaderTemplate>\n        <div class=\"flex p-1 bg-header-background border-b border-b-border\">\n            <mona-filter-input\n                [filter]=\"filterText()\"\n                (filterChange)=\"filterText.set($event.filter)\"></mona-filter-input>\n        </div>\n    </ng-template>\n    <ng-template monaListViewFooterTemplate>\n        <div class=\"flex px-3 py-1 font-medium bg-header-background border-t border-t-border\">\n            {{ selectedColumnFields().length }} selected columns\n        </div>\n        <div class=\"flex gap-2 px-2 py-2 bg-header-background border-t border-t-border\">\n            <button class=\"flex-1\" monaButton [size]=\"'small'\" look=\"primary\" (click)=\"onApplyClick()\">Apply</button>\n            <button class=\"flex-1\" monaButton [size]=\"'small'\" (click)=\"onCancelClick()\">Cancel</button>\n        </div>\n    </ng-template>\n</mona-list-view>\n" }]
         }], ctorParameters: () => [], propDecorators: { apply: [{ type: i0.Output, args: ["apply"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
 
 class GridFilterMenuComponent {
@@ -4423,11 +4161,11 @@ class GridFilterMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFilterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: GridFilterMenuComponent, isStandalone: true, selector: "mona-grid-filter-menu", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, ngImport: i0, template: "<button\r\n    monaButton\r\n    look=\"ghost\"\r\n    [rounded]=\"'none'\"\r\n    [iconOnly]=\"true\"\r\n    (click)=\"openPopup()\"\r\n    class=\"overflow-hidden w-5 h-5\"\r\n    size=\"small\"\r\n    [tabindex]=\"-1\"\r\n    [class.text-info]=\"column().filtered\">\r\n    <svg lucideFunnel [size]=\"12\"></svg>\r\n</button>\r\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: LucideFunnel, selector: "svg[lucideFunnel], svg[lucideFilter]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: GridFilterMenuComponent, isStandalone: true, selector: "mona-grid-filter-menu", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, ngImport: i0, template: "<button\n    monaButton\n    look=\"ghost\"\n    [rounded]=\"'none'\"\n    [iconOnly]=\"true\"\n    (click)=\"openPopup()\"\n    class=\"overflow-hidden w-5 h-5\"\n    size=\"small\"\n    [tabindex]=\"-1\"\n    [class.text-info]=\"column().filtered\">\n    <svg lucideFunnel [size]=\"12\"></svg>\n</button>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: LucideFunnel, selector: "svg[lucideFunnel], svg[lucideFilter]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFilterMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-grid-filter-menu", changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, LucideFunnel], template: "<button\r\n    monaButton\r\n    look=\"ghost\"\r\n    [rounded]=\"'none'\"\r\n    [iconOnly]=\"true\"\r\n    (click)=\"openPopup()\"\r\n    class=\"overflow-hidden w-5 h-5\"\r\n    size=\"small\"\r\n    [tabindex]=\"-1\"\r\n    [class.text-info]=\"column().filtered\">\r\n    <svg lucideFunnel [size]=\"12\"></svg>\r\n</button>\r\n" }]
+            args: [{ selector: "mona-grid-filter-menu", changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonDirective, LucideFunnel], template: "<button\n    monaButton\n    look=\"ghost\"\n    [rounded]=\"'none'\"\n    [iconOnly]=\"true\"\n    (click)=\"openPopup()\"\n    class=\"overflow-hidden w-5 h-5\"\n    size=\"small\"\n    [tabindex]=\"-1\"\n    [class.text-info]=\"column().filtered\">\n    <svg lucideFunnel [size]=\"12\"></svg>\n</button>\n" }]
         }], propDecorators: { apply: [{ type: i0.Output, args: ["apply"] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
 
 class GridFilterRowCellComponent {
@@ -4436,17 +4174,14 @@ class GridFilterRowCellComponent {
     #gridService;
     #numberInput$;
     #stringInput$;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#filterService = inject(FilterService);
         this.#gridService = inject(GridService);
         this.#numberInput$ = new Subject();
         this.#stringInput$ = new Subject();
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridFilterRowCellThemeVariants(theme)();
+            return gridFilterRowCellThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.isFilterActive = computed(() => {
@@ -4664,7 +4399,7 @@ class GridFilterRowCellComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFilterRowCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridFilterRowCellComponent, isStandalone: true, selector: "mona-grid-filter-row-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { apply: "apply" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@let dataType = column().dataType;\r\n\r\n@switch (dataType) {\r\n    @case (\"string\") {\r\n        <div class=\"flex gap-0.5 w-full\">\r\n            <mona-text-box\r\n                size=\"small\"\r\n                [ngModel]=\"stringValue()\"\r\n                (ngModelChange)=\"onStringChange($event)\"\r\n                placeholder=\"Filter...\" />\r\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\r\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\r\n            </button>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\r\n        </div>\r\n        <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\r\n            @for (item of stringFilterMenuItems; track item) {\r\n                <mona-popup-menu-checkbox-item\r\n                    size=\"small\"\r\n                    [label]=\"item.text\"\r\n                    (menuClick)=\"onOperatorChange(item.value)\"\r\n                    [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\r\n            }\r\n        </mona-popup-menu>\r\n    }\r\n    @case (\"number\") {\r\n        <div class=\"flex gap-0.5 w-full\">\r\n            <mona-numeric-text-box\r\n                size=\"small\"\r\n                [ngModel]=\"numberValue()\"\r\n                (ngModelChange)=\"onNumberChange($event)\"\r\n                [style.width.%]=\"100\" />\r\n\r\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\r\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\r\n            </button>\r\n            <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\r\n                @for (item of numericFilterMenuItems; track item) {\r\n                    <mona-popup-menu-checkbox-item\r\n                        size=\"small\"\r\n                        [label]=\"item.text\"\r\n                        (menuClick)=\"onOperatorChange(item.value)\"\r\n                        [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\r\n                }\r\n            </mona-popup-menu>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\r\n        </div>\r\n    }\r\n    @case (\"date\") {\r\n        <div class=\"flex gap-0.5 w-full\">\r\n            @if (dataType === \"date\") {\r\n                <mona-date-picker\r\n                    size=\"small\"\r\n                    [ngModel]=\"dateValue()\"\r\n                    (ngModelChange)=\"onDateChange($event)\"\r\n                    [style.width.%]=\"100\" />\r\n            }\r\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\r\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\r\n            </button>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\r\n        </div>\r\n        <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\r\n            @for (item of dateFilterMenuItems; track item) {\r\n                <mona-popup-menu-checkbox-item\r\n                    size=\"small\"\r\n                    [label]=\"item.text\"\r\n                    (menuClick)=\"onOperatorChange(item.value)\"\r\n                    [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\r\n            }\r\n        </mona-popup-menu>\r\n    }\r\n    @case (\"boolean\") {\r\n        <div class=\"flex gap-0.5 w-full\">\r\n            <mona-dropdown-list\r\n                size=\"small\"\r\n                [data]=\"booleanFilterMenuItems\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                placeholder=\"(All)\"\r\n                [ngModel]=\"booleanValue()\"\r\n                (ngModelChange)=\"onBooleanChange($event)\"\r\n                [style.width.%]=\"100\" />\r\n            <ng-container\r\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\r\n        </div>\r\n    }\r\n}\r\n\r\n<ng-template #clearFilterButtonTemplate let-hasValue>\r\n    @if (selectedOperator() != null && hasValue) {\r\n        <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" (click)=\"onClear()\">\r\n            <svg lucideFunnelX [size]=\"14\" class=\"text-error\"></svg>\r\n        </button>\r\n    }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "mona-date-picker", inputs: ["disabled", "disabledDates", "firstDay", "format", "invalid", "max", "min", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "readonlyInput", "required", "rounded", "showClearButton", "size", "touched", "class", "value", "weekNumber"], outputs: ["close", "closed", "open", "opened", "touch", "valueChange"] }, { kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "itemDisabled", "invalid", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "valueField", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "component", type: PopupMenuCheckboxItemComponent, selector: "mona-popup-menu-checkbox-item", inputs: ["checked", "disabled", "label"], outputs: ["checkedChange", "menuClick"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideFunnelX, selector: "svg[lucideFunnelX], svg[lucideFilterX]" }, { kind: "component", type: LucideFunnel, selector: "svg[lucideFunnel], svg[lucideFilter]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridFilterRowCellComponent, isStandalone: true, selector: "mona-grid-filter-row-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { apply: "apply" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@let dataType = column().dataType;\n\n@switch (dataType) {\n    @case (\"string\") {\n        <div class=\"flex gap-0.5 w-full\">\n            <mona-text-box\n                size=\"small\"\n                [ngModel]=\"stringValue()\"\n                (ngModelChange)=\"onStringChange($event)\"\n                placeholder=\"Filter...\" />\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\n            </button>\n            <ng-container\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\n        </div>\n        <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\n            @for (item of stringFilterMenuItems; track item) {\n                <mona-popup-menu-checkbox-item\n                    size=\"small\"\n                    [label]=\"item.text\"\n                    (menuClick)=\"onOperatorChange(item.value)\"\n                    [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\n            }\n        </mona-popup-menu>\n    }\n    @case (\"number\") {\n        <div class=\"flex gap-0.5 w-full\">\n            <mona-numeric-text-box\n                size=\"small\"\n                [ngModel]=\"numberValue()\"\n                (ngModelChange)=\"onNumberChange($event)\"\n                [style.width.%]=\"100\" />\n\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\n            </button>\n            <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\n                @for (item of numericFilterMenuItems; track item) {\n                    <mona-popup-menu-checkbox-item\n                        size=\"small\"\n                        [label]=\"item.text\"\n                        (menuClick)=\"onOperatorChange(item.value)\"\n                        [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\n                }\n            </mona-popup-menu>\n            <ng-container\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\n        </div>\n    }\n    @case (\"date\") {\n        <div class=\"flex gap-0.5 w-full\">\n            @if (dataType === \"date\") {\n                <mona-date-picker\n                    size=\"small\"\n                    [ngModel]=\"dateValue()\"\n                    (ngModelChange)=\"onDateChange($event)\"\n                    [style.width.%]=\"100\" />\n            }\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\n            </button>\n            <ng-container\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\n        </div>\n        <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\n            @for (item of dateFilterMenuItems; track item) {\n                <mona-popup-menu-checkbox-item\n                    size=\"small\"\n                    [label]=\"item.text\"\n                    (menuClick)=\"onOperatorChange(item.value)\"\n                    [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\n            }\n        </mona-popup-menu>\n    }\n    @case (\"boolean\") {\n        <div class=\"flex gap-0.5 w-full\">\n            <mona-dropdown-list\n                size=\"small\"\n                [data]=\"booleanFilterMenuItems\"\n                textField=\"text\"\n                valueField=\"value\"\n                placeholder=\"(All)\"\n                [ngModel]=\"booleanValue()\"\n                (ngModelChange)=\"onBooleanChange($event)\"\n                [style.width.%]=\"100\" />\n            <ng-container\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\n        </div>\n    }\n}\n\n<ng-template #clearFilterButtonTemplate let-hasValue>\n    @if (selectedOperator() != null && hasValue) {\n        <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" (click)=\"onClear()\">\n            <svg lucideFunnelX [size]=\"14\" class=\"text-error\"></svg>\n        </button>\n    }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "mona-date-picker", inputs: ["disabled", "disabledDates", "firstDay", "format", "invalid", "max", "min", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "readonlyInput", "required", "rounded", "showClearButton", "size", "touched", "class", "value", "weekNumber"], outputs: ["close", "closed", "open", "opened", "touch", "valueChange"] }, { kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "itemDisabled", "invalid", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "valueField", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "component", type: PopupMenuCheckboxItemComponent, selector: "mona-popup-menu-checkbox-item", inputs: ["checked", "disabled", "label"], outputs: ["checkedChange", "menuClick"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideFunnelX, selector: "svg[lucideFunnelX], svg[lucideFilterX]" }, { kind: "component", type: LucideFunnel, selector: "svg[lucideFunnel], svg[lucideFilter]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFilterRowCellComponent, decorators: [{
             type: Component,
@@ -4682,7 +4417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         LucideFunnel
                     ], host: {
                         "[class]": "baseClass()"
-                    }, template: "@let dataType = column().dataType;\r\n\r\n@switch (dataType) {\r\n    @case (\"string\") {\r\n        <div class=\"flex gap-0.5 w-full\">\r\n            <mona-text-box\r\n                size=\"small\"\r\n                [ngModel]=\"stringValue()\"\r\n                (ngModelChange)=\"onStringChange($event)\"\r\n                placeholder=\"Filter...\" />\r\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\r\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\r\n            </button>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\r\n        </div>\r\n        <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\r\n            @for (item of stringFilterMenuItems; track item) {\r\n                <mona-popup-menu-checkbox-item\r\n                    size=\"small\"\r\n                    [label]=\"item.text\"\r\n                    (menuClick)=\"onOperatorChange(item.value)\"\r\n                    [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\r\n            }\r\n        </mona-popup-menu>\r\n    }\r\n    @case (\"number\") {\r\n        <div class=\"flex gap-0.5 w-full\">\r\n            <mona-numeric-text-box\r\n                size=\"small\"\r\n                [ngModel]=\"numberValue()\"\r\n                (ngModelChange)=\"onNumberChange($event)\"\r\n                [style.width.%]=\"100\" />\r\n\r\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\r\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\r\n            </button>\r\n            <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\r\n                @for (item of numericFilterMenuItems; track item) {\r\n                    <mona-popup-menu-checkbox-item\r\n                        size=\"small\"\r\n                        [label]=\"item.text\"\r\n                        (menuClick)=\"onOperatorChange(item.value)\"\r\n                        [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\r\n                }\r\n            </mona-popup-menu>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\r\n        </div>\r\n    }\r\n    @case (\"date\") {\r\n        <div class=\"flex gap-0.5 w-full\">\r\n            @if (dataType === \"date\") {\r\n                <mona-date-picker\r\n                    size=\"small\"\r\n                    [ngModel]=\"dateValue()\"\r\n                    (ngModelChange)=\"onDateChange($event)\"\r\n                    [style.width.%]=\"100\" />\r\n            }\r\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\r\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\r\n            </button>\r\n            <ng-container\r\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\r\n        </div>\r\n        <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\r\n            @for (item of dateFilterMenuItems; track item) {\r\n                <mona-popup-menu-checkbox-item\r\n                    size=\"small\"\r\n                    [label]=\"item.text\"\r\n                    (menuClick)=\"onOperatorChange(item.value)\"\r\n                    [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\r\n            }\r\n        </mona-popup-menu>\r\n    }\r\n    @case (\"boolean\") {\r\n        <div class=\"flex gap-0.5 w-full\">\r\n            <mona-dropdown-list\r\n                size=\"small\"\r\n                [data]=\"booleanFilterMenuItems\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                placeholder=\"(All)\"\r\n                [ngModel]=\"booleanValue()\"\r\n                (ngModelChange)=\"onBooleanChange($event)\"\r\n                [style.width.%]=\"100\" />\r\n            <ng-container\r\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\r\n        </div>\r\n    }\r\n}\r\n\r\n<ng-template #clearFilterButtonTemplate let-hasValue>\r\n    @if (selectedOperator() != null && hasValue) {\r\n        <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" (click)=\"onClear()\">\r\n            <svg lucideFunnelX [size]=\"14\" class=\"text-error\"></svg>\r\n        </button>\r\n    }\r\n</ng-template>\r\n" }]
+                    }, template: "@let dataType = column().dataType;\n\n@switch (dataType) {\n    @case (\"string\") {\n        <div class=\"flex gap-0.5 w-full\">\n            <mona-text-box\n                size=\"small\"\n                [ngModel]=\"stringValue()\"\n                (ngModelChange)=\"onStringChange($event)\"\n                placeholder=\"Filter...\" />\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\n            </button>\n            <ng-container\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\n        </div>\n        <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\n            @for (item of stringFilterMenuItems; track item) {\n                <mona-popup-menu-checkbox-item\n                    size=\"small\"\n                    [label]=\"item.text\"\n                    (menuClick)=\"onOperatorChange(item.value)\"\n                    [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\n            }\n        </mona-popup-menu>\n    }\n    @case (\"number\") {\n        <div class=\"flex gap-0.5 w-full\">\n            <mona-numeric-text-box\n                size=\"small\"\n                [ngModel]=\"numberValue()\"\n                (ngModelChange)=\"onNumberChange($event)\"\n                [style.width.%]=\"100\" />\n\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\n            </button>\n            <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\n                @for (item of numericFilterMenuItems; track item) {\n                    <mona-popup-menu-checkbox-item\n                        size=\"small\"\n                        [label]=\"item.text\"\n                        (menuClick)=\"onOperatorChange(item.value)\"\n                        [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\n                }\n            </mona-popup-menu>\n            <ng-container\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\n        </div>\n    }\n    @case (\"date\") {\n        <div class=\"flex gap-0.5 w-full\">\n            @if (dataType === \"date\") {\n                <mona-date-picker\n                    size=\"small\"\n                    [ngModel]=\"dateValue()\"\n                    (ngModelChange)=\"onDateChange($event)\"\n                    [style.width.%]=\"100\" />\n            }\n            <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" #filterButton>\n                <svg lucideFunnel [size]=\"14\" [class.text-info]=\"isFilterActive()\"></svg>\n            </button>\n            <ng-container\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\n        </div>\n        <mona-popup-menu [target]=\"filterButton\" [size]=\"'small'\">\n            @for (item of dateFilterMenuItems; track item) {\n                <mona-popup-menu-checkbox-item\n                    size=\"small\"\n                    [label]=\"item.text\"\n                    (menuClick)=\"onOperatorChange(item.value)\"\n                    [checked]=\"selectedOperator() === item.value\"></mona-popup-menu-checkbox-item>\n            }\n        </mona-popup-menu>\n    }\n    @case (\"boolean\") {\n        <div class=\"flex gap-0.5 w-full\">\n            <mona-dropdown-list\n                size=\"small\"\n                [data]=\"booleanFilterMenuItems\"\n                textField=\"text\"\n                valueField=\"value\"\n                placeholder=\"(All)\"\n                [ngModel]=\"booleanValue()\"\n                (ngModelChange)=\"onBooleanChange($event)\"\n                [style.width.%]=\"100\" />\n            <ng-container\n                *ngTemplateOutlet=\"clearFilterButtonTemplate; context: { $implicit: isFilterActive() }\"></ng-container>\n        </div>\n    }\n}\n\n<ng-template #clearFilterButtonTemplate let-hasValue>\n    @if (selectedOperator() != null && hasValue) {\n        <button monaButton look=\"ghost\" [iconOnly]=\"true\" [size]=\"'small'\" (click)=\"onClear()\">\n            <svg lucideFunnelX [size]=\"14\" class=\"text-error\"></svg>\n        </button>\n    }\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { apply: [{ type: i0.Output, args: ["apply"] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }] } });
 
 const FOCUSABLE_TARGET_SELECTOR = "button, input, select, textarea, a[href], [tabindex]";
@@ -4697,7 +4432,6 @@ class GridComponent {
     #platformId;
     #registeredFooterScrollElement;
     #toolbarActiveIndex;
-    #themeService;
     #resizeObserver;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
@@ -4715,38 +4449,32 @@ class GridComponent {
         ...(ngDevMode ? [{ debugName: "#registeredFooterScrollElement" }] : /* istanbul ignore next */ []));
         this.#toolbarActiveIndex = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#toolbarActiveIndex" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.#resizeObserver = null;
         this.footerScrollElement = viewChild("footerScrollElement", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "footerScrollElement" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            const variantClass = gridBaseThemeVariants(theme)({ rounded });
+            const variantClass = gridBaseThemeVariants({ rounded });
             const userClass = this.userClass();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.columnActionsClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridColumnActionsThemeVariants(theme)();
+            return gridColumnActionsThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "columnActionsClass" }] : /* istanbul ignore next */ []));
         this.columnDragPreviewClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridColumnDragPreviewThemeVariants(theme)();
+            return gridColumnDragPreviewThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "columnDragPreviewClass" }] : /* istanbul ignore next */ []));
         this.columnDragging = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "columnDragging" }] : /* istanbul ignore next */ []));
         this.columnDropHintClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridColumnDropHintThemeVariants(theme)();
+            return gridColumnDropHintThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "columnDropHintClass" }] : /* istanbul ignore next */ []));
         this.columnResizerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridColumnResizerThemeVariants(theme)();
+            return gridColumnResizerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "columnResizerClass" }] : /* istanbul ignore next */ []));
         this.dragColumn = signal(null, /* @ts-ignore */
@@ -4764,18 +4492,15 @@ class GridComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterRowEnabled" }] : /* istanbul ignore next */ []));
         this.footerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridFooterThemeVariants(theme)();
+            return gridFooterThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
         this.footerTableClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridFooterTableThemeVariants(theme)();
+            return gridFooterTableThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "footerTableClass" }] : /* istanbul ignore next */ []));
         this.footerTableRowClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridFooterTableRowThemeVariants(theme)();
+            return gridFooterTableRowThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "footerTableRowClass" }] : /* istanbul ignore next */ []));
         this.footerVisible = computed(() => !this.gridService.virtualScrollOptions().enabled && this.gridService.hasFooter(), /* @ts-ignore */
@@ -4791,13 +4516,11 @@ class GridComponent {
         this.groupColumnList = viewChild("groupColumnList", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupColumnList" }] : /* istanbul ignore next */ []));
         this.groupPanelPlaceholderClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridGroupPanelPlaceholderThemeVariants(theme)();
+            return gridGroupPanelPlaceholderThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupPanelPlaceholderClass" }] : /* istanbul ignore next */ []));
         this.groupPanelClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridGroupPanelThemeVariants(theme)();
+            return gridGroupPanelThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupPanelClass" }] : /* istanbul ignore next */ []));
         this.groupPanelPlaceholderVisible = signal(true, /* @ts-ignore */
@@ -4807,40 +4530,33 @@ class GridComponent {
         this.groupingInProgress = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupingInProgress" }] : /* istanbul ignore next */ []));
         this.headerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridHeaderThemeVariants(theme)();
+            return gridHeaderThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
         this.headerMarginRight = computed(() => this.gridService.scrollbarGutterWidth(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerMarginRight" }] : /* istanbul ignore next */ []));
         this.headerTableClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridHeaderTableThemeVariants(theme)();
+            return gridHeaderTableThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerTableClass" }] : /* istanbul ignore next */ []));
         this.headerTableCellClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridHeaderTableCellThemeVariants(theme)();
+            return gridHeaderTableCellThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerTableCellClass" }] : /* istanbul ignore next */ []));
         this.headerTableColumnTitleClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridHeaderTableColumnTitleThemeVariants(theme)();
+            return gridHeaderTableColumnTitleThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerTableColumnTitleClass" }] : /* istanbul ignore next */ []));
         this.headerTableColumnWrapClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridHeaderTableColumnWrapThemeVariants(theme)();
+            return gridHeaderTableColumnWrapThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerTableColumnWrapClass" }] : /* istanbul ignore next */ []));
         this.headerTableRowClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridHeaderTableRowThemeVariants(theme)();
+            return gridHeaderTableRowThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerTableRowClass" }] : /* istanbul ignore next */ []));
         this.noDataClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return gridNoDataThemeVariants(theme)();
+            return gridNoDataThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "noDataClass" }] : /* istanbul ignore next */ []));
         this.noDataTemplate = contentChild(GridNoDataTemplateDirective, { ...(ngDevMode ? { debugName: "noDataTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -5318,17 +5034,17 @@ class GridComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridComponent, isStandalone: true, selector: "mona-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, resizeMethod: { classPropertyName: "resizeMethod", publicName: "resizeMethod", isSignal: true, isRequired: false, transformFunction: null }, responsivePager: { classPropertyName: "responsivePager", publicName: "responsivePager", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "grid" }, properties: { "class": "baseClass()", "attr.data-uid": "uid" } }, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], queries: [{ propertyName: "gridDetailTemplate", first: true, predicate: GridDetailTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: GridNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: GridToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "footerScrollElement", first: true, predicate: ["footerScrollElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderElement", first: true, predicate: ["gridHeaderElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderTableElement", first: true, predicate: ["headerTable"], descendants: true, isSignal: true }, { propertyName: "groupColumnList", first: true, predicate: ["groupColumnList"], descendants: true, isSignal: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (toolbarTemplate()) {\r\n    <div\r\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\r\n        #toolbarElement\r\n        (keydown)=\"onToolbarKeydown($event)\">\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\r\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\r\n        <button monaButton size=\"small\" #columnsButton>Columns</button>\r\n        <mona-popup\r\n            [anchor]=\"columnsButton\"\r\n            [animation]=\"{ leave: [] }\"\r\n            [width]=\"'max-content'\"\r\n            [anchorConnectionPoint]=\"'bottomleft'\"\r\n            [popupConnectionPoint]=\"'topleft'\"\r\n            #popup>\r\n            <mona-grid-column-chooser\r\n                (apply)=\"popup.closePopup()\"\r\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\r\n        </mona-popup>\r\n    </div>\r\n}\r\n\r\n@if (groupable()) {\r\n    <div\r\n        [class]=\"groupPanelClass()\"\r\n        cdkDropList\r\n        #groupColumnList=\"cdkDropList\"\r\n        cdkDropListOrientation=\"horizontal\"\r\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\r\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\r\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\r\n        @if (gridService.groupColumns().length !== 0) {\r\n            @for (groupColumn of gridService.groupColumns(); track $index) {\r\n                <mona-chip\r\n                    [removable]=\"true\"\r\n                    size=\"small\"\r\n                    [rounded]=\"rounded()\"\r\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\r\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\r\n                    @if (groupColumn.groupSortDirection === \"asc\") {\r\n                        <i class=\"ri-arrow-down-line\"></i>\r\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\r\n                        <i class=\"ri-arrow-up-line\"></i>\r\n                    }\r\n                    <span>{{ groupColumn.title }}</span>\r\n                    <span class=\"ml-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\r\n                        <i class=\"ri-more-2-fill\"></i>\r\n                    </span>\r\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\r\n                        <mona-popup-menu-item\r\n                            [disabled]=\"$first\"\r\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\r\n                            <ng-template monaPopupMenuTextTemplate>\r\n                                <i class=\"ri-arrow-left-fill\"></i> Move as previous\r\n                            </ng-template>\r\n                        </mona-popup-menu-item>\r\n                        <mona-popup-menu-item\r\n                            [disabled]=\"$last\"\r\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\r\n                            <ng-template monaPopupMenuTextTemplate>\r\n                                <i class=\"ri-arrow-right-fill\"></i> Move as next\r\n                            </ng-template>\r\n                        </mona-popup-menu-item>\r\n                    </mona-popup-menu>\r\n                </mona-chip>\r\n            }\r\n        } @else if (groupPanelPlaceholderVisible()) {\r\n            <span [class]=\"groupPanelPlaceholderClass()\">Drag a column header here to group</span>\r\n        }\r\n    </div>\r\n}\r\n<div [class]=\"headerClass()\" [style.margin-right.px]=\"headerMarginRight()\" #gridHeaderElement>\r\n    <div>\r\n        <table #headerTable [class]=\"headerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\r\n            <colgroup>\r\n                @for (_ of gridService.groupColumns(); track $index) {\r\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\r\n                }\r\n                @if (gridService.masterDetailTemplate()) {\r\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\r\n                }\r\n                @for (col of gridService.visibleColumns(); track $index) {\r\n                    <col [style.width.px]=\"col.calculatedWidth\" />\r\n                }\r\n            </colgroup>\r\n            <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\r\n                <tr\r\n                    cdkDropList\r\n                    [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\r\n                    (cdkDropListDropped)=\"onColumnDrop()\"\r\n                    [class]=\"headerTableRowClass()\">\r\n                    @for (_ of gridService.groupColumns(); track $index) {\r\n                        <th\r\n                            monaGridLockedCell\r\n                            [lockedCellHeader]=\"true\"\r\n                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\r\n                            scope=\"col\"\r\n                            class=\"border-r border-border\"\r\n                            [attr.colspan]=\"1\"\r\n                            [style.width.px]=\"gridService.groupColumnWidth\"></th>\r\n                    }\r\n                    @if (gridService.masterDetailTemplate()) {\r\n                        <th\r\n                            monaGridLockedCell\r\n                            [lockedCellHeader]=\"true\"\r\n                            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\r\n                            scope=\"col\"\r\n                            class=\"border-r border-border\"\r\n                            [attr.colspan]=\"1\"\r\n                            [style.width.px]=\"gridService.detailColumnWidth\"></th>\r\n                    }\r\n                    @for (column of gridService.visibleColumns(); track $index) {\r\n                        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\r\n                        <th\r\n                            scope=\"col\"\r\n                            role=\"columnheader\"\r\n                            cdkDrag\r\n                            monaGridLockedCell\r\n                            [column]=\"column\"\r\n                            [lockedCellHeader]=\"true\"\r\n                            monaGridLogicalCell\r\n                            [cellKind]=\"'header'\"\r\n                            [columnId]=\"column.id\"\r\n                            [rowIndex]=\"-1\"\r\n                            [colIndex]=\"colIndex\"\r\n                            [section]=\"'header'\"\r\n                            [firstInRow]=\"colIndex === 0\"\r\n                            [lastInRow]=\"\r\n                                colIndex ===\r\n                                gridService.visibleColumns().length - (gridService.masterDetailTemplate() ? 0 : 1)\r\n                            \"\r\n                            (toggle)=\"onColumnSort(column)\"\r\n                            [cdkDragData]=\"column\"\r\n                            [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\r\n                            [class]=\"headerTableCellClass()\"\r\n                            (mouseenter)=\"onColumnMouseEnter(column)\"\r\n                            (cdkDragEntered)=\"onColumnDragEnter($event)\"\r\n                            (cdkDragStarted)=\"onColumnDragStart($event)\"\r\n                            [style.min-width.px]=\"column.minWidth\"\r\n                            [style.width.px]=\"column.calculatedWidth\"\r\n                            [attr.colspan]=\"1\"\r\n                            [attr.aria-sort]=\"\r\n                                gridService.sortableOptions().enabled\r\n                                    ? (column.columnSortDirection | columnAriaSort)\r\n                                    : null\r\n                            \">\r\n                            <div [class]=\"headerTableColumnWrapClass()\">\r\n                                @if (column.headerTemplate) {\r\n                                    <ng-container\r\n                                        [ngTemplateOutlet]=\"column.headerTemplate\"\r\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\r\n                                } @else if (column.titleTemplate) {\r\n                                    <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\r\n                                } @else {\r\n                                    <span\r\n                                        [class]=\"headerTableColumnTitleClass()\"\r\n                                        (click)=\"onColumnSort(column)\"\r\n                                        [title]=\"column.title\"\r\n                                        >{{ column.title }}</span\r\n                                    >\r\n                                }\r\n\r\n                                <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\r\n                                    @if (gridService.sortableOptions().showIndices && column.sortIndex !== null) {\r\n                                        <span>{{ column.sortIndex }}</span>\r\n                                    }\r\n                                    @if (column.columnSortDirection === \"asc\") {\r\n                                        <i class=\"ri-arrow-down-line\"></i>\r\n                                    } @else if (column.columnSortDirection === \"desc\") {\r\n                                        <i class=\"ri-arrow-up-line\"></i>\r\n                                    }\r\n                                    @if (filterMenuEnabled()) {\r\n                                        @if (column.kind === \"data\") {\r\n                                            <mona-grid-filter-menu\r\n                                                [column]=\"column\"\r\n                                                [type]=\"column.dataType\"\r\n                                                (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\r\n                                        }\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                            @if (\r\n                                dropColumn() === column &&\r\n                                dragColumn() &&\r\n                                gridService.reorderableOptions().enabled &&\r\n                                !groupingInProgress()\r\n                            ) {\r\n                                <span [class]=\"columnDropHintClass()\"> </span>\r\n                            }\r\n                            @if (gridService.resizableOptions().enabled && !columnDragging()) {\r\n                                <div\r\n                                    monaGridColumnResizeHandler\r\n                                    [column]=\"column\"\r\n                                    [class]=\"columnResizerClass()\"\r\n                                    (resizeStart)=\"onColumnResizeStart()\"\r\n                                    (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\r\n                            }\r\n                            <ng-template cdkDragPreview>\r\n                                <div [class]=\"columnDragPreviewClass()\">\r\n                                    <span>{{ column.title }}</span>\r\n                                </div>\r\n                            </ng-template>\r\n                            <ng-template cdkDragPlaceholder>\r\n                                @if (groupingInProgress()) {\r\n                                    <mona-chip\r\n                                        style=\"z-index: 10; pointer-events: none\"\r\n                                        [removable]=\"true\"\r\n                                        [rounded]=\"rounded()\"\r\n                                        >{{ column.title }}</mona-chip\r\n                                    >\r\n                                }\r\n                            </ng-template>\r\n                        </th>\r\n                        @if (columnDragging() && dragColumn() === column) {\r\n                            <th\r\n                                monaGridLockedCell\r\n                                [column]=\"column\"\r\n                                [lockedCellHeader]=\"true\"\r\n                                [class]=\"headerTableCellClass()\"\r\n                                [style.min-width.px]=\"column.minWidth\"\r\n                                [attr.colspan]=\"1\"\r\n                                [style.width.px]=\"column.calculatedWidth\">\r\n                                <div [class]=\"headerTableColumnWrapClass()\">\r\n                                    @if (column.headerTemplate) {\r\n                                        <ng-container\r\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\r\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\r\n                                    } @else if (column.titleTemplate) {\r\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\r\n                                    } @else {\r\n                                        <span\r\n                                            [class]=\"headerTableColumnTitleClass()\"\r\n                                            (click)=\"onColumnSort(column)\"\r\n                                            [title]=\"column.title\"\r\n                                            >{{ column.title }}</span\r\n                                        >\r\n                                    }\r\n                                </div>\r\n                            </th>\r\n                        }\r\n                    }\r\n                </tr>\r\n                @if (filterRowEnabled()) {\r\n                    <tr role=\"row\" [class]=\"headerTableRowClass()\">\r\n                        @for (_ of gridService.groupColumns(); track $index) {\r\n                            <th\r\n                                monaGridLockedCell\r\n                                [lockedCellHeader]=\"true\"\r\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\r\n                                scope=\"col\"\r\n                                class=\"border-r border-border\"\r\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\r\n                        }\r\n                        @if (gridService.masterDetailTemplate()) {\r\n                            <th\r\n                                monaGridLockedCell\r\n                                [lockedCellHeader]=\"true\"\r\n                                [lockedStructuralOffset]=\"\r\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\r\n                                \"\r\n                                scope=\"col\"\r\n                                class=\"border-r border-border\"\r\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\r\n                        }\r\n                        @for (column of gridService.visibleColumns(); track $index) {\r\n                            <th\r\n                                monaGridLockedCell\r\n                                [column]=\"column\"\r\n                                [lockedCellHeader]=\"true\"\r\n                                scope=\"col\"\r\n                                class=\"border-r border-border overflow-hidden\"\r\n                                [style.width.px]=\"column.calculatedWidth\"\r\n                                [attr.aria-label]=\"'Filter by ' + column.title\">\r\n                                @if (column.kind === \"data\" && column.field) {\r\n                                    <mona-grid-filter-row-cell\r\n                                        [column]=\"column\"\r\n                                        (apply)=\"onColumnFilter(column, $event)\" />\r\n                                }\r\n                            </th>\r\n                        }\r\n                    </tr>\r\n                }\r\n            </thead>\r\n        </table>\r\n    </div>\r\n</div>\r\n\r\n@defer (when gridWidthSet()) {\r\n    @if (gridService.virtualScrollOptions().enabled) {\r\n        @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\r\n            <mona-grid-virtual-list\r\n                [columns]=\"gridService.visibleColumns()\"\r\n                [data]=\"gridService.viewRows()\"></mona-grid-virtual-list>\r\n        } @else {\r\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\r\n        }\r\n    } @else {\r\n        @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\r\n            <mona-grid-list\r\n                [columns]=\"gridService.visibleColumns()\"\r\n                [data]=\"gridService.viewPageRows()\"></mona-grid-list>\r\n            @if (footerVisible()) {\r\n                <div\r\n                    [class]=\"footerClass()\"\r\n                    [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\r\n                    #footerScrollElement\r\n                    data-grid-footer-scroll>\r\n                    <div>\r\n                        <table [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\r\n                            <colgroup>\r\n                                @for (_ of gridService.groupColumns(); track $index) {\r\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\r\n                                }\r\n                                @if (gridService.masterDetailTemplate()) {\r\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\r\n                                }\r\n                                @for (col of gridService.visibleColumns(); track $index) {\r\n                                    <col [style.width.px]=\"col.calculatedWidth\" />\r\n                                }\r\n                            </colgroup>\r\n                            <tfoot role=\"rowgroup\">\r\n                                <tr [class]=\"footerTableRowClass()\">\r\n                                    @for (_ of gridService.groupColumns(); track $index) {\r\n                                        <td\r\n                                            monaGridFooterTableCell\r\n                                            monaGridLockedCell\r\n                                            [lockedCellHeader]=\"true\"\r\n                                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\r\n                                            [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\r\n                                    }\r\n                                    @if (gridService.masterDetailTemplate()) {\r\n                                        <td\r\n                                            monaGridFooterTableCell\r\n                                            monaGridLockedCell\r\n                                            [lockedCellHeader]=\"true\"\r\n                                            [lockedStructuralOffset]=\"\r\n                                                gridService.groupColumns().length * gridService.groupColumnWidth\r\n                                            \"\r\n                                            [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\r\n                                    }\r\n                                    @for (column of gridService.visibleColumns(); track $index) {\r\n                                        <td\r\n                                            monaGridFooterTableCell\r\n                                            monaGridLockedCell\r\n                                            [column]=\"column\"\r\n                                            [lockedCellHeader]=\"true\"\r\n                                            [footerColumn]=\"column\">\r\n                                            <mona-grid-footer-cell\r\n                                                [column]=\"column\"\r\n                                                [columnIndex]=\"$index\"></mona-grid-footer-cell>\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                            </tfoot>\r\n                        </table>\r\n                    </div>\r\n                </div>\r\n            }\r\n            <mona-pager\r\n                class=\"border-0 border-t border-t-border rounded-tl-none rounded-tr-none\"\r\n                [skip]=\"gridService.paginationState().skip\"\r\n                [pageSize]=\"gridService.paginationState().take\"\r\n                [total]=\"gridService.viewRowCount()\"\r\n                [size]=\"'small'\"\r\n                [rounded]=\"rounded()\"\r\n                [pageInput]=\"true\"\r\n                [pageSizeValues]=\"pageSizeValues()\"\r\n                [responsive]=\"responsivePager()\"\r\n                (pageSizeChange)=\"onPageSizeChange($event)\"\r\n                (pageChange)=\"onPageChange($event)\"></mona-pager>\r\n        } @else {\r\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\r\n        }\r\n    }\r\n} @placeholder {\r\n    <mona-placeholder text=\"Loading...\"></mona-placeholder>\r\n}\r\n\r\n<ng-template #emptyGridTemplate>\r\n    <div [class]=\"noDataClass()\">\r\n        @if (noDataTemplate()) {\r\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n        } @else {\r\n            <mona-placeholder text=\"No data\"></mona-placeholder>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridFilterMenuComponent, selector: "mona-grid-filter-menu", inputs: ["column", "type"], outputs: ["apply"] }, { kind: "component", type: GridFilterRowCellComponent, selector: "mona-grid-filter-row-cell", inputs: ["column"], outputs: ["apply"] }, { kind: "directive", type: GridColumnResizeHandlerDirective, selector: "[monaGridColumnResizeHandler]", inputs: ["column"], outputs: ["resizeEnd", "resizeStart"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "component", type: PopupMenuItemComponent, selector: "mona-popup-menu-item", inputs: ["disabled", "label"], outputs: ["menuClick"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "lockedCellHeader", "lockedStructuralOffset"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupComponent, selector: "mona-popup", inputs: ["anchor", "anchorConnectionPoint", "animation", "backdropClass", "closeOnBackdropClick", "closeOnEscape", "closeOnMouseLeave", "closeOnOutsideClick", "data", "hasBackdrop", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "offset", "popupClass", "popupConnectionPoint", "popupWrapperClass", "positionStrategy", "positions", "preventClose", "providers", "trigger", "width", "withPush", "closeOnScroll", "restoreFocus", "withScrollTracking"], outputs: ["close", "open"] }, { kind: "component", type: GridColumnChooserComponent, selector: "mona-grid-column-chooser", outputs: ["apply", "cancel"] }, { kind: "pipe", type: ColumnAriaSortPipe, name: "columnAriaSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-B9SQH5N-.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-list.component-Dgea-O0X.mjs').then(m => m.GridListComponent), PagerComponent, /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-DRHycGIh.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-DlLwcCFT.mjs').then(m => m.GridFooterTableCellDirective), GridLockedCellDirective]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridComponent, isStandalone: true, selector: "mona-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, resizeMethod: { classPropertyName: "resizeMethod", publicName: "resizeMethod", isSignal: true, isRequired: false, transformFunction: null }, responsivePager: { classPropertyName: "responsivePager", publicName: "responsivePager", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "grid" }, properties: { "class": "baseClass()", "attr.data-uid": "uid" } }, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], queries: [{ propertyName: "gridDetailTemplate", first: true, predicate: GridDetailTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: GridNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: GridToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "footerScrollElement", first: true, predicate: ["footerScrollElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderElement", first: true, predicate: ["gridHeaderElement"], descendants: true, isSignal: true }, { propertyName: "gridHeaderTableElement", first: true, predicate: ["headerTable"], descendants: true, isSignal: true }, { propertyName: "groupColumnList", first: true, predicate: ["groupColumnList"], descendants: true, isSignal: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbarElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>Columns</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <i class=\"ri-arrow-down-line\"></i>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <i class=\"ri-arrow-up-line\"></i>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ml-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <i class=\"ri-more-2-fill\"></i>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-left-fill\"></i> Move as previous\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-right-fill\"></i> Move as next\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">Drag a column header here to group</span>\n        }\n    </div>\n}\n<div [class]=\"headerClass()\" [style.margin-right.px]=\"headerMarginRight()\" #gridHeaderElement>\n    <div>\n        <table #headerTable [class]=\"headerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n            <colgroup>\n                @for (_ of gridService.groupColumns(); track $index) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @if (gridService.masterDetailTemplate()) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @for (col of gridService.visibleColumns(); track $index) {\n                    <col [style.width.px]=\"col.calculatedWidth\" />\n                }\n            </colgroup>\n            <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                <tr\n                    cdkDropList\n                    [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                    (cdkDropListDropped)=\"onColumnDrop()\"\n                    [class]=\"headerTableRowClass()\">\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                    }\n                    @for (column of gridService.visibleColumns(); track $index) {\n                        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n                        <th\n                            scope=\"col\"\n                            role=\"columnheader\"\n                            cdkDrag\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [lockedCellHeader]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'header'\"\n                            [columnId]=\"column.id\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"colIndex\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"colIndex === 0\"\n                            [lastInRow]=\"\n                                colIndex ===\n                                gridService.visibleColumns().length - (gridService.masterDetailTemplate() ? 0 : 1)\n                            \"\n                            (toggle)=\"onColumnSort(column)\"\n                            [cdkDragData]=\"column\"\n                            [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                            [class]=\"headerTableCellClass()\"\n                            (mouseenter)=\"onColumnMouseEnter(column)\"\n                            (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                            (cdkDragStarted)=\"onColumnDragStart($event)\"\n                            [style.min-width.px]=\"column.minWidth\"\n                            [style.width.px]=\"column.calculatedWidth\"\n                            [attr.colspan]=\"1\"\n                            [attr.aria-sort]=\"\n                                gridService.sortableOptions().enabled\n                                    ? (column.columnSortDirection | columnAriaSort)\n                                    : null\n                            \">\n                            <div [class]=\"headerTableColumnWrapClass()\">\n                                @if (column.headerTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"column.headerTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                } @else if (column.titleTemplate) {\n                                    <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                } @else {\n                                    <span\n                                        [class]=\"headerTableColumnTitleClass()\"\n                                        (click)=\"onColumnSort(column)\"\n                                        [title]=\"column.title\"\n                                        >{{ column.title }}</span\n                                    >\n                                }\n\n                                <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                    @if (gridService.sortableOptions().showIndices && column.sortIndex !== null) {\n                                        <span>{{ column.sortIndex }}</span>\n                                    }\n                                    @if (column.columnSortDirection === \"asc\") {\n                                        <i class=\"ri-arrow-down-line\"></i>\n                                    } @else if (column.columnSortDirection === \"desc\") {\n                                        <i class=\"ri-arrow-up-line\"></i>\n                                    }\n                                    @if (filterMenuEnabled()) {\n                                        @if (column.kind === \"data\") {\n                                            <mona-grid-filter-menu\n                                                [column]=\"column\"\n                                                [type]=\"column.dataType\"\n                                                (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                        }\n                                    }\n                                </div>\n                            </div>\n                            @if (\n                                dropColumn() === column &&\n                                dragColumn() &&\n                                gridService.reorderableOptions().enabled &&\n                                !groupingInProgress()\n                            ) {\n                                <span [class]=\"columnDropHintClass()\"> </span>\n                            }\n                            @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                <div\n                                    monaGridColumnResizeHandler\n                                    [column]=\"column\"\n                                    [class]=\"columnResizerClass()\"\n                                    (resizeStart)=\"onColumnResizeStart()\"\n                                    (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                            }\n                            <ng-template cdkDragPreview>\n                                <div [class]=\"columnDragPreviewClass()\">\n                                    <span>{{ column.title }}</span>\n                                </div>\n                            </ng-template>\n                            <ng-template cdkDragPlaceholder>\n                                @if (groupingInProgress()) {\n                                    <mona-chip\n                                        style=\"z-index: 10; pointer-events: none\"\n                                        [removable]=\"true\"\n                                        [rounded]=\"rounded()\"\n                                        >{{ column.title }}</mona-chip\n                                    >\n                                }\n                            </ng-template>\n                        </th>\n                        @if (columnDragging() && dragColumn() === column) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [class]=\"headerTableCellClass()\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"column.calculatedWidth\">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                    } @else if (column.titleTemplate) {\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                    } @else {\n                                        <span\n                                            [class]=\"headerTableColumnTitleClass()\"\n                                            (click)=\"onColumnSort(column)\"\n                                            [title]=\"column.title\"\n                                            >{{ column.title }}</span\n                                        >\n                                    }\n                                </div>\n                            </th>\n                        }\n                    }\n                </tr>\n                @if (filterRowEnabled()) {\n                    <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                scope=\"col\"\n                                class=\"border-r border-border overflow-hidden\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.aria-label]=\"'Filter by ' + column.title\">\n                                @if (column.kind === \"data\" && column.field) {\n                                    <mona-grid-filter-row-cell\n                                        [column]=\"column\"\n                                        (apply)=\"onColumnFilter(column, $event)\" />\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n            </thead>\n        </table>\n    </div>\n</div>\n\n@defer (when gridWidthSet()) {\n    @if (gridService.virtualScrollOptions().enabled) {\n        @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-virtual-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewRows()\"></mona-grid-virtual-list>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    } @else {\n        @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewPageRows()\"></mona-grid-list>\n            @if (footerVisible()) {\n                <div\n                    [class]=\"footerClass()\"\n                    [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\n                    #footerScrollElement\n                    data-grid-footer-scroll>\n                    <div>\n                        <table [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n                            <colgroup>\n                                @for (_ of gridService.groupColumns(); track $index) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @if (gridService.masterDetailTemplate()) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @for (col of gridService.visibleColumns(); track $index) {\n                                    <col [style.width.px]=\"col.calculatedWidth\" />\n                                }\n                            </colgroup>\n                            <tfoot role=\"rowgroup\">\n                                <tr [class]=\"footerTableRowClass()\">\n                                    @for (_ of gridService.groupColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                            [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                                    }\n                                    @if (gridService.masterDetailTemplate()) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"\n                                                gridService.groupColumns().length * gridService.groupColumnWidth\n                                            \"\n                                            [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                                    }\n                                    @for (column of gridService.visibleColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [column]=\"column\"\n                                            [lockedCellHeader]=\"true\"\n                                            [footerColumn]=\"column\">\n                                            <mona-grid-footer-cell\n                                                [column]=\"column\"\n                                                [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                                        </td>\n                                    }\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            }\n            <mona-pager\n                class=\"border-0 border-t border-t-border rounded-tl-none rounded-tr-none\"\n                [skip]=\"gridService.paginationState().skip\"\n                [pageSize]=\"gridService.paginationState().take\"\n                [total]=\"gridService.viewRowCount()\"\n                [size]=\"'small'\"\n                [rounded]=\"rounded()\"\n                [pageInput]=\"true\"\n                [pageSizeValues]=\"pageSizeValues()\"\n                [responsive]=\"responsivePager()\"\n                (pageSizeChange)=\"onPageSizeChange($event)\"\n                (pageChange)=\"onPageChange($event)\"></mona-pager>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    }\n} @placeholder {\n    <mona-placeholder text=\"Loading...\"></mona-placeholder>\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder text=\"No data\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GridFilterMenuComponent, selector: "mona-grid-filter-menu", inputs: ["column", "type"], outputs: ["apply"] }, { kind: "component", type: GridFilterRowCellComponent, selector: "mona-grid-filter-row-cell", inputs: ["column"], outputs: ["apply"] }, { kind: "directive", type: GridColumnResizeHandlerDirective, selector: "[monaGridColumnResizeHandler]", inputs: ["column"], outputs: ["resizeEnd", "resizeStart"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: PlaceholderComponent, selector: "mona-placeholder", inputs: ["text", "class"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "component", type: PopupMenuItemComponent, selector: "mona-popup-menu-item", inputs: ["disabled", "label"], outputs: ["menuClick"] }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "lockedCellHeader", "lockedStructuralOffset"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupComponent, selector: "mona-popup", inputs: ["anchor", "anchorConnectionPoint", "animation", "backdropClass", "closeOnBackdropClick", "closeOnEscape", "closeOnMouseLeave", "closeOnOutsideClick", "data", "hasBackdrop", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "offset", "popupClass", "popupConnectionPoint", "popupWrapperClass", "positionStrategy", "positions", "preventClose", "providers", "trigger", "width", "withPush", "closeOnScroll", "restoreFocus", "withScrollTracking"], outputs: ["close", "open"] }, { kind: "component", type: GridColumnChooserComponent, selector: "mona-grid-column-chooser", outputs: ["apply", "cancel"] }, { kind: "pipe", type: ColumnAriaSortPipe, name: "columnAriaSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-B6FBLtrr.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-list.component-DCd8K6ng.mjs').then(m => m.GridListComponent), PagerComponent, /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-C5FRZlvv.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-OJe4UYuw.mjs').then(m => m.GridFooterTableCellDirective), GridLockedCellDirective]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ngImport: i0, type: GridComponent, resolveDeferredDeps: () => [/* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-B9SQH5N-.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-list.component-Dgea-O0X.mjs').then(m => m.GridListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-DRHycGIh.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-DlLwcCFT.mjs').then(m => m.GridFooterTableCellDirective)], resolveMetadata: (GridFooterCellComponent, GridListComponent, GridVirtualListComponent, GridFooterTableCellDirective) => ({ decorators: [{
+        import('./nanahoshi-mona-ui-grid-grid-footer-cell.component-B6FBLtrr.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-list.component-DCd8K6ng.mjs').then(m => m.GridListComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-C5FRZlvv.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-OJe4UYuw.mjs').then(m => m.GridFooterTableCellDirective)], resolveMetadata: (GridFooterCellComponent, GridListComponent, GridVirtualListComponent, GridFooterTableCellDirective) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: "mona-grid", changeDetection: ChangeDetectionStrategy.OnPush, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], imports: [
                             CdkDropList,
@@ -5359,7 +5075,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
                             "[class]": "baseClass()",
                             "[attr.data-uid]": "uid",
                             role: "grid"
-                        }, template: "@if (toolbarTemplate()) {\r\n    <div\r\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\r\n        #toolbarElement\r\n        (keydown)=\"onToolbarKeydown($event)\">\r\n        <ng-container\r\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\r\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\r\n        <button monaButton size=\"small\" #columnsButton>Columns</button>\r\n        <mona-popup\r\n            [anchor]=\"columnsButton\"\r\n            [animation]=\"{ leave: [] }\"\r\n            [width]=\"'max-content'\"\r\n            [anchorConnectionPoint]=\"'bottomleft'\"\r\n            [popupConnectionPoint]=\"'topleft'\"\r\n            #popup>\r\n            <mona-grid-column-chooser\r\n                (apply)=\"popup.closePopup()\"\r\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\r\n        </mona-popup>\r\n    </div>\r\n}\r\n\r\n@if (groupable()) {\r\n    <div\r\n        [class]=\"groupPanelClass()\"\r\n        cdkDropList\r\n        #groupColumnList=\"cdkDropList\"\r\n        cdkDropListOrientation=\"horizontal\"\r\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\r\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\r\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\r\n        @if (gridService.groupColumns().length !== 0) {\r\n            @for (groupColumn of gridService.groupColumns(); track $index) {\r\n                <mona-chip\r\n                    [removable]=\"true\"\r\n                    size=\"small\"\r\n                    [rounded]=\"rounded()\"\r\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\r\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\r\n                    @if (groupColumn.groupSortDirection === \"asc\") {\r\n                        <i class=\"ri-arrow-down-line\"></i>\r\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\r\n                        <i class=\"ri-arrow-up-line\"></i>\r\n                    }\r\n                    <span>{{ groupColumn.title }}</span>\r\n                    <span class=\"ml-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\r\n                        <i class=\"ri-more-2-fill\"></i>\r\n                    </span>\r\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\r\n                        <mona-popup-menu-item\r\n                            [disabled]=\"$first\"\r\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\r\n                            <ng-template monaPopupMenuTextTemplate>\r\n                                <i class=\"ri-arrow-left-fill\"></i> Move as previous\r\n                            </ng-template>\r\n                        </mona-popup-menu-item>\r\n                        <mona-popup-menu-item\r\n                            [disabled]=\"$last\"\r\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\r\n                            <ng-template monaPopupMenuTextTemplate>\r\n                                <i class=\"ri-arrow-right-fill\"></i> Move as next\r\n                            </ng-template>\r\n                        </mona-popup-menu-item>\r\n                    </mona-popup-menu>\r\n                </mona-chip>\r\n            }\r\n        } @else if (groupPanelPlaceholderVisible()) {\r\n            <span [class]=\"groupPanelPlaceholderClass()\">Drag a column header here to group</span>\r\n        }\r\n    </div>\r\n}\r\n<div [class]=\"headerClass()\" [style.margin-right.px]=\"headerMarginRight()\" #gridHeaderElement>\r\n    <div>\r\n        <table #headerTable [class]=\"headerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\r\n            <colgroup>\r\n                @for (_ of gridService.groupColumns(); track $index) {\r\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\r\n                }\r\n                @if (gridService.masterDetailTemplate()) {\r\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\r\n                }\r\n                @for (col of gridService.visibleColumns(); track $index) {\r\n                    <col [style.width.px]=\"col.calculatedWidth\" />\r\n                }\r\n            </colgroup>\r\n            <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\r\n                <tr\r\n                    cdkDropList\r\n                    [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\r\n                    (cdkDropListDropped)=\"onColumnDrop()\"\r\n                    [class]=\"headerTableRowClass()\">\r\n                    @for (_ of gridService.groupColumns(); track $index) {\r\n                        <th\r\n                            monaGridLockedCell\r\n                            [lockedCellHeader]=\"true\"\r\n                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\r\n                            scope=\"col\"\r\n                            class=\"border-r border-border\"\r\n                            [attr.colspan]=\"1\"\r\n                            [style.width.px]=\"gridService.groupColumnWidth\"></th>\r\n                    }\r\n                    @if (gridService.masterDetailTemplate()) {\r\n                        <th\r\n                            monaGridLockedCell\r\n                            [lockedCellHeader]=\"true\"\r\n                            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\r\n                            scope=\"col\"\r\n                            class=\"border-r border-border\"\r\n                            [attr.colspan]=\"1\"\r\n                            [style.width.px]=\"gridService.detailColumnWidth\"></th>\r\n                    }\r\n                    @for (column of gridService.visibleColumns(); track $index) {\r\n                        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\r\n                        <th\r\n                            scope=\"col\"\r\n                            role=\"columnheader\"\r\n                            cdkDrag\r\n                            monaGridLockedCell\r\n                            [column]=\"column\"\r\n                            [lockedCellHeader]=\"true\"\r\n                            monaGridLogicalCell\r\n                            [cellKind]=\"'header'\"\r\n                            [columnId]=\"column.id\"\r\n                            [rowIndex]=\"-1\"\r\n                            [colIndex]=\"colIndex\"\r\n                            [section]=\"'header'\"\r\n                            [firstInRow]=\"colIndex === 0\"\r\n                            [lastInRow]=\"\r\n                                colIndex ===\r\n                                gridService.visibleColumns().length - (gridService.masterDetailTemplate() ? 0 : 1)\r\n                            \"\r\n                            (toggle)=\"onColumnSort(column)\"\r\n                            [cdkDragData]=\"column\"\r\n                            [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\r\n                            [class]=\"headerTableCellClass()\"\r\n                            (mouseenter)=\"onColumnMouseEnter(column)\"\r\n                            (cdkDragEntered)=\"onColumnDragEnter($event)\"\r\n                            (cdkDragStarted)=\"onColumnDragStart($event)\"\r\n                            [style.min-width.px]=\"column.minWidth\"\r\n                            [style.width.px]=\"column.calculatedWidth\"\r\n                            [attr.colspan]=\"1\"\r\n                            [attr.aria-sort]=\"\r\n                                gridService.sortableOptions().enabled\r\n                                    ? (column.columnSortDirection | columnAriaSort)\r\n                                    : null\r\n                            \">\r\n                            <div [class]=\"headerTableColumnWrapClass()\">\r\n                                @if (column.headerTemplate) {\r\n                                    <ng-container\r\n                                        [ngTemplateOutlet]=\"column.headerTemplate\"\r\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\r\n                                } @else if (column.titleTemplate) {\r\n                                    <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\r\n                                } @else {\r\n                                    <span\r\n                                        [class]=\"headerTableColumnTitleClass()\"\r\n                                        (click)=\"onColumnSort(column)\"\r\n                                        [title]=\"column.title\"\r\n                                        >{{ column.title }}</span\r\n                                    >\r\n                                }\r\n\r\n                                <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\r\n                                    @if (gridService.sortableOptions().showIndices && column.sortIndex !== null) {\r\n                                        <span>{{ column.sortIndex }}</span>\r\n                                    }\r\n                                    @if (column.columnSortDirection === \"asc\") {\r\n                                        <i class=\"ri-arrow-down-line\"></i>\r\n                                    } @else if (column.columnSortDirection === \"desc\") {\r\n                                        <i class=\"ri-arrow-up-line\"></i>\r\n                                    }\r\n                                    @if (filterMenuEnabled()) {\r\n                                        @if (column.kind === \"data\") {\r\n                                            <mona-grid-filter-menu\r\n                                                [column]=\"column\"\r\n                                                [type]=\"column.dataType\"\r\n                                                (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\r\n                                        }\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                            @if (\r\n                                dropColumn() === column &&\r\n                                dragColumn() &&\r\n                                gridService.reorderableOptions().enabled &&\r\n                                !groupingInProgress()\r\n                            ) {\r\n                                <span [class]=\"columnDropHintClass()\"> </span>\r\n                            }\r\n                            @if (gridService.resizableOptions().enabled && !columnDragging()) {\r\n                                <div\r\n                                    monaGridColumnResizeHandler\r\n                                    [column]=\"column\"\r\n                                    [class]=\"columnResizerClass()\"\r\n                                    (resizeStart)=\"onColumnResizeStart()\"\r\n                                    (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\r\n                            }\r\n                            <ng-template cdkDragPreview>\r\n                                <div [class]=\"columnDragPreviewClass()\">\r\n                                    <span>{{ column.title }}</span>\r\n                                </div>\r\n                            </ng-template>\r\n                            <ng-template cdkDragPlaceholder>\r\n                                @if (groupingInProgress()) {\r\n                                    <mona-chip\r\n                                        style=\"z-index: 10; pointer-events: none\"\r\n                                        [removable]=\"true\"\r\n                                        [rounded]=\"rounded()\"\r\n                                        >{{ column.title }}</mona-chip\r\n                                    >\r\n                                }\r\n                            </ng-template>\r\n                        </th>\r\n                        @if (columnDragging() && dragColumn() === column) {\r\n                            <th\r\n                                monaGridLockedCell\r\n                                [column]=\"column\"\r\n                                [lockedCellHeader]=\"true\"\r\n                                [class]=\"headerTableCellClass()\"\r\n                                [style.min-width.px]=\"column.minWidth\"\r\n                                [attr.colspan]=\"1\"\r\n                                [style.width.px]=\"column.calculatedWidth\">\r\n                                <div [class]=\"headerTableColumnWrapClass()\">\r\n                                    @if (column.headerTemplate) {\r\n                                        <ng-container\r\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\r\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\r\n                                    } @else if (column.titleTemplate) {\r\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\r\n                                    } @else {\r\n                                        <span\r\n                                            [class]=\"headerTableColumnTitleClass()\"\r\n                                            (click)=\"onColumnSort(column)\"\r\n                                            [title]=\"column.title\"\r\n                                            >{{ column.title }}</span\r\n                                        >\r\n                                    }\r\n                                </div>\r\n                            </th>\r\n                        }\r\n                    }\r\n                </tr>\r\n                @if (filterRowEnabled()) {\r\n                    <tr role=\"row\" [class]=\"headerTableRowClass()\">\r\n                        @for (_ of gridService.groupColumns(); track $index) {\r\n                            <th\r\n                                monaGridLockedCell\r\n                                [lockedCellHeader]=\"true\"\r\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\r\n                                scope=\"col\"\r\n                                class=\"border-r border-border\"\r\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\r\n                        }\r\n                        @if (gridService.masterDetailTemplate()) {\r\n                            <th\r\n                                monaGridLockedCell\r\n                                [lockedCellHeader]=\"true\"\r\n                                [lockedStructuralOffset]=\"\r\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\r\n                                \"\r\n                                scope=\"col\"\r\n                                class=\"border-r border-border\"\r\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\r\n                        }\r\n                        @for (column of gridService.visibleColumns(); track $index) {\r\n                            <th\r\n                                monaGridLockedCell\r\n                                [column]=\"column\"\r\n                                [lockedCellHeader]=\"true\"\r\n                                scope=\"col\"\r\n                                class=\"border-r border-border overflow-hidden\"\r\n                                [style.width.px]=\"column.calculatedWidth\"\r\n                                [attr.aria-label]=\"'Filter by ' + column.title\">\r\n                                @if (column.kind === \"data\" && column.field) {\r\n                                    <mona-grid-filter-row-cell\r\n                                        [column]=\"column\"\r\n                                        (apply)=\"onColumnFilter(column, $event)\" />\r\n                                }\r\n                            </th>\r\n                        }\r\n                    </tr>\r\n                }\r\n            </thead>\r\n        </table>\r\n    </div>\r\n</div>\r\n\r\n@defer (when gridWidthSet()) {\r\n    @if (gridService.virtualScrollOptions().enabled) {\r\n        @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\r\n            <mona-grid-virtual-list\r\n                [columns]=\"gridService.visibleColumns()\"\r\n                [data]=\"gridService.viewRows()\"></mona-grid-virtual-list>\r\n        } @else {\r\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\r\n        }\r\n    } @else {\r\n        @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\r\n            <mona-grid-list\r\n                [columns]=\"gridService.visibleColumns()\"\r\n                [data]=\"gridService.viewPageRows()\"></mona-grid-list>\r\n            @if (footerVisible()) {\r\n                <div\r\n                    [class]=\"footerClass()\"\r\n                    [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\r\n                    #footerScrollElement\r\n                    data-grid-footer-scroll>\r\n                    <div>\r\n                        <table [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\r\n                            <colgroup>\r\n                                @for (_ of gridService.groupColumns(); track $index) {\r\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\r\n                                }\r\n                                @if (gridService.masterDetailTemplate()) {\r\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\r\n                                }\r\n                                @for (col of gridService.visibleColumns(); track $index) {\r\n                                    <col [style.width.px]=\"col.calculatedWidth\" />\r\n                                }\r\n                            </colgroup>\r\n                            <tfoot role=\"rowgroup\">\r\n                                <tr [class]=\"footerTableRowClass()\">\r\n                                    @for (_ of gridService.groupColumns(); track $index) {\r\n                                        <td\r\n                                            monaGridFooterTableCell\r\n                                            monaGridLockedCell\r\n                                            [lockedCellHeader]=\"true\"\r\n                                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\r\n                                            [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\r\n                                    }\r\n                                    @if (gridService.masterDetailTemplate()) {\r\n                                        <td\r\n                                            monaGridFooterTableCell\r\n                                            monaGridLockedCell\r\n                                            [lockedCellHeader]=\"true\"\r\n                                            [lockedStructuralOffset]=\"\r\n                                                gridService.groupColumns().length * gridService.groupColumnWidth\r\n                                            \"\r\n                                            [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\r\n                                    }\r\n                                    @for (column of gridService.visibleColumns(); track $index) {\r\n                                        <td\r\n                                            monaGridFooterTableCell\r\n                                            monaGridLockedCell\r\n                                            [column]=\"column\"\r\n                                            [lockedCellHeader]=\"true\"\r\n                                            [footerColumn]=\"column\">\r\n                                            <mona-grid-footer-cell\r\n                                                [column]=\"column\"\r\n                                                [columnIndex]=\"$index\"></mona-grid-footer-cell>\r\n                                        </td>\r\n                                    }\r\n                                </tr>\r\n                            </tfoot>\r\n                        </table>\r\n                    </div>\r\n                </div>\r\n            }\r\n            <mona-pager\r\n                class=\"border-0 border-t border-t-border rounded-tl-none rounded-tr-none\"\r\n                [skip]=\"gridService.paginationState().skip\"\r\n                [pageSize]=\"gridService.paginationState().take\"\r\n                [total]=\"gridService.viewRowCount()\"\r\n                [size]=\"'small'\"\r\n                [rounded]=\"rounded()\"\r\n                [pageInput]=\"true\"\r\n                [pageSizeValues]=\"pageSizeValues()\"\r\n                [responsive]=\"responsivePager()\"\r\n                (pageSizeChange)=\"onPageSizeChange($event)\"\r\n                (pageChange)=\"onPageChange($event)\"></mona-pager>\r\n        } @else {\r\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\r\n        }\r\n    }\r\n} @placeholder {\r\n    <mona-placeholder text=\"Loading...\"></mona-placeholder>\r\n}\r\n\r\n<ng-template #emptyGridTemplate>\r\n    <div [class]=\"noDataClass()\">\r\n        @if (noDataTemplate()) {\r\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n        } @else {\r\n            <mona-placeholder text=\"No data\"></mona-placeholder>\r\n        }\r\n    </div>\r\n</ng-template>\r\n" }]
+                        }, template: "@if (toolbarTemplate()) {\n    <div\n        class=\"flex min-h-10 items-center gap-2 border-b border-border p-2\"\n        #toolbarElement\n        (keydown)=\"onToolbarKeydown($event)\">\n        <ng-container\n            [ngTemplateOutlet]=\"toolbarTemplate() ?? null\"\n            [ngTemplateOutletContext]=\"toolbarContext()\"></ng-container>\n        <button monaButton size=\"small\" #columnsButton>Columns</button>\n        <mona-popup\n            [anchor]=\"columnsButton\"\n            [animation]=\"{ leave: [] }\"\n            [width]=\"'max-content'\"\n            [anchorConnectionPoint]=\"'bottomleft'\"\n            [popupConnectionPoint]=\"'topleft'\"\n            #popup>\n            <mona-grid-column-chooser\n                (apply)=\"popup.closePopup()\"\n                (cancel)=\"popup.closePopup()\"></mona-grid-column-chooser>\n        </mona-popup>\n    </div>\n}\n\n@if (groupable()) {\n    <div\n        [class]=\"groupPanelClass()\"\n        cdkDropList\n        #groupColumnList=\"cdkDropList\"\n        cdkDropListOrientation=\"horizontal\"\n        (cdkDropListEntered)=\"onColumnDragEnterForGrouping()\"\n        (cdkDropListExited)=\"onColumnDragExitForGrouping()\"\n        (cdkDropListDropped)=\"onColumnDropForGrouping($event)\">\n        @if (gridService.groupColumns().length !== 0) {\n            @for (groupColumn of gridService.groupColumns(); track $index) {\n                <mona-chip\n                    [removable]=\"true\"\n                    size=\"small\"\n                    [rounded]=\"rounded()\"\n                    (click)=\"onGroupingColumnSort(groupColumn)\"\n                    (remove)=\"onGroupingColumnRemove($event, groupColumn)\">\n                    @if (groupColumn.groupSortDirection === \"asc\") {\n                        <i class=\"ri-arrow-down-line\"></i>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <i class=\"ri-arrow-up-line\"></i>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ml-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <i class=\"ri-more-2-fill\"></i>\n                    </span>\n                    <mona-popup-menu size=\"small\" [target]=\"groupReorder\">\n                        <mona-popup-menu-item\n                            [disabled]=\"$first\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'prev')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-left-fill\"></i> Move as previous\n                            </ng-template>\n                        </mona-popup-menu-item>\n                        <mona-popup-menu-item\n                            [disabled]=\"$last\"\n                            (menuClick)=\"onGroupColumnReorder(groupColumn, 'next')\">\n                            <ng-template monaPopupMenuTextTemplate>\n                                <i class=\"ri-arrow-right-fill\"></i> Move as next\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">Drag a column header here to group</span>\n        }\n    </div>\n}\n<div [class]=\"headerClass()\" [style.margin-right.px]=\"headerMarginRight()\" #gridHeaderElement>\n    <div>\n        <table #headerTable [class]=\"headerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n            <colgroup>\n                @for (_ of gridService.groupColumns(); track $index) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @if (gridService.masterDetailTemplate()) {\n                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                }\n                @for (col of gridService.visibleColumns(); track $index) {\n                    <col [style.width.px]=\"col.calculatedWidth\" />\n                }\n            </colgroup>\n            <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                <tr\n                    cdkDropList\n                    [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                    (cdkDropListDropped)=\"onColumnDrop()\"\n                    [class]=\"headerTableRowClass()\">\n                    @for (_ of gridService.groupColumns(); track $index) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                    }\n                    @if (gridService.masterDetailTemplate()) {\n                        <th\n                            monaGridLockedCell\n                            [lockedCellHeader]=\"true\"\n                            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n                            scope=\"col\"\n                            class=\"border-r border-border\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                    }\n                    @for (column of gridService.visibleColumns(); track $index) {\n                        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n                        <th\n                            scope=\"col\"\n                            role=\"columnheader\"\n                            cdkDrag\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [lockedCellHeader]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'header'\"\n                            [columnId]=\"column.id\"\n                            [rowIndex]=\"-1\"\n                            [colIndex]=\"colIndex\"\n                            [section]=\"'header'\"\n                            [firstInRow]=\"colIndex === 0\"\n                            [lastInRow]=\"\n                                colIndex ===\n                                gridService.visibleColumns().length - (gridService.masterDetailTemplate() ? 0 : 1)\n                            \"\n                            (toggle)=\"onColumnSort(column)\"\n                            [cdkDragData]=\"column\"\n                            [cdkDragDisabled]=\"isColumnDragDisabled(column)\"\n                            [class]=\"headerTableCellClass()\"\n                            (mouseenter)=\"onColumnMouseEnter(column)\"\n                            (cdkDragEntered)=\"onColumnDragEnter($event)\"\n                            (cdkDragStarted)=\"onColumnDragStart($event)\"\n                            [style.min-width.px]=\"column.minWidth\"\n                            [style.width.px]=\"column.calculatedWidth\"\n                            [attr.colspan]=\"1\"\n                            [attr.aria-sort]=\"\n                                gridService.sortableOptions().enabled\n                                    ? (column.columnSortDirection | columnAriaSort)\n                                    : null\n                            \">\n                            <div [class]=\"headerTableColumnWrapClass()\">\n                                @if (column.headerTemplate) {\n                                    <ng-container\n                                        [ngTemplateOutlet]=\"column.headerTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                } @else if (column.titleTemplate) {\n                                    <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                } @else {\n                                    <span\n                                        [class]=\"headerTableColumnTitleClass()\"\n                                        (click)=\"onColumnSort(column)\"\n                                        [title]=\"column.title\"\n                                        >{{ column.title }}</span\n                                    >\n                                }\n\n                                <div [class]=\"columnActionsClass()\" [attr.data-column-actions]=\"true\">\n                                    @if (gridService.sortableOptions().showIndices && column.sortIndex !== null) {\n                                        <span>{{ column.sortIndex }}</span>\n                                    }\n                                    @if (column.columnSortDirection === \"asc\") {\n                                        <i class=\"ri-arrow-down-line\"></i>\n                                    } @else if (column.columnSortDirection === \"desc\") {\n                                        <i class=\"ri-arrow-up-line\"></i>\n                                    }\n                                    @if (filterMenuEnabled()) {\n                                        @if (column.kind === \"data\") {\n                                            <mona-grid-filter-menu\n                                                [column]=\"column\"\n                                                [type]=\"column.dataType\"\n                                                (apply)=\"onColumnFilter(column, $event)\"></mona-grid-filter-menu>\n                                        }\n                                    }\n                                </div>\n                            </div>\n                            @if (\n                                dropColumn() === column &&\n                                dragColumn() &&\n                                gridService.reorderableOptions().enabled &&\n                                !groupingInProgress()\n                            ) {\n                                <span [class]=\"columnDropHintClass()\"> </span>\n                            }\n                            @if (gridService.resizableOptions().enabled && !columnDragging()) {\n                                <div\n                                    monaGridColumnResizeHandler\n                                    [column]=\"column\"\n                                    [class]=\"columnResizerClass()\"\n                                    (resizeStart)=\"onColumnResizeStart()\"\n                                    (resizeEnd)=\"onColumnResizeEnd($event)\"></div>\n                            }\n                            <ng-template cdkDragPreview>\n                                <div [class]=\"columnDragPreviewClass()\">\n                                    <span>{{ column.title }}</span>\n                                </div>\n                            </ng-template>\n                            <ng-template cdkDragPlaceholder>\n                                @if (groupingInProgress()) {\n                                    <mona-chip\n                                        style=\"z-index: 10; pointer-events: none\"\n                                        [removable]=\"true\"\n                                        [rounded]=\"rounded()\"\n                                        >{{ column.title }}</mona-chip\n                                    >\n                                }\n                            </ng-template>\n                        </th>\n                        @if (columnDragging() && dragColumn() === column) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [class]=\"headerTableCellClass()\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"column.calculatedWidth\">\n                                <div [class]=\"headerTableColumnWrapClass()\">\n                                    @if (column.headerTemplate) {\n                                        <ng-container\n                                            [ngTemplateOutlet]=\"column.headerTemplate\"\n                                            [ngTemplateOutletContext]=\"{ $implicit: column, column }\"></ng-container>\n                                    } @else if (column.titleTemplate) {\n                                        <ng-container [ngTemplateOutlet]=\"column.titleTemplate\"></ng-container>\n                                    } @else {\n                                        <span\n                                            [class]=\"headerTableColumnTitleClass()\"\n                                            (click)=\"onColumnSort(column)\"\n                                            [title]=\"column.title\"\n                                            >{{ column.title }}</span\n                                        >\n                                    }\n                                </div>\n                            </th>\n                        }\n                    }\n                </tr>\n                @if (filterRowEnabled()) {\n                    <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></th>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <th\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                scope=\"col\"\n                                class=\"border-r border-border\"\n                                [style.width.px]=\"gridService.detailColumnWidth\"></th>\n                        }\n                        @for (column of gridService.visibleColumns(); track $index) {\n                            <th\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                scope=\"col\"\n                                class=\"border-r border-border overflow-hidden\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [attr.aria-label]=\"'Filter by ' + column.title\">\n                                @if (column.kind === \"data\" && column.field) {\n                                    <mona-grid-filter-row-cell\n                                        [column]=\"column\"\n                                        (apply)=\"onColumnFilter(column, $event)\" />\n                                }\n                            </th>\n                        }\n                    </tr>\n                }\n            </thead>\n        </table>\n    </div>\n</div>\n\n@defer (when gridWidthSet()) {\n    @if (gridService.virtualScrollOptions().enabled) {\n        @if (gridService.viewRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-virtual-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewRows()\"></mona-grid-virtual-list>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    } @else {\n        @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n            <mona-grid-list\n                [columns]=\"gridService.visibleColumns()\"\n                [data]=\"gridService.viewPageRows()\"></mona-grid-list>\n            @if (footerVisible()) {\n                <div\n                    [class]=\"footerClass()\"\n                    [style.margin-right.px]=\"gridService.scrollbarGutterWidth()\"\n                    #footerScrollElement\n                    data-grid-footer-scroll>\n                    <div>\n                        <table [class]=\"footerTableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n                            <colgroup>\n                                @for (_ of gridService.groupColumns(); track $index) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @if (gridService.masterDetailTemplate()) {\n                                    <col [style.width.px]=\"gridService.groupColumnWidth\" />\n                                }\n                                @for (col of gridService.visibleColumns(); track $index) {\n                                    <col [style.width.px]=\"col.calculatedWidth\" />\n                                }\n                            </colgroup>\n                            <tfoot role=\"rowgroup\">\n                                <tr [class]=\"footerTableRowClass()\">\n                                    @for (_ of gridService.groupColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                            [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                                    }\n                                    @if (gridService.masterDetailTemplate()) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [lockedCellHeader]=\"true\"\n                                            [lockedStructuralOffset]=\"\n                                                gridService.groupColumns().length * gridService.groupColumnWidth\n                                            \"\n                                            [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                                    }\n                                    @for (column of gridService.visibleColumns(); track $index) {\n                                        <td\n                                            monaGridFooterTableCell\n                                            monaGridLockedCell\n                                            [column]=\"column\"\n                                            [lockedCellHeader]=\"true\"\n                                            [footerColumn]=\"column\">\n                                            <mona-grid-footer-cell\n                                                [column]=\"column\"\n                                                [columnIndex]=\"$index\"></mona-grid-footer-cell>\n                                        </td>\n                                    }\n                                </tr>\n                            </tfoot>\n                        </table>\n                    </div>\n                </div>\n            }\n            <mona-pager\n                class=\"border-0 border-t border-t-border rounded-tl-none rounded-tr-none\"\n                [skip]=\"gridService.paginationState().skip\"\n                [pageSize]=\"gridService.paginationState().take\"\n                [total]=\"gridService.viewRowCount()\"\n                [size]=\"'small'\"\n                [rounded]=\"rounded()\"\n                [pageInput]=\"true\"\n                [pageSizeValues]=\"pageSizeValues()\"\n                [responsive]=\"responsivePager()\"\n                (pageSizeChange)=\"onPageSizeChange($event)\"\n                (pageChange)=\"onPageChange($event)\"></mona-pager>\n        } @else {\n            <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\"></ng-container>\n        }\n    }\n} @placeholder {\n    <mona-placeholder text=\"Loading...\"></mona-placeholder>\n}\n\n<ng-template #emptyGridTemplate>\n    <div [class]=\"noDataClass()\">\n        @if (noDataTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n        } @else {\n            <mona-placeholder text=\"No data\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n" }]
             }], ctorParameters: () => [], propDecorators: { footerScrollElement: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], gridDetailTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridDetailTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], gridHeaderElement: [{ type: i0.ViewChild, args: ["gridHeaderElement", { isSignal: true }] }], gridHeaderTableElement: [{ type: i0.ViewChild, args: ["headerTable", { isSignal: true }] }], groupColumnList: [{ type: i0.ViewChild, args: ["groupColumnList", { isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], toolbarElement: [{ type: i0.ViewChild, args: ["toolbarElement", { isSignal: true }] }], toolbarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GridToolbarTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeValues", required: false }] }], resizeMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeMethod", required: false }] }], responsivePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsivePager", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } }) });
 
 /*
@@ -5371,4 +5087,4 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
  */
 
 export { GridSortableDirective as $, GridCellTemplateDirective as A, GridColumnComponent as B, CellEditEvent as C, GridColumnTitleTemplateDirective as D, GridCommandColumnComponent as E, GridComponent as F, GridNavigationService as G, GridContextMenuDirective as H, GridDetailTemplateDirective as I, GridEditCommandDirective as J, GridEditEvent as K, GridEditTemplateDirective as L, GridEditableDirective as M, GridExportDirective as N, GridFilterableDirective as O, GridFooterTemplateDirective as P, GridGroupFooterTemplateDirective as Q, GridGroupableDirective as R, GridHeaderTemplateDirective as S, GridNoDataTemplateDirective as T, GridRemoveCommandDirective as U, GridRemoveEvent as V, GridReorderableDirective as W, GridResizableDirective as X, GridSaveCommandDirective as Y, GridSaveEvent as Z, GridSelectableDirective as _, GridRowFlattenerService as a, GridStatePersistenceDirective as a0, GridToolbarTemplateDirective as a1, GridVirtualScrollDirective as a2, RowEditEvent as a3, gridFooterTableRowThemeVariants as b, GridService as c, gridGroupRowThemeVariants as d, gridListTableThemeVariants as e, GridLogicalCellDirective as f, gridListBaseThemeVariants as g, GridLockedCellDirective as h, gridFooterThemeVariants as i, gridFooterTableThemeVariants as j, gridListTableCellThemeVariants as k, gridDetailContentCellThemeVariants as l, gridDetailIndentCellThemeVariants as m, gridDetailRowThemeVariants as n, gridListTableRowThemeVariants as o, gridCellEditorBaseThemeVariants as p, gridCellEditorInputThemeVariants as q, gridCellBaseThemeVariants as r, gridCellContainerThemeVariants as s, gridCellDirtyIndicatorThemeVariants as t, gridCellTextThemeVariants as u, gridFooterTableCellThemeVariants as v, GridAddCommandDirective as w, GridAddEvent as x, GridCancelCommandDirective as y, GridCancelEvent as z };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-C3eZIaJK.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BRZUd8cE.mjs.map