@nanahoshi/mona-ui 0.1.1 → 0.2.0

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

@@ -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: "borderLeft" }] : /* istanbul ignore next */ []));
+        this.borderRight = computed(() => {
+            if (!this.leftEdge()) {
+                return null;
+            }
+            return `1px solid var(--color-border)`;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "clipPath" }] : /* istanbul ignore next */ []));
+        ...(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(`
+const gridBaseThemeVariants = cva(`
         relative flex flex-col
         h-full overflow-hidden
-        bg-background border border-border
         text-foreground text-sm
+        bg-surface border border-border
     `, {
     variants: {
         rounded: {
@@ -3256,12 +3259,12 @@ const gridBaseVariants = cva(`
         }
     }
 });
-const gridCellBaseVariants = cva(`
+const gridCellBaseThemeVariants = cva(`
         absolute inset-0
         flex w-full
-        border-b border-b-border
+        shadow-[inset_0_-1px_0_0_var(--color-border-subtle)]
     `);
-const gridCellContainerVariants = cva(`
+const gridCellContainerThemeVariants = cva(`
         flex h-full w-full items-center
         flex-1 outline-none
         overflow-hidden
@@ -3276,40 +3279,41 @@ const gridCellContainerVariants = cva(`
         editing: false
     }
 });
-const gridCellDirtyIndicatorVariants = cva(`
+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(`
+const gridCellTextThemeVariants = cva(`
     truncate cursor-default select-none
 `);
-const gridColumnActionsVariants = cva(`
+const gridColumnActionsThemeVariants = cva(`
     flex items-center justify-center
     text-xs [&_i]:text-xs
 `);
-const gridColumnDragPreviewVariants = cva(`
+const gridColumnDragPreviewThemeVariants = cva(`
         flex items-center justify-center
-        bg-background! text-foreground!
-        border! border-border! rounded-md
-        shadow-sm! px-2! py-0.5!
+        px-2! py-0.5!
+        bg-surface-raised! text-foreground!
+        border! border-border! rounded-md shadow-(--shadow-overlay)!
     `);
-const gridColumnDropHintVariants = cva(`
+const gridColumnDropHintThemeVariants = cva(`
     absolute flex w-1 h-full bg-primary z-10! top-0 bottom-0
 `);
-const gridColumnResizerVariants = cva(`
+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(`
+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-header-background border-r border-r-border border-t border-t-border
+        bg-surface-muted border-r border-r-border-subtle border-t border-t-border-subtle
     `);
-const gridFooterTableVariants = cva(`
+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(`
+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
-        border-r border-r-border border-b border-b-border
-        bg-header-background font-medium
+        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(`
+const gridGroupPanelThemeVariants = cva(`
         flex items-center flex-wrap
         p-1 h-auto gap-1
-        border-b border-b-border
+        bg-surface-muted border-b border-b-border-subtle
     `);
-const gridGroupRowVariants = cva(`
-        w-full bg-header-background
-        border-r border-r-border
+const gridGroupRowThemeVariants = cva(`
         relative z-10
+        w-full
+        bg-surface-muted border-r border-r-border-subtle
     `);
-const gridHeaderVariants = cva(`
+const gridHeaderThemeVariants = cva(`
         flex flex-row grow-0 shrink-0 basis-auto
         overflow-hidden
-        bg-header-background border-r border-r-border
+        bg-surface-muted border-r border-r-border-subtle
     `);
-const gridHeaderTableVariants = cva(`
+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(`
+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
+        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-primary/40
+        focus:after:ring-1 focus:after:ring-inset focus:after:ring-focus-indicator/35
     `);
-const gridHeaderTableColumnWrapVariants = cva(`
+const gridHeaderTableColumnWrapThemeVariants = cva(`
         w-full h-full px-1
         flex items-center justify-between
         cursor-pointer overflow-hidden
     `);
-const gridHeaderTableColumnTitleVariants = cva(`
+const gridHeaderTableColumnTitleThemeVariants = cva(`
         flex-1 px-1 py-2 truncate
         font-medium
     `);
-const gridListBaseVariants = cva(`
+const gridListBaseThemeVariants = cva(`
         w-full h-full
-        border-t border-t-border
         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(`
+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
+                    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(`
+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-primary/40
+        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(`
+const gridNoDataThemeVariants = cva(`
         flex items-center justify-center h-full
-        border-t border-t-border
+        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()
             });
@@ -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(() => {
@@ -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 });
@@ -5319,16 +5035,16 @@ 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()) {\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-B2ETh-uI.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-list.component-C7WKhhig.mjs').then(m => m.GridListComponent), PagerComponent, /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-BrYpFMyF.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-DZk18LJC.mjs').then(m => m.GridFooterTableCellDirective), GridLockedCellDirective]] }); }
+                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-B2ETh-uI.mjs').then(m => m.GridFooterCellComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-list.component-C7WKhhig.mjs').then(m => m.GridListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-BrYpFMyF.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-DZk18LJC.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,
@@ -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-T9Bj98kl.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BRZUd8cE.mjs.map