@mintplayer/ng-spark 22.22.0 → 22.24.0

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

@@ -1,304 +1,517 @@
-import * as i0 from '@angular/core';
-import { inject, DestroyRef, input, output, signal, viewChild, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet } from '@angular/common';
-import * as i2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Color } from '@mintplayer/ng-bootstrap';
-import { BsBadgeComponent } from '@mintplayer/ng-bootstrap/badge';
-import { BsAlertComponent } from '@mintplayer/ng-bootstrap/alert';
-import { BsFormComponent, BsFormControlDirective } from '@mintplayer/ng-bootstrap/form';
-import { BsGridComponent, BsGridRowDirective, BsGridColumnDirective } from '@mintplayer/ng-bootstrap/grid';
-import { BsInputGroupComponent } from '@mintplayer/ng-bootstrap/input-group';
-import { BsPriorityNavComponent, BsPriorityNavItemDirective } from '@mintplayer/ng-bootstrap/priority-nav';
-import { BsSpinnerComponent } from '@mintplayer/ng-bootstrap/spinner';
-import { SparkService, SparkStreamingService, SparkLanguageService } from '@mintplayer/ng-spark/services';
-import { ResolveTranslationPipe, TranslateKeyPipe } from '@mintplayer/ng-spark/pipes';
-import { SparkIconComponent } from '@mintplayer/ng-spark/icon';
-import { SparkQueryGridComponent } from '@mintplayer/ng-spark/grid';
-
-/**
- * The routed query page: chrome around one {@link SparkQueryGridComponent}.
- *
- * It owns what is genuinely page-shaped and route-shaped, and nothing else:
- *
- *  - **Route resolution.** It has no `queryId` input; it reads `paramMap`, and it serves two
- *    routes — `query/:queryId`, and `po/:type`, which resolves an entity type to a query. That
- *    second one is type-to-query resolution, not query rendering, and is why this component still
- *    exists rather than the router pointing at the grid.
- *  - **Streaming.** The websocket lives here so it stays out of every PO detail page's bundle;
- *    the snapshot is filtered and sorted client-side and handed to the grid as `[data]`.
- *  - The action bar, the caption, the LIVE badge, the search box and the New button.
- *
- * The grid itself — columns, cells, paging, the row link, selection, custom-action execution —
- * is the shared component. This page previously wrote out `<bs-datatable>` twice, once per
- * transport, with a shared row template between them; both are gone.
- */
-class SparkQueryListComponent {
-    route = inject(ActivatedRoute);
-    router = inject(Router);
-    sparkService = inject(SparkService);
-    streamingService = inject(SparkStreamingService);
-    destroyRef = inject(DestroyRef);
-    lang = inject(SparkLanguageService);
-    extraActionsTemplate = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "extraActionsTemplate" }] : /* istanbul ignore next */ []));
-    showCustomActions = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showCustomActions" }] : /* istanbul ignore next */ []));
-    /**
-     * Forwarded to the grid, so a query PAGE can replace its row links — the same reason the card
-     * forwards it. Without this the escape hatch existed only for a directly-embedded grid.
-     */
-    rowRoute = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rowRoute" }] : /* istanbul ignore next */ []));
-    rowClicked = output();
-    createClicked = output();
-    customActionExecuted = output();
-    colors = Color;
-    /** The query the grid should render, resolved from the route. Null until it is known. */
-    queryId = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "queryId" }] : /* istanbul ignore next */ []));
-    errorMessage = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
-    searchTerm = signal('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
-    grid = viewChild(SparkQueryGridComponent, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
-    /**
-     * Grid state, surfaced for this page's chrome.
-     *
-     * Optional `viewChild`, read defensively: the action bar and caption render above the grid, so
-     * on the first change-detection pass the query has not resolved yet.
-     */
-    query = computed(() => this.grid()?.query() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
-    entityType = computed(() => this.grid()?.entityType() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "entityType" }] : /* istanbul ignore next */ []));
-    customActions = computed(() => this.grid()?.customActions() ?? [], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []));
-    canCreate = computed(() => this.grid()?.canCreate() ?? false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "canCreate" }] : /* istanbul ignore next */ []));
-    resultCount = computed(() => this.grid()?.resultCount() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resultCount" }] : /* istanbul ignore next */ []));
-    isVirtualScrolling = computed(() => this.grid()?.isVirtualScrolling() ?? false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isVirtualScrolling" }] : /* istanbul ignore next */ []));
-    gridError = computed(() => this.grid()?.errorMessage() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "gridError" }] : /* istanbul ignore next */ []));
-    /** Whether an action's selection rule is satisfied. Delegated: the grid holds the selection. */
-    /** @see SparkPoDetailComponent.customActionClass — same allow-list, same default. */
-    customActionClass(action) {
-        const variant = action.variant?.toLowerCase();
-        switch (variant) {
-            case 'danger':
-            case 'warning':
-            case 'primary':
-            case 'secondary':
-            case 'success':
-                return `btn btn-${variant}`;
-            default:
-                return 'btn btn-outline-primary';
-        }
-    }
-    isActionEnabled(action) {
-        return this.grid()?.isActionEnabled(action) ?? false;
-    }
-    // --- streaming ---------------------------------------------------------------
-    isStreaming = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isStreaming" }] : /* istanbul ignore next */ []));
-    streamingSub = null;
-    /** Columns as sent with the stream's snapshot; empty until it arrives. */
-    streamColumns = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "streamColumns" }] : /* istanbul ignore next */ []));
-    allItems = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "allItems" }] : /* istanbul ignore next */ []));
-    streamItems = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "streamItems" }] : /* istanbul ignore next */ []));
-    /**
-     * Rows handed to the grid, or `null` to let it fetch for itself.
-     *
-     * Null for a normal query — an empty array would read as "here are no rows" and suppress the
-     * fetch entirely.
-     */
-    gridData = computed(() => this.query()?.isStreamingQuery ? this.streamItems() : null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "gridData" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.route.paramMap.pipe(takeUntilDestroyed()).subscribe(params => {
-            // The handler is async and this is a subscribe, so a rejection lands nowhere: the metadata
-            // load would reject, the query would stay null, and the template would render a spinner
-            // FOREVER — while this component has had an errorMessage surface all along that only the
-            // fetch path ever reached.
-            this.onParamsChange(params).catch((e) => this.reportLoadFailure(e));
-        });
-        this.destroyRef.onDestroy(() => this.disconnectStreaming());
-        // Connect the socket once the grid has resolved a streaming query, and disconnect whenever it
-        // resolves anything else. The grid knows not to fetch for a streaming query, so there is no
-        // window in which both transports are live.
-        effect(() => {
-            const q = this.query();
-            if (q?.isStreamingQuery) {
-                this.connectStreaming(q.id);
-            }
-            else {
-                this.disconnectStreaming();
-            }
-        });
-        // Client-side filter and sort for the streaming snapshot. The server never sees these: there
-        // is no request to attach them to.
-        effect(() => {
-            this.searchTerm();
-            this.grid()?.settings();
-            this.allItems();
-            if (this.isStreaming())
-                this.applyFilter();
-        });
-    }
-    async onParamsChange(params) {
-        this.errorMessage.set(null);
-        this.queryId.set(null);
-        this.allItems.set([]);
-        this.streamItems.set([]);
-        this.streamColumns.set([]);
-        this.disconnectStreaming();
-        const queryId = params.get('queryId');
-        const typeParam = params.get('type');
-        if (queryId) {
-            this.queryId.set(queryId);
-            return;
-        }
-        if (!typeParam)
-            return;
-        // `po/:type` — the route names an entity type, so find the query that lists it. The grid takes
-        // a query, and this translation is the only reason it cannot take the route directly.
-        const [entityTypes, queries] = await Promise.all([
-            this.sparkService.getEntityTypes(),
-            this.sparkService.getQueries(),
-        ]);
-        const entityType = entityTypes.find(t => t.id === typeParam || t.alias === typeParam);
-        if (!entityType) {
-            this.reportLoadFailure({ status: 404 });
-            return;
-        }
-        const singularName = entityType.name;
-        const match = queries.find(q => {
-            if (q.entityType === singularName)
-                return true;
-            const sourceName = q.source.includes('.') ? q.source.substring(q.source.indexOf('.') + 1) : q.source;
-            return sourceName === singularName || sourceName === singularName + 's';
-        });
-        if (match)
-            this.queryId.set(match.alias || match.id);
-        else
-            this.reportLoadFailure({ status: 404 });
-    }
-    /**
-     * A load failure has to render, not just be swallowed: a denied query answers 404 (audit M-3, so
-     * existence is not leaked), which is indistinguishable from a missing one — hence a deliberately
-     * generic message rather than a guess at which it was.
-     */
-    reportLoadFailure(err) {
-        this.errorMessage.set(err?.status === 404
-            ? (this.lang.t('spark.query.unavailable') || 'This list is not available.')
-            : (err?.error?.error || err?.message || 'An unexpected error occurred'));
-    }
-    async onCustomAction(action) {
-        await this.grid()?.onCustomAction(action);
-    }
-    onCreate() {
-        this.createClicked.emit();
-        const et = this.entityType();
-        if (et)
-            this.router.navigate(['/po', et.alias || et.id, 'new']);
-    }
-    clearSearch() {
-        this.searchTerm.set('');
-    }
-    connectStreaming(queryId) {
-        if (this.streamingSub)
-            return;
-        this.isStreaming.set(true);
-        this.streamingSub = this.streamingService.connectToStreamingQuery(queryId).subscribe({
-            next: (message) => this.handleStreamingMessage(message),
-            error: (err) => {
-                this.errorMessage.set(err?.message || 'Streaming connection failed');
-                this.isStreaming.set(false);
-            },
-            complete: () => this.isStreaming.set(false),
-        });
-    }
-    disconnectStreaming() {
-        if (this.streamingSub) {
-            this.streamingSub.unsubscribe();
-            this.streamingSub = null;
-        }
-        this.isStreaming.set(false);
-    }
-    handleStreamingMessage(message) {
-        switch (message.type) {
-            case 'snapshot':
-                this.errorMessage.set(null);
-                // Columns come with the snapshot and never change for the life of the stream, so they are
-                // stored once and handed to the grid alongside the rows — a projection cannot describe
-                // itself, and the grid has no entity-type metadata to fall back on any more.
-                this.streamColumns.set(message.columns);
-                this.allItems.set(message.data);
-                break;
-            case 'patch':
-                if (message.updated.length > 0) {
-                    this.allItems.update(items => items.map(item => {
-                        const patch = message.updated.find(u => u.id === item.id);
-                        if (!patch)
-                            return item;
-                        return {
-                            ...item,
-                            values: item.values.map(v => v.key in patch.values ? { ...v, value: patch.values[v.key] } : v),
-                        };
-                    }));
-                }
-                break;
-            case 'error':
-                this.errorMessage.set(message.message);
-                break;
-        }
-    }
-    applyFilter() {
-        let items = this.allItems();
-        const term = this.searchTerm().toLowerCase();
-        if (term) {
-            items = items.filter(item => item.values.some(v => String(v.value ?? '').toLowerCase().includes(term)));
-        }
-        // The datatable in `[data]` mode also sorts on header clicks, but the sort must survive a
-        // patch: re-deriving from `allItems` without re-applying it would silently reorder the grid
-        // under the user on every update.
-        const sortCols = this.grid()?.settings().sortColumns ?? [];
-        if (sortCols.length > 0) {
-            items = [...items].sort((a, b) => {
-                for (const col of sortCols) {
-                    const aVal = a.values.find(v => v.key === col.property)?.value ?? '';
-                    const bVal = b.values.find(v => v.key === col.property)?.value ?? '';
-                    const cmp = String(aVal).localeCompare(String(bVal));
-                    if (cmp !== 0)
-                        return col.direction === 'descending' ? -cmp : cmp;
-                }
-                return 0;
-            });
-        }
-        this.streamItems.set(items);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkQueryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: SparkQueryListComponent, isStandalone: true, selector: "spark-query-list", inputs: { extraActionsTemplate: { classPropertyName: "extraActionsTemplate", publicName: "extraActionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, showCustomActions: { classPropertyName: "showCustomActions", publicName: "showCustomActions", isSignal: true, isRequired: false, transformFunction: null }, rowRoute: { classPropertyName: "rowRoute", publicName: "rowRoute", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClicked: "rowClicked", createClicked: "createClicked", customActionExecuted: "customActionExecuted" }, host: { properties: { "class.virtual-scrolling": "isVirtualScrolling()" } }, viewQueries: [{ propertyName: "grid", first: true, predicate: SparkQueryGridComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column h-100\">\n  <div class=\"spark-actionbar py-2 flex-shrink-0\" [class.spark-actionbar-wide]=\"isVirtualScrolling()\">\n    <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n      @if (canCreate()) {\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-primary\" (click)=\"onCreate()\">\n          <spark-icon name=\"plus-lg\" /> {{ 'common.new' | t }}\n        </button>\n      }\n      @if (showCustomActions()) {\n        @for (action of customActions(); track action.name) {\n          <!-- Disabled, not hidden: hiding makes the affordance undiscoverable and reflows the\n               priority nav on every selection change. The server enforces the same rule. -->\n          <button *bsPriorityNavItem=\"10 + action.offset\" [class]=\"customActionClass(action)\"\n                  [disabled]=\"!isActionEnabled(action)\" (click)=\"onCustomAction(action)\">\n            {{ action.displayName | resolveTranslation }}\n          </button>\n        }\n      }\n      @if (extraActionsTemplate(); as extraActionsTpl) {\n        <ng-container *bsPriorityNavItem=\"50\">\n          <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n        </ng-container>\n      }\n    </bs-priority-nav>\n  </div>\n\n  <h2 class=\"mb-4 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n    {{ (query()?.description | resolveTranslation) || query()?.name || ('common.loading' | t) }}\n    @if (isStreaming()) {\n      <bs-badge [type]=\"colors.success\" class=\"ms-2 align-middle spark-live-badge\">LIVE</bs-badge>\n    }\n  </h2>\n\n  @if (errorMessage(); as err) {\n    <!-- The route could not be resolved to a query at all. A failure INSIDE the grid renders in\n         the grid; this is the one it cannot report, because it never got a query id. -->\n    <bs-alert [type]=\"colors.danger\" class=\"m-3 d-block\">\n      {{ err }}\n    </bs-alert>\n  } @else if (queryId(); as qId) {\n    <div class=\"flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n      <bs-form>\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"12\">\n              <bs-input-group>\n                <span class=\"addon\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\">\n                @if (searchTerm()) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            <!-- Its own full-width row rather than a column beside the box: the count is\n                 occasional, and reserving 8 columns for it shrank the search permanently. The\n                 @if moved out of the column so nothing reserves vertical space when absent. -->\n            @if (searchTerm() && resultCount() !== null) {\n              <div [md]=\"12\" class=\"text-end mt-1\">\n                <span class=\"text-muted\">\n                  {{ resultCount() }} {{ resultCount() === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              </div>\n            }\n          </div>\n        </bs-grid>\n      </bs-form>\n    </div>\n\n    <!--\n      One grid, both transports. `data` is null for a normal query, so the grid fetches and pages\n      server-side; for a streaming query this page owns the socket and hands the filtered snapshot\n      in. This used to be two near-identical <bs-datatable> blocks with a shared row template.\n    -->\n    <spark-query-grid class=\"flex-grow-1\"\n        [queryId]=\"qId\"\n        [data]=\"gridData()\"\n        [columns]=\"gridData() ? streamColumns() : null\"\n        [search]=\"searchTerm()\"\n        [rowRoute]=\"rowRoute()\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n", styles: [".spark-actionbar{--_bleed-block: var(--spark-content-inset-block, 0px);--_bleed-inline: var(--spark-content-inset-inline, 0px);--_gutter: var(--spark-actionbar-gutter, 1rem);position:sticky;top:calc(-1 * var(--_bleed-block));z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem;margin-inline:calc(-1 * var(--_bleed-inline));padding-inline:calc(var(--_bleed-inline) + var(--_gutter))}.spark-actionbar .btn{border-radius:0}.spark-actionbar-wide{--spark-actionbar-gutter: 1.5rem}:host{display:flex;flex-direction:column;flex:1;min-height:0}:host.virtual-scrolling{margin:0 calc(-1 * var(--spark-main-padding, 1.5rem)) calc(-1 * var(--spark-main-padding, 1.5rem));--spark-content-inset-inline: 0px}:host.virtual-scrolling spark-query-grid{display:flex;flex-direction:column;min-height:0}:host.virtual-scrolling ::ng-deep bs-datatable{display:flex;flex-direction:column;min-height:0;--mp-datatable-virtual-max-height: 100%}:host.virtual-scrolling ::ng-deep bs-datatable mp-datatable{flex:1 1 auto;min-height:0}tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}.spark-live-badge{font-size:.6em}\n"], dependencies: [{ kind: "component", type: BsBadgeComponent, selector: "bs-badge", inputs: ["type", "unit", "decorative"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BsAlertComponent, selector: "bs-alert", inputs: ["type", "announce", "isVisible"], outputs: ["isVisibleChange", "afterOpenedOrClosed"] }, { kind: "component", type: BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "component", type: BsGridComponent, selector: "bs-grid", inputs: ["stopFullWidthAt"] }, { kind: "directive", type: BsGridRowDirective, selector: "[bsRow]" }, { kind: "directive", type: BsGridColumnDirective, selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]", inputs: ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: BsInputGroupComponent, selector: "bs-input-group", inputs: ["size"] }, { kind: "component", type: BsPriorityNavComponent, selector: "bs-priority-nav", inputs: ["moreLabel", "moreLabelTemplate", "collapseAt", "overflowFrom", "hideEmptyMore", "ariaLabel"], outputs: ["overflowChange"] }, { kind: "directive", type: BsPriorityNavItemDirective, selector: "[bsPriorityNavItem]", inputs: ["bsPriorityNavItem", "bsPriorityNavItemHideBelow"] }, { kind: "component", type: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "component", type: SparkQueryGridComponent, selector: "spark-query-grid", inputs: ["queryId", "parentId", "parentType", "data", "search", "columns", "reloadToken", "settings", "selection", "rowRoute"], outputs: ["settingsChange", "selectionChange", "error", "rowClicked", "customActionExecuted"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkQueryListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spark-query-list', imports: [BsBadgeComponent, CommonModule, NgTemplateOutlet, FormsModule, BsAlertComponent, BsFormComponent, BsFormControlDirective, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsInputGroupComponent, BsPriorityNavComponent, BsPriorityNavItemDirective, BsSpinnerComponent, SparkIconComponent, SparkQueryGridComponent, ResolveTranslationPipe, TranslateKeyPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.virtual-scrolling]': 'isVirtualScrolling()'
-                    }, template: "<div class=\"d-flex flex-column h-100\">\n  <div class=\"spark-actionbar py-2 flex-shrink-0\" [class.spark-actionbar-wide]=\"isVirtualScrolling()\">\n    <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n      @if (canCreate()) {\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-primary\" (click)=\"onCreate()\">\n          <spark-icon name=\"plus-lg\" /> {{ 'common.new' | t }}\n        </button>\n      }\n      @if (showCustomActions()) {\n        @for (action of customActions(); track action.name) {\n          <!-- Disabled, not hidden: hiding makes the affordance undiscoverable and reflows the\n               priority nav on every selection change. The server enforces the same rule. -->\n          <button *bsPriorityNavItem=\"10 + action.offset\" [class]=\"customActionClass(action)\"\n                  [disabled]=\"!isActionEnabled(action)\" (click)=\"onCustomAction(action)\">\n            {{ action.displayName | resolveTranslation }}\n          </button>\n        }\n      }\n      @if (extraActionsTemplate(); as extraActionsTpl) {\n        <ng-container *bsPriorityNavItem=\"50\">\n          <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n        </ng-container>\n      }\n    </bs-priority-nav>\n  </div>\n\n  <h2 class=\"mb-4 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n    {{ (query()?.description | resolveTranslation) || query()?.name || ('common.loading' | t) }}\n    @if (isStreaming()) {\n      <bs-badge [type]=\"colors.success\" class=\"ms-2 align-middle spark-live-badge\">LIVE</bs-badge>\n    }\n  </h2>\n\n  @if (errorMessage(); as err) {\n    <!-- The route could not be resolved to a query at all. A failure INSIDE the grid renders in\n         the grid; this is the one it cannot report, because it never got a query id. -->\n    <bs-alert [type]=\"colors.danger\" class=\"m-3 d-block\">\n      {{ err }}\n    </bs-alert>\n  } @else if (queryId(); as qId) {\n    <div class=\"flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n      <bs-form>\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"12\">\n              <bs-input-group>\n                <span class=\"addon\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\">\n                @if (searchTerm()) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            <!-- Its own full-width row rather than a column beside the box: the count is\n                 occasional, and reserving 8 columns for it shrank the search permanently. The\n                 @if moved out of the column so nothing reserves vertical space when absent. -->\n            @if (searchTerm() && resultCount() !== null) {\n              <div [md]=\"12\" class=\"text-end mt-1\">\n                <span class=\"text-muted\">\n                  {{ resultCount() }} {{ resultCount() === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              </div>\n            }\n          </div>\n        </bs-grid>\n      </bs-form>\n    </div>\n\n    <!--\n      One grid, both transports. `data` is null for a normal query, so the grid fetches and pages\n      server-side; for a streaming query this page owns the socket and hands the filtered snapshot\n      in. This used to be two near-identical <bs-datatable> blocks with a shared row template.\n    -->\n    <spark-query-grid class=\"flex-grow-1\"\n        [queryId]=\"qId\"\n        [data]=\"gridData()\"\n        [columns]=\"gridData() ? streamColumns() : null\"\n        [search]=\"searchTerm()\"\n        [rowRoute]=\"rowRoute()\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n", styles: [".spark-actionbar{--_bleed-block: var(--spark-content-inset-block, 0px);--_bleed-inline: var(--spark-content-inset-inline, 0px);--_gutter: var(--spark-actionbar-gutter, 1rem);position:sticky;top:calc(-1 * var(--_bleed-block));z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem;margin-inline:calc(-1 * var(--_bleed-inline));padding-inline:calc(var(--_bleed-inline) + var(--_gutter))}.spark-actionbar .btn{border-radius:0}.spark-actionbar-wide{--spark-actionbar-gutter: 1.5rem}:host{display:flex;flex-direction:column;flex:1;min-height:0}:host.virtual-scrolling{margin:0 calc(-1 * var(--spark-main-padding, 1.5rem)) calc(-1 * var(--spark-main-padding, 1.5rem));--spark-content-inset-inline: 0px}:host.virtual-scrolling spark-query-grid{display:flex;flex-direction:column;min-height:0}:host.virtual-scrolling ::ng-deep bs-datatable{display:flex;flex-direction:column;min-height:0;--mp-datatable-virtual-max-height: 100%}:host.virtual-scrolling ::ng-deep bs-datatable mp-datatable{flex:1 1 auto;min-height:0}tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}.spark-live-badge{font-size:.6em}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { extraActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraActionsTemplate", required: false }] }], showCustomActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomActions", required: false }] }], rowRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowRoute", required: false }] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], createClicked: [{ type: i0.Output, args: ["createClicked"] }], customActionExecuted: [{ type: i0.Output, args: ["customActionExecuted"] }], grid: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SparkQueryGridComponent), { isSignal: true }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, computed, effect, inject, input, output, signal, viewChild } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import * as i1 from "@angular/common";
+import { CommonModule, NgComponentOutlet, NgTemplateOutlet } from "@angular/common";
+import { ActivatedRoute, Router } from "@angular/router";
+import { Color } from "@mintplayer/ng-bootstrap";
+import { BsBadgeComponent } from "@mintplayer/ng-bootstrap/badge";
+import { BsAlertComponent } from "@mintplayer/ng-bootstrap/alert";
+import { BsGridColumnDirective, BsGridComponent, BsGridRowDirective } from "@mintplayer/ng-bootstrap/grid";
+import { BsPriorityNavComponent, BsPriorityNavItemDirective } from "@mintplayer/ng-bootstrap/priority-nav";
+import { BsSpinnerComponent } from "@mintplayer/ng-bootstrap/spinner";
+import { SparkLanguageService, SparkService, SparkStreamingService } from "@mintplayer/ng-spark/services";
+import { ResolveTranslationPipe, TranslateKeyPipe } from "@mintplayer/ng-spark/pipes";
+import { SparkIconComponent } from "@mintplayer/ng-spark/icon";
+import { SparkQueryGridComponent, SparkSearchBoxComponent, sparkActionClass } from "@mintplayer/ng-spark/grid";
+import { SPARK_QUERY_LIST_ACTIONS, orderSparkExtensions, parseSparkDeletedParam } from "@mintplayer/ng-spark/panels";
+var SparkQueryListComponent = class SparkQueryListComponent {
+	route = inject(ActivatedRoute);
+	router = inject(Router);
+	sparkService = inject(SparkService);
+	streamingService = inject(SparkStreamingService);
+	destroyRef = inject(DestroyRef);
+	lang = inject(SparkLanguageService);
+	extraActionsTemplate = input(null, ...ngDevMode ? [{ debugName: "extraActionsTemplate" }] : /* istanbul ignore next */ []);
+	showCustomActions = input(true, ...ngDevMode ? [{ debugName: "showCustomActions" }] : /* istanbul ignore next */ []);
+	rowRoute = input(null, ...ngDevMode ? [{ debugName: "rowRoute" }] : /* istanbul ignore next */ []);
+	rowClicked = output();
+	createClicked = output();
+	customActionExecuted = output();
+	colors = Color;
+	queryId = signal(null, ...ngDevMode ? [{ debugName: "queryId" }] : /* istanbul ignore next */ []);
+	errorMessage = signal(null, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	searchTerm = signal("", ...ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []);
+	grid = viewChild(SparkQueryGridComponent, ...ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []);
+	query = computed(() => this.grid()?.query() ?? null, ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	entityType = computed(() => this.grid()?.entityType() ?? null, ...ngDevMode ? [{ debugName: "entityType" }] : /* istanbul ignore next */ []);
+	customActions = computed(() => this.grid()?.customActions() ?? [], ...ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []);
+	canCreate = computed(() => this.grid()?.offersCreate() ?? false, ...ngDevMode ? [{ debugName: "canCreate" }] : /* istanbul ignore next */ []);
+	resultCount = computed(() => this.grid()?.resultCount() ?? null, ...ngDevMode ? [{ debugName: "resultCount" }] : /* istanbul ignore next */ []);
+	isVirtualScrolling = computed(() => this.grid()?.isVirtualScrolling() ?? false, ...ngDevMode ? [{ debugName: "isVirtualScrolling" }] : /* istanbul ignore next */ []);
+	gridError = computed(() => this.grid()?.errorMessage() ?? null, ...ngDevMode ? [{ debugName: "gridError" }] : /* istanbul ignore next */ []);
+	permissions = computed(() => this.grid()?.permissions() ?? null, ...ngDevMode ? [{ debugName: "permissions" }] : /* istanbul ignore next */ []);
+	listActions = orderSparkExtensions(inject(SPARK_QUERY_LIST_ACTIONS, { optional: true }), (a) => a.priority ?? 60);
+	deletedMode = signal("exclude", ...ngDevMode ? [{ debugName: "deletedMode" }] : /* istanbul ignore next */ []);
+	reloadToken = signal(0, ...ngDevMode ? [{ debugName: "reloadToken" }] : /* istanbul ignore next */ []);
+	listContext = computed(() => {
+		const query = this.query();
+		if (!query) return null;
+		return {
+			query,
+			entityType: this.entityType(),
+			permissions: this.permissions(),
+			deleted: this.deletedMode(),
+			setDeleted: (mode) => this.setDeleted(mode),
+			reload: () => this.reloadToken.update((n) => n + 1)
+		};
+	}, ...ngDevMode ? [{ debugName: "listContext" }] : /* istanbul ignore next */ []);
+	gridReloadToken = this.reloadToken.asReadonly();
+	setDeleted(mode) {
+		this.router.navigate([], {
+			relativeTo: this.route,
+			queryParams: { deleted: mode === "exclude" ? null : mode },
+			queryParamsHandling: "merge",
+			replaceUrl: true
+		});
+	}
+	customActionClass(action) {
+		const variant = action.variant?.toLowerCase();
+		switch (variant) {
+			case "danger":
+			case "warning":
+			case "primary":
+			case "secondary":
+			case "success": return `btn btn-${variant}`;
+			default: return "btn btn-outline-primary";
+		}
+	}
+	toolbarActions = computed(() => this.grid()?.toolbarActions() ?? [], ...ngDevMode ? [{ debugName: "toolbarActions" }] : /* istanbul ignore next */ []);
+	toolbarActionClass(action) {
+		return action.kind === "new" ? "btn btn-primary" : sparkActionClass(action.definition);
+	}
+	isToolbarActionEnabled(action) {
+		return this.grid()?.isToolbarActionEnabled(action) ?? false;
+	}
+	runToolbarAction(action) {
+		if (action.kind === "new") {
+			this.onCreate();
+			return;
+		}
+		this.grid()?.runToolbarAction(action);
+	}
+	isActionEnabled(action) {
+		return this.grid()?.isActionEnabled(action) ?? false;
+	}
+	isStreaming = signal(false, ...ngDevMode ? [{ debugName: "isStreaming" }] : /* istanbul ignore next */ []);
+	streamingSub = null;
+	streamColumns = signal([], ...ngDevMode ? [{ debugName: "streamColumns" }] : /* istanbul ignore next */ []);
+	allItems = signal([], ...ngDevMode ? [{ debugName: "allItems" }] : /* istanbul ignore next */ []);
+	streamItems = signal([], ...ngDevMode ? [{ debugName: "streamItems" }] : /* istanbul ignore next */ []);
+	gridData = computed(() => this.query()?.isStreamingQuery ? this.streamItems() : null, ...ngDevMode ? [{ debugName: "gridData" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.route.paramMap.pipe(takeUntilDestroyed()).subscribe((params) => {
+			this.onParamsChange(params).catch((e) => this.reportLoadFailure(e));
+		});
+		this.route.queryParamMap.pipe(takeUntilDestroyed()).subscribe((query) => this.deletedMode.set(parseSparkDeletedParam(query.get("deleted")) ?? "exclude"));
+		this.destroyRef.onDestroy(() => this.disconnectStreaming());
+		effect(() => {
+			const q = this.query();
+			if (q?.isStreamingQuery) this.connectStreaming(q.id);
+			else this.disconnectStreaming();
+		});
+		effect(() => {
+			this.searchTerm();
+			this.grid()?.settings();
+			this.allItems();
+			if (this.isStreaming()) this.applyFilter();
+		});
+	}
+	async onParamsChange(params) {
+		this.errorMessage.set(null);
+		this.queryId.set(null);
+		this.allItems.set([]);
+		this.streamItems.set([]);
+		this.streamColumns.set([]);
+		this.disconnectStreaming();
+		const queryId = params.get("queryId");
+		const typeParam = params.get("type");
+		if (queryId) {
+			this.queryId.set(queryId);
+			return;
+		}
+		if (!typeParam) return;
+		const [entityTypes, queries] = await Promise.all([this.sparkService.getEntityTypes(), this.sparkService.getQueries()]);
+		const entityType = entityTypes.find((t) => t.id === typeParam || t.alias === typeParam);
+		if (!entityType) {
+			this.reportLoadFailure({ status: 404 });
+			return;
+		}
+		const singularName = entityType.name;
+		const match = queries.find((q) => {
+			if (q.entityType === singularName) return true;
+			const sourceName = q.source.includes(".") ? q.source.substring(q.source.indexOf(".") + 1) : q.source;
+			return sourceName === singularName || sourceName === singularName + "s";
+		});
+		if (match) this.queryId.set(match.alias || match.id);
+		else this.reportLoadFailure({ status: 404 });
+	}
+	reportLoadFailure(err) {
+		this.errorMessage.set(err?.status === 404 ? this.lang.t("spark.query.unavailable") || "This list is not available." : err?.error?.error || err?.message || "An unexpected error occurred");
+	}
+	async onCustomAction(action) {
+		await this.grid()?.onCustomAction(action);
+	}
+	onCreate() {
+		this.createClicked.emit();
+		const et = this.entityType();
+		if (et) this.router.navigate([
+			"/po",
+			et.alias || et.id,
+			"new"
+		]);
+	}
+	clearSearch() {
+		this.searchTerm.set("");
+	}
+	connectStreaming(queryId) {
+		if (this.streamingSub) return;
+		this.isStreaming.set(true);
+		this.streamingSub = this.streamingService.connectToStreamingQuery(queryId).subscribe({
+			next: (message) => this.handleStreamingMessage(message),
+			error: (err) => {
+				this.errorMessage.set(err?.message || "Streaming connection failed");
+				this.isStreaming.set(false);
+			},
+			complete: () => this.isStreaming.set(false)
+		});
+	}
+	disconnectStreaming() {
+		if (this.streamingSub) {
+			this.streamingSub.unsubscribe();
+			this.streamingSub = null;
+		}
+		this.isStreaming.set(false);
+	}
+	handleStreamingMessage(message) {
+		switch (message.type) {
+			case "snapshot":
+				this.errorMessage.set(null);
+				this.streamColumns.set(message.columns);
+				this.allItems.set(message.data);
+				break;
+			case "patch":
+				if (message.updated.length > 0) this.allItems.update((items) => items.map((item) => {
+					const patch = message.updated.find((u) => u.id === item.id);
+					if (!patch) return item;
+					return {
+						...item,
+						values: item.values.map((v) => v.key in patch.values ? {
+							...v,
+							value: patch.values[v.key]
+						} : v)
+					};
+				}));
+				break;
+			case "error": this.errorMessage.set(message.message);
+		}
+	}
+	applyFilter() {
+		let items = this.allItems();
+		const term = this.searchTerm().toLowerCase();
+		if (term) items = items.filter((item) => item.values.some((v) => String(v.value ?? "").toLowerCase().includes(term)));
+		const sortCols = this.grid()?.settings().sortColumns ?? [];
+		if (sortCols.length > 0) items = [...items].sort((a, b) => {
+			for (const col of sortCols) {
+				const aVal = a.values.find((v) => v.key === col.property)?.value ?? "";
+				const bVal = b.values.find((v) => v.key === col.property)?.value ?? "";
+				const cmp = String(aVal).localeCompare(String(bVal));
+				if (cmp !== 0) return col.direction === "descending" ? -cmp : cmp;
+			}
+			return 0;
+		});
+		this.streamItems.set(items);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SparkQueryListComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SparkQueryListComponent,
+		isStandalone: true,
+		selector: "spark-query-list",
+		inputs: {
+			extraActionsTemplate: {
+				classPropertyName: "extraActionsTemplate",
+				publicName: "extraActionsTemplate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showCustomActions: {
+				classPropertyName: "showCustomActions",
+				publicName: "showCustomActions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rowRoute: {
+				classPropertyName: "rowRoute",
+				publicName: "rowRoute",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			rowClicked: "rowClicked",
+			createClicked: "createClicked",
+			customActionExecuted: "customActionExecuted"
+		},
+		host: { properties: { "class.virtual-scrolling": "isVirtualScrolling()" } },
+		viewQueries: [{
+			propertyName: "grid",
+			first: true,
+			predicate: SparkQueryGridComponent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"d-flex flex-column h-100\">\n  <div class=\"spark-actionbar py-2 flex-shrink-0\" [class.spark-actionbar-wide]=\"isVirtualScrolling()\">\n    <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n      <!-- The grid's toolbar model (#460, M15): New, Delete and the custom actions — the list the\n           sub-query card renders too. Disabled, not hidden: hiding makes the affordance\n           undiscoverable and reflows the priority nav on every selection change. The server\n           enforces the same rules. -->\n      @for (action of toolbarActions(); track action.name) {\n        @if (action.kind !== 'custom' || showCustomActions()) {\n          <button *bsPriorityNavItem=\"action.priority\" type=\"button\" [class]=\"toolbarActionClass(action)\"\n                  [attr.data-action]=\"action.name\"\n                  [disabled]=\"!isToolbarActionEnabled(action)\" (click)=\"runToolbarAction(action)\">\n            @if (action.kind === 'new') {\n              <spark-icon name=\"plus-lg\" /> {{ 'common.new' | t }}\n            } @else {\n              @if (action.definition.icon && action.kind === 'delete') {\n                <spark-icon [name]=\"action.definition.icon\" />\n              }\n              {{ action.definition.displayName | resolveTranslation }}\n            }\n          </button>\n        }\n      }\n      @if (extraActionsTemplate(); as extraActionsTpl) {\n        <ng-container *bsPriorityNavItem=\"50\">\n          <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n        </ng-container>\n      }\n      <!-- Add-on actions (SPARK_QUERY_LIST_ACTIONS), e.g. the soft-delete Deleted toggle. -->\n      @if (listContext(); as ctx) {\n        @for (action of listActions; track action.id) {\n          <ng-container *bsPriorityNavItem=\"action.priority ?? 60\">\n            <ng-container *ngComponentOutlet=\"action.component; inputs: { context: ctx }\" />\n          </ng-container>\n        }\n      }\n    </bs-priority-nav>\n  </div>\n\n  <h2 class=\"mb-4 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n    {{ (query()?.description | resolveTranslation) || query()?.name || ('common.loading' | t) }}\n    @if (isStreaming()) {\n      <bs-badge [type]=\"colors.success\" class=\"ms-2 align-middle spark-live-badge\">LIVE</bs-badge>\n    }\n    @if (deletedMode() === 'only') {\n      <bs-badge [type]=\"colors.secondary\" class=\"ms-2 align-middle spark-deleted-badge\">{{ 'softDelete.deleted' | t }}</bs-badge>\n    }\n  </h2>\n\n  @if (errorMessage(); as err) {\n    <!-- The route could not be resolved to a query at all. A failure INSIDE the grid renders in\n         the grid; this is the one it cannot report, because it never got a query id. -->\n    <bs-alert [type]=\"colors.danger\" class=\"m-3 d-block\">\n      {{ err }}\n    </bs-alert>\n  } @else if (queryId(); as qId) {\n    <div class=\"flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"12\">\n              <!-- The same box as the sub-query card's header (#460 M15): debounce, clear button. -->\n              <spark-search-box [(term)]=\"searchTerm\" />\n            </div>\n            <!-- Its own full-width row rather than a column beside the box: the count is\n                 occasional, and reserving 8 columns for it shrank the search permanently. The\n                 @if moved out of the column so nothing reserves vertical space when absent. -->\n            @if (searchTerm() && resultCount() !== null) {\n              <div [md]=\"12\" class=\"text-end mt-1\">\n                <span class=\"text-muted\">\n                  {{ resultCount() }} {{ resultCount() === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              </div>\n            }\n          </div>\n        </bs-grid>\n    </div>\n\n    <!--\n      One grid, both transports. `data` is null for a normal query, so the grid fetches and pages\n      server-side; for a streaming query this page owns the socket and hands the filtered snapshot\n      in. This used to be two near-identical <bs-datatable> blocks with a shared row template.\n    -->\n    <spark-query-grid class=\"flex-grow-1\"\n        [queryId]=\"qId\"\n        [data]=\"gridData()\"\n        [columns]=\"gridData() ? streamColumns() : null\"\n        [search]=\"searchTerm()\"\n        [deleted]=\"deletedMode()\"\n        [reloadToken]=\"gridReloadToken()\"\n        [rowRoute]=\"rowRoute()\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n",
+		styles: [".spark-actionbar{--_bleed-block: var(--spark-content-inset-block, 0px);--_bleed-inline: var(--spark-content-inset-inline, 0px);--_gutter: var(--spark-actionbar-gutter, 1rem);position:sticky;top:calc(-1 * var(--_bleed-block));z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem;margin-inline:calc(-1 * var(--_bleed-inline));padding-inline:calc(var(--_bleed-inline) + var(--_gutter))}.spark-actionbar .btn{border-radius:0}.spark-actionbar-wide{--spark-actionbar-gutter: 1.5rem}:host{display:flex;flex-direction:column;flex:1;min-height:0}:host.virtual-scrolling{margin:0 calc(-1 * var(--spark-main-padding, 1.5rem)) calc(-1 * var(--spark-main-padding, 1.5rem));--spark-content-inset-inline: 0px}:host.virtual-scrolling spark-query-grid{display:flex;flex-direction:column;min-height:0}:host.virtual-scrolling ::ng-deep bs-datatable{display:flex;flex-direction:column;min-height:0;--mp-datatable-virtual-max-height: 100%}:host.virtual-scrolling ::ng-deep bs-datatable mp-datatable{flex:1 1 auto;min-height:0}tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}.spark-live-badge{font-size:.6em}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: BsBadgeComponent,
+				selector: "bs-badge",
+				inputs: [
+					"type",
+					"unit",
+					"decorative"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i1.NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "directive",
+				type: i1.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: BsAlertComponent,
+				selector: "bs-alert",
+				inputs: [
+					"type",
+					"announce",
+					"isVisible"
+				],
+				outputs: ["isVisibleChange", "afterOpenedOrClosed"]
+			},
+			{
+				kind: "component",
+				type: BsGridComponent,
+				selector: "bs-grid",
+				inputs: ["stopFullWidthAt"]
+			},
+			{
+				kind: "directive",
+				type: BsGridRowDirective,
+				selector: "[bsRow]"
+			},
+			{
+				kind: "directive",
+				type: BsGridColumnDirective,
+				selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]",
+				inputs: [
+					"xxs",
+					"xs",
+					"sm",
+					"md",
+					"lg",
+					"xl",
+					"xxl"
+				]
+			},
+			{
+				kind: "component",
+				type: BsPriorityNavComponent,
+				selector: "bs-priority-nav",
+				inputs: [
+					"moreLabel",
+					"moreLabelTemplate",
+					"collapseAt",
+					"overflowFrom",
+					"hideEmptyMore",
+					"ariaLabel"
+				],
+				outputs: ["overflowChange"]
+			},
+			{
+				kind: "directive",
+				type: BsPriorityNavItemDirective,
+				selector: "[bsPriorityNavItem]",
+				inputs: ["bsPriorityNavItem", "bsPriorityNavItemHideBelow"]
+			},
+			{
+				kind: "component",
+				type: BsSpinnerComponent,
+				selector: "bs-spinner",
+				inputs: ["type", "color"]
+			},
+			{
+				kind: "component",
+				type: SparkIconComponent,
+				selector: "spark-icon",
+				inputs: ["name"]
+			},
+			{
+				kind: "component",
+				type: SparkQueryGridComponent,
+				selector: "spark-query-grid",
+				inputs: [
+					"queryId",
+					"parentId",
+					"parentType",
+					"data",
+					"search",
+					"columns",
+					"reloadToken",
+					"deleted",
+					"parentDeleted",
+					"settings",
+					"selection",
+					"rowRoute",
+					"selectionModeSetting"
+				],
+				outputs: [
+					"settingsChange",
+					"selectionChange",
+					"error",
+					"rowClicked",
+					"customActionExecuted",
+					"createClicked"
+				]
+			},
+			{
+				kind: "component",
+				type: SparkSearchBoxComponent,
+				selector: "spark-search-box",
+				inputs: [
+					"term",
+					"size",
+					"debounce"
+				],
+				outputs: ["termChange"]
+			},
+			{
+				kind: "pipe",
+				type: ResolveTranslationPipe,
+				name: "resolveTranslation"
+			},
+			{
+				kind: "pipe",
+				type: TranslateKeyPipe,
+				name: "t"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SparkQueryListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-query-list",
+			imports: [
+				BsBadgeComponent,
+				CommonModule,
+				NgTemplateOutlet,
+				NgComponentOutlet,
+				BsAlertComponent,
+				BsGridComponent,
+				BsGridRowDirective,
+				BsGridColumnDirective,
+				BsPriorityNavComponent,
+				BsPriorityNavItemDirective,
+				BsSpinnerComponent,
+				SparkIconComponent,
+				SparkQueryGridComponent,
+				SparkSearchBoxComponent,
+				ResolveTranslationPipe,
+				TranslateKeyPipe
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[class.virtual-scrolling]": "isVirtualScrolling()" },
+			template: "<div class=\"d-flex flex-column h-100\">\n  <div class=\"spark-actionbar py-2 flex-shrink-0\" [class.spark-actionbar-wide]=\"isVirtualScrolling()\">\n    <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n      <!-- The grid's toolbar model (#460, M15): New, Delete and the custom actions — the list the\n           sub-query card renders too. Disabled, not hidden: hiding makes the affordance\n           undiscoverable and reflows the priority nav on every selection change. The server\n           enforces the same rules. -->\n      @for (action of toolbarActions(); track action.name) {\n        @if (action.kind !== 'custom' || showCustomActions()) {\n          <button *bsPriorityNavItem=\"action.priority\" type=\"button\" [class]=\"toolbarActionClass(action)\"\n                  [attr.data-action]=\"action.name\"\n                  [disabled]=\"!isToolbarActionEnabled(action)\" (click)=\"runToolbarAction(action)\">\n            @if (action.kind === 'new') {\n              <spark-icon name=\"plus-lg\" /> {{ 'common.new' | t }}\n            } @else {\n              @if (action.definition.icon && action.kind === 'delete') {\n                <spark-icon [name]=\"action.definition.icon\" />\n              }\n              {{ action.definition.displayName | resolveTranslation }}\n            }\n          </button>\n        }\n      }\n      @if (extraActionsTemplate(); as extraActionsTpl) {\n        <ng-container *bsPriorityNavItem=\"50\">\n          <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n        </ng-container>\n      }\n      <!-- Add-on actions (SPARK_QUERY_LIST_ACTIONS), e.g. the soft-delete Deleted toggle. -->\n      @if (listContext(); as ctx) {\n        @for (action of listActions; track action.id) {\n          <ng-container *bsPriorityNavItem=\"action.priority ?? 60\">\n            <ng-container *ngComponentOutlet=\"action.component; inputs: { context: ctx }\" />\n          </ng-container>\n        }\n      }\n    </bs-priority-nav>\n  </div>\n\n  <h2 class=\"mb-4 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n    {{ (query()?.description | resolveTranslation) || query()?.name || ('common.loading' | t) }}\n    @if (isStreaming()) {\n      <bs-badge [type]=\"colors.success\" class=\"ms-2 align-middle spark-live-badge\">LIVE</bs-badge>\n    }\n    @if (deletedMode() === 'only') {\n      <bs-badge [type]=\"colors.secondary\" class=\"ms-2 align-middle spark-deleted-badge\">{{ 'softDelete.deleted' | t }}</bs-badge>\n    }\n  </h2>\n\n  @if (errorMessage(); as err) {\n    <!-- The route could not be resolved to a query at all. A failure INSIDE the grid renders in\n         the grid; this is the one it cannot report, because it never got a query id. -->\n    <bs-alert [type]=\"colors.danger\" class=\"m-3 d-block\">\n      {{ err }}\n    </bs-alert>\n  } @else if (queryId(); as qId) {\n    <div class=\"flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"12\">\n              <!-- The same box as the sub-query card's header (#460 M15): debounce, clear button. -->\n              <spark-search-box [(term)]=\"searchTerm\" />\n            </div>\n            <!-- Its own full-width row rather than a column beside the box: the count is\n                 occasional, and reserving 8 columns for it shrank the search permanently. The\n                 @if moved out of the column so nothing reserves vertical space when absent. -->\n            @if (searchTerm() && resultCount() !== null) {\n              <div [md]=\"12\" class=\"text-end mt-1\">\n                <span class=\"text-muted\">\n                  {{ resultCount() }} {{ resultCount() === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              </div>\n            }\n          </div>\n        </bs-grid>\n    </div>\n\n    <!--\n      One grid, both transports. `data` is null for a normal query, so the grid fetches and pages\n      server-side; for a streaming query this page owns the socket and hands the filtered snapshot\n      in. This used to be two near-identical <bs-datatable> blocks with a shared row template.\n    -->\n    <spark-query-grid class=\"flex-grow-1\"\n        [queryId]=\"qId\"\n        [data]=\"gridData()\"\n        [columns]=\"gridData() ? streamColumns() : null\"\n        [search]=\"searchTerm()\"\n        [deleted]=\"deletedMode()\"\n        [reloadToken]=\"gridReloadToken()\"\n        [rowRoute]=\"rowRoute()\"\n        (rowClicked)=\"rowClicked.emit($event)\"\n        (customActionExecuted)=\"customActionExecuted.emit($event)\" />\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n",
+			styles: [".spark-actionbar{--_bleed-block: var(--spark-content-inset-block, 0px);--_bleed-inline: var(--spark-content-inset-inline, 0px);--_gutter: var(--spark-actionbar-gutter, 1rem);position:sticky;top:calc(-1 * var(--_bleed-block));z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem;margin-inline:calc(-1 * var(--_bleed-inline));padding-inline:calc(var(--_bleed-inline) + var(--_gutter))}.spark-actionbar .btn{border-radius:0}.spark-actionbar-wide{--spark-actionbar-gutter: 1.5rem}:host{display:flex;flex-direction:column;flex:1;min-height:0}:host.virtual-scrolling{margin:0 calc(-1 * var(--spark-main-padding, 1.5rem)) calc(-1 * var(--spark-main-padding, 1.5rem));--spark-content-inset-inline: 0px}:host.virtual-scrolling spark-query-grid{display:flex;flex-direction:column;min-height:0}:host.virtual-scrolling ::ng-deep bs-datatable{display:flex;flex-direction:column;min-height:0;--mp-datatable-virtual-max-height: 100%}:host.virtual-scrolling ::ng-deep bs-datatable mp-datatable{flex:1 1 auto;min-height:0}tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}.spark-live-badge{font-size:.6em}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		extraActionsTemplate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "extraActionsTemplate",
+				required: false
+			}]
+		}],
+		showCustomActions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCustomActions",
+				required: false
+			}]
+		}],
+		rowRoute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowRoute",
+				required: false
+			}]
+		}],
+		rowClicked: [{
+			type: i0.Output,
+			args: ["rowClicked"]
+		}],
+		createClicked: [{
+			type: i0.Output,
+			args: ["createClicked"]
+		}],
+		customActionExecuted: [{
+			type: i0.Output,
+			args: ["customActionExecuted"]
+		}],
+		grid: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => SparkQueryGridComponent), { isSignal: true }]
+		}]
+	}
+});
 export { SparkQueryListComponent };
-//# sourceMappingURL=mintplayer-ng-spark-query-list.mjs.map
+
+//# sourceMappingURL=mintplayer-ng-spark-query-list.mjs.map