@nanahoshi/mona-ui 0.22.1 → 0.23.1

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

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, Renderer2, input, effect, Directive } from '@angular/core';
-import { forEach, compact } from '@mirei/ts-collections';
+import { forEach } from '@mirei/ts-collections';
 import { Observable, timer, take, debounceTime, map, merge, scan, filter } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { isIterable } from 'rxjs/internal/util/isIterable';
 
 class AttributeBinderDirective {
     #element;
@@ -111,23 +110,16 @@ const hsva2rgba = (hue, saturation, value, alpha) => {
     };
 };
 
+const toHexByte = (value) => {
+    const byte = Math.min(255, Math.max(0, Math.round(value)));
+    return byte.toString(16).padStart(2, "0");
+};
 const rgba2hex = (r, g, b, a) => {
     if (r == null || g == null || b == null || a == null) {
         return "";
     }
-    let rHex = r.toString(16);
-    let gHex = g.toString(16);
-    let bHex = b.toString(16);
-    let aHex = a.toString(16);
-    if (rHex.length == 1)
-        rHex = "0" + rHex;
-    if (gHex.length == 1)
-        gHex = "0" + gHex;
-    if (bHex.length == 1)
-        bHex = "0" + bHex;
-    if (aHex.length == 1)
-        aHex = "0" + aHex;
-    return `#${rHex}${gHex}${bHex}${aHex.toUpperCase() !== "FF" ? aHex : ""}`;
+    const aHex = toHexByte(a);
+    return `#${toHexByte(r)}${toHexByte(g)}${toHexByte(b)}${aHex !== "ff" ? aHex : ""}`;
 };
 
 const rgba2hsla = (red, green, blue, alpha) => {
@@ -179,10 +171,9 @@ const rgba2hsva = (r, g, b, a) => {
     const max = Math.max(r, g, b);
     const min = Math.min(r, g, b);
     let h = 0;
-    let s;
     const v = max;
     const d = max - min;
-    s = max === 0 ? 0 : d / max;
+    const s = max === 0 ? 0 : d / max;
     if (max !== min) {
         if (max === r) {
             h = (g - b) / d + (g < b ? 6 : 0);
@@ -231,7 +222,8 @@ const string2rgba = (rgbText) => {
 
 /**
  * Generates a unique control ID for an element.
- * The ID consists of a prefix, a random hexadecimal string, and a suffix.
+ * The ID consists of the `mona-` prefix followed by a random hexadecimal string.
+ * It contains only characters that are safe in CSS selectors, so it can be used with `querySelector("#…")` unescaped.
  * @param {number} [level=0] - The nesting level of the element. This increases the length of the generated ID.
  * @param {number} [length=7] - The base length of the random part of the ID.
  * @returns {string} A unique control ID string for use for elements.
@@ -245,14 +237,14 @@ const createElementControlId = (level = 0, length = 7) => {
         const randomId = Array.from(array, byte => byte.toString(16).padStart(2, "0"))
             .join("")
             .substring(0, idLength);
-        return `${prefix}:${randomId}:`;
+        return `${prefix}${randomId}`;
     }
     let hex = "";
     const chars = "0123456789abcdef";
     for (let i = 0; i < idLength; i++) {
         hex += chars[Math.floor(Math.random() * 16)];
     }
-    return `${prefix}:${hex}:`;
+    return `${prefix}${hex}`;
 };
 
 function focusElement(host, element) {
@@ -272,7 +264,7 @@ function focusElement(host, element) {
 
 const rxFromResize = (target, options) => {
     return new Observable(observer => {
-        const elements = Array.isArray(target) ? target : [target];
+        const elements = target instanceof Element ? [target] : Array.from(target ?? []);
         for (const element of elements) {
             if (!(element instanceof Element)) {
                 observer.error(new TypeError("target must be an Element or an iterable of Elements"));
@@ -348,18 +340,22 @@ const findScrollableElement = (container) => {
     return null;
 };
 
+const toPixels = (value) => (value != null ? `${value}px` : "");
 const setWindowStyles = (element, settings) => {
     if (!element) {
         return;
     }
-    const classes = isIterable(settings.windowClass) ? [...settings.windowClass] : [settings.windowClass];
-    compact(classes).forEach(className => element.classList.add(className));
-    const minWidth = settings.minWidth ? `${settings.minWidth}px` : "";
-    const minHeight = settings.minHeight ? `${settings.minHeight}px` : "";
-    const maxWidth = settings.maxWidth ? `${settings.maxWidth}px` : "";
-    const maxHeight = settings.maxHeight ? `${settings.maxHeight}px` : "";
-    const top = settings.top ? `${settings.top}px` : `calc(50% - ${element.getBoundingClientRect().height / 2}px)`;
-    const left = settings.left ? `${settings.left}px` : `calc(50% - ${element.getBoundingClientRect().width / 2}px)`;
+    const classes = typeof settings.windowClass === "string" ? [settings.windowClass] : (settings.windowClass ?? []);
+    classes
+        .flatMap(className => (className ?? "").split(/\s+/))
+        .filter(className => className !== "")
+        .forEach(className => element.classList.add(className));
+    const minWidth = toPixels(settings.minWidth);
+    const minHeight = toPixels(settings.minHeight);
+    const maxWidth = toPixels(settings.maxWidth);
+    const maxHeight = toPixels(settings.maxHeight);
+    const top = settings.top != null ? `${settings.top}px` : `calc(50% - ${element.getBoundingClientRect().height / 2}px)`;
+    const left = settings.left != null ? `${settings.left}px` : `calc(50% - ${element.getBoundingClientRect().width / 2}px)`;
     const position = "absolute";
     Object.assign(element.style, { left, maxHeight, maxWidth, minHeight, minWidth, position, top });
 };
@@ -374,7 +370,7 @@ const setWindowStyles = (element, settings) => {
  * @returns A CSS-compliant string value.
  */
 const toCssValue = (value) => {
-    if (value == null || value === "") {
+    if (value == null || (typeof value === "string" && value.trim() === "")) {
         return "";
     }
     if (typeof value === "number" || isFinite(Number(value))) {
@@ -402,8 +398,15 @@ const isNavigationKey = (key) => {
     return NavigationKeysList.includes(key);
 };
 
-const isTypeaheadKey = (key) => {
-    return /^[a-zA-Z0-9\-_\s]$/.test(key);
+/**
+ * Returns whether a `KeyboardEvent.key` value should feed typeahead.
+ * Any single letter or digit in any script counts, plus space, `-` and `_`.
+ */
+const isTypeaheadKey = (key, modifiers) => {
+    if (modifiers?.ctrlKey || modifiers?.metaKey || modifiers?.altKey) {
+        return false;
+    }
+    return /^[\p{L}\p{M}\p{N}\-_\s]$/u.test(key);
 };
 const setupTypeahead = (typeaheadKey$) => {
     const resetTrigger$ = typeaheadKey$.pipe(debounceTime(200), map(() => ({ type: "reset", value: "" })));

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

@@ -260,6 +260,7 @@ const AR_SA_MESSAGES = {
         selectRow: (rowNumber) => `تحديد الصف ${formatInteger(rowNumber)}`
     },
     list: {
+        filterList: "تصفية القائمة",
         noData: "لا توجد بيانات"
     },
     listBox: {
@@ -639,6 +640,7 @@ const ES_ES_MESSAGES = {
         selectRow: (rowNumber) => `Seleccionar fila ${rowNumber}`
     },
     list: {
+        filterList: "Filtrar lista",
         noData: "No hay datos"
     },
     listBox: {
@@ -1018,6 +1020,7 @@ const DE_DE_MESSAGES = {
         selectRow: (rowNumber) => `Zeile ${rowNumber} auswählen`
     },
     list: {
+        filterList: "Liste filtern",
         noData: "Keine Daten"
     },
     listBox: {
@@ -1397,6 +1400,7 @@ const FR_FR_MESSAGES = {
         selectRow: (rowNumber) => `Sélectionner la ligne ${rowNumber}`
     },
     list: {
+        filterList: "Filtrer la liste",
         noData: "Aucune donnée"
     },
     listBox: {
@@ -1776,6 +1780,7 @@ const IT_IT_MESSAGES = {
         selectRow: (rowNumber) => `Seleziona riga ${rowNumber}`
     },
     list: {
+        filterList: "Filtra elenco",
         noData: "Nessun dato disponibile"
     },
     listBox: {
@@ -2155,6 +2160,7 @@ const JA_JP_MESSAGES = {
         selectRow: (rowNumber) => `${rowNumber}行目を選択`
     },
     list: {
+        filterList: "リストをフィルター",
         noData: "データがありません"
     },
     listBox: {
@@ -2534,6 +2540,7 @@ const KO_KR_MESSAGES = {
         selectRow: (rowNumber) => `${rowNumber}행 선택`
     },
     list: {
+        filterList: "목록 필터",
         noData: "데이터 없음"
     },
     listBox: {
@@ -2913,6 +2920,7 @@ const PT_BR_MESSAGES = {
         selectRow: (rowNumber) => `Selecionar linha ${rowNumber}`
     },
     list: {
+        filterList: "Filtrar lista",
         noData: "Nenhum dado disponível"
     },
     listBox: {
@@ -3292,6 +3300,7 @@ const ZH_CN_MESSAGES = {
         selectRow: (rowNumber) => `选择第 ${rowNumber} 行`
     },
     list: {
+        filterList: "筛选列表",
         noData: "没有数据"
     },
     listBox: {
@@ -3671,6 +3680,7 @@ const ZH_TW_MESSAGES = {
         selectRow: (rowNumber) => `選取第 ${rowNumber} 個資料列`
     },
     list: {
+        filterList: "篩選清單",
         noData: "沒有資料"
     },
     listBox: {
@@ -4050,6 +4060,7 @@ const TR_TR_MESSAGES = {
         selectRow: (rowNumber) => `${rowNumber}. satırı seç`
     },
     list: {
+        filterList: "Listeyi filtrele",
         noData: "Veri yok"
     },
     listBox: {
@@ -4429,6 +4440,7 @@ const ID_ID_MESSAGES = {
         selectRow: (rowNumber) => `Pilih baris ${rowNumber}`
     },
     list: {
+        filterList: "Saring daftar",
         noData: "Tidak ada data"
     },
     listBox: {
@@ -4837,6 +4849,7 @@ const RU_RU_MESSAGES = {
         selectRow: (rowNumber) => `Выбрать строку ${rowNumber}`
     },
     list: {
+        filterList: "Фильтр списка",
         noData: "Нет данных"
     },
     listBox: {

package/fesm2022/nanahoshi-mona-ui-popup-menu.mjs

@@ -545,7 +545,7 @@ class PopupMenuListComponent {
                 this.#typeaheadKey$.next("");
                 this.handleNavigationKey(e);
             }
-            else if (isTypeaheadKey(e.key)) {
+            else if (isTypeaheadKey(e.key, e)) {
                 e.preventDefault();
                 this.handleTypeaheadKey(e);
             }

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

@@ -196,7 +196,7 @@ class TreeViewComponent {
         this.treeService.blur$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(e => this.blur.emit(e));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeViewComponent, isStandalone: true, selector: "mona-tree-view", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, parentIdField: { classPropertyName: "parentIdField", publicName: "parentIdField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", focus: "focus", nodeClick: "nodeClick" }, providers: [TreeService], queries: [{ propertyName: "nodeTemplate", first: true, predicate: TreeViewNodeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (treeService.filterableOptions().enabled) {\n    <div role=\"search\" [attr.aria-label]=\"filterAriaLabel()\">\n        <mona-filter-input\n            [filter]=\"treeService.filterText()\"\n            [debounce]=\"treeService.filterableOptions().debounce\"\n            [placeholder]=\"treeService.filterPlaceholder()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n<div class=\"flex-1 overflow-auto\">\n    <mona-tree [ariaLabel]=\"ariaLabel()\">\n        @if (nodeTemplate()) {\n            <ng-template monaTreeNodeTemplate let-dataItem let-element=\"element\">\n                <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"{ $implicit: dataItem, element }\"></ng-container>\n            </ng-template>\n        }\n    </mona-tree>\n</div>\n", dependencies: [{ kind: "component", type: FilterInputComponent, selector: "mona-filter-input", inputs: ["debounce", "filter", "placeholder", "size"], outputs: ["filterChange", "inputBlur", "inputFocus"] }, { kind: "component", type: TreeComponent, selector: "mona-tree", inputs: ["ariaLabel", "data"] }, { kind: "directive", type: TreeNodeTemplateDirective, selector: "ng-template[monaTreeNodeTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TreeViewComponent, isStandalone: true, selector: "mona-tree-view", inputs: { animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, parentIdField: { classPropertyName: "parentIdField", publicName: "parentIdField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", focus: "focus", nodeClick: "nodeClick" }, providers: [TreeService], queries: [{ propertyName: "nodeTemplate", first: true, predicate: TreeViewNodeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (treeService.filterableOptions().enabled) {\n    <div role=\"search\" [attr.aria-label]=\"filterAriaLabel()\">\n        <mona-filter-input\n            [filter]=\"treeService.filterText()\"\n            [debounce]=\"treeService.filterableOptions().debounce\"\n            [placeholder]=\"treeService.filterPlaceholder()\"\n            (filterChange)=\"onFilterChange($event)\"></mona-filter-input>\n    </div>\n}\n<div class=\"flex-1 overflow-auto\">\n    <mona-tree [ariaLabel]=\"ariaLabel()\">\n        @if (nodeTemplate()) {\n            <ng-template monaTreeNodeTemplate let-dataItem let-element=\"element\">\n                <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate() ?? null\"\n                    [ngTemplateOutletContext]=\"{ $implicit: dataItem, element }\"></ng-container>\n            </ng-template>\n        }\n    </mona-tree>\n</div>\n", dependencies: [{ kind: "component", type: FilterInputComponent, selector: "mona-filter-input", inputs: ["activeDescendant", "ariaLabel", "controls", "debounce", "filter", "placeholder", "size"], outputs: ["filterChange", "inputBlur", "inputFocus"] }, { kind: "component", type: TreeComponent, selector: "mona-tree", inputs: ["ariaLabel", "data"] }, { kind: "directive", type: TreeNodeTemplateDirective, selector: "ng-template[monaTreeNodeTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeViewComponent, decorators: [{
             type: Component,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.22.1",
+  "version": "0.23.1",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {

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

@@ -274,6 +274,11 @@ interface FilterableOptions {
     type: "menu" | "row" | "menu, row";
 }
 
+/** The classes a {@link GridRowClass} function adds to a data row. Nullish values add nothing. */
+type GridRowClassValue = string | readonly string[] | null | undefined;
+/** Returns the classes to add to the data row that shows the given item. */
+type GridRowClass<TData> = (data: TData) => GridRowClassValue;
+
 interface SortableOptions {
     allowUnsort?: boolean;
     enabled?: boolean;
@@ -898,16 +903,59 @@ interface RowEditContext {
 }
 type GridEditContext = CellEditContext | RowEditContext;
 
-interface GridLockedColumnState {
-    readonly edge: boolean;
-    readonly offset: number;
-    readonly side: GridColumnLockedPosition;
+/** A single row of the grid body — either a group header, a group footer, or a data row. */
+type GridViewRow = GridViewGroupRow | GridViewGroupFooterRow | GridViewDataRow;
+/** A group header row in the flattened grid view. */
+interface GridViewGroupRow {
+    /** The number of data rows (leaf rows) contained in this group. */
+    readonly count: number;
+    /** The nesting depth (0 = top-level group). */
+    readonly depth: number;
+    /** The field this group is grouped by. */
+    readonly field: string;
+    /** A unique identifier for this group (used for collapse tracking). */
+    readonly groupKey: string;
+    /** The display value for this group header. */
+    readonly groupValue: unknown;
+    /** A key that identifies this row among all body rows, for view tracking. */
+    readonly key: string;
+    /** The display title for this group header. */
+    readonly title: string;
+    readonly type: "group";
+}
+/** A footer row for a grouped section in the flattened grid view. */
+interface GridViewGroupFooterRow {
+    /** The nesting depth (0 = top-level group). */
+    readonly depth: number;
+    /** The aggregate metadata for this grouped footer. */
+    readonly groupAggregate: GridGroupAggregate;
+    /** A key that identifies this row among all body rows, for view tracking. */
+    readonly key: string;
+    readonly type: "groupFooter";
+}
+/** A data row in the flattened grid view. */
+interface GridViewDataRow {
+    /** The depth of the innermost group this row belongs to, or 0 when the grid is not grouped. */
+    readonly depth: number;
+    /** The groupKey of the innermost group this row belongs to, or null when the grid is not grouped. */
+    readonly groupKey: string | null;
+    /** A key that identifies this row among all body rows, for view tracking. */
+    readonly key: string;
+    /** The actual Row model. */
+    readonly row: Row;
+    readonly type: "data";
 }
 
-interface PaginationState {
-    readonly page: number;
-    readonly skip: number;
-    readonly take: number;
+/**
+ * How a layout column stays pinned while the grid scrolls horizontally.
+ * Sides are logical, so `start` is the left edge in LTR and the right edge in RTL.
+ */
+interface GridStickyState {
+    /** Whether this is the innermost pinned column on its side, which draws the separator border. */
+    readonly edge: boolean;
+    /** The distance from the pinned side, in pixels. */
+    readonly offset: number;
+    readonly side: "end" | "start";
 }
 
 type StructuralColumnKind = "detail" | "reorder" | "selection";
@@ -917,6 +965,56 @@ interface StructuralColumnDescriptor {
     readonly width: number;
 }
 
+/**
+ * A single physical column of the grid tables, in inline-start to inline-end order.
+ * Every table section (header, body, add row, footer) renders the same sequence of layout columns.
+ */
+type GridLayoutColumn = GridLayoutDataColumn | GridLayoutGroupColumn | GridLayoutStructuralColumn;
+/** A user-defined data or command column. */
+interface GridLayoutDataColumn {
+    readonly column: Column;
+    /** The index among the visible user columns. */
+    readonly columnIndex: number;
+    /** Whether ArrowLeft (inline-start) stops at this cell. */
+    readonly firstInRow: boolean;
+    readonly key: string;
+    readonly kind: "column";
+    /** Whether ArrowRight (inline-end) stops at this cell. */
+    readonly lastInRow: boolean;
+    /** The keyboard-navigation column index. */
+    readonly logicalIndex: number;
+    readonly sticky: GridStickyState | null;
+    readonly width: number | null;
+}
+/** An indent column rendered for each active group level. It does not participate in keyboard navigation. */
+interface GridLayoutGroupColumn {
+    readonly depth: number;
+    readonly key: string;
+    readonly kind: "group";
+    readonly logicalIndex: null;
+    readonly sticky: GridStickyState | null;
+    readonly width: number;
+}
+/** A built-in column such as the row reorder handle, the detail toggle or the selection checkbox. */
+interface GridLayoutStructuralColumn {
+    /** Whether ArrowLeft (inline-start) stops at this cell. */
+    readonly firstInRow: boolean;
+    readonly key: string;
+    readonly kind: StructuralColumnKind;
+    /** Whether ArrowRight (inline-end) stops at this cell. */
+    readonly lastInRow: boolean;
+    /** The keyboard-navigation column index. */
+    readonly logicalIndex: number;
+    readonly sticky: GridStickyState | null;
+    readonly width: number;
+}
+
+interface PaginationState {
+    readonly page: number;
+    readonly skip: number;
+    readonly take: number;
+}
+
 interface RowEditDataItem extends Record<string, unknown> {
     readonly $rowId: string;
 }
@@ -945,9 +1043,7 @@ declare class GridService {
     readonly columns: _angular_core.WritableSignal<ImmutableList<Column>>;
     readonly contextMenuItems: _angular_core.WritableSignal<ImmutableSet<PopupMenuItem>>;
     readonly dataStateChange$: Subject<GridDataState>;
-    readonly detailColumnOffset: _angular_core.Signal<number>;
     readonly detailColumnWidth = 36;
-    readonly detailStructuralWidth: _angular_core.Signal<36 | 0>;
     readonly draggingRowUid: _angular_core.WritableSignal<string | null>;
     readonly edit$: Subject<GridEditEvent>;
     readonly editBaseDict: _angular_core.Signal<ImmutableDictionary<string, RowEditDataItem>>;
@@ -972,13 +1068,9 @@ declare class GridService {
     readonly headerTableElement: _angular_core.WritableSignal<HTMLTableElement | null>;
     readonly horizontalScrollLeft: _angular_core.Signal<number>;
     readonly isInEditMode: _angular_core.Signal<boolean>;
-    readonly lastLeftStructuralOffset: _angular_core.Signal<number | null>;
-    readonly leadingLogicalColumnCount: _angular_core.Signal<number>;
-    readonly leadingStructuralColumnCount: _angular_core.Signal<number>;
+    readonly layout: _angular_core.Signal<readonly GridLayoutColumn[]>;
+    readonly layoutColumnByKey: _angular_core.Signal<ReadonlyMap<string, GridLayoutColumn>>;
     readonly leadingStructuralWidth: _angular_core.Signal<number>;
-    readonly leftLockedStructuralWidth: _angular_core.Signal<number>;
-    readonly lockedColumnStates: _angular_core.Signal<ReadonlyMap<string, GridLockedColumnState>>;
-    readonly masterDetailEmptyCellWidth: _angular_core.Signal<number>;
     readonly masterDetailRowWidth: _angular_core.Signal<number>;
     readonly masterDetailTemplate: _angular_core.WritableSignal<TemplateRef<unknown> | null>;
     readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaGridMessages>;
@@ -988,16 +1080,15 @@ declare class GridService {
     readonly remove$: Subject<GridRemoveEvent>;
     readonly reorderableOptions: _angular_core.Signal<ReorderableOptions>;
     readonly resizableOptions: _angular_core.Signal<ResizableOptions>;
+    readonly rowClass: _angular_core.WritableSignal<GridRowClass<unknown> | null>;
     readonly rowDragInProgress: _angular_core.Signal<boolean>;
     readonly rowEdit$: Subject<RowEditEvent>;
     readonly rowKey: _angular_core.WritableSignal<GridKeySelector<unknown>>;
     readonly rowReorder$: Subject<RowReorderEvent<Record<PropertyKey, unknown>>>;
-    readonly rowReorderColumnOffset: _angular_core.Signal<number>;
     readonly rowReorderColumnVisible: _angular_core.Signal<boolean>;
     readonly rowReorderColumnWidth = 36;
     readonly rowReorderDisabledReason: _angular_core.Signal<RowReorderDisabledReason>;
     readonly rowReorderInteractionEnabled: _angular_core.Signal<boolean>;
-    readonly rowReorderStructuralWidth: _angular_core.Signal<36 | 0>;
     readonly rowReorderableOptions: _angular_core.Signal<RowReorderableOptions>;
     readonly rows: _angular_core.WritableSignal<ImmutableList<Row>>;
     readonly save$: Subject<GridSaveEvent>;
@@ -1010,18 +1101,14 @@ declare class GridService {
     readonly selectedKeysChange$: rxjs.Observable<ImmutableSet<unknown>>;
     readonly selectedKeysLoad$: BehaviorSubject<ImmutableSet<unknown>>;
     readonly selectedRows: _angular_core.Signal<ImmutableSet<Row>>;
-    readonly selectionColumnOffset: _angular_core.Signal<number>;
     readonly selectionColumnVisible: _angular_core.Signal<boolean>;
     readonly selectionColumnWidth = 40;
-    readonly selectionStructuralWidth: _angular_core.Signal<0 | 40>;
     readonly serverBindingEnabled: _angular_core.Signal<boolean>;
     readonly serverLoading: _angular_core.Signal<boolean>;
     readonly serverTotal: _angular_core.Signal<number>;
     readonly someBulkSelectionRowsSelected: _angular_core.Signal<boolean>;
     readonly sortableOptions: _angular_core.WritableSignal<SortableOptions>;
-    readonly structuralColIndexMap: _angular_core.Signal<Map<StructuralColumnKind, number>>;
     readonly structuralColumns: _angular_core.Signal<readonly StructuralColumnDescriptor[]>;
-    readonly structuralLastKind: _angular_core.Signal<StructuralColumnKind | null>;
     readonly tableWidth: _angular_core.Signal<number | null>;
     readonly viewPageRows: _angular_core.Signal<ImmutableList<Row>>;
     readonly viewRowCount: _angular_core.Signal<number>;
@@ -1041,6 +1128,11 @@ declare class GridService {
     clearCollapsedGroups(predicate?: (key: string) => boolean): void;
     clearColumnGrouping(column: Column): void;
     commitRowEdit(originalEvent?: Event): boolean;
+    /**
+     * Builds the body rows for the given data rows: plain data rows when ungrouped, otherwise the flattened
+     * group headers, data rows and group footers. Reads grouping state, so call it inside a computed.
+     */
+    createBodyRows(rows: Iterable<Row>): GridViewRow[];
     deselectAllRows(): void;
     deselectRow(row: Row): void;
     findTextWidthOfColumn(column: Column, element: HTMLTableCellElement): number;
@@ -1107,7 +1199,6 @@ declare class GridService {
     startCellEdit(uid: string, row: Row, column: Column, originalEvent?: Event): boolean;
     startRowEdit(row: Row, originalEvent?: Event): boolean;
     stopCellEdit(originalEvent?: Event): boolean;
-    structuralColumnOffset(kind: StructuralColumnKind, groupPrefixWidth: number): number;
     toggleGroupCollapse(groupKey: string): void;
     updateColumn(columnId: string, patch: Partial<Omit<Column, "id">>): void;
     private applyColumnIndexes;
@@ -1196,7 +1287,6 @@ declare class GridComponent<T> implements GridVariantInput {
     protected readonly filterRowEnabled: _angular_core.Signal<boolean>;
     protected readonly footerClass: _angular_core.Signal<string>;
     protected readonly footerTableClass: _angular_core.Signal<string>;
-    protected readonly footerTableRowClass: _angular_core.Signal<string>;
     protected readonly footerVisible: _angular_core.Signal<boolean>;
     protected readonly gridDetailTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly gridHeaderElement: _angular_core.Signal<ElementRef<HTMLDivElement>>;
@@ -1267,6 +1357,16 @@ declare class GridComponent<T> implements GridVariantInput {
      * @default "medium"
      */
     readonly rounded: _angular_core.InputSignal<"small" | "none" | "medium" | "large" | null | undefined>;
+    /**
+     * @description Returns extra CSS classes for the data row that shows an item, merged onto the row's own
+     * classes via `tailwind-merge`. It runs again whenever the item's row is rebound.
+     * Group, group footer and detail rows are not affected.
+     *
+     * To dim a row, prefer a text style such as `text-muted-foreground` over `opacity`: locked cells stay
+     * opaque so scrolled cells pass beneath them, and opacity on the row or its cells would let those show through.
+     * @default null
+     */
+    readonly rowClass: _angular_core.InputSignal<GridRowClass<T> | null>;
     /**
      * @description Field name or selector used to derive a stable identity for each row.
      * The resolved value must be unique within the grid data.
@@ -1315,7 +1415,7 @@ declare class GridComponent<T> implements GridVariantInput {
     private setResizeObserver;
     private syncToolbarFocusTargets;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridComponent<any>, "mona-grid", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeValues": { "alias": "pageSizeValues"; "required": false; "isSignal": true; }; "resizeMethod": { "alias": "resizeMethod"; "required": false; "isSignal": true; }; "responsivePager": { "alias": "responsivePager"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["columnDefinitions", "gridDetailTemplate", "noDataTemplate", "toolbarTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridComponent<any>, "mona-grid", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeValues": { "alias": "pageSizeValues"; "required": false; "isSignal": true; }; "resizeMethod": { "alias": "resizeMethod"; "required": false; "isSignal": true; }; "responsivePager": { "alias": "responsivePager"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "rowClass": { "alias": "rowClass"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["columnDefinitions", "gridDetailTemplate", "noDataTemplate", "toolbarTemplate"], never, true, never>;
 }
 
 declare const GRID_DEFAULT_MESSAGES: {
@@ -1363,4 +1463,4 @@ declare const GRID_DEFAULT_MESSAGES: {
 };
 
 export { CellEditEvent, ColumnReorderEvent, ColumnSortEvent, GRID_DEFAULT_MESSAGES, GridAddCommandDirective, GridAddEvent, GridCancelCommandDirective, GridCancelEvent, GridCellTemplateDirective, GridColumnComponent, GridColumnTitleTemplateDirective, GridCommandColumnComponent, GridComponent, GridContextMenuDirective, GridDetailTemplateDirective, GridEditCommandDirective, GridEditEvent, GridEditTemplateDirective, GridEditableDirective, GridExportDirective, GridFilterableDirective, GridFooterTemplateDirective, GridGroupFooterTemplateDirective, GridGroupableDirective, GridHeaderTemplateDirective, GridNoDataTemplateDirective, GridRemoveCommandDirective, GridRemoveEvent, GridReorderableDirective, GridResizableDirective, GridRowReorderableDirective, GridSaveCommandDirective, GridSaveEvent, GridSelectableDirective, GridServerBindingDirective, GridSortableDirective, GridStatePersistenceDirective, GridToolbarTemplateDirective, GridVirtualScrollDirective, RowEditEvent, RowReorderEvent };
-export type { AggregateFunction, Column, ColumnConfig, ColumnFormat, ColumnKind, ColumnResizeEvent, EditableOptions, FilterableOptions, GridColumnLockedPosition, GridColumnState, GridDataState, GridEditFormContext, GridEditOperation, GridEditSchemaFactory, GridEditSession, GridEditTemplateContext, GridSaveOperation, GridState, GridStateCompositeFilterDescriptor, GridStateFilterDescriptor, GridStateFilterValue, GridStateLoadResult, GridStateLoadStatus, GridStatePersistenceOptions, GridStateSortDescriptor, GridStateVersion, GroupDescriptor, GroupableOptions, ReorderableOptions, ResizableOptions, ResizeMethod, RowReorderableOptions, SelectableOptions, SortableOptions };
+export type { AggregateFunction, Column, ColumnConfig, ColumnFormat, ColumnKind, ColumnResizeEvent, EditableOptions, FilterableOptions, GridColumnLockedPosition, GridColumnState, GridDataState, GridEditFormContext, GridEditOperation, GridEditSchemaFactory, GridEditSession, GridEditTemplateContext, GridRowClass, GridRowClassValue, GridSaveOperation, GridState, GridStateCompositeFilterDescriptor, GridStateFilterDescriptor, GridStateFilterValue, GridStateLoadResult, GridStateLoadStatus, GridStatePersistenceOptions, GridStateSortDescriptor, GridStateVersion, GroupDescriptor, GroupableOptions, ReorderableOptions, ResizableOptions, ResizeMethod, RowReorderableOptions, SelectableOptions, SortableOptions };

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

@@ -271,6 +271,7 @@ interface MonaGridMessages {
 }
 
 interface MonaListMessages {
+    readonly filterList: string;
     readonly noData: string;
 }
 

package/types/nanahoshi-mona-ui-internal-filter-input.d.ts

@@ -7,6 +7,40 @@ declare class FilterInputComponent implements OnInit {
     #private;
     protected readonly filter$: Subject<string>;
     protected readonly filterText: _angular_core.WritableSignal<string>;
+    /**
+     * When the input controls a list, it acts as a combobox (WAI-ARIA APG): focus stays in the input
+     * and the highlighted option is exposed through `aria-activedescendant`.
+     */
+    protected readonly inputAttributes: _angular_core.Signal<{
+        "aria-label": string | null;
+        role?: undefined;
+        "aria-activedescendant"?: undefined;
+        "aria-autocomplete"?: undefined;
+        "aria-controls"?: undefined;
+        "aria-expanded"?: undefined;
+    } | {
+        role: string;
+        "aria-label": string | null;
+        "aria-activedescendant": string | null;
+        "aria-autocomplete": string;
+        "aria-controls": string;
+        "aria-expanded": boolean;
+    }>;
+    /**
+     * @description Id of the highlighted option in the controlled list, exposed as `aria-activedescendant`.
+     * @default ""
+     */
+    readonly activeDescendant: _angular_core.InputSignal<string | null>;
+    /**
+     * @description Accessible name of the input. The placeholder is not a reliable label, so set this whenever possible.
+     * @default ""
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @description Id of the list this input filters. When set, the input is exposed as a combobox controlling it.
+     * @default ""
+     */
+    readonly controls: _angular_core.InputSignal<string>;
     readonly debounce: _angular_core.InputSignal<number>;
     readonly filter: _angular_core.InputSignal<string>;
     readonly filterChange: _angular_core.OutputEmitterRef<FilterChangeEvent>;
@@ -19,7 +53,7 @@ declare class FilterInputComponent implements OnInit {
     ngOnInit(): void;
     private setSubscriptions;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterInputComponent, "mona-filter-input", never, { "debounce": { "alias": "debounce"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "filterChange": "filterChange"; "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterInputComponent, "mona-filter-input", never, { "activeDescendant": { "alias": "activeDescendant"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "controls": { "alias": "controls"; "required": false; "isSignal": true; }; "debounce": { "alias": "debounce"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "filterChange": "filterChange"; "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; }, never, never, true, never>;
 }
 
 export { FilterInputComponent };