@mintplayer/ng-spark 22.3.0 → 22.4.0

package/fesm2022/mintplayer-ng-spark-po-detail.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, input, signal, output, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, input, output, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/common';
-import { CommonModule, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import { CommonModule, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import * as i2 from '@angular/router';
-import { RouterModule, ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { Color } from '@mintplayer/ng-bootstrap';
 import { BsAlertComponent } from '@mintplayer/ng-bootstrap/alert';
 import { BsCardComponent, BsCardHeaderComponent } from '@mintplayer/ng-bootstrap/card';
@@ -16,303 +16,11 @@ import { BsTabControlComponent, BsTabPageComponent, BsTabPageHeaderDirective } f
 import { BsSpinnerComponent } from '@mintplayer/ng-bootstrap/spinner';
 import { SparkService, SparkLanguageService } from '@mintplayer/ng-spark/services';
 import { SparkQueryRefreshService } from '@mintplayer/ng-spark/client-operations';
-import { ResolveTranslationPipe, AttributeValuePipe, ReferenceChipsPipe, TranslateKeyPipe, RawAttributeValuePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, ArrayValuePipe, ReferenceLinkRoutePipe } from '@mintplayer/ng-spark/pipes';
+import { ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe, RawAttributeValuePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, ArrayValuePipe, ReferenceLinkRoutePipe, ReferenceChipsPipe } from '@mintplayer/ng-spark/pipes';
 import { SparkIconComponent } from '@mintplayer/ng-spark/icon';
-import { DatatableSettings, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective } from '@mintplayer/ng-bootstrap/datatable';
-import { SparkGridRenderers, SPARK_GRID_PAGE_SIZES, isVirtualScrollingQuery, visibleGridAttributes, initialGridSettings } from '@mintplayer/ng-spark/grid';
-import { selectionModeFor, parseSelectionRule, filterQueryActions, hasShowedOnFlag, ShowedOn } from '@mintplayer/ng-spark/models';
+import { SparkQueryCardComponent, SparkGridCellComponent } from '@mintplayer/ng-spark/grid';
 import { SPARK_ATTRIBUTE_RENDERERS, rendererValue, withDeclaredInputs } from '@mintplayer/ng-spark/renderers';
-
-class SparkSubQueryComponent {
-    sparkService = inject(SparkService);
-    gridRenderers = inject(SparkGridRenderers);
-    lang = inject(SparkLanguageService);
-    queryId = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "queryId" }] : /* istanbul ignore next */ []));
-    /**
-     * The parent persistent object this query is scoped to, when it has one.
-     *
-     * Optional, because not every query is a detail of something: a page can host
-     * a grid that stands on its own — "my accounts", a dashboard list — and the
-     * server already treats an absent parent as "no parent" rather than as an
-     * error. Leaving these required made that shape impossible to express: the
-     * component simply never loaded, with no request, no error and no log.
-     *
-     * Pass both or neither. One without the other is ignored, matching
-     * `SparkService.executeQuery`, which omits either param when it is falsy, and
-     * the execute endpoint, which resolves a parent only when both are present.
-     */
-    parentId = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "parentId" }] : /* istanbul ignore next */ []));
-    parentType = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "parentType" }] : /* istanbul ignore next */ []));
-    /**
-     * Change this to re-run the query. Any value works; only its identity matters.
-     *
-     * A declarative token rather than only a `reload()` method, because calling a
-     * method means holding a component handle, and hosts wrap this grid in `@if`,
-     * where a `viewChild` is intermittently undefined. Nothing else in ng-spark
-     * uses `viewChild` either — the house idiom is to re-seed a signal.
-     *
-     * This drives the CHEAP refresh (see {@link reload}). It deliberately does not
-     * feed the main effect: re-running `loadData` would re-resolve the query, the
-     * entity types, the permissions and the lookups, and reset the user's page and
-     * sort on every button press.
-     */
-    reloadToken = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "reloadToken" }] : /* istanbul ignore next */ []));
-    /**
-     * Render without the surrounding card, for a host that owns its own chrome — a tab
-     * body, a modal, a dashboard tile.
-     *
-     * This is the escape hatch for a genuinely chromeless embed. It only serves a host
-     * that instantiated this component by hand — where the component is auto-rendered
-     * from `EntityTypeDefinition.Queries` there is no host to pass it.
-     */
-    showCard = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showCard" }] : /* istanbul ignore next */ []));
-    /**
-     * Replace the header for one hand-instantiated usage.
-     *
-     * A `TemplateRef` rather than `<ng-content>` deliberately: it matches
-     * `spark-po-detail`'s `extraActionsTemplate`/`extraContentTemplate`, and unlike
-     * projection it can be forwarded by a host that is itself several layers up.
-     *
-     * Precedence is headerTemplate -> caption + query actions.
-     */
-    headerTemplate = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
-    colors = Color;
-    query = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
-    entityType = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "entityType" }] : /* istanbul ignore next */ []));
-    allEntityTypes = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "allEntityTypes" }] : /* istanbul ignore next */ []));
-    /**
-     * Why the component renders its own failure instead of only reporting one.
-     *
-     * `SparkService` is a bare `firstValueFrom` passthrough with no interceptor, so
-     * every failure surfaces here and nowhere else. A host embedding this grid cannot
-     * surface what it never sees, and the default has to be visible with no host
-     * cooperation — hence a rendered alert, not just an output.
-     *
-     * A 404 is deliberately vague. `Endpoints/Queries/Get.cs` answers 404 for BOTH
-     * "no such query" and "you may not see it", with byte-identical bodies, so that
-     * existence is not disclosed (security audit M-3). This component therefore
-     * genuinely cannot tell the two apart, and any message claiming otherwise would
-     * either leak or mislead.
-     */
-    errorMessage = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
-    /**
-     * Actions the query declares, rendered in this component's own header.
-     *
-     * This is what makes a query's chrome work with no host: a sub-query is rendered
-     * automatically from `EntityTypeDefinition.Queries`, so there is nobody to project
-     * a toolbar in. The query says what belongs in its header, and it follows the query
-     * wherever it is rendered.
-     */
-    customActions = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []));
-    /** Emitted whenever a load or a page fetch fails, for a host in bespoke chrome. */
-    error = output();
-    lookupReferenceOptions = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : /* istanbul ignore next */ []));
-    loading = signal(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
-    canRead = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "canRead" }] : /* istanbul ignore next */ []));
-    settings = signal(new DatatableSettings({
-        perPage: { values: SPARK_GRID_PAGE_SIZES, selected: SPARK_GRID_PAGE_SIZES[0] },
-        page: { values: [1], selected: 1 },
-        sortColumns: []
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
-    fetchFn = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fetchFn" }] : /* istanbul ignore next */ []));
-    /**
-     * Rows the user has ticked. Lives here rather than in the datatable so the action bar can
-     * read it, and MUST be cleared whenever the source changes — otherwise route A's selection
-     * is POSTed as ids of route B's type.
-     */
-    selection = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-    queryRefresh = inject(SparkQueryRefreshService);
-    /** 'none' unless an action is selection-gated, so unaffected grids gain no checkbox column. */
-    selectionMode = computed(() => selectionModeFor(this.customActions()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
-    /** Whether an action's selection rule is satisfied right now. The server checks it again. */
-    isActionEnabled(action) {
-        return parseSelectionRule(action.selectionRule)(this.selection().length);
-    }
-    isVirtualScrolling = computed(() => isVirtualScrollingQuery(this.query()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isVirtualScrolling" }] : /* istanbul ignore next */ []));
-    visibleAttributes = computed(() => visibleGridAttributes(this.entityType()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visibleAttributes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            const qId = this.queryId();
-            const pId = this.parentId();
-            const pType = this.parentType();
-            // Only the query id is required. Requiring a parent here is what made a
-            // standalone grid silently render nothing.
-            if (qId) {
-                this.loadData(qId, pId, pType);
-            }
-            else {
-                // No query id at all. `loading` starts true, so without this the component
-                // would spin forever instead of saying anything.
-                this.loading.set(false);
-            }
-        });
-        // Separate effect, so the token drives the cheap refresh and never the full
-        // metadata reload. `first` skips the initial run: the effect above has already
-        // fetched, and reacting to the token's starting value would double-fetch on mount.
-        let first = true;
-        effect(() => {
-            // Both the host's token and the server's refreshQuery drive the same cheap refresh.
-            this.reloadToken();
-            this.queryRefresh.tokenFor(this.queryId());
-            if (first) {
-                first = false;
-                return;
-            }
-            untracked(() => this.reload());
-        });
-    }
-    /**
-     * Re-run the query, keeping the current page, sort and scroll position.
-     *
-     * Data-level on purpose: it re-seeds the fetch closure and nothing else, mirroring
-     * `SparkQueryListComponent.reload()`. Use it after something mutates server-side
-     * state the query reads from. For a definition change — new columns, a renamed
-     * query — the inputs themselves must change; that is the expensive path.
-     */
-    async onCustomAction(action) {
-        if (action.confirmationMessageKey) {
-            const message = this.lang.t(action.confirmationMessageKey) || 'Are you sure?';
-            if (!confirm(message))
-                return;
-        }
-        try {
-            await this.sparkService.executeCustomAction(this.entityType().id, action.name, undefined, this.selection());
-            if (action.refreshOnCompleted)
-                this.reload();
-        }
-        catch (e) {
-            const err = e;
-            this.errorMessage.set(err.error?.error || err.message || this.lang.t('common.actionFailed') || 'Action failed');
-        }
-    }
-    reportError(err) {
-        this.errorMessage.set(this.describe(err));
-        this.error.emit(err);
-    }
-    /**
-     * A 404 is deliberately generic.
-     *
-     * `Endpoints/Queries/Get.cs` answers 404 with byte-identical bodies for "no such
-     * query" and "you may not see it", so existence is not disclosed (audit M-3). The
-     * component therefore cannot tell them apart, and both "Not found" and "Access
-     * denied" would be a guess — one of them leaking, the other misleading.
-     */
-    describe(err) {
-        if (err?.status === 404) {
-            return this.lang.t('spark.query.unavailable') || 'This list is not available.';
-        }
-        return err?.error?.error || err?.message
-            || this.lang.t('common.unexpectedError') || 'An unexpected error occurred';
-    }
-    reload() {
-        const q = this.query();
-        if (q)
-            this.fetchFn.set(this.makeFetch(q, this.parentId(), this.parentType()));
-    }
-    async loadData(queryId, parentId, parentType) {
-        this.loading.set(true);
-        this.errorMessage.set(null);
-        this.fetchFn.set(null);
-        // Reset everything derived from the previous query, not just the fetch. Leaving
-        // `entityType`/`canRead` behind let a failed reload build a row link out of the
-        // PREVIOUS type and the previous permission.
-        this.query.set(null);
-        this.entityType.set(null);
-        this.canRead.set(false);
-        this.customActions.set([]);
-        this.selection.set([]);
-        try {
-            const [resolvedQuery, entityTypes] = await Promise.all([
-                this.sparkService.getQuery(queryId),
-                this.sparkService.getEntityTypes()
-            ]);
-            this.query.set(resolvedQuery);
-            this.allEntityTypes.set(entityTypes);
-            // Resolve entity type from query's entityType field
-            if (resolvedQuery.entityType) {
-                const et = entityTypes.find(t => t.name === resolvedQuery.entityType || t.alias === resolvedQuery.entityType?.toLowerCase());
-                this.entityType.set(et || null);
-                if (et) {
-                    const [permissions, actions] = await Promise.all([
-                        this.sparkService.getPermissions(et.id),
-                        this.sparkService.getCustomActions(et.id),
-                    ]);
-                    this.canRead.set(permissions.canRead);
-                    this.customActions.set(filterQueryActions(actions));
-                }
-            }
-            this.settings.set(initialGridSettings(resolvedQuery));
-            // The datatable drives paging/sorting via [(settings)] and calls fetchFn
-            // per page. Virtual scrolling is just the [virtualScroll] template flag.
-            this.fetchFn.set(this.makeFetch(resolvedQuery, parentId, parentType));
-            this.loadLookupReferenceOptions();
-        }
-        catch (e) {
-            this.fetchFn.set(null);
-            this.reportError(e);
-        }
-        finally {
-            this.loading.set(false);
-        }
-    }
-    makeFetch(query, parentId, parentType) {
-        return (req) => this.sparkService.executeQuery(query.id, {
-            sortColumns: req.sortColumns,
-            skip: (req.page - 1) * req.perPage,
-            take: req.perPage,
-            parentId, parentType,
-        }).then(r => {
-            this.errorMessage.set(null);
-            return {
-                data: r.data,
-                totalRecords: r.totalRecords,
-                totalPages: Math.ceil(r.totalRecords / req.perPage) || 1,
-                perPage: req.perPage,
-                page: req.page,
-            };
-        }).catch((e) => {
-            // Report before returning the empty page, or a failed fetch is indistinguishable
-            // from a query that legitimately has no rows.
-            this.reportError(e);
-            return { data: [], totalRecords: 0, totalPages: 1, perPage: req.perPage, page: req.page };
-        });
-    }
-    async loadLookupReferenceOptions() {
-        this.lookupReferenceOptions.set(await this.gridRenderers.loadLookupOptions(this.visibleAttributes()));
-    }
-    getColumnRendererComponent(attr) {
-        return this.gridRenderers.columnComponentFor(attr);
-    }
-    getColumnRendererInputs(component, item, attr) {
-        return this.gridRenderers.columnInputsFor(component, item, attr);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SparkSubQueryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SparkSubQueryComponent, isStandalone: true, selector: "spark-sub-query", 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 }, showCard: { classPropertyName: "showCard", publicName: "showCard", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { error: "error" }, 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\n  `query()` is only set after loadData's awaits resolve. Three separate bugs fell\n  out of that one line: the spinner was unreachable on a first load (it rendered\n  inside the gate, while `loading` starts true and `query` starts null), a\n  first-load failure rendered ZERO DOM \u2014 no card, no message, nothing to see or\n  report \u2014 and a failed RELOAD left the previous query's card on screen.\n\n  So: `loading` is checked first and outside any dependency on `query`, and the\n  final `@else` always renders something. Do not fold these back into one gate,\n  and do not move the spinner inside the `query()` branch.\n-->\n<ng-template #content>\n  @if (loading()) {\n    <div class=\"text-center p-3\">\n      <bs-spinner />\n    </div>\n  } @else if (query(); as q) {\n    @if (headerTemplate(); as headerTpl) {\n      <bs-card-header>\n        <ng-container *ngTemplateOutlet=\"headerTpl; context: { $implicit: q }\"></ng-container>\n      </bs-card-header>\n    } @else {\n      <bs-card-header>\n        @if (customActions().length) {\n          <!-- Caption and actions share the header. The nav renders only when the query\n               declares actions, so a query without them is pixel-identical to before. -->\n          <div class=\"d-flex align-items-center gap-2\">\n            <span class=\"me-auto\">{{ (q.description | resolveTranslation) || q.name }}</span>\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]=\"!isActionEnabled(action)\" (click)=\"onCustomAction(action)\">\n                  {{ action.displayName | resolveTranslation }}\n                </button>\n              }\n            </bs-priority-nav>\n          </div>\n        } @else {\n          {{ (q.description | resolveTranslation) || q.name }}\n        }\n      </bs-card-header>\n    }\n    <div class=\"p-3\">\n      <!-- A page-fetch failure while the grid is already resolved. Without this the\n           catch returns an empty page and a failed query is indistinguishable from\n           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      <bs-datatable\n          [selectionMode]=\"selectionMode()\"\n          [(selection)]=\"selection\"\n          [virtualScroll]=\"isVirtualScrolling()\"\n          [itemSize]=\"40\"\n          [isResponsive]=\"isVirtualScrolling()\"\n          [fetch]=\"fetchFn()\"\n          [(settings)]=\"settings\">\n        @for (attr of visibleAttributes(); track attr.id) {\n          <div *bsDatatableColumn=\"attr.name; sortable: true\">\n            {{ (attr.label | resolveTranslation) || attr.name }}\n          </div>\n        }\n\n        <ng-container *bsRowTemplate=\"let item\">\n          @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\n                     this are routinely misread:\n\n                     1. `cellContent` is projected INSIDE the anchor, so a custom\n                        `renderer` does NOT suppress this link \u2014 a renderer that emits\n                        its own <a> produces nested anchors (invalid HTML) rather than\n                        replacing this one.\n                     2. `canRead()` is the whole gate, and it is the rights model:\n                        `Query` without `Read` lists the rows and withholds the link.\n                        Withhold `Read` for a query whose rows no detail page can load\n                        \u2014 a Custom.* query that fabricates rows in memory, say. -->\n                @if (first && canRead()) {\n                  <a [routerLink]=\"['/po', entityType()!.alias || entityType()!.id, row.id]\">\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    </div>\n  } @else {\n    <!-- The query could not be resolved. Rendering something keeps the host's layout\n         intact and, crucially, makes the failure visible: this branch used to render\n         nothing at all. -->\n    <div class=\"p-3\">\n      <bs-alert [type]=\"colors.danger\" class=\"mb-0\">\n        {{ errorMessage() || ('spark.query.unavailable' | t) }}\n      </bs-alert>\n    </div>\n  }\n</ng-template>\n\n<!--\n  The card is the component's, unless the host says otherwise. `bs-card-header` is\n  styled by a GLOBAL `.card-header` rule rather than `::slotted`, so the header keeps\n  its appearance with no `bs-card` ancestor \u2014 which is what makes the bare branch a\n  wrapper change only, with no duplicated content.\n-->\n@if (showCard()) {\n  <bs-card style=\"display: block; margin: 1rem 0;\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </bs-card>\n} @else {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #cellContent let-item let-attr=\"attr\">\n  @if (getColumnRendererComponent(attr); as rendererType) {\n    <ng-container *ngComponentOutlet=\"rendererType; inputs: getColumnRendererInputs(rendererType, item, attr)\"></ng-container>\n  } @else if (attr.dataType === 'boolean') {\n    @let boolVal = (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes());\n    <!-- [indeterminate] matters: without it a null boolean renders as an unchecked\n         box, which reads as an explicit `false`. spark-query-list has always bound\n         it; this component had drifted. -->\n    <input type=\"checkbox\"\n      [checked]=\"boolVal === true\"\n      [indeterminate]=\"boolVal === null || boolVal === undefined\"\n      disabled\n      onclick=\"return false;\">\n  } @else if (attr.dataType === 'color') {\n    @let colorVal = (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes());\n    @if (colorVal) {\n      <span class=\"d-inline-block align-middle border rounded\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n    }\n  } @else if (attr.dataType === 'Reference' && attr.isArray) {\n    <span class=\"d-inline-flex flex-wrap gap-1\">\n      @for (chip of (attr.name | referenceChips:item); track chip.id) {\n        <span class=\"badge rounded-pill border bg-body-secondary text-body px-3 py-2\">{{ chip.label }}</span>\n      }\n    </span>\n  } @else {\n    {{ (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) }}\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: 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: BsCardComponent, selector: "bs-card", inputs: ["color", "outline"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["color", "navStyle"] }, { 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: 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: "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 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SparkSubQueryComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spark-sub-query', imports: [CommonModule, NgComponentOutlet, RouterModule, BsAlertComponent, BsCardComponent, BsCardHeaderComponent, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective, BsPriorityNavComponent, BsPriorityNavItemDirective, BsSpinnerComponent, 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\n  `query()` is only set after loadData's awaits resolve. Three separate bugs fell\n  out of that one line: the spinner was unreachable on a first load (it rendered\n  inside the gate, while `loading` starts true and `query` starts null), a\n  first-load failure rendered ZERO DOM \u2014 no card, no message, nothing to see or\n  report \u2014 and a failed RELOAD left the previous query's card on screen.\n\n  So: `loading` is checked first and outside any dependency on `query`, and the\n  final `@else` always renders something. Do not fold these back into one gate,\n  and do not move the spinner inside the `query()` branch.\n-->\n<ng-template #content>\n  @if (loading()) {\n    <div class=\"text-center p-3\">\n      <bs-spinner />\n    </div>\n  } @else if (query(); as q) {\n    @if (headerTemplate(); as headerTpl) {\n      <bs-card-header>\n        <ng-container *ngTemplateOutlet=\"headerTpl; context: { $implicit: q }\"></ng-container>\n      </bs-card-header>\n    } @else {\n      <bs-card-header>\n        @if (customActions().length) {\n          <!-- Caption and actions share the header. The nav renders only when the query\n               declares actions, so a query without them is pixel-identical to before. -->\n          <div class=\"d-flex align-items-center gap-2\">\n            <span class=\"me-auto\">{{ (q.description | resolveTranslation) || q.name }}</span>\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]=\"!isActionEnabled(action)\" (click)=\"onCustomAction(action)\">\n                  {{ action.displayName | resolveTranslation }}\n                </button>\n              }\n            </bs-priority-nav>\n          </div>\n        } @else {\n          {{ (q.description | resolveTranslation) || q.name }}\n        }\n      </bs-card-header>\n    }\n    <div class=\"p-3\">\n      <!-- A page-fetch failure while the grid is already resolved. Without this the\n           catch returns an empty page and a failed query is indistinguishable from\n           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      <bs-datatable\n          [selectionMode]=\"selectionMode()\"\n          [(selection)]=\"selection\"\n          [virtualScroll]=\"isVirtualScrolling()\"\n          [itemSize]=\"40\"\n          [isResponsive]=\"isVirtualScrolling()\"\n          [fetch]=\"fetchFn()\"\n          [(settings)]=\"settings\">\n        @for (attr of visibleAttributes(); track attr.id) {\n          <div *bsDatatableColumn=\"attr.name; sortable: true\">\n            {{ (attr.label | resolveTranslation) || attr.name }}\n          </div>\n        }\n\n        <ng-container *bsRowTemplate=\"let item\">\n          @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\n                     this are routinely misread:\n\n                     1. `cellContent` is projected INSIDE the anchor, so a custom\n                        `renderer` does NOT suppress this link \u2014 a renderer that emits\n                        its own <a> produces nested anchors (invalid HTML) rather than\n                        replacing this one.\n                     2. `canRead()` is the whole gate, and it is the rights model:\n                        `Query` without `Read` lists the rows and withholds the link.\n                        Withhold `Read` for a query whose rows no detail page can load\n                        \u2014 a Custom.* query that fabricates rows in memory, say. -->\n                @if (first && canRead()) {\n                  <a [routerLink]=\"['/po', entityType()!.alias || entityType()!.id, row.id]\">\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    </div>\n  } @else {\n    <!-- The query could not be resolved. Rendering something keeps the host's layout\n         intact and, crucially, makes the failure visible: this branch used to render\n         nothing at all. -->\n    <div class=\"p-3\">\n      <bs-alert [type]=\"colors.danger\" class=\"mb-0\">\n        {{ errorMessage() || ('spark.query.unavailable' | t) }}\n      </bs-alert>\n    </div>\n  }\n</ng-template>\n\n<!--\n  The card is the component's, unless the host says otherwise. `bs-card-header` is\n  styled by a GLOBAL `.card-header` rule rather than `::slotted`, so the header keeps\n  its appearance with no `bs-card` ancestor \u2014 which is what makes the bare branch a\n  wrapper change only, with no duplicated content.\n-->\n@if (showCard()) {\n  <bs-card style=\"display: block; margin: 1rem 0;\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </bs-card>\n} @else {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #cellContent let-item let-attr=\"attr\">\n  @if (getColumnRendererComponent(attr); as rendererType) {\n    <ng-container *ngComponentOutlet=\"rendererType; inputs: getColumnRendererInputs(rendererType, item, attr)\"></ng-container>\n  } @else if (attr.dataType === 'boolean') {\n    @let boolVal = (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes());\n    <!-- [indeterminate] matters: without it a null boolean renders as an unchecked\n         box, which reads as an explicit `false`. spark-query-list has always bound\n         it; this component had drifted. -->\n    <input type=\"checkbox\"\n      [checked]=\"boolVal === true\"\n      [indeterminate]=\"boolVal === null || boolVal === undefined\"\n      disabled\n      onclick=\"return false;\">\n  } @else if (attr.dataType === 'color') {\n    @let colorVal = (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes());\n    @if (colorVal) {\n      <span class=\"d-inline-block align-middle border rounded\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n    }\n  } @else if (attr.dataType === 'Reference' && attr.isArray) {\n    <span class=\"d-inline-flex flex-wrap gap-1\">\n      @for (chip of (attr.name | referenceChips:item); track chip.id) {\n        <span class=\"badge rounded-pill border bg-body-secondary text-body px-3 py-2\">{{ chip.label }}</span>\n      }\n    </span>\n  } @else {\n    {{ (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) }}\n  }\n</ng-template>\n" }]
-        }], 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 }] }], reloadToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "reloadToken", required: false }] }], showCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCard", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], error: [{ type: i0.Output, args: ["error"] }] } });
+import { hasShowedOnFlag, ShowedOn } from '@mintplayer/ng-spark/models';
 
 class SparkPoDetailComponent {
     route = inject(ActivatedRoute);
@@ -327,6 +35,24 @@ class SparkPoDetailComponent {
     ...(ngDevMode ? [{ debugName: "extraActionsTemplate" }] : /* istanbul ignore next */ []));
     extraContentTemplate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "extraContentTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Header slots forwarded to every sub-query card on this page.
+     *
+     * A structural directive cannot cross a component boundary, and this component is created by
+     * the router — in a default app there is no `<spark-po-detail>` tag to project content into.
+     * So an app that wants slotted chrome on its sub-queries substitutes its own route component
+     * via `SparkRouteConfig.poDetail` and forwards the templates through here. Forwarding a
+     * `TemplateRef` as an input is already this component's idiom; see the two above.
+     *
+     * Each slot may target one query by alias, so a single forwarded set serves a page rendering
+     * several sub-queries.
+     */
+    queryIconTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "queryIconTemplate" }] : /* istanbul ignore next */ []));
+    queryCaptionTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "queryCaptionTemplate" }] : /* istanbul ignore next */ []));
+    queryActionsTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "queryActionsTemplate" }] : /* istanbul ignore next */ []));
     edited = output();
     deleted = output();
     customActionExecuted = output();
