@nanahoshi/mona-ui 0.24.1 → 0.24.4

package/fesm2022/{nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-9FtfCutf.mjs → nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-D4lUDbfx.mjs}

@@ -7,7 +7,7 @@ import { form } from '@angular/forms/signals';
 import { Dictionary, ImmutableList, ImmutableDictionary, ImmutableSet, KeyValuePair, select, sequenceEqual, orderBy, any } from '@mirei/ts-collections';
 import { formatNumber, MonaI18nService, injectComponentDirection } from '@nanahoshi/mona-ui/i18n';
 import { Query } from '@nanahoshi/mona-ui/query';
-import { Subject, BehaviorSubject, filter, startWith, pairwise, map, skip, fromEvent, take, debounceTime } from 'rxjs';
+import { Subject, BehaviorSubject, filter, startWith, pairwise, map, skip, fromEvent, debounceTime } from 'rxjs';
 import { v4 } from 'uuid';
 import { ContextMenuItemComponent } from '@nanahoshi/mona-ui/contextmenu';
 import { CdkDropList, CdkDrag, CdkDragPreview, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
@@ -4690,7 +4690,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\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            {{ messages().columnsSelected(selectedColumnFields().length) }}\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()\">{{ messages().apply }}</button>\n            <button class=\"flex-1\" monaButton [size]=\"'small'\" (click)=\"onCancelClick()\">{{ messages().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", "items", "listClass", "listItemClass", "listItemStyle", "listStyle", "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: ["activeDescendant", "ariaLabel", "controls", "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", "type", "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            {{ messages().columnsSelected(selectedColumnFields().length) }}\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()\">{{ messages().apply }}</button>\n            <button class=\"flex-1\" monaButton [size]=\"'small'\" (click)=\"onCancelClick()\">{{ messages().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", "items", "listClass", "listItemClass", "listItemStyle", "listStyle", "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: ["activeDescendant", "ariaLabel", "controls", "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", "type", "class"], outputs: ["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,
@@ -4710,6 +4710,7 @@ class GridFilterMenuComponent {
         this.#gridService = inject(GridService);
         this.#hostElementRef = inject((ElementRef));
         this.#popupService = inject(PopupService);
+        this.messages = this.#gridService.messages;
         this.apply = output();
         this.column = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
@@ -4725,7 +4726,6 @@ class GridFilterMenuComponent {
         this.#popupRef = this.#popupService.create({
             anchor: this.#hostElementRef.nativeElement,
             content: FilterMenuComponent,
-            closeOnBackdropClick: false,
             hasBackdrop: true,
             preventClose: event => {
                 if (event.originalEvent instanceof MouseEvent) {
@@ -4738,10 +4738,6 @@ class GridFilterMenuComponent {
             },
             providers: [{ provide: FilterService, useValue: this.#filterService }]
         });
-        this.#popupRef.overlayRef
-            .backdropClick()
-            .pipe(take(1))
-            .subscribe(() => this.#popupRef?.close());
         const filterState = this.#gridService.appliedFilters().get(this.column().field);
         const componentRef = this.#popupRef.component;
         componentRef.instance.type.set(this.type());
@@ -4788,11 +4784,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\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", "type", "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    [attr.aria-label]=\"messages().filterByColumn(column().title)\"\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", "type", "class"], outputs: ["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\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" }]
+            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    [attr.aria-label]=\"messages().filterByColumn(column().title)\"\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 {
@@ -5029,7 +5025,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;\n\n@switch (dataType) {\n    @case (\"string\") {\n        <div class=\"flex gap-0.5 w-full\">\n            <mona-text-box\n                size=\"small\"\n                [inputAttributes]=\"{ 'aria-label': messages().filterByColumn(column().title) }\"\n                [ngModel]=\"stringValue()\"\n                (ngModelChange)=\"onStringChange($event)\"\n                [placeholder]=\"messages().filterPlaceholder\" />\n            <button\n                monaButton\n                look=\"ghost\"\n                [iconOnly]=\"true\"\n                [size]=\"'small'\"\n                #filterButton\n                [attr.aria-label]=\"messages().filterByColumn(column().title)\">\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                [aria-label]=\"messages().filterByColumn(column().title)\"\n                [ngModel]=\"numberValue()\"\n                (ngModelChange)=\"onNumberChange($event)\"\n                [style.width.%]=\"100\" />\n\n            <button\n                monaButton\n                look=\"ghost\"\n                [iconOnly]=\"true\"\n                [size]=\"'small'\"\n                #filterButton\n                [attr.aria-label]=\"messages().filterByColumn(column().title)\">\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\n                monaButton\n                look=\"ghost\"\n                [iconOnly]=\"true\"\n                [size]=\"'small'\"\n                #filterButton\n                [attr.aria-label]=\"messages().filterByColumn(column().title)\">\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]=\"messages().all\"\n                [aria-label]=\"messages().filterByColumn(column().title)\"\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\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"'small'\"\n            (click)=\"onClear()\"\n            [attr.aria-label]=\"filterMessages().clear\">\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: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["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", "invalid", "itemDisabled", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "value", "valueField", "valuePrimitive"], 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", "type", "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", "class"], 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                [inputAttributes]=\"{ 'aria-label': messages().filterByColumn(column().title) }\"\n                [ngModel]=\"stringValue()\"\n                (ngModelChange)=\"onStringChange($event)\"\n                [placeholder]=\"messages().filterPlaceholder\" />\n            <button\n                monaButton\n                look=\"ghost\"\n                [iconOnly]=\"true\"\n                [size]=\"'small'\"\n                #filterButton\n                [attr.aria-label]=\"messages().filterByColumn(column().title)\">\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                [aria-label]=\"messages().filterByColumn(column().title)\"\n                [ngModel]=\"numberValue()\"\n                (ngModelChange)=\"onNumberChange($event)\"\n                [style.width.%]=\"100\" />\n\n            <button\n                monaButton\n                look=\"ghost\"\n                [iconOnly]=\"true\"\n                [size]=\"'small'\"\n                #filterButton\n                [attr.aria-label]=\"messages().filterByColumn(column().title)\">\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\n                monaButton\n                look=\"ghost\"\n                [iconOnly]=\"true\"\n                [size]=\"'small'\"\n                #filterButton\n                [attr.aria-label]=\"messages().filterByColumn(column().title)\">\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]=\"messages().all\"\n                [aria-label]=\"messages().filterByColumn(column().title)\"\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\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"'small'\"\n            (click)=\"onClear()\"\n            [attr.aria-label]=\"filterMessages().clear\">\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: ["aria-describedby", "aria-label", "aria-labelledby", "clearButton", "disabled", "inputAttributes", "inputClass", "inputId", "inputStyle", "invalid", "maxLength", "minLength", "name", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["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", "invalid", "itemDisabled", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "value", "valueField", "valuePrimitive"], 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", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], 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,
@@ -5748,17 +5744,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 }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "baseClass()", "attr.data-uid": "uid", "attr.aria-busy": "gridService.serverLoading() || null" } }, providers: [GridService, GridNavigationService, FilterService], queries: [{ propertyName: "columnDefinitions", predicate: GRID_COLUMN_DEFINITION, isSignal: true }, { 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>{{ messages().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                        <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ms-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <svg lucideEllipsisVertical [size]=\"16\" aria-hidden=\"true\"></svg>\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                                <svg lucideArrowLeft [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsPrevious }}\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                                <svg lucideArrowRight [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsNext }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">{{ messages().dragColumnHeaderToGroup }}</span>\n        }\n    </div>\n}\n<div class=\"flex flex-col flex-1 min-h-0\" [attr.role]=\"groupable() ? 'treegrid' : 'grid'\">\n    <div [class]=\"headerClass()\" [style.margin-inline-end.px]=\"headerMarginInlineEnd()\" #gridHeaderElement>\n        <div>\n            <table\n                role=\"presentation\"\n                #headerTable\n                [class]=\"headerTableClass()\"\n                [style.width.px]=\"gridService.tableWidth()\">\n                <colgroup monaGridColgroup></colgroup>\n                <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                    <tr\n                        role=\"row\"\n                        cdkDropList\n                        [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                        (cdkDropListDropped)=\"onColumnDrop()\"\n                        [class]=\"headerTableRowClass()\">\n                        @for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n                            @if (layoutColumn.kind === \"column\") {\n                                @let column = layoutColumn.column;\n                                @let columnSortable =\n                                    gridService.sortableOptions().enabled &&\n                                    column.kind === \"data\" &&\n                                    column.sortable &&\n                                    column.field !== \"\";\n                                <th\n                                    scope=\"col\"\n                                    role=\"columnheader\"\n                                    cdkDrag\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'header'\"\n                                    [columnId]=\"column.id\"\n                                    [rowIndex]=\"-1\"\n                                    [colIndex]=\"layoutColumn.logicalIndex\"\n                                    [section]=\"'header'\"\n                                    [firstInRow]=\"layoutColumn.firstInRow\"\n                                    [lastInRow]=\"layoutColumn.lastInRow\"\n                                    (toggleExpand)=\"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.aria-sort]=\"\n                                        columnSortable ? (column.columnSortDirection | columnAriaSort) : null\n                                    \">\n                                    <div\n                                        [class]=\"headerTableColumnWrapClass()\"\n                                        [style.cursor]=\"columnSortable ? 'pointer' : 'default'\">\n                                        @if (column.headerTemplate) {\n                                            <ng-container\n                                                [ngTemplateOutlet]=\"column.headerTemplate\"\n                                                [ngTemplateOutletContext]=\"{\n                                                    $implicit: column,\n                                                    column\n                                                }\"></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 (\n                                                gridService.sortableOptions().enabled &&\n                                                column.columnSortDirection !== null\n                                            ) {\n                                                <div class=\"inline-flex shrink-0 items-center gap-0.5\">\n                                                    @if (column.columnSortDirection === \"asc\") {\n                                                        <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                    } @else {\n                                                        <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                    }\n                                                    @if (\n                                                        gridService.sortableOptions().mode === \"multiple\" &&\n                                                        gridService.sortableOptions().showIndices &&\n                                                        column.sortIndex !== null\n                                                    ) {\n                                                        <span class=\"tabular-nums\">{{ column.sortIndex }}</span>\n                                                    }\n                                                </div>\n                                            }\n                                            @if (filterMenuEnabled()) {\n                                                @if (column.kind === \"data\" && column.filterable) {\n                                                    <mona-grid-filter-menu\n                                                        [column]=\"column\"\n                                                        [type]=\"column.dataType\"\n                                                        (apply)=\"\n                                                            onColumnFilter(column, $event)\n                                                        \"></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]=\"layoutColumn.key\"\n                                        [lockedCellHeader]=\"true\"\n                                        [class]=\"headerTableCellClass()\"\n                                        [style.min-width.px]=\"column.minWidth\"\n                                        [style.width.px]=\"column.calculatedWidth\">\n                                        <div [class]=\"headerTableColumnWrapClass()\">\n                                            @if (column.headerTemplate) {\n                                                <ng-container\n                                                    [ngTemplateOutlet]=\"column.headerTemplate\"\n                                                    [ngTemplateOutletContext]=\"{\n                                                        $implicit: column,\n                                                        column\n                                                    }\"></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                            } @else if (layoutColumn.kind === \"reorder\") {\n                                <th\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'command'\"\n                                    [columnId]=\"'$rowReorder'\"\n                                    [rowIndex]=\"-1\"\n                                    [colIndex]=\"layoutColumn.logicalIndex\"\n                                    [section]=\"'header'\"\n                                    [firstInRow]=\"layoutColumn.firstInRow\"\n                                    [lastInRow]=\"layoutColumn.lastInRow\"\n                                    scope=\"col\"\n                                    [attr.aria-label]=\"gridService.messages().rowReorder\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"layoutColumn.width\"></th>\n                            } @else if (layoutColumn.kind === \"selection\") {\n                                <th\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'command'\"\n                                    [columnId]=\"'$selection'\"\n                                    [rowIndex]=\"-1\"\n                                    [colIndex]=\"layoutColumn.logicalIndex\"\n                                    [section]=\"'header'\"\n                                    [firstInRow]=\"layoutColumn.firstInRow\"\n                                    [lastInRow]=\"layoutColumn.lastInRow\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"layoutColumn.width\">\n                                    @if (\n                                        gridService.selectableOptions().mode === \"multiple\" &&\n                                        gridService.selectableOptions().showSelectAll !== false\n                                    ) {\n                                        <mona-grid-select-all-checkbox />\n                                    }\n                                </th>\n                            } @else {\n                                <th\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"layoutColumn.width\"></th>\n                            }\n                        }\n                    </tr>\n                    @if (filterRowEnabled()) {\n                        <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                            @for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n                                @if (layoutColumn.kind === \"column\") {\n                                    @let column = layoutColumn.column;\n                                    <th\n                                        [monaGridLockedCell]=\"layoutColumn.key\"\n                                        [lockedCellHeader]=\"true\"\n                                        scope=\"col\"\n                                        class=\"border-e border-border overflow-hidden\"\n                                        [style.width.px]=\"layoutColumn.width\"\n                                        [attr.aria-label]=\"messages().filterByColumn(column.title)\">\n                                        @if (column.kind === \"data\" && column.field && column.filterable) {\n                                            <mona-grid-filter-row-cell\n                                                [column]=\"column\"\n                                                (apply)=\"onColumnFilter(column, $event)\" />\n                                        }\n                                    </th>\n                                } @else {\n                                    <th\n                                        [monaGridLockedCell]=\"layoutColumn.key\"\n                                        [lockedCellHeader]=\"true\"\n                                        scope=\"col\"\n                                        class=\"border-e border-border\"\n                                        [style.width.px]=\"layoutColumn.width\"></th>\n                                }\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 [data]=\"gridService.viewRows()\" />\n            } @else {\n                <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n            }\n        } @else {\n            <div class=\"relative flex-1 min-h-0\" data-grid-body-region>\n                @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                    <mona-grid-list [data]=\"gridService.viewPageRows()\" />\n                } @else if (!gridService.serverLoading()) {\n                    <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n                }\n                @if (gridService.serverLoading()) {\n                    <div class=\"absolute inset-0 z-20 flex items-center justify-center bg-surface/60\" data-grid-loading>\n                        <mona-spinner size=\"large\" />\n                    </div>\n                }\n            </div>\n            @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                @if (footerVisible()) {\n                    <div\n                        [class]=\"footerClass()\"\n                        [style.margin-inline-end.px]=\"gridService.scrollbarGutterWidth()\"\n                        #footerScrollElement\n                        data-grid-footer-scroll>\n                        <div>\n                            <table\n                                role=\"presentation\"\n                                [class]=\"footerTableClass()\"\n                                [style.width.px]=\"gridService.tableWidth()\">\n                                <colgroup monaGridColgroup></colgroup>\n                                <tfoot role=\"rowgroup\">\n                                    <tr monaGridFooterRow></tr>\n                                </tfoot>\n                            </table>\n                        </div>\n                    </div>\n                }\n            }\n        }\n    } @placeholder {\n        <mona-placeholder text=\"Loading...\" />\n    }\n</div>\n@if (!gridService.virtualScrollOptions().enabled) {\n    @if (gridService.serverBindingEnabled() || gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n        <mona-pager\n            class=\"border-0 border-t border-t-border rounded-ss-none rounded-se-none\"\n            [skip]=\"gridService.paginationState().skip\"\n            [pageSize]=\"gridService.paginationState().take\"\n            [total]=\"gridService.pagerTotal()\"\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    }\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]=\"gridService.messages().noData\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "component", type: LucideArrowLeft, selector: "svg[lucideArrowLeft]" }, { kind: "component", type: LucideArrowRight, selector: "svg[lucideArrowRight]" }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideEllipsisVertical, selector: "svg[lucideEllipsisVertical], svg[lucideMoreVertical]" }, { 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: GridColgroupComponent, selector: "colgroup[monaGridColgroup]" }, { 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: "component", type: PagerComponent, selector: "mona-pager", inputs: ["firstLast", "navigable", "pageInput", "pageSize", "pageSizeValues", "previousNext", "responsive", "rounded", "showInfo", "size", "skip", "total", "type", "class", "visiblePages"], outputs: ["pageChange", "pageSizeChange"] }, { 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", "class"], 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", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggleExpand"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["monaGridLockedCell", "lockedCellHeader"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "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: "component", type: GridSelectAllCheckboxComponent, selector: "mona-grid-select-all-checkbox" }, { kind: "pipe", type: ColumnAriaSortPipe, name: "columnAriaSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet,
+    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 }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "baseClass()", "attr.data-uid": "uid", "attr.aria-busy": "gridService.serverLoading() || null" } }, providers: [GridService, GridNavigationService, FilterService], queries: [{ propertyName: "columnDefinitions", predicate: GRID_COLUMN_DEFINITION, isSignal: true }, { 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>{{ messages().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                        <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                    } @else if (groupColumn.groupSortDirection === \"desc\") {\n                        <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                    }\n                    <span>{{ groupColumn.title }}</span>\n                    <span class=\"ms-2\" (click)=\"$event.stopPropagation()\" #groupReorder>\n                        <svg lucideEllipsisVertical [size]=\"16\" aria-hidden=\"true\"></svg>\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                                <svg lucideArrowLeft [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsPrevious }}\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                                <svg lucideArrowRight [size]=\"16\" aria-hidden=\"true\" class=\"rtl:rotate-180\"></svg>\n                                {{ messages().moveAsNext }}\n                            </ng-template>\n                        </mona-popup-menu-item>\n                    </mona-popup-menu>\n                </mona-chip>\n            }\n        } @else if (groupPanelPlaceholderVisible()) {\n            <span [class]=\"groupPanelPlaceholderClass()\">{{ messages().dragColumnHeaderToGroup }}</span>\n        }\n    </div>\n}\n<div class=\"flex flex-col flex-1 min-h-0\" [attr.role]=\"groupable() ? 'treegrid' : 'grid'\">\n    <div [class]=\"headerClass()\" [style.margin-inline-end.px]=\"headerMarginInlineEnd()\" #gridHeaderElement>\n        <div>\n            <table\n                role=\"presentation\"\n                #headerTable\n                [class]=\"headerTableClass()\"\n                [style.width.px]=\"gridService.tableWidth()\">\n                <colgroup monaGridColgroup></colgroup>\n                <thead role=\"rowgroup\" [style.visibility]=\"!gridWidthSet() ? 'hidden' : undefined\">\n                    <tr\n                        role=\"row\"\n                        cdkDropList\n                        [cdkDropListConnectedTo]=\"groupable() ? [groupColumnList()!] : []\"\n                        (cdkDropListDropped)=\"onColumnDrop()\"\n                        [class]=\"headerTableRowClass()\">\n                        @for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n                            @if (layoutColumn.kind === \"column\") {\n                                @let column = layoutColumn.column;\n                                @let columnSortable =\n                                    gridService.sortableOptions().enabled &&\n                                    column.kind === \"data\" &&\n                                    column.sortable &&\n                                    column.field !== \"\";\n                                <th\n                                    scope=\"col\"\n                                    role=\"columnheader\"\n                                    cdkDrag\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'header'\"\n                                    [columnId]=\"column.id\"\n                                    [rowIndex]=\"-1\"\n                                    [colIndex]=\"layoutColumn.logicalIndex\"\n                                    [section]=\"'header'\"\n                                    [firstInRow]=\"layoutColumn.firstInRow\"\n                                    [lastInRow]=\"layoutColumn.lastInRow\"\n                                    (toggleExpand)=\"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.aria-sort]=\"\n                                        columnSortable ? (column.columnSortDirection | columnAriaSort) : null\n                                    \">\n                                    <div\n                                        [class]=\"headerTableColumnWrapClass()\"\n                                        [style.cursor]=\"columnSortable ? 'pointer' : 'default'\">\n                                        @if (column.headerTemplate) {\n                                            <ng-container\n                                                [ngTemplateOutlet]=\"column.headerTemplate\"\n                                                [ngTemplateOutletContext]=\"{\n                                                    $implicit: column,\n                                                    column\n                                                }\"></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 (\n                                                gridService.sortableOptions().enabled &&\n                                                column.columnSortDirection !== null\n                                            ) {\n                                                <div class=\"inline-flex shrink-0 items-center gap-0.5\">\n                                                    @if (column.columnSortDirection === \"asc\") {\n                                                        <svg lucideArrowUp [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                    } @else {\n                                                        <svg lucideArrowDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                                                    }\n                                                    @if (\n                                                        gridService.sortableOptions().mode === \"multiple\" &&\n                                                        gridService.sortableOptions().showIndices &&\n                                                        column.sortIndex !== null\n                                                    ) {\n                                                        <span class=\"tabular-nums\">{{ column.sortIndex }}</span>\n                                                    }\n                                                </div>\n                                            }\n                                            @if (filterMenuEnabled()) {\n                                                @if (column.kind === \"data\" && column.filterable) {\n                                                    <mona-grid-filter-menu\n                                                        [column]=\"column\"\n                                                        [type]=\"column.dataType\"\n                                                        (apply)=\"\n                                                            onColumnFilter(column, $event)\n                                                        \"></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]=\"layoutColumn.key\"\n                                        [lockedCellHeader]=\"true\"\n                                        [class]=\"headerTableCellClass()\"\n                                        [style.min-width.px]=\"column.minWidth\"\n                                        [style.width.px]=\"column.calculatedWidth\">\n                                        <div [class]=\"headerTableColumnWrapClass()\">\n                                            @if (column.headerTemplate) {\n                                                <ng-container\n                                                    [ngTemplateOutlet]=\"column.headerTemplate\"\n                                                    [ngTemplateOutletContext]=\"{\n                                                        $implicit: column,\n                                                        column\n                                                    }\"></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                            } @else if (layoutColumn.kind === \"reorder\") {\n                                <th\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'command'\"\n                                    [columnId]=\"'$rowReorder'\"\n                                    [rowIndex]=\"-1\"\n                                    [colIndex]=\"layoutColumn.logicalIndex\"\n                                    [section]=\"'header'\"\n                                    [firstInRow]=\"layoutColumn.firstInRow\"\n                                    [lastInRow]=\"layoutColumn.lastInRow\"\n                                    scope=\"col\"\n                                    [attr.aria-label]=\"gridService.messages().rowReorder\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"layoutColumn.width\"></th>\n                            } @else if (layoutColumn.kind === \"selection\") {\n                                <th\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    monaGridLogicalCell\n                                    [cellKind]=\"'command'\"\n                                    [columnId]=\"'$selection'\"\n                                    [rowIndex]=\"-1\"\n                                    [colIndex]=\"layoutColumn.logicalIndex\"\n                                    [section]=\"'header'\"\n                                    [firstInRow]=\"layoutColumn.firstInRow\"\n                                    [lastInRow]=\"layoutColumn.lastInRow\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"layoutColumn.width\">\n                                    @if (\n                                        gridService.selectableOptions().mode === \"multiple\" &&\n                                        gridService.selectableOptions().showSelectAll !== false\n                                    ) {\n                                        <mona-grid-select-all-checkbox />\n                                    }\n                                </th>\n                            } @else {\n                                <th\n                                    [monaGridLockedCell]=\"layoutColumn.key\"\n                                    [lockedCellHeader]=\"true\"\n                                    scope=\"col\"\n                                    class=\"border-e border-border\"\n                                    [style.width.px]=\"layoutColumn.width\"></th>\n                            }\n                        }\n                    </tr>\n                    @if (filterRowEnabled()) {\n                        <tr role=\"row\" [class]=\"headerTableRowClass()\">\n                            @for (layoutColumn of gridService.layout(); track layoutColumn.key) {\n                                @if (layoutColumn.kind === \"column\") {\n                                    @let column = layoutColumn.column;\n                                    <th\n                                        [monaGridLockedCell]=\"layoutColumn.key\"\n                                        [lockedCellHeader]=\"true\"\n                                        scope=\"col\"\n                                        class=\"border-e border-border overflow-hidden\"\n                                        [style.width.px]=\"layoutColumn.width\"\n                                        [attr.aria-label]=\"messages().filterByColumn(column.title)\">\n                                        @if (column.kind === \"data\" && column.field && column.filterable) {\n                                            <mona-grid-filter-row-cell\n                                                [column]=\"column\"\n                                                (apply)=\"onColumnFilter(column, $event)\" />\n                                        }\n                                    </th>\n                                } @else {\n                                    <th\n                                        [monaGridLockedCell]=\"layoutColumn.key\"\n                                        [lockedCellHeader]=\"true\"\n                                        scope=\"col\"\n                                        class=\"border-e border-border\"\n                                        [style.width.px]=\"layoutColumn.width\"></th>\n                                }\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 [data]=\"gridService.viewRows()\" />\n            } @else {\n                <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n            }\n        } @else {\n            <div class=\"relative flex-1 min-h-0\" data-grid-body-region>\n                @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                    <mona-grid-list [data]=\"gridService.viewPageRows()\" />\n                } @else if (!gridService.serverLoading()) {\n                    <ng-container [ngTemplateOutlet]=\"emptyGridTemplate\" />\n                }\n                @if (gridService.serverLoading()) {\n                    <div class=\"absolute inset-0 z-20 flex items-center justify-center bg-surface/60\" data-grid-loading>\n                        <mona-spinner size=\"large\" />\n                    </div>\n                }\n            </div>\n            @if (gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n                @if (footerVisible()) {\n                    <div\n                        [class]=\"footerClass()\"\n                        [style.margin-inline-end.px]=\"gridService.scrollbarGutterWidth()\"\n                        #footerScrollElement\n                        data-grid-footer-scroll>\n                        <div>\n                            <table\n                                role=\"presentation\"\n                                [class]=\"footerTableClass()\"\n                                [style.width.px]=\"gridService.tableWidth()\">\n                                <colgroup monaGridColgroup></colgroup>\n                                <tfoot role=\"rowgroup\">\n                                    <tr monaGridFooterRow></tr>\n                                </tfoot>\n                            </table>\n                        </div>\n                    </div>\n                }\n            }\n        }\n    } @placeholder {\n        <mona-placeholder text=\"Loading...\" />\n    }\n</div>\n@if (!gridService.virtualScrollOptions().enabled) {\n    @if (gridService.serverBindingEnabled() || gridService.viewPageRows().length !== 0 || gridService.addRowVisible()) {\n        <mona-pager\n            class=\"border-0 border-t border-t-border rounded-ss-none rounded-se-none\"\n            [skip]=\"gridService.paginationState().skip\"\n            [pageSize]=\"gridService.paginationState().take\"\n            [total]=\"gridService.pagerTotal()\"\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    }\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]=\"gridService.messages().noData\"></mona-placeholder>\n        }\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideArrowDown, selector: "svg[lucideArrowDown]" }, { kind: "component", type: LucideArrowLeft, selector: "svg[lucideArrowLeft]" }, { kind: "component", type: LucideArrowRight, selector: "svg[lucideArrowRight]" }, { kind: "component", type: LucideArrowUp, selector: "svg[lucideArrowUp]" }, { kind: "component", type: LucideEllipsisVertical, selector: "svg[lucideEllipsisVertical], svg[lucideMoreVertical]" }, { 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: GridColgroupComponent, selector: "colgroup[monaGridColgroup]" }, { 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: "component", type: PagerComponent, selector: "mona-pager", inputs: ["firstLast", "navigable", "pageInput", "pageSize", "pageSizeValues", "previousNext", "responsive", "rounded", "showInfo", "size", "skip", "total", "type", "class", "visiblePages"], outputs: ["pageChange", "pageSizeChange"] }, { 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", "class"], 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", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggleExpand"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["monaGridLockedCell", "lockedCellHeader"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: PopupComponent, selector: "mona-popup", inputs: ["anchor", "anchorConnectionPoint", "animation", "backdropClass", "closeOnBackdropClick", "closeOnEscape", "closeOnMouseLeave", "closeOnOutsideClick", "closeOnScroll", "data", "hasBackdrop", "height", "maxHeight", "maxWidth", "minHeight", "minWidth", "offset", "popupClass", "popupConnectionPoint", "popupWrapperClass", "positionStrategy", "positions", "preventClose", "providers", "restoreFocus", "trigger", "width", "withPush", "withScrollTracking"], outputs: ["close", "open"] }, { kind: "component", type: GridColumnChooserComponent, selector: "mona-grid-column-chooser", outputs: ["apply", "cancel"] }, { kind: "component", type: GridSelectAllCheckboxComponent, selector: "mona-grid-select-all-checkbox" }, { kind: "pipe", type: ColumnAriaSortPipe, name: "columnAriaSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet,
                 GridColgroupComponent, /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-footer-row.component-CnPhVIr4.mjs').then(m => m.GridFooterRowComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-list.component-DxY6bfTX.mjs').then(m => m.GridListComponent), /* @ts-ignore */
-                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-jNYtqg5B.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-footer-row.component-DLOPRuFv.mjs').then(m => m.GridFooterRowComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-list.component-Dw5U9H0a.mjs').then(m => m.GridListComponent), /* @ts-ignore */
+                import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-ECK1_smx.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
                 import('@nanahoshi/mona-ui/spinner').then(m => m.SpinnerComponent)]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ngImport: i0, type: GridComponent, resolveDeferredDeps: () => [/* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-footer-row.component-CnPhVIr4.mjs').then(m => m.GridFooterRowComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-list.component-DxY6bfTX.mjs').then(m => m.GridListComponent), /* @ts-ignore */
-        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-jNYtqg5B.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-footer-row.component-DLOPRuFv.mjs').then(m => m.GridFooterRowComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-list.component-Dw5U9H0a.mjs').then(m => m.GridListComponent), /* @ts-ignore */
+        import('./nanahoshi-mona-ui-grid-grid-virtual-list.component-ECK1_smx.mjs').then(m => m.GridVirtualListComponent), /* @ts-ignore */
         import('@nanahoshi/mona-ui/spinner').then(m => m.SpinnerComponent)], resolveMetadata: (GridFooterRowComponent, GridListComponent, GridVirtualListComponent, SpinnerComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: "mona-grid", changeDetection: ChangeDetectionStrategy.OnPush, providers: [GridService, GridNavigationService, FilterService], imports: [
@@ -5810,4 +5806,4 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.0.6", ng
  */
 
 export { GridSaveCommandDirective as $, GridCancelCommandDirective as A, GridCancelEvent as B, CellEditEvent as C, GridCellTemplateDirective as D, GridColumnComponent as E, GridColumnTitleTemplateDirective as F, GridNavigationService as G, GridCommandColumnComponent as H, GridComponent as I, GridContextMenuDirective as J, GridDetailTemplateDirective as K, GridEditCommandDirective as L, GridEditEvent as M, GridEditTemplateDirective as N, GridEditableDirective as O, GridExportDirective as P, GridFilterableDirective as Q, GridFooterTemplateDirective as R, GridGroupFooterTemplateDirective as S, GridGroupableDirective as T, GridHeaderTemplateDirective as U, GridNoDataTemplateDirective as V, GridRemoveCommandDirective as W, GridRemoveEvent as X, GridReorderableDirective as Y, GridResizableDirective as Z, GridRowReorderableDirective as _, GridService as a, GridSaveEvent as a0, GridSelectableDirective as a1, GridServerBindingDirective as a2, GridSortableDirective as a3, GridStatePersistenceDirective as a4, GridToolbarTemplateDirective as a5, GridVirtualScrollDirective as a6, RowEditEvent as a7, RowReorderEvent as a8, gridRowDragPreviewThemeVariants as b, gridListTableThemeVariants as c, GridColgroupComponent as d, gridFooterThemeVariants as e, gridFooterTableThemeVariants as f, gridListBaseThemeVariants as g, GRID_DEFAULT_VIRTUAL_ROW_HEIGHT as h, gridListTableCellThemeVariants as i, gridCellEditorBaseThemeVariants as j, gridCellEditorInputThemeVariants as k, gridListTableRowThemeVariants as l, GridLockedCellDirective as m, GridLogicalCellDirective as n, gridGroupRowThemeVariants as o, gridCellBaseThemeVariants as p, gridCellContainerThemeVariants as q, gridCellDirtyIndicatorThemeVariants as r, gridCellTextThemeVariants as s, gridRowReorderHandleThemeVariants as t, gridSelectionCellThemeVariants as u, gridFooterTableCellThemeVariants as v, gridFooterTableRowThemeVariants as w, GRID_DEFAULT_MESSAGES as x, GridAddCommandDirective as y, GridAddEvent as z };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-9FtfCutf.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-D4lUDbfx.mjs.map

package/fesm2022/nanahoshi-mona-ui-grid.mjs

@@ -1,2 +1,2 @@
-export { C as CellEditEvent, x as GRID_DEFAULT_MESSAGES, y as GridAddCommandDirective, z as GridAddEvent, A as GridCancelCommandDirective, B as GridCancelEvent, D as GridCellTemplateDirective, E as GridColumnComponent, F as GridColumnTitleTemplateDirective, H as GridCommandColumnComponent, I as GridComponent, J as GridContextMenuDirective, K as GridDetailTemplateDirective, L as GridEditCommandDirective, M as GridEditEvent, N as GridEditTemplateDirective, O as GridEditableDirective, P as GridExportDirective, Q as GridFilterableDirective, R as GridFooterTemplateDirective, S as GridGroupFooterTemplateDirective, T as GridGroupableDirective, U as GridHeaderTemplateDirective, V as GridNoDataTemplateDirective, W as GridRemoveCommandDirective, X as GridRemoveEvent, Y as GridReorderableDirective, Z as GridResizableDirective, _ as GridRowReorderableDirective, $ as GridSaveCommandDirective, a0 as GridSaveEvent, a1 as GridSelectableDirective, a2 as GridServerBindingDirective, a3 as GridSortableDirective, a4 as GridStatePersistenceDirective, a5 as GridToolbarTemplateDirective, a6 as GridVirtualScrollDirective, a7 as RowEditEvent, a8 as RowReorderEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-9FtfCutf.mjs';
+export { C as CellEditEvent, x as GRID_DEFAULT_MESSAGES, y as GridAddCommandDirective, z as GridAddEvent, A as GridCancelCommandDirective, B as GridCancelEvent, D as GridCellTemplateDirective, E as GridColumnComponent, F as GridColumnTitleTemplateDirective, H as GridCommandColumnComponent, I as GridComponent, J as GridContextMenuDirective, K as GridDetailTemplateDirective, L as GridEditCommandDirective, M as GridEditEvent, N as GridEditTemplateDirective, O as GridEditableDirective, P as GridExportDirective, Q as GridFilterableDirective, R as GridFooterTemplateDirective, S as GridGroupFooterTemplateDirective, T as GridGroupableDirective, U as GridHeaderTemplateDirective, V as GridNoDataTemplateDirective, W as GridRemoveCommandDirective, X as GridRemoveEvent, Y as GridReorderableDirective, Z as GridResizableDirective, _ as GridRowReorderableDirective, $ as GridSaveCommandDirective, a0 as GridSaveEvent, a1 as GridSelectableDirective, a2 as GridServerBindingDirective, a3 as GridSortableDirective, a4 as GridStatePersistenceDirective, a5 as GridToolbarTemplateDirective, a6 as GridVirtualScrollDirective, a7 as RowEditEvent, a8 as RowReorderEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-D4lUDbfx.mjs';
 //# sourceMappingURL=nanahoshi-mona-ui-grid.mjs.map

package/fesm2022/nanahoshi-mona-ui-internal-filter-input.mjs

@@ -109,11 +109,11 @@ class FilterInputComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: FilterInputComponent, isStandalone: true, selector: "mona-filter-input", inputs: { activeDescendant: { classPropertyName: "activeDescendant", publicName: "activeDescendant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", inputBlur: "inputBlur", inputFocus: "inputFocus" }, ngImport: i0, template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [tabindex]=\"0\"\n    [inputAttributes]=\"inputAttributes()\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <svg lucideSearch [size]=\"16\" aria-hidden=\"true\"></svg>\n        </div>\n    </ng-template>\n</mona-text-box>\n", dependencies: [{ kind: "component", type: LucideSearch, selector: "svg[lucideSearch]" }, { 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: "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: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: FilterInputComponent, isStandalone: true, selector: "mona-filter-input", inputs: { activeDescendant: { classPropertyName: "activeDescendant", publicName: "activeDescendant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", inputBlur: "inputBlur", inputFocus: "inputFocus" }, ngImport: i0, template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [inputAttributes]=\"inputAttributes()\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <svg lucideSearch [size]=\"16\" aria-hidden=\"true\"></svg>\n        </div>\n    </ng-template>\n</mona-text-box>\n", dependencies: [{ kind: "component", type: LucideSearch, selector: "svg[lucideSearch]" }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["aria-describedby", "aria-label", "aria-labelledby", "clearButton", "disabled", "inputAttributes", "inputClass", "inputId", "inputStyle", "invalid", "maxLength", "minLength", "name", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { 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: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-filter-input", imports: [LucideSearch, TextBoxComponent, FormsModule, TextBoxPrefixTemplateDirective], template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [tabindex]=\"0\"\n    [inputAttributes]=\"inputAttributes()\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <svg lucideSearch [size]=\"16\" aria-hidden=\"true\"></svg>\n        </div>\n    </ng-template>\n</mona-text-box>\n" }]
+            args: [{ selector: "mona-filter-input", imports: [LucideSearch, TextBoxComponent, FormsModule, TextBoxPrefixTemplateDirective], template: "<mona-text-box\n    [ngModel]=\"filterText()\"\n    [clearButton]=\"true\"\n    [placeholder]=\"placeholder()\"\n    (inputFocus)=\"inputFocus.emit($event)\"\n    (inputBlur)=\"inputBlur.emit($event)\"\n    [inputAttributes]=\"inputAttributes()\"\n    [size]=\"size()\"\n    class=\"outline-none shadow-none focus-within:ring-1 focus-within:ring-primary/40\"\n    (ngModelChange)=\"filter$.next($event)\">\n    <ng-template monaTextBoxPrefixTemplate>\n        <div class=\"h-full flex items-center justify-center ps-2\">\n            <svg lucideSearch [size]=\"16\" aria-hidden=\"true\"></svg>\n        </div>\n    </ng-template>\n</mona-text-box>\n" }]
         }], ctorParameters: () => [], propDecorators: { activeDescendant: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDescendant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /*

package/fesm2022/nanahoshi-mona-ui-internal-tree.mjs

@@ -1296,7 +1296,7 @@ const subTreeListItemThemeVariants = cva(`
     `);
 const treeBaseThemeVariants = cva(`
         relative outline-none select-none
-        text-md
+        text-base
     `);
 const treeDropHintBaseThemeVariants = cva(`
         fixed z-1 h-0.5 w-10

package/fesm2022/nanahoshi-mona-ui-internal.mjs

@@ -247,6 +247,20 @@ const createElementControlId = (level = 0, length = 7) => {
     return `${prefix}${hex}`;
 };
 
+/**
+ * Whether a closing popup may move focus back to its trigger without taking it from somewhere the user put it.
+ * That holds while focus is on the page itself or inside one of `containers`, usually the trigger and the popup.
+ * A click on another field that closed the popup, or a Tab out of it, must leave focus where it went.
+ * This is the rule the CDK dialog uses.
+ */
+function focusCanReturn(document, ...containers) {
+    const activeElement = document.activeElement;
+    if (activeElement == null || activeElement === document.body) {
+        return true;
+    }
+    return containers.some(container => container?.contains(activeElement));
+}
+
 function focusElement(host, element) {
     if (element instanceof ElementRef) {
         element.nativeElement.focus();
@@ -418,5 +432,5 @@ const setupTypeahead = (typeaheadKey$) => {
  * Generated bundle index. Do not edit.
  */
 
-export { AttributeBinderDirective, NavigationKeys, NavigationKeysList, createElementControlId, focusElement, hex2rgba, hsla2hsva, hsva2rgba, isNavigationKey, isTypeaheadKey, isValidHex, isValidHsla, isValidRgb, restoreOverlayScroll, rgba2hex, rgba2hsla, rgba2hsva, rxFromResize, rxTimeout, setWindowStyles, setupTypeahead, string2Hsla, string2rgba, themeControlBackdropClasses, themeControlSurfaceClasses, themeOverlayBackdropClasses, themeOverlaySurfaceClasses, themeRaisedBackdropClasses, themeRaisedSurfaceClasses, toCssValue };
+export { AttributeBinderDirective, NavigationKeys, NavigationKeysList, createElementControlId, focusCanReturn, focusElement, hex2rgba, hsla2hsva, hsva2rgba, isNavigationKey, isTypeaheadKey, isValidHex, isValidHsla, isValidRgb, restoreOverlayScroll, rgba2hex, rgba2hsla, rgba2hsva, rxFromResize, rxTimeout, setWindowStyles, setupTypeahead, string2Hsla, string2rgba, themeControlBackdropClasses, themeControlSurfaceClasses, themeOverlayBackdropClasses, themeOverlaySurfaceClasses, themeRaisedBackdropClasses, themeRaisedSurfaceClasses, toCssValue };
 //# sourceMappingURL=nanahoshi-mona-ui-internal.mjs.map

package/fesm2022/nanahoshi-mona-ui-list-box.mjs

@@ -583,7 +583,7 @@ class ListBoxComponent {
         return { actions, position };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListBoxComponent, isStandalone: true, selector: "mona-list-box", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, connectedList: { classPropertyName: "connectedList", publicName: "connectedList", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selectBy: { classPropertyName: "selectBy", publicName: "selectBy", isSignal: true, isRequired: false, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, singleSelectionToggleable: { classPropertyName: "singleSelectionToggleable", publicName: "singleSelectionToggleable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", selectedKeysChange: "selectedKeysChange", selectionChange: "selectionChange" }, host: { properties: { "class": "baseClasses()", "style.height": "listHeight()", "style.width": "listWidth()" } }, providers: [ListService], queries: [{ propertyName: "footerTemplate", first: true, predicate: ListBoxFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListBoxHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListBoxItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListBoxNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<mona-list-view\n    [ariaLabel]=\"ariaLabel()\"\n    [items]=\"listBoxItems()\"\n    [height]=\"'100%'\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [textField]=\"textField()\"\n    [width]=\"'100%'\"\n    [monaListViewNavigable]=\"{ enabled: true, mode: 'select' }\"\n    [monaListViewSelectable]=\"selectableOptions()\"\n    [selectBy]=\"selectBy()\"\n    [selectedKeys]=\"selectedKeys()\"\n    (selectedKeysChange)=\"onSelectedKeysChange($event)\">\n    @if (footerTemplate()) {\n        <ng-template monaListViewFooterTemplate>\n            <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (headerTemplate()) {\n        <ng-template monaListViewHeaderTemplate>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (itemTemplate()) {\n        <ng-template monaListViewItemTemplate let-dataItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n        </ng-template>\n    }\n    @if (noDataTemplate()) {\n        <ng-template monaListViewNoDataTemplate>\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n        </ng-template>\n    }\n</mona-list-view>\n\n@let options = toolbarOptions() ?? null;\n@let connectedListBox = connectedList();\n@let hasSelectedItems = selectedItems().length > 0;\n@let connectedListHasSelectedItems = connectedListBox && connectedListBox.selectedItems().length > 0;\n@let connectedListItems = connectedListBox?.listBoxItems() ?? [];\n@if (options !== null && connectedListBox !== null) {\n    <div [class]=\"toolbarClasses()\">\n        @if (options.actions | monaContains: \"moveUp\") {\n            <button\n                monaButton\n                (click)=\"onMoveClick('moveUp', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().moveUp\"\n                [attr.aria-label]=\"messages().moveUp\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideChevronUp [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"moveDown\") {\n            <button\n                monaButton\n                (click)=\"onMoveClick('moveDown', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().moveDown\"\n                [attr.aria-label]=\"messages().moveDown\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideChevronDown [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferFrom\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferFrom', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferFrom\"\n                [attr.aria-label]=\"messages().transferFrom\"\n                [disabled]=\"!connectedListHasSelectedItems\">\n                <svg lucideChevronLeft [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferTo\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferTo', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferTo\"\n                [attr.aria-label]=\"messages().transferTo\"\n                [disabled]=\"!hasSelectedItems\">\n                <svg lucideChevronRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferAllFrom\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferAllFrom', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferAllFrom\"\n                [attr.aria-label]=\"messages().transferAllFrom\"\n                [disabled]=\"!connectedListBox || connectedListItems.length === 0\">\n                <svg lucideChevronsLeft [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferAllTo\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferAllTo', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferAllTo\"\n                [attr.aria-label]=\"messages().transferAllTo\"\n                [disabled]=\"listBoxItems().length === 0\">\n                <svg lucideChevronsRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"clear\") {\n            <button\n                monaButton\n                (click)=\"onClearClick($event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().clearSelection\"\n                [attr.aria-label]=\"messages().clearSelection\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideX [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"remove\") {\n            <button\n                monaButton\n                (click)=\"onRemoveClick($event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().remove\"\n                [attr.aria-label]=\"messages().remove\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideTrash2 [size]=\"14\"></svg>\n            </button>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: ListViewComponent, selector: "mona-list-view", inputs: ["aria-label", "height", "items", "listClass", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "rounded", "size", "textField", "class", "width"], outputs: ["scrollBottom"] }, { kind: "directive", type: ListViewSelectableDirective, selector: "mona-list-view[monaListViewSelectable]", inputs: ["monaListViewSelectable", "selectBy", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "directive", type: ListViewItemTemplateDirective, selector: "ng-template[monaListViewItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: ListViewNavigableDirective, selector: "mona-list-view[monaListViewNavigable]", inputs: ["monaListViewNavigable"] }, { kind: "directive", type: ListViewNoDataTemplateDirective, selector: "ng-template[monaListViewNoDataTemplate]" }, { kind: "directive", type: ListViewFooterTemplateDirective, selector: "ng-template[monaListViewFooterTemplate]" }, { kind: "directive", type: ListViewHeaderTemplateDirective, selector: "ng-template[monaListViewHeaderTemplate]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "pipe", type: ContainsPipe, name: "monaContains" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ListBoxComponent, isStandalone: true, selector: "mona-list-box", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, connectedList: { classPropertyName: "connectedList", publicName: "connectedList", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selectBy: { classPropertyName: "selectBy", publicName: "selectBy", isSignal: true, isRequired: false, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, singleSelectionToggleable: { classPropertyName: "singleSelectionToggleable", publicName: "singleSelectionToggleable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", selectedKeysChange: "selectedKeysChange", selectionChange: "selectionChange" }, host: { properties: { "class": "baseClasses()", "style.height": "listHeight()", "style.width": "listWidth()" } }, providers: [ListService], queries: [{ propertyName: "footerTemplate", first: true, predicate: ListBoxFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListBoxHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListBoxItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListBoxNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<mona-list-view\n    [ariaLabel]=\"ariaLabel()\"\n    [items]=\"listBoxItems()\"\n    [height]=\"'100%'\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [textField]=\"textField()\"\n    [width]=\"'100%'\"\n    [monaListViewNavigable]=\"{ enabled: true, mode: 'select' }\"\n    [monaListViewSelectable]=\"selectableOptions()\"\n    [selectBy]=\"selectBy()\"\n    [selectedKeys]=\"selectedKeys()\"\n    (selectedKeysChange)=\"onSelectedKeysChange($event)\">\n    @if (footerTemplate()) {\n        <ng-template monaListViewFooterTemplate>\n            <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (headerTemplate()) {\n        <ng-template monaListViewHeaderTemplate>\n            <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n        </ng-template>\n    }\n    @if (itemTemplate()) {\n        <ng-template monaListViewItemTemplate let-dataItem>\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n        </ng-template>\n    }\n    @if (noDataTemplate()) {\n        <ng-template monaListViewNoDataTemplate>\n            <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n        </ng-template>\n    }\n</mona-list-view>\n\n@let options = toolbarOptions() ?? null;\n@let connectedListBox = connectedList();\n@let hasSelectedItems = selectedItems().length > 0;\n@let connectedListHasSelectedItems = connectedListBox && connectedListBox.selectedItems().length > 0;\n@let connectedListItems = connectedListBox?.listBoxItems() ?? [];\n@if (options !== null && connectedListBox !== null) {\n    <div [class]=\"toolbarClasses()\">\n        @if (options.actions | monaContains: \"moveUp\") {\n            <button\n                monaButton\n                (click)=\"onMoveClick('moveUp', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().moveUp\"\n                [attr.aria-label]=\"messages().moveUp\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideChevronUp [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"moveDown\") {\n            <button\n                monaButton\n                (click)=\"onMoveClick('moveDown', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().moveDown\"\n                [attr.aria-label]=\"messages().moveDown\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideChevronDown [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferFrom\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferFrom', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferFrom\"\n                [attr.aria-label]=\"messages().transferFrom\"\n                [disabled]=\"!connectedListHasSelectedItems\">\n                <svg lucideChevronLeft [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferTo\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferTo', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferTo\"\n                [attr.aria-label]=\"messages().transferTo\"\n                [disabled]=\"!hasSelectedItems\">\n                <svg lucideChevronRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferAllFrom\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferAllFrom', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferAllFrom\"\n                [attr.aria-label]=\"messages().transferAllFrom\"\n                [disabled]=\"!connectedListBox || connectedListItems.length === 0\">\n                <svg lucideChevronsLeft [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"transferAllTo\") {\n            <button\n                monaButton\n                (click)=\"onTransferClick('transferAllTo', $event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().transferAllTo\"\n                [attr.aria-label]=\"messages().transferAllTo\"\n                [disabled]=\"listBoxItems().length === 0\">\n                <svg lucideChevronsRight [size]=\"16\" class=\"rtl:rotate-180\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"clear\") {\n            <button\n                monaButton\n                (click)=\"onClearClick($event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().clearSelection\"\n                [attr.aria-label]=\"messages().clearSelection\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideX [size]=\"16\"></svg>\n            </button>\n        }\n        @if (options.actions | monaContains: \"remove\") {\n            <button\n                monaButton\n                (click)=\"onRemoveClick($event)\"\n                [iconOnly]=\"true\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [title]=\"messages().remove\"\n                [attr.aria-label]=\"messages().remove\"\n                [disabled]=\"!hasSelectedItems && !connectedListHasSelectedItems\">\n                <svg lucideTrash2 [size]=\"14\"></svg>\n            </button>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: ListViewComponent, selector: "mona-list-view", inputs: ["aria-label", "height", "items", "listClass", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "rounded", "size", "textField", "class", "width"], outputs: ["scrollBottom"] }, { kind: "directive", type: ListViewSelectableDirective, selector: "mona-list-view[monaListViewSelectable]", inputs: ["monaListViewSelectable", "selectBy", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "directive", type: ListViewItemTemplateDirective, selector: "ng-template[monaListViewItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: ListViewNavigableDirective, selector: "mona-list-view[monaListViewNavigable]", inputs: ["monaListViewNavigable"] }, { kind: "directive", type: ListViewNoDataTemplateDirective, selector: "ng-template[monaListViewNoDataTemplate]" }, { kind: "directive", type: ListViewFooterTemplateDirective, selector: "ng-template[monaListViewFooterTemplate]" }, { kind: "directive", type: ListViewHeaderTemplateDirective, selector: "ng-template[monaListViewHeaderTemplate]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "pipe", type: ContainsPipe, name: "monaContains" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListBoxComponent, decorators: [{
             type: Component,

package/fesm2022/nanahoshi-mona-ui-menubar.mjs

@@ -418,7 +418,7 @@ const menuItemGroupHeaderThemeVariants = cva(`inline-flex w-full select-none px-
         size: {
             small: "text-xs",
             medium: "text-sm",
-            large: "text-md"
+            large: "text-base"
         }
     }
 });
@@ -441,7 +441,7 @@ const menuItemThemeVariants = cva(`
         size: {
             small: "px-2 py-1 text-xs",
             medium: "px-2 py-1.5 text-sm",
-            large: "px-3 py-2 text-md"
+            large: "px-3 py-2 text-base"
         }
     }
 });
@@ -466,7 +466,7 @@ const menubarBaseThemeVariants = cva(`
         size: {
             small: "h-8 text-xs",
             medium: "h-10 text-sm",
-            large: "h-12 text-md"
+            large: "h-12 text-base"
         }
     }
 });

package/fesm2022/nanahoshi-mona-ui-multi-select.mjs

@@ -83,7 +83,7 @@ const multiSelectBaseThemeVariants = cva(`
         size: {
             small: "min-h-8 text-xs",
             medium: "min-h-9 text-sm",
-            large: "min-h-10 text-md"
+            large: "min-h-10 text-base"
         }
     },
     compoundVariants: [

package/fesm2022/nanahoshi-mona-ui-notification.mjs

@@ -209,7 +209,7 @@ class NotificationComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NotificationComponent, isStandalone: true, selector: "mona-notification", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "pointerenter": "onInteractionStart()", "pointerleave": "onInteractionEnd()", "focusin": "onInteractionStart()", "focusout": "onInteractionEnd()" } }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\n\n<div\n    [class]=\"baseClass()\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\">\n    @if (contentTemplate() || contentComponent()) {\n        @if (contentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\n        } @else if (contentComponent()) {\n            <ng-container #contentHost></ng-container>\n        }\n    } @else {\n        <div [class]=\"bodyClass()\">\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\n                @switch (type()) {\n                    @case (\"error\") {\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"info\") {\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"success\") {\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"warning\") {\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\n                    }\n                }\n            </div>\n            <div class=\"flex flex-col flex-1\">\n                <div [class]=\"headerClass()\">{{ title() }}</div>\n                <div [class]=\"contentClass()\">\n                    @if (isStringContent()) {\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\n                            data().options.content\n                        }}</span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (data().options.progressBar) {\n            <div class=\"w-full h-1\">\n                <mona-progress-bar\n                    [value]=\"progressValue()\"\n                    [color]=\"progressColor()\"\n                    [labelVisible]=\"false\"\n                    [animate]=\"false\"\n                    rounded=\"none\"\n                    class=\"h-full\"></mona-progress-bar>\n            </div>\n        }\n    }\n    @if (data().options.closable) {\n        <div [class]=\"actionClass()\">\n            <button\n                monaButton\n                size=\"small\"\n                look=\"link\"\n                rounded=\"none\"\n                [iconOnly]=\"true\"\n                [title]=\"closeTitle()\"\n                [attr.aria-label]=\"closeTitle()\"\n                (click)=\"close()\">\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\n            </button>\n        </div>\n    }\n</div>\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "mona-progress-bar", inputs: ["animate", "aria-label", "aria-valuetext", "color", "disabled", "indeterminate", "labelPosition", "labelStyles", "labelVisible", "max", "min", "rounded", "class", "value"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: LucideOctagonX, selector: "svg[lucideOctagonX], svg[lucideXOctagon]" }, { kind: "component", type: LucideBadgeInfo, selector: "svg[lucideBadgeInfo]" }, { kind: "component", type: LucideCircleCheckBig, selector: "svg[lucideCircleCheckBig], svg[lucideCheckCircle]" }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NotificationComponent, isStandalone: true, selector: "mona-notification", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "pointerenter": "onInteractionStart()", "pointerleave": "onInteractionEnd()", "focusin": "onInteractionStart()", "focusout": "onInteractionEnd()" } }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@let width = typeof data().options.width === \"string\" ? data().options.width : `${data().options.width}px`;\n@let height = typeof data().options.height === \"string\" ? data().options.height : `${data().options.height}px`;\n\n<div\n    [class]=\"baseClass()\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [attr.role]=\"role()\"\n    [attr.aria-live]=\"ariaLive()\">\n    @if (contentTemplate() || contentComponent()) {\n        @if (contentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"contentTemplate()\"></ng-container>\n        } @else if (contentComponent()) {\n            <ng-container #contentHost></ng-container>\n        }\n    } @else {\n        <div [class]=\"bodyClass()\">\n            <div [class]=\"iconClass()\" aria-hidden=\"true\">\n                @switch (type()) {\n                    @case (\"error\") {\n                        <svg lucideOctagonX aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"info\") {\n                        <svg lucideBadgeInfo aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"success\") {\n                        <svg lucideCircleCheckBig aria-hidden=\"true\"></svg>\n                    }\n                    @case (\"warning\") {\n                        <svg lucideOctagonAlert aria-hidden=\"true\"></svg>\n                    }\n                }\n            </div>\n            <div class=\"flex flex-col flex-1\">\n                <div [class]=\"headerClass()\">{{ title() }}</div>\n                <div [class]=\"contentClass()\">\n                    @if (isStringContent()) {\n                        <span [class]=\"textClass()\" title=\"{{ data().options.content }}\">{{\n                            data().options.content\n                        }}</span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (data().options.progressBar) {\n            <div class=\"w-full h-1\">\n                <mona-progress-bar\n                    [value]=\"progressValue()\"\n                    [color]=\"progressColor()\"\n                    [labelVisible]=\"false\"\n                    [animate]=\"false\"\n                    rounded=\"none\"\n                    class=\"h-full\"></mona-progress-bar>\n            </div>\n        }\n    }\n    @if (data().options.closable) {\n        <div [class]=\"actionClass()\">\n            <button\n                monaButton\n                size=\"small\"\n                look=\"link\"\n                rounded=\"none\"\n                [iconOnly]=\"true\"\n                [title]=\"closeTitle()\"\n                [attr.aria-label]=\"closeTitle()\"\n                (click)=\"close()\">\n                <svg lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\n            </button>\n        </div>\n    }\n</div>\n", styles: [":host{display:block}@keyframes notification-slide-in-top{0%{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-top{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(0 -20px 100% -20px);transform:translateY(-12px);opacity:0}}@keyframes notification-slide-in-bottom{0%{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}to{clip-path:inset(-20px);transform:translateY(0);opacity:1}}@keyframes notification-slide-out-bottom{0%{clip-path:inset(-20px);transform:translateY(0);opacity:1}to{clip-path:inset(100% -20px 0 -20px);transform:translateY(12px);opacity:0}}:host.notification-enter-top{animation:notification-slide-in-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-enter-bottom{animation:notification-slide-in-bottom .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-top{animation:notification-slide-out-top .3s cubic-bezier(.4,0,.2,1) forwards}:host.notification-leave-bottom{animation:notification-slide-out-bottom .3s cubic-bezier(.4,0,.2,1) forwards}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "mona-progress-bar", inputs: ["animate", "aria-label", "aria-valuetext", "color", "disabled", "indeterminate", "labelPosition", "labelStyles", "labelVisible", "max", "min", "rounded", "class", "value"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: LucideOctagonX, selector: "svg[lucideOctagonX], svg[lucideXOctagon]" }, { kind: "component", type: LucideBadgeInfo, selector: "svg[lucideBadgeInfo]" }, { kind: "component", type: LucideCircleCheckBig, selector: "svg[lucideCircleCheckBig], svg[lucideCheckCircle]" }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,