@nanahoshi/mona-ui 0.7.1 → 0.9.0

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

@@ -1,8 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { computed, model, input, output, Component, Directive } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { themeControlSurfaceClasses } from '@nanahoshi/mona-ui/internal';
@@ -221,28 +219,27 @@ class CheckBoxComponent {
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
     }
-    onCheckedChange(checked) {
-        this.checked.set(checked);
+    onInputBlur(event) {
+        this.inputBlur.emit(event);
+        this.touch.emit();
     }
     onInputChange(event) {
+        const checked = event.target.checked;
+        this.checked.set(checked);
         this.inputChange.emit(event);
         this.touch.emit();
     }
-    onInputBlur(event) {
-        this.inputBlur.emit(event);
-        this.touch.emit();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CheckBoxComponent, isStandalone: true, selector: "mona-check-box", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", inputBlur: "inputBlur", inputChange: "inputChange", inputFocus: "inputFocus", touch: "touch" }, host: { properties: { "class": "'flex'", "attr.data-checked": "checked()", "attr.data-disabled": "disabled()", "attr.data-indeterminate": "indeterminate()" } }, ngImport: i0, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n\n    <input\n        type=\"checkbox\"\n        [disabled]=\"disabled()\"\n        [indeterminate]=\"indeterminate()\"\n        [required]=\"required()\"\n        [ngModel]=\"checked()\"\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\n        [class]=\"checkBoxClasses()\"\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n        [attr.aria-label]=\"label() || null\"\n        (change)=\"onInputChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (ngModelChange)=\"onCheckedChange($event)\"\n        #checkBox />\n\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\n        @if (checked()) {\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                class=\"lucide lucide-check stroke-primary-foreground\">\n                <path d=\"M18 6 9 17l-5-5\" />\n            </svg>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CheckBoxComponent, isStandalone: true, selector: "mona-check-box", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", inputBlur: "inputBlur", inputChange: "inputChange", inputFocus: "inputFocus", touch: "touch" }, host: { properties: { "class": "'flex'", "attr.data-checked": "checked()", "attr.data-disabled": "disabled()", "attr.data-indeterminate": "indeterminate()" } }, ngImport: i0, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n\n    <input\n        type=\"checkbox\"\n        [disabled]=\"disabled()\"\n        [indeterminate]=\"indeterminate()\"\n        [required]=\"required()\"\n        [checked]=\"checked()\"\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\n        [class]=\"checkBoxClasses()\"\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n        [attr.aria-label]=\"label() || null\"\n        (change)=\"onInputChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        #checkBox />\n\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\n        @if (checked()) {\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                class=\"lucide lucide-check stroke-primary-foreground\">\n                <path d=\"M18 6 9 17l-5-5\" />\n            </svg>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-check-box", imports: [FormsModule, NgTemplateOutlet], host: {
+            args: [{ selector: "mona-check-box", imports: [NgTemplateOutlet], host: {
                         "[class]": "'flex'",
                         "[attr.data-checked]": "checked()",
                         "[attr.data-disabled]": "disabled()",
                         "[attr.data-indeterminate]": "indeterminate()"
-                    }, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n\n    <input\n        type=\"checkbox\"\n        [disabled]=\"disabled()\"\n        [indeterminate]=\"indeterminate()\"\n        [required]=\"required()\"\n        [ngModel]=\"checked()\"\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\n        [class]=\"checkBoxClasses()\"\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n        [attr.aria-label]=\"label() || null\"\n        (change)=\"onInputChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (ngModelChange)=\"onCheckedChange($event)\"\n        #checkBox />\n\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\n        @if (checked()) {\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                class=\"lucide lucide-check stroke-primary-foreground\">\n                <path d=\"M18 6 9 17l-5-5\" />\n            </svg>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n" }]
+                    }, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n\n    <input\n        type=\"checkbox\"\n        [disabled]=\"disabled()\"\n        [indeterminate]=\"indeterminate()\"\n        [required]=\"required()\"\n        [checked]=\"checked()\"\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\n        [class]=\"checkBoxClasses()\"\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n        [attr.aria-label]=\"label() || null\"\n        (change)=\"onInputChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        #checkBox />\n\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\n        @if (checked()) {\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                class=\"lucide lucide-check stroke-primary-foreground\">\n                <path d=\"M18 6 9 17l-5-5\" />\n            </svg>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n" }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSize", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CheckboxDirective {

package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-cell.component-BbBPZj7t.mjs → nanahoshi-mona-ui-grid-grid-footer-cell.component-D05Rq7-1.mjs}

@@ -2,7 +2,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, computed, input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { ImmutableDictionary } from '@mirei/ts-collections';
-import { c as GridService } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DWzYyGnb.mjs';
+import { c as GridService } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-RQvhjBse.mjs';
 
 class GridFooterCellComponent {
     constructor() {
@@ -102,4 +102,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], columnIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnIndex", required: true }] }], groupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKey", required: false }] }] } });
 
 export { GridFooterCellComponent };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-cell.component-BbBPZj7t.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-cell.component-D05Rq7-1.mjs.map

package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-BkISJoqL.mjs → nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Bad0K1Cw.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { computed, input, Directive } from '@angular/core';
-import { v as gridFooterTableCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DWzYyGnb.mjs';
+import { w as gridFooterTableCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-RQvhjBse.mjs';
 
 class GridFooterTableCellDirective {
     constructor() {
@@ -35,4 +35,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], propDecorators: { footerCellMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerCellMinWidth", required: false }] }], footerCellWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerCellWidth", required: false }] }], footerColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerColumn", required: false }] }] } });
 
 export { GridFooterTableCellDirective };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-BkISJoqL.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Bad0K1Cw.mjs.map

package/fesm2022/nanahoshi-mona-ui-grid-grid-list.component-QqUUL60F.mjs

