@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-grid-grid-toggle.component-DIUutx9s.mjs

@@ -0,0 +1,773 @@
+import * as i0 from '@angular/core';
+import { inject, computed, input, Directive, Component, signal, ElementRef, viewChild, output, effect, untracked, afterNextRender, ChangeDetectionStrategy, LOCALE_ID, model } from '@angular/core';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { k as gridListTableCellThemeVariants, l as gridDetailContentCellThemeVariants, m as gridDetailIndentCellThemeVariants, n as gridDetailRowThemeVariants, c as GridService, o as gridListTableRowThemeVariants, p as gridCellEditorBaseThemeVariants, q as gridCellEditorInputThemeVariants, h as GridLockedCellDirective, f as GridLogicalCellDirective, r as gridCellBaseThemeVariants, s as gridCellContainerThemeVariants, t as gridCellDirtyIndicatorThemeVariants, u as gridCellTextThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-C3eZIaJK.mjs';
+import { ImmutableList } from '@mirei/ts-collections';
+import * as i1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { NgTemplateOutlet, formatDate } from '@angular/common';
+import { LucideCheck, LucideOctagonAlert, LucideX, LucidePencil, LucideTrash2, LucideMinus, LucideChevronDown, LucidePlus, LucideChevronRight, LucideDynamicIcon } from '@lucide/angular';
+import { take } from 'rxjs';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { DialogService } from '@nanahoshi/mona-ui/dialog';
+import { TooltipComponent } from '@nanahoshi/mona-ui/tooltip';
+import { FormField } from '@angular/forms/signals';
+import { CheckBoxComponent } from '@nanahoshi/mona-ui/check-box';
+import { DatePickerComponent } from '@nanahoshi/mona-ui/date-picker';
+import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
+import { TextBoxComponent } from '@nanahoshi/mona-ui/text-box';
+
+class GridCellDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const dataCell = this.dataCell();
+            const groupHeader = this.groupHeader();
+            const groupToggle = this.groupToggle();
+            const grouped = this.grouped();
+            const indentCell = this.indentCell();
+            const masterDetailContent = this.masterDetailContent();
+            const masterDetailToggle = this.masterDetailToggle();
+            const lastInRow = this.lastInRow() || groupHeader || masterDetailContent;
+            return gridListTableCellThemeVariants(theme)({
+                dataCell,
+                groupHeader,
+                groupToggle,
+                grouped,
+                indentCell,
+                lastInRow,
+                masterDetailContent,
+                masterDetailToggle
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.dataCell = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataCell" }] : /* istanbul ignore next */ []));
+        this.groupHeader = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupHeader" }] : /* istanbul ignore next */ []));
+        this.groupToggle = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupToggle" }] : /* istanbul ignore next */ []));
+        this.grouped = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
+        this.indentCell = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indentCell" }] : /* istanbul ignore next */ []));
+        this.lastInRow = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastInRow" }] : /* istanbul ignore next */ []));
+        this.masterDetailContent = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "masterDetailContent" }] : /* istanbul ignore next */ []));
+        this.masterDetailToggle = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "masterDetailToggle" }] : /* istanbul ignore next */ []));
+        this.nextRowType = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextRowType" }] : /* istanbul ignore next */ []));
+        this.prevRowType = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prevRowType" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridCellDirective, isStandalone: true, selector: "td[monaGridCell]", inputs: { dataCell: { classPropertyName: "dataCell", publicName: "dataCell", isSignal: true, isRequired: false, transformFunction: null }, groupHeader: { classPropertyName: "groupHeader", publicName: "groupHeader", isSignal: true, isRequired: false, transformFunction: null }, groupToggle: { classPropertyName: "groupToggle", publicName: "groupToggle", isSignal: true, isRequired: false, transformFunction: null }, grouped: { classPropertyName: "grouped", publicName: "grouped", isSignal: true, isRequired: false, transformFunction: null }, indentCell: { classPropertyName: "indentCell", publicName: "indentCell", isSignal: true, isRequired: false, transformFunction: null }, lastInRow: { classPropertyName: "lastInRow", publicName: "lastInRow", isSignal: true, isRequired: false, transformFunction: null }, masterDetailContent: { classPropertyName: "masterDetailContent", publicName: "masterDetailContent", isSignal: true, isRequired: false, transformFunction: null }, masterDetailToggle: { classPropertyName: "masterDetailToggle", publicName: "masterDetailToggle", isSignal: true, isRequired: false, transformFunction: null }, nextRowType: { classPropertyName: "nextRowType", publicName: "nextRowType", isSignal: true, isRequired: false, transformFunction: null }, prevRowType: { classPropertyName: "prevRowType", publicName: "prevRowType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "td[monaGridCell]",
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], propDecorators: { dataCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCell", required: false }] }], groupHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupHeader", required: false }] }], groupToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupToggle", required: false }] }], grouped: [{ type: i0.Input, args: [{ isSignal: true, alias: "grouped", required: false }] }], indentCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentCell", required: false }] }], lastInRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastInRow", required: false }] }], masterDetailContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetailContent", required: false }] }], masterDetailToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetailToggle", required: false }] }], nextRowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextRowType", required: false }] }], prevRowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevRowType", required: false }] }] } });
+
+class GridDetailContentCellDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return gridDetailContentCellThemeVariants(theme)({
+                nextIsGroup: this.nextRowType() === "group"
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.nextRowType = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextRowType" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailContentCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridDetailContentCellDirective, isStandalone: true, selector: "td[monaGridDetailContentCell]", inputs: { nextRowType: { classPropertyName: "nextRowType", publicName: "nextRowType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailContentCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "td[monaGridDetailContentCell]",
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], propDecorators: { nextRowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextRowType", required: false }] }] } });
+
+class GridDetailIndentCellDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return gridDetailIndentCellThemeVariants(theme)({
+                nextIsGroup: this.nextRowType() === "group"
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.nextRowType = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextRowType" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailIndentCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridDetailIndentCellDirective, isStandalone: true, selector: "td[monaGridDetailIndentCell]", inputs: { nextRowType: { classPropertyName: "nextRowType", publicName: "nextRowType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailIndentCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "td[monaGridDetailIndentCell]",
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], propDecorators: { nextRowType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextRowType", required: false }] }] } });
+
+class GridDetailRowDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return gridDetailRowThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: GridDetailRowDirective, isStandalone: true, selector: "tr[monaGridDetailRow]", host: { properties: { "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridDetailRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "tr[monaGridDetailRow]",
+                    host: {
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }] });
+
+class GridRowDirective {
+    constructor() {
+        this.#gridService = inject(GridService);
+        this.#themeService = inject(ThemeService);
+        this.ariaRowIndex = computed(() => this.index() + this.#gridService.paginationState().skip + 2, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaRowIndex" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const selected = this.selected();
+            return gridListTableRowThemeVariants(theme)({ selected });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.selectable = computed(() => this.#gridService.selectableOptions().enabled, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+        this.expanded = computed(() => this.#gridService.isRowExpanded(this.row()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.index = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        this.row = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+        this.selected = computed(() => this.#gridService.isRowSelected(this.row()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    }
+    #gridService;
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: GridRowDirective, isStandalone: true, selector: "tr[monaGridRow]", inputs: { index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "row" }, properties: { "class": "baseClass()", "attr.data-ruid": "row().uid", "attr.data-row-view-index": "index()", "attr.aria-selected": "selectable() ? selected() : null", "attr.aria-rowindex": "ariaRowIndex()" } }, exportAs: ["monaGridRow"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "tr[monaGridRow]",
+                    host: {
+                        "[class]": "baseClass()",
+                        "[attr.data-ruid]": "row().uid",
+                        "[attr.data-row-view-index]": "index()",
+                        role: "row",
+                        "[attr.aria-selected]": "selectable() ? selected() : null",
+                        "[attr.aria-rowindex]": "ariaRowIndex()"
+                    },
+                    exportAs: "monaGridRow"
+                }]
+        }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
+
+class GridCommandCellComponent {
+    constructor() {
+        this.#dialogService = inject(DialogService);
+        this.canEditRows = computed(() => {
+            const editableOptions = this.gridService.editableOptions();
+            return editableOptions.enabled === true && editableOptions.mode === "row";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canEditRows" }] : /* istanbul ignore next */ []));
+        this.commandContext = computed(() => ({
+            $implicit: this.row()?.data ?? this.gridService.addRowData(),
+            cancel: (event) => this.cancel(event),
+            edit: (event) => this.edit(event),
+            isEditing: this.isEditing(),
+            isNew: this.newRow(),
+            remove: (event) => this.remove(event),
+            row: this.row(),
+            rowData: this.row()?.data ?? this.gridService.addRowData(),
+            save: (event) => this.save(event)
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "commandContext" }] : /* istanbul ignore next */ []));
+        this.gridService = inject(GridService);
+        this.hasRowError = computed(() => this.rowErrorMessages().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasRowError" }] : /* istanbul ignore next */ []));
+        this.isEditing = computed(() => {
+            const row = this.row();
+            const context = this.gridService.editContext();
+            return this.newRow() || (row != null && context?.mode === "row" && context.rowUid === row.uid);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
+        this.rowErrorMessages = computed(() => {
+            if (!this.isEditing()) {
+                return [];
+            }
+            const session = this.gridService.editSession();
+            if (session == null) {
+                return [];
+            }
+            return session
+                .form()
+                .errorSummary()
+                .map(error => error.message)
+                .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 */
+        ...(ngDevMode ? [{ debugName: "rowErrorTooltip" }] : /* istanbul ignore next */ []));
+        this.column = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+        this.newRow = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "newRow" }] : /* istanbul ignore next */ []));
+        this.row = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    }
+    #dialogService;
+    cancel(event) {
+        event?.stopPropagation();
+        if (this.newRow()) {
+            this.gridService.cancelAddRow(event);
+            return;
+        }
+        this.gridService.cancelEdit(event);
+    }
+    edit(event) {
+        event?.stopPropagation();
+        if (!this.canEditRows()) {
+            return;
+        }
+        const row = this.row();
+        if (row != null) {
+            this.gridService.startRowEdit(row, event);
+        }
+    }
+    remove(event) {
+        event?.stopPropagation();
+        const row = this.row();
+        if (row == null) {
+            return;
+        }
+        if (!this.column().removeConfirmation) {
+            this.gridService.removeRow(row, event);
+            return;
+        }
+        const dialogRef = this.#dialogService.show({
+            actions: [
+                { look: "error", text: "Delete" },
+                { look: "default", text: "Cancel" }
+            ],
+            closeOnEscape: true,
+            text: "Are you sure you want to delete this item?",
+            title: "Delete row?",
+            type: "warning",
+            modal: true,
+            width: 360
+        });
+        dialogRef.result.pipe(take(1)).subscribe(result => {
+            if (!result.viaClose && result.action.text === "Delete") {
+                this.gridService.removeRow(row, event);
+            }
+            dialogRef.close();
+        });
+    }
+    save(event) {
+        event?.stopPropagation();
+        if (this.newRow()) {
+            this.gridService.saveAddRow(event);
+            return;
+        }
+        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) {\r\n    <ng-container\r\n        [ngTemplateOutlet]=\"column().commandTemplate\"\r\n        [ngTemplateOutletContext]=\"commandContext()\"></ng-container>\r\n} @else {\r\n    <div class=\"flex h-full items-center gap-1 px-1\">\r\n        @if (isEditing()) {\r\n            @if (hasRowError()) {\r\n                <span class=\"shrink-0 px-1 text-error\" #rowErrorIcon>\r\n                    <svg lucideOctagonAlert [size]=\"14\"></svg>\r\n                </span>\r\n                <mona-tooltip [target]=\"rowErrorIcon\">\r\n                    <span class=\"p-1 whitespace-pre-line\">{{ rowErrorTooltip() }}</span>\r\n                </mona-tooltip>\r\n            }\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                size=\"small\"\r\n                [iconOnly]=\"true\"\r\n                aria-label=\"Save row\"\r\n                title=\"Save\"\r\n                class=\"w-6 h-6\"\r\n                [tabindex]=\"-1\"\r\n                (click)=\"save($event)\">\r\n                <svg lucideCheck [size]=\"14\"></svg>\r\n            </button>\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                size=\"small\"\r\n                [iconOnly]=\"true\"\r\n                aria-label=\"Cancel row edit\"\r\n                title=\"Cancel\"\r\n                class=\"w-6 h-6\"\r\n                [tabindex]=\"-1\"\r\n                (click)=\"cancel($event)\">\r\n                <svg lucideX [size]=\"14\"></svg>\r\n            </button>\r\n        } @else {\r\n            @if (canEditRows()) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    [iconOnly]=\"true\"\r\n                    aria-label=\"Edit row\"\r\n                    title=\"Edit\"\r\n                    class=\"w-6 h-6\"\r\n                    [tabindex]=\"-1\"\r\n                    (click)=\"edit($event)\">\r\n                    <svg lucidePencil [size]=\"14\"></svg>\r\n                </button>\r\n            }\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                size=\"small\"\r\n                [iconOnly]=\"true\"\r\n                aria-label=\"Remove row\"\r\n                title=\"Remove\"\r\n                class=\"w-6 h-6\"\r\n                [tabindex]=\"-1\"\r\n                (click)=\"remove($event)\">\r\n                <svg lucideTrash2 [size]=\"14\"></svg>\r\n            </button>\r\n        }\r\n    </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "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,
+            args: [{ selector: "mona-grid-command-cell", imports: [
+                        ButtonDirective,
+                        NgTemplateOutlet,
+                        LucideCheck,
+                        LucideOctagonAlert,
+                        LucideX,
+                        LucidePencil,
+                        LucideTrash2,
+                        TooltipComponent
+                    ], host: {
+                        class: "w-full"
+                    }, template: "@if (column().commandTemplate) {\r\n    <ng-container\r\n        [ngTemplateOutlet]=\"column().commandTemplate\"\r\n        [ngTemplateOutletContext]=\"commandContext()\"></ng-container>\r\n} @else {\r\n    <div class=\"flex h-full items-center gap-1 px-1\">\r\n        @if (isEditing()) {\r\n            @if (hasRowError()) {\r\n                <span class=\"shrink-0 px-1 text-error\" #rowErrorIcon>\r\n                    <svg lucideOctagonAlert [size]=\"14\"></svg>\r\n                </span>\r\n                <mona-tooltip [target]=\"rowErrorIcon\">\r\n                    <span class=\"p-1 whitespace-pre-line\">{{ rowErrorTooltip() }}</span>\r\n                </mona-tooltip>\r\n            }\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                size=\"small\"\r\n                [iconOnly]=\"true\"\r\n                aria-label=\"Save row\"\r\n                title=\"Save\"\r\n                class=\"w-6 h-6\"\r\n                [tabindex]=\"-1\"\r\n                (click)=\"save($event)\">\r\n                <svg lucideCheck [size]=\"14\"></svg>\r\n            </button>\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                size=\"small\"\r\n                [iconOnly]=\"true\"\r\n                aria-label=\"Cancel row edit\"\r\n                title=\"Cancel\"\r\n                class=\"w-6 h-6\"\r\n                [tabindex]=\"-1\"\r\n                (click)=\"cancel($event)\">\r\n                <svg lucideX [size]=\"14\"></svg>\r\n            </button>\r\n        } @else {\r\n            @if (canEditRows()) {\r\n                <button\r\n                    monaButton\r\n                    look=\"ghost\"\r\n                    size=\"small\"\r\n                    [iconOnly]=\"true\"\r\n                    aria-label=\"Edit row\"\r\n                    title=\"Edit\"\r\n                    class=\"w-6 h-6\"\r\n                    [tabindex]=\"-1\"\r\n                    (click)=\"edit($event)\">\r\n                    <svg lucidePencil [size]=\"14\"></svg>\r\n                </button>\r\n            }\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                size=\"small\"\r\n                [iconOnly]=\"true\"\r\n                aria-label=\"Remove row\"\r\n                title=\"Remove\"\r\n                class=\"w-6 h-6\"\r\n                [tabindex]=\"-1\"\r\n                (click)=\"remove($event)\">\r\n                <svg lucideTrash2 [size]=\"14\"></svg>\r\n            </button>\r\n        }\r\n    </div>\r\n}\r\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 }] }] } });
+
+class GridEditorComponent {
+    #datePopupOpen;
+    #elementRef;
+    #themeService;
+    #ignoreNextBooleanFocusOut;
+    constructor() {
+        this.#datePopupOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#datePopupOpen" }] : /* istanbul ignore next */ []));
+        this.#elementRef = inject((ElementRef));
+        this.#themeService = inject(ThemeService);
+        this.#ignoreNextBooleanFocusOut = false;
+        this.numericTextBoxRef = viewChild(NumericTextBoxComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numericTextBoxRef" }] : /* istanbul ignore next */ []));
+        this.textBoxRef = viewChild(TextBoxComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textBoxRef" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return gridCellEditorBaseThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.editTemplateContext = computed(() => ({
+            cancel: () => this.cancel.emit(),
+            column: this.column().field,
+            commit: () => this.commit.emit(),
+            dataField: this.column().field,
+            dataItem: this.session().model(),
+            errors: this.formField()().errors(),
+            field: this.formField(),
+            form: this.session().form,
+            invalid: this.formField()().invalid(),
+            isNew: this.isNew(),
+            session: this.session(),
+            setValue: (value) => this.#setFieldValue(value),
+            touched: this.formField()().touched(),
+            value: this.formField()().value()
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editTemplateContext" }] : /* istanbul ignore next */ []));
+        this.editorInputClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return gridCellEditorInputThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editorInputClass" }] : /* istanbul ignore next */ []));
+        this.fieldErrorMessage = computed(() => {
+            const [firstError] = this.formField()().errors();
+            return firstError?.message ?? "Invalid value.";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldErrorMessage" }] : /* istanbul ignore next */ []));
+        this.formField = computed(() => {
+            const field = this.session().form[this.column().field];
+            if (field == null) {
+                throw new Error(`No signal form field was found for grid column '${this.column().field}'.`);
+            }
+            return field;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formField" }] : /* istanbul ignore next */ []));
+        this.hasFieldError = computed(() => {
+            const field = this.formField()();
+            return field.invalid() && field.touched();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasFieldError" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Controls whether the editor focuses its input after it renders.
+         */
+        this.autoFocus = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
+        this.cancel = output();
+        this.column = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+        this.commit = output();
+        this.isNew = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isNew" }] : /* istanbul ignore next */ []));
+        this.session = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "session" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const column = this.column();
+            if (column.dataType !== "number") {
+                return;
+            }
+            const field = this.formField();
+            const value = field().value();
+            const coercedValue = this.#coerceNumberValue(value);
+            if (Object.is(value, coercedValue)) {
+                return;
+            }
+            untracked(() => field().value.set(coercedValue));
+        });
+        afterNextRender({
+            read: () => this.#focusEditor()
+        });
+    }
+    onBooleanEditorClick() {
+        this.#focusBooleanInput();
+    }
+    onBooleanEditorFocusOut(event) {
+        const relatedTarget = event.relatedTarget;
+        const editorHost = event.currentTarget;
+        if (relatedTarget && editorHost.contains(relatedTarget)) {
+            return;
+        }
+        if (this.#ignoreNextBooleanFocusOut) {
+            return;
+        }
+        this.commit.emit();
+    }
+    onBooleanEditorPointerDown() {
+        this.#ignoreNextBooleanFocusOut = true;
+        setTimeout(() => {
+            this.#ignoreNextBooleanFocusOut = false;
+        });
+    }
+    onDatePickerClose() {
+        this.#datePopupOpen.set(false);
+    }
+    onDatePickerEnter(event) {
+        if (this.#datePopupOpen()) {
+            return;
+        }
+        event.target.blur();
+    }
+    onDatePickerFocusOut(event) {
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget?.closest(".cdk-overlay-container")) {
+            return;
+        }
+        const pickerHost = event.currentTarget;
+        if (pickerHost.contains(relatedTarget)) {
+            return;
+        }
+        this.commit.emit();
+    }
+    onDatePickerOpen() {
+        this.#datePopupOpen.set(true);
+    }
+    onEditCancel() {
+        if (!this.#datePopupOpen()) {
+            this.cancel.emit();
+        }
+    }
+    #coerceNumberValue(value) {
+        if (typeof value === "number") {
+            return Number.isFinite(value) ? value : null;
+        }
+        if (typeof value !== "string") {
+            return null;
+        }
+        const normalizedValue = value.trim().replace(/,/g, "");
+        if (normalizedValue === "") {
+            return null;
+        }
+        const numberValue = Number(normalizedValue);
+        return Number.isFinite(numberValue) ? numberValue : null;
+    }
+    #focusBooleanInput() {
+        const checkbox = this.#elementRef.nativeElement.querySelector('input[type="checkbox"]');
+        checkbox?.focus();
+    }
+    #focusEditor() {
+        if (!this.autoFocus()) {
+            return;
+        }
+        this.textBoxRef()?.focus();
+        this.numericTextBoxRef()?.focus();
+        const type = this.column().dataType;
+        if (type === "date") {
+            const inputElement = this.#elementRef.nativeElement.querySelector("input");
+            inputElement?.focus();
+        }
+        if (type === "boolean") {
+            this.#focusBooleanInput();
+        }
+    }
+    #setFieldValue(value) {
+        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 } }, outputs: { cancel: "cancel", commit: "commit" }, host: { 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) {\r\n    <ng-container\r\n        [ngTemplateOutlet]=\"column().editTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: editTemplateContext() }\"></ng-container>\r\n} @else {\r\n    <div class=\"relative flex items-center w-full h-full\">\r\n        @switch (column().dataType) {\r\n            @case (\"string\") {\r\n                <mona-text-box\r\n                    [class]=\"editorInputClass()\"\r\n                    [inputAttributes]=\"{ autocomplete: 'off' }\"\r\n                    [rounded]=\"'none'\"\r\n                    [formField]=\"$any(formField())\"\r\n                    (keydown.enter)=\"commit.emit()\"\r\n                    (keydown.escape)=\"onEditCancel()\"\r\n                    (inputBlur)=\"commit.emit()\"\r\n                    [size]=\"'small'\"></mona-text-box>\r\n            }\r\n            @case (\"number\") {\r\n                <mona-numeric-text-box\r\n                    [class]=\"editorInputClass()\"\r\n                    [rounded]=\"'none'\"\r\n                    [formField]=\"$any(formField())\"\r\n                    (keydown.enter)=\"commit.emit()\"\r\n                    (keydown.escape)=\"onEditCancel()\"\r\n                    (inputBlur)=\"commit.emit()\"\r\n                    [size]=\"'small'\"></mona-numeric-text-box>\r\n            }\r\n            @case (\"boolean\") {\r\n                <mona-check-box\r\n                    class=\"{{ editorInputClass() }} ml-2\"\r\n                    [rounded]=\"'none'\"\r\n                    [formField]=\"$any(formField())\"\r\n                    (click)=\"onBooleanEditorClick()\"\r\n                    (focusout)=\"onBooleanEditorFocusOut($event)\"\r\n                    (pointerdown)=\"onBooleanEditorPointerDown()\"\r\n                    (keydown.escape)=\"onEditCancel()\"\r\n                    (keydown.enter)=\"commit.emit()\"></mona-check-box>\r\n            }\r\n            @case (\"date\") {\r\n                <mona-date-picker\r\n                    [class]=\"editorInputClass()\"\r\n                    [rounded]=\"'none'\"\r\n                    [formField]=\"$any(formField())\"\r\n                    (keydown.enter)=\"onDatePickerEnter($event)\"\r\n                    (keydown.escape)=\"onEditCancel()\"\r\n                    (focusout)=\"onDatePickerFocusOut($event)\"\r\n                    (opened)=\"onDatePickerOpen()\"\r\n                    (closed)=\"onDatePickerClose()\"\r\n                    size=\"small\"></mona-date-picker>\r\n            }\r\n        }\r\n        @if (hasFieldError()) {\r\n            <span class=\"shrink-0 px-1 text-error\" #fieldErrorIcon>\r\n                <svg lucideOctagonAlert [size]=\"12\"></svg>\r\n            </span>\r\n            <mona-tooltip [target]=\"fieldErrorIcon\">\r\n                <span class=\"p-1\">{{ fieldErrorMessage() }}</span>\r\n            </mona-tooltip>\r\n        }\r\n    </div>\r\n}\r\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-grid-editor", imports: [
+                        CheckBoxComponent,
+                        DatePickerComponent,
+                        FormField,
+                        LucideOctagonAlert,
+                        NgTemplateOutlet,
+                        NumericTextBoxComponent,
+                        TextBoxComponent,
+                        TooltipComponent
+                    ], host: {
+                        "[class]": "baseClass()"
+                    }, template: "@if (column().editTemplate) {\r\n    <ng-container\r\n        [ngTemplateOutlet]=\"column().editTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: editTemplateContext() }\"></ng-container>\r\n} @else {\r\n    <div class=\"relative flex items-center w-full h-full\">\r\n        @switch (column().dataType) {\r\n            @case (\"string\") {\r\n                <mona-text-box\r\n                    [class]=\"editorInputClass()\"\r\n                    [inputAttributes]=\"{ autocomplete: 'off' }\"\r\n                    [rounded]=\"'none'\"\r\n                    [formField]=\"$any(formField())\"\r\n                    (keydown.enter)=\"commit.emit()\"\r\n                    (keydown.escape)=\"onEditCancel()\"\r\n                    (inputBlur)=\"commit.emit()\"\r\n                    [size]=\"'small'\"></mona-text-box>\r\n            }\r\n            @case (\"number\") {\r\n                <mona-numeric-text-box\r\n                    [class]=\"editorInputClass()\"\r\n                    [rounded]=\"'none'\"\r\n                    [formField]=\"$any(formField())\"\r\n                    (keydown.enter)=\"commit.emit()\"\r\n                    (keydown.escape)=\"onEditCancel()\"\r\n                    (inputBlur)=\"commit.emit()\"\r\n                    [size]=\"'small'\"></mona-numeric-text-box>\r\n            }\r\n            @case (\"boolean\") {\r\n                <mona-check-box\r\n                    class=\"{{ editorInputClass() }} ml-2\"\r\n                    [rounded]=\"'none'\"\r\n                    [formField]=\"$any(formField())\"\r\n                    (click)=\"onBooleanEditorClick()\"\r\n                    (focusout)=\"onBooleanEditorFocusOut($event)\"\r\n                    (pointerdown)=\"onBooleanEditorPointerDown()\"\r\n                    (keydown.escape)=\"onEditCancel()\"\r\n                    (keydown.enter)=\"commit.emit()\"></mona-check-box>\r\n            }\r\n            @case (\"date\") {\r\n                <mona-date-picker\r\n                    [class]=\"editorInputClass()\"\r\n                    [rounded]=\"'none'\"\r\n                    [formField]=\"$any(formField())\"\r\n                    (keydown.enter)=\"onDatePickerEnter($event)\"\r\n                    (keydown.escape)=\"onEditCancel()\"\r\n                    (focusout)=\"onDatePickerFocusOut($event)\"\r\n                    (opened)=\"onDatePickerOpen()\"\r\n                    (closed)=\"onDatePickerClose()\"\r\n                    size=\"small\"></mona-date-picker>\r\n            }\r\n        }\r\n        @if (hasFieldError()) {\r\n            <span class=\"shrink-0 px-1 text-error\" #fieldErrorIcon>\r\n                <svg lucideOctagonAlert [size]=\"12\"></svg>\r\n            </span>\r\n            <mona-tooltip [target]=\"fieldErrorIcon\">\r\n                <span class=\"p-1\">{{ fieldErrorMessage() }}</span>\r\n            </mona-tooltip>\r\n        }\r\n    </div>\r\n}\r\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 }] }] } });
+
+class GridAddRowComponent {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return gridListTableRowThemeVariants(theme)({ selected: false });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.gridService = inject(GridService);
+        this.columns = input(ImmutableList.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    onCancel() {
+        this.gridService.cancelAddRow();
+    }
+    onCommit() {
+        // Add rows are committed by the command column or toolbar save command.
+    }
+    isFirstEditableColumn(column) {
+        return this.columns().firstOrDefault(c => c.kind === "data" && c.editable) === column;
+    }
+    onValueChange(column, value) {
+        this.gridService.patchAddCell(column.field, value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridAddRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridAddRowComponent, isStandalone: true, selector: "tr[monaGridAddRow]", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "row", "data-grid-add-row": "true" }, properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (gridService.addRowData(); as rowData) {\r\n    @let session = gridService.editSession();\r\n    @for (_ of gridService.groupColumns(); track $index) {\r\n        <td\r\n            monaGridCell\r\n            monaGridLockedCell\r\n            [lockedCellHeader]=\"true\"\r\n            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\r\n            [grouped]=\"true\"\r\n            [indentCell]=\"true\"\r\n            [attr.colspan]=\"1\"\r\n            [style.width.px]=\"gridService.groupColumnWidth\"></td>\r\n    }\r\n    @if (gridService.masterDetailTemplate()) {\r\n        <td\r\n            monaGridCell\r\n            monaGridLogicalCell\r\n            monaGridLockedCell\r\n            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\r\n            [masterDetailToggle]=\"true\"\r\n            [rowIndex]=\"-1\"\r\n            [colIndex]=\"0\"\r\n            [cellKind]=\"'detail'\"\r\n            [firstInRow]=\"true\"\r\n            [lastInRow]=\"columns().length === 0\"\r\n            [section]=\"'add'\"\r\n            [style.width.px]=\"gridService.detailColumnWidth\"></td>\r\n    }\r\n    @for (column of columns(); track $index) {\r\n        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\r\n        <td\r\n            monaGridCell\r\n            monaGridLockedCell\r\n            [column]=\"column\"\r\n            [dataCell]=\"true\"\r\n            monaGridLogicalCell\r\n            [cellKind]=\"column.kind\"\r\n            [colIndex]=\"colIndex\"\r\n            [columnId]=\"column.id\"\r\n            [rowIndex]=\"-1\"\r\n            [section]=\"'add'\"\r\n            [firstInRow]=\"colIndex === 0\"\r\n            [lastInRow]=\"colIndex === columns().length - (gridService.masterDetailTemplate() ? 0 : 1)\"\r\n            [attr.colspan]=\"1\"\r\n            [style.width.px]=\"column.calculatedWidth\"\r\n            [style.min-width.px]=\"column.minWidth\">\r\n            @if (column.kind === \"command\") {\r\n                <mona-grid-command-cell [column]=\"column\" [newRow]=\"true\"></mona-grid-command-cell>\r\n            } @else if (column.editable && session) {\r\n                <mona-grid-editor\r\n                    [column]=\"column\"\r\n                    [autoFocus]=\"isFirstEditableColumn(column)\"\r\n                    [isNew]=\"true\"\r\n                    [session]=\"session\"\r\n                    (commit)=\"onCommit()\"\r\n                    (cancel)=\"onCancel()\"></mona-grid-editor>\r\n            } @else {\r\n                <span class=\"block truncate px-2\">{{ rowData[column.field] }}</span>\r\n            }\r\n        </td>\r\n    }\r\n}\r\n", dependencies: [{ kind: "directive", type: GridCellDirective, selector: "td[monaGridCell]", inputs: ["dataCell", "groupHeader", "groupToggle", "grouped", "indentCell", "lastInRow", "masterDetailContent", "masterDetailToggle", "nextRowType", "prevRowType"] }, { 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"], outputs: ["cancel", "commit"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "lockedCellHeader", "lockedStructuralOffset"] }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridAddRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tr[monaGridAddRow]", changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        GridCellDirective,
+                        GridCommandCellComponent,
+                        GridEditorComponent,
+                        GridLockedCellDirective,
+                        GridLogicalCellDirective
+                    ], host: {
+                        "[class]": "baseClass()",
+                        role: "row",
+                        "data-grid-add-row": "true"
+                    }, template: "@if (gridService.addRowData(); as rowData) {\r\n    @let session = gridService.editSession();\r\n    @for (_ of gridService.groupColumns(); track $index) {\r\n        <td\r\n            monaGridCell\r\n            monaGridLockedCell\r\n            [lockedCellHeader]=\"true\"\r\n            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\r\n            [grouped]=\"true\"\r\n            [indentCell]=\"true\"\r\n            [attr.colspan]=\"1\"\r\n            [style.width.px]=\"gridService.groupColumnWidth\"></td>\r\n    }\r\n    @if (gridService.masterDetailTemplate()) {\r\n        <td\r\n            monaGridCell\r\n            monaGridLogicalCell\r\n            monaGridLockedCell\r\n            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\r\n            [masterDetailToggle]=\"true\"\r\n            [rowIndex]=\"-1\"\r\n            [colIndex]=\"0\"\r\n            [cellKind]=\"'detail'\"\r\n            [firstInRow]=\"true\"\r\n            [lastInRow]=\"columns().length === 0\"\r\n            [section]=\"'add'\"\r\n            [style.width.px]=\"gridService.detailColumnWidth\"></td>\r\n    }\r\n    @for (column of columns(); track $index) {\r\n        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\r\n        <td\r\n            monaGridCell\r\n            monaGridLockedCell\r\n            [column]=\"column\"\r\n            [dataCell]=\"true\"\r\n            monaGridLogicalCell\r\n            [cellKind]=\"column.kind\"\r\n            [colIndex]=\"colIndex\"\r\n            [columnId]=\"column.id\"\r\n            [rowIndex]=\"-1\"\r\n            [section]=\"'add'\"\r\n            [firstInRow]=\"colIndex === 0\"\r\n            [lastInRow]=\"colIndex === columns().length - (gridService.masterDetailTemplate() ? 0 : 1)\"\r\n            [attr.colspan]=\"1\"\r\n            [style.width.px]=\"column.calculatedWidth\"\r\n            [style.min-width.px]=\"column.minWidth\">\r\n            @if (column.kind === \"command\") {\r\n                <mona-grid-command-cell [column]=\"column\" [newRow]=\"true\"></mona-grid-command-cell>\r\n            } @else if (column.editable && session) {\r\n                <mona-grid-editor\r\n                    [column]=\"column\"\r\n                    [autoFocus]=\"isFirstEditableColumn(column)\"\r\n                    [isNew]=\"true\"\r\n                    [session]=\"session\"\r\n                    (commit)=\"onCommit()\"\r\n                    (cancel)=\"onCancel()\"></mona-grid-editor>\r\n            } @else {\r\n                <span class=\"block truncate px-2\">{{ rowData[column.field] }}</span>\r\n            }\r\n        </td>\r\n    }\r\n}\r\n" }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
+
+const FOCUSABLE_TARGET_SELECTOR = "button, input, select, textarea, a[href], [tabindex]";
+class GridCellComponent {
+    constructor() {
+        this.#elementRef = inject((ElementRef));
+        this.#locale = inject(LOCALE_ID);
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return gridCellBaseThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.cellContainerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const editing = this.isEditing();
+            return gridCellContainerThemeVariants(theme)({ editing });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellContainerClass" }] : /* istanbul ignore next */ []));
+        this.cellDirtyIndicatorClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return gridCellDirtyIndicatorThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellDirtyIndicatorClass" }] : /* istanbul ignore next */ []));
+        this.cellTextClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return gridCellTextThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellTextClass" }] : /* istanbul ignore next */ []));
+        this.cellUid = computed(() => `${this.row().uid}_${this.column().field}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellUid" }] : /* istanbul ignore next */ []));
+        this.displayValue = computed(() => {
+            const editedRowData = this.gridService.editViewDict().get(this.row().uid);
+            const rowData = this.row().data;
+            const effectiveRowData = editedRowData ?? rowData;
+            return effectiveRowData[this.column().field];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+        this.formattedDisplayValue = computed(() => {
+            const column = this.column();
+            const value = this.displayValue();
+            const format = column.format;
+            if (format == null) {
+                return value;
+            }
+            if (typeof format === "function") {
+                return format(column);
+            }
+            if (column.dataType === "date") {
+                return this.formatDateValue(value, format);
+            }
+            return value;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formattedDisplayValue" }] : /* istanbul ignore next */ []));
+        this.gridService = inject(GridService);
+        this.isCellPristine = computed(() => {
+            const rowUid = this.row().uid;
+            const field = this.column().field;
+            const originalRowData = this.gridService.editBaseDict().get(rowUid);
+            const editedRowData = this.gridService.editViewDict().get(rowUid);
+            if (!originalRowData || !editedRowData) {
+                return true;
+            }
+            return originalRowData[field] === editedRowData[field];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCellPristine" }] : /* istanbul ignore next */ []));
+        this.isEditing = computed(() => {
+            const context = this.gridService.editContext();
+            if (context == null) {
+                return false;
+            }
+            if (context.mode === "cell") {
+                return context.cellUid === this.cellUid();
+            }
+            return context.rowUid === this.row().uid && this.column().editable;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
+        this.shouldAutoFocusEditor = computed(() => {
+            const context = this.gridService.editContext();
+            if (context?.mode === "cell") {
+                return context.cellUid === this.cellUid();
+            }
+            if (context?.mode !== "row" || context.rowUid !== this.row().uid) {
+                return false;
+            }
+            return (this.gridService.visibleColumns().firstOrDefault(column => column.kind === "data" && column.editable) ===
+                this.column());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shouldAutoFocusEditor" }] : /* istanbul ignore next */ []));
+        this.column = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+        this.row = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    }
+    #elementRef;
+    #locale;
+    #themeService;
+    handleLogicalCellEnter(originalEvent) {
+        if (!this.gridService.editableOptions().enabled || !this.column().editable || this.column().kind !== "data") {
+            return;
+        }
+        const editableOptions = this.gridService.editableOptions();
+        if (editableOptions.mode === "cell") {
+            this.startEdit(originalEvent);
+            return;
+        }
+        const context = this.gridService.editContext();
+        if (context?.mode === "row" && context.rowUid === this.row().uid) {
+            this.focusInnerEditor();
+            return;
+        }
+        this.gridService.startRowEdit(this.row(), originalEvent);
+    }
+    onCellDoubleClick(event) {
+        if (this.gridService.editableOptions().mode === "cell") {
+            this.startEdit(event);
+        }
+    }
+    onCellValueChange(value) {
+        this.gridService.patchCellEdit(this.row().uid, this.column().field, value);
+    }
+    onEditCancel() {
+        const context = this.gridService.editContext();
+        if (context?.mode === "cell") {
+            this.gridService.cancelEdit();
+        }
+        this.focusHostCell();
+    }
+    onEditCommit() {
+        const context = this.gridService.editContext();
+        if (context && context.mode === "cell") {
+            if (this.gridService.stopCellEdit()) {
+                this.focusHostCell();
+            }
+            return;
+        }
+        if (this.#elementRef.nativeElement.contains(this.#elementRef.nativeElement.ownerDocument.activeElement)) {
+            this.focusHostCell();
+        }
+    }
+    focusHostCell() {
+        const cellElement = this.#elementRef.nativeElement.closest("td");
+        cellElement?.focus();
+    }
+    focusInnerEditor() {
+        const target = this.#elementRef.nativeElement.querySelector(FOCUSABLE_TARGET_SELECTOR);
+        target?.focus();
+    }
+    formatDateValue(value, format) {
+        if (value == null) {
+            return value;
+        }
+        if (value instanceof Date || typeof value === "number" || typeof value === "string") {
+            try {
+                return formatDate(value, format, this.#locale);
+            }
+            catch {
+                return value;
+            }
+        }
+        return value;
+    }
+    startEdit(originalEvent) {
+        if (!this.gridService.editableOptions().enabled || !this.column().editable || this.column().kind !== "data") {
+            return;
+        }
+        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;\r\n@let dataKey = column().field;\r\n\r\n@if (column().kind === \"command\") {\r\n    <mona-grid-command-cell [column]=\"column()\" [row]=\"row()\"></mona-grid-command-cell>\r\n} @else {\r\n    <div\r\n        role=\"gridcell\"\r\n        [class]=\"cellContainerClass()\"\r\n        cdkMonitorSubtreeFocus\r\n        [attr.data-uid]=\"cellUid()\"\r\n        [attr.data-ruid]=\"row().uid\"\r\n        [attr.data-field]=\"dataKey\"\r\n        [attr.data-col-index]=\"column().index\"\r\n        [attr.aria-readonly]=\"!(gridService.editableOptions().enabled && column().editable)\"\r\n        (dblclick)=\"onCellDoubleClick($event)\">\r\n        @if (isEditing() && gridService.editSession(); as session) {\r\n            <mona-grid-editor\r\n                [column]=\"column()\"\r\n                [autoFocus]=\"shouldAutoFocusEditor()\"\r\n                [session]=\"session\"\r\n                (commit)=\"onEditCommit()\"\r\n                (cancel)=\"onEditCancel()\"></mona-grid-editor>\r\n        } @else if (column().cellTemplate) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"column().cellTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem, column: column().field }\"></ng-container>\r\n        } @else {\r\n            <span [class]=\"cellTextClass()\">{{ formattedDisplayValue() }}</span>\r\n        }\r\n        @if (!isCellPristine()) {\r\n            <span aria-hidden=\"true\" [class]=\"cellDirtyIndicatorClass()\" title=\"Modified\"></span>\r\n        }\r\n    </div>\r\n}\r\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"], outputs: ["cancel", "commit"] }, { 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;\r\n@let dataKey = column().field;\r\n\r\n@if (column().kind === \"command\") {\r\n    <mona-grid-command-cell [column]=\"column()\" [row]=\"row()\"></mona-grid-command-cell>\r\n} @else {\r\n    <div\r\n        role=\"gridcell\"\r\n        [class]=\"cellContainerClass()\"\r\n        cdkMonitorSubtreeFocus\r\n        [attr.data-uid]=\"cellUid()\"\r\n        [attr.data-ruid]=\"row().uid\"\r\n        [attr.data-field]=\"dataKey\"\r\n        [attr.data-col-index]=\"column().index\"\r\n        [attr.aria-readonly]=\"!(gridService.editableOptions().enabled && column().editable)\"\r\n        (dblclick)=\"onCellDoubleClick($event)\">\r\n        @if (isEditing() && gridService.editSession(); as session) {\r\n            <mona-grid-editor\r\n                [column]=\"column()\"\r\n                [autoFocus]=\"shouldAutoFocusEditor()\"\r\n                [session]=\"session\"\r\n                (commit)=\"onEditCommit()\"\r\n                (cancel)=\"onEditCancel()\"></mona-grid-editor>\r\n        } @else if (column().cellTemplate) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"column().cellTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: dataItem, column: column().field }\"></ng-container>\r\n        } @else {\r\n            <span [class]=\"cellTextClass()\">{{ formattedDisplayValue() }}</span>\r\n        }\r\n        @if (!isCellPristine()) {\r\n            <span aria-hidden=\"true\" [class]=\"cellDirtyIndicatorClass()\" title=\"Modified\"></span>\r\n        }\r\n    </div>\r\n}\r\n" }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
+
+class GridToggleComponent {
+    constructor() {
+        this.collapseIcon = computed(() => {
+            const type = this.type();
+            return type === "detail" ? LucideMinus : LucideChevronDown;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapseIcon" }] : /* istanbul ignore next */ []));
+        this.expandIcon = computed(() => {
+            const type = this.type();
+            return type === "detail" ? LucidePlus : LucideChevronRight;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandIcon" }] : /* istanbul ignore next */ []));
+        this.expanded = model.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.type = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        this.width = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    }
+    onToggleDetailClick(event) {
+        event.stopPropagation();
+        this.expanded.update(v => !v);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridToggleComponent, isStandalone: true, selector: "mona-grid-toggle", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<span\r\n    [style.width.px]=\"width()\"\r\n    class=\"inline-flex items-center justify-center h-full aspect-square\"\r\n    (click)=\"onToggleDetailClick($event)\">\r\n    @if (expanded()) {\r\n        <svg [lucideIcon]=\"collapseIcon()\" [size]=\"16\"></svg>\r\n    } @else {\r\n        <svg [lucideIcon]=\"expandIcon()\" [size]=\"16\"></svg>\r\n    }\r\n</span>\r\n", dependencies: [{ kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-grid-toggle", imports: [LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\r\n    [style.width.px]=\"width()\"\r\n    class=\"inline-flex items-center justify-center h-full aspect-square\"\r\n    (click)=\"onToggleDetailClick($event)\">\r\n    @if (expanded()) {\r\n        <svg [lucideIcon]=\"collapseIcon()\" [size]=\"16\"></svg>\r\n    } @else {\r\n        <svg [lucideIcon]=\"expandIcon()\" [size]=\"16\"></svg>\r\n    }\r\n</span>\r\n" }]
+        }], 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 };
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-toggle.component-DIUutx9s.mjs.map