@mintplayer/ng-spark 22.22.0 → 22.24.0

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

@@ -1,411 +1,787 @@
-import * as i0 from '@angular/core';
-import { inject, input, output, signal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
-import * as i2 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';
-import { BsContainerComponent } from '@mintplayer/ng-bootstrap/container';
-import { BsGridComponent, BsGridRowDirective, BsGridColumnDirective } from '@mintplayer/ng-bootstrap/grid';
-import { BsPriorityNavComponent, BsPriorityNavItemDirective } from '@mintplayer/ng-bootstrap/priority-nav';
-import { BsTableComponent } from '@mintplayer/ng-bootstrap/table';
-import { BsTabControlComponent, BsTabPageComponent, BsTabPageHeaderDirective } from '@mintplayer/ng-bootstrap/tab-control';
-import { BsSpinnerComponent } from '@mintplayer/ng-bootstrap/spinner';
-import { SparkService, SparkLanguageService } from '@mintplayer/ng-spark/services';
-import { SparkQueryRefreshService, SparkAttributeRefreshService } from '@mintplayer/ng-spark/client-operations';
-import { ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe, RawAttributeValuePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, ArrayValuePipe, ReferenceLinkRoutePipe, ReferenceChipsPipe, ParsedDatePipe } from '@mintplayer/ng-spark/pipes';
-import { SparkIconComponent } from '@mintplayer/ng-spark/icon';
-import { SparkAttributeDescriptionComponent } from '@mintplayer/ng-spark/attribute-description';
-import { SparkQueryCardComponent, SparkGridCellComponent } from '@mintplayer/ng-spark/grid';
-import { SPARK_ATTRIBUTE_RENDERERS, rendererValue, withDeclaredInputs } from '@mintplayer/ng-spark/renderers';
-import { hasShowedOnFlag, ShowedOn } from '@mintplayer/ng-spark/models';
-
-class SparkPoDetailComponent {
-    route = inject(ActivatedRoute);
-    router = inject(Router);
-    sparkService = inject(SparkService);
-    queryRefresh = inject(SparkQueryRefreshService);
-    attributeRefresh = inject(SparkAttributeRefreshService);
-    lang = inject(SparkLanguageService);
-    rendererRegistry = inject(SPARK_ATTRIBUTE_RENDERERS);
-    showCustomActions = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showCustomActions" }] : /* istanbul ignore next */ []));
-    extraActionsTemplate = input(null, /* @ts-ignore */
-    ...(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();
-    colors = Color;
-    errorMessage = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
-    entityType = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "entityType" }] : /* istanbul ignore next */ []));
-    allEntityTypes = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "allEntityTypes" }] : /* istanbul ignore next */ []));
-    item = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
-    lookupReferenceOptions = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : /* istanbul ignore next */ []));
-    asDetailTypes = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "asDetailTypes" }] : /* istanbul ignore next */ []));
-    asDetailReferenceOptions = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "asDetailReferenceOptions" }] : /* istanbul ignore next */ []));
-    type = '';
-    id = '';
-    canEdit = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
-    canDelete = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "canDelete" }] : /* istanbul ignore next */ []));
-    customActions = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []));
-    /**
-     * The actions actually offered for the object on screen.
-     *
-     * The catalogue at `/spark/actions/{objectTypeId}` is per TYPE -- the server is never told which
-     * row is open -- so an action that applies to only some rows cannot be filtered there. The
-     * entity's actions hook decides while it has the entity in hand and withholds what does not
-     * apply, and the object arrives carrying that answer.
-     *
-     * An affordance, not a permission: the endpoint stays reachable and the action handler still
-     * refuses on its own terms. What this prevents is offering a destructive action where it cannot
-     * possibly apply -- Coverage showed an irreversible red "Delete data" button on every repository
-     * page, healthy ones included, and only admitted it would refuse after the confirmation prompt.
-     */
-    visibleCustomActions = computed(() => {
-        const withheld = this.item()?.disabledActions;
-        if (!withheld?.length)
-            return this.customActions();
-        const lowered = new Set(withheld.map(name => name.toLowerCase()));
-        return this.customActions().filter(action => !lowered.has(action.name.toLowerCase()));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visibleCustomActions" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.route.paramMap.pipe(takeUntilDestroyed()).subscribe(params => this.onParamsChange(params));
-        // Server-issued `refreshAttribute` patches for the object this page is showing.
-        //
-        // Tracks the token and the entity type, never `item()`: writing the signal this effect reads
-        // would re-run it forever, so the read-modify-write of the object happens untracked.
-        effect(() => {
-            const objectTypeId = this.entityType()?.id;
-            if (!this.attributeRefresh.tokenFor(objectTypeId, this.id))
-                return;
-            const patches = this.attributeRefresh.patchesFor(objectTypeId, this.id);
-            untracked(() => this.applyAttributePatches(patches));
-        });
-    }
-    /**
-     * Applies patched attribute values in place, without a re-fetch.
-     *
-     * The operation carries the value the server computed after its own write, so this is both
-     * cheaper and more correct than re-reading: a re-read goes through a RavenDB index that may
-     * still be stale from the very write that produced the patch, and would show the old value.
-     */
-    applyAttributePatches(patches) {
-        const current = this.item();
-        if (!current)
-            return;
-        let changed = false;
-        const attributes = current.attributes.map(attribute => {
-            if (!Object.prototype.hasOwnProperty.call(patches, attribute.name))
-                return attribute;
-            const patch = patches[attribute.name];
-            const next = { ...attribute };
-            let patched = false;
-            // Each field is applied on its own, because they are not interchangeable: an AsDetail
-            // attribute carries its rows in object/objects and leaves value null, so applying only
-            // value could never refresh a detail grid.
-            //
-            // Compared by identity in every case. A scalar skips when unchanged, and a null skips
-            // against a null -- which matters because the server writes object/objects as null on a
-            // scalar patch, and treating that as a change would repaint on every patch. A rewritten
-            // collection is a new array and so never matches, which is the behaviour wanted: comparing
-            // rows deeply would cost more than the repaint it saves.
-            if (patch.value !== undefined && next.value !== patch.value) {
-                next.value = patch.value;
-                patched = true;
-            }
-            // Only for the attributes that actually use them. The server writes object/objects as
-            // null on every scalar patch, so applying them unconditionally would mark a scalar
-            // attribute changed on each patch and repaint for nothing.
-            if (attribute.dataType === 'AsDetail') {
-                if (patch.object !== undefined && next.object !== patch.object) {
-                    next.object = patch.object;
-                    patched = true;
-                }
-                if (patch.objects !== undefined && next.objects !== patch.objects) {
-                    next.objects = patch.objects;
-                    patched = true;
-                }
-            }
-            if (!patched)
-                return attribute;
-            changed = true;
-            return next;
-        });
-        if (changed)
-            this.item.set({ ...current, attributes });
-    }
-    async onParamsChange(params) {
-        this.type = params.get('type') || '';
-        this.id = params.get('id') || '';
-        try {
-            const [entityTypes, item] = await Promise.all([
-                this.sparkService.getEntityTypes(),
-                this.sparkService.get(this.type, this.id)
-            ]);
-            this.allEntityTypes.set(entityTypes);
-            this.entityType.set(entityTypes.find(t => t.id === this.type || t.alias === this.type) || null);
-            this.item.set(item);
-            this.loadLookupReferenceOptions();
-            this.loadAsDetailTypes();
-            const et = this.entityType();
-            if (et) {
-                const [permissions, actions] = await Promise.all([
-                    this.sparkService.getPermissions(et.id),
-                    this.sparkService.getCustomActions(et.id)
-                ]);
-                // Prefer the per-row affordances (#236 G5) when the server attached them — a row the
-                // caller may read but not mutate then hides its Edit/Delete buttons instead of rendering
-                // ones that 404. `can` is absent for types with no row rule, so fall back to type-level.
-                // The override (not an intersection) is safe because the server computes `can` as the
-                // intersection of type-level rights and the row rule (#243) — it never claims more than
-                // `permissions` does.
-                const can = item.can;
-                this.canEdit.set(can ? can.edit : permissions.canEdit);
-                this.canDelete.set(can ? can.delete : permissions.canDelete);
-                this.customActions.set(actions.filter(a => a.showedOn === 'detail' || a.showedOn === 'both'));
-            }
-        }
-        catch (e) {
-            const error = e;
-            this.errorMessage.set(error.error?.error || error.message || 'An unexpected error occurred');
-        }
-    }
-    visibleAttributes = computed(() => {
-        return this.entityType()?.attributes
-            .filter(a => a.isVisible && hasShowedOnFlag(a.showedOn, ShowedOn.PersistentObject))
-            .sort((a, b) => a.order - b.order) || [];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visibleAttributes" }] : /* istanbul ignore next */ []));
-    static DEFAULT_TAB = { id: '__default__', name: 'Algemeen', label: { nl: 'Algemeen', en: 'General' }, order: 0 };
-    ungroupedAttributes = computed(() => {
-        const attrs = this.visibleAttributes();
-        const groupIds = new Set((this.entityType()?.groups || []).map(g => g.id));
-        return attrs.filter(a => !a.group || !groupIds.has(a.group));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ungroupedAttributes" }] : /* istanbul ignore next */ []));
-    resolvedTabs = computed(() => {
-        const et = this.entityType();
-        const definedTabs = et?.tabs?.length ? [...et.tabs].sort((a, b) => a.order - b.order) : [];
-        const hasUngroupedAttrs = this.ungroupedAttributes().length > 0;
-        const hasUntabbedGroups = (et?.groups || []).some(g => !g.tab);
-        if (hasUngroupedAttrs || hasUntabbedGroups || definedTabs.length === 0) {
-            return [SparkPoDetailComponent.DEFAULT_TAB, ...definedTabs];
-        }
-        return definedTabs;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedTabs" }] : /* istanbul ignore next */ []));
-    groupsForTab(tab) {
-        const groups = this.entityType()?.groups || [];
-        if (tab.id === '__default__') {
-            return groups.filter(g => !g.tab).sort((a, b) => a.order - b.order);
-        }
-        return groups.filter(g => g.tab === tab.id).sort((a, b) => a.order - b.order);
-    }
-    attrsForGroup(group) {
-        return this.visibleAttributes().filter(a => a.group === group.id);
-    }
-    getDetailRendererComponent(attr) {
-        if (!attr.renderer)
-            return null;
-        return this.rendererRegistry.find(r => r.name === attr.renderer)?.detailComponent ?? null;
-    }
-    getDetailRendererInputs(component, attr, item) {
-        const itemAttr = item.attributes.find(a => a.name === attr.name);
-        const formData = {};
-        for (const a of item.attributes) {
-            formData[a.name] = rendererValue(a);
-        }
-        return withDeclaredInputs(component, {
-            value: rendererValue(itemAttr),
-            attribute: attr,
-            options: attr.rendererOptions,
-            formData,
-            item,
-        });
-    }
-    /** Column renderer for a cell of an AsDetail sub-table (so embedded rows honor `col.renderer` too). */
-    getAsDetailCellRendererComponent(col) {
-        if (!col.renderer)
-            return null;
-        return this.rendererRegistry.find(r => r.name === col.renderer)?.columnComponent ?? null;
-    }
-    getAsDetailCellRendererInputs(component, row, col) {
-        return withDeclaredInputs(component, {
-            value: row[col.name],
-            attribute: col,
-            options: col.rendererOptions,
-            item: row,
-        });
-    }
-    async loadLookupReferenceOptions() {
-        const lookupAttrs = this.visibleAttributes().filter(a => a.lookupReferenceType);
-        if (lookupAttrs.length === 0)
-            return;
-        const lookupNames = [...new Set(lookupAttrs.map(a => a.lookupReferenceType))];
-        // A lookup that fails to load only costs its labels: the attribute then shows its raw value
-        // (attributeValue's fallback) instead of the whole page erroring over a secondary request (#453).
-        const entries = await Promise.all(lookupNames.map(async (name) => {
-            const result = await this.sparkService.getLookupReference(name).catch(() => null);
-            return [name, result];
-        }));
-        this.lookupReferenceOptions.set(entries.reduce((acc, [k, v]) => v ? { ...acc, [k]: v } : acc, {}));
-    }
-    async loadAsDetailTypes() {
-        const asDetailAttrs = this.visibleAttributes().filter(a => a.dataType === 'AsDetail' && a.isArray && a.asDetailType);
-        if (asDetailAttrs.length === 0)
-            return;
-        const types = this.allEntityTypes();
-        const newAsDetailTypes = {};
-        // Same fallback as the form: a row type is usually absent from the Query-gated catalogue, and
-        // the server now ships its definition alongside the parent (#385).
-        const embedded = this.entityType()?.detailTypes ?? [];
-        for (const attr of asDetailAttrs) {
-            const asDetailType = types.find(t => t.clrType === attr.asDetailType)
-                ?? embedded.find(t => t.clrType === attr.asDetailType);
-            if (asDetailType) {
-                newAsDetailTypes[attr.name] = asDetailType;
-                const refCols = asDetailType.attributes.filter(a => a.dataType === 'Reference' && a.query);
-                if (refCols.length > 0) {
-                    const refEntries = await Promise.all(refCols.map(async (col) => {
-                        const result = await this.sparkService.executeQueryByName(col.query, {
-                            parentId: this.id,
-                            parentType: this.type,
-                        });
-                        return [col.name, result.items];
-                    }));
-                    this.asDetailReferenceOptions.update(prev => ({
-                        ...prev,
-                        [attr.name]: refEntries.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
-                    }));
-                }
-            }
-        }
-        this.asDetailTypes.set(newAsDetailTypes);
-    }
-    /**
-     * The bootstrap classes for a custom action's button. Outline-primary stays the default, so
-     * every existing action looks exactly as it did; a server-declared variant opts one action into
-     * a louder style. Restricted to a known set rather than interpolated, because the value arrives
-     * from a JSON file and must not be able to put arbitrary classes on the button.
-     */
-    customActionClass(action) {
-        const variant = action.variant?.toLowerCase();
-        switch (variant) {
-            case 'danger':
-            case 'warning':
-            case 'primary':
-            case 'secondary':
-            case 'success':
-                return `btn btn-${variant}`;
-            default:
-                return 'btn btn-outline-primary';
-        }
-    }
-    /**
-     * The action currently running, or null. Drives the disabled state on every custom-action
-     * button.
-     *
-     * A custom action is not necessarily quick: Coverage's Resync makes paged GitHub App calls for
-     * every account the caller manages, inside the request. Without this the button stayed live and
-     * looked inert for several seconds, and a second click queued a second full run -- which is how
-     * a slow action and a broken one became indistinguishable.
-     */
-    runningAction = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "runningAction" }] : /* istanbul ignore next */ []));
-    async onCustomAction(action) {
-        // Guard re-entry as well as disabling the button: the template is not the only caller, and a
-        // host component driving this method directly would otherwise bypass the check.
-        if (this.runningAction())
-            return;
-        if (action.confirmationMessageKey) {
-            const message = this.lang.t(action.confirmationMessageKey) || 'Are you sure?';
-            if (!confirm(message))
-                return;
-        }
-        this.runningAction.set(action.name);
-        try {
-            await this.sparkService.executeCustomAction(this.type, action.name, this.item() || undefined);
-            this.customActionExecuted.emit({ action, item: this.item() });
-            if (action.refreshOnCompleted) {
-                const item = await this.sparkService.get(this.type, this.id);
-                this.item.set(item);
-                // The sub-query grids below do not depend on item(), so re-fetching the PO left them
-                // showing pre-action rows -- the action appeared to have done nothing to the very
-                // lists it changed.
-                for (const queryAlias of (this.entityType()?.queries ?? [])) {
-                    this.queryRefresh.request(queryAlias);
-                }
-            }
-        }
-        catch (e) {
-            const err = e;
-            this.errorMessage.set(err.error?.error || err.message || 'Action failed');
-        }
-        finally {
-            // finally, not after the try: an action that fails must not leave every button on the page
-            // permanently disabled.
-            this.runningAction.set(null);
-        }
-    }
-    onEdit() {
-        this.edited.emit();
-        this.router.navigate(['/po', this.type, this.id, 'edit']);
-    }
-    async onDelete() {
-        if (confirm(this.lang.t('confirmDelete'))) {
-            await this.sparkService.delete(this.type, this.id);
-            this.deleted.emit();
-            this.router.navigate(['/']);
-        }
-    }
-    onBack() {
-        window.history.back();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkPoDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", 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 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 visibleCustomActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" [class]=\"customActionClass(action)\" [disabled]=\"runningAction() !== null\" (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 }}<spark-attribute-description [description]=\"attr.description\" /></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 }}<spark-attribute-description [description]=\"col.description\" /></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 === 'image') {\n                @let imageSrc = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (imageSrc) {\n                  <img [src]=\"imageSrc\" [alt]=\"(attr.label | resolveTranslation) || attr.name\" loading=\"lazy\"\n                       class=\"img-fluid rounded\" style=\"max-height: 12rem;\">\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'url') {\n                @let hrefVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (hrefVal) {\n                  <a [href]=\"hrefVal\" target=\"_blank\" rel=\"noopener noreferrer\">{{ hrefVal }}</a>\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 if (attr.dataType === 'date' || attr.dataType === 'datetime') {\n                <!--\n                  Formatted the same way, and in the same timezone, as the grid renders it.\n\n                  Before this, a detail page printed the raw wire value \u2014 `2026-12-31T23:59:00-08:00`\n                  in a definition list \u2014 while the grid showed `01/01/2027, 08:59` for the same\n                  document. Not a rounding difference: a DateTimeOffset whose offset differs from the\n                  viewer's can disagree on the DATE, so the two pages named different days for one car.\n\n                  The grid's meaning wins because it is the one a reader can act on: a timestamp is an\n                  instant, shown in the viewer's own zone. The originating offset is still on the wire\n                  for code that needs it \u2014 server-side logic, exports, \"which country's morning was\n                  this?\" \u2014 it simply is not what a viewer is shown by default.\n                -->\n                @let when = (attr.name | rawAttributeValue:item()) | parsedDate;\n                @if (when) {\n                  {{ when | date:(attr.dataType === 'date' ? 'mediumDate' : 'short') }}\n                } @else {\n                  {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n                }\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{--_bleed-block: var(--spark-content-inset-block, 0px);--_bleed-inline: var(--spark-content-inset-inline, 0px);--_gutter: var(--spark-actionbar-gutter, 1rem);position:sticky;top:calc(-1 * var(--_bleed-block));z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem;margin-inline:calc(-1 * var(--_bleed-inline));padding-inline:calc(var(--_bleed-inline) + var(--_gutter))}.spark-actionbar .btn{border-radius:0}.spark-actionbar-wide{--spark-actionbar-gutter: 1.5rem}.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}.container{--spark-content-inset-inline: 0px}.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", "rowRoute"], outputs: ["error", "rowClicked", "customActionExecuted"] }, { kind: "component", type: SparkGridCellComponent, selector: "spark-grid-cell", inputs: ["column", "display", "rendererValue", "item", "chips", "link"] }, { kind: "component", type: SparkAttributeDescriptionComponent, selector: "spark-attribute-description", inputs: ["description", "position"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { 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" }, { kind: "pipe", type: ParsedDatePipe, name: "parsedDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", 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, SparkQueryCardComponent, SparkGridCellComponent, ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe, RawAttributeValuePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, ArrayValuePipe, ReferenceLinkRoutePipe, ReferenceChipsPipe, ParsedDatePipe, SparkAttributeDescriptionComponent], 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 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 visibleCustomActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" [class]=\"customActionClass(action)\" [disabled]=\"runningAction() !== null\" (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 }}<spark-attribute-description [description]=\"attr.description\" /></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 }}<spark-attribute-description [description]=\"col.description\" /></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 === 'image') {\n                @let imageSrc = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (imageSrc) {\n                  <img [src]=\"imageSrc\" [alt]=\"(attr.label | resolveTranslation) || attr.name\" loading=\"lazy\"\n                       class=\"img-fluid rounded\" style=\"max-height: 12rem;\">\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'url') {\n                @let hrefVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (hrefVal) {\n                  <a [href]=\"hrefVal\" target=\"_blank\" rel=\"noopener noreferrer\">{{ hrefVal }}</a>\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 if (attr.dataType === 'date' || attr.dataType === 'datetime') {\n                <!--\n                  Formatted the same way, and in the same timezone, as the grid renders it.\n\n                  Before this, a detail page printed the raw wire value \u2014 `2026-12-31T23:59:00-08:00`\n                  in a definition list \u2014 while the grid showed `01/01/2027, 08:59` for the same\n                  document. Not a rounding difference: a DateTimeOffset whose offset differs from the\n                  viewer's can disagree on the DATE, so the two pages named different days for one car.\n\n                  The grid's meaning wins because it is the one a reader can act on: a timestamp is an\n                  instant, shown in the viewer's own zone. The originating offset is still on the wire\n                  for code that needs it \u2014 server-side logic, exports, \"which country's morning was\n                  this?\" \u2014 it simply is not what a viewer is shown by default.\n                -->\n                @let when = (attr.name | rawAttributeValue:item()) | parsedDate;\n                @if (when) {\n                  {{ when | date:(attr.dataType === 'date' ? 'mediumDate' : 'short') }}\n                } @else {\n                  {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n                }\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{--_bleed-block: var(--spark-content-inset-block, 0px);--_bleed-inline: var(--spark-content-inset-inline, 0px);--_gutter: var(--spark-actionbar-gutter, 1rem);position:sticky;top:calc(-1 * var(--_bleed-block));z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem;margin-inline:calc(-1 * var(--_bleed-inline));padding-inline:calc(var(--_bleed-inline) + var(--_gutter))}.spark-actionbar .btn{border-radius:0}.spark-actionbar-wide{--spark-actionbar-gutter: 1.5rem}.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}.container{--spark-content-inset-inline: 0px}.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.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, effect, inject, input, output, signal, untracked } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import * as i1 from "@angular/common";
+import { CommonModule, NgComponentOutlet, NgTemplateOutlet } from "@angular/common";
+import * as i2 from "@angular/router";
+import { ActivatedRoute, Router, RouterModule } from "@angular/router";
+import { Color } from "@mintplayer/ng-bootstrap";
+import { BsAlertComponent } from "@mintplayer/ng-bootstrap/alert";
+import { BsBadgeComponent } from "@mintplayer/ng-bootstrap/badge";
+import { BsCardComponent, BsCardHeaderComponent } from "@mintplayer/ng-bootstrap/card";
+import { BsContainerComponent } from "@mintplayer/ng-bootstrap/container";
+import { BsGridColumnDirective, BsGridComponent, BsGridRowDirective } from "@mintplayer/ng-bootstrap/grid";
+import { BsPriorityNavComponent, BsPriorityNavItemDirective } from "@mintplayer/ng-bootstrap/priority-nav";
+import { BsTableComponent } from "@mintplayer/ng-bootstrap/table";
+import { BsTabControlComponent, BsTabPageComponent, BsTabPageHeaderDirective } from "@mintplayer/ng-bootstrap/tab-control";
+import { BsSpinnerComponent } from "@mintplayer/ng-bootstrap/spinner";
+import { SparkLanguageService, SparkReturnNavigationService, SparkService } from "@mintplayer/ng-spark/services";
+import { SparkAttributeRefreshService, SparkQueryRefreshService } from "@mintplayer/ng-spark/client-operations";
+import { ArrayValuePipe, AsDetailCellValuePipe, AsDetailColumnsPipe, AttributeValuePipe, ParsedDatePipe, RawAttributeValuePipe, ReferenceChipsPipe, ReferenceLinkRoutePipe, ResolveTranslationPipe, TranslateKeyPipe } from "@mintplayer/ng-spark/pipes";
+import { SparkIconComponent } from "@mintplayer/ng-spark/icon";
+import { SparkAttributeDescriptionComponent } from "@mintplayer/ng-spark/attribute-description";
+import { SparkGridCellComponent, SparkQueryCardComponent } from "@mintplayer/ng-spark/grid";
+import { SPARK_ATTRIBUTE_RENDERERS, rendererValue, withDeclaredInputs } from "@mintplayer/ng-spark/renderers";
+import { ShowedOn, filterDetailActions, hasShowedOnFlag, subQueriesOf } from "@mintplayer/ng-spark/models";
+import { SPARK_DETAIL_ACTIONS, SPARK_DETAIL_PANELS, orderSparkExtensions, parseSparkDeletedParam } from "@mintplayer/ng-spark/panels";
+import { combineLatest } from "rxjs";
+var SparkPoDetailComponent = class SparkPoDetailComponent {
+	route = inject(ActivatedRoute);
+	router = inject(Router);
+	sparkService = inject(SparkService);
+	returnNavigation = inject(SparkReturnNavigationService);
+	queryRefresh = inject(SparkQueryRefreshService);
+	attributeRefresh = inject(SparkAttributeRefreshService);
+	lang = inject(SparkLanguageService);
+	rendererRegistry = inject(SPARK_ATTRIBUTE_RENDERERS);
+	detailPanels = orderSparkExtensions(inject(SPARK_DETAIL_PANELS, { optional: true }), (p) => p.order);
+	detailActions = orderSparkExtensions(inject(SPARK_DETAIL_ACTIONS, { optional: true }), (a) => a.priority ?? 60);
+	showCustomActions = input(true, ...ngDevMode ? [{ debugName: "showCustomActions" }] : /* istanbul ignore next */ []);
+	extraActionsTemplate = input(null, ...ngDevMode ? [{ debugName: "extraActionsTemplate" }] : /* istanbul ignore next */ []);
+	extraContentTemplate = input(null, ...ngDevMode ? [{ debugName: "extraContentTemplate" }] : /* istanbul ignore next */ []);
+	queryIconTemplate = input(null, ...ngDevMode ? [{ debugName: "queryIconTemplate" }] : /* istanbul ignore next */ []);
+	queryCaptionTemplate = input(null, ...ngDevMode ? [{ debugName: "queryCaptionTemplate" }] : /* istanbul ignore next */ []);
+	queryActionsTemplate = input(null, ...ngDevMode ? [{ debugName: "queryActionsTemplate" }] : /* istanbul ignore next */ []);
+	edited = output();
+	deleted = output();
+	customActionExecuted = output();
+	colors = Color;
+	errorMessage = signal(null, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	entityType = signal(null, ...ngDevMode ? [{ debugName: "entityType" }] : /* istanbul ignore next */ []);
+	subQueries = computed(() => subQueriesOf(this.entityType()), ...ngDevMode ? [{ debugName: "subQueries" }] : /* istanbul ignore next */ []);
+	allEntityTypes = signal([], ...ngDevMode ? [{ debugName: "allEntityTypes" }] : /* istanbul ignore next */ []);
+	item = signal(null, ...ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []);
+	lookupReferenceOptions = signal({}, ...ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : /* istanbul ignore next */ []);
+	asDetailTypes = signal({}, ...ngDevMode ? [{ debugName: "asDetailTypes" }] : /* istanbul ignore next */ []);
+	asDetailReferenceOptions = signal({}, ...ngDevMode ? [{ debugName: "asDetailReferenceOptions" }] : /* istanbul ignore next */ []);
+	type = "";
+	id = "";
+	canEdit = signal(false, ...ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []);
+	canDelete = signal(false, ...ngDevMode ? [{ debugName: "canDelete" }] : /* istanbul ignore next */ []);
+	customActions = signal([], ...ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []);
+	permissions = signal(null, ...ngDevMode ? [{ debugName: "permissions" }] : /* istanbul ignore next */ []);
+	deletedMode = signal(null, ...ngDevMode ? [{ debugName: "deletedMode" }] : /* istanbul ignore next */ []);
+	isDeletedView = computed(() => this.deletedMode() === "only", ...ngDevMode ? [{ debugName: "isDeletedView" }] : /* istanbul ignore next */ []);
+	detailContext = computed(() => {
+		const item = this.item();
+		const entityType = this.entityType();
+		if (!item || !entityType) return null;
+		return {
+			type: this.type,
+			id: this.id,
+			item,
+			entityType,
+			permissions: this.permissions(),
+			deleted: this.deletedMode(),
+			reload: () => this.load()
+		};
+	}, ...ngDevMode ? [{ debugName: "detailContext" }] : /* istanbul ignore next */ []);
+	visibleCustomActions = computed(() => {
+		const withheld = this.item()?.disabledActions;
+		if (!withheld?.length) return this.customActions();
+		const lowered = new Set(withheld.map((name) => name.toLowerCase()));
+		return this.customActions().filter((action) => !lowered.has(action.name.toLowerCase()));
+	}, ...ngDevMode ? [{ debugName: "visibleCustomActions" }] : /* istanbul ignore next */ []);
+	constructor() {
+		combineLatest([this.route.paramMap, this.route.queryParamMap]).pipe(takeUntilDestroyed()).subscribe(([params, query]) => this.onParamsChange(params, query.get("deleted")));
+		effect(() => {
+			const objectTypeId = this.entityType()?.id;
+			if (!this.attributeRefresh.tokenFor(objectTypeId, this.id)) return;
+			const patches = this.attributeRefresh.patchesFor(objectTypeId, this.id);
+			untracked(() => this.applyAttributePatches(patches));
+		});
+	}
+	applyAttributePatches(patches) {
+		const current = this.item();
+		if (!current) return;
+		let changed = false;
+		const attributes = current.attributes.map((attribute) => {
+			if (!Object.prototype.hasOwnProperty.call(patches, attribute.name)) return attribute;
+			const patch = patches[attribute.name];
+			const next = { ...attribute };
+			let patched = false;
+			if (patch.value !== void 0 && next.value !== patch.value) {
+				next.value = patch.value;
+				patched = true;
+			}
+			if (attribute.dataType === "AsDetail") {
+				if (patch.object !== void 0 && next.object !== patch.object) {
+					next.object = patch.object;
+					patched = true;
+				}
+				if (patch.objects !== void 0 && next.objects !== patch.objects) {
+					next.objects = patch.objects;
+					patched = true;
+				}
+			}
+			if (!patched) return attribute;
+			changed = true;
+			return next;
+		});
+		if (changed) this.item.set({
+			...current,
+			attributes
+		});
+	}
+	async onParamsChange(params, deleted = null) {
+		this.type = params.get("type") || "";
+		this.id = params.get("id") || "";
+		const mode = parseSparkDeletedParam(deleted);
+		this.deletedMode.set(mode === "exclude" ? null : mode);
+		await this.load();
+	}
+	loadItem() {
+		const deleted = this.deletedMode();
+		return deleted ? this.sparkService.get(this.type, this.id, { deleted }) : this.sparkService.get(this.type, this.id);
+	}
+	async load() {
+		this.errorMessage.set(null);
+		try {
+			const [entityTypes, item] = await Promise.all([this.sparkService.getEntityTypes(), this.loadItem()]);
+			this.allEntityTypes.set(entityTypes);
+			this.entityType.set(entityTypes.find((t) => t.id === this.type || t.alias === this.type) || null);
+			this.item.set(item);
+			this.loadLookupReferenceOptions();
+			this.loadAsDetailTypes();
+			const et = this.entityType();
+			if (et) {
+				const [permissions, actions] = await Promise.all([this.sparkService.getPermissions(et.id), this.sparkService.getCustomActions(et.id)]);
+				const can = item.can;
+				const withheld = new Set((item.disabledActions ?? []).map((name) => name.toLowerCase()));
+				const deletedView = this.isDeletedView();
+				this.permissions.set(permissions);
+				this.canEdit.set(!deletedView && (can ? can.edit : permissions.canEdit) && !withheld.has("edit") && !withheld.has("save"));
+				this.canDelete.set(!deletedView && (can ? can.delete : permissions.canDelete) && !withheld.has("delete"));
+				this.customActions.set(deletedView ? [] : filterDetailActions(actions));
+			}
+		} catch (e) {
+			const error = e;
+			this.errorMessage.set(error.error?.error || error.message || "An unexpected error occurred");
+		}
+	}
+	visibleAttributes = computed(() => {
+		return this.entityType()?.attributes.filter((a) => a.isVisible && hasShowedOnFlag(a.showedOn, ShowedOn.PersistentObject)).sort((a, b) => a.order - b.order) || [];
+	}, ...ngDevMode ? [{ debugName: "visibleAttributes" }] : /* istanbul ignore next */ []);
+	static DEFAULT_TAB = {
+		id: "__default__",
+		name: "Algemeen",
+		label: {
+			nl: "Algemeen",
+			en: "General"
+		},
+		order: 0
+	};
+	ungroupedAttributes = computed(() => {
+		const attrs = this.visibleAttributes();
+		const groupIds = new Set((this.entityType()?.groups || []).map((g) => g.id));
+		return attrs.filter((a) => !a.group || !groupIds.has(a.group));
+	}, ...ngDevMode ? [{ debugName: "ungroupedAttributes" }] : /* istanbul ignore next */ []);
+	resolvedTabs = computed(() => {
+		const et = this.entityType();
+		const definedTabs = et?.tabs?.length ? [...et.tabs].sort((a, b) => a.order - b.order) : [];
+		const hasUngroupedAttrs = this.ungroupedAttributes().length > 0;
+		const hasUntabbedGroups = (et?.groups || []).some((g) => !g.tab);
+		if (hasUngroupedAttrs || hasUntabbedGroups || definedTabs.length === 0) return [SparkPoDetailComponent.DEFAULT_TAB, ...definedTabs];
+		return definedTabs;
+	}, ...ngDevMode ? [{ debugName: "resolvedTabs" }] : /* istanbul ignore next */ []);
+	groupsForTab(tab) {
+		const groups = this.entityType()?.groups || [];
+		if (tab.id === "__default__") return groups.filter((g) => !g.tab).sort((a, b) => a.order - b.order);
+		return groups.filter((g) => g.tab === tab.id).sort((a, b) => a.order - b.order);
+	}
+	attrsForGroup(group) {
+		return this.visibleAttributes().filter((a) => a.group === group.id);
+	}
+	getDetailRendererComponent(attr) {
+		if (!attr.renderer) return null;
+		return this.rendererRegistry.find((r) => r.name === attr.renderer)?.detailComponent ?? null;
+	}
+	getDetailRendererInputs(component, attr, item) {
+		const itemAttr = item.attributes.find((a) => a.name === attr.name);
+		const formData = {};
+		for (const a of item.attributes) formData[a.name] = rendererValue(a);
+		return withDeclaredInputs(component, {
+			value: rendererValue(itemAttr),
+			attribute: attr,
+			options: attr.rendererOptions,
+			formData,
+			item
+		});
+	}
+	getAsDetailCellRendererComponent(col) {
+		if (!col.renderer) return null;
+		return this.rendererRegistry.find((r) => r.name === col.renderer)?.columnComponent ?? null;
+	}
+	getAsDetailCellRendererInputs(component, row, col) {
+		return withDeclaredInputs(component, {
+			value: row[col.name],
+			attribute: col,
+			options: col.rendererOptions,
+			item: row
+		});
+	}
+	async loadLookupReferenceOptions() {
+		const lookupAttrs = this.visibleAttributes().filter((a) => a.lookupReferenceType);
+		if (lookupAttrs.length === 0) return;
+		const lookupNames = [...new Set(lookupAttrs.map((a) => a.lookupReferenceType))];
+		const entries = await Promise.all(lookupNames.map(async (name) => {
+			return [name, await this.sparkService.getLookupReference(name).catch(() => null)];
+		}));
+		this.lookupReferenceOptions.set(entries.reduce((acc, [k, v]) => v ? {
+			...acc,
+			[k]: v
+		} : acc, {}));
+	}
+	async loadAsDetailTypes() {
+		const asDetailAttrs = this.visibleAttributes().filter((a) => a.dataType === "AsDetail" && a.isArray && a.asDetailType);
+		if (asDetailAttrs.length === 0) return;
+		const types = this.allEntityTypes();
+		const newAsDetailTypes = {};
+		const embedded = this.entityType()?.detailTypes ?? [];
+		for (const attr of asDetailAttrs) {
+			const asDetailType = types.find((t) => t.clrType === attr.asDetailType) ?? embedded.find((t) => t.clrType === attr.asDetailType);
+			if (asDetailType) {
+				newAsDetailTypes[attr.name] = asDetailType;
+				const refCols = asDetailType.attributes.filter((a) => a.dataType === "Reference" && a.query);
+				if (refCols.length > 0) {
+					const refEntries = await Promise.all(refCols.map(async (col) => {
+						const result = await this.sparkService.executeQueryByName(col.query, {
+							parentId: this.id,
+							parentType: this.type
+						});
+						return [col.name, result.items];
+					}));
+					this.asDetailReferenceOptions.update((prev) => ({
+						...prev,
+						[attr.name]: refEntries.reduce((acc, [k, v]) => ({
+							...acc,
+							[k]: v
+						}), {})
+					}));
+				}
+			}
+		}
+		this.asDetailTypes.set(newAsDetailTypes);
+	}
+	customActionClass(action) {
+		const variant = action.variant?.toLowerCase();
+		switch (variant) {
+			case "danger":
+			case "warning":
+			case "primary":
+			case "secondary":
+			case "success": return `btn btn-${variant}`;
+			default: return "btn btn-outline-primary";
+		}
+	}
+	runningAction = signal(null, ...ngDevMode ? [{ debugName: "runningAction" }] : /* istanbul ignore next */ []);
+	async onCustomAction(action) {
+		if (this.runningAction()) return;
+		if (action.confirmationMessageKey) {
+			const message = this.lang.t(action.confirmationMessageKey) || "Are you sure?";
+			if (!confirm(message)) return;
+		}
+		this.runningAction.set(action.name);
+		try {
+			await this.sparkService.executeCustomAction(this.type, action.name, this.item() || void 0);
+			this.customActionExecuted.emit({
+				action,
+				item: this.item()
+			});
+			if (action.refreshOnCompleted) {
+				const item = await this.loadItem();
+				this.item.set(item);
+				for (const subQuery of this.subQueries()) this.queryRefresh.request(subQuery.query);
+			}
+		} catch (e) {
+			const err = e;
+			this.errorMessage.set(err.error?.error || err.message || "Action failed");
+		} finally {
+			this.runningAction.set(null);
+		}
+	}
+	onEdit() {
+		this.edited.emit();
+		this.router.navigate([
+			"/po",
+			this.type,
+			this.id,
+			"edit"
+		]);
+	}
+	async onDelete() {
+		if (confirm(this.lang.t("common.confirmDelete"))) {
+			await this.sparkService.delete(this.type, this.id);
+			this.deleted.emit();
+			await this.returnNavigation.returnToList(this.entityType()?.name);
+		}
+	}
+	onBack() {
+		window.history.back();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SparkPoDetailComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.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 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 visibleCustomActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" [class]=\"customActionClass(action)\" [disabled]=\"runningAction() !== null\" (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        <!-- Add-on actions (SPARK_DETAIL_ACTIONS): each decides for itself whether it applies. -->\n        @if (detailContext(); as ctx) {\n          @for (action of detailActions; track action.id) {\n            <ng-container *bsPriorityNavItem=\"action.priority ?? 60\">\n              <ng-container *ngComponentOutlet=\"action.component; inputs: { context: ctx }\" />\n            </ng-container>\n          }\n        }\n      </bs-priority-nav>\n    </div>\n    <h2>\n      {{ currentItem.breadcrumb || currentItem.name }}\n      @if (isDeletedView()) {\n        <bs-badge [type]=\"colors.secondary\" class=\"align-middle ms-2 spark-deleted-badge\">{{ 'softDelete.deleted' | t }}</bs-badge>\n      }\n    </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 }}<spark-attribute-description [description]=\"attr.description\" /></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 }}<spark-attribute-description [description]=\"col.description\" /></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 — 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 === 'image') {\n                @let imageSrc = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (imageSrc) {\n                  <img [src]=\"imageSrc\" [alt]=\"(attr.label | resolveTranslation) || attr.name\" loading=\"lazy\"\n                       class=\"img-fluid rounded\" style=\"max-height: 12rem;\">\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'url') {\n                @let hrefVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (hrefVal) {\n                  <a [href]=\"hrefVal\" target=\"_blank\" rel=\"noopener noreferrer\">{{ hrefVal }}</a>\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 if (attr.dataType === 'date' || attr.dataType === 'datetime') {\n                <!--\n                  Formatted the same way, and in the same timezone, as the grid renders it.\n\n                  Before this, a detail page printed the raw wire value — `2026-12-31T23:59:00-08:00`\n                  in a definition list — while the grid showed `01/01/2027, 08:59` for the same\n                  document. Not a rounding difference: a DateTimeOffset whose offset differs from the\n                  viewer's can disagree on the DATE, so the two pages named different days for one car.\n\n                  The grid's meaning wins because it is the one a reader can act on: a timestamp is an\n                  instant, shown in the viewer's own zone. The originating offset is still on the wire\n                  for code that needs it — server-side logic, exports, \"which country's morning was\n                  this?\" — it simply is not what a viewer is shown by default.\n                -->\n                @let when = (attr.name | rawAttributeValue:item()) | parsedDate;\n                @if (when) {\n                  {{ when | date:(attr.dataType === 'date' ? 'mediumDate' : 'short') }}\n                } @else {\n                  {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n                }\n              } @else {\n                {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n              }\n              </dd>\n          </ng-template>\n    </bs-grid>\n    @for (subQuery of subQueries(); track subQuery.query) {\n      <!-- The entry's selectionMode overrides the query's own for this parent (#460, D17). -->\n      <spark-query-card [queryId]=\"subQuery.query\" [parentId]=\"currentItem.id!\" [parentType]=\"et.name\"\n                        [selectionMode]=\"subQuery.selectionMode ?? null\"\n                        [parentDeleted]=\"isDeletedView()\"\n                        [iconTemplate]=\"queryIconTemplate()\" [captionTemplate]=\"queryCaptionTemplate()\"\n                        [actionsTemplate]=\"queryActionsTemplate()\" />\n    }\n    @if (extraContentTemplate(); as extraContentTpl) {\n      <ng-container *ngTemplateOutlet=\"extraContentTpl; context: { $implicit: currentItem, entityType: et }\"></ng-container>\n    }\n    <!-- Add-on panels (SPARK_DETAIL_PANELS), e.g. <spark-po-history>. -->\n    @if (detailContext(); as ctx) {\n      @for (panel of detailPanels; track panel.id) {\n        <div class=\"spark-detail-panel m-3\">\n          <ng-container *ngComponentOutlet=\"panel.component; inputs: { context: ctx }\" />\n        </div>\n      }\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{--_bleed-block: var(--spark-content-inset-block, 0px);--_bleed-inline: var(--spark-content-inset-inline, 0px);--_gutter: var(--spark-actionbar-gutter, 1rem);position:sticky;top:calc(-1 * var(--_bleed-block));z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem;margin-inline:calc(-1 * var(--_bleed-inline));padding-inline:calc(var(--_bleed-inline) + var(--_gutter))}.spark-actionbar .btn{border-radius:0}.spark-actionbar-wide{--spark-actionbar-gutter: 1.5rem}.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}.container{--spark-content-inset-inline: 0px}.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: BsBadgeComponent,
+				selector: "bs-badge",
+				inputs: [
+					"type",
+					"unit",
+					"decorative"
+				]
+			},
+			{
+				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",
+					"searchable",
+					"selectionMode",
+					"deleted",
+					"parentDeleted",
+					"iconTemplate",
+					"captionTemplate",
+					"actionsTemplate",
+					"rowRoute"
+				],
+				outputs: [
+					"error",
+					"rowClicked",
+					"customActionExecuted"
+				]
+			},
+			{
+				kind: "component",
+				type: SparkGridCellComponent,
+				selector: "spark-grid-cell",
+				inputs: [
+					"column",
+					"display",
+					"rendererValue",
+					"item",
+					"chips",
+					"link"
+				]
+			},
+			{
+				kind: "component",
+				type: SparkAttributeDescriptionComponent,
+				selector: "spark-attribute-description",
+				inputs: ["description", "position"]
+			},
+			{
+				kind: "pipe",
+				type: i1.DatePipe,
+				name: "date"
+			},
+			{
+				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"
+			},
+			{
+				kind: "pipe",
+				type: ParsedDatePipe,
+				name: "parsedDate"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SparkPoDetailComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-po-detail",
+			imports: [
+				CommonModule,
+				NgTemplateOutlet,
+				NgComponentOutlet,
+				RouterModule,
+				BsAlertComponent,
+				BsBadgeComponent,
+				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,
+				ParsedDatePipe,
+				SparkAttributeDescriptionComponent
+			],
+			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 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 visibleCustomActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" [class]=\"customActionClass(action)\" [disabled]=\"runningAction() !== null\" (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        <!-- Add-on actions (SPARK_DETAIL_ACTIONS): each decides for itself whether it applies. -->\n        @if (detailContext(); as ctx) {\n          @for (action of detailActions; track action.id) {\n            <ng-container *bsPriorityNavItem=\"action.priority ?? 60\">\n              <ng-container *ngComponentOutlet=\"action.component; inputs: { context: ctx }\" />\n            </ng-container>\n          }\n        }\n      </bs-priority-nav>\n    </div>\n    <h2>\n      {{ currentItem.breadcrumb || currentItem.name }}\n      @if (isDeletedView()) {\n        <bs-badge [type]=\"colors.secondary\" class=\"align-middle ms-2 spark-deleted-badge\">{{ 'softDelete.deleted' | t }}</bs-badge>\n      }\n    </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 }}<spark-attribute-description [description]=\"attr.description\" /></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 }}<spark-attribute-description [description]=\"col.description\" /></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 — 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 === 'image') {\n                @let imageSrc = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (imageSrc) {\n                  <img [src]=\"imageSrc\" [alt]=\"(attr.label | resolveTranslation) || attr.name\" loading=\"lazy\"\n                       class=\"img-fluid rounded\" style=\"max-height: 12rem;\">\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'url') {\n                @let hrefVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (hrefVal) {\n                  <a [href]=\"hrefVal\" target=\"_blank\" rel=\"noopener noreferrer\">{{ hrefVal }}</a>\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 if (attr.dataType === 'date' || attr.dataType === 'datetime') {\n                <!--\n                  Formatted the same way, and in the same timezone, as the grid renders it.\n\n                  Before this, a detail page printed the raw wire value — `2026-12-31T23:59:00-08:00`\n                  in a definition list — while the grid showed `01/01/2027, 08:59` for the same\n                  document. Not a rounding difference: a DateTimeOffset whose offset differs from the\n                  viewer's can disagree on the DATE, so the two pages named different days for one car.\n\n                  The grid's meaning wins because it is the one a reader can act on: a timestamp is an\n                  instant, shown in the viewer's own zone. The originating offset is still on the wire\n                  for code that needs it — server-side logic, exports, \"which country's morning was\n                  this?\" — it simply is not what a viewer is shown by default.\n                -->\n                @let when = (attr.name | rawAttributeValue:item()) | parsedDate;\n                @if (when) {\n                  {{ when | date:(attr.dataType === 'date' ? 'mediumDate' : 'short') }}\n                } @else {\n                  {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n                }\n              } @else {\n                {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n              }\n              </dd>\n          </ng-template>\n    </bs-grid>\n    @for (subQuery of subQueries(); track subQuery.query) {\n      <!-- The entry's selectionMode overrides the query's own for this parent (#460, D17). -->\n      <spark-query-card [queryId]=\"subQuery.query\" [parentId]=\"currentItem.id!\" [parentType]=\"et.name\"\n                        [selectionMode]=\"subQuery.selectionMode ?? null\"\n                        [parentDeleted]=\"isDeletedView()\"\n                        [iconTemplate]=\"queryIconTemplate()\" [captionTemplate]=\"queryCaptionTemplate()\"\n                        [actionsTemplate]=\"queryActionsTemplate()\" />\n    }\n    @if (extraContentTemplate(); as extraContentTpl) {\n      <ng-container *ngTemplateOutlet=\"extraContentTpl; context: { $implicit: currentItem, entityType: et }\"></ng-container>\n    }\n    <!-- Add-on panels (SPARK_DETAIL_PANELS), e.g. <spark-po-history>. -->\n    @if (detailContext(); as ctx) {\n      @for (panel of detailPanels; track panel.id) {\n        <div class=\"spark-detail-panel m-3\">\n          <ng-container *ngComponentOutlet=\"panel.component; inputs: { context: ctx }\" />\n        </div>\n      }\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{--_bleed-block: var(--spark-content-inset-block, 0px);--_bleed-inline: var(--spark-content-inset-inline, 0px);--_gutter: var(--spark-actionbar-gutter, 1rem);position:sticky;top:calc(-1 * var(--_bleed-block));z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem;margin-inline:calc(-1 * var(--_bleed-inline));padding-inline:calc(var(--_bleed-inline) + var(--_gutter))}.spark-actionbar .btn{border-radius:0}.spark-actionbar-wide{--spark-actionbar-gutter: 1.5rem}.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}.container{--spark-content-inset-inline: 0px}.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"]
+		}]
+	}
+});
 export { SparkPoDetailComponent };
-//# sourceMappingURL=mintplayer-ng-spark-po-detail.mjs.map
+
+//# sourceMappingURL=mintplayer-ng-spark-po-detail.mjs.map