@nanahoshi/mona-ui 0.18.6 → 0.20.0

package/fesm2022/{nanahoshi-mona-ui-grid-grid-toggle.component-hc-LeIb0.mjs → nanahoshi-mona-ui-grid-grid-toggle.component-B_Gm--X6.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { computed, input, Directive, inject, Component, signal, ElementRef, viewChild, output, effect, untracked, afterNextRender, ChangeDetectionStrategy, Injector, LOCALE_ID, model } from '@angular/core';
-import { m as gridListTableCellThemeVariants, n as gridDetailContentCellThemeVariants, o as gridDetailIndentCellThemeVariants, p as gridDetailRowThemeVariants, c as GridService, q as gridListTableRowThemeVariants, r as gridCellEditorBaseThemeVariants, s as gridCellEditorInputThemeVariants, j as GridLockedCellDirective, i as GridLogicalCellDirective, G as GridNavigationService, t as gridCellBaseThemeVariants, u as gridCellContainerThemeVariants, v as gridCellDirtyIndicatorThemeVariants, w as gridCellTextThemeVariants, x as gridRowReorderHandleThemeVariants, y as gridSelectionCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-Pm8Fbp6M.mjs';
+import { m as gridListTableCellThemeVariants, n as gridDetailContentCellThemeVariants, o as gridDetailIndentCellThemeVariants, p as gridDetailRowThemeVariants, c as GridService, q as gridListTableRowThemeVariants, r as gridCellEditorBaseThemeVariants, s as gridCellEditorInputThemeVariants, j as GridLockedCellDirective, i as GridLogicalCellDirective, G as GridNavigationService, t as gridCellBaseThemeVariants, u as gridCellContainerThemeVariants, v as gridCellDirtyIndicatorThemeVariants, w as gridCellTextThemeVariants, x as gridRowReorderHandleThemeVariants, y as gridSelectionCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CyzJFQIy.mjs';
 import { ImmutableList } from '@mirei/ts-collections';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule, LiveAnnouncer } from '@angular/cdk/a11y';
@@ -212,6 +212,8 @@ class GridCommandCellComponent {
             return this.newRow() || (row != null && context?.mode === "row" && context.rowUid === row.uid);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
+        this.messages = computed(() => this.gridService.messages(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
         this.rowErrorMessages = computed(() => {
             if (!this.isEditing()) {
                 return [];
@@ -227,7 +229,7 @@ class GridCommandCellComponent {
                 .filter((message) => !!message);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rowErrorMessages" }] : /* istanbul ignore next */ []));
-        this.rowErrorTooltip = computed(() => this.rowErrorMessages().join("\n") || "This row has validation errors.", /* @ts-ignore */
+        this.rowErrorTooltip = computed(() => this.rowErrorMessages().join("\n") || this.messages().rowValidationError, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rowErrorTooltip" }] : /* istanbul ignore next */ []));
         this.column = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
@@ -267,18 +269,18 @@ class GridCommandCellComponent {
         }
         const dialogRef = this.#dialogService.show({
             actions: [
-                { look: "error", text: "Delete" },
-                { look: "default", text: "Cancel" }
+                { look: "error", text: this.messages().delete },
+                { look: "default", text: this.messages().cancel }
             ],
             closeOnEscape: true,
-            text: "Are you sure you want to delete this item?",
-            title: "Delete row?",
+            text: this.messages().deleteRowConfirmation,
+            title: this.messages().deleteRowTitle,
             type: "warning",
             modal: true,
             width: 360
         });
         dialogRef.result.pipe(take(1)).subscribe(result => {
-            if (!result.viaClose && result.action.text === "Delete") {
+            if (!result.viaClose && result.action.text === this.messages().delete) {
                 this.gridService.removeRow(row, event);
             }
             dialogRef.close();
@@ -293,7 +295,7 @@ class GridCommandCellComponent {
         this.gridService.commitRowEdit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridCommandCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridCommandCellComponent, isStandalone: true, selector: "mona-grid-command-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, newRow: { classPropertyName: "newRow", publicName: "newRow", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, ngImport: i0, template: "@if (column().commandTemplate) {\n    <ng-container\n        [ngTemplateOutlet]=\"column().commandTemplate\"\n        [ngTemplateOutletContext]=\"commandContext()\"></ng-container>\n} @else {\n    <div class=\"flex h-full items-center gap-1 px-1\">\n        @if (isEditing()) {\n            @if (hasRowError()) {\n                <span class=\"shrink-0 px-1 text-error\" #rowErrorIcon>\n                    <svg lucideOctagonAlert [size]=\"14\"></svg>\n                </span>\n                <mona-tooltip [target]=\"rowErrorIcon\">\n                    <span class=\"p-1 whitespace-pre-line\">{{ rowErrorTooltip() }}</span>\n                </mona-tooltip>\n            }\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                aria-label=\"Save row\"\n                title=\"Save\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"save($event)\">\n                <svg lucideCheck [size]=\"14\"></svg>\n            </button>\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                aria-label=\"Cancel row edit\"\n                title=\"Cancel\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"cancel($event)\">\n                <svg lucideX [size]=\"14\"></svg>\n            </button>\n        } @else {\n            @if (canEditRows()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    [iconOnly]=\"true\"\n                    aria-label=\"Edit row\"\n                    title=\"Edit\"\n                    class=\"w-6 h-6\"\n                    [tabindex]=\"-1\"\n                    (click)=\"edit($event)\">\n                    <svg lucidePencil [size]=\"14\"></svg>\n                </button>\n            }\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                aria-label=\"Remove row\"\n                title=\"Remove\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"remove($event)\">\n                <svg lucideTrash2 [size]=\"14\"></svg>\n            </button>\n        }\n    </div>\n}\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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucidePencil, selector: "svg[lucidePencil]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: TooltipComponent, selector: "mona-tooltip", inputs: ["disabled", "hideDelay", "position", "rounded", "showDelay", "target"], outputs: ["hidden", "shown"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridCommandCellComponent, isStandalone: true, selector: "mona-grid-command-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, newRow: { classPropertyName: "newRow", publicName: "newRow", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "w-full" }, ngImport: i0, template: "@if (column().commandTemplate) {\n    <ng-container\n        [ngTemplateOutlet]=\"column().commandTemplate\"\n        [ngTemplateOutletContext]=\"commandContext()\"></ng-container>\n} @else {\n    <div class=\"flex h-full items-center gap-1 px-1\">\n        @if (isEditing()) {\n            @if (hasRowError()) {\n                <span class=\"shrink-0 px-1 text-error\" #rowErrorIcon>\n                    <svg lucideOctagonAlert [size]=\"14\"></svg>\n                </span>\n                <mona-tooltip [target]=\"rowErrorIcon\">\n                    <span class=\"p-1 whitespace-pre-line\">{{ rowErrorTooltip() }}</span>\n                </mona-tooltip>\n            }\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"messages().saveRow\"\n                [attr.title]=\"messages().save\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"save($event)\">\n                <svg lucideCheck [size]=\"14\"></svg>\n            </button>\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"messages().cancelRowEdit\"\n                [attr.title]=\"messages().cancel\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"cancel($event)\">\n                <svg lucideX [size]=\"14\"></svg>\n            </button>\n        } @else {\n            @if (canEditRows()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"messages().editRow\"\n                    [attr.title]=\"messages().edit\"\n                    class=\"w-6 h-6\"\n                    [tabindex]=\"-1\"\n                    (click)=\"edit($event)\">\n                    <svg lucidePencil [size]=\"14\"></svg>\n                </button>\n            }\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"messages().removeRow\"\n                [attr.title]=\"messages().remove\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"remove($event)\">\n                <svg lucideTrash2 [size]=\"14\"></svg>\n            </button>\n        }\n    </div>\n}\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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucidePencil, selector: "svg[lucidePencil]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: TooltipComponent, selector: "mona-tooltip", inputs: ["disabled", "hideDelay", "position", "rounded", "showDelay", "target"], outputs: ["hidden", "shown"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridCommandCellComponent, decorators: [{
             type: Component,
@@ -308,18 +310,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         TooltipComponent
                     ], host: {
                         class: "w-full"
-                    }, template: "@if (column().commandTemplate) {\n    <ng-container\n        [ngTemplateOutlet]=\"column().commandTemplate\"\n        [ngTemplateOutletContext]=\"commandContext()\"></ng-container>\n} @else {\n    <div class=\"flex h-full items-center gap-1 px-1\">\n        @if (isEditing()) {\n            @if (hasRowError()) {\n                <span class=\"shrink-0 px-1 text-error\" #rowErrorIcon>\n                    <svg lucideOctagonAlert [size]=\"14\"></svg>\n                </span>\n                <mona-tooltip [target]=\"rowErrorIcon\">\n                    <span class=\"p-1 whitespace-pre-line\">{{ rowErrorTooltip() }}</span>\n                </mona-tooltip>\n            }\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                aria-label=\"Save row\"\n                title=\"Save\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"save($event)\">\n                <svg lucideCheck [size]=\"14\"></svg>\n            </button>\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                aria-label=\"Cancel row edit\"\n                title=\"Cancel\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"cancel($event)\">\n                <svg lucideX [size]=\"14\"></svg>\n            </button>\n        } @else {\n            @if (canEditRows()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    [iconOnly]=\"true\"\n                    aria-label=\"Edit row\"\n                    title=\"Edit\"\n                    class=\"w-6 h-6\"\n                    [tabindex]=\"-1\"\n                    (click)=\"edit($event)\">\n                    <svg lucidePencil [size]=\"14\"></svg>\n                </button>\n            }\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                aria-label=\"Remove row\"\n                title=\"Remove\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"remove($event)\">\n                <svg lucideTrash2 [size]=\"14\"></svg>\n            </button>\n        }\n    </div>\n}\n" }]
+                    }, template: "@if (column().commandTemplate) {\n    <ng-container\n        [ngTemplateOutlet]=\"column().commandTemplate\"\n        [ngTemplateOutletContext]=\"commandContext()\"></ng-container>\n} @else {\n    <div class=\"flex h-full items-center gap-1 px-1\">\n        @if (isEditing()) {\n            @if (hasRowError()) {\n                <span class=\"shrink-0 px-1 text-error\" #rowErrorIcon>\n                    <svg lucideOctagonAlert [size]=\"14\"></svg>\n                </span>\n                <mona-tooltip [target]=\"rowErrorIcon\">\n                    <span class=\"p-1 whitespace-pre-line\">{{ rowErrorTooltip() }}</span>\n                </mona-tooltip>\n            }\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"messages().saveRow\"\n                [attr.title]=\"messages().save\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"save($event)\">\n                <svg lucideCheck [size]=\"14\"></svg>\n            </button>\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"messages().cancelRowEdit\"\n                [attr.title]=\"messages().cancel\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"cancel($event)\">\n                <svg lucideX [size]=\"14\"></svg>\n            </button>\n        } @else {\n            @if (canEditRows()) {\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    size=\"small\"\n                    [iconOnly]=\"true\"\n                    [attr.aria-label]=\"messages().editRow\"\n                    [attr.title]=\"messages().edit\"\n                    class=\"w-6 h-6\"\n                    [tabindex]=\"-1\"\n                    (click)=\"edit($event)\">\n                    <svg lucidePencil [size]=\"14\"></svg>\n                </button>\n            }\n            <button\n                monaButton\n                look=\"ghost\"\n                size=\"small\"\n                [iconOnly]=\"true\"\n                [attr.aria-label]=\"messages().removeRow\"\n                [attr.title]=\"messages().remove\"\n                class=\"w-6 h-6\"\n                [tabindex]=\"-1\"\n                (click)=\"remove($event)\">\n                <svg lucideTrash2 [size]=\"14\"></svg>\n            </button>\n        }\n    </div>\n}\n" }]
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], newRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "newRow", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }] } });
 
 const FOCUSABLE_TARGET_SELECTOR$1 = "button, input, select, textarea, a[href], [tabindex]";
 class GridEditorComponent {
     #datePopupOpen;
     #elementRef;
+    #gridService;
     #ignoreNextBooleanFocusOut;
     constructor() {
         this.#datePopupOpen = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#datePopupOpen" }] : /* istanbul ignore next */ []));
         this.#elementRef = inject((ElementRef));
+        this.#gridService = inject(GridService, { optional: true });
         this.#ignoreNextBooleanFocusOut = false;
         this.numericTextBoxRef = viewChild(NumericTextBoxComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "numericTextBoxRef" }] : /* istanbul ignore next */ []));
@@ -352,7 +356,7 @@ class GridEditorComponent {
         ...(ngDevMode ? [{ debugName: "editorInputClass" }] : /* istanbul ignore next */ []));
         this.fieldErrorMessage = computed(() => {
             const [firstError] = this.formField()().errors();
-            return firstError?.message ?? "Invalid value.";
+            return firstError?.message ?? this.#gridService?.messages().fieldValidationError ?? "";
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fieldErrorMessage" }] : /* istanbul ignore next */ []));
         this.formField = computed(() => {
@@ -506,7 +510,7 @@ class GridEditorComponent {
         this.formField()().value.set(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridEditorComponent, isStandalone: true, selector: "mona-grid-editor", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, isNew: { classPropertyName: "isNew", publicName: "isNew", isSignal: true, isRequired: false, transformFunction: null }, session: { classPropertyName: "session", publicName: "session", isSignal: true, isRequired: true, transformFunction: null }, tabNavigationEnabled: { classPropertyName: "tabNavigationEnabled", publicName: "tabNavigationEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel", commit: "commit", tabNavigate: "tabNavigate" }, host: { listeners: { "keydown": "onHostKeydown($event)" }, properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "numericTextBoxRef", first: true, predicate: NumericTextBoxComponent, descendants: true, isSignal: true }, { propertyName: "textBoxRef", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (column().editTemplate) {\n    <ng-container\n        [ngTemplateOutlet]=\"column().editTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: editTemplateContext() }\"></ng-container>\n} @else {\n    <div class=\"relative flex items-center w-full h-full\">\n        @switch (column().dataType) {\n            @case (\"string\") {\n                <mona-text-box\n                    [class]=\"editorInputClass()\"\n                    [inputAttributes]=\"{ autocomplete: 'off' }\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"commit.emit()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (inputBlur)=\"commit.emit()\"\n                    [size]=\"'small'\"></mona-text-box>\n            }\n            @case (\"number\") {\n                <mona-numeric-text-box\n                    [class]=\"editorInputClass()\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"commit.emit()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (inputBlur)=\"commit.emit()\"\n                    [size]=\"'small'\"></mona-numeric-text-box>\n            }\n            @case (\"boolean\") {\n                <mona-check-box\n                    class=\"{{ editorInputClass() }} ml-2\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (click)=\"onBooleanEditorClick()\"\n                    (focusout)=\"onBooleanEditorFocusOut($event)\"\n                    (pointerdown)=\"onBooleanEditorPointerDown()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (keydown.enter)=\"commit.emit()\"></mona-check-box>\n            }\n            @case (\"date\") {\n                <mona-date-picker\n                    [class]=\"editorInputClass()\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"onDatePickerEnter($event)\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (focusout)=\"onDatePickerFocusOut($event)\"\n                    (opened)=\"onDatePickerOpen()\"\n                    (closed)=\"onDatePickerClose()\"\n                    size=\"small\"></mona-date-picker>\n            }\n        }\n        @if (hasFieldError()) {\n            <span class=\"shrink-0 px-1 text-error\" #fieldErrorIcon>\n                <svg lucideOctagonAlert [size]=\"12\"></svg>\n            </span>\n            <mona-tooltip [target]=\"fieldErrorIcon\">\n                <span class=\"p-1\">{{ fieldErrorMessage() }}</span>\n            </mona-tooltip>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }, { 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: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "component", type: 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: TooltipComponent, selector: "mona-tooltip", inputs: ["disabled", "hideDelay", "position", "rounded", "showDelay", "target"], outputs: ["hidden", "shown"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridEditorComponent, isStandalone: true, selector: "mona-grid-editor", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, isNew: { classPropertyName: "isNew", publicName: "isNew", isSignal: true, isRequired: false, transformFunction: null }, session: { classPropertyName: "session", publicName: "session", isSignal: true, isRequired: true, transformFunction: null }, tabNavigationEnabled: { classPropertyName: "tabNavigationEnabled", publicName: "tabNavigationEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancel: "cancel", commit: "commit", tabNavigate: "tabNavigate" }, host: { listeners: { "keydown": "onHostKeydown($event)" }, properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "numericTextBoxRef", first: true, predicate: NumericTextBoxComponent, descendants: true, isSignal: true }, { propertyName: "textBoxRef", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (column().editTemplate) {\n    <ng-container\n        [ngTemplateOutlet]=\"column().editTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: editTemplateContext() }\"></ng-container>\n} @else {\n    <div class=\"relative flex items-center w-full h-full\">\n        @switch (column().dataType) {\n            @case (\"string\") {\n                <mona-text-box\n                    [class]=\"editorInputClass()\"\n                    [inputAttributes]=\"{ autocomplete: 'off' }\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"commit.emit()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (inputBlur)=\"commit.emit()\"\n                    [size]=\"'small'\"></mona-text-box>\n            }\n            @case (\"number\") {\n                <mona-numeric-text-box\n                    [class]=\"editorInputClass()\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"commit.emit()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (inputBlur)=\"commit.emit()\"\n                    [size]=\"'small'\"></mona-numeric-text-box>\n            }\n            @case (\"boolean\") {\n                <mona-check-box\n                    class=\"{{ editorInputClass() }} ms-2\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (click)=\"onBooleanEditorClick()\"\n                    (focusout)=\"onBooleanEditorFocusOut($event)\"\n                    (pointerdown)=\"onBooleanEditorPointerDown()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (keydown.enter)=\"commit.emit()\"></mona-check-box>\n            }\n            @case (\"date\") {\n                <mona-date-picker\n                    [class]=\"editorInputClass()\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"onDatePickerEnter($event)\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (focusout)=\"onDatePickerFocusOut($event)\"\n                    (opened)=\"onDatePickerOpen()\"\n                    (closed)=\"onDatePickerClose()\"\n                    size=\"small\"></mona-date-picker>\n            }\n        }\n        @if (hasFieldError()) {\n            <span class=\"shrink-0 px-1 text-error\" #fieldErrorIcon>\n                <svg lucideOctagonAlert [size]=\"12\"></svg>\n            </span>\n            <mona-tooltip [target]=\"fieldErrorIcon\">\n                <span class=\"p-1\">{{ fieldErrorMessage() }}</span>\n            </mona-tooltip>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }, { 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: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "invalid", "maxValue", "minValue", "nullable", "readonly", "required", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { 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: TooltipComponent, selector: "mona-tooltip", inputs: ["disabled", "hideDelay", "position", "rounded", "showDelay", "target"], outputs: ["hidden", "shown"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridEditorComponent, decorators: [{
             type: Component,
@@ -522,7 +526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     ], host: {
                         "[class]": "baseClass()",
                         "(keydown)": "onHostKeydown($event)"
-                    }, template: "@if (column().editTemplate) {\n    <ng-container\n        [ngTemplateOutlet]=\"column().editTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: editTemplateContext() }\"></ng-container>\n} @else {\n    <div class=\"relative flex items-center w-full h-full\">\n        @switch (column().dataType) {\n            @case (\"string\") {\n                <mona-text-box\n                    [class]=\"editorInputClass()\"\n                    [inputAttributes]=\"{ autocomplete: 'off' }\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"commit.emit()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (inputBlur)=\"commit.emit()\"\n                    [size]=\"'small'\"></mona-text-box>\n            }\n            @case (\"number\") {\n                <mona-numeric-text-box\n                    [class]=\"editorInputClass()\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"commit.emit()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (inputBlur)=\"commit.emit()\"\n                    [size]=\"'small'\"></mona-numeric-text-box>\n            }\n            @case (\"boolean\") {\n                <mona-check-box\n                    class=\"{{ editorInputClass() }} ml-2\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (click)=\"onBooleanEditorClick()\"\n                    (focusout)=\"onBooleanEditorFocusOut($event)\"\n                    (pointerdown)=\"onBooleanEditorPointerDown()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (keydown.enter)=\"commit.emit()\"></mona-check-box>\n            }\n            @case (\"date\") {\n                <mona-date-picker\n                    [class]=\"editorInputClass()\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"onDatePickerEnter($event)\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (focusout)=\"onDatePickerFocusOut($event)\"\n                    (opened)=\"onDatePickerOpen()\"\n                    (closed)=\"onDatePickerClose()\"\n                    size=\"small\"></mona-date-picker>\n            }\n        }\n        @if (hasFieldError()) {\n            <span class=\"shrink-0 px-1 text-error\" #fieldErrorIcon>\n                <svg lucideOctagonAlert [size]=\"12\"></svg>\n            </span>\n            <mona-tooltip [target]=\"fieldErrorIcon\">\n                <span class=\"p-1\">{{ fieldErrorMessage() }}</span>\n            </mona-tooltip>\n        }\n    </div>\n}\n" }]
+                    }, template: "@if (column().editTemplate) {\n    <ng-container\n        [ngTemplateOutlet]=\"column().editTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: editTemplateContext() }\"></ng-container>\n} @else {\n    <div class=\"relative flex items-center w-full h-full\">\n        @switch (column().dataType) {\n            @case (\"string\") {\n                <mona-text-box\n                    [class]=\"editorInputClass()\"\n                    [inputAttributes]=\"{ autocomplete: 'off' }\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"commit.emit()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (inputBlur)=\"commit.emit()\"\n                    [size]=\"'small'\"></mona-text-box>\n            }\n            @case (\"number\") {\n                <mona-numeric-text-box\n                    [class]=\"editorInputClass()\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"commit.emit()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (inputBlur)=\"commit.emit()\"\n                    [size]=\"'small'\"></mona-numeric-text-box>\n            }\n            @case (\"boolean\") {\n                <mona-check-box\n                    class=\"{{ editorInputClass() }} ms-2\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (click)=\"onBooleanEditorClick()\"\n                    (focusout)=\"onBooleanEditorFocusOut($event)\"\n                    (pointerdown)=\"onBooleanEditorPointerDown()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (keydown.enter)=\"commit.emit()\"></mona-check-box>\n            }\n            @case (\"date\") {\n                <mona-date-picker\n                    [class]=\"editorInputClass()\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"onDatePickerEnter($event)\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (focusout)=\"onDatePickerFocusOut($event)\"\n                    (opened)=\"onDatePickerOpen()\"\n                    (closed)=\"onDatePickerClose()\"\n                    size=\"small\"></mona-date-picker>\n            }\n        }\n        @if (hasFieldError()) {\n            <span class=\"shrink-0 px-1 text-error\" #fieldErrorIcon>\n                <svg lucideOctagonAlert [size]=\"12\"></svg>\n            </span>\n            <mona-tooltip [target]=\"fieldErrorIcon\">\n                <span class=\"p-1\">{{ fieldErrorMessage() }}</span>\n            </mona-tooltip>\n        }\n    </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { numericTextBoxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NumericTextBoxComponent), { isSignal: true }] }], textBoxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TextBoxComponent), { isSignal: true }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], cancel: [{ type: i0.Output, args: ["cancel"] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], commit: [{ type: i0.Output, args: ["commit"] }], isNew: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNew", required: false }] }], session: [{ type: i0.Input, args: [{ isSignal: true, alias: "session", required: true }] }], tabNavigate: [{ type: i0.Output, args: ["tabNavigate"] }], tabNavigationEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabNavigationEnabled", required: false }] }] } });
 
 class GridAddRowComponent {
@@ -754,24 +758,15 @@ class GridCellComponent {
         this.gridService.startCellEdit(this.cellUid(), this.row(), this.column(), originalEvent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridCellComponent, isStandalone: true, selector: "mona-grid-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@let dataItem = row().data;\n@let dataKey = column().field;\n\n@if (column().kind === \"command\") {\n    <mona-grid-command-cell [column]=\"column()\" [row]=\"row()\"></mona-grid-command-cell>\n} @else {\n    <div\n        role=\"gridcell\"\n        [class]=\"cellContainerClass()\"\n        cdkMonitorSubtreeFocus\n        [attr.data-uid]=\"cellUid()\"\n        [attr.data-ruid]=\"row().uid\"\n        [attr.data-field]=\"dataKey\"\n        [attr.data-col-index]=\"column().index\"\n        [attr.aria-readonly]=\"!(gridService.editableOptions().enabled && column().editable)\"\n        (dblclick)=\"onCellDoubleClick($event)\">\n        @if (isEditing() && gridService.editSession(); as session) {\n            <mona-grid-editor\n                [column]=\"column()\"\n                [autoFocus]=\"shouldAutoFocusEditor()\"\n                [session]=\"session\"\n                [tabNavigationEnabled]=\"editContextIsCellMode()\"\n                (commit)=\"onEditCommit()\"\n                (cancel)=\"onEditCancel()\"\n                (tabNavigate)=\"onEditTabNavigate($event)\"></mona-grid-editor>\n        } @else if (column().cellTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"column().cellTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem, column: column().field }\"></ng-container>\n        } @else {\n            <span [class]=\"cellTextClass()\">{{ formattedDisplayValue() }}</span>\n        }\n        @if (!isCellPristine()) {\n            <span aria-hidden=\"true\" [class]=\"cellDirtyIndicatorClass()\" title=\"Modified\"></span>\n        }\n    </div>\n}\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: GridCommandCellComponent, selector: "mona-grid-command-cell", inputs: ["column", "newRow", "row"] }, { kind: "component", type: GridEditorComponent, selector: "mona-grid-editor", inputs: ["autoFocus", "column", "isNew", "session", "tabNavigationEnabled"], outputs: ["cancel", "commit", "tabNavigate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridCellComponent, isStandalone: true, selector: "mona-grid-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@let dataItem = row().data;\n@let dataKey = column().field;\n\n@if (column().kind === \"command\") {\n    <mona-grid-command-cell [column]=\"column()\" [row]=\"row()\"></mona-grid-command-cell>\n} @else {\n    <div\n        role=\"gridcell\"\n        [class]=\"cellContainerClass()\"\n        cdkMonitorSubtreeFocus\n        [attr.data-uid]=\"cellUid()\"\n        [attr.data-ruid]=\"row().uid\"\n        [attr.data-field]=\"dataKey\"\n        [attr.data-col-index]=\"column().index\"\n        [attr.aria-readonly]=\"!(gridService.editableOptions().enabled && column().editable)\"\n        (dblclick)=\"onCellDoubleClick($event)\">\n        @if (isEditing() && gridService.editSession(); as session) {\n            <mona-grid-editor\n                [column]=\"column()\"\n                [autoFocus]=\"shouldAutoFocusEditor()\"\n                [session]=\"session\"\n                [tabNavigationEnabled]=\"editContextIsCellMode()\"\n                (commit)=\"onEditCommit()\"\n                (cancel)=\"onEditCancel()\"\n                (tabNavigate)=\"onEditTabNavigate($event)\"></mona-grid-editor>\n        } @else if (column().cellTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"column().cellTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem, column: column().field }\"></ng-container>\n        } @else {\n            <span [class]=\"cellTextClass()\">{{ formattedDisplayValue() }}</span>\n        }\n        @if (!isCellPristine()) {\n            <span aria-hidden=\"true\" [class]=\"cellDirtyIndicatorClass()\" [title]=\"gridService.messages().modified\"></span>\n        }\n    </div>\n}\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: GridCommandCellComponent, selector: "mona-grid-command-cell", inputs: ["column", "newRow", "row"] }, { kind: "component", type: GridEditorComponent, selector: "mona-grid-editor", inputs: ["autoFocus", "column", "isNew", "session", "tabNavigationEnabled"], outputs: ["cancel", "commit", "tabNavigate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridCellComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-grid-cell", imports: [A11yModule, GridCommandCellComponent, GridEditorComponent, NgTemplateOutlet], host: {
                         "[class]": "baseClass()"
-                    }, template: "@let dataItem = row().data;\n@let dataKey = column().field;\n\n@if (column().kind === \"command\") {\n    <mona-grid-command-cell [column]=\"column()\" [row]=\"row()\"></mona-grid-command-cell>\n} @else {\n    <div\n        role=\"gridcell\"\n        [class]=\"cellContainerClass()\"\n        cdkMonitorSubtreeFocus\n        [attr.data-uid]=\"cellUid()\"\n        [attr.data-ruid]=\"row().uid\"\n        [attr.data-field]=\"dataKey\"\n        [attr.data-col-index]=\"column().index\"\n        [attr.aria-readonly]=\"!(gridService.editableOptions().enabled && column().editable)\"\n        (dblclick)=\"onCellDoubleClick($event)\">\n        @if (isEditing() && gridService.editSession(); as session) {\n            <mona-grid-editor\n                [column]=\"column()\"\n                [autoFocus]=\"shouldAutoFocusEditor()\"\n                [session]=\"session\"\n                [tabNavigationEnabled]=\"editContextIsCellMode()\"\n                (commit)=\"onEditCommit()\"\n                (cancel)=\"onEditCancel()\"\n                (tabNavigate)=\"onEditTabNavigate($event)\"></mona-grid-editor>\n        } @else if (column().cellTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"column().cellTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem, column: column().field }\"></ng-container>\n        } @else {\n            <span [class]=\"cellTextClass()\">{{ formattedDisplayValue() }}</span>\n        }\n        @if (!isCellPristine()) {\n            <span aria-hidden=\"true\" [class]=\"cellDirtyIndicatorClass()\" title=\"Modified\"></span>\n        }\n    </div>\n}\n" }]
+                    }, template: "@let dataItem = row().data;\n@let dataKey = column().field;\n\n@if (column().kind === \"command\") {\n    <mona-grid-command-cell [column]=\"column()\" [row]=\"row()\"></mona-grid-command-cell>\n} @else {\n    <div\n        role=\"gridcell\"\n        [class]=\"cellContainerClass()\"\n        cdkMonitorSubtreeFocus\n        [attr.data-uid]=\"cellUid()\"\n        [attr.data-ruid]=\"row().uid\"\n        [attr.data-field]=\"dataKey\"\n        [attr.data-col-index]=\"column().index\"\n        [attr.aria-readonly]=\"!(gridService.editableOptions().enabled && column().editable)\"\n        (dblclick)=\"onCellDoubleClick($event)\">\n        @if (isEditing() && gridService.editSession(); as session) {\n            <mona-grid-editor\n                [column]=\"column()\"\n                [autoFocus]=\"shouldAutoFocusEditor()\"\n                [session]=\"session\"\n                [tabNavigationEnabled]=\"editContextIsCellMode()\"\n                (commit)=\"onEditCommit()\"\n                (cancel)=\"onEditCancel()\"\n                (tabNavigate)=\"onEditTabNavigate($event)\"></mona-grid-editor>\n        } @else if (column().cellTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"column().cellTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem, column: column().field }\"></ng-container>\n        } @else {\n            <span [class]=\"cellTextClass()\">{{ formattedDisplayValue() }}</span>\n        }\n        @if (!isCellPristine()) {\n            <span aria-hidden=\"true\" [class]=\"cellDirtyIndicatorClass()\" [title]=\"gridService.messages().modified\"></span>\n        }\n    </div>\n}\n" }]
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
 
