@lilydesignsystem/angular-data-grid 0.10.0 → 0.11.1

package/README.md

@@ -20,7 +20,14 @@ import { DataGrid, type DataGridColumn } from "@lilydesignsystem/angular-data-gr
   selector: "app-users",
   standalone: true,
   imports: [DataGrid],
-  template: `<lily-data-grid label="Users" [columns]="columns" [rows]="rows" selectionMode="multiple" [(selected)]="selected" [labels]="labels" />`,
+  template: `<lily-data-grid
+    label="Users"
+    [columns]="columns"
+    [rows]="rows"
+    selectionMode="multiple"
+    [(selected)]="selected"
+    [labels]="labels"
+  />`,
 })
 export class UsersComponent {
   columns: DataGridColumn[] = [
@@ -33,20 +40,24 @@ export class UsersComponent {
     { name: "Bob", email: "bob@example.com", role: "Editor" },
   ];
   selected: string[] = [];
-  labels = { search: "Search users", selectAll: "Select all rows", selectRow: (name: string) => `Select ${name}` };
+  labels = {
+    search: "Search users",
+    selectAll: "Select all rows",
+    selectRow: (name: string) => `Select ${name}`,
+  };
 }
 ```
 
 ## What is Angular-specific
 
-| Svelte | Angular |
-| --- | --- |
-| `selected`, `filter`, `sort`, `columnOrder`, `page` (bindable) | `model()`s: `[(selected)]`, `[(filter)]`, `[(sort)]`, `[(columnOrder)]`, `[(page)]` |
-| `onCellEdit`, `onFilesSelected`, `onFileRemove`, `onRowActivate`, `onExport` | the outputs `cellEdit`, `filesSelected`, `fileRemove`, `rowActivate`, `exportFile`, and the `exportHandler` input (return `false` to stop the save). An output cannot be tested for a listener, so Enter / a click activates a row only when `[activateRows]="true"` |
-| `empty`, `footer`, column `cell`, `headerCell`, `avatar`, `personEditor` snippets | `TemplateRef`s: the `empty` and `footer` inputs, and the column's `cell`, `headerCell`, `avatar`, `personEditor` (the context is `$implicit`) |
-| rest props on the root | the root `<div class="data-grid">` is inside the `<lily-data-grid>` host; put extra attributes on the host, and `className` on the root |
-| `rowAttrs`, column `cellAttrs` | the same inputs, applied through the `lilyDataGridAttrs` directive |
-| `class` | `className` |
+| Svelte                                                                            | Angular                                                                                                                                                                                                                                                              |
+| --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `selected`, `filter`, `sort`, `columnOrder`, `page` (bindable)                    | `model()`s: `[(selected)]`, `[(filter)]`, `[(sort)]`, `[(columnOrder)]`, `[(page)]`                                                                                                                                                                                  |
+| `onCellEdit`, `onFilesSelected`, `onFileRemove`, `onRowActivate`, `onExport`      | the outputs `cellEdit`, `filesSelected`, `fileRemove`, `rowActivate`, `exportFile`, and the `exportHandler` input (return `false` to stop the save). An output cannot be tested for a listener, so Enter / a click activates a row only when `[activateRows]="true"` |
+| `empty`, `footer`, column `cell`, `headerCell`, `avatar`, `personEditor` snippets | `TemplateRef`s: the `empty` and `footer` inputs, and the column's `cell`, `headerCell`, `avatar`, `personEditor` (the context is `$implicit`)                                                                                                                        |
+| rest props on the root                                                            | the root `<div class="data-grid">` is inside the `<lily-data-grid>` host; put extra attributes on the host, and `className` on the root                                                                                                                              |
+| `rowAttrs`, column `cellAttrs`                                                    | the same inputs, applied through the `lilyDataGridAttrs` directive                                                                                                                                                                                                   |
+| `class`                                                                           | `className`                                                                                                                                                                                                                                                          |
 
 Everything else — columns, labels, `rowId`, `selectionMode`, `pageSize`, `storageKey`, `mode`,
 the keyboard model, the cell types, editing, export and virtualization — is as in the Svelte
@@ -86,7 +97,7 @@ Requires `@lilydesignsystem/angular-headless`.
 - **Field-specific search.** `filterField` (a `model()`, `onFilterFieldChange`) limits the text filter to one column; `labels.searchField` (the select's name) with `labels.searchAllFields` (its first option) shows the select, listing the filterable columns. Without a field the whole row is searched.
 - **`movableColumns`** makes every column movable (Alt+Arrow on the header, or drag), unless a column's `movable` is `false`.
 - **Right-to-left.** The horizontal arrows are visual, so in a right-to-left layout (the nearest `dir`, else the computed direction) ArrowLeft goes to the next cell and ArrowRight to the previous, and Alt+Arrow moves a column the way the arrow points. Vertical keys, Home, End and the page keys do not change. The pure `isRtl` / `logicalKey` are exported.
-- **Labels.** `DataGridLabels` is the one bundle of every string. What each feature needs is listed in `CONTROL_LABELS` (labels that *name a control*) and `ANNOUNCEMENT_LABELS` (live-region messages), and `requiredLabels(features)` / `missingLabels(features, labels)` compute it, so an app can assert in a test that its bundle for a locale is complete. In development the grid logs once, naming the labels its features call for that `labels` leaves out (`warnMissingLabels={false}` silences it; it never logs in production). Lily has no English fallback: a missing label is a control with no name or an announcement never made. `sortAnnouncement` receives the ARIA token (`ascending`, `descending`, `none`), which the bundle turns into its own words.
+- **Labels.** `DataGridLabels` is the one bundle of every string. What each feature needs is listed in `CONTROL_LABELS` (labels that _name a control_) and `ANNOUNCEMENT_LABELS` (live-region messages), and `requiredLabels(features)` / `missingLabels(features, labels)` compute it, so an app can assert in a test that its bundle for a locale is complete. In development the grid logs once, naming the labels its features call for that `labels` leaves out (`warnMissingLabels={false}` silences it; it never logs in production). Lily has no English fallback: a missing label is a control with no name or an announcement never made. `sortAnnouncement` receives the ARIA token (`ascending`, `descending`, `none`), which the bundle turns into its own words.
 - **Row attributes.** `rowAttrs(row)` returns attributes spread onto each body row — the way to put test ids (`data-testid`), data attributes and other hooks on rows (`rowAttrs={(row) => ({ "data-testid": `row-${row.id}` })}`); `rowClass` does the same for classes, and a column's `cellAttrs` / `cellClass` for cells.
 
 ## Pager landmark (0.10.0)

package/fesm2022/lilydesignsystem-angular-data-grid.mjs

@@ -884,7 +884,7 @@ var DataGridAttrs = class DataGridAttrs {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.3",
+			version: "22.2.4",
 			ngImport: i0,
 			type: DataGridAttrs,
 			deps: [],
@@ -894,7 +894,7 @@ var DataGridAttrs = class DataGridAttrs {
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
 			minVersion: "17.1.0",
-			version: "22.2.3",
+			version: "22.2.4",
 			type: DataGridAttrs,
 			isStandalone: true,
 			selector: "[lilyDataGridAttrs]",
@@ -911,7 +911,7 @@ var DataGridAttrs = class DataGridAttrs {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: DataGridAttrs,
 	decorators: [{
@@ -954,6 +954,11 @@ var DataGrid = class DataGrid {
 	isMovable(column) {
 		return column.movable ?? this.movableColumns();
 	}
+	footerAggregate(columnId, kind) {
+		const column = this.resolvedColumns().find((c) => c.id === columnId);
+		if (!column) return void 0;
+		return aggregateValues(kind, this.sortedEntries().map((e) => defaultAccessor(column, e.row)));
+	}
 	constructor() {
 		this.label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.caption = input(void 0, ...ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []);
@@ -1155,7 +1160,9 @@ var DataGrid = class DataGrid {
 		this.someSelected = computed(() => !this.allSelected() && this.sortedEntries().some((e) => this.selectedSet().has(e.id)), ...ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []);
 		this.footerContext = computed(() => ({
 			columns: this.visibleColumns(),
-			rows: this.pageEntries().map((e) => e.row)
+			rows: this.pageEntries().map((e) => e.row),
+			allRows: this.sortedEntries().map((e) => e.row),
+			aggregate: (columnId, kind) => this.footerAggregate(columnId, kind)
 		}), ...ngDevMode ? [{ debugName: "footerContext" }] : /* istanbul ignore next */ []);
 		this.exportColumns = computed(() => this.visibleColumns().filter((c) => c.exportable !== false), ...ngDevMode ? [{ debugName: "exportColumns" }] : /* istanbul ignore next */ []);
 		this.exportEntries = computed(() => this.exportScope() === "selected" ? this.sortedEntries().filter((e) => this.selectedSet().has(e.id)) : this.sortedEntries(), ...ngDevMode ? [{ debugName: "exportEntries" }] : /* istanbul ignore next */ []);
@@ -1231,7 +1238,8 @@ var DataGrid = class DataGrid {
 			const snapshot = {
 				columnWidths: this.columnWidths(),
 				hiddenColumnIds: [...this.hiddenColumnIds()],
-				sort: this.sort()
+				sort: this.sort(),
+				columnOrder: this.columnOrder()
 			};
 			if (!key || typeof localStorage === "undefined") return;
 			try {
@@ -1343,6 +1351,12 @@ var DataGrid = class DataGrid {
 		const width = this.widthFor(column);
 		if (width) parts.push(`width:${width}px`);
 		if (column.align) parts.push(`text-align:${column.align}`);
+		if (column.pinned) {
+			const visible = this.visibleColumns();
+			const i = visible.findIndex((c) => c.id === column.id);
+			const widths = (column.pinned === "start" ? visible.slice(0, i) : visible.slice(i + 1)).filter((c) => c.pinned === column.pinned).map((c) => this.widthFor(c));
+			if (widths.every((w) => w !== void 0)) parts.push(`--data-grid-pinned-offset:${widths.reduce((a, w) => a + (w ?? 0), 0)}px`);
+		}
 		return parts.length > 0 ? parts.join(";") : null;
 	}
 	setWidth(column, width) {
@@ -1886,6 +1900,7 @@ var DataGrid = class DataGrid {
 				if (saved.columnWidths) this.columnWidths.set(saved.columnWidths);
 				if (saved.hiddenColumnIds) this.hiddenColumnIds.set(new Set(saved.hiddenColumnIds));
 				if (saved.sort) this.sort.set(saved.sort);
+				if (Array.isArray(saved.columnOrder)) this.columnOrder.set(saved.columnOrder);
 			}
 		} catch {}
 	}
@@ -1930,7 +1945,7 @@ var DataGrid = class DataGrid {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.3",
+			version: "22.2.4",
 			ngImport: i0,
 			type: DataGrid,
 			deps: [],
@@ -1940,7 +1955,7 @@ var DataGrid = class DataGrid {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.3",
+			version: "22.2.4",
 			type: DataGrid,
 			isStandalone: true,
 			selector: "lily-data-grid",
@@ -2768,7 +2783,7 @@ var DataGrid = class DataGrid {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: DataGrid,
 	decorators: [{