@@ -0,0 +1,122 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, ElementRef, viewChild, computed, input, afterNextRender, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ImmutableList, ImmutableSet, span } from '@mirei/ts-collections';
+import { SlicePipe } from '@nanahoshi/mona-ui/common';
+import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
+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 } from './nanahoshi-mona-ui-grid-grid-toggle.component-DvuQvc7E.mjs';
+import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-Bad0K1Cw.mjs';
+import { G as GridNavigationService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, b as gridFooterTableRowThemeVariants, c as GridService, d as gridGroupRowThemeVariants, e as gridListTableThemeVariants, f as GridLogicalCellDirective, h as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-RQvhjBse.mjs';
+import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-D05Rq7-1.mjs';
+
+class GridListComponent {
+    #destroyRef;
+    #gridNavigationService;
+    #hostElementRef;
+    #rowFlattener;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#gridNavigationService = inject(GridNavigationService);
+        this.#hostElementRef = inject((ElementRef));
+        this.#rowFlattener = inject(GridRowFlattenerService);
+        this.bodyTableElementRef = viewChild.required("bodyTable", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bodyTableElementRef" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            return gridListBaseThemeVariants({ virtual: false });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.flattenedGroupedRows = computed(() => {
+            const groupColumns = this.gridService.groupColumns();
+            if (groupColumns.length === 0) {
+                return [];
+            }
+            const collapsedKeys = new Set(this.gridService.collapsedGroupKeys());
+            const groupAggregateDict = this.gridService.groupAggregateMap().toDictionary(e => e.key, e => e.value);
+            const showFooter = this.gridService.groupableOptions().showFooter;
+            return this.#rowFlattener.flatten(this.data(), groupColumns, collapsedKeys, showFooter, groupAggregateDict);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "flattenedGroupedRows" }] : /* istanbul ignore next */ []));
+        this.footerTableRowClass = computed(() => {
+            return gridFooterTableRowThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerTableRowClass" }] : /* istanbul ignore next */ []));
+        this.gridService = inject(GridService);
+        this.groupRowClass = computed(() => {
+            return gridGroupRowThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupRowClass" }] : /* istanbul ignore next */ []));
+        this.tableClass = computed(() => {
+            return gridListTableThemeVariants();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
+        this.columns = input(ImmutableList.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.data = input(ImmutableSet.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.span = span;
+        afterNextRender({
+            read: () => {
+                const bodyTableElement = this.bodyTableElementRef().nativeElement;
+                const bodyScrollElement = this.#hostElementRef.nativeElement;
+                this.gridService.bodyTableElement.set(bodyTableElement);
+                this.gridService.bodyScrollElement.set(bodyScrollElement);
+                this.setSubscriptions();
+                this.#destroyRef.onDestroy(() => {
+                    if (this.gridService.bodyTableElement() === bodyTableElement) {
+                        this.gridService.bodyTableElement.set(null);
+                    }
+                    if (this.gridService.bodyScrollElement() === bodyScrollElement) {
+                        this.gridService.bodyScrollElement.set(null);
+                    }
+                });
+            }
+        });
+    }
+    onGridRowClick(event, row) {
+        this.gridService.handleRowClick(event, row);
+    }
+    onGroupExpandChange(groupKey) {
+        this.gridService.toggleGroupCollapse(groupKey);
+    }
+    onToggleDetailClick(row) {
+        const expanded = this.gridService.isRowExpanded(row);
+        this.gridService.setRowExpanded(row, !expanded);
+    }
+    setSubscriptions() {
+        fromEvent(this.#hostElementRef.nativeElement, "focus")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => {
+            this.#gridNavigationService.focusActiveCellOrFirstHeader();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridListComponent, isStandalone: true, selector: "mona-grid-list", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "bodyTableElementRef", first: true, predicate: ["bodyTable"], descendants: true, isSignal: true }], ngImport: i0, template: "<table #bodyTable [class]=\"tableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n    <colgroup>\n        @for (_ of gridService.groupColumns(); track $index) {\n            <col [style.width.px]=\"gridService.groupColumnWidth\" />\n        }\n        @if (gridService.masterDetailTemplate()) {\n            <col [style.width.px]=\"gridService.groupColumnWidth\" />\n        }\n        @if (gridService.selectionColumnVisible()) {\n            <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n        }\n        @for (col of columns(); track $index) {\n            <col [style.width.px]=\"col.calculatedWidth\" />\n        }\n    </colgroup>\n    <tbody role=\"rowgroup\">\n        @if (gridService.addRowVisible()) {\n            <tr monaGridAddRow [columns]=\"columns()\"></tr>\n        }\n        @if (gridService.groupColumns().length === 0) {\n            @for (row of data(); track row.uid) {\n                @let rowIndex = $index;\n                <tr\n                    (click)=\"onGridRowClick($event, row)\"\n                    monaGridRow\n                    [index]=\"rowIndex\"\n                    [row]=\"row\"\n                    #gridRow=\"monaGridRow\"\n                    #rowElement>\n                    @if (gridService.masterDetailTemplate()) {\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [lockedStructuralOffset]=\"0\"\n                            [masterDetailToggle]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'detail'\"\n                            [colIndex]=\"0\"\n                            [firstInRow]=\"true\"\n                            [lastInRow]=\"columns().length === 0 && !gridService.selectionColumnVisible()\"\n                            [rowIndex]=\"rowIndex\"\n                            [rowUid]=\"row.uid\"\n                            [section]=\"'body'\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"\n                            [attr.colspan]=\"1\">\n                            <span class=\"flex h-full w-full items-stretch justify-center\">\n                                <mona-grid-toggle\n                                    [expanded]=\"gridRow.expanded()\"\n                                    [type]=\"'detail'\"\n                                    [width]=\"gridService.detailColumnWidth\"\n                                    (expandedChange)=\"onToggleDetailClick(row)\"></mona-grid-toggle>\n                            </span>\n                        </td>\n                    }\n                    @if (gridService.selectionColumnVisible()) {\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'command'\"\n                            [columnId]=\"'$selection'\"\n                            [rowIndex]=\"rowIndex\"\n                            [rowUid]=\"row.uid\"\n                            [section]=\"'body'\"\n                            [colIndex]=\"gridService.masterDetailTemplate() ? 1 : 0\"\n                            [firstInRow]=\"!gridService.masterDetailTemplate()\"\n                            [lastInRow]=\"columns().length === 0\"\n                            [style.width.px]=\"gridService.selectionColumnWidth\"\n                            [attr.colspan]=\"1\">\n                            <mona-grid-selection-checkbox [row]=\"row\" [rowIndex]=\"rowIndex\" />\n                        </td>\n                    }\n                    @for (column of columns(); track $index) {\n                        @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [dataCell]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"column.kind\"\n                            [colIndex]=\"colIndex\"\n                            [columnId]=\"column.id\"\n                            [editable]=\"\n                                gridService.editableOptions().enabled === true &&\n                                gridService.editableOptions().mode === 'cell' &&\n                                column.kind === 'data' &&\n                                column.editable === true\n                            \"\n                            [rowIndex]=\"rowIndex\"\n                            [rowUid]=\"row.uid\"\n                            [section]=\"'body'\"\n                            [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                            [lastInRow]=\"\n                                colIndex ===\n                                gridService.leadingLogicalColumnCount() + columns().length - 1\n                            \"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"column.calculatedWidth\"\n                            [style.min-width.px]=\"column.minWidth\"\n                            (edit)=\"gridCell.handleLogicalCellEnter()\">\n                            <mona-grid-cell #gridCell [column]=\"column\" [row]=\"row\"></mona-grid-cell>\n                        </td>\n                    }\n                    @if (gridService.contextMenuItems().length !== 0) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"contextMenuTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: row.data, element: rowElement, index: $index }\">\n                        </ng-container>\n                    }\n                </tr>\n                @if (gridRow.expanded()) {\n                    <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [lockedStructuralOffset]=\"0\"\n                            [indentCell]=\"true\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n                        @if (gridService.selectionColumnVisible()) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n                        }\n                        <td monaGridCell [masterDetailContent]=\"true\" [attr.colspan]=\"columns().length\">\n                            <ng-container\n                                [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n                                [ngTemplateOutletContext]=\"{ $implicit: row.data }\"></ng-container>\n                        </td>\n                    </tr>\n                }\n            }\n        } @else {\n            @for (viewRow of flattenedGroupedRows(); track $index) {\n                @let rowIndex = $index;\n                @if (viewRow.type === \"group\") {\n                    @let isCollapsed = gridService.isGroupCollapsed(viewRow.groupKey);\n                    @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n\n                    <tr\n                        [class]=\"groupRowClass()\"\n                        role=\"row\"\n                        [attr.aria-level]=\"viewRow.depth + 1\"\n                        [attr.aria-expanded]=\"!isCollapsed\">\n                        @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth; track $index) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                [grouped]=\"true\"\n                                [indentCell]=\"true\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                        }\n                        @let colspan =\n                            columns().length +\n                            gridService.groupColumns().length +\n                            (gridService.masterDetailTemplate() ? 1 : 0) +\n                            (gridService.selectionColumnVisible() ? 1 : 0) -\n                            viewRow.depth +\n                            1;\n\n                        <td\n                            monaGridCell\n                            monaGridLogicalCell\n                            [cellKind]=\"'group'\"\n                            [rowIndex]=\"rowIndex\"\n                            [colIndex]=\"0\"\n                            [section]=\"'body'\"\n                            [grouped]=\"true\"\n                            [groupHeader]=\"true\"\n                            [prevRowType]=\"prevRow?.type\"\n                            [firstInRow]=\"true\"\n                            [lastInRow]=\"columns().length === 0\"\n                            [groupKey]=\"viewRow.groupKey\"\n                            (toggle)=\"onGroupExpandChange(viewRow.groupKey)\"\n                            [attr.colspan]=\"colspan\">\n                            <p class=\"flex h-full items-center text-sm whitespace-nowrap\">\n                                <mona-grid-toggle\n                                    [expanded]=\"!isCollapsed\"\n                                    [width]=\"gridService.groupColumnWidth\"\n                                    [type]=\"'group'\"\n                                    (expandedChange)=\"onGroupExpandChange(viewRow.groupKey)\"></mona-grid-toggle>\n                                <span class=\"font-bold\">{{ viewRow.title }}: {{ viewRow.groupValue }}</span>\n                            </p>\n                        </td>\n                    </tr>\n                } @else if (viewRow.type === \"groupFooter\") {\n                    <tr role=\"row\" [class]=\"footerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n                                [footerCellWidth]=\"gridService.selectionColumnWidth\"></td>\n                        }\n                        @for (column of columns(); track $index) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [footerColumn]=\"column\">\n                                <mona-grid-footer-cell\n                                    [column]=\"column\"\n                                    [columnIndex]=\"$index\"\n                                    [groupKey]=\"viewRow.groupAggregate.groupKey\"></mona-grid-footer-cell>\n                            </td>\n                        }\n                    </tr>\n                } @else {\n                    @let nextRow = flattenedGroupedRows()[rowIndex + 1];\n                    @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n                    <tr\n                        (click)=\"onGridRowClick($event, viewRow.row)\"\n                        monaGridRow\n                        [index]=\"rowIndex\"\n                        [row]=\"viewRow.row\"\n                        #gridRow=\"monaGridRow\"\n                        #rowElement>\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                [grouped]=\"true\"\n                                [indentCell]=\"true\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                        }\n\n                        @if (gridService.masterDetailTemplate()) {\n                            <td\n                                monaGridCell\n                                monaGridLogicalCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                [grouped]=\"true\"\n                                [masterDetailToggle]=\"true\"\n                                [prevRowType]=\"prevRow?.type\"\n                                [nextRowType]=\"nextRow?.type\"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"viewRow.row.uid\"\n                                [section]=\"'body'\"\n                                [cellKind]=\"'detail'\"\n                                [colIndex]=\"0\"\n                                [firstInRow]=\"true\"\n                                [lastInRow]=\"columns().length === 0 && !gridService.selectionColumnVisible()\"\n                                [style.width.px]=\"gridService.detailColumnWidth\">\n                                <span class=\"flex h-full w-full items-stretch justify-center\">\n                                    <mona-grid-toggle\n                                        [expanded]=\"gridRow.expanded()\"\n                                        [type]=\"'detail'\"\n                                        [width]=\"gridService.detailColumnWidth\"\n                                        (expandedChange)=\"onToggleDetailClick(viewRow.row)\"></mona-grid-toggle>\n                                </span>\n                            </td>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n                                [grouped]=\"true\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$selection'\"\n                                [prevRowType]=\"prevRow?.type\"\n                                [nextRowType]=\"nextRow?.type\"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"viewRow.row.uid\"\n                                [section]=\"'body'\"\n                                [colIndex]=\"gridService.masterDetailTemplate() ? 1 : 0\"\n                                [firstInRow]=\"!gridService.masterDetailTemplate()\"\n                                [lastInRow]=\"columns().length === 0\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\">\n                                <mona-grid-selection-checkbox [row]=\"viewRow.row\" [rowIndex]=\"rowIndex\" />\n                            </td>\n                        }\n                        @for (column of columns(); track $index) {\n                            @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [grouped]=\"true\"\n                                [dataCell]=\"true\"\n                                [prevRowType]=\"prevRow?.type\"\n                                [nextRowType]=\"nextRow?.type\"\n                                monaGridLogicalCell\n                                [cellKind]=\"column.kind\"\n                                [colIndex]=\"colIndex\"\n                                [columnId]=\"column.id\"\n                                [editable]=\"\n                                    gridService.editableOptions().enabled === true &&\n                                    gridService.editableOptions().mode === 'cell' &&\n                                    column.kind === 'data' &&\n                                    column.editable === true\n                                \"\n                                [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                                [lastInRow]=\"\n                                    colIndex ===\n                                    gridService.leadingLogicalColumnCount() + columns().length - 1\n                                \"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"viewRow.row.uid\"\n                                [section]=\"'body'\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                (edit)=\"gridCell.handleLogicalCellEnter()\">\n                                <mona-grid-cell #gridCell [column]=\"column\" [row]=\"viewRow.row\"></mona-grid-cell>\n                            </td>\n                        }\n                        @if (gridService.contextMenuItems().length !== 0) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"contextMenuTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: viewRow.row.data,\n                                    element: rowElement,\n                                    index: rowIndex\n                                }\">\n                            </ng-container>\n                        }\n                    </tr>\n                    @if (gridRow.expanded()) {\n                        <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n                            @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth + 1; track $index) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                    [grouped]=\"true\"\n                                    [indentCell]=\"true\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                            }\n                            @let colspan = columns().length + gridService.groupColumns().length - 1;\n                            <td\n                                monaGridDetailIndentCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"(viewRow.depth + 1) * gridService.groupColumnWidth\"\n                                [nextRowType]=\"nextRow?.type\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n                            @if (gridService.selectionColumnVisible()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n                            }\n                            <td monaGridDetailContentCell [nextRowType]=\"nextRow?.type\" [attr.colspan]=\"colspan\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: viewRow.row.data }\"></ng-container>\n                            </td>\n                        </tr>\n                    }\n                }\n            }\n        }\n    </tbody>\n</table>\n\n<ng-template let-rowData let-element=\"element\" let-rowIndex=\"index\" #contextMenuTemplate>\n    <mona-contextmenu [target]=\"element\" [items]=\"gridService.contextMenuItems()\"></mona-contextmenu>\n    <!--    [context]=\"{rowData, element, rowIndex}\"-->\n</ng-template>\n", dependencies: [{ kind: "component", type: GridAddRowComponent, selector: "tr[monaGridAddRow]", inputs: ["columns"] }, { kind: "component", type: GridCellComponent, selector: "mona-grid-cell", inputs: ["column", "row"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ContextMenuComponent, selector: "mona-contextmenu", inputs: ["ariaLabel", "items", "minWidth", "rounded", "size", "target", "width"], outputs: ["menuClick"] }, { kind: "directive", type: GridRowDirective, selector: "tr[monaGridRow]", inputs: ["index", "row"], exportAs: ["monaGridRow"] }, { kind: "directive", type: GridCellDirective, selector: "td[monaGridCell]", inputs: ["dataCell", "groupHeader", "groupToggle", "grouped", "indentCell", "lastInRow", "masterDetailContent", "masterDetailToggle", "nextRowType", "prevRowType"] }, { kind: "directive", type: GridDetailRowDirective, selector: "tr[monaGridDetailRow]" }, { kind: "directive", type: GridDetailIndentCellDirective, selector: "td[monaGridDetailIndentCell]", inputs: ["nextRowType"] }, { kind: "directive", type: GridDetailContentCellDirective, selector: "td[monaGridDetailContentCell]", inputs: ["nextRowType"] }, { kind: "component", type: GridToggleComponent, selector: "mona-grid-toggle", inputs: ["expanded", "type", "width"], outputs: ["expandedChange"] }, { kind: "directive", type: GridFooterTableCellDirective, selector: "td[monaGridFooterTableCell]", inputs: ["footerCellMinWidth", "footerCellWidth", "footerColumn"] }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "lockedCellHeader", "lockedStructuralOffset"] }, { kind: "component", type: GridFooterCellComponent, selector: "mona-grid-footer-cell", inputs: ["column", "columnIndex", "groupKey"] }, { kind: "component", type: GridSelectionCheckboxComponent, selector: "mona-grid-selection-checkbox", inputs: ["row", "rowIndex"] }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-grid-list", imports: [
+                        GridAddRowComponent,
+                        GridCellComponent,
+                        NgTemplateOutlet,
+                        ContextMenuComponent,
+                        GridRowDirective,
+                        GridCellDirective,
+                        GridDetailRowDirective,
+                        GridDetailIndentCellDirective,
+                        GridDetailContentCellDirective,
+                        SlicePipe,
+                        GridToggleComponent,
+                        GridFooterTableCellDirective,
+                        GridLogicalCellDirective,
+                        GridLockedCellDirective,
+                        GridFooterCellComponent,
+                        GridSelectionCheckboxComponent
+                    ], host: {
+                        "[class]": "baseClass()"
+                    }, template: "<table #bodyTable [class]=\"tableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n    <colgroup>\n        @for (_ of gridService.groupColumns(); track $index) {\n            <col [style.width.px]=\"gridService.groupColumnWidth\" />\n        }\n        @if (gridService.masterDetailTemplate()) {\n            <col [style.width.px]=\"gridService.groupColumnWidth\" />\n        }\n        @if (gridService.selectionColumnVisible()) {\n            <col [style.width.px]=\"gridService.selectionColumnWidth\" />\n        }\n        @for (col of columns(); track $index) {\n            <col [style.width.px]=\"col.calculatedWidth\" />\n        }\n    </colgroup>\n    <tbody role=\"rowgroup\">\n        @if (gridService.addRowVisible()) {\n            <tr monaGridAddRow [columns]=\"columns()\"></tr>\n        }\n        @if (gridService.groupColumns().length === 0) {\n            @for (row of data(); track row.uid) {\n                @let rowIndex = $index;\n                <tr\n                    (click)=\"onGridRowClick($event, row)\"\n                    monaGridRow\n                    [index]=\"rowIndex\"\n                    [row]=\"row\"\n                    #gridRow=\"monaGridRow\"\n                    #rowElement>\n                    @if (gridService.masterDetailTemplate()) {\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [lockedStructuralOffset]=\"0\"\n                            [masterDetailToggle]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'detail'\"\n                            [colIndex]=\"0\"\n                            [firstInRow]=\"true\"\n                            [lastInRow]=\"columns().length === 0 && !gridService.selectionColumnVisible()\"\n                            [rowIndex]=\"rowIndex\"\n                            [rowUid]=\"row.uid\"\n                            [section]=\"'body'\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"\n                            [attr.colspan]=\"1\">\n                            <span class=\"flex h-full w-full items-stretch justify-center\">\n                                <mona-grid-toggle\n                                    [expanded]=\"gridRow.expanded()\"\n                                    [type]=\"'detail'\"\n                                    [width]=\"gridService.detailColumnWidth\"\n                                    (expandedChange)=\"onToggleDetailClick(row)\"></mona-grid-toggle>\n                            </span>\n                        </td>\n                    }\n                    @if (gridService.selectionColumnVisible()) {\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'command'\"\n                            [columnId]=\"'$selection'\"\n                            [rowIndex]=\"rowIndex\"\n                            [rowUid]=\"row.uid\"\n                            [section]=\"'body'\"\n                            [colIndex]=\"gridService.masterDetailTemplate() ? 1 : 0\"\n                            [firstInRow]=\"!gridService.masterDetailTemplate()\"\n                            [lastInRow]=\"columns().length === 0\"\n                            [style.width.px]=\"gridService.selectionColumnWidth\"\n                            [attr.colspan]=\"1\">\n                            <mona-grid-selection-checkbox [row]=\"row\" [rowIndex]=\"rowIndex\" />\n                        </td>\n                    }\n                    @for (column of columns(); track $index) {\n                        @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [dataCell]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"column.kind\"\n                            [colIndex]=\"colIndex\"\n                            [columnId]=\"column.id\"\n                            [editable]=\"\n                                gridService.editableOptions().enabled === true &&\n                                gridService.editableOptions().mode === 'cell' &&\n                                column.kind === 'data' &&\n                                column.editable === true\n                            \"\n                            [rowIndex]=\"rowIndex\"\n                            [rowUid]=\"row.uid\"\n                            [section]=\"'body'\"\n                            [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                            [lastInRow]=\"\n                                colIndex ===\n                                gridService.leadingLogicalColumnCount() + columns().length - 1\n                            \"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"column.calculatedWidth\"\n                            [style.min-width.px]=\"column.minWidth\"\n                            (edit)=\"gridCell.handleLogicalCellEnter()\">\n                            <mona-grid-cell #gridCell [column]=\"column\" [row]=\"row\"></mona-grid-cell>\n                        </td>\n                    }\n                    @if (gridService.contextMenuItems().length !== 0) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"contextMenuTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: row.data, element: rowElement, index: $index }\">\n                        </ng-container>\n                    }\n                </tr>\n                @if (gridRow.expanded()) {\n                    <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [lockedStructuralOffset]=\"0\"\n                            [indentCell]=\"true\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n                        @if (gridService.selectionColumnVisible()) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n                        }\n                        <td monaGridCell [masterDetailContent]=\"true\" [attr.colspan]=\"columns().length\">\n                            <ng-container\n                                [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n                                [ngTemplateOutletContext]=\"{ $implicit: row.data }\"></ng-container>\n                        </td>\n                    </tr>\n                }\n            }\n        } @else {\n            @for (viewRow of flattenedGroupedRows(); track $index) {\n                @let rowIndex = $index;\n                @if (viewRow.type === \"group\") {\n                    @let isCollapsed = gridService.isGroupCollapsed(viewRow.groupKey);\n                    @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n\n                    <tr\n                        [class]=\"groupRowClass()\"\n                        role=\"row\"\n                        [attr.aria-level]=\"viewRow.depth + 1\"\n                        [attr.aria-expanded]=\"!isCollapsed\">\n                        @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth; track $index) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                [grouped]=\"true\"\n                                [indentCell]=\"true\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                        }\n                        @let colspan =\n                            columns().length +\n                            gridService.groupColumns().length +\n                            (gridService.masterDetailTemplate() ? 1 : 0) +\n                            (gridService.selectionColumnVisible() ? 1 : 0) -\n                            viewRow.depth +\n                            1;\n\n                        <td\n                            monaGridCell\n                            monaGridLogicalCell\n                            [cellKind]=\"'group'\"\n                            [rowIndex]=\"rowIndex\"\n                            [colIndex]=\"0\"\n                            [section]=\"'body'\"\n                            [grouped]=\"true\"\n                            [groupHeader]=\"true\"\n                            [prevRowType]=\"prevRow?.type\"\n                            [firstInRow]=\"true\"\n                            [lastInRow]=\"columns().length === 0\"\n                            [groupKey]=\"viewRow.groupKey\"\n                            (toggle)=\"onGroupExpandChange(viewRow.groupKey)\"\n                            [attr.colspan]=\"colspan\">\n                            <p class=\"flex h-full items-center text-sm whitespace-nowrap\">\n                                <mona-grid-toggle\n                                    [expanded]=\"!isCollapsed\"\n                                    [width]=\"gridService.groupColumnWidth\"\n                                    [type]=\"'group'\"\n                                    (expandedChange)=\"onGroupExpandChange(viewRow.groupKey)\"></mona-grid-toggle>\n                                <span class=\"font-bold\">{{ viewRow.title }}: {{ viewRow.groupValue }}</span>\n                            </p>\n                        </td>\n                    </tr>\n                } @else if (viewRow.type === \"groupFooter\") {\n                    <tr role=\"row\" [class]=\"footerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n                                [footerCellWidth]=\"gridService.selectionColumnWidth\"></td>\n                        }\n                        @for (column of columns(); track $index) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [footerColumn]=\"column\">\n                                <mona-grid-footer-cell\n                                    [column]=\"column\"\n                                    [columnIndex]=\"$index\"\n                                    [groupKey]=\"viewRow.groupAggregate.groupKey\"></mona-grid-footer-cell>\n                            </td>\n                        }\n                    </tr>\n                } @else {\n                    @let nextRow = flattenedGroupedRows()[rowIndex + 1];\n                    @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n                    <tr\n                        (click)=\"onGridRowClick($event, viewRow.row)\"\n                        monaGridRow\n                        [index]=\"rowIndex\"\n                        [row]=\"viewRow.row\"\n                        #gridRow=\"monaGridRow\"\n                        #rowElement>\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                [grouped]=\"true\"\n                                [indentCell]=\"true\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                        }\n\n                        @if (gridService.masterDetailTemplate()) {\n                            <td\n                                monaGridCell\n                                monaGridLogicalCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                [grouped]=\"true\"\n                                [masterDetailToggle]=\"true\"\n                                [prevRowType]=\"prevRow?.type\"\n                                [nextRowType]=\"nextRow?.type\"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"viewRow.row.uid\"\n                                [section]=\"'body'\"\n                                [cellKind]=\"'detail'\"\n                                [colIndex]=\"0\"\n                                [firstInRow]=\"true\"\n                                [lastInRow]=\"columns().length === 0 && !gridService.selectionColumnVisible()\"\n                                [style.width.px]=\"gridService.detailColumnWidth\">\n                                <span class=\"flex h-full w-full items-stretch justify-center\">\n                                    <mona-grid-toggle\n                                        [expanded]=\"gridRow.expanded()\"\n                                        [type]=\"'detail'\"\n                                        [width]=\"gridService.detailColumnWidth\"\n                                        (expandedChange)=\"onToggleDetailClick(viewRow.row)\"></mona-grid-toggle>\n                                </span>\n                            </td>\n                        }\n                        @if (gridService.selectionColumnVisible()) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n                                [grouped]=\"true\"\n                                monaGridLogicalCell\n                                [cellKind]=\"'command'\"\n                                [columnId]=\"'$selection'\"\n                                [prevRowType]=\"prevRow?.type\"\n                                [nextRowType]=\"nextRow?.type\"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"viewRow.row.uid\"\n                                [section]=\"'body'\"\n                                [colIndex]=\"gridService.masterDetailTemplate() ? 1 : 0\"\n                                [firstInRow]=\"!gridService.masterDetailTemplate()\"\n                                [lastInRow]=\"columns().length === 0\"\n                                [style.width.px]=\"gridService.selectionColumnWidth\">\n                                <mona-grid-selection-checkbox [row]=\"viewRow.row\" [rowIndex]=\"rowIndex\" />\n                            </td>\n                        }\n                        @for (column of columns(); track $index) {\n                            @let colIndex = $index + gridService.leadingLogicalColumnCount();\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [grouped]=\"true\"\n                                [dataCell]=\"true\"\n                                [prevRowType]=\"prevRow?.type\"\n                                [nextRowType]=\"nextRow?.type\"\n                                monaGridLogicalCell\n                                [cellKind]=\"column.kind\"\n                                [colIndex]=\"colIndex\"\n                                [columnId]=\"column.id\"\n                                [editable]=\"\n                                    gridService.editableOptions().enabled === true &&\n                                    gridService.editableOptions().mode === 'cell' &&\n                                    column.kind === 'data' &&\n                                    column.editable === true\n                                \"\n                                [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n                                [lastInRow]=\"\n                                    colIndex ===\n                                    gridService.leadingLogicalColumnCount() + columns().length - 1\n                                \"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"viewRow.row.uid\"\n                                [section]=\"'body'\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                (edit)=\"gridCell.handleLogicalCellEnter()\">\n                                <mona-grid-cell #gridCell [column]=\"column\" [row]=\"viewRow.row\"></mona-grid-cell>\n                            </td>\n                        }\n                        @if (gridService.contextMenuItems().length !== 0) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"contextMenuTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: viewRow.row.data,\n                                    element: rowElement,\n                                    index: rowIndex\n                                }\">\n                            </ng-container>\n                        }\n                    </tr>\n                    @if (gridRow.expanded()) {\n                        <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n                            @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth + 1; track $index) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                    [grouped]=\"true\"\n                                    [indentCell]=\"true\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                            }\n                            @let colspan = columns().length + gridService.groupColumns().length - 1;\n                            <td\n                                monaGridDetailIndentCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"(viewRow.depth + 1) * gridService.groupColumnWidth\"\n                                [nextRowType]=\"nextRow?.type\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n                            @if (gridService.selectionColumnVisible()) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n                            }\n                            <td monaGridDetailContentCell [nextRowType]=\"nextRow?.type\" [attr.colspan]=\"colspan\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: viewRow.row.data }\"></ng-container>\n                            </td>\n                        </tr>\n                    }\n                }\n            }\n        }\n    </tbody>\n</table>\n\n<ng-template let-rowData let-element=\"element\" let-rowIndex=\"index\" #contextMenuTemplate>\n    <mona-contextmenu [target]=\"element\" [items]=\"gridService.contextMenuItems()\"></mona-contextmenu>\n    <!--    [context]=\"{rowData, element, rowIndex}\"-->\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { bodyTableElementRef: [{ type: i0.ViewChild, args: ["bodyTable", { 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 { GridListComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-QqUUL60F.mjs.map

package/fesm2022/{nanahoshi-mona-ui-grid-grid-toggle.component-QDo6TweF.mjs → nanahoshi-mona-ui-grid-grid-toggle.component-DvuQvc7E.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 { 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, G as GridNavigationService, r as gridCellBaseThemeVariants, s as gridCellContainerThemeVariants, t as gridCellDirtyIndicatorThemeVariants, u as gridCellTextThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DWzYyGnb.mjs';
+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, G as GridNavigationService, r as gridCellBaseThemeVariants, s as gridCellContainerThemeVariants, t as gridCellDirtyIndicatorThemeVariants, u as gridCellTextThemeVariants, v as gridSelectionCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-RQvhjBse.mjs';
 import { ImmutableList } from '@mirei/ts-collections';
 import * as i1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
@@ -547,7 +547,7 @@ class GridAddRowComponent {
         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) {\n    @let session = gridService.editSession();\n    @for (_ of gridService.groupColumns(); track $index) {\n        <td\n            monaGridCell\n            monaGridLockedCell\n            [lockedCellHeader]=\"true\"\n            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n            [grouped]=\"true\"\n            [indentCell]=\"true\"\n            [attr.colspan]=\"1\"\n            [style.width.px]=\"gridService.groupColumnWidth\"></td>\n    }\n    @if (gridService.masterDetailTemplate()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n            [masterDetailToggle]=\"true\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"0\"\n            [cellKind]=\"'detail'\"\n            [firstInRow]=\"true\"\n            [lastInRow]=\"columns().length === 0\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.detailColumnWidth\"></td>\n    }\n    @for (column of columns(); track $index) {\n        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n        <td\n            monaGridCell\n            monaGridLockedCell\n            [column]=\"column\"\n            [dataCell]=\"true\"\n            monaGridLogicalCell\n            [cellKind]=\"column.kind\"\n            [colIndex]=\"colIndex\"\n            [columnId]=\"column.id\"\n            [rowIndex]=\"-1\"\n            [section]=\"'add'\"\n            [firstInRow]=\"colIndex === 0\"\n            [lastInRow]=\"colIndex === columns().length - (gridService.masterDetailTemplate() ? 0 : 1)\"\n            [attr.colspan]=\"1\"\n            [style.width.px]=\"column.calculatedWidth\"\n            [style.min-width.px]=\"column.minWidth\">\n            @if (column.kind === \"command\") {\n                <mona-grid-command-cell [column]=\"column\" [newRow]=\"true\"></mona-grid-command-cell>\n            } @else if (column.editable && session) {\n                <mona-grid-editor\n                    [column]=\"column\"\n                    [autoFocus]=\"isFirstEditableColumn(column)\"\n                    [isNew]=\"true\"\n                    [session]=\"session\"\n                    (commit)=\"onCommit()\"\n                    (cancel)=\"onCancel()\"></mona-grid-editor>\n            } @else {\n                <span class=\"block truncate px-2\">{{ rowData[column.field] }}</span>\n            }\n        </td>\n    }\n}\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", "tabNavigationEnabled"], outputs: ["cancel", "commit", "tabNavigate"] }, { 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", "editable", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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) {\n    @let session = gridService.editSession();\n    @for (_ of gridService.groupColumns(); track $index) {\n        <td\n            monaGridCell\n            monaGridLockedCell\n            [lockedCellHeader]=\"true\"\n            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n            [grouped]=\"true\"\n            [indentCell]=\"true\"\n            [attr.colspan]=\"1\"\n            [style.width.px]=\"gridService.groupColumnWidth\"></td>\n    }\n    @if (gridService.masterDetailTemplate()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n            [masterDetailToggle]=\"true\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"0\"\n            [cellKind]=\"'detail'\"\n            [firstInRow]=\"true\"\n            [lastInRow]=\"columns().length === 0 && !gridService.selectionColumnVisible()\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.detailColumnWidth\"></td>\n    }\n    @if (gridService.selectionColumnVisible()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"gridService.masterDetailTemplate() ? 1 : 0\"\n            [cellKind]=\"'command'\"\n            [columnId]=\"'$selection'\"\n            [firstInRow]=\"!gridService.masterDetailTemplate()\"\n            [lastInRow]=\"columns().length === 0\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n    }\n    @for (column of columns(); track $index) {\n        @let colIndex = $index + gridService.leadingLogicalColumnCount();\n        <td\n            monaGridCell\n            monaGridLockedCell\n            [column]=\"column\"\n            [dataCell]=\"true\"\n            monaGridLogicalCell\n            [cellKind]=\"column.kind\"\n            [colIndex]=\"colIndex\"\n            [columnId]=\"column.id\"\n            [rowIndex]=\"-1\"\n            [section]=\"'add'\"\n            [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n            [lastInRow]=\"colIndex === gridService.leadingLogicalColumnCount() + columns().length - 1\"\n            [attr.colspan]=\"1\"\n            [style.width.px]=\"column.calculatedWidth\"\n            [style.min-width.px]=\"column.minWidth\">\n            @if (column.kind === \"command\") {\n                <mona-grid-command-cell [column]=\"column\" [newRow]=\"true\"></mona-grid-command-cell>\n            } @else if (column.editable && session) {\n                <mona-grid-editor\n                    [column]=\"column\"\n                    [autoFocus]=\"isFirstEditableColumn(column)\"\n                    [isNew]=\"true\"\n                    [session]=\"session\"\n                    (commit)=\"onCommit()\"\n                    (cancel)=\"onCancel()\"></mona-grid-editor>\n            } @else {\n                <span class=\"block truncate px-2\">{{ rowData[column.field] }}</span>\n            }\n        </td>\n    }\n}\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", "tabNavigationEnabled"], outputs: ["cancel", "commit", "tabNavigate"] }, { 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", "editable", "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,
@@ -561,7 +561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[class]": "baseClass()",
                         role: "row",
                         "data-grid-add-row": "true"
-                    }, template: "@if (gridService.addRowData(); as rowData) {\n    @let session = gridService.editSession();\n    @for (_ of gridService.groupColumns(); track $index) {\n        <td\n            monaGridCell\n            monaGridLockedCell\n            [lockedCellHeader]=\"true\"\n            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n            [grouped]=\"true\"\n            [indentCell]=\"true\"\n            [attr.colspan]=\"1\"\n            [style.width.px]=\"gridService.groupColumnWidth\"></td>\n    }\n    @if (gridService.masterDetailTemplate()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n            [masterDetailToggle]=\"true\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"0\"\n            [cellKind]=\"'detail'\"\n            [firstInRow]=\"true\"\n            [lastInRow]=\"columns().length === 0\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.detailColumnWidth\"></td>\n    }\n    @for (column of columns(); track $index) {\n        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n        <td\n            monaGridCell\n            monaGridLockedCell\n            [column]=\"column\"\n            [dataCell]=\"true\"\n            monaGridLogicalCell\n            [cellKind]=\"column.kind\"\n            [colIndex]=\"colIndex\"\n            [columnId]=\"column.id\"\n            [rowIndex]=\"-1\"\n            [section]=\"'add'\"\n            [firstInRow]=\"colIndex === 0\"\n            [lastInRow]=\"colIndex === columns().length - (gridService.masterDetailTemplate() ? 0 : 1)\"\n            [attr.colspan]=\"1\"\n            [style.width.px]=\"column.calculatedWidth\"\n            [style.min-width.px]=\"column.minWidth\">\n            @if (column.kind === \"command\") {\n                <mona-grid-command-cell [column]=\"column\" [newRow]=\"true\"></mona-grid-command-cell>\n            } @else if (column.editable && session) {\n                <mona-grid-editor\n                    [column]=\"column\"\n                    [autoFocus]=\"isFirstEditableColumn(column)\"\n                    [isNew]=\"true\"\n                    [session]=\"session\"\n                    (commit)=\"onCommit()\"\n                    (cancel)=\"onCancel()\"></mona-grid-editor>\n            } @else {\n                <span class=\"block truncate px-2\">{{ rowData[column.field] }}</span>\n            }\n        </td>\n    }\n}\n" }]
+                    }, template: "@if (gridService.addRowData(); as rowData) {\n    @let session = gridService.editSession();\n    @for (_ of gridService.groupColumns(); track $index) {\n        <td\n            monaGridCell\n            monaGridLockedCell\n            [lockedCellHeader]=\"true\"\n            [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n            [grouped]=\"true\"\n            [indentCell]=\"true\"\n            [attr.colspan]=\"1\"\n            [style.width.px]=\"gridService.groupColumnWidth\"></td>\n    }\n    @if (gridService.masterDetailTemplate()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [lockedStructuralOffset]=\"gridService.groupColumns().length * gridService.groupColumnWidth\"\n            [masterDetailToggle]=\"true\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"0\"\n            [cellKind]=\"'detail'\"\n            [firstInRow]=\"true\"\n            [lastInRow]=\"columns().length === 0 && !gridService.selectionColumnVisible()\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.detailColumnWidth\"></td>\n    }\n    @if (gridService.selectionColumnVisible()) {\n        <td\n            monaGridCell\n            monaGridLogicalCell\n            monaGridLockedCell\n            [lockedStructuralOffset]=\"gridService.selectionColumnOffset()\"\n            [rowIndex]=\"-1\"\n            [colIndex]=\"gridService.masterDetailTemplate() ? 1 : 0\"\n            [cellKind]=\"'command'\"\n            [columnId]=\"'$selection'\"\n            [firstInRow]=\"!gridService.masterDetailTemplate()\"\n            [lastInRow]=\"columns().length === 0\"\n            [section]=\"'add'\"\n            [style.width.px]=\"gridService.selectionColumnWidth\"></td>\n    }\n    @for (column of columns(); track $index) {\n        @let colIndex = $index + gridService.leadingLogicalColumnCount();\n        <td\n            monaGridCell\n            monaGridLockedCell\n            [column]=\"column\"\n            [dataCell]=\"true\"\n            monaGridLogicalCell\n            [cellKind]=\"column.kind\"\n            [colIndex]=\"colIndex\"\n            [columnId]=\"column.id\"\n            [rowIndex]=\"-1\"\n            [section]=\"'add'\"\n            [firstInRow]=\"colIndex === gridService.leadingLogicalColumnCount()\"\n            [lastInRow]=\"colIndex === gridService.leadingLogicalColumnCount() + columns().length - 1\"\n            [attr.colspan]=\"1\"\n            [style.width.px]=\"column.calculatedWidth\"\n            [style.min-width.px]=\"column.minWidth\">\n            @if (column.kind === \"command\") {\n                <mona-grid-command-cell [column]=\"column\" [newRow]=\"true\"></mona-grid-command-cell>\n            } @else if (column.editable && session) {\n                <mona-grid-editor\n                    [column]=\"column\"\n                    [autoFocus]=\"isFirstEditableColumn(column)\"\n                    [isNew]=\"true\"\n                    [session]=\"session\"\n                    (commit)=\"onCommit()\"\n                    (cancel)=\"onCancel()\"></mona-grid-editor>\n            } @else {\n                <span class=\"block truncate px-2\">{{ rowData[column.field] }}</span>\n            }\n        </td>\n    }\n}\n" }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
 
 const FOCUSABLE_TARGET_SELECTOR = "button, input, select, textarea, a[href], [tabindex]";
@@ -762,6 +762,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     }, 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" }]
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
 
+class GridSelectionCheckboxComponent {
+    constructor() {
+        this.#gridService = inject(GridService);
+        this.ariaLabel = computed(() => {
+            const labelFn = this.#gridService.selectableOptions().rowAriaLabel;
+            if (labelFn) {
+                return labelFn(this.row().data);
+            }
+            return `Select row ${this.rowIndex() + 1}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.checked = computed(() => this.#gridService.isRowSelected(this.row()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        this.hostClass = computed(() => gridSelectionCellThemeVariants(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The grid row whose selected state this checkbox controls.
+         */
+        this.row = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+        /**
+         * @description The row's position within its rendered list, used to derive a default accessible label.
+         */
+        this.rowIndex = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowIndex" }] : /* istanbul ignore next */ []));
+    }
+    #gridService;
+    onCheckedChange(checked) {
+        this.#gridService.setRowSelected(this.row(), checked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridSelectionCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: GridSelectionCheckboxComponent, isStandalone: true, selector: "mona-grid-selection-checkbox", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "$event.stopPropagation()" }, properties: { "class": "hostClass()" } }, ngImport: i0, template: "<mona-check-box\n    [checked]=\"checked()\"\n    (checkedChange)=\"onCheckedChange($event)\">\n    <span class=\"sr-only\">{{ ariaLabel() }}</span>\n</mona-check-box>\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridSelectionCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-grid-selection-checkbox", imports: [CheckBoxComponent], host: {
+                        "[class]": "hostClass()",
+                        "(click)": "$event.stopPropagation()"
+                    }, template: "<mona-check-box\n    [checked]=\"checked()\"\n    (checkedChange)=\"onCheckedChange($event)\">\n    <span class=\"sr-only\">{{ ariaLabel() }}</span>\n</mona-check-box>\n" }]
+        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }] } });
+
 class GridToggleComponent {
     constructor() {
         this.collapseIcon = computed(() => {
@@ -793,5 +834,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{ selector: "mona-grid-toggle", imports: [LucideDynamicIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n    [style.width.px]=\"width()\"\n    class=\"inline-flex items-center justify-center h-full aspect-square\"\n    (click)=\"onToggleDetailClick($event)\">\n    @if (expanded()) {\n        <svg [lucideIcon]=\"collapseIcon()\" [size]=\"16\"></svg>\n    } @else {\n        <svg [lucideIcon]=\"expandIcon()\" [size]=\"16\"></svg>\n    }\n</span>\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-QDo6TweF.mjs.map
+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 };
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-toggle.component-DvuQvc7E.mjs.map