@mintplayer/ng-spark 22.3.0 → 22.5.0

package/fesm2022/mintplayer-ng-spark-query-list.mjs

@@ -1,35 +1,48 @@
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, input, output, signal, effect, untracked, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, DestroyRef, input, output, signal, viewChild, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i3 from '@angular/router';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Color } from '@mintplayer/ng-bootstrap';
+import { BsBadgeComponent } from '@mintplayer/ng-bootstrap/badge';
 import { BsAlertComponent } from '@mintplayer/ng-bootstrap/alert';
-import { DatatableSettings, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective } from '@mintplayer/ng-bootstrap/datatable';
 import { BsFormComponent, BsFormControlDirective } from '@mintplayer/ng-bootstrap/form';
 import { BsGridComponent, BsGridRowDirective, BsGridColumnDirective } from '@mintplayer/ng-bootstrap/grid';
 import { BsInputGroupComponent } from '@mintplayer/ng-bootstrap/input-group';
 import { BsPriorityNavComponent, BsPriorityNavItemDirective } from '@mintplayer/ng-bootstrap/priority-nav';
 import { BsSpinnerComponent } from '@mintplayer/ng-bootstrap/spinner';
-import { filterQueryActions, selectionModeFor, parseSelectionRule } from '@mintplayer/ng-spark/models';
-import { SparkQueryRefreshService } from '@mintplayer/ng-spark/client-operations';
 import { SparkService, SparkStreamingService, SparkLanguageService } from '@mintplayer/ng-spark/services';
-import { ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe, ReferenceChipsPipe } from '@mintplayer/ng-spark/pipes';
+import { ResolveTranslationPipe, TranslateKeyPipe } from '@mintplayer/ng-spark/pipes';
 import { SparkIconComponent } from '@mintplayer/ng-spark/icon';
-import { SparkGridRenderers, initialGridSettings, isVirtualScrollingQuery, visibleGridAttributes } from '@mintplayer/ng-spark/grid';
+import { SparkQueryGridComponent } from '@mintplayer/ng-spark/grid';
 
+/**
+ * The routed query page: chrome around one {@link SparkQueryGridComponent}.
+ *
+ * It owns what is genuinely page-shaped and route-shaped, and nothing else:
+ *
+ *  - **Route resolution.** It has no `queryId` input; it reads `paramMap`, and it serves two
+ *    routes — `query/:queryId`, and `po/:type`, which resolves an entity type to a query. That
+ *    second one is type-to-query resolution, not query rendering, and is why this component still
+ *    exists rather than the router pointing at the grid.
+ *  - **Streaming.** The websocket lives here so it stays out of every PO detail page's bundle;
+ *    the snapshot is filtered and sorted client-side and handed to the grid as `[data]`.
+ *  - The action bar, the caption, the LIVE badge, the search box and the New button.
+ *
+ * The grid itself — columns, cells, paging, the row link, selection, custom-action execution —
+ * is the shared component. This page previously wrote out `<bs-datatable>` twice, once per
+ * transport, with a shared row template between them; both are gone.
+ */
 class SparkQueryListComponent {
     route = inject(ActivatedRoute);
     router = inject(Router);
     sparkService = inject(SparkService);
     streamingService = inject(SparkStreamingService);
-    lang = inject(SparkLanguageService);
-    gridRenderers = inject(SparkGridRenderers);
     destroyRef = inject(DestroyRef);
+    lang = inject(SparkLanguageService);
     extraActionsTemplate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "extraActionsTemplate" }] : /* istanbul ignore next */ []));
     showCustomActions = input(true, /* @ts-ignore */
@@ -38,25 +51,40 @@ class SparkQueryListComponent {
     createClicked = output();
     customActionExecuted = output();
     colors = Color;
+    /** The query the grid should render, resolved from the route. Null until it is known. */
+    queryId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "queryId" }] : /* istanbul ignore next */ []));
     errorMessage = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
-    query = signal(null, /* @ts-ignore */
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    grid = viewChild(SparkQueryGridComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+    /**
+     * Grid state, surfaced for this page's chrome.
+     *
+     * Optional `viewChild`, read defensively: the action bar and caption render above the grid, so
+     * on the first change-detection pass the query has not resolved yet.
+     */
+    query = computed(() => this.grid()?.query() ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
-    entityType = signal(null, /* @ts-ignore */
+    entityType = computed(() => this.grid()?.entityType() ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "entityType" }] : /* istanbul ignore next */ []));
-    allEntityTypes = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "allEntityTypes" }] : /* istanbul ignore next */ []));
-    lookupReferenceOptions = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : /* istanbul ignore next */ []));
-    resultCount = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resultCount" }] : /* istanbul ignore next */ []));
-    searchTerm = '';
-    canRead = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "canRead" }] : /* istanbul ignore next */ []));
-    canCreate = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "canCreate" }] : /* istanbul ignore next */ []));
-    customActions = signal([], /* @ts-ignore */
+    customActions = computed(() => this.grid()?.customActions() ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []));
+    canCreate = computed(() => this.grid()?.canCreate() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canCreate" }] : /* istanbul ignore next */ []));
+    resultCount = computed(() => this.grid()?.resultCount() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resultCount" }] : /* istanbul ignore next */ []));
+    isVirtualScrolling = computed(() => this.grid()?.isVirtualScrolling() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isVirtualScrolling" }] : /* istanbul ignore next */ []));
+    gridError = computed(() => this.grid()?.errorMessage() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridError" }] : /* istanbul ignore next */ []));
+    /** Whether an action's selection rule is satisfied. Delegated: the grid holds the selection. */
+    isActionEnabled(action) {
+        return this.grid()?.isActionEnabled(action) ?? false;
+    }
+    // --- streaming ---------------------------------------------------------------
     isStreaming = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isStreaming" }] : /* istanbul ignore next */ []));
     streamingSub = null;
@@ -64,118 +92,86 @@ class SparkQueryListComponent {
     ...(ngDevMode ? [{ debugName: "allItems" }] : /* istanbul ignore next */ []));
     streamItems = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "streamItems" }] : /* istanbul ignore next */ []));
