@nanahoshi/mona-ui 0.7.1 → 0.9.0

package/types/nanahoshi-mona-ui-grid.d.ts

@@ -202,8 +202,58 @@ interface GridRemoveEventOptions {
 }
 
 interface SelectableOptions {
+    /**
+     * Enables row selection.
+     */
     enabled?: boolean;
+    /**
+     * Controls whether one or multiple rows can be selected.
+     *
+     * @default "single"
+     */
     mode?: "single" | "multiple";
+    /**
+     * Derives the accessible label for a row's selection checkbox from its data.
+     *
+     * When omitted, the checkbox falls back to a positional label (e.g. "Select row 3").
+     */
+    rowAriaLabel?: (rowData: Record<PropertyKey, unknown>) => string;
+    /**
+     * Determines which rows are affected by the header checkbox.
+     *
+     * - "page": rows on the current paginated page
+     * - "view": all rows in the current filtered and sorted view
+     *
+     * For virtual scrolling, "page" resolves to the complete current view
+     * because virtual scrolling does not have logical pages.
+     *
+     * @default "page"
+     */
+    selectAllScope?: "page" | "view";
+    /**
+     * Whether clicking the row itself changes selection.
+     *
+     * Off by default so that clicking a row to interact with its content (a link, a button,
+     * an editable cell) never silently discards the current selection. Set this to true to
+     * also select rows via a plain click, in addition to checkboxes or application code.
+     *
+     * @default false
+     */
+    selectOnRowClick?: boolean;
+    /**
+     * Displays the built-in checkbox selection column.
+     *
+     * @default false
+     */
+    showCheckboxes?: boolean;
+    /**
+     * Displays a select-all checkbox in the selection-column header.
+     *
+     * Only applies to multiple-selection mode.
+     *
+     * @default true
+     */
+    showSelectAll?: boolean;
 }
 
 interface GroupDescriptor {
@@ -777,6 +827,7 @@ declare class GridService {
     readonly addRowData: _angular_core.Signal<Record<PropertyKey, unknown> | null>;
     readonly addRowVisible: _angular_core.Signal<boolean>;
     readonly add$: Subject<GridAddEvent>;
+    readonly allBulkSelectionRowsSelected: _angular_core.Signal<boolean>;
     readonly aggregateColumns: _angular_core.Signal<ImmutableList<Column>>;
     readonly aggregateMap: _angular_core.Signal<ImmutableDictionary<string, GridAggregateBucket>>;
     readonly aggregateRows: _angular_core.Signal<Record<PropertyKey, unknown>[]>;
@@ -785,6 +836,7 @@ declare class GridService {
     readonly appliedSorts: _angular_core.WritableSignal<ImmutableDictionary<string, ColumnSortState>>;
     readonly bodyScrollElement: _angular_core.WritableSignal<HTMLElement | null>;
     readonly bodyTableElement: _angular_core.WritableSignal<HTMLTableElement | null>;
+    readonly bulkSelectionRows: _angular_core.Signal<ImmutableSet<Row>>;
     readonly cellEdit$: Subject<CellEditEvent>;
     readonly cancel$: Subject<GridCancelEvent>;
     /** Set of currently collapsed group keys (global, shared by both paginated and virtual list). */
@@ -795,6 +847,7 @@ declare class GridService {
     readonly columns: _angular_core.WritableSignal<ImmutableList<Column>>;
     readonly contextMenuItems: _angular_core.WritableSignal<ImmutableSet<PopupMenuItem>>;
     readonly detailColumnWidth = 36;
+    readonly detailStructuralWidth: _angular_core.Signal<0 | 36>;
     readonly editBaseDict: _angular_core.Signal<ImmutableDictionary<string, RowEditDataItem>>;
     readonly editContext: _angular_core.Signal<GridEditContext | null>;
     readonly edit$: Subject<GridEditEvent>;
@@ -811,6 +864,7 @@ declare class GridService {
     readonly groupAggregateMap: _angular_core.Signal<ImmutableDictionary<string, GridGroupAggregate>>;
     readonly groupColumnWidth = 36;
     readonly groupColumns: _angular_core.Signal<ImmutableList<Column>>;
+    readonly groupStructuralWidth: _angular_core.Signal<number>;
     readonly groupableOptions: _angular_core.WritableSignal<GroupableOptions>;
     readonly hasLeftLockedColumns: _angular_core.Signal<boolean>;
     readonly hasFooter: _angular_core.Signal<boolean>;
@@ -820,6 +874,9 @@ declare class GridService {
     readonly isInEditMode: _angular_core.Signal<boolean>;
     readonly leftLockedStructuralWidth: _angular_core.Signal<number>;
     readonly lockedColumnStates: _angular_core.Signal<ReadonlyMap<string, GridLockedColumnState>>;
+    readonly leadingStructuralWidth: _angular_core.Signal<number>;
+    readonly leadingStructuralColumnCount: _angular_core.Signal<number>;
+    readonly leadingLogicalColumnCount: _angular_core.Signal<number>;
     readonly masterDetailEmptyCellWidth: _angular_core.Signal<number>;
     readonly masterDetailRowWidth: _angular_core.Signal<number>;
     readonly masterDetailTemplate: _angular_core.WritableSignal<TemplateRef<unknown> | null>;
@@ -840,6 +897,11 @@ declare class GridService {
     readonly selectedKeysChange$: rxjs.Observable<ImmutableSet<unknown>>;
     readonly selectedKeysLoad$: BehaviorSubject<ImmutableSet<unknown>>;
     readonly selectedRows: _angular_core.Signal<ImmutableSet<Row>>;
+    readonly selectionColumnWidth = 40;
+    readonly selectionColumnVisible: _angular_core.Signal<boolean>;
+    readonly selectionColumnOffset: _angular_core.Signal<number>;
+    readonly selectionStructuralWidth: _angular_core.Signal<0 | 40>;
+    readonly someBulkSelectionRowsSelected: _angular_core.Signal<boolean>;
     readonly sortableOptions: _angular_core.WritableSignal<SortableOptions>;
     readonly tableWidth: _angular_core.Signal<number | null>;
     readonly viewPageRows: _angular_core.Signal<ImmutableSet<Row>>;
@@ -859,6 +921,7 @@ declare class GridService {
     clearColumnGrouping(column: Column): void;
     commitRowEdit(originalEvent?: Event): boolean;
     deselectAllRows(): void;
+    deselectRow(row: Row): void;
     findTextWidthOfColumn(column: Column, element: HTMLTableCellElement): number;
     getColumnStateId(column: Column): string | null;
     getColumnWidth(column: Column): number;
@@ -869,7 +932,6 @@ declare class GridService {
     isGroupCollapsed(groupKey: string): boolean;
     isRowExpanded(row: Row): boolean;
     isRowSelected(row: Row): boolean;
-    isSelectableGrid(): boolean;
     loadFilters(filters: CompositeFilterDescriptor[]): void;
     loadGroupColumns(descriptors: Iterable<GroupDescriptor>): void;
     loadSelectedKeys(selectedKeys: Iterable<unknown>): void;
@@ -882,6 +944,7 @@ declare class GridService {
     resolveAggregateValue(bucket: GridAggregateBucket | null, aggregateFunction: AggregateFunction | null): unknown;
     saveAddRow(originalEvent?: Event): boolean;
     selectRow(row: Row): void;
+    setBulkSelection(selected: boolean): void;
     setCalculatedWidth(columnId: string, value: number | null): void;
     setCalculatedWidths(widthByColumnId: ReadonlyMap<string, number | null>): void;
     setColumnDefinitions(configs: readonly ColumnConfig[]): void;
@@ -902,6 +965,7 @@ declare class GridService {
     setRowExpanded(row: Row, expanded: boolean): void;
     setRows(value: Iterable<Record<PropertyKey, unknown>>, rowKey?: GridKeySelector<unknown> | null): void;
     setSelectableOptions(options: SelectableOptions): void;
+    setRowSelected(row: Row, selected: boolean): void;
     setSortableOptions(options: Partial<SortableOptions>): void;
     setScrollEndThreshold(threshold: number): void;
     setVirtualScrollOptions(options: VirtualScrollOptions): void;
@@ -933,6 +997,7 @@ declare class GridService {
     private measureFallbackScrollbarGutter;
     private orderColumnsByLockBucket;
     private reconcileColumn;
+    private selectRowRange;
     private clearEditSession;
     private createEditSession;
     private patchSessionField;

package/types/nanahoshi-mona-ui-segmented.d.ts

@@ -0,0 +1,90 @@
+import * as _angular_core from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+
+type SegmentedValue = string | number;
+
+interface SegmentedOption<T extends SegmentedValue = SegmentedValue> {
+    readonly label: string;
+    readonly value: T;
+    readonly disabled?: boolean;
+}
+
+declare const segmentedContainerThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const segmentedOptionThemeVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SegmentedContainerVariantProps = VariantProps<typeof segmentedContainerThemeVariants>;
+type SegmentedContainerVariantInput = VariantInputs<SegmentedContainerVariantProps>;
+type SegmentedOptionVariantProps = VariantProps<typeof segmentedOptionThemeVariants>;
+type SegmentedOptionVariantInput = VariantInputs<SegmentedOptionVariantProps>;
+type SegmentedVariantProps = SegmentedContainerVariantProps & SegmentedOptionVariantProps;
+type SegmentedVariantInput = SegmentedContainerVariantInput & SegmentedOptionVariantInput;
+
+declare class SegmentedComponent<T extends SegmentedValue = SegmentedValue> implements SegmentedVariantInput, FormValueControl<T | null> {
+    protected readonly containerClasses: _angular_core.Signal<string>;
+    protected readonly groupName: string;
+    protected readonly inputClasses: _angular_core.Signal<string>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly optionClasses: _angular_core.Signal<string>;
+    /**
+     * @description Accessible name for the radio group. Provide either `aria-label` or `aria-labelledby`.
+     * @default null
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /**
+     * @description ID of an external element that provides the accessible name for the radio group.
+     * @default null
+     */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string | null>;
+    /**
+     * @description Disables every option in the group and prevents value changes.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Marks the component as invalid. Error styling requires both `invalid` and `touched` to be `true`.
+     * When bound to a signal form field via `[formField]`, this is written by the signal forms `Field` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @description The list of selectable options. Exactly one option is selected at a time.
+     */
+    readonly options: _angular_core.InputSignal<readonly SegmentedOption<T>[]>;
+    /**
+     * @description Size preset controlling the height, horizontal padding, text size, and spacing of each option.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<"small" | "medium" | "large" | null | undefined>;
+    /**
+     * @description Emitted when the selected value changes or focus leaves a radio input.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Marks the component as touched. When bound to a signal form field via `[formField]`,
+     * this is written by the signal forms `Field` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description The currently selected value. When it matches no current option, no option is checked.
+     * A `null` value is allowed initially but cannot be restored through segmented interaction.
+     * @default null
+     */
+    readonly value: _angular_core.ModelSignal<T | null>;
+    protected onOptionBlur(): void;
+    protected onOptionChange(option: SegmentedOption<T>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent<any>, "mona-segmented", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { SegmentedComponent };
+export type { SegmentedOption, SegmentedValue, SegmentedVariantProps };

package/types/nanahoshi-mona-ui-tabs.d.ts

@@ -19,6 +19,8 @@ declare class TabSelectEvent extends PreventableEvent {
     get index(): number;
 }
 
+type TabsPosition = "top" | "bottom" | "left" | "right";
+
 declare class TabContentTemplateDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabContentTemplateDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabContentTemplateDirective, "ng-template[monaTabContentTemplate]", never, {}, {}, never, never, true, never>;
@@ -41,21 +43,23 @@ interface TabItem {
 }
 
 declare const tabListBaseThemeVariants: (props?: ({
-    rounded?: "small" | "medium" | "large" | "full" | "none" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
+    position?: "top" | "bottom" | "left" | "right" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const tabListListWrapperThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-declare const tabListListThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const tabListListThemeVariants: (props?: ({
+    position?: "top" | "bottom" | "left" | "right" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const tabListListItemThemeVariants: (props?: ({
     active?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
-    rounded?: "small" | "medium" | "large" | "full" | "none" | null | undefined;
+    position?: "top" | "bottom" | "left" | "right" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const tabListScrollButtonThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
-declare const tabContentThemeVariants: (props?: ({
-    rounded?: "small" | "medium" | "large" | "full" | "none" | null | undefined;
+declare const tabContentThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const tabsBaseThemeVariants: (props?: ({
+    position?: "top" | "bottom" | "left" | "right" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const tabsBaseThemeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type TabListBaseVariantProps = VariantProps<typeof tabListBaseThemeVariants>;
 type TabListBaseVariantInput = VariantInputs<TabListBaseVariantProps>;
 type TabListListWrapperVariantProps = VariantProps<typeof tabListListWrapperThemeVariants>;
@@ -96,10 +100,10 @@ declare class TabsComponent implements TabsVariantInput {
      */
     readonly keepTabContent: _angular_core.InputSignal<boolean>;
     /**
-     * @description Border-radius preset applied to the tabs and the tab content area.
-     * @default "medium"
+     * @description Placement of the tab list relative to the tab content.
+     * @default "top"
      */
-    readonly rounded: _angular_core.InputSignal<"small" | "medium" | "large" | "full" | "none" | null | undefined>;
+    readonly position: _angular_core.InputSignal<"top" | "bottom" | "left" | "right" | null | undefined>;
     /**
      * @description Size preset controlling the tabs' dimensions.
      * @default "medium"
@@ -120,7 +124,7 @@ declare class TabsComponent implements TabsVariantInput {
     readonly userClass: _angular_core.InputSignal<string>;
     protected handlePanelKeyDown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "mona-tabs", never, { "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "keepTabContent": { "alias": "keepTabContent"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "tabClose": "tabClose"; "tabSelect": "tabSelect"; }, ["tabs"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "mona-tabs", never, { "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "keepTabContent": { "alias": "keepTabContent"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "tabClose": "tabClose"; "tabSelect": "tabSelect"; }, ["tabs"], never, true, never>;
 }
 
 declare class TabComponent {
@@ -154,3 +158,4 @@ declare class TabComponent {
 }
 
 export { TabCloseEvent, TabComponent, TabContentTemplateDirective, TabSelectEvent, TabTitleTemplateDirective, TabsComponent };
+export type { TabsPosition };

package/types/nanahoshi-mona-ui-theme.d.ts

@@ -23,7 +23,7 @@ type ThemeEffectVariable = `--mona-effect-${ThemeEffectLevel}-background-color`
 type ThemeEffects = Readonly<Record<ThemeEffectVariable, string>>;
 type ThemeShapeVariable = "--radius-sm" | "--radius-md" | "--radius-lg";
 type ThemeShape = Readonly<Record<ThemeShapeVariable, string>>;
-type ThemeComponentVariable = "--mona-calendar-background" | "--mona-calendar-shadow" | "--mona-list-background" | "--mona-list-disabled-background" | "--mona-list-group-background" | "--mona-list-group-border-width" | "--mona-list-group-font-weight" | "--mona-menubar-background" | "--mona-menubar-shadow" | "--mona-pager-background" | "--mona-slider-handle-border-color" | "--mona-tab-list-background" | "--mona-tab-content-background";
+type ThemeComponentVariable = "--mona-calendar-background" | "--mona-calendar-shadow" | "--mona-list-background" | "--mona-list-disabled-background" | "--mona-list-group-background" | "--mona-list-group-border-width" | "--mona-list-group-font-weight" | "--mona-menubar-background" | "--mona-menubar-shadow" | "--mona-pager-background" | "--mona-slider-handle-border-color";
 type ThemeComponents = Readonly<Record<ThemeComponentVariable, string>>;
 interface ThemeProfile {
     readonly colors: ThemeColors;

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

@@ -1,121 +0,0 @@
-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 } from './nanahoshi-mona-ui-grid-grid-toggle.component-QDo6TweF.mjs';
-import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-BkISJoqL.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-DWzYyGnb.mjs';
-import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-BbBPZj7t.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        @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\"\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                    @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                            [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 === 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                            (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                        <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                            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                        @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\"\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                        @for (column of columns(); track $index) {\n                            @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\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 === 0\"\n                                [lastInRow]=\"\n                                    colIndex === columns().length - (gridService.masterDetailTemplate() ? 0 : 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                            <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: "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
-                    ], 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        @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\"\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                    @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                            [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 === 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                            (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                        <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                            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                        @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\"\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                        @for (column of columns(); track $index) {\n                            @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\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 === 0\"\n                                [lastInRow]=\"\n                                    colIndex === columns().length - (gridService.masterDetailTemplate() ? 0 : 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                            <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-DReEfWfG.mjs.map