-const ROW_REORDER_DISABLED_REASON_TEXT = {
-    disabled: "Row reordering is disabled.",
-    editing: "Finish editing to reorder rows.",
-    filtered: "Clear filters to reorder rows.",
-    grouped: "Clear grouping to reorder rows.",
-    "single-row": "At least two rows are needed to reorder.",
-    sorted: "Clear sorting to reorder rows.",
-    "virtual-scroll": "Row reordering isn't available while virtual scrolling is enabled."
-};
 class GridRowReorderHandleComponent {
     constructor() {
         this.#gridService = inject(GridService);
@@ -780,15 +775,33 @@ class GridRowReorderHandleComponent {
             const absoluteIndex = this.pageIndex() + this.#gridService.paginationState().skip;
             const label = this.#gridService.getRowReorderAriaLabel(this.row(), absoluteIndex);
             const reasonText = this.disabledReasonText();
-            const suffix = reasonText == null ? "" : ` ${reasonText}`;
-            return `${label}. Use Alt plus Up Arrow or Alt plus Down Arrow to move.${suffix}`;
+            const messages = this.#gridService.messages();
+            return messages.rowReorderHandleAriaLabel(label, messages.rowReorderKeyboardHint, reasonText ?? undefined);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.disabled = computed(() => !this.#gridService.canReorderRow(this.row()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.disabledReasonText = computed(() => {
             const reason = this.#gridService.rowReorderDisabledReason();
-            return reason == null ? null : ROW_REORDER_DISABLED_REASON_TEXT[reason];
+            const messages = this.#gridService.messages();
+            switch (reason) {
+                case null:
+                    return null;
+                case "disabled":
+                    return messages.rowReorderDisabled;
+                case "editing":
+                    return messages.rowReorderDisabledEditing;
+                case "filtered":
+                    return messages.rowReorderDisabledFiltered;
+                case "grouped":
+                    return messages.rowReorderDisabledGrouped;
+                case "single-row":
+                    return messages.rowReorderDisabledSingleRow;
+                case "sorted":
+                    return messages.rowReorderDisabledSorted;
+                case "virtual-scroll":
+                    return messages.rowReorderDisabledVirtualScroll;
+            }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledReasonText" }] : /* istanbul ignore next */ []));
         this.handleClass = computed(() => gridRowReorderHandleThemeVariants(), /* @ts-ignore */
@@ -820,15 +833,17 @@ class GridRowReorderHandleComponent {
         const moved = this.#gridService.requestRowReorder(this.row(), this.pageIndex(), targetIndex);
         if (moved) {
             const skip = this.#gridService.paginationState().skip;
-            this.#liveAnnouncer.announce(`Moved row ${skip + this.pageIndex() + 1} to position ${skip + targetIndex + 1}.`);
+            const fromRowNumber = skip + this.pageIndex() + 1;
+            const toPosition = skip + targetIndex + 1;
+            this.#liveAnnouncer.announce(this.#gridService.messages().rowReorderMoved(fromRowNumber, toPosition));
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowReorderHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: GridRowReorderHandleComponent, isStandalone: true, selector: "mona-grid-row-reorder-handle", inputs: { pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "$event.stopPropagation()", "contextmenu": "$event.stopPropagation()", "dblclick": "$event.stopPropagation()" } }, ngImport: i0, template: "<button\n    type=\"button\"\n    cdkDragHandle\n    [class]=\"handleClass()\"\n    [disabled]=\"disabled()\"\n    [attr.title]=\"disabledReasonText()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown\"\n    (keydown)=\"onKeydown($event)\">\n    <i aria-hidden=\"true\" class=\"ri-draggable\"></i>\n</button>\n", dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: GridRowReorderHandleComponent, isStandalone: true, selector: "mona-grid-row-reorder-handle", inputs: { pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "$event.stopPropagation()", "contextmenu": "$event.stopPropagation()", "dblclick": "$event.stopPropagation()" } }, ngImport: i0, template: "<button\n    type=\"button\"\n    cdkDragHandle\n    [class]=\"handleClass()\"\n    [disabled]=\"disabled()\"\n    [attr.title]=\"disabledReasonText()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown\"\n    (keydown)=\"onKeydown($event)\">\n    <i aria-hidden=\"true\" class=\"ri-draggable\"></i>\n</button>\n", dependencies: [{ kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowReorderHandleComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-grid-row-reorder-handle", imports: [CdkDragHandle], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: "mona-grid-row-reorder-handle", imports: [CdkDragHandle], host: {
                         "(click)": "$event.stopPropagation()",
                         "(contextmenu)": "$event.stopPropagation()",
                         "(dblclick)": "$event.stopPropagation()"
@@ -843,7 +858,7 @@ class GridSelectionCheckboxComponent {
             if (labelFn) {
                 return labelFn(this.row().data);
             }
-            return `Select row ${this.rowIndex() + 1}`;
+            return this.#gridService.messages().selectRow(this.rowIndex() + 1);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.checked = computed(() => this.#gridService.isRowSelected(this.row()), /* @ts-ignore */
@@ -908,4 +923,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: true }] }, { type: i0.Output, args: ["expandedChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: true }] }] } });
 
 export { GridAddRowComponent as G, GridCellComponent as a, GridRowDirective as b, GridCellDirective as c, GridDetailRowDirective as d, GridDetailIndentCellDirective as e, GridDetailContentCellDirective as f, GridToggleComponent as g, GridSelectionCheckboxComponent as h, GridRowReorderHandleComponent as i };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-toggle.component-hc-LeIb0.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-toggle.component-B_Gm--X6.mjs.map

package/fesm2022/{nanahoshi-mona-ui-grid-grid-virtual-list.component-DYajpOb9.mjs → nanahoshi-mona-ui-grid-grid-virtual-list.component-X0X487Rm.mjs}

@@ -8,10 +8,10 @@ import { SlicePipe } from '@nanahoshi/mona-ui/common';
 import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
 import { rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { fromEvent } from 'rxjs';
-import { G as GridAddRowComponent, a as GridCellComponent, b as GridRowDirective, c as GridCellDirective, d as GridDetailRowDirective, e as GridDetailIndentCellDirective, f as GridDetailContentCellDirective, g as GridToggleComponent, h as GridSelectionCheckboxComponent, i as GridRowReorderHandleComponent } from './nanahoshi-mona-ui-grid-grid-toggle.component-hc-LeIb0.mjs';
-import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-ibH5osCg.mjs';
-import { G as GridNavigationService, c as GridService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, k as gridFooterThemeVariants, l as gridFooterTableThemeVariants, b as gridFooterTableRowThemeVariants, d as gridGroupRowThemeVariants, h as gridListTableThemeVariants, i as GridLogicalCellDirective, j as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-Pm8Fbp6M.mjs';
-import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-WEDbZ5vy.mjs';
+import { G as GridAddRowComponent, a as GridCellComponent, b as GridRowDirective, c as GridCellDirective, d as GridDetailRowDirective, e as GridDetailIndentCellDirective, f as GridDetailContentCellDirective, g as GridToggleComponent, h as GridSelectionCheckboxComponent, i as GridRowReorderHandleComponent } from './nanahoshi-mona-ui-grid-grid-toggle.component-B_Gm--X6.mjs';
+import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Dj-SaNzk.mjs';
+import { G as GridNavigationService, c as GridService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, k as gridFooterThemeVariants, l as gridFooterTableThemeVariants, b as gridFooterTableRowThemeVariants, d as gridGroupRowThemeVariants, h as gridListTableThemeVariants, i as GridLogicalCellDirective, j as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CyzJFQIy.mjs';
+import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-BuybF7tX.mjs';
 
 class GridVirtualListComponent {
     #destroyRef;
@@ -230,4 +230,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { addRowScrollElementRef: [{ type: i0.ViewChild, args: ["addRowScrollElement", { isSignal: true }] }], bodyTableElementRef: [{ type: i0.ViewChild, args: ["bodyTable", { isSignal: true }] }], footerScrollElementRef: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 export { GridVirtualListComponent };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-virtual-list.component-DYajpOb9.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-virtual-list.component-X0X487Rm.mjs.map