@@ -538,16 +264,16 @@ class SparkPoDetailComponent {
         window.history.back();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SparkPoDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SparkPoDetailComponent, isStandalone: true, selector: "spark-po-detail", inputs: { showCustomActions: { classPropertyName: "showCustomActions", publicName: "showCustomActions", isSignal: true, isRequired: false, transformFunction: null }, extraActionsTemplate: { classPropertyName: "extraActionsTemplate", publicName: "extraActionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraContentTemplate: { classPropertyName: "extraContentTemplate", publicName: "extraContentTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edited: "edited", deleted: "deleted", customActionExecuted: "customActionExecuted" }, ngImport: i0, template: "<bs-container>\n<div class=\"container\">\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  } @else if (item(); as currentItem) {\n    @if (entityType(); as et) {\n    <div class=\"spark-actionbar px-3 py-2\">\n      <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-outline-secondary\" (click)=\"onBack()\">\n          <spark-icon name=\"arrow-left\" /> {{ 'common.back' | t }}\n        </button>\n        @if (canEdit()) {\n          <button *bsPriorityNavItem=\"2\" class=\"btn btn-primary\" (click)=\"onEdit()\">\n            <spark-icon name=\"pencil\" /> {{ 'common.edit' | t }}\n          </button>\n        }\n        @if (canDelete()) {\n          <button *bsPriorityNavItem=\"3\" class=\"btn btn-danger\" (click)=\"onDelete()\">\n            <spark-icon name=\"trash\" /> {{ 'common.delete' | t }}\n          </button>\n        }\n        @if (showCustomActions()) {\n          @for (action of customActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-outline-primary\" (click)=\"onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        }\n        @if (extraActionsTemplate(); as extraActionsTpl) {\n          <ng-container *bsPriorityNavItem=\"50\">\n            <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n          </ng-container>\n        }\n      </bs-priority-nav>\n    </div>\n    <h2>{{ currentItem.breadcrumb || currentItem.name }}</h2>\n\n    <bs-grid>\n      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"detailTabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n      <ng-template #detailTabContent let-tab>\n        @if (tab.id === '__default__') {\n          @let ungroupedAttrs = ungroupedAttributes();\n          @if (ungroupedAttrs.length > 0) {\n            <bs-card style=\"display: block; margin: 1rem;\">\n              <div class=\"p-3\">\n                <dl bsRow>\n                  @for (attr of ungroupedAttrs; track attr.id) {\n                    <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                  }\n                </dl>\n              </div>\n            </bs-card>\n          }\n        }\n        @for (group of groupsForTab(tab); track group.id) {\n          @if (attrsForGroup(group); as groupAttrs) {\n            @if (groupAttrs.length > 0) {\n              <bs-card style=\"display: block; margin: 1rem;\">\n                @if (group.label) {\n                  <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n                }\n                <div class=\"p-3\">\n                  <dl bsRow>\n                    @for (attr of groupAttrs; track attr.id) {\n                      <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                    }\n                  </dl>\n                </div>\n              </bs-card>\n            }\n          }\n        }\n      </ng-template>\n\n          <ng-template #detailAttrField let-attr let-currentItem=\"item\">\n              <dt [sm]=\"3\">{{ (attr.label | resolveTranslation) || attr.name }}</dt>\n              <dd [sm]=\"9\">\n              @if (getDetailRendererComponent(attr); as rendererType) {\n                <ng-container *ngComponentOutlet=\"rendererType; inputs: getDetailRendererInputs(rendererType, attr, currentItem)\"></ng-container>\n              } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n                <bs-table [isResponsive]=\"true\">\n                  <thead>\n                    <tr>\n                      @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                        <th>{{ (col.label | resolveTranslation) || col.name }}</th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody class=\"align-middle\">\n                    @for (row of (attr.name | arrayValue:currentItem); track $index) {\n                      <tr>\n                        @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                          <td>\n                            @if (getAsDetailCellRendererComponent(col); as cellRenderer) {\n                              <ng-container *ngComponentOutlet=\"cellRenderer; inputs: getAsDetailCellRendererInputs(cellRenderer, row, col)\"></ng-container>\n                            } @else if (col.dataType === 'Reference' && col.referenceType) {\n                              @let route = (col.referenceType | referenceLinkRoute:row[col.name]:allEntityTypes());\n                              @if (route) {\n                                <a [routerLink]=\"route\">{{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}</a>\n                              } @else {\n                                {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                              }\n                            } @else {\n                              {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                            }\n                          </td>\n                        }\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length\" class=\"text-center text-muted\">\n                          {{ 'common.noItemsFound' | t }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </bs-table>\n              } @else if (attr.dataType === 'boolean') {\n                <input type=\"checkbox\"\n                  [checked]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n                  [indeterminate]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n                  disabled\n                  onclick=\"return false;\"\n                  style=\"opacity: 1;\">\n              } @else if (attr.dataType === 'color') {\n                @let colorVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (colorVal) {\n                  <span class=\"d-inline-block align-middle border rounded me-2\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n                  {{ colorVal }}\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.isArray) {\n                @let chips = (attr.name | referenceChips:item());\n                @if (chips.length) {\n                  <div class=\"d-flex flex-wrap gap-1\">\n                    @for (chip of chips; track chip.id) {\n                      @let chipRoute = (attr.referenceType ? (attr.referenceType | referenceLinkRoute:chip.id:allEntityTypes()) : null);\n                      @if (chipRoute) {\n                        <a class=\"badge rounded-pill border bg-body-secondary text-body text-decoration-none px-3 py-2\" [routerLink]=\"chipRoute\">{{ chip.label }}</a>\n                      } @else {\n                        <span class=\"badge rounded-pill border bg-body-secondary text-body px-3 py-2\">{{ chip.label }}</span>\n                      }\n                    }\n                  </div>\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.referenceType) {\n                @let refRoute = (attr.referenceType | referenceLinkRoute:(attr.name | rawAttributeValue:item()):allEntityTypes());\n                @if (refRoute && (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes())) {\n                  <a [routerLink]=\"refRoute\">{{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) }}</a>\n                } @else {\n                  {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n                }\n              } @else if (attr.dataType === 'MultiLineString') {\n                <div style=\"white-space: pre-wrap;\">{{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}</div>\n              } @else {\n                {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n              }\n              </dd>\n          </ng-template>\n    </bs-grid>\n    @if (et.queries?.length) {\n      @for (queryAlias of et.queries; track queryAlias) {\n        <spark-sub-query [queryId]=\"queryAlias\" [parentId]=\"currentItem.id!\" [parentType]=\"et.name\" />\n      }\n    }\n    @if (extraContentTemplate(); as extraContentTpl) {\n      <ng-container *ngTemplateOutlet=\"extraContentTpl; context: { $implicit: currentItem, entityType: et }\"></ng-container>\n    }\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n</bs-container>\n", styles: [".spark-actionbar{position:sticky;top:0;z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem}.spark-actionbar .btn{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: 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: BsCardComponent, selector: "bs-card", inputs: ["color", "outline"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["color", "navStyle"] }, { kind: "component", type: BsContainerComponent, selector: "bs-container" }, { 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: BsTableComponent, selector: "bs-table", inputs: ["isResponsive", "striped", "hover", "border", "ariaRowCount"] }, { kind: "component", type: BsTabControlComponent, selector: "bs-tab-control", inputs: ["border", "selectFirstTab", "tabsPosition"] }, { kind: "component", type: BsTabPageComponent, selector: "bs-tab-page", inputs: ["disabled"] }, { kind: "directive", type: BsTabPageHeaderDirective, selector: "[bsTabPageHeader]" }, { kind: "component", type: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "component", type: SparkSubQueryComponent, selector: "spark-sub-query", inputs: ["queryId", "parentId", "parentType", "reloadToken", "showCard", "headerTemplate"], outputs: ["error"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }, { kind: "pipe", type: AttributeValuePipe, name: "attributeValue" }, { kind: "pipe", type: RawAttributeValuePipe, name: "rawAttributeValue" }, { kind: "pipe", type: AsDetailColumnsPipe, name: "asDetailColumns" }, { kind: "pipe", type: AsDetailCellValuePipe, name: "asDetailCellValue" }, { kind: "pipe", type: ArrayValuePipe, name: "arrayValue" }, { kind: "pipe", type: ReferenceLinkRoutePipe, name: "referenceLinkRoute" }, { kind: "pipe", type: ReferenceChipsPipe, name: "referenceChips" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SparkPoDetailComponent, isStandalone: true, selector: "spark-po-detail", inputs: { showCustomActions: { classPropertyName: "showCustomActions", publicName: "showCustomActions", isSignal: true, isRequired: false, transformFunction: null }, extraActionsTemplate: { classPropertyName: "extraActionsTemplate", publicName: "extraActionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraContentTemplate: { classPropertyName: "extraContentTemplate", publicName: "extraContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, queryIconTemplate: { classPropertyName: "queryIconTemplate", publicName: "queryIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, queryCaptionTemplate: { classPropertyName: "queryCaptionTemplate", publicName: "queryCaptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, queryActionsTemplate: { classPropertyName: "queryActionsTemplate", publicName: "queryActionsTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edited: "edited", deleted: "deleted", customActionExecuted: "customActionExecuted" }, ngImport: i0, template: "<bs-container>\n<div class=\"container\">\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  } @else if (item(); as currentItem) {\n    @if (entityType(); as et) {\n    <div class=\"spark-actionbar px-3 py-2\">\n      <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-outline-secondary\" (click)=\"onBack()\">\n          <spark-icon name=\"arrow-left\" /> {{ 'common.back' | t }}\n        </button>\n        @if (canEdit()) {\n          <button *bsPriorityNavItem=\"2\" class=\"btn btn-primary\" (click)=\"onEdit()\">\n            <spark-icon name=\"pencil\" /> {{ 'common.edit' | t }}\n          </button>\n        }\n        @if (canDelete()) {\n          <button *bsPriorityNavItem=\"3\" class=\"btn btn-danger\" (click)=\"onDelete()\">\n            <spark-icon name=\"trash\" /> {{ 'common.delete' | t }}\n          </button>\n        }\n        @if (showCustomActions()) {\n          @for (action of customActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-outline-primary\" (click)=\"onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        }\n        @if (extraActionsTemplate(); as extraActionsTpl) {\n          <ng-container *bsPriorityNavItem=\"50\">\n            <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n          </ng-container>\n        }\n      </bs-priority-nav>\n    </div>\n    <h2>{{ currentItem.breadcrumb || currentItem.name }}</h2>\n\n    <bs-grid>\n      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"detailTabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n      <ng-template #detailTabContent let-tab>\n        @if (tab.id === '__default__') {\n          @let ungroupedAttrs = ungroupedAttributes();\n          @if (ungroupedAttrs.length > 0) {\n            <bs-card class=\"d-block m-3\">\n              <div class=\"p-3\">\n                <dl bsRow>\n                  @for (attr of ungroupedAttrs; track attr.id) {\n                    <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                  }\n                </dl>\n              </div>\n            </bs-card>\n          }\n        }\n        @for (group of groupsForTab(tab); track group.id) {\n          @if (attrsForGroup(group); as groupAttrs) {\n            @if (groupAttrs.length > 0) {\n              <bs-card class=\"d-block m-3\">\n                @if (group.label) {\n                  <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n                }\n                <div class=\"p-3\">\n                  <dl bsRow>\n                    @for (attr of groupAttrs; track attr.id) {\n                      <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                    }\n                  </dl>\n                </div>\n              </bs-card>\n            }\n          }\n        }\n      </ng-template>\n\n          <ng-template #detailAttrField let-attr let-currentItem=\"item\">\n              <dt [sm]=\"3\">{{ (attr.label | resolveTranslation) || attr.name }}</dt>\n              <dd [sm]=\"9\">\n              @if (getDetailRendererComponent(attr); as rendererType) {\n                <ng-container *ngComponentOutlet=\"rendererType; inputs: getDetailRendererInputs(rendererType, attr, currentItem)\"></ng-container>\n              } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n                <bs-table [isResponsive]=\"true\">\n                  <thead>\n                    <tr>\n                      @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                        <th>{{ (col.label | resolveTranslation) || col.name }}</th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody class=\"align-middle\">\n                    @for (row of (attr.name | arrayValue:currentItem); track $index) {\n                      <tr>\n                        @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                          <td>\n                            <!--\n                              Shared with the query grid. This cell used to hand-roll the renderer\n                              dispatch and print everything else as text, so a `boolean` column read\n                              \"true\" here and rendered a checkbox in a grid, and a `color` showed its\n                              hex. Only the VALUE is resolved locally: these rows are plain\n                              dictionaries, not PersistentObjects.\n\n                              `chips` is left unset for a reference array on purpose \u2014 an AsDetail\n                              row's `__sparkBreadcrumbs` is keyed by column, not by id, so there are\n                              no labels for the members. Text beats a row of raw ids.\n                            -->\n                            <spark-grid-cell\n                                [column]=\"col\"\n                                [display]=\"(row | asDetailCellValue:attr:col:asDetailReferenceOptions())\"\n                                [rendererValue]=\"row[col.name]\"\n                                [item]=\"row\"\n                                [link]=\"col.dataType === 'Reference' && col.referenceType\n                                          ? (col.referenceType | referenceLinkRoute:row[col.name]:allEntityTypes())\n                                          : null\" />\n                          </td>\n                        }\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length\" class=\"text-center text-muted\">\n                          {{ 'common.noItemsFound' | t }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </bs-table>\n              } @else if (attr.dataType === 'boolean') {\n                <input type=\"checkbox\"\n                  [checked]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n                  [indeterminate]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n                  disabled\n                  onclick=\"return false;\"\n                  class=\"opacity-100\">\n              } @else if (attr.dataType === 'color') {\n                @let colorVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (colorVal) {\n                  <span class=\"spark-color-swatch d-inline-block align-middle border rounded me-2\" [style.background-color]=\"colorVal\"></span>\n                  {{ colorVal }}\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.isArray) {\n                @let chips = (attr.name | referenceChips:item());\n                @if (chips.length) {\n                  <div class=\"d-flex flex-wrap gap-1\">\n                    @for (chip of chips; track chip.id) {\n                      @let chipRoute = (attr.referenceType ? (attr.referenceType | referenceLinkRoute:chip.id:allEntityTypes()) : null);\n                      @if (chipRoute) {\n                        <a class=\"spark-chip\" [routerLink]=\"chipRoute\">{{ chip.label }}</a>\n                      } @else {\n                        <span class=\"spark-chip\">{{ chip.label }}</span>\n                      }\n                    }\n                  </div>\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.referenceType) {\n                @let refRoute = (attr.referenceType | referenceLinkRoute:(attr.name | rawAttributeValue:item()):allEntityTypes());\n                @if (refRoute && (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes())) {\n                  <a [routerLink]=\"refRoute\">{{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) }}</a>\n                } @else {\n                  {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n                }\n              } @else if (attr.dataType === 'MultiLineString') {\n                <div class=\"spark-multiline-value\">{{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}</div>\n              } @else {\n                {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n              }\n              </dd>\n          </ng-template>\n    </bs-grid>\n    @if (et.queries?.length) {\n      @for (queryAlias of et.queries; track queryAlias) {\n        <spark-query-card [queryId]=\"queryAlias\" [parentId]=\"currentItem.id!\" [parentType]=\"et.name\"\n                          [iconTemplate]=\"queryIconTemplate()\" [captionTemplate]=\"queryCaptionTemplate()\"\n                          [actionsTemplate]=\"queryActionsTemplate()\" />\n      }\n    }\n    @if (extraContentTemplate(); as extraContentTpl) {\n      <ng-container *ngTemplateOutlet=\"extraContentTpl; context: { $implicit: currentItem, entityType: et }\"></ng-container>\n    }\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n</bs-container>\n", styles: [".spark-actionbar{position:sticky;top:0;z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem}.spark-actionbar .btn{border-radius:0}.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}.spark-multiline-value{white-space:pre-wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: 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: BsCardComponent, selector: "bs-card", inputs: ["color", "outline"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["color", "navStyle"] }, { kind: "component", type: BsContainerComponent, selector: "bs-container" }, { 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: BsTableComponent, selector: "bs-table", inputs: ["isResponsive", "striped", "hover", "border", "ariaRowCount"] }, { kind: "component", type: BsTabControlComponent, selector: "bs-tab-control", inputs: ["border", "selectFirstTab", "tabsPosition"] }, { kind: "component", type: BsTabPageComponent, selector: "bs-tab-page", inputs: ["disabled"] }, { kind: "directive", type: BsTabPageHeaderDirective, selector: "[bsTabPageHeader]" }, { kind: "component", type: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "component", type: SparkQueryCardComponent, selector: "spark-query-card", inputs: ["queryId", "parentId", "parentType", "reloadToken", "data", "search", "iconTemplate", "captionTemplate", "actionsTemplate"], outputs: ["error", "rowClicked", "customActionExecuted"] }, { kind: "component", type: SparkGridCellComponent, selector: "spark-grid-cell", inputs: ["column", "display", "rendererValue", "item", "chips", "link"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }, { kind: "pipe", type: AttributeValuePipe, name: "attributeValue" }, { kind: "pipe", type: RawAttributeValuePipe, name: "rawAttributeValue" }, { kind: "pipe", type: AsDetailColumnsPipe, name: "asDetailColumns" }, { kind: "pipe", type: AsDetailCellValuePipe, name: "asDetailCellValue" }, { kind: "pipe", type: ArrayValuePipe, name: "arrayValue" }, { kind: "pipe", type: ReferenceLinkRoutePipe, name: "referenceLinkRoute" }, { kind: "pipe", type: ReferenceChipsPipe, name: "referenceChips" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SparkPoDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spark-po-detail', imports: [CommonModule, NgTemplateOutlet, NgComponentOutlet, RouterModule, BsAlertComponent, BsCardComponent, BsCardHeaderComponent, BsContainerComponent, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsPriorityNavComponent, BsPriorityNavItemDirective, BsTableComponent, BsTabControlComponent, BsTabPageComponent, BsTabPageHeaderDirective, BsSpinnerComponent, SparkIconComponent, SparkSubQueryComponent, ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe, RawAttributeValuePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, ArrayValuePipe, ReferenceLinkRoutePipe, ReferenceChipsPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-container>\n<div class=\"container\">\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  } @else if (item(); as currentItem) {\n    @if (entityType(); as et) {\n    <div class=\"spark-actionbar px-3 py-2\">\n      <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-outline-secondary\" (click)=\"onBack()\">\n          <spark-icon name=\"arrow-left\" /> {{ 'common.back' | t }}\n        </button>\n        @if (canEdit()) {\n          <button *bsPriorityNavItem=\"2\" class=\"btn btn-primary\" (click)=\"onEdit()\">\n            <spark-icon name=\"pencil\" /> {{ 'common.edit' | t }}\n          </button>\n        }\n        @if (canDelete()) {\n          <button *bsPriorityNavItem=\"3\" class=\"btn btn-danger\" (click)=\"onDelete()\">\n            <spark-icon name=\"trash\" /> {{ 'common.delete' | t }}\n          </button>\n        }\n        @if (showCustomActions()) {\n          @for (action of customActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-outline-primary\" (click)=\"onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        }\n        @if (extraActionsTemplate(); as extraActionsTpl) {\n          <ng-container *bsPriorityNavItem=\"50\">\n            <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n          </ng-container>\n        }\n      </bs-priority-nav>\n    </div>\n    <h2>{{ currentItem.breadcrumb || currentItem.name }}</h2>\n\n    <bs-grid>\n      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"detailTabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n      <ng-template #detailTabContent let-tab>\n        @if (tab.id === '__default__') {\n          @let ungroupedAttrs = ungroupedAttributes();\n          @if (ungroupedAttrs.length > 0) {\n            <bs-card style=\"display: block; margin: 1rem;\">\n              <div class=\"p-3\">\n                <dl bsRow>\n                  @for (attr of ungroupedAttrs; track attr.id) {\n                    <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                  }\n                </dl>\n              </div>\n            </bs-card>\n          }\n        }\n        @for (group of groupsForTab(tab); track group.id) {\n          @if (attrsForGroup(group); as groupAttrs) {\n            @if (groupAttrs.length > 0) {\n              <bs-card style=\"display: block; margin: 1rem;\">\n                @if (group.label) {\n                  <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n                }\n                <div class=\"p-3\">\n                  <dl bsRow>\n                    @for (attr of groupAttrs; track attr.id) {\n                      <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                    }\n                  </dl>\n                </div>\n              </bs-card>\n            }\n          }\n        }\n      </ng-template>\n\n          <ng-template #detailAttrField let-attr let-currentItem=\"item\">\n              <dt [sm]=\"3\">{{ (attr.label | resolveTranslation) || attr.name }}</dt>\n              <dd [sm]=\"9\">\n              @if (getDetailRendererComponent(attr); as rendererType) {\n                <ng-container *ngComponentOutlet=\"rendererType; inputs: getDetailRendererInputs(rendererType, attr, currentItem)\"></ng-container>\n              } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n                <bs-table [isResponsive]=\"true\">\n                  <thead>\n                    <tr>\n                      @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                        <th>{{ (col.label | resolveTranslation) || col.name }}</th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody class=\"align-middle\">\n                    @for (row of (attr.name | arrayValue:currentItem); track $index) {\n                      <tr>\n                        @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                          <td>\n                            @if (getAsDetailCellRendererComponent(col); as cellRenderer) {\n                              <ng-container *ngComponentOutlet=\"cellRenderer; inputs: getAsDetailCellRendererInputs(cellRenderer, row, col)\"></ng-container>\n                            } @else if (col.dataType === 'Reference' && col.referenceType) {\n                              @let route = (col.referenceType | referenceLinkRoute:row[col.name]:allEntityTypes());\n                              @if (route) {\n                                <a [routerLink]=\"route\">{{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}</a>\n                              } @else {\n                                {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                              }\n                            } @else {\n                              {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                            }\n                          </td>\n                        }\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length\" class=\"text-center text-muted\">\n                          {{ 'common.noItemsFound' | t }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </bs-table>\n              } @else if (attr.dataType === 'boolean') {\n                <input type=\"checkbox\"\n                  [checked]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n                  [indeterminate]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n                  disabled\n                  onclick=\"return false;\"\n                  style=\"opacity: 1;\">\n              } @else if (attr.dataType === 'color') {\n                @let colorVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (colorVal) {\n                  <span class=\"d-inline-block align-middle border rounded me-2\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n                  {{ colorVal }}\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.isArray) {\n                @let chips = (attr.name | referenceChips:item());\n                @if (chips.length) {\n                  <div class=\"d-flex flex-wrap gap-1\">\n                    @for (chip of chips; track chip.id) {\n                      @let chipRoute = (attr.referenceType ? (attr.referenceType | referenceLinkRoute:chip.id:allEntityTypes()) : null);\n                      @if (chipRoute) {\n                        <a class=\"badge rounded-pill border bg-body-secondary text-body text-decoration-none px-3 py-2\" [routerLink]=\"chipRoute\">{{ chip.label }}</a>\n                      } @else {\n                        <span class=\"badge rounded-pill border bg-body-secondary text-body px-3 py-2\">{{ chip.label }}</span>\n                      }\n                    }\n                  </div>\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.referenceType) {\n                @let refRoute = (attr.referenceType | referenceLinkRoute:(attr.name | rawAttributeValue:item()):allEntityTypes());\n                @if (refRoute && (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes())) {\n                  <a [routerLink]=\"refRoute\">{{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) }}</a>\n                } @else {\n                  {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n                }\n              } @else if (attr.dataType === 'MultiLineString') {\n                <div style=\"white-space: pre-wrap;\">{{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}</div>\n              } @else {\n                {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n              }\n              </dd>\n          </ng-template>\n    </bs-grid>\n    @if (et.queries?.length) {\n      @for (queryAlias of et.queries; track queryAlias) {\n        <spark-sub-query [queryId]=\"queryAlias\" [parentId]=\"currentItem.id!\" [parentType]=\"et.name\" />\n      }\n    }\n    @if (extraContentTemplate(); as extraContentTpl) {\n      <ng-container *ngTemplateOutlet=\"extraContentTpl; context: { $implicit: currentItem, entityType: et }\"></ng-container>\n    }\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n</bs-container>\n", styles: [".spark-actionbar{position:sticky;top:0;z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem}.spark-actionbar .btn{border-radius:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { showCustomActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomActions", required: false }] }], extraActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraActionsTemplate", required: false }] }], extraContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraContentTemplate", required: false }] }], edited: [{ type: i0.Output, args: ["edited"] }], deleted: [{ type: i0.Output, args: ["deleted"] }], customActionExecuted: [{ type: i0.Output, args: ["customActionExecuted"] }] } });
+            args: [{ selector: 'spark-po-detail', imports: [CommonModule, NgTemplateOutlet, NgComponentOutlet, RouterModule, BsAlertComponent, BsCardComponent, BsCardHeaderComponent, BsContainerComponent, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsPriorityNavComponent, BsPriorityNavItemDirective, BsTableComponent, BsTabControlComponent, BsTabPageComponent, BsTabPageHeaderDirective, BsSpinnerComponent, SparkIconComponent, SparkQueryCardComponent, SparkGridCellComponent, ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe, RawAttributeValuePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, ArrayValuePipe, ReferenceLinkRoutePipe, ReferenceChipsPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-container>\n<div class=\"container\">\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  } @else if (item(); as currentItem) {\n    @if (entityType(); as et) {\n    <div class=\"spark-actionbar px-3 py-2\">\n      <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-outline-secondary\" (click)=\"onBack()\">\n          <spark-icon name=\"arrow-left\" /> {{ 'common.back' | t }}\n        </button>\n        @if (canEdit()) {\n          <button *bsPriorityNavItem=\"2\" class=\"btn btn-primary\" (click)=\"onEdit()\">\n            <spark-icon name=\"pencil\" /> {{ 'common.edit' | t }}\n          </button>\n        }\n        @if (canDelete()) {\n          <button *bsPriorityNavItem=\"3\" class=\"btn btn-danger\" (click)=\"onDelete()\">\n            <spark-icon name=\"trash\" /> {{ 'common.delete' | t }}\n          </button>\n        }\n        @if (showCustomActions()) {\n          @for (action of customActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-outline-primary\" (click)=\"onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        }\n        @if (extraActionsTemplate(); as extraActionsTpl) {\n          <ng-container *bsPriorityNavItem=\"50\">\n            <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n          </ng-container>\n        }\n      </bs-priority-nav>\n    </div>\n    <h2>{{ currentItem.breadcrumb || currentItem.name }}</h2>\n\n    <bs-grid>\n      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"detailTabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n      <ng-template #detailTabContent let-tab>\n        @if (tab.id === '__default__') {\n          @let ungroupedAttrs = ungroupedAttributes();\n          @if (ungroupedAttrs.length > 0) {\n            <bs-card class=\"d-block m-3\">\n              <div class=\"p-3\">\n                <dl bsRow>\n                  @for (attr of ungroupedAttrs; track attr.id) {\n                    <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                  }\n                </dl>\n              </div>\n            </bs-card>\n          }\n        }\n        @for (group of groupsForTab(tab); track group.id) {\n          @if (attrsForGroup(group); as groupAttrs) {\n            @if (groupAttrs.length > 0) {\n              <bs-card class=\"d-block m-3\">\n                @if (group.label) {\n                  <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n                }\n                <div class=\"p-3\">\n                  <dl bsRow>\n                    @for (attr of groupAttrs; track attr.id) {\n                      <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                    }\n                  </dl>\n                </div>\n              </bs-card>\n            }\n          }\n        }\n      </ng-template>\n\n          <ng-template #detailAttrField let-attr let-currentItem=\"item\">\n              <dt [sm]=\"3\">{{ (attr.label | resolveTranslation) || attr.name }}</dt>\n              <dd [sm]=\"9\">\n              @if (getDetailRendererComponent(attr); as rendererType) {\n                <ng-container *ngComponentOutlet=\"rendererType; inputs: getDetailRendererInputs(rendererType, attr, currentItem)\"></ng-container>\n              } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n                <bs-table [isResponsive]=\"true\">\n                  <thead>\n                    <tr>\n                      @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                        <th>{{ (col.label | resolveTranslation) || col.name }}</th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody class=\"align-middle\">\n                    @for (row of (attr.name | arrayValue:currentItem); track $index) {\n                      <tr>\n                        @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                          <td>\n                            <!--\n                              Shared with the query grid. This cell used to hand-roll the renderer\n                              dispatch and print everything else as text, so a `boolean` column read\n                              \"true\" here and rendered a checkbox in a grid, and a `color` showed its\n                              hex. Only the VALUE is resolved locally: these rows are plain\n                              dictionaries, not PersistentObjects.\n\n                              `chips` is left unset for a reference array on purpose \u2014 an AsDetail\n                              row's `__sparkBreadcrumbs` is keyed by column, not by id, so there are\n                              no labels for the members. Text beats a row of raw ids.\n                            -->\n                            <spark-grid-cell\n                                [column]=\"col\"\n                                [display]=\"(row | asDetailCellValue:attr:col:asDetailReferenceOptions())\"\n                                [rendererValue]=\"row[col.name]\"\n                                [item]=\"row\"\n                                [link]=\"col.dataType === 'Reference' && col.referenceType\n                                          ? (col.referenceType | referenceLinkRoute:row[col.name]:allEntityTypes())\n                                          : null\" />\n                          </td>\n                        }\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length\" class=\"text-center text-muted\">\n                          {{ 'common.noItemsFound' | t }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </bs-table>\n              } @else if (attr.dataType === 'boolean') {\n                <input type=\"checkbox\"\n                  [checked]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n                  [indeterminate]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n                  disabled\n                  onclick=\"return false;\"\n                  class=\"opacity-100\">\n              } @else if (attr.dataType === 'color') {\n                @let colorVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (colorVal) {\n                  <span class=\"spark-color-swatch d-inline-block align-middle border rounded me-2\" [style.background-color]=\"colorVal\"></span>\n                  {{ colorVal }}\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.isArray) {\n                @let chips = (attr.name | referenceChips:item());\n                @if (chips.length) {\n                  <div class=\"d-flex flex-wrap gap-1\">\n                    @for (chip of chips; track chip.id) {\n                      @let chipRoute = (attr.referenceType ? (attr.referenceType | referenceLinkRoute:chip.id:allEntityTypes()) : null);\n                      @if (chipRoute) {\n                        <a class=\"spark-chip\" [routerLink]=\"chipRoute\">{{ chip.label }}</a>\n                      } @else {\n                        <span class=\"spark-chip\">{{ chip.label }}</span>\n                      }\n                    }\n                  </div>\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.referenceType) {\n                @let refRoute = (attr.referenceType | referenceLinkRoute:(attr.name | rawAttributeValue:item()):allEntityTypes());\n                @if (refRoute && (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes())) {\n                  <a [routerLink]=\"refRoute\">{{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) }}</a>\n                } @else {\n                  {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n                }\n              } @else if (attr.dataType === 'MultiLineString') {\n                <div class=\"spark-multiline-value\">{{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}</div>\n              } @else {\n                {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n              }\n              </dd>\n          </ng-template>\n    </bs-grid>\n    @if (et.queries?.length) {\n      @for (queryAlias of et.queries; track queryAlias) {\n        <spark-query-card [queryId]=\"queryAlias\" [parentId]=\"currentItem.id!\" [parentType]=\"et.name\"\n                          [iconTemplate]=\"queryIconTemplate()\" [captionTemplate]=\"queryCaptionTemplate()\"\n                          [actionsTemplate]=\"queryActionsTemplate()\" />\n      }\n    }\n    @if (extraContentTemplate(); as extraContentTpl) {\n      <ng-container *ngTemplateOutlet=\"extraContentTpl; context: { $implicit: currentItem, entityType: et }\"></ng-container>\n    }\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n</bs-container>\n", styles: [".spark-actionbar{position:sticky;top:0;z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem}.spark-actionbar .btn{border-radius:0}.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}.spark-multiline-value{white-space:pre-wrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { showCustomActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomActions", required: false }] }], extraActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraActionsTemplate", required: false }] }], extraContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraContentTemplate", required: false }] }], queryIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryIconTemplate", required: false }] }], queryCaptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryCaptionTemplate", required: false }] }], queryActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryActionsTemplate", required: false }] }], edited: [{ type: i0.Output, args: ["edited"] }], deleted: [{ type: i0.Output, args: ["deleted"] }], customActionExecuted: [{ type: i0.Output, args: ["customActionExecuted"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SparkPoDetailComponent, SparkSubQueryComponent };
+export { SparkPoDetailComponent };
 //# sourceMappingURL=mintplayer-ng-spark-po-detail.mjs.map