@nanahoshi/mona-ui 0.1.0 → 0.1.1

package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-C3eZIaJK.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-T9Bj98kl.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';
@@ -3241,11 +3241,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 gridBaseVariants = cva(`
+        relative flex flex-col
+        h-full overflow-hidden
+        bg-background border border-border
+        text-foreground text-sm
     `, {
     variants: {
         rounded: {
@@ -3256,15 +3256,15 @@ const gridBaseVariants = cva(`
         }
     }
 });
-const gridCellBaseVariants = cva(`
-        absolute inset-0
-        flex w-full
-        border-b border-b-border
+const gridCellBaseVariants = cva(`
+        absolute inset-0
+        flex w-full
+        border-b border-b-border
     `);
-const gridCellContainerVariants = cva(`
-        flex h-full w-full items-center
-        flex-1 outline-none
-        overflow-hidden
+const gridCellContainerVariants = cva(`
+        flex h-full w-full items-center
+        flex-1 outline-none
+        overflow-hidden
     `, {
     variants: {
         editing: {
@@ -3276,38 +3276,38 @@ 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 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 gridCellEditorBaseVariants = cva(`
-    w-full h-full border border-solid border-primary/40 flex items-center
+const gridCellEditorBaseVariants = cva(`
+    w-full h-full border border-solid border-primary/40 flex items-center
 `);
-const gridCellEditorInputVariants = cva(`
-    w-full h-full border-transparent
-    data-[expanded='true']:border-primary
-    data-[expanded='true']:focus-within:border-primary/40
+const gridCellEditorInputVariants = cva(`
+    w-full h-full border-transparent
+    data-[expanded='true']:border-primary
+    data-[expanded='true']:focus-within:border-primary/40
 `);
-const gridCellTextVariants = cva(`
-    truncate cursor-default select-none
+const gridCellTextVariants = cva(`
+    truncate cursor-default select-none
 `);
-const gridColumnActionsVariants = cva(`
-    flex items-center justify-center
-    text-xs [&_i]:text-xs
+const gridColumnActionsVariants = 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 gridColumnDragPreviewVariants = cva(`
+        flex items-center justify-center
+        bg-background! text-foreground!
+        border! border-border! rounded-md
+        shadow-sm! px-2! py-0.5!
     `);
-const gridColumnDropHintVariants = cva(`
-    absolute flex w-1 h-full bg-primary z-10! top-0 bottom-0
+const gridColumnDropHintVariants = 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 gridColumnResizerVariants = 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`, {
     variants: {
@@ -3317,8 +3317,8 @@ const gridDetailContentCellVariants = cva(`border-b border-b-border`, {
         }
     }
 });
-const gridDetailIndentCellVariants = cva(`
-        border-r border-r-border border-b border-b-border
+const gridDetailIndentCellVariants = cva(`
+        border-r border-r-border border-b border-b-border
     `, {
     variants: {
         nextIsGroup: {
@@ -3327,67 +3327,67 @@ const gridDetailIndentCellVariants = cva(`
         }
     }
 });
-const gridDetailRowVariants = cva(`
-    border-b border-b-border
+const gridDetailRowVariants = cva(`
+    border-b border-b-border
 `);
 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 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 gridFooterTableVariants = cva(`
-        border-separate border-spacing-0 table-fixed
+const gridFooterTableVariants = 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 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 gridGroupPanelPlaceholderVariants = cva(`
-    truncate opacity-70
+const gridGroupPanelPlaceholderVariants = cva(`
+    truncate opacity-70
 `);
-const gridGroupPanelVariants = cva(`
-        flex items-center flex-wrap
-        p-1 h-auto gap-1
-        border-b border-b-border
+const gridGroupPanelVariants = cva(`
+        flex items-center flex-wrap
+        p-1 h-auto gap-1
+        border-b border-b-border
     `);
-const gridGroupRowVariants = cva(`
-        w-full bg-header-background
-        border-r border-r-border
-        relative z-10
+const gridGroupRowVariants = cva(`
+        w-full bg-header-background
+        border-r border-r-border
+        relative z-10
     `);
-const gridHeaderVariants = cva(`
-        flex flex-row grow-0 shrink-0 basis-auto
-        overflow-hidden
-        bg-header-background border-r border-r-border
+const gridHeaderVariants = cva(`
+        flex flex-row grow-0 shrink-0 basis-auto
+        overflow-hidden
+        bg-header-background border-r border-r-border
     `);
-const gridHeaderTableVariants = cva(`
-        border-separate border-spacing-0 table-fixed
+const gridHeaderTableVariants = 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 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 gridHeaderTableColumnWrapVariants = cva(`
-        w-full h-full px-1
-        flex items-center justify-between
-        cursor-pointer overflow-hidden
+const gridHeaderTableColumnWrapVariants = 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 gridHeaderTableColumnTitleVariants = 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 gridListBaseVariants = cva(`
+        w-full h-full
+        border-t border-t-border
+        outline-none
     `, {
     variants: {
         virtual: {
@@ -3396,28 +3396,28 @@ const gridListBaseVariants = cva(`
         }
     }
 });
-const gridListTableVariants = cva(`
-        border-separate border-spacing-0 w-full table-fixed
+const gridListTableVariants = cva(`
+        border-separate border-spacing-0 w-full table-fixed
     `);
 const gridListTableRowVariants = cva(``, {
     variants: {
         selected: {
-            true: `
-                    ${gridRowHeightClass}
-                    bg-primary text-primary-foreground
+            true: `
+                    ${gridRowHeightClass}
+                    bg-primary text-primary-foreground
                 `,
             false: `${gridRowHeightClass} odd:bg-background even:bg-background-dark `
         }
     }
 });
-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 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
     `, {
     variants: {
         groupHeader: {
@@ -3511,9 +3511,9 @@ const gridListTableCellVariants = cva(`
         }
     ]
 });
-const gridNoDataVariants = cva(`
-        flex items-center justify-center h-full
-        border-t border-t-border
+const gridNoDataVariants = cva(`
+        flex items-center justify-center h-full
+        border-t border-t-border
     `);
 
 const gridBaseThemeVariants = (theme) => {
@@ -4325,7 +4325,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 +4336,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 +4423,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 {
@@ -4664,7 +4664,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 +4682,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]";
@@ -5318,17 +5318,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-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]] }); }
 }
 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-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: [{
                 type: Component,
                 args: [{ selector: "mona-grid", changeDetection: ChangeDetectionStrategy.OnPush, providers: [GridService, GridNavigationService, GridRowFlattenerService, FilterService], imports: [
                             CdkDropList,
@@ -5359,7 +5359,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 +5371,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-T9Bj98kl.mjs.map