@mintplayer/ng-spark 22.26.0 → 22.27.0

package/README.md

@@ -118,12 +118,14 @@ The grid also renders:
   [ng-bootstrap #419](https://github.com/MintPlayer/mintplayer-ng-bootstrap/issues/419) (the
   dropdown fesm fails to initialise in unlinked JIT test runs).
 
-- **Selection** follows `selectionMode` (`'auto' | 'none' | 'single' | 'multiple'`).
+- **Selection** follows `selectionMode` (`'auto' | 'none' | 'multiple'`).
   - It is set on the query, or on the parent type's `queries` entry, which `<spark-query-card
     [selectionMode]>` and `<spark-query-grid [selectionModeSetting]>` take.
-  - `'auto'` derives it from the custom actions, as before.
-- **Delete** posts the selection to `SparkService.deleteMany()` (`/spark/po/delete-many`). One
-  request deletes all the rows or none.
+  - `'auto'` shows checkboxes when an action the user may run needs a selection: Edit, Delete or a
+    custom action (#467).
+- **Delete** posts the selection to `SparkService.deleteMany()` (`/spark/po/delete-many`), each row
+  with the `etag` its query row carried (#467, D14). One request deletes all the rows or none; a row
+  changed since the list loaded is a 409 that names it.
 - **New** on a sub-query navigates to the create page with `parentId`, `parentType` and `queryId`.
   The create page always asks `SparkService.newObject()` (`/spark/po/new`) for its blank object, so
   the server's `OnNewAsync` sets the defaults. For a sub-query, its base fills the reference to the

package/fesm2022/mintplayer-ng-spark-grid.mjs

@@ -1,5 +1,5 @@
 import { BsDatatableColumnDirective, BsDatatableComponent, BsDatatableFilterPanelDirective, BsRowTemplateDirective, DatatableSettings } from "@mintplayer/ng-bootstrap/datatable";
-import { ShowedOn, defaultQueryActions, filterQueryActions, hasShowedOnFlag, parseSelectionRule, selectionModeFor, valueFor } from "@mintplayer/ng-spark/models";
+import { ShowedOn, confirmationText, defaultQueryActions, filterQueryActions, hasShowedOnFlag, parseSelectionRule, selectionModeFor, valueFor } from "@mintplayer/ng-spark/models";
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, DestroyRef, Directive, Injectable, Injector, TemplateRef, computed, contentChildren, effect, inject, input, linkedSignal, model, output, runInInjectionContext, signal, untracked, viewChild } from "@angular/core";
 import { SPARK_ATTRIBUTE_RENDERERS, cellValue, withDeclaredInputs } from "@mintplayer/ng-spark/renderers";
@@ -549,15 +549,9 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 	currentUrl = toSignal(this.router.events.pipe(filter((e) => e instanceof NavigationEnd), map(() => this.router.url)), { initialValue: this.router.url });
 	rowLinkState = computed(() => ({ [SPARK_RETURN_URL_STATE_KEY]: this.currentUrl() }), ...ngDevMode ? [{ debugName: "rowLinkState" }] : /* istanbul ignore next */ []);
 	onRowClick(event) {
-		if (this.selectionMode() === "none") this.openRow(event);
-	}
-	onRowDblClick(event) {
-		if (this.selectionMode() !== "none") this.openRow(event);
-	}
-	openRow(event) {
 		const row = event.row;
 		const original = event.originalEvent;
-		if ((original?.target)?.closest?.("a, button, input, select, textarea, label, [role=\"button\"]")) return;
+		if ((original?.target)?.closest?.("a, button, input, select, textarea, label, [role=\"button\"], .checkbox-cell")) return;
 		if (original && (original.ctrlKey || original.metaKey || original.shiftKey || original.button === 1)) return;
 		if (!row || !this.canRead()) return;
 		const route = this.rowRouteFor(row);
@@ -624,10 +618,10 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 	}, ...ngDevMode ? [{ debugName: "visibleCustomActions" }] : /* istanbul ignore next */ []);
 	fetchFn = signal(null, ...ngDevMode ? [{ debugName: "fetchFn" }] : /* istanbul ignore next */ []);
 	errorMessage = signal(null, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
-	selectionMode = computed(() => selectionModeFor(this.visibleCustomActions(), this.selectionModeSetting() ?? this.query()?.selectionMode ?? "auto"), ...ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []);
-	toolbarActions = computed(() => {
-		const actions = [];
+	offeredDefaultActions = computed(() => {
+		if (this.recycleBin()) return [];
 		const withheld = new Set(this.disabledActions().map((name) => name.toLowerCase()));
+		const actions = [];
 		for (const definition of this.defaultActions()) {
 			const name = definition.name.toLowerCase();
 			if (name === "new" && this.offersCreate()) actions.push({
@@ -636,13 +630,25 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 				definition,
 				priority: 1 + definition.offset
 			});
-			else if (name === "delete" && this.offersDelete(withheld) && this.selectionMode() !== "none") actions.push({
+			else if (name === "edit" && !withheld.has("edit") && !withheld.has("save")) actions.push({
+				kind: "edit",
+				name: definition.name,
+				definition,
+				priority: 3 + definition.offset
+			});
+			else if (name === "delete" && !withheld.has("delete")) actions.push({
 				kind: "delete",
 				name: definition.name,
 				definition,
 				priority: 5 + definition.offset
 			});
 		}
+		return actions;
+	}, ...ngDevMode ? [{ debugName: "offeredDefaultActions" }] : /* istanbul ignore next */ []);
+	selectionMode = computed(() => selectionModeFor([...this.offeredDefaultActions().map((a) => a.definition), ...this.visibleCustomActions()], this.selectionModeSetting() ?? this.query()?.selectionMode ?? "auto"), ...ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []);
+	toolbarActions = computed(() => {
+		const selectable = this.selectionMode() !== "none";
+		const actions = this.offeredDefaultActions().filter((a) => a.kind === "new" || selectable);
 		for (const definition of this.visibleCustomActions()) actions.push({
 			kind: "custom",
 			name: definition.name,
@@ -652,15 +658,8 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 		return actions;
 	}, ...ngDevMode ? [{ debugName: "toolbarActions" }] : /* istanbul ignore next */ []);
 	rowActions = computed(() => {
-		const withheld = new Set(this.disabledActions().map((name) => name.toLowerCase()));
 		const rowTaking = (definition) => !!definition.selectionRule?.trim() && parseSelectionRule(definition.selectionRule)(1);
-		const actions = [];
-		for (const definition of this.defaultActions()) if (definition.name.toLowerCase() === "delete" && this.offersDelete(withheld) && rowTaking(definition)) actions.push({
-			kind: "delete",
-			name: definition.name,
-			definition,
-			priority: 5 + definition.offset
-		});
+		const actions = this.offeredDefaultActions().filter((a) => a.kind !== "new" && rowTaking(a.definition));
 		for (const definition of this.visibleCustomActions()) if (rowTaking(definition)) actions.push({
 			kind: "custom",
 			name: definition.name,
@@ -678,7 +677,7 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 				priority,
 				definition: {
 					name: addon.id,
-					displayName: { en: this.lang.t(addon.labelKey) },
+					label: { en: this.lang.t(addon.labelKey) },
 					showedOn: "query",
 					refreshOnCompleted: true,
 					offset: priority
@@ -698,9 +697,6 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 			deleted: this.effectiveDeleted() ?? null
 		};
 	}, ...ngDevMode ? [{ debugName: "rowActionScope" }] : /* istanbul ignore next */ []);
-	offersDelete(withheld) {
-		return !this.recycleBin() && !withheld.has("delete");
-	}
 	isToolbarActionEnabled(action) {
 		return this.isActionEnabled(action.definition);
 	}
@@ -709,15 +705,33 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 			case "new":
 				this.startNew();
 				return;
+			case "edit":
+				this.editRow(this.selection()[0]);
+				return;
 			case "delete":
-				await this.deleteRows(this.selection().map((r) => r.id), action.definition);
+				await this.deleteRows(this.selection(), action.definition);
 				return;
 			default: await this.onCustomAction(action.definition);
 		}
 	}
+	editRow(row) {
+		if (!row) return;
+		const route = this.rowRouteFor(row);
+		if (!route) return;
+		this.router.navigate([...route, "edit"], {
+			queryParams: this.rowQueryParams() ?? void 0,
+			state: this.rowLinkState()
+		});
+	}
 	clearSelection() {
 		this.selection.set([]);
 	}
+	loadedIds = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "loadedIds" }] : /* istanbul ignore next */ []);
+	offPageCount = computed(() => {
+		const hostRows = this.data();
+		const loaded = hostRows ? new Set(hostRows.map((r) => r.id)) : this.loadedIds();
+		return this.selection().filter((r) => !loaded.has(r.id)).length;
+	}, ...ngDevMode ? [{ debugName: "offPageCount" }] : /* istanbul ignore next */ []);
 	openRowMenu = signal(null, ...ngDevMode ? [{ debugName: "openRowMenu" }] : /* istanbul ignore next */ []);
 	rowMenuPositions = [{
 		originX: "end",
@@ -746,8 +760,12 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 		await this.runRowAction(action, row);
 	}
 	async runRowAction(action, row) {
+		if (action.kind === "edit") {
+			this.editRow(row);
+			return;
+		}
 		if (action.kind === "delete") {
-			await this.deleteRows([row.id], action.definition);
+			await this.deleteRows([row], action.definition);
 			return;
 		}
 		if (action.kind === "addon" && action.addon) {
@@ -794,17 +812,22 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 			state: this.rowLinkState()
 		});
 	}
-	async deleteRows(ids, definition) {
+	async deleteRows(rows, definition) {
 		const type = this.entityType();
-		if (!type || !ids.length) return;
-		const key = definition?.confirmationMessageKey;
-		const message = ids.length === 1 ? this.lang.t("common.confirmDelete") : (key ? this.lang.t(key) : "") || this.lang.t("common.confirmDeleteSelected");
-		if (!confirm(`${message || "Are you sure?"}${ids.length > 1 ? ` (${ids.length})` : ""}`)) return;
+		const queryId = this.query()?.id;
+		const items = rows.filter((r) => !!r.etag).map((r) => ({
+			id: r.id,
+			etag: r.etag
+		}));
+		if (!type || !queryId || !items.length || items.length !== rows.length) return;
+		const ids = items.map((r) => r.id);
+		const message = confirmationText(definition, ids.length);
+		if (message && !confirm(message)) return;
 		const parentId = this.parentId();
 		const parentType = this.parentType();
 		try {
-			await this.sparkService.deleteMany(type.id, ids, {
-				queryId: this.query()?.id,
+			await this.sparkService.deleteMany(type.id, items, {
+				queryId,
 				...parentId && parentType ? {
 					parentId,
 					parentType
@@ -815,7 +838,7 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 			this.reload();
 		} catch (e) {
 			const err = e;
-			this.errorMessage.set(err.error?.result?.errors?.[0]?.message || err.error?.result?.error || err.error?.error || (err.status === 404 ? this.lang.t("common.deleteRefused") : "") || err.message || this.lang.t("common.actionFailed") || "Action failed");
+			this.errorMessage.set(err.error?.result?.errors?.[0]?.message || (err.status === 409 ? err.error?.result?.message || this.lang.t("common.concurrencyConflict") : "") || err.error?.result?.error || err.error?.error || (err.status === 404 ? this.lang.t("common.deleteRefused") : "") || err.message || this.lang.t("common.actionFailed") || "Action failed");
 		}
 	}
 	isVirtualScrolling = computed(() => isVirtualScrollingQuery(this.query()), ...ngDevMode ? [{ debugName: "isVirtualScrolling" }] : /* istanbul ignore next */ []);
@@ -873,6 +896,9 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 				this.onFilterChanged();
 			});
 		});
+		effect(() => {
+			if (this.selectionMode() === "none" && untracked(() => this.selection().length)) untracked(() => this.selection.set([]));
+		});
 		let firstDeleted = true;
 		effect(() => {
 			this.effectiveDeleted();
@@ -955,6 +981,7 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 			});
 		}
 		this.filters.set(next);
+		this.selection.set([]);
 		this.onFilterChanged();
 	}
 	onFilterChanged() {
@@ -974,10 +1001,8 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 		this.reload();
 	}
 	async onCustomAction(action, rowIds) {
-		if (action.confirmationMessageKey) {
-			const message = this.lang.t(action.confirmationMessageKey) || "Are you sure?";
-			if (!confirm(message)) return;
-		}
+		const message = confirmationText(action, rowIds?.length ?? this.selection().length);
+		if (message && !confirm(message)) return;
 		try {
 			const pId = this.parentId();
 			const pType = this.parentType();
@@ -1065,6 +1090,8 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 			this.resultCount.set(r.totalItems);
 			this.setFetchedColumns(r.columns ?? []);
 			this.disabledActions.set(r.disabledActions ?? []);
+			const ids = r.items.map((item) => item.id);
+			this.loadedIds.set(this.isVirtualScrolling() ? /* @__PURE__ */ new Set([...this.loadedIds(), ...ids]) : new Set(ids));
 			return {
 				data: r.items,
 				totalRecords: r.totalItems,
@@ -1222,7 +1249,7 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 			createClicked: "createClicked"
 		},
 		ngImport: i0,
-		template: "<!--\n  Three explicit states, in this order, and the order is load-bearing.\n\n  This template used to open with `@if (query(); as q)` wrapping EVERYTHING, and `query()` is only\n  set after loadData's awaits resolve. Three separate bugs fell out of that one line: the spinner\n  was unreachable on a first load (it rendered inside the gate, while `loading` starts true and\n  `query` starts null), a first-load failure rendered ZERO DOM — no card, no message, nothing to\n  see or report — and a failed RELOAD left the previous query's rows on screen.\n\n  So: `loading` is checked first and outside any dependency on `query`, and the final `@else`\n  always renders something. Do not fold these back into one gate, and do not move the spinner\n  inside the `query()` branch.\n-->\n@if (loading()) {\n  <div class=\"text-center p-3\">\n    <bs-spinner />\n  </div>\n} @else if (query()) {\n  <!-- A page-fetch failure while the grid is already resolved. Without this the catch returns an\n       empty page and a failed query is indistinguishable from one that legitimately has no rows. -->\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  }\n\n  <!--\n    One datatable, two row sources. `[data]` and `[fetch]` are mutually exclusive in\n    ng-bootstrap — binding both makes `[fetch]` win silently — so exactly one is ever non-null\n    here: `fetchFn` is left null whenever `data` is bound. See the class comment for why rows can\n    arrive from outside at all (streaming must not put a websocket in every detail page's bundle).\n  -->\n  <!--\n    The selection bar (#460, M15): the \"N selected\" chip, only while rows are selected, and part\n    of the grid rather than of a host, so the query card and the query-list page show the same\n    thing. There is deliberately no select-all (owner decision, 2026-09-29): with paged, lazy or\n    virtual-scrolled rows it could only tick the rows loaded so far. Deselect-all is the\n    datatable's own header checkbox, which it shows only while a row is selected; the chip does\n    not repeat it. Single selection has no checkbox column, so no header checkbox either, and a\n    row click only ever selects: there the chip's ⊗ is the deselect. The bar keeps its height\n    while empty, so ticking the first row does not push the table down under the pointer.\n  -->\n  @if (selectionMode() !== 'none') {\n    <div class=\"spark-selection-bar d-flex align-items-center gap-2 mb-2\" style=\"min-height: 1.5rem\">\n      @if (selection().length) {\n        <bs-badge [type]=\"colors.primary\" class=\"spark-selection-chip\">\n          {{ selection().length }} {{ 'common.selected' | t }}\n          @if (selectionMode() === 'single') {\n            <button type=\"button\" class=\"spark-selection-clear\"\n                    [attr.aria-label]=\"'common.clearSelection' | t\" (click)=\"clearSelection()\">\n              <spark-icon name=\"x-circle\" />\n            </button>\n          }\n        </bs-badge>\n      }\n    </div>\n  }\n\n  <bs-datatable\n      [selectionMode]=\"selectionMode()\"\n      [(selection)]=\"selection\"\n      [virtualScroll]=\"isVirtualScrolling()\"\n      [itemSize]=\"40\"\n      [isResponsive]=\"isVirtualScrolling()\"\n      [data]=\"data()\"\n      [fetch]=\"fetchFn()\"\n      [distincts]=\"distinctsFn\"\n      (filterChange)=\"onFilterChange($event)\"\n      (rowClick)=\"onRowClick($event)\"\n      (rowDblClick)=\"onRowDblClick($event)\"\n      [(settings)]=\"settings\">\n    @for (col of visibleColumns(); track col.name) {\n      <!--\n        `canSort`/`canFilter` arrive already resolved by the server (query override → attribute →\n        true), so this only spells the polarity. `!== false` is needed for BOTH, for opposite\n        reasons: absent means capable on our wire, while the datatable's own `filterable` defaults\n        to false, unlike `sortable`.\n\n        ⚠️ `filterActive` and `filterSummary` are deliberately NOT bound. Any *bsDatatableColumn\n        input change recomputes the column set, which retires the live filter view — while the web\n        component's mount-once guard leaves the panel's nodes in place and never re-renders them.\n        Binding them to state our own panel mutates would freeze the panel the instant a value is\n        ticked, until it is closed and reopened. The cost is that a filtered column carries no\n        visual marker yet, which is worth far less than a panel that dies on first use. See #431 F7.\n      -->\n      <div *bsDatatableColumn=\"col.name; sortable: col.canSort !== false; filterable: col.canFilter !== false\">\n        {{ (col.label | resolveTranslation) || col.name }}\n        <spark-attribute-description [description]=\"col.description\" />\n\n        @if (col.canFilter !== false) {\n          <ng-container *bsDatatableFilterPanel=\"let values; let ctx = ctx\">\n            <spark-column-filter-panel\n              [column]=\"col\"\n              [values]=\"values()\"\n              [ctx]=\"ctx\"\n              [filterLabel]=\"filterLabelFor(col)\" />\n          </ng-container>\n        }\n      </div>\n    }\n    <!--\n      The per-row ⋮ menu's column: no header, never sorted or filtered.\n\n      ⚠️ Only once the data columns exist. Those ship WITH the first page, so the rows reach the\n      datatable one render before the column templates do. The datatable sizes its columns ONCE,\n      from the first render that has both columns and rows, then switches to `table-layout: fixed`\n      and never measures again. If this column were already registered it would be the only one\n      measured; the data columns would share what it left over equally, and at phone width their\n      unclipped headers ran into each other. With no column at all the datatable waits.\n    -->\n    @if (rowActions().length && visibleColumns().length) {\n      <div *bsDatatableColumn=\"'__sparkRowActions'; sortable: false; filterable: false\">\n        <span class=\"visually-hidden\">{{ 'common.actions' | t }}</span>\n      </div>\n    }\n\n    <ng-container *bsRowTemplate=\"let item\">\n      @let row = $any(item);\n      @for (col of visibleColumns(); track col.name; let first = $first) {\n        <td>\n          @if (row) {\n            <!-- The first column links to the row's detail page. Two things about this are\n                 routinely misread:\n\n                 1. `cellContent` is projected INSIDE the anchor, so a custom `renderer` does NOT\n                    suppress this link — a renderer that emits its own <a> produces nested anchors\n                    (invalid HTML) rather than replacing this one.\n                 2. `canRead()` is the whole gate, and it is the rights model: `Query` without\n                    `Read` lists the rows and withholds the link. Withhold `Read` for a query\n                    whose rows no detail page can load — a Custom.* query that fabricates rows in\n                    memory, say.\n                 3. `rowRoute` replaces the DESTINATION only, never the gate: returning a route\n                    from it cannot make a row clickable that `canRead()` withheld, and returning\n                    null from it suppresses the link for that one row. -->\n            @if (first && canRead() && rowRouteFor(row); as route) {\n              <a [routerLink]=\"route\" [queryParams]=\"rowQueryParams()\" [state]=\"rowLinkState()\"\n                 (click)=\"rowClicked.emit(row)\">\n                <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n              </a>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n            }\n          } @else {\n            &nbsp;\n          }\n        </td>\n      }\n      @if (rowActions().length) {\n        <!-- The row menu: every action whose rule accepts one row, run on THIS row only. The\n             checkbox selection is left alone (runRowAction never reads or writes it). -->\n        <td class=\"spark-row-actions text-end\" (click)=\"$event.stopPropagation()\" (dblclick)=\"$event.stopPropagation()\">\n          @if (row) {\n            <button type=\"button\" cdkOverlayOrigin #rowMenuOrigin=\"cdkOverlayOrigin\" #rowMenuToggle\n                    class=\"btn btn-sm btn-link spark-row-menu-toggle\"\n                    aria-haspopup=\"menu\" [attr.aria-expanded]=\"openRowMenu() === row.id\"\n                    [attr.aria-label]=\"'common.actions' | t\" (click)=\"toggleRowMenu(row)\">\n              <spark-icon name=\"three-dots-vertical\" />\n            </button>\n            <ng-template cdkConnectedOverlay\n                         [cdkConnectedOverlayOrigin]=\"rowMenuOrigin\"\n                         [cdkConnectedOverlayOpen]=\"openRowMenu() === row.id\"\n                         [cdkConnectedOverlayPositions]=\"rowMenuPositions\"\n                         (overlayOutsideClick)=\"onRowMenuOutsideClick($event, rowMenuToggle, row.id)\"\n                         (overlayKeydown)=\"$event.key === 'Escape' && closeRowMenu(row.id)\"\n                         (detach)=\"closeRowMenu(row.id)\">\n              <bs-dropdown-menu class=\"spark-row-menu\">\n                @for (action of rowActions(); track action.name) {\n                  <li bsDropdownItem class=\"spark-row-action\" [attr.data-action]=\"action.name\"\n                      (click)=\"chooseRowAction(action, row)\">\n                    {{ action.definition.displayName | resolveTranslation }}\n                  </li>\n                }\n              </bs-dropdown-menu>\n            </ng-template>\n          }\n        </td>\n      }\n    </ng-container>\n  </bs-datatable>\n} @else {\n  <!-- The query could not be resolved. Rendering something keeps the host's layout intact and,\n       crucially, makes the failure visible: this branch used to render nothing at all. -->\n  <bs-alert [type]=\"colors.danger\" class=\"mb-0\">\n    {{ errorMessage() || ('spark.query.unavailable' | t) }}\n  </bs-alert>\n}\n\n<ng-template #cellContent let-item let-col=\"col\">\n  <!--\n    Presentation lives in <spark-grid-cell>, shared with the AsDetail table on the PO detail page.\n    Value resolution stays here: a query row is a PersistentObject with an attribute list, and the\n    AsDetail table's rows are plain dictionaries, so only the rendering is common.\n\n    `link` is deliberately not passed. The first-column link is the grid's own rule and wraps this\n    template from outside; setting both would nest anchors.\n  -->\n  <spark-grid-cell\n      [column]=\"col\"\n      [display]=\"(col | queryCellValue:item:lookupReferenceOptions())\"\n      [rendererValue]=\"rendererValueFor(item, col)\"\n      [item]=\"item\"\n      [chips]=\"(col | queryReferenceChips:item)\" />\n</ng-template>\n",
+		template: "<!--\n  Three explicit states, in this order, and the order is load-bearing.\n\n  This template used to open with `@if (query(); as q)` wrapping EVERYTHING, and `query()` is only\n  set after loadData's awaits resolve. Three separate bugs fell out of that one line: the spinner\n  was unreachable on a first load (it rendered inside the gate, while `loading` starts true and\n  `query` starts null), a first-load failure rendered ZERO DOM — no card, no message, nothing to\n  see or report — and a failed RELOAD left the previous query's rows on screen.\n\n  So: `loading` is checked first and outside any dependency on `query`, and the final `@else`\n  always renders something. Do not fold these back into one gate, and do not move the spinner\n  inside the `query()` branch.\n-->\n@if (loading()) {\n  <div class=\"text-center p-3\">\n    <bs-spinner />\n  </div>\n} @else if (query()) {\n  <!-- A page-fetch failure while the grid is already resolved. Without this the catch returns an\n       empty page and a failed query is indistinguishable from one that legitimately has no rows. -->\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  }\n\n  <!--\n    One datatable, two row sources. `[data]` and `[fetch]` are mutually exclusive in\n    ng-bootstrap — binding both makes `[fetch]` win silently — so exactly one is ever non-null\n    here: `fetchFn` is left null whenever `data` is bound. See the class comment for why rows can\n    arrive from outside at all (streaming must not put a websocket in every detail page's bundle).\n  -->\n  <!--\n    The selection bar (#460, M15): the \"N selected\" chip, only while rows are selected, and part\n    of the grid rather than of a host, so the query card and the query-list page show the same\n    thing. There is deliberately no select-all (owner decision, 2026-09-29): with paged, lazy or\n    virtual-scrolled rows it could only tick the rows loaded so far. The selection survives paging\n    (#467, D19), so the chip counts every ticked row — exactly what an action receives — and says how\n    many are on other pages; its ⊗ drops them all, since the header checkbox only sees this page.\n    The bar keeps its height while empty, so ticking the first row does not push the table down\n    under the pointer.\n  -->\n  @if (selectionMode() !== 'none') {\n    <div class=\"spark-selection-bar d-flex align-items-center gap-2 mb-2\" style=\"min-height: 1.5rem\">\n      @if (selection().length) {\n        <bs-badge [type]=\"colors.primary\" class=\"spark-selection-chip\">\n          {{ selection().length }} {{ 'common.selected' | t }}\n          @if (offPageCount()) {\n            <span class=\"spark-selection-off-page\">· {{ offPageCount() }} {{ 'common.onOtherPages' | t }}</span>\n          }\n          <button type=\"button\" class=\"spark-selection-clear\"\n                  [attr.aria-label]=\"'common.clearSelection' | t\" (click)=\"clearSelection()\">\n            <spark-icon name=\"x-circle\" />\n          </button>\n        </bs-badge>\n      }\n    </div>\n  }\n\n  <!-- 'checkbox' (#467, D9): only the checkbox cell selects; a row click opens the row. -->\n  <bs-datatable\n      [selectionMode]=\"selectionMode() === 'multiple' ? 'checkbox' : 'none'\"\n      [(selection)]=\"selection\"\n      [virtualScroll]=\"isVirtualScrolling()\"\n      [itemSize]=\"40\"\n      [isResponsive]=\"isVirtualScrolling()\"\n      [data]=\"data()\"\n      [fetch]=\"fetchFn()\"\n      [distincts]=\"distinctsFn\"\n      (filterChange)=\"onFilterChange($event)\"\n      (rowClick)=\"onRowClick($event)\"\n      [(settings)]=\"settings\">\n    @for (col of visibleColumns(); track col.name) {\n      <!--\n        `canSort`/`canFilter` arrive already resolved by the server (query override → attribute →\n        true), so this only spells the polarity. `!== false` is needed for BOTH, for opposite\n        reasons: absent means capable on our wire, while the datatable's own `filterable` defaults\n        to false, unlike `sortable`.\n\n        ⚠️ `filterActive` and `filterSummary` are deliberately NOT bound. Any *bsDatatableColumn\n        input change recomputes the column set, which retires the live filter view — while the web\n        component's mount-once guard leaves the panel's nodes in place and never re-renders them.\n        Binding them to state our own panel mutates would freeze the panel the instant a value is\n        ticked, until it is closed and reopened. The cost is that a filtered column carries no\n        visual marker yet, which is worth far less than a panel that dies on first use. See #431 F7.\n      -->\n      <div *bsDatatableColumn=\"col.name; sortable: col.canSort !== false; filterable: col.canFilter !== false\">\n        {{ (col.label | resolveTranslation) || col.name }}\n        <spark-attribute-description [description]=\"col.description\" />\n\n        @if (col.canFilter !== false) {\n          <ng-container *bsDatatableFilterPanel=\"let values; let ctx = ctx\">\n            <spark-column-filter-panel\n              [column]=\"col\"\n              [values]=\"values()\"\n              [ctx]=\"ctx\"\n              [filterLabel]=\"filterLabelFor(col)\" />\n          </ng-container>\n        }\n      </div>\n    }\n    <!--\n      The per-row ⋮ menu's column: no header, never sorted or filtered.\n\n      ⚠️ Only once the data columns exist. Those ship WITH the first page, so the rows reach the\n      datatable one render before the column templates do. The datatable sizes its columns ONCE,\n      from the first render that has both columns and rows, then switches to `table-layout: fixed`\n      and never measures again. If this column were already registered it would be the only one\n      measured; the data columns would share what it left over equally, and at phone width their\n      unclipped headers ran into each other. With no column at all the datatable waits.\n    -->\n    @if (rowActions().length && visibleColumns().length) {\n      <div *bsDatatableColumn=\"'__sparkRowActions'; sortable: false; filterable: false\">\n        <span class=\"visually-hidden\">{{ 'common.actions' | t }}</span>\n      </div>\n    }\n\n    <ng-container *bsRowTemplate=\"let item\">\n      @let row = $any(item);\n      @for (col of visibleColumns(); track col.name; let first = $first) {\n        <td>\n          @if (row) {\n            <!-- The first column links to the row's detail page. Two things about this are\n                 routinely misread:\n\n                 1. `cellContent` is projected INSIDE the anchor, so a custom `renderer` does NOT\n                    suppress this link — a renderer that emits its own <a> produces nested anchors\n                    (invalid HTML) rather than replacing this one.\n                 2. `canRead()` is the whole gate, and it is the rights model: `Query` without\n                    `Read` lists the rows and withholds the link. Withhold `Read` for a query\n                    whose rows no detail page can load — a Custom.* query that fabricates rows in\n                    memory, say.\n                 3. `rowRoute` replaces the DESTINATION only, never the gate: returning a route\n                    from it cannot make a row clickable that `canRead()` withheld, and returning\n                    null from it suppresses the link for that one row. -->\n            @if (first && canRead() && rowRouteFor(row); as route) {\n              <a [routerLink]=\"route\" [queryParams]=\"rowQueryParams()\" [state]=\"rowLinkState()\"\n                 (click)=\"rowClicked.emit(row)\">\n                <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n              </a>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n            }\n          } @else {\n            &nbsp;\n          }\n        </td>\n      }\n      @if (rowActions().length) {\n        <!-- The row menu: every action whose rule accepts one row, run on THIS row only. The\n             checkbox selection is left alone (runRowAction never reads or writes it). -->\n        <td class=\"spark-row-actions text-end\" (click)=\"$event.stopPropagation()\" (dblclick)=\"$event.stopPropagation()\">\n          @if (row) {\n            <button type=\"button\" cdkOverlayOrigin #rowMenuOrigin=\"cdkOverlayOrigin\" #rowMenuToggle\n                    class=\"btn btn-sm btn-link spark-row-menu-toggle\"\n                    aria-haspopup=\"menu\" [attr.aria-expanded]=\"openRowMenu() === row.id\"\n                    [attr.aria-label]=\"'common.actions' | t\" (click)=\"toggleRowMenu(row)\">\n              <spark-icon name=\"three-dots-vertical\" />\n            </button>\n            <ng-template cdkConnectedOverlay\n                         [cdkConnectedOverlayOrigin]=\"rowMenuOrigin\"\n                         [cdkConnectedOverlayOpen]=\"openRowMenu() === row.id\"\n                         [cdkConnectedOverlayPositions]=\"rowMenuPositions\"\n                         (overlayOutsideClick)=\"onRowMenuOutsideClick($event, rowMenuToggle, row.id)\"\n                         (overlayKeydown)=\"$event.key === 'Escape' && closeRowMenu(row.id)\"\n                         (detach)=\"closeRowMenu(row.id)\">\n              <bs-dropdown-menu class=\"spark-row-menu\">\n                @for (action of rowActions(); track action.name) {\n                  <li bsDropdownItem class=\"spark-row-action\" [attr.data-action]=\"action.name\"\n                      (click)=\"chooseRowAction(action, row)\">\n                    {{ action.definition.label | resolveTranslation }}\n                  </li>\n                }\n              </bs-dropdown-menu>\n            </ng-template>\n          }\n        </td>\n      }\n    </ng-container>\n  </bs-datatable>\n} @else {\n  <!-- The query could not be resolved. Rendering something keeps the host's layout intact and,\n       crucially, makes the failure visible: this branch used to render nothing at all. -->\n  <bs-alert [type]=\"colors.danger\" class=\"mb-0\">\n    {{ errorMessage() || ('spark.query.unavailable' | t) }}\n  </bs-alert>\n}\n\n<ng-template #cellContent let-item let-col=\"col\">\n  <!--\n    Presentation lives in <spark-grid-cell>, shared with the AsDetail table on the PO detail page.\n    Value resolution stays here: a query row is a PersistentObject with an attribute list, and the\n    AsDetail table's rows are plain dictionaries, so only the rendering is common.\n\n    `link` is deliberately not passed. The first-column link is the grid's own rule and wraps this\n    template from outside; setting both would nest anchors.\n  -->\n  <spark-grid-cell\n      [column]=\"col\"\n      [display]=\"(col | queryCellValue:item:lookupReferenceOptions())\"\n      [rendererValue]=\"rendererValueFor(item, col)\"\n      [item]=\"item\"\n      [chips]=\"(col | queryReferenceChips:item)\" />\n</ng-template>\n",
 		styles: [":host ::ng-deep tbody tr[data-selected=true] a:not(.btn),:host ::ng-deep tbody tr[data-selected=true] .spark-row-menu-toggle{color:var(--mp-datatable-row-selected-color)}:host ::ng-deep tbody tr[data-selected=true] .spark-row-menu-toggle{--bs-btn-color: var(--mp-datatable-row-selected-color);--bs-btn-hover-color: var(--mp-datatable-row-selected-color);--bs-btn-active-color: var(--mp-datatable-row-selected-color)}\n"],
 		dependencies: [
 			{
@@ -1288,13 +1315,13 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 					"selectable",
 					"selection",
 					"rowKey",
+					"rowLabel",
 					"resizableColumns",
 					"pagination",
 					"virtualScroll",
 					"itemSize",
 					"virtualBuffer",
 					"isResponsive",
-					"compareWith",
 					"tree",
 					"idKey",
 					"childCountKey",
@@ -1513,7 +1540,7 @@ i0.ɵɵngDeclareClassMetadata({
 				SparkIconComponent
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<!--\n  Three explicit states, in this order, and the order is load-bearing.\n\n  This template used to open with `@if (query(); as q)` wrapping EVERYTHING, and `query()` is only\n  set after loadData's awaits resolve. Three separate bugs fell out of that one line: the spinner\n  was unreachable on a first load (it rendered inside the gate, while `loading` starts true and\n  `query` starts null), a first-load failure rendered ZERO DOM — no card, no message, nothing to\n  see or report — and a failed RELOAD left the previous query's rows on screen.\n\n  So: `loading` is checked first and outside any dependency on `query`, and the final `@else`\n  always renders something. Do not fold these back into one gate, and do not move the spinner\n  inside the `query()` branch.\n-->\n@if (loading()) {\n  <div class=\"text-center p-3\">\n    <bs-spinner />\n  </div>\n} @else if (query()) {\n  <!-- A page-fetch failure while the grid is already resolved. Without this the catch returns an\n       empty page and a failed query is indistinguishable from one that legitimately has no rows. -->\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  }\n\n  <!--\n    One datatable, two row sources. `[data]` and `[fetch]` are mutually exclusive in\n    ng-bootstrap — binding both makes `[fetch]` win silently — so exactly one is ever non-null\n    here: `fetchFn` is left null whenever `data` is bound. See the class comment for why rows can\n    arrive from outside at all (streaming must not put a websocket in every detail page's bundle).\n  -->\n  <!--\n    The selection bar (#460, M15): the \"N selected\" chip, only while rows are selected, and part\n    of the grid rather than of a host, so the query card and the query-list page show the same\n    thing. There is deliberately no select-all (owner decision, 2026-09-29): with paged, lazy or\n    virtual-scrolled rows it could only tick the rows loaded so far. Deselect-all is the\n    datatable's own header checkbox, which it shows only while a row is selected; the chip does\n    not repeat it. Single selection has no checkbox column, so no header checkbox either, and a\n    row click only ever selects: there the chip's ⊗ is the deselect. The bar keeps its height\n    while empty, so ticking the first row does not push the table down under the pointer.\n  -->\n  @if (selectionMode() !== 'none') {\n    <div class=\"spark-selection-bar d-flex align-items-center gap-2 mb-2\" style=\"min-height: 1.5rem\">\n      @if (selection().length) {\n        <bs-badge [type]=\"colors.primary\" class=\"spark-selection-chip\">\n          {{ selection().length }} {{ 'common.selected' | t }}\n          @if (selectionMode() === 'single') {\n            <button type=\"button\" class=\"spark-selection-clear\"\n                    [attr.aria-label]=\"'common.clearSelection' | t\" (click)=\"clearSelection()\">\n              <spark-icon name=\"x-circle\" />\n            </button>\n          }\n        </bs-badge>\n      }\n    </div>\n  }\n\n  <bs-datatable\n      [selectionMode]=\"selectionMode()\"\n      [(selection)]=\"selection\"\n      [virtualScroll]=\"isVirtualScrolling()\"\n      [itemSize]=\"40\"\n      [isResponsive]=\"isVirtualScrolling()\"\n      [data]=\"data()\"\n      [fetch]=\"fetchFn()\"\n      [distincts]=\"distinctsFn\"\n      (filterChange)=\"onFilterChange($event)\"\n      (rowClick)=\"onRowClick($event)\"\n      (rowDblClick)=\"onRowDblClick($event)\"\n      [(settings)]=\"settings\">\n    @for (col of visibleColumns(); track col.name) {\n      <!--\n        `canSort`/`canFilter` arrive already resolved by the server (query override → attribute →\n        true), so this only spells the polarity. `!== false` is needed for BOTH, for opposite\n        reasons: absent means capable on our wire, while the datatable's own `filterable` defaults\n        to false, unlike `sortable`.\n\n        ⚠️ `filterActive` and `filterSummary` are deliberately NOT bound. Any *bsDatatableColumn\n        input change recomputes the column set, which retires the live filter view — while the web\n        component's mount-once guard leaves the panel's nodes in place and never re-renders them.\n        Binding them to state our own panel mutates would freeze the panel the instant a value is\n        ticked, until it is closed and reopened. The cost is that a filtered column carries no\n        visual marker yet, which is worth far less than a panel that dies on first use. See #431 F7.\n      -->\n      <div *bsDatatableColumn=\"col.name; sortable: col.canSort !== false; filterable: col.canFilter !== false\">\n        {{ (col.label | resolveTranslation) || col.name }}\n        <spark-attribute-description [description]=\"col.description\" />\n\n        @if (col.canFilter !== false) {\n          <ng-container *bsDatatableFilterPanel=\"let values; let ctx = ctx\">\n            <spark-column-filter-panel\n              [column]=\"col\"\n              [values]=\"values()\"\n              [ctx]=\"ctx\"\n              [filterLabel]=\"filterLabelFor(col)\" />\n          </ng-container>\n        }\n      </div>\n    }\n    <!--\n      The per-row ⋮ menu's column: no header, never sorted or filtered.\n\n      ⚠️ Only once the data columns exist. Those ship WITH the first page, so the rows reach the\n      datatable one render before the column templates do. The datatable sizes its columns ONCE,\n      from the first render that has both columns and rows, then switches to `table-layout: fixed`\n      and never measures again. If this column were already registered it would be the only one\n      measured; the data columns would share what it left over equally, and at phone width their\n      unclipped headers ran into each other. With no column at all the datatable waits.\n    -->\n    @if (rowActions().length && visibleColumns().length) {\n      <div *bsDatatableColumn=\"'__sparkRowActions'; sortable: false; filterable: false\">\n        <span class=\"visually-hidden\">{{ 'common.actions' | t }}</span>\n      </div>\n    }\n\n    <ng-container *bsRowTemplate=\"let item\">\n      @let row = $any(item);\n      @for (col of visibleColumns(); track col.name; let first = $first) {\n        <td>\n          @if (row) {\n            <!-- The first column links to the row's detail page. Two things about this are\n                 routinely misread:\n\n                 1. `cellContent` is projected INSIDE the anchor, so a custom `renderer` does NOT\n                    suppress this link — a renderer that emits its own <a> produces nested anchors\n                    (invalid HTML) rather than replacing this one.\n                 2. `canRead()` is the whole gate, and it is the rights model: `Query` without\n                    `Read` lists the rows and withholds the link. Withhold `Read` for a query\n                    whose rows no detail page can load — a Custom.* query that fabricates rows in\n                    memory, say.\n                 3. `rowRoute` replaces the DESTINATION only, never the gate: returning a route\n                    from it cannot make a row clickable that `canRead()` withheld, and returning\n                    null from it suppresses the link for that one row. -->\n            @if (first && canRead() && rowRouteFor(row); as route) {\n              <a [routerLink]=\"route\" [queryParams]=\"rowQueryParams()\" [state]=\"rowLinkState()\"\n                 (click)=\"rowClicked.emit(row)\">\n                <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n              </a>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n            }\n          } @else {\n            &nbsp;\n          }\n        </td>\n      }\n      @if (rowActions().length) {\n        <!-- The row menu: every action whose rule accepts one row, run on THIS row only. The\n             checkbox selection is left alone (runRowAction never reads or writes it). -->\n        <td class=\"spark-row-actions text-end\" (click)=\"$event.stopPropagation()\" (dblclick)=\"$event.stopPropagation()\">\n          @if (row) {\n            <button type=\"button\" cdkOverlayOrigin #rowMenuOrigin=\"cdkOverlayOrigin\" #rowMenuToggle\n                    class=\"btn btn-sm btn-link spark-row-menu-toggle\"\n                    aria-haspopup=\"menu\" [attr.aria-expanded]=\"openRowMenu() === row.id\"\n                    [attr.aria-label]=\"'common.actions' | t\" (click)=\"toggleRowMenu(row)\">\n              <spark-icon name=\"three-dots-vertical\" />\n            </button>\n            <ng-template cdkConnectedOverlay\n                         [cdkConnectedOverlayOrigin]=\"rowMenuOrigin\"\n                         [cdkConnectedOverlayOpen]=\"openRowMenu() === row.id\"\n                         [cdkConnectedOverlayPositions]=\"rowMenuPositions\"\n                         (overlayOutsideClick)=\"onRowMenuOutsideClick($event, rowMenuToggle, row.id)\"\n                         (overlayKeydown)=\"$event.key === 'Escape' && closeRowMenu(row.id)\"\n                         (detach)=\"closeRowMenu(row.id)\">\n              <bs-dropdown-menu class=\"spark-row-menu\">\n                @for (action of rowActions(); track action.name) {\n                  <li bsDropdownItem class=\"spark-row-action\" [attr.data-action]=\"action.name\"\n                      (click)=\"chooseRowAction(action, row)\">\n                    {{ action.definition.displayName | resolveTranslation }}\n                  </li>\n                }\n              </bs-dropdown-menu>\n            </ng-template>\n          }\n        </td>\n      }\n    </ng-container>\n  </bs-datatable>\n} @else {\n  <!-- The query could not be resolved. Rendering something keeps the host's layout intact and,\n       crucially, makes the failure visible: this branch used to render nothing at all. -->\n  <bs-alert [type]=\"colors.danger\" class=\"mb-0\">\n    {{ errorMessage() || ('spark.query.unavailable' | t) }}\n  </bs-alert>\n}\n\n<ng-template #cellContent let-item let-col=\"col\">\n  <!--\n    Presentation lives in <spark-grid-cell>, shared with the AsDetail table on the PO detail page.\n    Value resolution stays here: a query row is a PersistentObject with an attribute list, and the\n    AsDetail table's rows are plain dictionaries, so only the rendering is common.\n\n    `link` is deliberately not passed. The first-column link is the grid's own rule and wraps this\n    template from outside; setting both would nest anchors.\n  -->\n  <spark-grid-cell\n      [column]=\"col\"\n      [display]=\"(col | queryCellValue:item:lookupReferenceOptions())\"\n      [rendererValue]=\"rendererValueFor(item, col)\"\n      [item]=\"item\"\n      [chips]=\"(col | queryReferenceChips:item)\" />\n</ng-template>\n",
+			template: "<!--\n  Three explicit states, in this order, and the order is load-bearing.\n\n  This template used to open with `@if (query(); as q)` wrapping EVERYTHING, and `query()` is only\n  set after loadData's awaits resolve. Three separate bugs fell out of that one line: the spinner\n  was unreachable on a first load (it rendered inside the gate, while `loading` starts true and\n  `query` starts null), a first-load failure rendered ZERO DOM — no card, no message, nothing to\n  see or report — and a failed RELOAD left the previous query's rows on screen.\n\n  So: `loading` is checked first and outside any dependency on `query`, and the final `@else`\n  always renders something. Do not fold these back into one gate, and do not move the spinner\n  inside the `query()` branch.\n-->\n@if (loading()) {\n  <div class=\"text-center p-3\">\n    <bs-spinner />\n  </div>\n} @else if (query()) {\n  <!-- A page-fetch failure while the grid is already resolved. Without this the catch returns an\n       empty page and a failed query is indistinguishable from one that legitimately has no rows. -->\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  }\n\n  <!--\n    One datatable, two row sources. `[data]` and `[fetch]` are mutually exclusive in\n    ng-bootstrap — binding both makes `[fetch]` win silently — so exactly one is ever non-null\n    here: `fetchFn` is left null whenever `data` is bound. See the class comment for why rows can\n    arrive from outside at all (streaming must not put a websocket in every detail page's bundle).\n  -->\n  <!--\n    The selection bar (#460, M15): the \"N selected\" chip, only while rows are selected, and part\n    of the grid rather than of a host, so the query card and the query-list page show the same\n    thing. There is deliberately no select-all (owner decision, 2026-09-29): with paged, lazy or\n    virtual-scrolled rows it could only tick the rows loaded so far. The selection survives paging\n    (#467, D19), so the chip counts every ticked row — exactly what an action receives — and says how\n    many are on other pages; its ⊗ drops them all, since the header checkbox only sees this page.\n    The bar keeps its height while empty, so ticking the first row does not push the table down\n    under the pointer.\n  -->\n  @if (selectionMode() !== 'none') {\n    <div class=\"spark-selection-bar d-flex align-items-center gap-2 mb-2\" style=\"min-height: 1.5rem\">\n      @if (selection().length) {\n        <bs-badge [type]=\"colors.primary\" class=\"spark-selection-chip\">\n          {{ selection().length }} {{ 'common.selected' | t }}\n          @if (offPageCount()) {\n            <span class=\"spark-selection-off-page\">· {{ offPageCount() }} {{ 'common.onOtherPages' | t }}</span>\n          }\n          <button type=\"button\" class=\"spark-selection-clear\"\n                  [attr.aria-label]=\"'common.clearSelection' | t\" (click)=\"clearSelection()\">\n            <spark-icon name=\"x-circle\" />\n          </button>\n        </bs-badge>\n      }\n    </div>\n  }\n\n  <!-- 'checkbox' (#467, D9): only the checkbox cell selects; a row click opens the row. -->\n  <bs-datatable\n      [selectionMode]=\"selectionMode() === 'multiple' ? 'checkbox' : 'none'\"\n      [(selection)]=\"selection\"\n      [virtualScroll]=\"isVirtualScrolling()\"\n      [itemSize]=\"40\"\n      [isResponsive]=\"isVirtualScrolling()\"\n      [data]=\"data()\"\n      [fetch]=\"fetchFn()\"\n      [distincts]=\"distinctsFn\"\n      (filterChange)=\"onFilterChange($event)\"\n      (rowClick)=\"onRowClick($event)\"\n      [(settings)]=\"settings\">\n    @for (col of visibleColumns(); track col.name) {\n      <!--\n        `canSort`/`canFilter` arrive already resolved by the server (query override → attribute →\n        true), so this only spells the polarity. `!== false` is needed for BOTH, for opposite\n        reasons: absent means capable on our wire, while the datatable's own `filterable` defaults\n        to false, unlike `sortable`.\n\n        ⚠️ `filterActive` and `filterSummary` are deliberately NOT bound. Any *bsDatatableColumn\n        input change recomputes the column set, which retires the live filter view — while the web\n        component's mount-once guard leaves the panel's nodes in place and never re-renders them.\n        Binding them to state our own panel mutates would freeze the panel the instant a value is\n        ticked, until it is closed and reopened. The cost is that a filtered column carries no\n        visual marker yet, which is worth far less than a panel that dies on first use. See #431 F7.\n      -->\n      <div *bsDatatableColumn=\"col.name; sortable: col.canSort !== false; filterable: col.canFilter !== false\">\n        {{ (col.label | resolveTranslation) || col.name }}\n        <spark-attribute-description [description]=\"col.description\" />\n\n        @if (col.canFilter !== false) {\n          <ng-container *bsDatatableFilterPanel=\"let values; let ctx = ctx\">\n            <spark-column-filter-panel\n              [column]=\"col\"\n              [values]=\"values()\"\n              [ctx]=\"ctx\"\n              [filterLabel]=\"filterLabelFor(col)\" />\n          </ng-container>\n        }\n      </div>\n    }\n    <!--\n      The per-row ⋮ menu's column: no header, never sorted or filtered.\n\n      ⚠️ Only once the data columns exist. Those ship WITH the first page, so the rows reach the\n      datatable one render before the column templates do. The datatable sizes its columns ONCE,\n      from the first render that has both columns and rows, then switches to `table-layout: fixed`\n      and never measures again. If this column were already registered it would be the only one\n      measured; the data columns would share what it left over equally, and at phone width their\n      unclipped headers ran into each other. With no column at all the datatable waits.\n    -->\n    @if (rowActions().length && visibleColumns().length) {\n      <div *bsDatatableColumn=\"'__sparkRowActions'; sortable: false; filterable: false\">\n        <span class=\"visually-hidden\">{{ 'common.actions' | t }}</span>\n      </div>\n    }\n\n    <ng-container *bsRowTemplate=\"let item\">\n      @let row = $any(item);\n      @for (col of visibleColumns(); track col.name; let first = $first) {\n        <td>\n          @if (row) {\n            <!-- The first column links to the row's detail page. Two things about this are\n                 routinely misread:\n\n                 1. `cellContent` is projected INSIDE the anchor, so a custom `renderer` does NOT\n                    suppress this link — a renderer that emits its own <a> produces nested anchors\n                    (invalid HTML) rather than replacing this one.\n                 2. `canRead()` is the whole gate, and it is the rights model: `Query` without\n                    `Read` lists the rows and withholds the link. Withhold `Read` for a query\n                    whose rows no detail page can load — a Custom.* query that fabricates rows in\n                    memory, say.\n                 3. `rowRoute` replaces the DESTINATION only, never the gate: returning a route\n                    from it cannot make a row clickable that `canRead()` withheld, and returning\n                    null from it suppresses the link for that one row. -->\n            @if (first && canRead() && rowRouteFor(row); as route) {\n              <a [routerLink]=\"route\" [queryParams]=\"rowQueryParams()\" [state]=\"rowLinkState()\"\n                 (click)=\"rowClicked.emit(row)\">\n                <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n              </a>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n            }\n          } @else {\n            &nbsp;\n          }\n        </td>\n      }\n      @if (rowActions().length) {\n        <!-- The row menu: every action whose rule accepts one row, run on THIS row only. The\n             checkbox selection is left alone (runRowAction never reads or writes it). -->\n        <td class=\"spark-row-actions text-end\" (click)=\"$event.stopPropagation()\" (dblclick)=\"$event.stopPropagation()\">\n          @if (row) {\n            <button type=\"button\" cdkOverlayOrigin #rowMenuOrigin=\"cdkOverlayOrigin\" #rowMenuToggle\n                    class=\"btn btn-sm btn-link spark-row-menu-toggle\"\n                    aria-haspopup=\"menu\" [attr.aria-expanded]=\"openRowMenu() === row.id\"\n                    [attr.aria-label]=\"'common.actions' | t\" (click)=\"toggleRowMenu(row)\">\n              <spark-icon name=\"three-dots-vertical\" />\n            </button>\n            <ng-template cdkConnectedOverlay\n                         [cdkConnectedOverlayOrigin]=\"rowMenuOrigin\"\n                         [cdkConnectedOverlayOpen]=\"openRowMenu() === row.id\"\n                         [cdkConnectedOverlayPositions]=\"rowMenuPositions\"\n                         (overlayOutsideClick)=\"onRowMenuOutsideClick($event, rowMenuToggle, row.id)\"\n                         (overlayKeydown)=\"$event.key === 'Escape' && closeRowMenu(row.id)\"\n                         (detach)=\"closeRowMenu(row.id)\">\n              <bs-dropdown-menu class=\"spark-row-menu\">\n                @for (action of rowActions(); track action.name) {\n                  <li bsDropdownItem class=\"spark-row-action\" [attr.data-action]=\"action.name\"\n                      (click)=\"chooseRowAction(action, row)\">\n                    {{ action.definition.label | resolveTranslation }}\n                  </li>\n                }\n              </bs-dropdown-menu>\n            </ng-template>\n          }\n        </td>\n      }\n    </ng-container>\n  </bs-datatable>\n} @else {\n  <!-- The query could not be resolved. Rendering something keeps the host's layout intact and,\n       crucially, makes the failure visible: this branch used to render nothing at all. -->\n  <bs-alert [type]=\"colors.danger\" class=\"mb-0\">\n    {{ errorMessage() || ('spark.query.unavailable' | t) }}\n  </bs-alert>\n}\n\n<ng-template #cellContent let-item let-col=\"col\">\n  <!--\n    Presentation lives in <spark-grid-cell>, shared with the AsDetail table on the PO detail page.\n    Value resolution stays here: a query row is a PersistentObject with an attribute list, and the\n    AsDetail table's rows are plain dictionaries, so only the rendering is common.\n\n    `link` is deliberately not passed. The first-column link is the grid's own rule and wraps this\n    template from outside; setting both would nest anchors.\n  -->\n  <spark-grid-cell\n      [column]=\"col\"\n      [display]=\"(col | queryCellValue:item:lookupReferenceOptions())\"\n      [rendererValue]=\"rendererValueFor(item, col)\"\n      [item]=\"item\"\n      [chips]=\"(col | queryReferenceChips:item)\" />\n</ng-template>\n",
 			styles: [":host ::ng-deep tbody tr[data-selected=true] a:not(.btn),:host ::ng-deep tbody tr[data-selected=true] .spark-row-menu-toggle{color:var(--mp-datatable-row-selected-color)}:host ::ng-deep tbody tr[data-selected=true] .spark-row-menu-toggle{--bs-btn-color: var(--mp-datatable-row-selected-color);--bs-btn-hover-color: var(--mp-datatable-row-selected-color);--bs-btn-active-color: var(--mp-datatable-row-selected-color)}\n"]
 		}]
 	}],
@@ -1965,7 +1992,7 @@ var SparkQueryCardComponent = class SparkQueryCardComponent {
 	actionsTpl = computed(() => slotFor(this.actionSlots(), this.query())?.templateRef ?? this.actionsTemplate(), ...ngDevMode ? [{ debugName: "actionsTpl" }] : /* istanbul ignore next */ []);
 	caption = computed(() => {
 		const q = this.query();
-		return (q?.description ? this.lang.resolve(q.description) : "") || q?.name || "";
+		return (q?.label ? this.lang.resolve(q.label) : "") || q?.name || "";
 	}, ...ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []);
 	customActions = computed(() => this.grid()?.visibleCustomActions() ?? [], ...ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []);
 	toolbarActions = computed(() => this.grid()?.toolbarActions() ?? [], ...ngDevMode ? [{ debugName: "toolbarActions" }] : /* istanbul ignore next */ []);
@@ -2123,7 +2150,7 @@ var SparkQueryCardComponent = class SparkQueryCardComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<!--\n  The card is always rendered. A host that wants no card uses <spark-query-grid> directly — which\n  is what the old `showCard=\"false\"` meant, expressed as a component choice rather than a flag.\n-->\n<bs-card class=\"d-block my-3\">\n  <bs-card-header>\n    <div class=\"d-flex align-items-center gap-2\">\n      @if (iconTpl(); as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: query() }\"></ng-container>\n      }\n\n      <!--\n        Caption first, actions on the trailing edge (#460 M15, as query-grid-card-PRD.md always said,\n        and as Vidyano's sub-query tabs do). `me-auto` on the caption pushes the actions right; a card\n        without actions looks exactly as a plain caption did.\n      -->\n      <span class=\"me-auto spark-query-card-caption\">\n        @if (captionTpl(); as tpl) {\n          <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: caption(), query: query() }\"></ng-container>\n        } @else {\n          {{ caption() }}\n        }\n      </span>\n\n      @if (actionsTpl(); as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: customActions(), actions: toolbarActions(), selection: selection(), query: query() }\"></ng-container>\n      } @else if (toolbarActions().length) {\n        <!-- The default: New, Delete and the custom actions the server offers this caller, with the\n             overflow in the priority nav under the translated \"More\" (common.more). The nav renders only when there are any.\n\n             Disabled, not hidden: hiding makes the affordance undiscoverable and reflows the\n             priority nav on every selection change. The server enforces the same rules. -->\n        <bs-priority-nav class=\"spark-query-card-actions\" [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n          @for (action of toolbarActions(); track action.name) {\n            <button *bsPriorityNavItem=\"action.priority\" type=\"button\" [class]=\"actionClass(action)\"\n                    [attr.data-action]=\"action.name\"\n                    [disabled]=\"!isEnabled(action)\" (click)=\"run(action)\">\n              @if (action.definition.icon && action.kind !== 'custom') {\n                <spark-icon [name]=\"action.definition.icon\" />\n              }\n              {{ action.definition.displayName | resolveTranslation }}\n            </button>\n          }\n        </bs-priority-nav>\n      }\n\n      <!-- The query search, on the trailing edge next to the actions, as Vidyano's sub-query tabs\n           have it (#460 M15, D17 addendum). The same box as the query-list page; it feeds the\n           grid's `search`, which the server applies together with the parent. Absent for bound\n           `data`, which the grid never refetches. -->\n      @if (showSearch()) {\n        <spark-search-box class=\"spark-query-card-search\" size=\"sm\" [(term)]=\"searchTerm\" />\n      }\n    </div>\n  </bs-card-header>\n\n  <div class=\"p-3\">\n    <spark-query-grid\n        [queryId]=\"queryId()\"\n        [parentId]=\"parentId()\"\n        [parentType]=\"parentType()\"\n        [reloadToken]=\"reloadToken()\"\n        [data]=\"data()\"\n        [search]=\"searchTerm()\"\n        [rowRoute]=\"rowRoute()\"\n        [selectionModeSetting]=\"selectionMode()\"\n        [deleted]=\"deleted()\"\n        [parentDeleted]=\"parentDeleted()\"\n        (error)=\"error.emit($event)\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  </div>\n</bs-card>\n",
+		template: "<!--\n  The card is always rendered. A host that wants no card uses <spark-query-grid> directly — which\n  is what the old `showCard=\"false\"` meant, expressed as a component choice rather than a flag.\n-->\n<bs-card class=\"d-block my-3\">\n  <bs-card-header>\n    <div class=\"d-flex align-items-center gap-2\">\n      @if (iconTpl(); as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: query() }\"></ng-container>\n      }\n\n      <!--\n        Caption first, actions on the trailing edge (#460 M15, as query-grid-card-PRD.md always said,\n        and as Vidyano's sub-query tabs do). `me-auto` on the caption pushes the actions right; a card\n        without actions looks exactly as a plain caption did.\n      -->\n      <span class=\"me-auto spark-query-card-caption\">\n        @if (captionTpl(); as tpl) {\n          <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: caption(), query: query() }\"></ng-container>\n        } @else {\n          {{ caption() }}\n        }\n      </span>\n\n      @if (actionsTpl(); as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: customActions(), actions: toolbarActions(), selection: selection(), query: query() }\"></ng-container>\n      } @else if (toolbarActions().length) {\n        <!-- The default: New, Delete and the custom actions the server offers this caller, with the\n             overflow in the priority nav under the translated \"More\" (common.more). The nav renders only when there are any.\n\n             Disabled, not hidden: hiding makes the affordance undiscoverable and reflows the\n             priority nav on every selection change. The server enforces the same rules. -->\n        <bs-priority-nav class=\"spark-query-card-actions\" [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n          @for (action of toolbarActions(); track action.name) {\n            <button *bsPriorityNavItem=\"action.priority\" type=\"button\" [class]=\"actionClass(action)\"\n                    [attr.data-action]=\"action.name\"\n                    [disabled]=\"!isEnabled(action)\" (click)=\"run(action)\">\n              @if (action.definition.icon && action.kind !== 'custom') {\n                <spark-icon [name]=\"action.definition.icon\" />\n              }\n              {{ action.definition.label | resolveTranslation }}\n            </button>\n          }\n        </bs-priority-nav>\n      }\n\n      <!-- The query search, on the trailing edge next to the actions, as Vidyano's sub-query tabs\n           have it (#460 M15, D17 addendum). The same box as the query-list page; it feeds the\n           grid's `search`, which the server applies together with the parent. Absent for bound\n           `data`, which the grid never refetches. -->\n      @if (showSearch()) {\n        <spark-search-box class=\"spark-query-card-search\" size=\"sm\" [(term)]=\"searchTerm\" />\n      }\n    </div>\n  </bs-card-header>\n\n  <div class=\"p-3\">\n    <spark-query-grid\n        [queryId]=\"queryId()\"\n        [parentId]=\"parentId()\"\n        [parentType]=\"parentType()\"\n        [reloadToken]=\"reloadToken()\"\n        [data]=\"data()\"\n        [search]=\"searchTerm()\"\n        [rowRoute]=\"rowRoute()\"\n        [selectionModeSetting]=\"selectionMode()\"\n        [deleted]=\"deleted()\"\n        [parentDeleted]=\"parentDeleted()\"\n        (error)=\"error.emit($event)\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  </div>\n</bs-card>\n",
 		styles: [".spark-query-card-search{flex:0 1 14rem;min-width:8rem}\n"],
 		dependencies: [
 			{
@@ -2248,7 +2275,7 @@ i0.ɵɵngDeclareClassMetadata({
 				SparkIconComponent
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<!--\n  The card is always rendered. A host that wants no card uses <spark-query-grid> directly — which\n  is what the old `showCard=\"false\"` meant, expressed as a component choice rather than a flag.\n-->\n<bs-card class=\"d-block my-3\">\n  <bs-card-header>\n    <div class=\"d-flex align-items-center gap-2\">\n      @if (iconTpl(); as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: query() }\"></ng-container>\n      }\n\n      <!--\n        Caption first, actions on the trailing edge (#460 M15, as query-grid-card-PRD.md always said,\n        and as Vidyano's sub-query tabs do). `me-auto` on the caption pushes the actions right; a card\n        without actions looks exactly as a plain caption did.\n      -->\n      <span class=\"me-auto spark-query-card-caption\">\n        @if (captionTpl(); as tpl) {\n          <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: caption(), query: query() }\"></ng-container>\n        } @else {\n          {{ caption() }}\n        }\n      </span>\n\n      @if (actionsTpl(); as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: customActions(), actions: toolbarActions(), selection: selection(), query: query() }\"></ng-container>\n      } @else if (toolbarActions().length) {\n        <!-- The default: New, Delete and the custom actions the server offers this caller, with the\n             overflow in the priority nav under the translated \"More\" (common.more). The nav renders only when there are any.\n\n             Disabled, not hidden: hiding makes the affordance undiscoverable and reflows the\n             priority nav on every selection change. The server enforces the same rules. -->\n        <bs-priority-nav class=\"spark-query-card-actions\" [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n          @for (action of toolbarActions(); track action.name) {\n            <button *bsPriorityNavItem=\"action.priority\" type=\"button\" [class]=\"actionClass(action)\"\n                    [attr.data-action]=\"action.name\"\n                    [disabled]=\"!isEnabled(action)\" (click)=\"run(action)\">\n              @if (action.definition.icon && action.kind !== 'custom') {\n                <spark-icon [name]=\"action.definition.icon\" />\n              }\n              {{ action.definition.displayName | resolveTranslation }}\n            </button>\n          }\n        </bs-priority-nav>\n      }\n\n      <!-- The query search, on the trailing edge next to the actions, as Vidyano's sub-query tabs\n           have it (#460 M15, D17 addendum). The same box as the query-list page; it feeds the\n           grid's `search`, which the server applies together with the parent. Absent for bound\n           `data`, which the grid never refetches. -->\n      @if (showSearch()) {\n        <spark-search-box class=\"spark-query-card-search\" size=\"sm\" [(term)]=\"searchTerm\" />\n      }\n    </div>\n  </bs-card-header>\n\n  <div class=\"p-3\">\n    <spark-query-grid\n        [queryId]=\"queryId()\"\n        [parentId]=\"parentId()\"\n        [parentType]=\"parentType()\"\n        [reloadToken]=\"reloadToken()\"\n        [data]=\"data()\"\n        [search]=\"searchTerm()\"\n        [rowRoute]=\"rowRoute()\"\n        [selectionModeSetting]=\"selectionMode()\"\n        [deleted]=\"deleted()\"\n        [parentDeleted]=\"parentDeleted()\"\n        (error)=\"error.emit($event)\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  </div>\n</bs-card>\n",
+			template: "<!--\n  The card is always rendered. A host that wants no card uses <spark-query-grid> directly — which\n  is what the old `showCard=\"false\"` meant, expressed as a component choice rather than a flag.\n-->\n<bs-card class=\"d-block my-3\">\n  <bs-card-header>\n    <div class=\"d-flex align-items-center gap-2\">\n      @if (iconTpl(); as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: query() }\"></ng-container>\n      }\n\n      <!--\n        Caption first, actions on the trailing edge (#460 M15, as query-grid-card-PRD.md always said,\n        and as Vidyano's sub-query tabs do). `me-auto` on the caption pushes the actions right; a card\n        without actions looks exactly as a plain caption did.\n      -->\n      <span class=\"me-auto spark-query-card-caption\">\n        @if (captionTpl(); as tpl) {\n          <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: caption(), query: query() }\"></ng-container>\n        } @else {\n          {{ caption() }}\n        }\n      </span>\n\n      @if (actionsTpl(); as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: customActions(), actions: toolbarActions(), selection: selection(), query: query() }\"></ng-container>\n      } @else if (toolbarActions().length) {\n        <!-- The default: New, Delete and the custom actions the server offers this caller, with the\n             overflow in the priority nav under the translated \"More\" (common.more). The nav renders only when there are any.\n\n             Disabled, not hidden: hiding makes the affordance undiscoverable and reflows the\n             priority nav on every selection change. The server enforces the same rules. -->\n        <bs-priority-nav class=\"spark-query-card-actions\" [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n          @for (action of toolbarActions(); track action.name) {\n            <button *bsPriorityNavItem=\"action.priority\" type=\"button\" [class]=\"actionClass(action)\"\n                    [attr.data-action]=\"action.name\"\n                    [disabled]=\"!isEnabled(action)\" (click)=\"run(action)\">\n              @if (action.definition.icon && action.kind !== 'custom') {\n                <spark-icon [name]=\"action.definition.icon\" />\n              }\n              {{ action.definition.label | resolveTranslation }}\n            </button>\n          }\n        </bs-priority-nav>\n      }\n\n      <!-- The query search, on the trailing edge next to the actions, as Vidyano's sub-query tabs\n           have it (#460 M15, D17 addendum). The same box as the query-list page; it feeds the\n           grid's `search`, which the server applies together with the parent. Absent for bound\n           `data`, which the grid never refetches. -->\n      @if (showSearch()) {\n        <spark-search-box class=\"spark-query-card-search\" size=\"sm\" [(term)]=\"searchTerm\" />\n      }\n    </div>\n  </bs-card-header>\n\n  <div class=\"p-3\">\n    <spark-query-grid\n        [queryId]=\"queryId()\"\n        [parentId]=\"parentId()\"\n        [parentType]=\"parentType()\"\n        [reloadToken]=\"reloadToken()\"\n        [data]=\"data()\"\n        [search]=\"searchTerm()\"\n        [rowRoute]=\"rowRoute()\"\n        [selectionModeSetting]=\"selectionMode()\"\n        [deleted]=\"deleted()\"\n        [parentDeleted]=\"parentDeleted()\"\n        (error)=\"error.emit($event)\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  </div>\n</bs-card>\n",
 			styles: [".spark-query-card-search{flex:0 1 14rem;min-width:8rem}\n"]
 		}]
 	}],