@mintplayer/ng-spark 22.6.0 → 22.9.0

package/fesm2022/mintplayer-ng-spark-attribute-description.mjs

@@ -0,0 +1,68 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BsTooltipDirective } from '@mintplayer/ng-bootstrap/tooltip';
+import { SparkIconComponent } from '@mintplayer/ng-spark/icon';
+import { resolveTranslation, currentLanguage } from '@mintplayer/ng-spark/models';
+
+/**
+ * The [i] beside an attribute label: a focusable button whose tooltip shows the attribute's
+ * `description` (#348). Renders nothing when the model declares no description, so every label
+ * site can include it unconditionally.
+ *
+ * Accessibility comes from `*bsTooltip`: it opens on hover AND focus, closes on Escape, and sets
+ * `aria-describedby` on the button while open. The button's own name is the description text, so
+ * a screen reader announces the help on focus without waiting for the tooltip.
+ *
+ * Clicks are stopped: the [i] lives inside sortable grid headers and `<label for>` elements, and
+ * must neither toggle the sort nor move focus into the input.
+ */
+class SparkAttributeDescriptionComponent {
+    /** The attribute's `description`; `undefined` (the common case) renders nothing. */
+    description = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Where the tooltip opens relative to the [i]. */
+    position = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Resolved for the current language; re-evaluates when the user switches language. */
+    text = computed(() => resolveTranslation(this.description(), currentLanguage()).trim(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkAttributeDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: SparkAttributeDescriptionComponent, isStandalone: true, selector: "spark-attribute-description", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (text(); as text) {
+      <button
+        type="button"
+        class="btn btn-link p-0 ms-1 align-baseline spark-attribute-description-trigger"
+        [attr.aria-label]="text"
+        (click)="onClick($event)">
+        <spark-icon name="info-circle" />
+        <span *bsTooltip="position()" class="spark-attribute-description-text">{{ text }}</span>
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:inline-block;line-height:1}.spark-attribute-description-trigger{color:inherit;opacity:.6;font-size:.875em;vertical-align:baseline}.spark-attribute-description-trigger:hover,.spark-attribute-description-trigger:focus-visible{opacity:1}.spark-attribute-description-text{display:inline-block;white-space:pre-line;text-align:start;max-width:20rem}\n"], dependencies: [{ kind: "directive", type: BsTooltipDirective, selector: "*[bsTooltip]", inputs: ["bsTooltip"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkAttributeDescriptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spark-attribute-description', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [BsTooltipDirective, SparkIconComponent], template: `
+    @if (text(); as text) {
+      <button
+        type="button"
+        class="btn btn-link p-0 ms-1 align-baseline spark-attribute-description-trigger"
+        [attr.aria-label]="text"
+        (click)="onClick($event)">
+        <spark-icon name="info-circle" />
+        <span *bsTooltip="position()" class="spark-attribute-description-text">{{ text }}</span>
+      </button>
+    }
+  `, styles: [":host{display:inline-block;line-height:1}.spark-attribute-description-trigger{color:inherit;opacity:.6;font-size:.875em;vertical-align:baseline}.spark-attribute-description-trigger:hover,.spark-attribute-description-trigger:focus-visible{opacity:1}.spark-attribute-description-text{display:inline-block;white-space:pre-line;text-align:start;max-width:20rem}\n"] }]
+        }], propDecorators: { description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SparkAttributeDescriptionComponent };
+//# sourceMappingURL=mintplayer-ng-spark-attribute-description.mjs.map

package/fesm2022/mintplayer-ng-spark-attribute-description.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mintplayer-ng-spark-attribute-description.mjs","sources":["../../attribute-description/src/spark-attribute-description.component.ts","../../attribute-description/mintplayer-ng-spark-attribute-description.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { BsTooltipDirective } from '@mintplayer/ng-bootstrap/tooltip';\nimport { SparkIconComponent } from '@mintplayer/ng-spark/icon';\nimport { TranslatedString, currentLanguage, resolveTranslation } from '@mintplayer/ng-spark/models';\n\nexport type SparkAttributeDescriptionPosition = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * The [i] beside an attribute label: a focusable button whose tooltip shows the attribute's\n * `description` (#348). Renders nothing when the model declares no description, so every label\n * site can include it unconditionally.\n *\n * Accessibility comes from `*bsTooltip`: it opens on hover AND focus, closes on Escape, and sets\n * `aria-describedby` on the button while open. The button's own name is the description text, so\n * a screen reader announces the help on focus without waiting for the tooltip.\n *\n * Clicks are stopped: the [i] lives inside sortable grid headers and `<label for>` elements, and\n * must neither toggle the sort nor move focus into the input.\n */\n@Component({\n  selector: 'spark-attribute-description',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [BsTooltipDirective, SparkIconComponent],\n  template: `\n    @if (text(); as text) {\n      <button\n        type=\"button\"\n        class=\"btn btn-link p-0 ms-1 align-baseline spark-attribute-description-trigger\"\n        [attr.aria-label]=\"text\"\n        (click)=\"onClick($event)\">\n        <spark-icon name=\"info-circle\" />\n        <span *bsTooltip=\"position()\" class=\"spark-attribute-description-text\">{{ text }}</span>\n      </button>\n    }\n  `,\n  styles: [`\n    :host {\n      display: inline-block;\n      line-height: 1;\n    }\n    .spark-attribute-description-trigger {\n      color: inherit;\n      opacity: 0.6;\n      font-size: 0.875em;\n      vertical-align: baseline;\n    }\n    .spark-attribute-description-trigger:hover,\n    .spark-attribute-description-trigger:focus-visible {\n      opacity: 1;\n    }\n    .spark-attribute-description-text {\n      display: inline-block;\n      white-space: pre-line;\n      text-align: start;\n      max-width: 20rem;\n    }\n  `],\n})\nexport class SparkAttributeDescriptionComponent {\n  /** The attribute's `description`; `undefined` (the common case) renders nothing. */\n  description = input<TranslatedString | undefined>();\n\n  /** Where the tooltip opens relative to the [i]. */\n  position = input<SparkAttributeDescriptionPosition>('top');\n\n  /** Resolved for the current language; re-evaluates when the user switches language. */\n  text = computed(() => resolveTranslation(this.description(), currentLanguage()).trim());\n\n  onClick(event: MouseEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;AAWG;MAyCU,kCAAkC,CAAA;;AAE7C,IAAA,WAAW,GAAG,KAAK;+FAAgC;;IAGnD,QAAQ,GAAG,KAAK,CAAoC,KAAK;iFAAC;;AAG1D,IAAA,IAAI,GAAG,QAAQ,CAAC,MAAM,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,eAAe,EAAE,CAAC,CAAC,IAAI,EAAE;6EAAC;AAEvF,IAAA,OAAO,CAAC,KAAiB,EAAA;QACvB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;IACzB;uGAbW,kCAAkC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kCAAkC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAnCnC;;;;;;;;;;;GAWT,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,yWAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAZS,kBAAkB,gFAAE,kBAAkB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAoCrC,kCAAkC,EAAA,UAAA,EAAA,CAAA;kBAxC9C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,6BAA6B,EAAA,UAAA,EAC3B,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,EAAA,QAAA,EACvC;;;;;;;;;;;AAWT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,yWAAA,CAAA,EAAA;;;ACnCH;;AAEG;;;;"}

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

@@ -1,8 +1,8 @@
 import { DatatableSettings, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective } from '@mintplayer/ng-bootstrap/datatable';
-import { hasShowedOnFlag, ShowedOn, selectionModeFor, parseSelectionRule, filterQueryActions } from '@mintplayer/ng-spark/models';
+import { hasShowedOnFlag, ShowedOn, valueFor, selectionModeFor, parseSelectionRule, filterQueryActions } from '@mintplayer/ng-spark/models';
 import * as i0 from '@angular/core';
 import { inject, Injectable, TemplateRef, input, Directive, computed, ChangeDetectionStrategy, Component, model, output, signal, effect, untracked, contentChildren, viewChild } from '@angular/core';
-import { SPARK_ATTRIBUTE_RENDERERS, rendererValue, withDeclaredInputs } from '@mintplayer/ng-spark/renderers';
+import { SPARK_ATTRIBUTE_RENDERERS, cellValue, withDeclaredInputs } from '@mintplayer/ng-spark/renderers';
 import { SparkService, SparkLanguageService } from '@mintplayer/ng-spark/services';
 import * as i1 from '@angular/common';
 import { CommonModule, NgComponentOutlet } from '@angular/common';
@@ -12,7 +12,8 @@ import { Color } from '@mintplayer/ng-bootstrap';
 import { BsAlertComponent } from '@mintplayer/ng-bootstrap/alert';
 import { BsSpinnerComponent } from '@mintplayer/ng-bootstrap/spinner';
 import { SparkQueryRefreshService } from '@mintplayer/ng-spark/client-operations';
-import { ResolveTranslationPipe, AttributeValuePipe, ReferenceChipsPipe, TranslateKeyPipe } from '@mintplayer/ng-spark/pipes';
+import { ResolveTranslationPipe, QueryCellValuePipe, QueryReferenceChipsPipe, TranslateKeyPipe } from '@mintplayer/ng-spark/pipes';
+import { SparkAttributeDescriptionComponent } from '@mintplayer/ng-spark/attribute-description';
 import { BsCardComponent, BsCardHeaderComponent } from '@mintplayer/ng-bootstrap/card';
 import { BsPriorityNavComponent, BsPriorityNavItemDirective } from '@mintplayer/ng-bootstrap/priority-nav';
 
@@ -66,55 +67,50 @@ function isVirtualScrollingQuery(query) {
  * There is now one grid, {@link SparkQueryGridComponent}, so the drift cannot recur. This stays
  * separate because it is stateless service-shaped logic rather than view state, and because it is
  * what a custom grid would need in order to render Spark cells at all.
- *
- * The constraint that shaped the split still holds and is why the grid takes rows as an input
- * rather than owning a socket: streaming's dependency graph must not reach the bundle of every
- * detail page.
  */
 class SparkGridRenderers {
     registry = inject(SPARK_ATTRIBUTE_RENDERERS);
     sparkService = inject(SparkService);
-    /** The registered column component for an attribute, or null to fall back to the default cell. */
-    columnComponentFor(attr) {
-        if (!attr.renderer)
+    /** The registered column component for a column, or null to fall back to the default cell. */
+    columnComponentFor(column) {
+        if (!column.renderer)
             return null;
-        return this.registry.find(r => r.name === attr.renderer)?.columnComponent ?? null;
+        return this.registry.find(r => r.name === column.renderer)?.columnComponent ?? null;
     }
     /**
-     * Inputs for a column renderer, filtered to what the component actually declares —
+     * Inputs for a query-grid cell renderer, filtered to what the component actually declares —
      * `NgComponentOutlet` throws on an input the target does not have, which is what lets every
      * member of the renderer contract be optional.
      */
-    columnInputsFor(component, item, attr) {
-        const itemAttr = item.attributes.find(a => a.name === attr.name);
-        return this.cellInputsFor(component, rendererValue(itemAttr), attr, item);
+    columnInputsFor(component, item, column) {
+        return this.cellInputsFor(component, cellValue(valueFor(item, column.name)), column, item);
     }
     /**
-     * The same contract for a row that is not a <see cref="PersistentObject"/>.
+     * The same contract for a row that is not a query result — an AsDetail sub-table row, which is
+     * a plain dictionary of embedded values with no id and no column metadata of its own, so its
+     * value cannot be read the way {@link columnInputsFor} reads one.
      *
-     * An AsDetail row is a plain dictionary — embedded values with no id and no attribute list — so
-     * its value cannot be read the way {@link columnInputsFor} reads one. Only the extraction
-     * differs; the renderer contract is identical, and stating it once is what stops the two from
-     * drifting the way the cell markup already had.
+     * Only the extraction differs; the renderer contract is identical, and stating it once is what
+     * stops the two from drifting the way the cell markup already had.
      */
     cellInputsFor(component, value, column, item) {
         return withDeclaredInputs(component, {
             value,
-            attribute: column,
+            column,
             options: column.rendererOptions,
             item,
         });
     }
     /**
-     * Loads every lookup reference the visible attributes need, in one pass.
+     * Loads every lookup reference the visible columns need, in one pass.
      *
      * Returns an empty map rather than throwing when there are none, so callers never branch on it.
      */
-    async loadLookupOptions(attributes) {
-        const lookupAttrs = attributes.filter(a => a.lookupReferenceType);
-        if (lookupAttrs.length === 0)
+    async loadLookupOptions(columns) {
+        const lookupColumns = columns.filter(c => c.lookupReferenceType);
+        if (lookupColumns.length === 0)
             return {};
-        const names = [...new Set(lookupAttrs.map(a => a.lookupReferenceType))];
+        const names = [...new Set(lookupColumns.map(c => c.lookupReferenceType))];
         const entries = await Promise.all(names.map(async (name) => [name, await this.sparkService.getLookupReference(name)]));
         return entries.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});
     }
@@ -338,11 +334,11 @@ class SparkGridCellComponent {
     isUnsetBoolean = computed(() => this.display() == null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isUnsetBoolean" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: SparkGridCellComponent, isStandalone: true, selector: "spark-grid-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, rendererValue: { classPropertyName: "rendererValue", publicName: "rendererValue", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (rendererComponent(); as rendererType) {\n  <ng-container *ngComponentOutlet=\"rendererType; inputs: rendererInputs()\"></ng-container>\n} @else if (column().dataType === 'boolean') {\n  <!-- [indeterminate] matters: without it a null boolean renders as an unchecked box, which reads\n       as an explicit `false`. One of the three copies of this cell bound it and the others had\n       drifted, so the same column said different things on a detail page and in a grid. -->\n  <input type=\"checkbox\"\n    [checked]=\"display() === true\"\n    [indeterminate]=\"isUnsetBoolean()\"\n    disabled\n    onclick=\"return false;\">\n} @else if (column().dataType === 'color') {\n  @if (display(); as colorVal) {\n    <!-- Inline on purpose, and it is not a style-guide slip. In a query grid this cell is\n         rendered INSIDE <mp-datatable>'s shadow root, which does not see document\n         stylesheets: neither this component's scoped rules nor Bootstrap utilities apply\n         there. Inline styles do. Measured 2026-08-23 -- see the comment in the .scss. -->\n    <span class=\"d-inline-block align-middle border rounded\"\n          [style.background-color]=\"colorVal\"\n          style=\"width: 1.5em; height: 1.5em;\"></span>\n  }\n} @else if (chips().length) {\n  <span class=\"d-inline-flex flex-wrap gap-1\">\n    @for (chip of chips(); track chip.id) {\n      <span class=\"spark-chip\">{{ chip.label }}</span>\n    }\n  </span>\n} @else if (link(); as route) {\n  <a [routerLink]=\"route\">{{ display() }}</a>\n} @else {\n  {{ display() }}\n}\n", styles: [".spark-chip{display:inline-block;padding:.35em .9em;font-size:.8125em;font-weight:600;line-height:1.4;white-space:nowrap;text-align:center;vertical-align:baseline;color:var(--bs-body-color);background-color:var(--bs-secondary-bg);border:1px solid var(--bs-border-color);border-radius:50rem;text-decoration:none}a.spark-chip:hover,a.spark-chip:focus-visible{background-color:var(--bs-tertiary-bg)}.spark-color-swatch{width:1.5em;height:1.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: SparkGridCellComponent, isStandalone: true, selector: "spark-grid-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, rendererValue: { classPropertyName: "rendererValue", publicName: "rendererValue", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (rendererComponent(); as rendererType) {\n  <ng-container *ngComponentOutlet=\"rendererType; inputs: rendererInputs()\"></ng-container>\n} @else if (column().dataType === 'boolean') {\n  <!-- [indeterminate] matters: without it a null boolean renders as an unchecked box, which reads\n       as an explicit `false`. One of the three copies of this cell bound it and the others had\n       drifted, so the same column said different things on a detail page and in a grid. -->\n  <input type=\"checkbox\"\n    [checked]=\"display() === true\"\n    [indeterminate]=\"isUnsetBoolean()\"\n    disabled\n    onclick=\"return false;\">\n} @else if (column().dataType === 'color') {\n  @if (display(); as colorVal) {\n    <!-- Inline on purpose, and it is not a style-guide slip. In a query grid this cell is\n         rendered INSIDE <mp-datatable>'s shadow root, which does not see document\n         stylesheets: neither this component's scoped rules nor Bootstrap utilities apply\n         there. Inline styles do. Measured 2026-08-23 -- see the comment in the .scss. -->\n    <span class=\"d-inline-block align-middle border rounded\"\n          [style.background-color]=\"colorVal\"\n          style=\"width: 1.5em; height: 1.5em;\"></span>\n  }\n} @else if (column().dataType === 'image') {\n  @if (display(); as src) {\n    <!-- Inline sizing for the same reason the colour swatch above uses it: in a query grid this\n         renders inside <mp-datatable>'s shadow root, which sees neither this component's scoped\n         rules nor Bootstrap's. `alt` is empty on purpose \u2014 the cell is decorative next to the\n         row's own labelled columns, and a filename read aloud is worse than nothing. -->\n    <img [src]=\"src\" alt=\"\" loading=\"lazy\" class=\"align-middle rounded\"\n         style=\"max-height: 2.5em; max-width: 100%; object-fit: contain;\">\n  }\n} @else if (column().dataType === 'url') {\n  @if (display(); as href) {\n    <!-- rel is not optional with target=_blank: without noopener the opened page gets a handle on\n         this one through window.opener, and these hrefs are data. -->\n    <a [href]=\"href\" target=\"_blank\" rel=\"noopener noreferrer\">{{ href }}</a>\n  }\n} @else if (chips().length) {\n  <span class=\"d-inline-flex flex-wrap gap-1\">\n    @for (chip of chips(); track chip.id) {\n      <span class=\"spark-chip\">{{ chip.label }}</span>\n    }\n  </span>\n} @else if (link(); as route) {\n  <a [routerLink]=\"route\">{{ display() }}</a>\n} @else {\n  {{ display() }}\n}\n", styles: [".spark-chip{display:inline-block;padding:.35em .9em;font-size:.8125em;font-weight:600;line-height:1.4;white-space:nowrap;text-align:center;vertical-align:baseline;color:var(--bs-body-color);background-color:var(--bs-secondary-bg);border:1px solid var(--bs-border-color);border-radius:50rem;text-decoration:none}a.spark-chip:hover,a.spark-chip:focus-visible{background-color:var(--bs-tertiary-bg)}.spark-color-swatch{width:1.5em;height:1.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkGridCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spark-grid-cell', imports: [CommonModule, NgComponentOutlet, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (rendererComponent(); as rendererType) {\n  <ng-container *ngComponentOutlet=\"rendererType; inputs: rendererInputs()\"></ng-container>\n} @else if (column().dataType === 'boolean') {\n  <!-- [indeterminate] matters: without it a null boolean renders as an unchecked box, which reads\n       as an explicit `false`. One of the three copies of this cell bound it and the others had\n       drifted, so the same column said different things on a detail page and in a grid. -->\n  <input type=\"checkbox\"\n    [checked]=\"display() === true\"\n    [indeterminate]=\"isUnsetBoolean()\"\n    disabled\n    onclick=\"return false;\">\n} @else if (column().dataType === 'color') {\n  @if (display(); as colorVal) {\n    <!-- Inline on purpose, and it is not a style-guide slip. In a query grid this cell is\n         rendered INSIDE <mp-datatable>'s shadow root, which does not see document\n         stylesheets: neither this component's scoped rules nor Bootstrap utilities apply\n         there. Inline styles do. Measured 2026-08-23 -- see the comment in the .scss. -->\n    <span class=\"d-inline-block align-middle border rounded\"\n          [style.background-color]=\"colorVal\"\n          style=\"width: 1.5em; height: 1.5em;\"></span>\n  }\n} @else if (chips().length) {\n  <span class=\"d-inline-flex flex-wrap gap-1\">\n    @for (chip of chips(); track chip.id) {\n      <span class=\"spark-chip\">{{ chip.label }}</span>\n    }\n  </span>\n} @else if (link(); as route) {\n  <a [routerLink]=\"route\">{{ display() }}</a>\n} @else {\n  {{ display() }}\n}\n", styles: [".spark-chip{display:inline-block;padding:.35em .9em;font-size:.8125em;font-weight:600;line-height:1.4;white-space:nowrap;text-align:center;vertical-align:baseline;color:var(--bs-body-color);background-color:var(--bs-secondary-bg);border:1px solid var(--bs-border-color);border-radius:50rem;text-decoration:none}a.spark-chip:hover,a.spark-chip:focus-visible{background-color:var(--bs-tertiary-bg)}.spark-color-swatch{width:1.5em;height:1.5em}\n"] }]
+            args: [{ selector: 'spark-grid-cell', imports: [CommonModule, NgComponentOutlet, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (rendererComponent(); as rendererType) {\n  <ng-container *ngComponentOutlet=\"rendererType; inputs: rendererInputs()\"></ng-container>\n} @else if (column().dataType === 'boolean') {\n  <!-- [indeterminate] matters: without it a null boolean renders as an unchecked box, which reads\n       as an explicit `false`. One of the three copies of this cell bound it and the others had\n       drifted, so the same column said different things on a detail page and in a grid. -->\n  <input type=\"checkbox\"\n    [checked]=\"display() === true\"\n    [indeterminate]=\"isUnsetBoolean()\"\n    disabled\n    onclick=\"return false;\">\n} @else if (column().dataType === 'color') {\n  @if (display(); as colorVal) {\n    <!-- Inline on purpose, and it is not a style-guide slip. In a query grid this cell is\n         rendered INSIDE <mp-datatable>'s shadow root, which does not see document\n         stylesheets: neither this component's scoped rules nor Bootstrap utilities apply\n         there. Inline styles do. Measured 2026-08-23 -- see the comment in the .scss. -->\n    <span class=\"d-inline-block align-middle border rounded\"\n          [style.background-color]=\"colorVal\"\n          style=\"width: 1.5em; height: 1.5em;\"></span>\n  }\n} @else if (column().dataType === 'image') {\n  @if (display(); as src) {\n    <!-- Inline sizing for the same reason the colour swatch above uses it: in a query grid this\n         renders inside <mp-datatable>'s shadow root, which sees neither this component's scoped\n         rules nor Bootstrap's. `alt` is empty on purpose \u2014 the cell is decorative next to the\n         row's own labelled columns, and a filename read aloud is worse than nothing. -->\n    <img [src]=\"src\" alt=\"\" loading=\"lazy\" class=\"align-middle rounded\"\n         style=\"max-height: 2.5em; max-width: 100%; object-fit: contain;\">\n  }\n} @else if (column().dataType === 'url') {\n  @if (display(); as href) {\n    <!-- rel is not optional with target=_blank: without noopener the opened page gets a handle on\n         this one through window.opener, and these hrefs are data. -->\n    <a [href]=\"href\" target=\"_blank\" rel=\"noopener noreferrer\">{{ href }}</a>\n  }\n} @else if (chips().length) {\n  <span class=\"d-inline-flex flex-wrap gap-1\">\n    @for (chip of chips(); track chip.id) {\n      <span class=\"spark-chip\">{{ chip.label }}</span>\n    }\n  </span>\n} @else if (link(); as route) {\n  <a [routerLink]=\"route\">{{ display() }}</a>\n} @else {\n  {{ display() }}\n}\n", styles: [".spark-chip{display:inline-block;padding:.35em .9em;font-size:.8125em;font-weight:600;line-height:1.4;white-space:nowrap;text-align:center;vertical-align:baseline;color:var(--bs-body-color);background-color:var(--bs-secondary-bg);border:1px solid var(--bs-border-color);border-radius:50rem;text-decoration:none}a.spark-chip:hover,a.spark-chip:focus-visible{background-color:var(--bs-tertiary-bg)}.spark-color-swatch{width:1.5em;height:1.5em}\n"] }]
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], rendererValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rendererValue", required: false }] }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }] } });
 
 /**
@@ -415,6 +411,12 @@ class SparkQueryGridComponent {
      */
     search = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    /**
+     * Column metadata for externally supplied rows. Required whenever `data` is bound, because a
+     * projection cannot describe itself — there is no per-row metadata left to infer it from.
+     */
+    columns = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     /**
      * Change this to re-run the query. Any value works; only its identity matters.
      *
@@ -441,11 +443,49 @@ class SparkQueryGridComponent {
     /** Rows the user has ticked. Two-way so chrome outside the grid can read and clear them. */
     selection = model([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    /**
+     * Replaces where the first column's link points, per row.
+     *
+     * Return `null` to suppress the link for that row — useful when a grid mixes rows that have a
+     * detail page with rows that do not.
+     *
+     * ⚠️ **It changes the destination, not the permission.** `canRead()` still gates whether any
+     * link is rendered at all, and this function is never consulted when that gate is closed. It
+     * cannot be used to reach a row the rights model withheld; it exists for the case where the
+     * row's natural destination is not `/po/{type}/{id}` — a composed row that maps to a page of
+     * its own, or a grid embedded in a route that owns its own child paths.
+     */
+    rowRoute = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowRoute" }] : /* istanbul ignore next */ []));
     /** Emitted whenever a load or a page fetch fails, for a host in bespoke chrome. */
     error = output();
     rowClicked = output();
     customActionExecuted = output();
     colors = Color;
+    /**
+     * Where the first column's link points for this row: the host's `rowRoute` when it supplied one,
+     * otherwise the row's own detail page.
+     *
+     * A method rather than a computed because the answer is per row, and the template already
+     * iterates rows — a computed would have to be a map keyed by id, rebuilt on every page.
+     */
+    rowRouteFor(row) {
+        const custom = this.rowRoute();
+        if (custom)
+            return custom(row);
+        const type = this.entityType();
+        // ⚠️ A composed type has no per-row detail page by construction: its rows are computed, and
+        // `{Name}Actions.OnLoadAsync` serves ONE page which is free to ignore the id it was given. So
+        // /po/{type}/{rowId} does not 404 — it silently renders that same page, which is worse, because
+        // nothing looks wrong. This branch is live in DemoApp today: Read/StartPage implies
+        // Query/StartPage, so the composed grid renders with canRead() true and every row linked.
+        //
+        // `clrType` is absent exactly for those types and is already on the wire; the grid simply never
+        // consulted it. A host whose composed rows DO have a page says so with `rowRoute`.
+        if (!type?.clrType)
+            return null;
+        return ['/po', type.alias || type.id, row.id];
+    }
     query = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     entityType = signal(null, /* @ts-ignore */
@@ -481,8 +521,24 @@ class SparkQueryGridComponent {
     ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
     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 */ []));
+    /**
+     * Columns as sent with the most recent fetched page.
+     *
+     * A host binding `data` (streaming) supplies its own via the `columns` input instead — the
+     * snapshot carries them once, exactly as a paged result does.
+     */
+    fetchedColumns = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fetchedColumns" }] : /* istanbul ignore next */ []));
+    /** Every column on the wire, drawn or not — what renderers and lookups resolve against. */
+    allColumns = computed(() => this.columns() ?? this.fetchedColumns(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allColumns" }] : /* istanbul ignore next */ []));
+    /**
+     * The columns the grid draws. `isVisible: false` ships a value without a column, so a renderer
+     * can read a sibling the grid does not show; undefined means visible, so a server that predates
+     * the field still draws everything.
+     */
+    visibleColumns = computed(() => this.allColumns().filter(c => c.isVisible !== false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
     /**
      * True when rows do not come from this component's own fetch.
      *
@@ -496,7 +552,7 @@ class SparkQueryGridComponent {
     ...(ngDevMode ? [{ debugName: "hasExternalData" }] : /* 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);
+        return parseSelectionRule(action.selectionRule)(this.selection().map(r => r.id).length);
     }
     constructor() {
         effect(() => {
@@ -574,7 +630,19 @@ class SparkQueryGridComponent {
                 return;
         }
         try {
-            await this.sparkService.executeCustomAction(this.entityType().id, action.name, undefined, this.selection());
+            // The sub-query's container travels with the action (#327). Without it an action invoked
+            // from a company's Cars tab could not tell it was on a company's page at all — the grid knew
+            // (it filters the rows by that parent) and simply dropped the fact on the way out.
+            //
+            // Sent as parentId/parentType, NOT as the `parent` argument: that one means an object of this
+            // action's OWN type and is loaded under it server-side, so handing it a Company id for a Car
+            // action refuses — correctly, and confusingly.
+            const pId = this.parentId();
+            const pType = this.parentType();
+            await this.sparkService.executeCustomAction(this.entityType().id, action.name, undefined, this.selection().map(r => r.id), pId && pType ? { id: pId, type: pType } : undefined, 
+            // The query too: the server re-runs it narrowed to these ids, so the action receives the
+            // rows this grid rendered rather than a re-derivation from documents.
+            this.query()?.id);
             this.customActionExecuted.emit({ action });
             if (action.refreshOnCompleted)
                 this.reload();
@@ -674,7 +742,7 @@ class SparkQueryGridComponent {
         }
         const sourceName = extractSourceName(query.source);
         const singular = singularize(sourceName);
-        return entityTypes.find(t => t.name === sourceName || t.name === singular || t.clrType.endsWith(singular)) ?? null;
+        return entityTypes.find(t => t.name === sourceName || t.name === singular || t.clrType?.endsWith(singular)) ?? null;
     }
     makeFetch(query, parentId, parentType) {
         return (req) => this.sparkService.executeQuery(query.id, {
@@ -685,11 +753,16 @@ class SparkQueryGridComponent {
             parentId, parentType,
         }).then(r => {
             this.errorMessage.set(null);
-            this.resultCount.set(r.totalRecords);
+            this.resultCount.set(r.totalItems);
+            // Columns come from the result now, not from the entity type: the server decides the query
+            // surface (ShowedOn.Query) and is the same place the sort-column allow-list is checked.
+            // ?? [] because a malformed or older response must render an empty grid, not throw inside a
+            // computed — where the stack points at the column filter and not at the response that lacked them.
+            this.fetchedColumns.set(r.columns ?? []);
             return {
-                data: r.data,
-                totalRecords: r.totalRecords,
-                totalPages: Math.ceil(r.totalRecords / req.perPage) || 1,
+                data: r.items,
+                totalRecords: r.totalItems,
+                totalPages: Math.ceil(r.totalItems / req.perPage) || 1,
                 perPage: req.perPage,
                 page: req.page,
             };
@@ -702,30 +775,33 @@ class SparkQueryGridComponent {
         });
     }
     async loadLookupReferenceOptions() {
-        this.lookupReferenceOptions.set(await this.gridRenderers.loadLookupOptions(this.visibleAttributes()));
+        // Over ALL columns, not just the drawn ones: an undrawn column's value can still be rendered
+        // by a renderer reading it as a sibling, and it would resolve to a raw key without its options.
+        this.lookupReferenceOptions.set(await this.gridRenderers.loadLookupOptions(this.allColumns()));
     }
     /**
      * The underlying value a custom renderer receives, which is not the printable one.
      *
-     * `rendererValue` unwraps an AsDetail attribute to the nested object (or objects) rather than
-     * flattening it to text — a renderer for a nested type needs the object, not a summary of it.
+     * A projection is flat, so this is the cell's own value rather than a display string. It is
+     * deliberately not the attribute-shaped `rendererValue`: a query row has no nested object to
+     * fall back to, and reaching for one would hand every renderer `undefined`.
      */
-    rendererValueFor(item, attr) {
-        return rendererValue(item.attributes.find(a => a.name === attr.name));
+    rendererValueFor(item, column) {
+        return cellValue(valueFor(item, column.name));
     }
-    getColumnRendererComponent(attr) {
-        return this.gridRenderers.columnComponentFor(attr);
+    getColumnRendererComponent(column) {
+        return this.gridRenderers.columnComponentFor(column);
     }
-    getColumnRendererInputs(component, item, attr) {
-        return this.gridRenderers.columnInputsFor(component, item, attr);
+    getColumnRendererInputs(component, item, column) {
+        return this.gridRenderers.columnInputsFor(component, item, column);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkQueryGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: SparkQueryGridComponent, isStandalone: true, selector: "spark-query-grid", inputs: { queryId: { classPropertyName: "queryId", publicName: "queryId", isSignal: true, isRequired: true, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, reloadToken: { classPropertyName: "reloadToken", publicName: "reloadToken", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { settings: "settingsChange", selection: "selectionChange", error: "error", rowClicked: "rowClicked", customActionExecuted: "customActionExecuted" }, 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 \u2014 no card, no message, nothing to\n  see or report \u2014 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 \u2014 binding both makes `[fetch]` win silently \u2014 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  <bs-datatable\n      [selectionMode]=\"selectionMode()\"\n      [(selection)]=\"selection\"\n      [virtualScroll]=\"isVirtualScrolling()\"\n      [itemSize]=\"40\"\n      [isResponsive]=\"isVirtualScrolling()\"\n      [data]=\"data()\"\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      @let row = $any(item);\n      @for (attr of visibleAttributes(); track attr.id; 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 \u2014 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 \u2014 a Custom.* query that fabricates rows in\n                    memory, say. -->\n            @if (first && canRead()) {\n              <a [routerLink]=\"['/po', entityType()!.alias || entityType()!.id, row.id]\"\n                 (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-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-attr=\"attr\">\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]=\"attr\"\n      [display]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes())\"\n      [rendererValue]=\"rendererValueFor(item, attr)\"\n      [item]=\"item\"\n      [chips]=\"(attr.name | referenceChips:item)\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.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: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: SparkGridCellComponent, selector: "spark-grid-cell", inputs: ["column", "display", "rendererValue", "item", "chips", "link"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: AttributeValuePipe, name: "attributeValue" }, { kind: "pipe", type: ReferenceChipsPipe, name: "referenceChips" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: SparkQueryGridComponent, isStandalone: true, selector: "spark-query-grid", inputs: { queryId: { classPropertyName: "queryId", publicName: "queryId", isSignal: true, isRequired: true, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, reloadToken: { classPropertyName: "reloadToken", publicName: "reloadToken", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, rowRoute: { classPropertyName: "rowRoute", publicName: "rowRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { settings: "settingsChange", selection: "selectionChange", error: "error", rowClicked: "rowClicked", customActionExecuted: "customActionExecuted" }, 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 \u2014 no card, no message, nothing to\n  see or report \u2014 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 \u2014 binding both makes `[fetch]` win silently \u2014 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  <bs-datatable\n      [selectionMode]=\"selectionMode()\"\n      [(selection)]=\"selection\"\n      [virtualScroll]=\"isVirtualScrolling()\"\n      [itemSize]=\"40\"\n      [isResponsive]=\"isVirtualScrolling()\"\n      [data]=\"data()\"\n      [fetch]=\"fetchFn()\"\n      [(settings)]=\"settings\">\n    @for (col of visibleColumns(); track col.name) {\n      <div *bsDatatableColumn=\"col.name; sortable: true\">\n        {{ (col.label | resolveTranslation) || col.name }}\n        <spark-attribute-description [description]=\"col.description\" />\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 \u2014 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 \u2014 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\"\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    </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", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.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: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: SparkGridCellComponent, selector: "spark-grid-cell", inputs: ["column", "display", "rendererValue", "item", "chips", "link"] }, { kind: "component", type: SparkAttributeDescriptionComponent, selector: "spark-attribute-description", inputs: ["description", "position"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: QueryCellValuePipe, name: "queryCellValue" }, { kind: "pipe", type: QueryReferenceChipsPipe, name: "queryReferenceChips" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkQueryGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spark-query-grid', imports: [CommonModule, RouterModule, BsAlertComponent, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective, BsSpinnerComponent, SparkGridCellComponent, ResolveTranslationPipe, AttributeValuePipe, ReferenceChipsPipe, TranslateKeyPipe], 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 \u2014 no card, no message, nothing to\n  see or report \u2014 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 \u2014 binding both makes `[fetch]` win silently \u2014 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  <bs-datatable\n      [selectionMode]=\"selectionMode()\"\n      [(selection)]=\"selection\"\n      [virtualScroll]=\"isVirtualScrolling()\"\n      [itemSize]=\"40\"\n      [isResponsive]=\"isVirtualScrolling()\"\n      [data]=\"data()\"\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      @let row = $any(item);\n      @for (attr of visibleAttributes(); track attr.id; 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 \u2014 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 \u2014 a Custom.* query that fabricates rows in\n                    memory, say. -->\n            @if (first && canRead()) {\n              <a [routerLink]=\"['/po', entityType()!.alias || entityType()!.id, row.id]\"\n                 (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-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-attr=\"attr\">\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]=\"attr\"\n      [display]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes())\"\n      [rendererValue]=\"rendererValueFor(item, attr)\"\n      [item]=\"item\"\n      [chips]=\"(attr.name | referenceChips:item)\" />\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { queryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryId", required: true }] }], parentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentId", required: false }] }], parentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentType", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], reloadToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadToken", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }, { type: i0.Output, args: ["settingsChange"] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], error: [{ type: i0.Output, args: ["error"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], customActionExecuted: [{ type: i0.Output, args: ["customActionExecuted"] }] } });
+            args: [{ selector: 'spark-query-grid', imports: [CommonModule, RouterModule, BsAlertComponent, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective, BsSpinnerComponent, SparkGridCellComponent, ResolveTranslationPipe, QueryCellValuePipe, QueryReferenceChipsPipe, TranslateKeyPipe, SparkAttributeDescriptionComponent], 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 \u2014 no card, no message, nothing to\n  see or report \u2014 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 \u2014 binding both makes `[fetch]` win silently \u2014 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  <bs-datatable\n      [selectionMode]=\"selectionMode()\"\n      [(selection)]=\"selection\"\n      [virtualScroll]=\"isVirtualScrolling()\"\n      [itemSize]=\"40\"\n      [isResponsive]=\"isVirtualScrolling()\"\n      [data]=\"data()\"\n      [fetch]=\"fetchFn()\"\n      [(settings)]=\"settings\">\n    @for (col of visibleColumns(); track col.name) {\n      <div *bsDatatableColumn=\"col.name; sortable: true\">\n        {{ (col.label | resolveTranslation) || col.name }}\n        <spark-attribute-description [description]=\"col.description\" />\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 \u2014 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 \u2014 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\"\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    </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" }]
+        }], ctorParameters: () => [], propDecorators: { queryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryId", required: true }] }], parentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentId", required: false }] }], parentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentType", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], reloadToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadToken", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }, { type: i0.Output, args: ["settingsChange"] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], rowRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowRoute", required: false }] }], error: [{ type: i0.Output, args: ["error"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], customActionExecuted: [{ type: i0.Output, args: ["customActionExecuted"] }] } });
 function extractSourceName(source) {
     const dotIndex = source.indexOf('.');
     return dotIndex >= 0 ? source.substring(dotIndex + 1) : source;
@@ -804,6 +880,12 @@ class SparkQueryCardComponent {
     error = output();
     rowClicked = output();
     customActionExecuted = output();
+    /**
+     * Forwarded to the grid. Without this the escape hatch was unreachable from a card — i.e. from
+     * every auto-rendered sub-query and program-unit query page, which is most grids.
+     */
+    rowRoute = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowRoute" }] : /* istanbul ignore next */ []));
     colors = Color;
     iconSlots = contentChildren(SparkQueryIconDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconSlots" }] : /* istanbul ignore next */ []));
@@ -845,12 +927,12 @@ class SparkQueryCardComponent {
     selection = computed(() => this.grid()?.selection() ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkQueryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: SparkQueryCardComponent, isStandalone: true, selector: "spark-query-card", inputs: { queryId: { classPropertyName: "queryId", publicName: "queryId", isSignal: true, isRequired: true, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: false, transformFunction: null }, reloadToken: { classPropertyName: "reloadToken", publicName: "reloadToken", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, captionTemplate: { classPropertyName: "captionTemplate", publicName: "captionTemplate", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { error: "error", rowClicked: "rowClicked", customActionExecuted: "customActionExecuted" }, queries: [{ propertyName: "iconSlots", predicate: SparkQueryIconDirective, isSignal: true }, { propertyName: "captionSlots", predicate: SparkQueryCaptionDirective, isSignal: true }, { propertyName: "actionSlots", predicate: SparkQueryActionsDirective, isSignal: true }], viewQueries: [{ propertyName: "grid", first: true, predicate: SparkQueryGridComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  The card is always rendered. A host that wants no card uses <spark-query-grid> directly \u2014 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      <span class=\"me-auto\">\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(), selection: selection(), query: query() }\"></ng-container>\n      } @else if (customActions().length) {\n        <!-- The default: the actions the server declares for this type. The nav renders only when\n             there are any, so a query without actions is pixel-identical to a plain caption.\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 rule. -->\n        <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n          @for (action of customActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-sm btn-outline-primary\"\n                    [disabled]=\"!grid()?.isActionEnabled(action)\" (click)=\"grid()?.onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        </bs-priority-nav>\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]=\"search()\"\n        (error)=\"error.emit($event)\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  </div>\n</bs-card>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BsCardComponent, selector: "bs-card", inputs: ["color", "outline"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["color", "navStyle"] }, { 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: 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: SparkQueryCardComponent, isStandalone: true, selector: "spark-query-card", inputs: { queryId: { classPropertyName: "queryId", publicName: "queryId", isSignal: true, isRequired: true, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: false, transformFunction: null }, reloadToken: { classPropertyName: "reloadToken", publicName: "reloadToken", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, captionTemplate: { classPropertyName: "captionTemplate", publicName: "captionTemplate", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowRoute: { classPropertyName: "rowRoute", publicName: "rowRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { error: "error", rowClicked: "rowClicked", customActionExecuted: "customActionExecuted" }, queries: [{ propertyName: "iconSlots", predicate: SparkQueryIconDirective, isSignal: true }, { propertyName: "captionSlots", predicate: SparkQueryCaptionDirective, isSignal: true }, { propertyName: "actionSlots", predicate: SparkQueryActionsDirective, isSignal: true }], viewQueries: [{ propertyName: "grid", first: true, predicate: SparkQueryGridComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  The card is always rendered. A host that wants no card uses <spark-query-grid> directly \u2014 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      @if (actionsTpl(); as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: customActions(), selection: selection(), query: query() }\"></ng-container>\n      } @else if (customActions().length) {\n        <!-- The default: the actions the server declares for this type. The nav renders only when\n             there are any, so a query without actions is pixel-identical to a plain caption.\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 rule. -->\n        <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n          @for (action of customActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-sm btn-outline-primary\"\n                    [disabled]=\"!grid()?.isActionEnabled(action)\" (click)=\"grid()?.onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        </bs-priority-nav>\n      }\n\n      <!--\n        Caption last, actions first. The auto margin is conditional rather than fixed, and that is\n        the point: with actions present `ms-auto` pushes the caption to the trailing edge, and with\n        none it falls back to `me-auto` so a plain card looks exactly as it always did. A fixed\n        `ms-auto` would have right-aligned the caption of every action-less query card in every app\n        \u2014 a change nobody asked for, to fix a layout only some cards have.\n      -->\n      <span [class.ms-auto]=\"customActions().length\" [class.me-auto]=\"!customActions().length\">\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    </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]=\"search()\"\n        [rowRoute]=\"rowRoute()\"\n        (error)=\"error.emit($event)\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  </div>\n</bs-card>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BsCardComponent, selector: "bs-card", inputs: ["color", "outline"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["color", "navStyle"] }, { 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: SparkQueryGridComponent, selector: "spark-query-grid", inputs: ["queryId", "parentId", "parentType", "data", "search", "columns", "reloadToken", "settings", "selection", "rowRoute"], outputs: ["settingsChange", "selectionChange", "error", "rowClicked", "customActionExecuted"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkQueryCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spark-query-card', imports: [CommonModule, BsCardComponent, BsCardHeaderComponent, BsPriorityNavComponent, BsPriorityNavItemDirective, SparkQueryGridComponent, ResolveTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  The card is always rendered. A host that wants no card uses <spark-query-grid> directly \u2014 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      <span class=\"me-auto\">\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(), selection: selection(), query: query() }\"></ng-container>\n      } @else if (customActions().length) {\n        <!-- The default: the actions the server declares for this type. The nav renders only when\n             there are any, so a query without actions is pixel-identical to a plain caption.\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 rule. -->\n        <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n          @for (action of customActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-sm btn-outline-primary\"\n                    [disabled]=\"!grid()?.isActionEnabled(action)\" (click)=\"grid()?.onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        </bs-priority-nav>\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]=\"search()\"\n        (error)=\"error.emit($event)\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  </div>\n</bs-card>\n" }]
-        }], propDecorators: { queryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryId", required: true }] }], parentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentId", required: false }] }], parentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentType", required: false }] }], reloadToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadToken", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], captionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionTemplate", required: false }] }], actionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsTemplate", required: false }] }], error: [{ type: i0.Output, args: ["error"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], customActionExecuted: [{ type: i0.Output, args: ["customActionExecuted"] }], iconSlots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SparkQueryIconDirective), { isSignal: true }] }], captionSlots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SparkQueryCaptionDirective), { isSignal: true }] }], actionSlots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SparkQueryActionsDirective), { isSignal: true }] }], grid: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SparkQueryGridComponent), { isSignal: true }] }] } });
+            args: [{ selector: 'spark-query-card', imports: [CommonModule, BsCardComponent, BsCardHeaderComponent, BsPriorityNavComponent, BsPriorityNavItemDirective, SparkQueryGridComponent, ResolveTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  The card is always rendered. A host that wants no card uses <spark-query-grid> directly \u2014 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      @if (actionsTpl(); as tpl) {\n        <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: customActions(), selection: selection(), query: query() }\"></ng-container>\n      } @else if (customActions().length) {\n        <!-- The default: the actions the server declares for this type. The nav renders only when\n             there are any, so a query without actions is pixel-identical to a plain caption.\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 rule. -->\n        <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n          @for (action of customActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-sm btn-outline-primary\"\n                    [disabled]=\"!grid()?.isActionEnabled(action)\" (click)=\"grid()?.onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        </bs-priority-nav>\n      }\n\n      <!--\n        Caption last, actions first. The auto margin is conditional rather than fixed, and that is\n        the point: with actions present `ms-auto` pushes the caption to the trailing edge, and with\n        none it falls back to `me-auto` so a plain card looks exactly as it always did. A fixed\n        `ms-auto` would have right-aligned the caption of every action-less query card in every app\n        \u2014 a change nobody asked for, to fix a layout only some cards have.\n      -->\n      <span [class.ms-auto]=\"customActions().length\" [class.me-auto]=\"!customActions().length\">\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    </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]=\"search()\"\n        [rowRoute]=\"rowRoute()\"\n        (error)=\"error.emit($event)\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  </div>\n</bs-card>\n" }]
+        }], propDecorators: { queryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryId", required: true }] }], parentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentId", required: false }] }], parentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentType", required: false }] }], reloadToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadToken", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], captionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionTemplate", required: false }] }], actionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsTemplate", required: false }] }], error: [{ type: i0.Output, args: ["error"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], customActionExecuted: [{ type: i0.Output, args: ["customActionExecuted"] }], rowRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowRoute", required: false }] }], iconSlots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SparkQueryIconDirective), { isSignal: true }] }], captionSlots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SparkQueryCaptionDirective), { isSignal: true }] }], actionSlots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SparkQueryActionsDirective), { isSignal: true }] }], grid: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SparkQueryGridComponent), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.