-    fetchFn = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fetchFn" }] : /* istanbul ignore next */ []));
-    settings = signal(new DatatableSettings({
-        perPage: { values: [10, 25, 50], selected: 10 },
-        page: { values: [1], selected: 1 },
-        sortColumns: []
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    /**
+     * Rows handed to the grid, or `null` to let it fetch for itself.
+     *
+     * Null for a normal query — an empty array would read as "here are no rows" and suppress the
+     * fetch entirely.
+     */
+    gridData = computed(() => this.query()?.isStreamingQuery ? this.streamItems() : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridData" }] : /* istanbul ignore next */ []));
     constructor() {
-        // The handler is async and this is a subscribe, so a rejection lands nowhere:
-        // the metadata load would reject, entityType() would stay null, and the template
-        // would render a spinner FOREVER -- while this component has had an errorMessage
-        // surface all along that only the fetch path ever reached. Catch it here.
         this.route.paramMap.pipe(takeUntilDestroyed()).subscribe(params => {
+            // The handler is async and this is a subscribe, so a rejection lands nowhere: the metadata
+            // load would reject, the query would stay null, and the template would render a spinner
+            // FOREVER — while this component has had an errorMessage surface all along that only the
+            // fetch path ever reached.
             this.onParamsChange(params).catch((e) => this.reportLoadFailure(e));
         });
         this.destroyRef.onDestroy(() => this.disconnectStreaming());
-        // Server-issued refreshQuery. Its own effect, skipping the first run, so it drives the
-        // cheap data refresh and never re-resolves metadata (which would reset page and sort).
-        let firstRefreshTick = true;
+        // Connect the socket once the grid has resolved a streaming query, and disconnect whenever it
+        // resolves anything else. The grid knows not to fetch for a streaming query, so there is no
+        // window in which both transports are live.
         effect(() => {
-            this.queryRefresh.tokenFor(this.query()?.alias || this.query()?.id);
-            if (firstRefreshTick) {
-                firstRefreshTick = false;
-                return;
+            const q = this.query();
+            if (q?.isStreamingQuery) {
+                this.connectStreaming(q.id);
+            }
+            else {
+                this.disconnectStreaming();
             }
-            untracked(() => this.reload());
+        });
+        // Client-side filter and sort for the streaming snapshot. The server never sees these: there
+        // is no request to attach them to.
+        effect(() => {
+            this.searchTerm();
+            this.grid()?.settings();
+            this.allItems();
+            if (this.isStreaming())
+                this.applyFilter();
         });
     }
     async onParamsChange(params) {
-        // Reset prior-route state so we render the spinner (not stale rows from
-        // the previous query) while the new query/entityType resolve.
-        this.entityType.set(null);
-        this.fetchFn.set(null);
-        this.resultCount.set(null);
+        this.errorMessage.set(null);
+        this.queryId.set(null);
         this.allItems.set([]);
         this.streamItems.set([]);
-        this.errorMessage.set(null);
-        // Reset the permission-derived state too. Without this, navigating A -> B where
-        // B's load fails leaves A's buttons and A's canRead/canCreate on screen.
-        this.canRead.set(false);
-        this.canCreate.set(false);
-        this.customActions.set([]);
-        // Ids from the previous query are meaningless against the next one, and would be POSTed
-        // as though they belonged to it.
-        this.selection.set([]);
         this.disconnectStreaming();
         const queryId = params.get('queryId');
         const typeParam = params.get('type');
-        let resolvedQuery = null;
-        let resolvedEntityType = null;
-        let resolvedEntityTypes = [];
         if (queryId) {
-            resolvedQuery = await this.sparkService.getQuery(queryId);
-            if (resolvedQuery) {
-                const result = await this.resolveEntityTypeForQuery(resolvedQuery);
-                resolvedEntityType = result.entityType;
-                resolvedEntityTypes = result.entityTypes;
-            }
-        }
-        else if (typeParam) {
-            resolvedEntityTypes = await this.sparkService.getEntityTypes();
-            resolvedEntityType = resolvedEntityTypes.find(t => t.id === typeParam || t.alias === typeParam) || null;
-            if (resolvedEntityType) {
-                const queries = await this.sparkService.getQueries();
-                const singularName = resolvedEntityType.name;
-                resolvedQuery = queries.find(q => {
-                    // Match by explicit entityType
-                    if (q.entityType === singularName)
-                        return true;
-                    // Match by source name
-                    const sourceName = this.extractSourceName(q.source);
-                    const sourceSingular = this.singularize(sourceName);
-                    return sourceName === singularName ||
-                        sourceSingular === singularName ||
-                        sourceName === singularName + 's';
-                }) || null;
-            }
+            this.queryId.set(queryId);
+            return;
         }
-        if (resolvedQuery)
-            this.query.set(resolvedQuery);
-        if (resolvedEntityType) {
-            this.entityType.set(resolvedEntityType);
-            this.allEntityTypes.set(resolvedEntityTypes);
-            this.settings.set(initialGridSettings(resolvedQuery));
-            if (resolvedQuery?.isStreamingQuery) {
-                // Streaming: WebSocket feeds allItems; the datatable binds [data]="streamItems()".
-                this.connectStreaming(resolvedQuery.id);
-            }
-            else if (resolvedQuery) {
-                // Non-streaming: the datatable drives paging/sorting via [(settings)] and calls
-                // fetchFn per page. Virtual scrolling is just the [virtualScroll] template flag —
-                // the datatable front-loads all pages from fetchFn when virtual.
-                this.fetchFn.set(this.makeFetch(resolvedQuery));
-            }
-            this.loadLookupReferenceOptions();
-            const [permissions, actions] = await Promise.all([
-                this.sparkService.getPermissions(resolvedEntityType.id),
-                this.sparkService.getCustomActions(resolvedEntityType.id),
-            ]);
-            this.canRead.set(permissions.canRead);
-            this.canCreate.set(permissions.canCreate);
-            // 'query', not 'list'. The server model and docs/guide-custom-actions.md have
-            // always documented "detail" | "query" | "both"; this filter tested for a value
-            // nothing emits, so an action authored per the documentation rendered NOWHERE.
-            this.customActions.set(filterQueryActions(actions));
+        if (!typeParam)
+            return;
+        // `po/:type` — the route names an entity type, so find the query that lists it. The grid takes
+        // a query, and this translation is the only reason it cannot take the route directly.
+        const [entityTypes, queries] = await Promise.all([
+            this.sparkService.getEntityTypes(),
+            this.sparkService.getQueries(),
+        ]);
+        const entityType = entityTypes.find(t => t.id === typeParam || t.alias === typeParam);
+        if (!entityType) {
+            this.reportLoadFailure({ status: 404 });
+            return;
         }
+        const singularName = entityType.name;
+        const match = queries.find(q => {
+            if (q.entityType === singularName)
+                return true;
+            const sourceName = q.source.includes('.') ? q.source.substring(q.source.indexOf('.') + 1) : q.source;
+            return sourceName === singularName || sourceName === singularName + 's';
+        });
+        if (match)
+            this.queryId.set(match.alias || match.id);
+        else
+            this.reportLoadFailure({ status: 404 });
     }
     /**
-     * A load failure has to render, not just be swallowed: a denied query answers 404
-     * (audit M-3, so existence is not leaked), which is indistinguishable from a missing
-     * one -- hence a deliberately generic message rather than a guess at which it was.
+     * A load failure has to render, not just be swallowed: a denied query answers 404 (audit M-3, so
+     * existence is not leaked), which is indistinguishable from a missing one — hence a deliberately
+     * generic message rather than a guess at which it was.
      */
     reportLoadFailure(err) {
         this.errorMessage.set(err?.status === 404
@@ -183,176 +179,20 @@ class SparkQueryListComponent {
             : (err?.error?.error || err?.message || 'An unexpected error occurred'));
     }
     async onCustomAction(action) {
-        if (action.confirmationMessageKey) {
-            const message = this.lang.t(action.confirmationMessageKey) || 'Are you sure?';
-            if (!confirm(message))
-                return;
-        }
-        try {
-            await this.sparkService.executeCustomAction(this.entityType().id, action.name, undefined, this.selection());
-            this.customActionExecuted.emit({ action });
-            if (action.refreshOnCompleted) {
-                this.reload();
-            }
-        }
-        catch (e) {
-            const err = e;
-            this.errorMessage.set(err.error?.error || err.message || 'Action failed');
-        }
-    }
-    async resolveEntityTypeForQuery(query) {
-        const entityTypes = await this.sparkService.getEntityTypes();
-        // If entityType is explicitly set on the query, use it directly
-        if (query.entityType) {
-            const type = entityTypes.find(t => t.name === query.entityType || t.alias === query.entityType?.toLowerCase());
-            return { entityType: type || null, entityTypes };
-        }
-        // For Database.X sources, extract the property name and try to match
-        const sourceName = this.extractSourceName(query.source);
-        const singularName = this.singularize(sourceName);
-        const type = entityTypes.find(t => t.name === sourceName ||
-            t.name === singularName ||
-            t.clrType.endsWith(singularName));
-        return { entityType: type || null, entityTypes };
-    }
-    extractSourceName(source) {
-        const dotIndex = source.indexOf('.');
-        return dotIndex >= 0 ? source.substring(dotIndex + 1) : source;
-    }
-    singularize(plural) {
-        const irregulars = {
-            'People': 'Person',
-            'Children': 'Child',
-            'Men': 'Men',
-            'Women': 'Woman'
-        };
-        if (irregulars[plural])
-            return irregulars[plural];
-        if (plural.endsWith('ies')) {
-            return plural.slice(0, -3) + 'y';
-        }
-        if (plural.endsWith('es')) {
-            return plural.slice(0, -2);
-        }
-        if (plural.endsWith('s')) {
-            return plural.slice(0, -1);
-        }
-        return plural;
-    }
-    /**
-     * Builds the server-side fetch callback the datatable invokes per page/sort.
-     * Reads `searchTerm` live, so a settings change (or a new fetchFn identity)
-     * refetches with the current search term.
-     */
-    makeFetch(query) {
-        return (req) => this.sparkService.executeQuery(query.id, {
-            sortColumns: req.sortColumns,
-            skip: (req.page - 1) * req.perPage,
-            take: req.perPage,
-            search: this.searchTerm || undefined,
-        }).then(r => {
-            this.errorMessage.set(null);
-            this.resultCount.set(r.totalRecords);
-            return {
-                data: r.data,
-                totalRecords: r.totalRecords,
-                totalPages: Math.ceil(r.totalRecords / req.perPage) || 1,
-                perPage: req.perPage,
-                page: req.page,
-            };
-        }).catch((e) => {
-            this.errorMessage.set(e.error?.error || e.message || 'An unexpected error occurred');
-            this.resultCount.set(0);
-            return { data: [], totalRecords: 0, totalPages: 1, perPage: req.perPage, page: req.page };
-        });
-    }
-    /**
-     * Force a refetch (e.g. after a custom action) without changing page/sort.
-     *
-     * Public so a host can drive it, and named to match
-     * `SparkSubQueryComponent.reload()` — the two grids had drifted into having the
-     * same mechanism under different names, one of them unreachable.
-     */
-    reload() {
-        if (this.isStreaming()) {
-            this.applyFilter();
-            return;
-        }
-        const q = this.query();
-        if (q)
-            this.fetchFn.set(this.makeFetch(q));
-    }
-    onSearchChange() {
-        if (this.isStreaming()) {
-            this.applyFilter();
-            return;
-        }
-        // Reset to page 1 for the new search.
-        const s = this.settings();
-        this.settings.set(new DatatableSettings({
-            perPage: { values: s.perPage.values, selected: s.perPage.selected },
-            page: { values: [1], selected: 1 },
-            sortColumns: s.sortColumns,
-        }));
-        // Re-assign the fetch callback so the datatable refetches even when
-        // page/perPage/sort are unchanged. ng-bootstrap 22.4's web component dedupes
-        // reloads by {sortColumns, perPage, page}; setting a new fetch identity resets
-        // that key (set fetch → _lastReloadKey = null) and forces the reload. makeFetch
-        // reads searchTerm live (mirrors refresh()).
-        const q = this.query();
-        if (q)
-            this.fetchFn.set(this.makeFetch(q));
-    }
-    clearSearch() {
-        this.searchTerm = '';
-        this.onSearchChange();
-    }
-    /**
-     * Whether the first column links to a detail page.
-     *
-     * Declared by the query, because the framework cannot derive it: `Database.*` rows
-     * are always real documents, but a `Custom.*` query may return loadable documents
-     * (Fleet's Stolen_Cars) or rows fabricated in memory (StreamItems). Absent means
-     * navigable -- defaulting Custom.* to false would strip the working links off every
-     * custom query that does return documents.
-     */
-    /**
-     * Rows the user has ticked. Lives here rather than in the datatable so the action bar can
-     * read it, and MUST be cleared whenever the source changes — otherwise route A's selection
-     * is POSTed as ids of route B's type.
-     */
-    selection = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-    queryRefresh = inject(SparkQueryRefreshService);
-    /** 'none' unless an action is selection-gated, so unaffected grids gain no checkbox column. */
-    selectionMode = computed(() => selectionModeFor(this.customActions()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
-    /** Whether an action's selection rule is satisfied right now. The server checks it again. */
-    isActionEnabled(action) {
-        return parseSelectionRule(action.selectionRule)(this.selection().length);
-    }
-    isVirtualScrolling = computed(() => isVirtualScrollingQuery(this.query()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isVirtualScrolling" }] : /* istanbul ignore next */ []));
-    visibleAttributes = computed(() => visibleGridAttributes(this.entityType()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visibleAttributes" }] : /* istanbul ignore next */ []));
-    getColumnRendererComponent(attr) {
-        return this.gridRenderers.columnComponentFor(attr);
-    }
-    getColumnRendererInputs(component, item, attr) {
-        return this.gridRenderers.columnInputsFor(component, item, attr);
-    }
-    async loadLookupReferenceOptions() {
-        this.lookupReferenceOptions.set(await this.gridRenderers.loadLookupOptions(this.visibleAttributes()));
+        await this.grid()?.onCustomAction(action);
     }
     onCreate() {
         this.createClicked.emit();
         const et = this.entityType();
-        if (et) {
+        if (et)
             this.router.navigate(['/po', et.alias || et.id, 'new']);
-        }
+    }
+    clearSearch() {
+        this.searchTerm.set('');
     }
     connectStreaming(queryId) {
-        this.disconnectStreaming();
+        if (this.streamingSub)
+            return;
         this.isStreaming.set(true);
         this.streamingSub = this.streamingService.connectToStreamingQuery(queryId).subscribe({
             next: (message) => this.handleStreamingMessage(message),
@@ -360,9 +200,7 @@ class SparkQueryListComponent {
                 this.errorMessage.set(err?.message || 'Streaming connection failed');
                 this.isStreaming.set(false);
             },
-            complete: () => {
-                this.isStreaming.set(false);
-            }
+            complete: () => this.isStreaming.set(false),
         });
     }
     disconnectStreaming() {
@@ -377,26 +215,18 @@ class SparkQueryListComponent {
             case 'snapshot':
                 this.errorMessage.set(null);
                 this.allItems.set(message.data);
-                this.applyFilter();
                 break;
             case 'patch':
                 if (message.updated.length > 0) {
-                    const currentItems = this.allItems();
-                    const updatedItems = currentItems.map(item => {
+                    this.allItems.update(items => items.map(item => {
                         const patch = message.updated.find(u => u.id === item.id);
                         if (!patch)
                             return item;
-                        // Clone the item and update only changed attribute values
-                        const updatedAttributes = item.attributes.map(attr => {
-                            if (attr.name in patch.attributes) {
-                                return { ...attr, value: patch.attributes[attr.name] };
-                            }
-                            return attr;
-                        });
-                        return { ...item, attributes: updatedAttributes };
-                    });
-                    this.allItems.set(updatedItems);
-                    this.applyFilter();
+                        return {
+                            ...item,
+                            attributes: item.attributes.map(attr => attr.name in patch.attributes ? { ...attr, value: patch.attributes[attr.name] } : attr),
+                        };
+                    }));
                 }
                 break;
             case 'error':
@@ -406,14 +236,14 @@ class SparkQueryListComponent {
     }
     applyFilter() {
         let items = this.allItems();
-        // Apply search filter
-        if (this.searchTerm) {
-            const term = this.searchTerm.toLowerCase();
+        const term = this.searchTerm().toLowerCase();
+        if (term) {
             items = items.filter(item => item.attributes.some(a => String(a.value ?? '').toLowerCase().includes(term)));
         }
-        // Apply sorting (client-side for the streaming snapshot; the datatable in
-        // [data] mode also auto-sorts on header clicks).
-        const sortCols = this.settings().sortColumns;
+        // The datatable in `[data]` mode also sorts on header clicks, but the sort must survive a
+        // patch: re-deriving from `allItems` without re-applying it would silently reorder the grid
+        // under the user on every update.
+        const sortCols = this.grid()?.settings().sortColumns ?? [];
         if (sortCols.length > 0) {
             items = [...items].sort((a, b) => {
                 for (const col of sortCols) {
@@ -427,17 +257,16 @@ class SparkQueryListComponent {
             });
         }
         this.streamItems.set(items);
-        this.resultCount.set(items.length);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SparkQueryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SparkQueryListComponent, isStandalone: true, selector: "spark-query-list", inputs: { extraActionsTemplate: { classPropertyName: "extraActionsTemplate", publicName: "extraActionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, showCustomActions: { classPropertyName: "showCustomActions", publicName: "showCustomActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClicked: "rowClicked", createClicked: "createClicked", customActionExecuted: "customActionExecuted" }, host: { properties: { "class.virtual-scrolling": "isVirtualScrolling()" } }, ngImport: i0, template: "<div class=\"d-flex flex-column h-100\">\n  <div class=\"spark-actionbar py-2 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\" [class.px-3]=\"!isVirtualScrolling()\">\n    <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n      @if (canCreate()) {\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-primary\" (click)=\"onCreate()\">\n          <spark-icon name=\"plus-lg\" /> {{ 'common.new' | t }}\n        </button>\n      }\n      @if (showCustomActions()) {\n        @for (action of customActions(); track action.name) {\n          <!-- Disabled, not hidden: hiding makes the affordance undiscoverable and reflows the\n               priority nav on every selection change. The server enforces the same rule. -->\n          <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-outline-primary\"\n                  [disabled]=\"!isActionEnabled(action)\" (click)=\"onCustomAction(action)\">\n            {{ action.displayName | resolveTranslation }}\n          </button>\n        }\n      }\n      @if (extraActionsTemplate(); as extraActionsTpl) {\n        <ng-container *bsPriorityNavItem=\"50\">\n          <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n        </ng-container>\n      }\n    </bs-priority-nav>\n  </div>\n  <h2 class=\"mb-4 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n    {{ (query()?.description | resolveTranslation) || query()?.name || ('common.loading' | t) }}\n    @if (isStreaming()) {\n      <span class=\"badge bg-success ms-2\" style=\"font-size: 0.5em; vertical-align: middle;\">LIVE</span>\n    }\n  </h2>\n\n  @if (entityType()) {\n    <!-- Search box -->\n    <div class=\"flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n      <bs-form>\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"4\">\n              <bs-input-group>\n                <span class=\"input-group-text\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [(ngModel)]=\"searchTerm\"\n                  (ngModelChange)=\"onSearchChange()\">\n                @if (searchTerm) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            <div [md]=\"8\" class=\"text-end\">\n              @if (searchTerm && resultCount() !== null) {\n                <span class=\"text-muted\">\n                  {{ resultCount() }} {{ resultCount() === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              }\n            </div>\n          </div>\n        </bs-grid>\n      </bs-form>\n\n      @if (errorMessage(); as err) {\n        <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n          {{ err }}\n        </bs-alert>\n      }\n    </div>\n\n    @if (isStreaming()) {\n      <bs-datatable class=\"flex-grow-1\"\n          [selectionMode]=\"selectionMode()\"\n          [(selection)]=\"selection\"\n          [virtualScroll]=\"isVirtualScrolling()\"\n          [itemSize]=\"40\"\n          [isResponsive]=\"isVirtualScrolling()\"\n          [data]=\"streamItems()\"\n          [(settings)]=\"settings\">\n        @for (attr of visibleAttributes(); track attr.id) {\n          <div *bsDatatableColumn=\"attr.name; sortable: true\">\n            {{ (attr.label | resolveTranslation) || attr.name }}\n          </div>\n        }\n\n        <ng-container *bsRowTemplate=\"let item\">\n          <ng-container *ngTemplateOutlet=\"rowCells; context: { $implicit: item }\"></ng-container>\n        </ng-container>\n      </bs-datatable>\n    } @else {\n      <bs-datatable class=\"flex-grow-1\"\n          [selectionMode]=\"selectionMode()\"\n          [(selection)]=\"selection\"\n          [virtualScroll]=\"isVirtualScrolling()\"\n          [itemSize]=\"40\"\n          [isResponsive]=\"isVirtualScrolling()\"\n          [fetch]=\"fetchFn()\"\n          [(settings)]=\"settings\">\n        @for (attr of visibleAttributes(); track attr.id) {\n          <div *bsDatatableColumn=\"attr.name; sortable: true\">\n            {{ (attr.label | resolveTranslation) || attr.name }}\n          </div>\n        }\n\n        <ng-container *bsRowTemplate=\"let item\">\n          <ng-container *ngTemplateOutlet=\"rowCells; context: { $implicit: item }\"></ng-container>\n        </ng-container>\n      </bs-datatable>\n    }\n  } @else if (errorMessage(); as err) {\n    <!-- The metadata load failed. This used to be unreachable: the rejection was\n         swallowed by an async subscribe handler, so the spinner below span forever. -->\n    <bs-alert [type]=\"colors.danger\" class=\"m-3 d-block\">\n      {{ err }}\n    </bs-alert>\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n\n<!--\n  One row template for both the streaming and the paged datatable. These were two\n  byte-identical copies in the same file, which is how the first column's link came to\n  need fixing in three places instead of one.\n-->\n<ng-template #rowCells let-item>\n  @let row = $any(item);\n  @for (attr of visibleAttributes(); track attr.id; let first = $first) {\n    <td>\n      @if (row) {\n        <!-- `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 \u2014 a Custom.* query that fabricates rows\n             in memory, say. Note cellContent renders INSIDE this anchor, so a custom\n             renderer cannot suppress the link \u2014 it would nest a second one. -->\n        @if (first && canRead()) {\n          <a [routerLink]=\"['/po', entityType()!.alias || entityType()!.id, row.id]\" (click)=\"rowClicked.emit(row)\">\n            <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n          </a>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n        }\n      } @else {\n        &nbsp;\n      }\n    </td>\n  }\n</ng-template>\n\n<ng-template #cellContent let-item let-attr=\"attr\">\n  @if (getColumnRendererComponent(attr); as rendererType) {\n    <ng-container *ngComponentOutlet=\"rendererType; inputs: getColumnRendererInputs(rendererType, item, attr)\"></ng-container>\n  } @else if (attr.dataType === 'boolean') {\n    <input type=\"checkbox\"\n      [checked]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n      [indeterminate]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n      disabled\n      onclick=\"return false;\">\n  } @else if (attr.dataType === 'color') {\n    @let colorVal = (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes());\n    @if (colorVal) {\n      <span class=\"d-inline-block align-middle border rounded\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n    }\n  } @else if (attr.dataType === 'Reference' && attr.isArray) {\n    <span class=\"d-inline-flex flex-wrap gap-1\">\n      @for (chip of (attr.name | referenceChips:item); track chip.id) {\n        <span class=\"badge rounded-pill border bg-body-secondary text-body px-3 py-2\">{{ chip.label }}</span>\n      }\n    </span>\n  } @else {\n    {{ (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) }}\n  }\n</ng-template>\n", styles: [".spark-actionbar{position:sticky;top:0;z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem}.spark-actionbar .btn{border-radius:0}:host{display:flex;flex-direction:column;flex:1;min-height:0}:host.virtual-scrolling{margin:0 -1.5rem -1.5rem}:host.virtual-scrolling ::ng-deep bs-datatable{display:flex;flex-direction:column;min-height:0;--mp-datatable-virtual-max-height: 100%}:host.virtual-scrolling ::ng-deep bs-datatable mp-datatable{flex:1 1 auto;min-height:0}tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: BsAlertComponent, selector: "bs-alert", inputs: ["type", "announce", "isVisible"], outputs: ["isVisibleChange", "afterOpenedOrClosed"] }, { kind: "component", type: BsDatatableComponent, selector: "bs-datatable", inputs: ["columns", "data", "fetch", "settings", "selectionMode", "selectable", "selection", "rowKey", "resizableColumns", "pagination", "virtualScroll", "itemSize", "virtualBuffer", "isResponsive", "compareWith", "tree", "idKey", "childCountKey", "treeIndent", "expandedIds", "selectionStrategy"], outputs: ["settingsChange", "selectionChange", "rowClick", "rowDblClick", "rowContextMenu", "expandedIdsChange", "rowExpand", "rowCollapse"] }, { kind: "directive", type: BsDatatableColumnDirective, selector: "[bsDatatableColumn]", inputs: ["bsDatatableColumn", "bsDatatableColumnSortable"] }, { kind: "directive", type: BsRowTemplateDirective, selector: "[bsRowTemplate]" }, { kind: "component", type: BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "component", type: BsGridComponent, selector: "bs-grid", inputs: ["stopFullWidthAt"] }, { kind: "directive", type: BsGridRowDirective, selector: "[bsRow]" }, { kind: "directive", type: BsGridColumnDirective, selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]", inputs: ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: BsInputGroupComponent, selector: "bs-input-group", inputs: ["size"] }, { kind: "component", type: BsPriorityNavComponent, selector: "bs-priority-nav", inputs: ["moreLabel", "moreLabelTemplate", "collapseAt", "overflowFrom", "hideEmptyMore", "ariaLabel"], outputs: ["overflowChange"] }, { kind: "directive", type: BsPriorityNavItemDirective, selector: "[bsPriorityNavItem]", inputs: ["bsPriorityNavItem", "bsPriorityNavItemHideBelow"] }, { kind: "component", type: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }, { kind: "pipe", type: AttributeValuePipe, name: "attributeValue" }, { kind: "pipe", type: ReferenceChipsPipe, name: "referenceChips" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SparkQueryListComponent, isStandalone: true, selector: "spark-query-list", inputs: { extraActionsTemplate: { classPropertyName: "extraActionsTemplate", publicName: "extraActionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, showCustomActions: { classPropertyName: "showCustomActions", publicName: "showCustomActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClicked: "rowClicked", createClicked: "createClicked", customActionExecuted: "customActionExecuted" }, host: { properties: { "class.virtual-scrolling": "isVirtualScrolling()" } }, viewQueries: [{ propertyName: "grid", first: true, predicate: SparkQueryGridComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column h-100\">\n  <div class=\"spark-actionbar py-2 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\" [class.px-3]=\"!isVirtualScrolling()\">\n    <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n      @if (canCreate()) {\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-primary\" (click)=\"onCreate()\">\n          <spark-icon name=\"plus-lg\" /> {{ 'common.new' | t }}\n        </button>\n      }\n      @if (showCustomActions()) {\n        @for (action of customActions(); track action.name) {\n          <!-- Disabled, not hidden: hiding makes the affordance undiscoverable and reflows the\n               priority nav on every selection change. The server enforces the same rule. -->\n          <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-outline-primary\"\n                  [disabled]=\"!isActionEnabled(action)\" (click)=\"onCustomAction(action)\">\n            {{ action.displayName | resolveTranslation }}\n          </button>\n        }\n      }\n      @if (extraActionsTemplate(); as extraActionsTpl) {\n        <ng-container *bsPriorityNavItem=\"50\">\n          <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n        </ng-container>\n      }\n    </bs-priority-nav>\n  </div>\n\n  <h2 class=\"mb-4 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n    {{ (query()?.description | resolveTranslation) || query()?.name || ('common.loading' | t) }}\n    @if (isStreaming()) {\n      <bs-badge [type]=\"colors.success\" class=\"ms-2 align-middle spark-live-badge\">LIVE</bs-badge>\n    }\n  </h2>\n\n  @if (errorMessage(); as err) {\n    <!-- The route could not be resolved to a query at all. A failure INSIDE the grid renders in\n         the grid; this is the one it cannot report, because it never got a query id. -->\n    <bs-alert [type]=\"colors.danger\" class=\"m-3 d-block\">\n      {{ err }}\n    </bs-alert>\n  } @else if (queryId(); as qId) {\n    <div class=\"flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n      <bs-form>\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"12\">\n              <bs-input-group>\n                <span class=\"addon\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\">\n                @if (searchTerm()) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            <!-- Its own full-width row rather than a column beside the box: the count is\n                 occasional, and reserving 8 columns for it shrank the search permanently. The\n                 @if moved out of the column so nothing reserves vertical space when absent. -->\n            @if (searchTerm() && resultCount() !== null) {\n              <div [md]=\"12\" class=\"text-end mt-1\">\n                <span class=\"text-muted\">\n                  {{ resultCount() }} {{ resultCount() === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              </div>\n            }\n          </div>\n        </bs-grid>\n      </bs-form>\n    </div>\n\n    <!--\n      One grid, both transports. `data` is null for a normal query, so the grid fetches and pages\n      server-side; for a streaming query this page owns the socket and hands the filtered snapshot\n      in. This used to be two near-identical <bs-datatable> blocks with a shared row template.\n    -->\n    <spark-query-grid class=\"flex-grow-1\"\n        [queryId]=\"qId\"\n        [data]=\"gridData()\"\n        [search]=\"searchTerm()\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n", styles: [".spark-actionbar{position:sticky;top:0;z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem}.spark-actionbar .btn{border-radius:0}:host{display:flex;flex-direction:column;flex:1;min-height:0}:host.virtual-scrolling{margin:0 -1.5rem -1.5rem}:host.virtual-scrolling spark-query-grid{display:flex;flex-direction:column;min-height:0}:host.virtual-scrolling ::ng-deep bs-datatable{display:flex;flex-direction:column;min-height:0;--mp-datatable-virtual-max-height: 100%}:host.virtual-scrolling ::ng-deep bs-datatable mp-datatable{flex:1 1 auto;min-height:0}tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}.spark-live-badge{font-size:.6em}\n"], dependencies: [{ kind: "component", type: BsBadgeComponent, selector: "bs-badge", inputs: ["type", "unit", "decorative"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BsAlertComponent, selector: "bs-alert", inputs: ["type", "announce", "isVisible"], outputs: ["isVisibleChange", "afterOpenedOrClosed"] }, { kind: "component", type: BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "component", type: BsGridComponent, selector: "bs-grid", inputs: ["stopFullWidthAt"] }, { kind: "directive", type: BsGridRowDirective, selector: "[bsRow]" }, { kind: "directive", type: BsGridColumnDirective, selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]", inputs: ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: BsInputGroupComponent, selector: "bs-input-group", inputs: ["size"] }, { kind: "component", type: BsPriorityNavComponent, selector: "bs-priority-nav", inputs: ["moreLabel", "moreLabelTemplate", "collapseAt", "overflowFrom", "hideEmptyMore", "ariaLabel"], outputs: ["overflowChange"] }, { kind: "directive", type: BsPriorityNavItemDirective, selector: "[bsPriorityNavItem]", inputs: ["bsPriorityNavItem", "bsPriorityNavItemHideBelow"] }, { kind: "component", type: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "component", type: SparkQueryGridComponent, selector: "spark-query-grid", inputs: ["queryId", "parentId", "parentType", "data", "search", "reloadToken", "settings", "selection"], outputs: ["settingsChange", "selectionChange", "error", "rowClicked", "customActionExecuted"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SparkQueryListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spark-query-list', imports: [CommonModule, NgTemplateOutlet, NgComponentOutlet, FormsModule, RouterModule, BsAlertComponent, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective, BsFormComponent, BsFormControlDirective, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsInputGroupComponent, BsPriorityNavComponent, BsPriorityNavItemDirective, BsSpinnerComponent, SparkIconComponent, ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe, ReferenceChipsPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'spark-query-list', imports: [BsBadgeComponent, CommonModule, NgTemplateOutlet, FormsModule, BsAlertComponent, BsFormComponent, BsFormControlDirective, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsInputGroupComponent, BsPriorityNavComponent, BsPriorityNavItemDirective, BsSpinnerComponent, SparkIconComponent, SparkQueryGridComponent, ResolveTranslationPipe, TranslateKeyPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.virtual-scrolling]': 'isVirtualScrolling()'
-                    }, template: "<div class=\"d-flex flex-column h-100\">\n  <div class=\"spark-actionbar py-2 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\" [class.px-3]=\"!isVirtualScrolling()\">\n    <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n      @if (canCreate()) {\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-primary\" (click)=\"onCreate()\">\n          <spark-icon name=\"plus-lg\" /> {{ 'common.new' | t }}\n        </button>\n      }\n      @if (showCustomActions()) {\n        @for (action of customActions(); track action.name) {\n          <!-- Disabled, not hidden: hiding makes the affordance undiscoverable and reflows the\n               priority nav on every selection change. The server enforces the same rule. -->\n          <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-outline-primary\"\n                  [disabled]=\"!isActionEnabled(action)\" (click)=\"onCustomAction(action)\">\n            {{ action.displayName | resolveTranslation }}\n          </button>\n        }\n      }\n      @if (extraActionsTemplate(); as extraActionsTpl) {\n        <ng-container *bsPriorityNavItem=\"50\">\n          <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n        </ng-container>\n      }\n    </bs-priority-nav>\n  </div>\n  <h2 class=\"mb-4 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n    {{ (query()?.description | resolveTranslation) || query()?.name || ('common.loading' | t) }}\n    @if (isStreaming()) {\n      <span class=\"badge bg-success ms-2\" style=\"font-size: 0.5em; vertical-align: middle;\">LIVE</span>\n    }\n  </h2>\n\n  @if (entityType()) {\n    <!-- Search box -->\n    <div class=\"flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n      <bs-form>\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"4\">\n              <bs-input-group>\n                <span class=\"input-group-text\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [(ngModel)]=\"searchTerm\"\n                  (ngModelChange)=\"onSearchChange()\">\n                @if (searchTerm) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            <div [md]=\"8\" class=\"text-end\">\n              @if (searchTerm && resultCount() !== null) {\n                <span class=\"text-muted\">\n                  {{ resultCount() }} {{ resultCount() === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              }\n            </div>\n          </div>\n        </bs-grid>\n      </bs-form>\n\n      @if (errorMessage(); as err) {\n        <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n          {{ err }}\n        </bs-alert>\n      }\n    </div>\n\n    @if (isStreaming()) {\n      <bs-datatable class=\"flex-grow-1\"\n          [selectionMode]=\"selectionMode()\"\n          [(selection)]=\"selection\"\n          [virtualScroll]=\"isVirtualScrolling()\"\n          [itemSize]=\"40\"\n          [isResponsive]=\"isVirtualScrolling()\"\n          [data]=\"streamItems()\"\n          [(settings)]=\"settings\">\n        @for (attr of visibleAttributes(); track attr.id) {\n          <div *bsDatatableColumn=\"attr.name; sortable: true\">\n            {{ (attr.label | resolveTranslation) || attr.name }}\n          </div>\n        }\n\n        <ng-container *bsRowTemplate=\"let item\">\n          <ng-container *ngTemplateOutlet=\"rowCells; context: { $implicit: item }\"></ng-container>\n        </ng-container>\n      </bs-datatable>\n    } @else {\n      <bs-datatable class=\"flex-grow-1\"\n          [selectionMode]=\"selectionMode()\"\n          [(selection)]=\"selection\"\n          [virtualScroll]=\"isVirtualScrolling()\"\n          [itemSize]=\"40\"\n          [isResponsive]=\"isVirtualScrolling()\"\n          [fetch]=\"fetchFn()\"\n          [(settings)]=\"settings\">\n        @for (attr of visibleAttributes(); track attr.id) {\n          <div *bsDatatableColumn=\"attr.name; sortable: true\">\n            {{ (attr.label | resolveTranslation) || attr.name }}\n          </div>\n        }\n\n        <ng-container *bsRowTemplate=\"let item\">\n          <ng-container *ngTemplateOutlet=\"rowCells; context: { $implicit: item }\"></ng-container>\n        </ng-container>\n      </bs-datatable>\n    }\n  } @else if (errorMessage(); as err) {\n    <!-- The metadata load failed. This used to be unreachable: the rejection was\n         swallowed by an async subscribe handler, so the spinner below span forever. -->\n    <bs-alert [type]=\"colors.danger\" class=\"m-3 d-block\">\n      {{ err }}\n    </bs-alert>\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n\n<!--\n  One row template for both the streaming and the paged datatable. These were two\n  byte-identical copies in the same file, which is how the first column's link came to\n  need fixing in three places instead of one.\n-->\n<ng-template #rowCells let-item>\n  @let row = $any(item);\n  @for (attr of visibleAttributes(); track attr.id; let first = $first) {\n    <td>\n      @if (row) {\n        <!-- `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 \u2014 a Custom.* query that fabricates rows\n             in memory, say. Note cellContent renders INSIDE this anchor, so a custom\n             renderer cannot suppress the link \u2014 it would nest a second one. -->\n        @if (first && canRead()) {\n          <a [routerLink]=\"['/po', entityType()!.alias || entityType()!.id, row.id]\" (click)=\"rowClicked.emit(row)\">\n            <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n          </a>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n        }\n      } @else {\n        &nbsp;\n      }\n    </td>\n  }\n</ng-template>\n\n<ng-template #cellContent let-item let-attr=\"attr\">\n  @if (getColumnRendererComponent(attr); as rendererType) {\n    <ng-container *ngComponentOutlet=\"rendererType; inputs: getColumnRendererInputs(rendererType, item, attr)\"></ng-container>\n  } @else if (attr.dataType === 'boolean') {\n    <input type=\"checkbox\"\n      [checked]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n      [indeterminate]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n      disabled\n      onclick=\"return false;\">\n  } @else if (attr.dataType === 'color') {\n    @let colorVal = (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes());\n    @if (colorVal) {\n      <span class=\"d-inline-block align-middle border rounded\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n    }\n  } @else if (attr.dataType === 'Reference' && attr.isArray) {\n    <span class=\"d-inline-flex flex-wrap gap-1\">\n      @for (chip of (attr.name | referenceChips:item); track chip.id) {\n        <span class=\"badge rounded-pill border bg-body-secondary text-body px-3 py-2\">{{ chip.label }}</span>\n      }\n    </span>\n  } @else {\n    {{ (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) }}\n  }\n</ng-template>\n", styles: [".spark-actionbar{position:sticky;top:0;z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem}.spark-actionbar .btn{border-radius:0}:host{display:flex;flex-direction:column;flex:1;min-height:0}:host.virtual-scrolling{margin:0 -1.5rem -1.5rem}:host.virtual-scrolling ::ng-deep bs-datatable{display:flex;flex-direction:column;min-height:0;--mp-datatable-virtual-max-height: 100%}:host.virtual-scrolling ::ng-deep bs-datatable mp-datatable{flex:1 1 auto;min-height:0}tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { extraActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraActionsTemplate", required: false }] }], showCustomActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomActions", required: false }] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], createClicked: [{ type: i0.Output, args: ["createClicked"] }], customActionExecuted: [{ type: i0.Output, args: ["customActionExecuted"] }] } });
+                    }, template: "<div class=\"d-flex flex-column h-100\">\n  <div class=\"spark-actionbar py-2 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\" [class.px-3]=\"!isVirtualScrolling()\">\n    <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n      @if (canCreate()) {\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-primary\" (click)=\"onCreate()\">\n          <spark-icon name=\"plus-lg\" /> {{ 'common.new' | t }}\n        </button>\n      }\n      @if (showCustomActions()) {\n        @for (action of customActions(); track action.name) {\n          <!-- Disabled, not hidden: hiding makes the affordance undiscoverable and reflows the\n               priority nav on every selection change. The server enforces the same rule. -->\n          <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-outline-primary\"\n                  [disabled]=\"!isActionEnabled(action)\" (click)=\"onCustomAction(action)\">\n            {{ action.displayName | resolveTranslation }}\n          </button>\n        }\n      }\n      @if (extraActionsTemplate(); as extraActionsTpl) {\n        <ng-container *bsPriorityNavItem=\"50\">\n          <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n        </ng-container>\n      }\n    </bs-priority-nav>\n  </div>\n\n  <h2 class=\"mb-4 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n    {{ (query()?.description | resolveTranslation) || query()?.name || ('common.loading' | t) }}\n    @if (isStreaming()) {\n      <bs-badge [type]=\"colors.success\" class=\"ms-2 align-middle spark-live-badge\">LIVE</bs-badge>\n    }\n  </h2>\n\n  @if (errorMessage(); as err) {\n    <!-- The route could not be resolved to a query at all. A failure INSIDE the grid renders in\n         the grid; this is the one it cannot report, because it never got a query id. -->\n    <bs-alert [type]=\"colors.danger\" class=\"m-3 d-block\">\n      {{ err }}\n    </bs-alert>\n  } @else if (queryId(); as qId) {\n    <div class=\"flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n      <bs-form>\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"12\">\n              <bs-input-group>\n                <span class=\"addon\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\">\n                @if (searchTerm()) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            <!-- Its own full-width row rather than a column beside the box: the count is\n                 occasional, and reserving 8 columns for it shrank the search permanently. The\n                 @if moved out of the column so nothing reserves vertical space when absent. -->\n            @if (searchTerm() && resultCount() !== null) {\n              <div [md]=\"12\" class=\"text-end mt-1\">\n                <span class=\"text-muted\">\n                  {{ resultCount() }} {{ resultCount() === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              </div>\n            }\n          </div>\n        </bs-grid>\n      </bs-form>\n    </div>\n\n    <!--\n      One grid, both transports. `data` is null for a normal query, so the grid fetches and pages\n      server-side; for a streaming query this page owns the socket and hands the filtered snapshot\n      in. This used to be two near-identical <bs-datatable> blocks with a shared row template.\n    -->\n    <spark-query-grid class=\"flex-grow-1\"\n        [queryId]=\"qId\"\n        [data]=\"gridData()\"\n        [search]=\"searchTerm()\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n", styles: [".spark-actionbar{position:sticky;top:0;z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem}.spark-actionbar .btn{border-radius:0}:host{display:flex;flex-direction:column;flex:1;min-height:0}:host.virtual-scrolling{margin:0 -1.5rem -1.5rem}:host.virtual-scrolling spark-query-grid{display:flex;flex-direction:column;min-height:0}:host.virtual-scrolling ::ng-deep bs-datatable{display:flex;flex-direction:column;min-height:0;--mp-datatable-virtual-max-height: 100%}:host.virtual-scrolling ::ng-deep bs-datatable mp-datatable{flex:1 1 auto;min-height:0}tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}.spark-live-badge{font-size:.6em}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { extraActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraActionsTemplate", required: false }] }], showCustomActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomActions", required: false }] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], createClicked: [{ type: i0.Output, args: ["createClicked"] }], customActionExecuted: [{ type: i0.Output, args: ["customActionExecuted"] }], grid: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SparkQueryGridComponent), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.