@mintplayer/ng-spark 0.3.0 → 22.0.0

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

@@ -7,10 +7,10 @@ import * as i2 from '@angular/router';
 import { RouterModule, ActivatedRoute, Router } from '@angular/router';
 import { Color } from '@mintplayer/ng-bootstrap';
 import { BsAlertComponent } from '@mintplayer/ng-bootstrap/alert';
-import { BsButtonGroupComponent } from '@mintplayer/ng-bootstrap/button-group';
 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';
@@ -18,37 +18,48 @@ import { SparkService, SparkLanguageService } from '@mintplayer/ng-spark/service
 import { ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe, RawAttributeValuePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, ArrayValuePipe, ReferenceLinkRoutePipe } from '@mintplayer/ng-spark/pipes';
 import { SparkIconComponent } from '@mintplayer/ng-spark/icon';
 import { DatatableSettings, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective } from '@mintplayer/ng-bootstrap/datatable';
-import { VirtualDatatableDataSource, BsVirtualDatatableComponent, BsVirtualRowTemplateDirective } from '@mintplayer/ng-bootstrap/virtual-datatable';
 import { SPARK_ATTRIBUTE_RENDERERS } from '@mintplayer/ng-spark/renderers';
 import { hasShowedOnFlag, ShowedOn } from '@mintplayer/ng-spark/models';
 
 class SparkSubQueryComponent {
     sparkService = inject(SparkService);
     rendererRegistry = inject(SPARK_ATTRIBUTE_RENDERERS);
-    queryId = input.required(...(ngDevMode ? [{ debugName: "queryId" }] : []));
-    parentId = input.required(...(ngDevMode ? [{ debugName: "parentId" }] : []));
-    parentType = input.required(...(ngDevMode ? [{ debugName: "parentType" }] : []));
-    query = signal(null, ...(ngDevMode ? [{ debugName: "query" }] : []));
-    entityType = signal(null, ...(ngDevMode ? [{ debugName: "entityType" }] : []));
-    allEntityTypes = signal([], ...(ngDevMode ? [{ debugName: "allEntityTypes" }] : []));
-    paginationData = signal(undefined, ...(ngDevMode ? [{ debugName: "paginationData" }] : []));
-    lookupReferenceOptions = signal({}, ...(ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : []));
-    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    canRead = signal(false, ...(ngDevMode ? [{ debugName: "canRead" }] : []));
+    queryId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "queryId" }] : /* istanbul ignore next */ []));
+    parentId = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parentId" }] : /* istanbul ignore next */ []));
+    parentType = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parentType" }] : /* istanbul ignore next */ []));
+    query = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    entityType = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entityType" }] : /* istanbul ignore next */ []));
+    allEntityTypes = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allEntityTypes" }] : /* istanbul ignore next */ []));
+    resultCount = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resultCount" }] : /* istanbul ignore next */ []));
+    lookupReferenceOptions = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : /* istanbul ignore next */ []));
+    loading = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    canRead = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canRead" }] : /* istanbul ignore next */ []));
     settings = signal(new DatatableSettings({
         perPage: { values: [10, 25, 50], selected: 10 },
         page: { values: [1], selected: 1 },
         sortColumns: []
-    }), ...(ngDevMode ? [{ debugName: "settings" }] : []));
-    virtualDataSource = signal(null, ...(ngDevMode ? [{ debugName: "virtualDataSource" }] : []));
-    virtualSettings = signal(new DatatableSettings({
-        sortColumns: []
-    }), ...(ngDevMode ? [{ debugName: "virtualSettings" }] : []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []));
+    fetchFn = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fetchFn" }] : /* istanbul ignore next */ []));
+    isVirtualScrolling = computed(() => this.query()?.renderMode === 'VirtualScrolling', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isVirtualScrolling" }] : /* istanbul ignore next */ []));
     visibleAttributes = computed(() => {
         return this.entityType()?.attributes
             .filter(a => a.isVisible && hasShowedOnFlag(a.showedOn, ShowedOn.Query))
             .sort((a, b) => a.order - b.order) || [];
-    }, ...(ngDevMode ? [{ debugName: "visibleAttributes" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleAttributes" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const qId = this.queryId();
@@ -61,6 +72,8 @@ class SparkSubQueryComponent {
     }
     async loadData(queryId, parentId, parentType) {
         this.loading.set(true);
+        this.resultCount.set(null);
+        this.fetchFn.set(null);
         try {
             const [resolvedQuery, entityTypes] = await Promise.all([
                 this.sparkService.getQuery(queryId),
@@ -81,66 +94,42 @@ class SparkSubQueryComponent {
                     this.canRead.set(permissions.canRead);
                 }
             }
-            if (resolvedQuery.renderMode === 'VirtualScrolling') {
-                this.virtualSettings.set(new DatatableSettings({ sortColumns: initialSortColumns }));
-                this.virtualDataSource.set(new VirtualDatatableDataSource((skip, take) => this.sparkService.executeQuery(resolvedQuery.id, {
-                    sortColumns: this.virtualSettings().sortColumns,
-                    skip, take,
-                    parentId, parentType,
-                }).then(r => ({ data: r.data, totalRecords: r.totalRecords })), 50));
-            }
-            else {
-                this.settings.set(new DatatableSettings({
-                    perPage: { values: [10, 25, 50], selected: 10 },
-                    page: { values: [1], selected: 1 },
-                    sortColumns: initialSortColumns
-                }));
-                await this.loadPage(resolvedQuery.id, parentId, parentType);
-            }
+            this.settings.set(new DatatableSettings({
+                perPage: { values: [10, 25, 50], selected: 10 },
+                page: { values: [1], selected: 1 },
+                sortColumns: initialSortColumns
+            }));
+            // The datatable drives paging/sorting via [(settings)] and calls fetchFn
+            // per page. Virtual scrolling is just the [virtualScroll] template flag.
+            this.fetchFn.set(this.makeFetch(resolvedQuery, parentId, parentType));
             this.loadLookupReferenceOptions();
         }
         catch {
-            this.paginationData.set(undefined);
+            this.fetchFn.set(null);
         }
         finally {
             this.loading.set(false);
         }
     }
-    async loadPage(queryId, parentId, parentType) {
-        const s = this.settings();
-        const result = await this.sparkService.executeQuery(queryId, {
-            sortColumns: s.sortColumns,
-            skip: (s.page.selected - 1) * s.perPage.selected,
-            take: s.perPage.selected,
+    makeFetch(query, parentId, parentType) {
+        return (req) => this.sparkService.executeQuery(query.id, {
+            sortColumns: req.sortColumns,
+            skip: (req.page - 1) * req.perPage,
+            take: req.perPage,
             parentId, parentType,
+        }).then(r => {
+            this.resultCount.set(r.totalRecords);
+            return {
+                data: r.data,
+                totalRecords: r.totalRecords,
+                totalPages: Math.ceil(r.totalRecords / req.perPage) || 1,
+                perPage: req.perPage,
+                page: req.page,
+            };
+        }).catch(() => {
+            this.resultCount.set(0);
+            return { data: [], totalRecords: 0, totalPages: 1, perPage: req.perPage, page: req.page };
         });
-        const totalPages = Math.ceil(result.totalRecords / s.perPage.selected) || 1;
-        this.paginationData.set({
-            data: result.data,
-            totalRecords: result.totalRecords,
-            totalPages,
-            perPage: s.perPage.selected,
-            page: s.page.selected,
-        });
-        s.page.values = Array.from({ length: totalPages }, (_, i) => i + 1);
-    }
-    onSettingsChange() {
-        const q = this.query();
-        if (!q)
-            return;
-        if (q.renderMode === 'VirtualScrolling') {
-            this.virtualDataSource()?.reset();
-            const pId = this.parentId();
-            const pType = this.parentType();
-            this.virtualDataSource.set(new VirtualDatatableDataSource((skip, take) => this.sparkService.executeQuery(q.id, {
-                sortColumns: this.virtualSettings().sortColumns,
-                skip, take,
-                parentId: pId, parentType: pType,
-            }).then(r => ({ data: r.data, totalRecords: r.totalRecords })), 50));
-        }
-        else {
-            this.loadPage(q.id, this.parentId(), this.parentType());
-        }
     }
     async loadLookupReferenceOptions() {
         const lookupAttrs = this.visibleAttributes().filter(a => a.lookupReferenceType);
@@ -166,12 +155,12 @@ class SparkSubQueryComponent {
             options: attr.rendererOptions,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SparkSubQueryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SparkSubQueryComponent, isStandalone: true, selector: "spark-sub-query", inputs: { queryId: { classPropertyName: "queryId", publicName: "queryId", isSignal: true, isRequired: true, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: true, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (query(); as q) {\n  <bs-card style=\"display: block; margin: 1rem 0;\">\n    <bs-card-header>{{ (q.description | resolveTranslation) || q.name }}</bs-card-header>\n    @if (loading()) {\n      <div class=\"text-center p-3\">\n        <bs-spinner />\n      </div>\n    } @else if (q.renderMode === 'VirtualScrolling') {\n      @if (virtualDataSource(); as vds) {\n        <div class=\"p-3 d-flex flex-column\" style=\"height: 400px;\">\n          <bs-virtual-datatable class=\"flex-grow-1 overflow-hidden\"\n              [(settings)]=\"virtualSettings\"\n              [dataSource]=\"vds\"\n              [isResponsive]=\"true\"\n              (settingsChange)=\"onSettingsChange()\">\n            @for (attr of visibleAttributes(); track attr.id) {\n              <div *bsDatatableColumn=\"attr.name; sortable: true\">\n                {{ (attr.label | resolveTranslation) || attr.name }}\n              </div>\n            }\n\n            <ng-template bsVirtualRowTemplate let-item>\n              @for (attr of visibleAttributes(); track attr.id; let first = $first) {\n                <td>\n                  @if (item) {\n                    @if (first && canRead()) {\n                      <a [routerLink]=\"['/po', entityType()!.alias || entityType()!.id, item.id]\">\n                        <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: item, attr: attr }\"></ng-container>\n                      </a>\n                    } @else {\n                      <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: item, attr: attr }\"></ng-container>\n                    }\n                  } @else {\n                    &nbsp;\n                  }\n                </td>\n              }\n            </ng-template>\n          </bs-virtual-datatable>\n        </div>\n      }\n    } @else {\n      <div class=\"p-3\">\n        @if (!paginationData() || paginationData()!.totalRecords === 0) {\n          <div class=\"text-center text-muted\">\n            {{ 'common.noItemsFound' | t }}\n          </div>\n        } @else {\n          <bs-datatable [(settings)]=\"settings\" (settingsChange)=\"onSettingsChange()\">\n            @for (attr of visibleAttributes(); track attr.id) {\n              <div *bsDatatableColumn=\"attr.name; sortable: true\">\n                {{ (attr.label | resolveTranslation) || attr.name }}\n              </div>\n            }\n\n            <tr *bsRowTemplate=\"let item of paginationData()\">\n              @for (attr of visibleAttributes(); track attr.id; let first = $first) {\n                <td>\n                  @if (first && canRead()) {\n                    <a [routerLink]=\"['/po', entityType()!.alias || entityType()!.id, item.id]\">\n                      <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: item, attr: attr }\"></ng-container>\n                    </a>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: item, attr: attr }\"></ng-container>\n                  }\n                </td>\n              }\n            </tr>\n          </bs-datatable>\n        }\n      </div>\n    }\n  </bs-card>\n}\n\n<ng-template #cellContent let-item let-attr=\"attr\">\n  @if (getColumnRendererComponent(attr); as rendererType) {\n    <ng-container *ngComponentOutlet=\"rendererType; inputs: getColumnRendererInputs(item, attr)\"></ng-container>\n  } @else if (attr.dataType === 'boolean') {\n    <input type=\"checkbox\"\n      [checked]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n      disabled\n      onclick=\"return false;\">\n  } @else if (attr.dataType === 'color') {\n    @let colorVal = (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes());\n    @if (colorVal) {\n      <span class=\"d-inline-block align-middle border rounded\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n    }\n  } @else {\n    {{ (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) }}\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: BsCardComponent, selector: "bs-card", inputs: ["rounded"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["noPadding"] }, { kind: "component", type: BsDatatableComponent, selector: "bs-datatable", inputs: ["data"], outputs: ["dataChange"] }, { kind: "directive", type: BsDatatableColumnDirective, selector: "[bsDatatableColumn]", inputs: ["bsDatatableColumn", "bsDatatableColumnSortable"] }, { kind: "directive", type: BsRowTemplateDirective, selector: "[bsRowTemplate]", inputs: ["bsRowTemplateOf"] }, { kind: "component", type: BsVirtualDatatableComponent, selector: "bs-virtual-datatable", inputs: ["dataSource", "isResponsive", "itemSize"] }, { kind: "directive", type: BsVirtualRowTemplateDirective, selector: "[bsVirtualRowTemplate]" }, { kind: "component", type: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }, { kind: "pipe", type: AttributeValuePipe, name: "attributeValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SparkSubQueryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SparkSubQueryComponent, isStandalone: true, selector: "spark-sub-query", inputs: { queryId: { classPropertyName: "queryId", publicName: "queryId", isSignal: true, isRequired: true, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: true, transformFunction: null }, parentType: { classPropertyName: "parentType", publicName: "parentType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (query(); as q) {\n  <bs-card style=\"display: block; margin: 1rem 0;\">\n    <bs-card-header>{{ (q.description | resolveTranslation) || q.name }}</bs-card-header>\n    @if (loading()) {\n      <div class=\"text-center p-3\">\n        <bs-spinner />\n      </div>\n    } @else {\n      <div class=\"p-3\">\n        <bs-datatable\n            [virtualScroll]=\"isVirtualScrolling()\"\n            [itemSize]=\"40\"\n            [isResponsive]=\"isVirtualScrolling()\"\n            [fetch]=\"fetchFn()\"\n            [(settings)]=\"settings\">\n          @for (attr of visibleAttributes(); track attr.id) {\n            <div *bsDatatableColumn=\"attr.name; sortable: true\">\n              {{ (attr.label | resolveTranslation) || attr.name }}\n            </div>\n          }\n\n          <ng-container *bsRowTemplate=\"let item\">\n            @let row = $any(item);\n            @for (attr of visibleAttributes(); track attr.id; let first = $first) {\n              <td>\n                @if (row) {\n                  @if (first && canRead()) {\n                    <a [routerLink]=\"['/po', entityType()!.alias || entityType()!.id, row.id]\">\n                      <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n                    </a>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n                  }\n                } @else {\n                  &nbsp;\n                }\n              </td>\n            }\n          </ng-container>\n        </bs-datatable>\n        @if (resultCount() === 0) {\n          <div class=\"text-center text-muted\">\n            {{ 'common.noItemsFound' | t }}\n          </div>\n        }\n      </div>\n    }\n  </bs-card>\n}\n\n<ng-template #cellContent let-item let-attr=\"attr\">\n  @if (getColumnRendererComponent(attr); as rendererType) {\n    <ng-container *ngComponentOutlet=\"rendererType; inputs: getColumnRendererInputs(item, attr)\"></ng-container>\n  } @else if (attr.dataType === 'boolean') {\n    <input type=\"checkbox\"\n      [checked]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n      disabled\n      onclick=\"return false;\">\n  } @else if (attr.dataType === 'color') {\n    @let colorVal = (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes());\n    @if (colorVal) {\n      <span class=\"d-inline-block align-middle border rounded\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n    }\n  } @else {\n    {{ (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) }}\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: BsCardComponent, selector: "bs-card", inputs: ["color", "outline"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["color", "navStyle"] }, { kind: "component", type: BsDatatableComponent, selector: "bs-datatable", inputs: ["columns", "data", "fetch", "settings", "selectionMode", "selectable", "selection", "rowKey", "resizableColumns", "pagination", "virtualScroll", "itemSize", "virtualBuffer", "isResponsive", "compareWith", "tree", "idKey", "childCountKey", "treeIndent", "expandedIds", "selectionStrategy"], outputs: ["settingsChange", "selectionChange", "rowClick", "rowDblClick", "rowContextMenu", "expandedIdsChange", "rowExpand", "rowCollapse"] }, { kind: "directive", type: BsDatatableColumnDirective, selector: "[bsDatatableColumn]", inputs: ["bsDatatableColumn", "bsDatatableColumnSortable"] }, { kind: "directive", type: BsRowTemplateDirective, selector: "[bsRowTemplate]" }, { kind: "component", type: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "pipe", type: ResolveTranslationPipe, name: "resolveTranslation" }, { kind: "pipe", type: TranslateKeyPipe, name: "t" }, { kind: "pipe", type: AttributeValuePipe, name: "attributeValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SparkSubQueryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SparkSubQueryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spark-sub-query', imports: [CommonModule, NgComponentOutlet, RouterModule, BsCardComponent, BsCardHeaderComponent, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective, BsVirtualDatatableComponent, BsVirtualRowTemplateDirective, BsTableComponent, BsSpinnerComponent, ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (query(); as q) {\n  <bs-card style=\"display: block; margin: 1rem 0;\">\n    <bs-card-header>{{ (q.description | resolveTranslation) || q.name }}</bs-card-header>\n    @if (loading()) {\n      <div class=\"text-center p-3\">\n        <bs-spinner />\n      </div>\n    } @else if (q.renderMode === 'VirtualScrolling') {\n      @if (virtualDataSource(); as vds) {\n        <div class=\"p-3 d-flex flex-column\" style=\"height: 400px;\">\n          <bs-virtual-datatable class=\"flex-grow-1 overflow-hidden\"\n              [(settings)]=\"virtualSettings\"\n              [dataSource]=\"vds\"\n              [isResponsive]=\"true\"\n              (settingsChange)=\"onSettingsChange()\">\n            @for (attr of visibleAttributes(); track attr.id) {\n              <div *bsDatatableColumn=\"attr.name; sortable: true\">\n                {{ (attr.label | resolveTranslation) || attr.name }}\n              </div>\n            }\n\n            <ng-template bsVirtualRowTemplate let-item>\n              @for (attr of visibleAttributes(); track attr.id; let first = $first) {\n                <td>\n                  @if (item) {\n                    @if (first && canRead()) {\n                      <a [routerLink]=\"['/po', entityType()!.alias || entityType()!.id, item.id]\">\n                        <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: item, attr: attr }\"></ng-container>\n                      </a>\n                    } @else {\n                      <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: item, attr: attr }\"></ng-container>\n                    }\n                  } @else {\n                    &nbsp;\n                  }\n                </td>\n              }\n            </ng-template>\n          </bs-virtual-datatable>\n        </div>\n      }\n    } @else {\n      <div class=\"p-3\">\n        @if (!paginationData() || paginationData()!.totalRecords === 0) {\n          <div class=\"text-center text-muted\">\n            {{ 'common.noItemsFound' | t }}\n          </div>\n        } @else {\n          <bs-datatable [(settings)]=\"settings\" (settingsChange)=\"onSettingsChange()\">\n            @for (attr of visibleAttributes(); track attr.id) {\n              <div *bsDatatableColumn=\"attr.name; sortable: true\">\n                {{ (attr.label | resolveTranslation) || attr.name }}\n              </div>\n            }\n\n            <tr *bsRowTemplate=\"let item of paginationData()\">\n              @for (attr of visibleAttributes(); track attr.id; let first = $first) {\n                <td>\n                  @if (first && canRead()) {\n                    <a [routerLink]=\"['/po', entityType()!.alias || entityType()!.id, item.id]\">\n                      <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: item, attr: attr }\"></ng-container>\n                    </a>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: item, attr: attr }\"></ng-container>\n                  }\n                </td>\n              }\n            </tr>\n          </bs-datatable>\n        }\n      </div>\n    }\n  </bs-card>\n}\n\n<ng-template #cellContent let-item let-attr=\"attr\">\n  @if (getColumnRendererComponent(attr); as rendererType) {\n    <ng-container *ngComponentOutlet=\"rendererType; inputs: getColumnRendererInputs(item, attr)\"></ng-container>\n  } @else if (attr.dataType === 'boolean') {\n    <input type=\"checkbox\"\n      [checked]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n      disabled\n      onclick=\"return false;\">\n  } @else if (attr.dataType === 'color') {\n    @let colorVal = (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes());\n    @if (colorVal) {\n      <span class=\"d-inline-block align-middle border rounded\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n    }\n  } @else {\n    {{ (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) }}\n  }\n</ng-template>\n" }]
+            args: [{ selector: 'spark-sub-query', imports: [CommonModule, NgComponentOutlet, RouterModule, BsCardComponent, BsCardHeaderComponent, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective, BsSpinnerComponent, ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (query(); as q) {\n  <bs-card style=\"display: block; margin: 1rem 0;\">\n    <bs-card-header>{{ (q.description | resolveTranslation) || q.name }}</bs-card-header>\n    @if (loading()) {\n      <div class=\"text-center p-3\">\n        <bs-spinner />\n      </div>\n    } @else {\n      <div class=\"p-3\">\n        <bs-datatable\n            [virtualScroll]=\"isVirtualScrolling()\"\n            [itemSize]=\"40\"\n            [isResponsive]=\"isVirtualScrolling()\"\n            [fetch]=\"fetchFn()\"\n            [(settings)]=\"settings\">\n          @for (attr of visibleAttributes(); track attr.id) {\n            <div *bsDatatableColumn=\"attr.name; sortable: true\">\n              {{ (attr.label | resolveTranslation) || attr.name }}\n            </div>\n          }\n\n          <ng-container *bsRowTemplate=\"let item\">\n            @let row = $any(item);\n            @for (attr of visibleAttributes(); track attr.id; let first = $first) {\n              <td>\n                @if (row) {\n                  @if (first && canRead()) {\n                    <a [routerLink]=\"['/po', entityType()!.alias || entityType()!.id, row.id]\">\n                      <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n                    </a>\n                  } @else {\n                    <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n                  }\n                } @else {\n                  &nbsp;\n                }\n              </td>\n            }\n          </ng-container>\n        </bs-datatable>\n        @if (resultCount() === 0) {\n          <div class=\"text-center text-muted\">\n            {{ 'common.noItemsFound' | t }}\n          </div>\n        }\n      </div>\n    }\n  </bs-card>\n}\n\n<ng-template #cellContent let-item let-attr=\"attr\">\n  @if (getColumnRendererComponent(attr); as rendererType) {\n    <ng-container *ngComponentOutlet=\"rendererType; inputs: getColumnRendererInputs(item, attr)\"></ng-container>\n  } @else if (attr.dataType === 'boolean') {\n    <input type=\"checkbox\"\n      [checked]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n      disabled\n      onclick=\"return false;\">\n  } @else if (attr.dataType === 'color') {\n    @let colorVal = (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes());\n    @if (colorVal) {\n      <span class=\"d-inline-block align-middle border rounded\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n    }\n  } @else {\n    {{ (attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) }}\n  }\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { queryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryId", required: true }] }], parentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentId", required: true }] }], parentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentType", required: true }] }] } });
 
 class SparkPoDetailComponent {
@@ -180,25 +169,38 @@ class SparkPoDetailComponent {
     sparkService = inject(SparkService);
     lang = inject(SparkLanguageService);
     rendererRegistry = inject(SPARK_ATTRIBUTE_RENDERERS);
-    showCustomActions = input(true, ...(ngDevMode ? [{ debugName: "showCustomActions" }] : []));
-    extraActionsTemplate = input(null, ...(ngDevMode ? [{ debugName: "extraActionsTemplate" }] : []));
-    extraContentTemplate = input(null, ...(ngDevMode ? [{ debugName: "extraContentTemplate" }] : []));
+    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 */ []));
     edited = output();
     deleted = output();
     customActionExecuted = output();
     colors = Color;
-    errorMessage = signal(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
-    entityType = signal(null, ...(ngDevMode ? [{ debugName: "entityType" }] : []));
-    allEntityTypes = signal([], ...(ngDevMode ? [{ debugName: "allEntityTypes" }] : []));
-    item = signal(null, ...(ngDevMode ? [{ debugName: "item" }] : []));
-    lookupReferenceOptions = signal({}, ...(ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : []));
-    asDetailTypes = signal({}, ...(ngDevMode ? [{ debugName: "asDetailTypes" }] : []));
-    asDetailReferenceOptions = signal({}, ...(ngDevMode ? [{ debugName: "asDetailReferenceOptions" }] : []));
+    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, ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
-    canDelete = signal(false, ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
-    customActions = signal([], ...(ngDevMode ? [{ debugName: "customActions" }] : []));
+    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 */ []));
     constructor() {
         this.route.paramMap.pipe(takeUntilDestroyed()).subscribe(params => this.onParamsChange(params));
     }
@@ -235,13 +237,15 @@ class SparkPoDetailComponent {
         return this.entityType()?.attributes
             .filter(a => a.isVisible && hasShowedOnFlag(a.showedOn, ShowedOn.PersistentObject))
             .sort((a, b) => a.order - b.order) || [];
-    }, ...(ngDevMode ? [{ debugName: "visibleAttributes" }] : []));
+    }, /* @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));
-    }, ...(ngDevMode ? [{ debugName: "ungroupedAttributes" }] : []));
+    }, /* @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) : [];
@@ -251,7 +255,8 @@ class SparkPoDetailComponent {
             return [SparkPoDetailComponent.DEFAULT_TAB, ...definedTabs];
         }
         return definedTabs;
-    }, ...(ngDevMode ? [{ debugName: "resolvedTabs" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTabs" }] : /* istanbul ignore next */ []));
     groupsForTab(tab) {
         const groups = this.entityType()?.groups || [];
         if (tab.id === '__default__') {
@@ -352,12 +357,12 @@ class SparkPoDetailComponent {
     onBack() {
         window.history.back();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SparkPoDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SparkPoDetailComponent, isStandalone: true, selector: "spark-po-detail", inputs: { showCustomActions: { classPropertyName: "showCustomActions", publicName: "showCustomActions", isSignal: true, isRequired: false, transformFunction: null }, extraActionsTemplate: { classPropertyName: "extraActionsTemplate", publicName: "extraActionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraContentTemplate: { classPropertyName: "extraContentTemplate", publicName: "extraContentTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edited: "edited", deleted: "deleted", customActionExecuted: "customActionExecuted" }, ngImport: i0, template: "<bs-container>\n<div class=\"container\">\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  } @else if (item(); as currentItem) {\n    @if (entityType(); as et) {\n    <div class=\"d-flex justify-content-between align-items-center mb-4\">\n      <h2>{{ currentItem.breadcrumb || currentItem.name }}</h2>\n      <bs-button-group>\n        <button class=\"btn btn-outline-secondary\" (click)=\"onBack()\">\n          <spark-icon name=\"arrow-left\" /> {{ 'common.back' | t }}\n        </button>\n        @if (canEdit()) {\n          <button class=\"btn btn-primary\" (click)=\"onEdit()\">\n            <spark-icon name=\"pencil\" /> {{ 'common.edit' | t }}\n          </button>\n        }\n        @if (extraActionsTemplate(); as extraActionsTpl) {\n          <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n        }\n        @if (showCustomActions()) {\n          @for (action of customActions(); track action.name) {\n            <button class=\"btn btn-outline-primary\" (click)=\"onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        }\n        @if (canDelete()) {\n          <button class=\"btn btn-danger\" (click)=\"onDelete()\">\n            <spark-icon name=\"trash\" /> {{ 'common.delete' | t }}\n          </button>\n        }\n      </bs-button-group>\n    </div>\n\n    <bs-grid>\n      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"detailTabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n      <ng-template #detailTabContent let-tab>\n        @if (tab.id === '__default__') {\n          @let ungroupedAttrs = ungroupedAttributes();\n          @if (ungroupedAttrs.length > 0) {\n            <bs-card style=\"display: block; margin: 1rem;\">\n              <div class=\"p-3\">\n                <dl bsRow>\n                  @for (attr of ungroupedAttrs; track attr.id) {\n                    <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                  }\n                </dl>\n              </div>\n            </bs-card>\n          }\n        }\n        @for (group of groupsForTab(tab); track group.id) {\n          @if (attrsForGroup(group); as groupAttrs) {\n            @if (groupAttrs.length > 0) {\n              <bs-card style=\"display: block; margin: 1rem;\">\n                @if (group.label) {\n                  <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n                }\n                <div class=\"p-3\">\n                  <dl bsRow>\n                    @for (attr of groupAttrs; track attr.id) {\n                      <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                    }\n                  </dl>\n                </div>\n              </bs-card>\n            }\n          }\n        }\n      </ng-template>\n\n          <ng-template #detailAttrField let-attr let-currentItem=\"item\">\n              <dt [sm]=\"3\">{{ (attr.label | resolveTranslation) || attr.name }}</dt>\n              <dd [sm]=\"9\">\n              @if (getDetailRendererComponent(attr); as rendererType) {\n                <ng-container *ngComponentOutlet=\"rendererType; inputs: getDetailRendererInputs(attr, currentItem)\"></ng-container>\n              } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n                <bs-table [isResponsive]=\"true\">\n                  <thead>\n                    <tr>\n                      @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                        <th>{{ (col.label | resolveTranslation) || col.name }}</th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody class=\"align-middle\">\n                    @for (row of (attr.name | arrayValue:currentItem); track $index) {\n                      <tr>\n                        @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                          <td>\n                            @if (col.dataType === 'Reference' && col.referenceType) {\n                              @let route = (col.referenceType | referenceLinkRoute:row[col.name]:allEntityTypes());\n                              @if (route) {\n                                <a [routerLink]=\"route\">{{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}</a>\n                              } @else {\n                                {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                              }\n                            } @else {\n                              {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                            }\n                          </td>\n                        }\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length\" class=\"text-center text-muted\">\n                          {{ 'common.noItemsFound' | t }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </bs-table>\n              } @else if (attr.dataType === 'boolean') {\n                <input type=\"checkbox\"\n                  [checked]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n                  [indeterminate]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n                  disabled\n                  onclick=\"return false;\"\n                  style=\"opacity: 1;\">\n              } @else if (attr.dataType === 'color') {\n                @let colorVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (colorVal) {\n                  <span class=\"d-inline-block align-middle border rounded me-2\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n                  {{ colorVal }}\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.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 {\n                {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n              }\n              </dd>\n          </ng-template>\n    </bs-grid>\n    @if (et.queries?.length) {\n      @for (queryAlias of et.queries; track queryAlias) {\n        <spark-sub-query [queryId]=\"queryAlias\" [parentId]=\"currentItem.id!\" [parentType]=\"et.name\" />\n      }\n    }\n    @if (extraContentTemplate(); as extraContentTpl) {\n      <ng-container *ngTemplateOutlet=\"extraContentTpl; context: { $implicit: currentItem, entityType: et }\"></ng-container>\n    }\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n</bs-container>\n", 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", "routerLink"] }, { kind: "component", type: BsAlertComponent, selector: "bs-alert", inputs: ["type", "isVisible"], outputs: ["isVisibleChange", "afterOpenedOrClosed"] }, { kind: "component", type: BsButtonGroupComponent, selector: "bs-button-group" }, { kind: "component", type: BsCardComponent, selector: "bs-card", inputs: ["rounded"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["noPadding"] }, { 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: BsTableComponent, selector: "bs-table", inputs: ["isResponsive", "striped", "hover"] }, { kind: "component", type: BsTabControlComponent, selector: "bs-tab-control", inputs: ["border", "restrictDragging", "selectFirstTab", "tabsPosition", "allowDragDrop"] }, { kind: "component", type: BsTabPageComponent, selector: "bs-tab-page", inputs: ["disabled"] }, { kind: "directive", type: BsTabPageHeaderDirective, selector: "[bsTabPageHeader]" }, { kind: "component", type: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "component", type: SparkSubQueryComponent, selector: "spark-sub-query", inputs: ["queryId", "parentId", "parentType"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SparkPoDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SparkPoDetailComponent, isStandalone: true, selector: "spark-po-detail", inputs: { showCustomActions: { classPropertyName: "showCustomActions", publicName: "showCustomActions", isSignal: true, isRequired: false, transformFunction: null }, extraActionsTemplate: { classPropertyName: "extraActionsTemplate", publicName: "extraActionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraContentTemplate: { classPropertyName: "extraContentTemplate", publicName: "extraContentTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edited: "edited", deleted: "deleted", customActionExecuted: "customActionExecuted" }, ngImport: i0, template: "<bs-container>\n<div class=\"container\">\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  } @else if (item(); as currentItem) {\n    @if (entityType(); as et) {\n    <div class=\"spark-actionbar px-3 py-2\">\n      <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-outline-secondary\" (click)=\"onBack()\">\n          <spark-icon name=\"arrow-left\" /> {{ 'common.back' | t }}\n        </button>\n        @if (canEdit()) {\n          <button *bsPriorityNavItem=\"2\" class=\"btn btn-primary\" (click)=\"onEdit()\">\n            <spark-icon name=\"pencil\" /> {{ 'common.edit' | t }}\n          </button>\n        }\n        @if (canDelete()) {\n          <button *bsPriorityNavItem=\"3\" class=\"btn btn-danger\" (click)=\"onDelete()\">\n            <spark-icon name=\"trash\" /> {{ 'common.delete' | t }}\n          </button>\n        }\n        @if (showCustomActions()) {\n          @for (action of customActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-outline-primary\" (click)=\"onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        }\n        @if (extraActionsTemplate(); as extraActionsTpl) {\n          <ng-container *bsPriorityNavItem=\"50\">\n            <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n          </ng-container>\n        }\n      </bs-priority-nav>\n    </div>\n    <h2>{{ currentItem.breadcrumb || currentItem.name }}</h2>\n\n    <bs-grid>\n      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"detailTabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n      <ng-template #detailTabContent let-tab>\n        @if (tab.id === '__default__') {\n          @let ungroupedAttrs = ungroupedAttributes();\n          @if (ungroupedAttrs.length > 0) {\n            <bs-card style=\"display: block; margin: 1rem;\">\n              <div class=\"p-3\">\n                <dl bsRow>\n                  @for (attr of ungroupedAttrs; track attr.id) {\n                    <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                  }\n                </dl>\n              </div>\n            </bs-card>\n          }\n        }\n        @for (group of groupsForTab(tab); track group.id) {\n          @if (attrsForGroup(group); as groupAttrs) {\n            @if (groupAttrs.length > 0) {\n              <bs-card style=\"display: block; margin: 1rem;\">\n                @if (group.label) {\n                  <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n                }\n                <div class=\"p-3\">\n                  <dl bsRow>\n                    @for (attr of groupAttrs; track attr.id) {\n                      <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                    }\n                  </dl>\n                </div>\n              </bs-card>\n            }\n          }\n        }\n      </ng-template>\n\n          <ng-template #detailAttrField let-attr let-currentItem=\"item\">\n              <dt [sm]=\"3\">{{ (attr.label | resolveTranslation) || attr.name }}</dt>\n              <dd [sm]=\"9\">\n              @if (getDetailRendererComponent(attr); as rendererType) {\n                <ng-container *ngComponentOutlet=\"rendererType; inputs: getDetailRendererInputs(attr, currentItem)\"></ng-container>\n              } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n                <bs-table [isResponsive]=\"true\">\n                  <thead>\n                    <tr>\n                      @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                        <th>{{ (col.label | resolveTranslation) || col.name }}</th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody class=\"align-middle\">\n                    @for (row of (attr.name | arrayValue:currentItem); track $index) {\n                      <tr>\n                        @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                          <td>\n                            @if (col.dataType === 'Reference' && col.referenceType) {\n                              @let route = (col.referenceType | referenceLinkRoute:row[col.name]:allEntityTypes());\n                              @if (route) {\n                                <a [routerLink]=\"route\">{{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}</a>\n                              } @else {\n                                {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                              }\n                            } @else {\n                              {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                            }\n                          </td>\n                        }\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length\" class=\"text-center text-muted\">\n                          {{ 'common.noItemsFound' | t }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </bs-table>\n              } @else if (attr.dataType === 'boolean') {\n                <input type=\"checkbox\"\n                  [checked]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n                  [indeterminate]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n                  disabled\n                  onclick=\"return false;\"\n                  style=\"opacity: 1;\">\n              } @else if (attr.dataType === 'color') {\n                @let colorVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (colorVal) {\n                  <span class=\"d-inline-block align-middle border rounded me-2\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n                  {{ colorVal }}\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.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 {\n                {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n              }\n              </dd>\n          </ng-template>\n    </bs-grid>\n    @if (et.queries?.length) {\n      @for (queryAlias of et.queries; track queryAlias) {\n        <spark-sub-query [queryId]=\"queryAlias\" [parentId]=\"currentItem.id!\" [parentType]=\"et.name\" />\n      }\n    }\n    @if (extraContentTemplate(); as extraContentTpl) {\n      <ng-container *ngTemplateOutlet=\"extraContentTpl; context: { $implicit: currentItem, entityType: et }\"></ng-container>\n    }\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n</bs-container>\n", styles: [".spark-actionbar{position:sticky;top:0;z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem}.spark-actionbar .btn{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: BsAlertComponent, selector: "bs-alert", inputs: ["type", "isVisible"], outputs: ["isVisibleChange", "afterOpenedOrClosed"] }, { kind: "component", type: BsCardComponent, selector: "bs-card", inputs: ["color", "outline"] }, { kind: "component", type: BsCardHeaderComponent, selector: "bs-card-header", inputs: ["color", "navStyle"] }, { kind: "component", type: BsContainerComponent, selector: "bs-container" }, { kind: "component", type: BsGridComponent, selector: "bs-grid", inputs: ["stopFullWidthAt"] }, { kind: "directive", type: BsGridRowDirective, selector: "[bsRow]" }, { kind: "directive", type: BsGridColumnDirective, selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]", inputs: ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: BsPriorityNavComponent, selector: "bs-priority-nav", inputs: ["moreLabel", "moreLabelTemplate", "collapseAt", "overflowFrom", "hideEmptyMore", "ariaLabel"], outputs: ["overflowChange"] }, { kind: "directive", type: BsPriorityNavItemDirective, selector: "[bsPriorityNavItem]", inputs: ["bsPriorityNavItem", "bsPriorityNavItemHideBelow"] }, { kind: "component", type: BsTableComponent, selector: "bs-table", inputs: ["isResponsive", "striped", "hover", "border", "ariaRowCount"] }, { kind: "component", type: BsTabControlComponent, selector: "bs-tab-control", inputs: ["border", "selectFirstTab", "tabsPosition"] }, { kind: "component", type: BsTabPageComponent, selector: "bs-tab-page", inputs: ["disabled"] }, { kind: "directive", type: BsTabPageHeaderDirective, selector: "[bsTabPageHeader]" }, { kind: "component", type: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "component", type: SparkSubQueryComponent, selector: "spark-sub-query", inputs: ["queryId", "parentId", "parentType"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SparkPoDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SparkPoDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spark-po-detail', imports: [CommonModule, NgTemplateOutlet, NgComponentOutlet, RouterModule, BsAlertComponent, BsButtonGroupComponent, BsCardComponent, BsCardHeaderComponent, BsContainerComponent, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsTableComponent, BsTabControlComponent, BsTabPageComponent, BsTabPageHeaderDirective, BsSpinnerComponent, SparkIconComponent, SparkSubQueryComponent, ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe, RawAttributeValuePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, ArrayValuePipe, ReferenceLinkRoutePipe], 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=\"d-flex justify-content-between align-items-center mb-4\">\n      <h2>{{ currentItem.breadcrumb || currentItem.name }}</h2>\n      <bs-button-group>\n        <button class=\"btn btn-outline-secondary\" (click)=\"onBack()\">\n          <spark-icon name=\"arrow-left\" /> {{ 'common.back' | t }}\n        </button>\n        @if (canEdit()) {\n          <button class=\"btn btn-primary\" (click)=\"onEdit()\">\n            <spark-icon name=\"pencil\" /> {{ 'common.edit' | t }}\n          </button>\n        }\n        @if (extraActionsTemplate(); as extraActionsTpl) {\n          <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n        }\n        @if (showCustomActions()) {\n          @for (action of customActions(); track action.name) {\n            <button class=\"btn btn-outline-primary\" (click)=\"onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        }\n        @if (canDelete()) {\n          <button class=\"btn btn-danger\" (click)=\"onDelete()\">\n            <spark-icon name=\"trash\" /> {{ 'common.delete' | t }}\n          </button>\n        }\n      </bs-button-group>\n    </div>\n\n    <bs-grid>\n      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"detailTabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n      <ng-template #detailTabContent let-tab>\n        @if (tab.id === '__default__') {\n          @let ungroupedAttrs = ungroupedAttributes();\n          @if (ungroupedAttrs.length > 0) {\n            <bs-card style=\"display: block; margin: 1rem;\">\n              <div class=\"p-3\">\n                <dl bsRow>\n                  @for (attr of ungroupedAttrs; track attr.id) {\n                    <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                  }\n                </dl>\n              </div>\n            </bs-card>\n          }\n        }\n        @for (group of groupsForTab(tab); track group.id) {\n          @if (attrsForGroup(group); as groupAttrs) {\n            @if (groupAttrs.length > 0) {\n              <bs-card style=\"display: block; margin: 1rem;\">\n                @if (group.label) {\n                  <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n                }\n                <div class=\"p-3\">\n                  <dl bsRow>\n                    @for (attr of groupAttrs; track attr.id) {\n                      <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                    }\n                  </dl>\n                </div>\n              </bs-card>\n            }\n          }\n        }\n      </ng-template>\n\n          <ng-template #detailAttrField let-attr let-currentItem=\"item\">\n              <dt [sm]=\"3\">{{ (attr.label | resolveTranslation) || attr.name }}</dt>\n              <dd [sm]=\"9\">\n              @if (getDetailRendererComponent(attr); as rendererType) {\n                <ng-container *ngComponentOutlet=\"rendererType; inputs: getDetailRendererInputs(attr, currentItem)\"></ng-container>\n              } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n                <bs-table [isResponsive]=\"true\">\n                  <thead>\n                    <tr>\n                      @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                        <th>{{ (col.label | resolveTranslation) || col.name }}</th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody class=\"align-middle\">\n                    @for (row of (attr.name | arrayValue:currentItem); track $index) {\n                      <tr>\n                        @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                          <td>\n                            @if (col.dataType === 'Reference' && col.referenceType) {\n                              @let route = (col.referenceType | referenceLinkRoute:row[col.name]:allEntityTypes());\n                              @if (route) {\n                                <a [routerLink]=\"route\">{{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}</a>\n                              } @else {\n                                {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                              }\n                            } @else {\n                              {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                            }\n                          </td>\n                        }\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length\" class=\"text-center text-muted\">\n                          {{ 'common.noItemsFound' | t }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </bs-table>\n              } @else if (attr.dataType === 'boolean') {\n                <input type=\"checkbox\"\n                  [checked]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n                  [indeterminate]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n                  disabled\n                  onclick=\"return false;\"\n                  style=\"opacity: 1;\">\n              } @else if (attr.dataType === 'color') {\n                @let colorVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (colorVal) {\n                  <span class=\"d-inline-block align-middle border rounded me-2\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n                  {{ colorVal }}\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.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 {\n                {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n              }\n              </dd>\n          </ng-template>\n    </bs-grid>\n    @if (et.queries?.length) {\n      @for (queryAlias of et.queries; track queryAlias) {\n        <spark-sub-query [queryId]=\"queryAlias\" [parentId]=\"currentItem.id!\" [parentType]=\"et.name\" />\n      }\n    }\n    @if (extraContentTemplate(); as extraContentTpl) {\n      <ng-container *ngTemplateOutlet=\"extraContentTpl; context: { $implicit: currentItem, entityType: et }\"></ng-container>\n    }\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n</bs-container>\n" }]
+            args: [{ selector: 'spark-po-detail', imports: [CommonModule, NgTemplateOutlet, NgComponentOutlet, RouterModule, BsAlertComponent, BsCardComponent, BsCardHeaderComponent, BsContainerComponent, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsPriorityNavComponent, BsPriorityNavItemDirective, BsTableComponent, BsTabControlComponent, BsTabPageComponent, BsTabPageHeaderDirective, BsSpinnerComponent, SparkIconComponent, SparkSubQueryComponent, ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe, RawAttributeValuePipe, AsDetailColumnsPipe, AsDetailCellValuePipe, ArrayValuePipe, ReferenceLinkRoutePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bs-container>\n<div class=\"container\">\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  } @else if (item(); as currentItem) {\n    @if (entityType(); as et) {\n    <div class=\"spark-actionbar px-3 py-2\">\n      <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-outline-secondary\" (click)=\"onBack()\">\n          <spark-icon name=\"arrow-left\" /> {{ 'common.back' | t }}\n        </button>\n        @if (canEdit()) {\n          <button *bsPriorityNavItem=\"2\" class=\"btn btn-primary\" (click)=\"onEdit()\">\n            <spark-icon name=\"pencil\" /> {{ 'common.edit' | t }}\n          </button>\n        }\n        @if (canDelete()) {\n          <button *bsPriorityNavItem=\"3\" class=\"btn btn-danger\" (click)=\"onDelete()\">\n            <spark-icon name=\"trash\" /> {{ 'common.delete' | t }}\n          </button>\n        }\n        @if (showCustomActions()) {\n          @for (action of customActions(); track action.name) {\n            <button *bsPriorityNavItem=\"10 + action.offset\" class=\"btn btn-outline-primary\" (click)=\"onCustomAction(action)\">\n              {{ action.displayName | resolveTranslation }}\n            </button>\n          }\n        }\n        @if (extraActionsTemplate(); as extraActionsTpl) {\n          <ng-container *bsPriorityNavItem=\"50\">\n            <ng-container *ngTemplateOutlet=\"extraActionsTpl\"></ng-container>\n          </ng-container>\n        }\n      </bs-priority-nav>\n    </div>\n    <h2>{{ currentItem.breadcrumb || currentItem.name }}</h2>\n\n    <bs-grid>\n      <bs-tab-control>\n        @for (tab of resolvedTabs(); track tab.id) {\n          <bs-tab-page>\n            <ng-template bsTabPageHeader>{{ tab.label | resolveTranslation:tab.name }}</ng-template>\n            <ng-container *ngTemplateOutlet=\"detailTabContent; context: { $implicit: tab }\"></ng-container>\n          </bs-tab-page>\n        }\n      </bs-tab-control>\n\n      <ng-template #detailTabContent let-tab>\n        @if (tab.id === '__default__') {\n          @let ungroupedAttrs = ungroupedAttributes();\n          @if (ungroupedAttrs.length > 0) {\n            <bs-card style=\"display: block; margin: 1rem;\">\n              <div class=\"p-3\">\n                <dl bsRow>\n                  @for (attr of ungroupedAttrs; track attr.id) {\n                    <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                  }\n                </dl>\n              </div>\n            </bs-card>\n          }\n        }\n        @for (group of groupsForTab(tab); track group.id) {\n          @if (attrsForGroup(group); as groupAttrs) {\n            @if (groupAttrs.length > 0) {\n              <bs-card style=\"display: block; margin: 1rem;\">\n                @if (group.label) {\n                  <bs-card-header>{{ group.label | resolveTranslation:group.name }}</bs-card-header>\n                }\n                <div class=\"p-3\">\n                  <dl bsRow>\n                    @for (attr of groupAttrs; track attr.id) {\n                      <ng-container *ngTemplateOutlet=\"detailAttrField; context: { $implicit: attr, item: currentItem }\"></ng-container>\n                    }\n                  </dl>\n                </div>\n              </bs-card>\n            }\n          }\n        }\n      </ng-template>\n\n          <ng-template #detailAttrField let-attr let-currentItem=\"item\">\n              <dt [sm]=\"3\">{{ (attr.label | resolveTranslation) || attr.name }}</dt>\n              <dd [sm]=\"9\">\n              @if (getDetailRendererComponent(attr); as rendererType) {\n                <ng-container *ngComponentOutlet=\"rendererType; inputs: getDetailRendererInputs(attr, currentItem)\"></ng-container>\n              } @else if (attr.dataType === 'AsDetail' && attr.isArray) {\n                <bs-table [isResponsive]=\"true\">\n                  <thead>\n                    <tr>\n                      @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                        <th>{{ (col.label | resolveTranslation) || col.name }}</th>\n                      }\n                    </tr>\n                  </thead>\n                  <tbody class=\"align-middle\">\n                    @for (row of (attr.name | arrayValue:currentItem); track $index) {\n                      <tr>\n                        @for (col of (attr | asDetailColumns:asDetailTypes()); track col.name) {\n                          <td>\n                            @if (col.dataType === 'Reference' && col.referenceType) {\n                              @let route = (col.referenceType | referenceLinkRoute:row[col.name]:allEntityTypes());\n                              @if (route) {\n                                <a [routerLink]=\"route\">{{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}</a>\n                              } @else {\n                                {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                              }\n                            } @else {\n                              {{ (row | asDetailCellValue:attr:col:asDetailReferenceOptions()) }}\n                            }\n                          </td>\n                        }\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td [attr.colspan]=\"(attr | asDetailColumns:asDetailTypes()).length\" class=\"text-center text-muted\">\n                          {{ 'common.noItemsFound' | t }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </bs-table>\n              } @else if (attr.dataType === 'boolean') {\n                <input type=\"checkbox\"\n                  [checked]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) === true\"\n                  [indeterminate]=\"(attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) == null\"\n                  disabled\n                  onclick=\"return false;\"\n                  style=\"opacity: 1;\">\n              } @else if (attr.dataType === 'color') {\n                @let colorVal = (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes());\n                @if (colorVal) {\n                  <span class=\"d-inline-block align-middle border rounded me-2\" [style.background-color]=\"colorVal\" style=\"width: 1.5em; height: 1.5em;\"></span>\n                  {{ colorVal }}\n                } @else {\n                  -\n                }\n              } @else if (attr.dataType === 'Reference' && attr.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 {\n                {{ (attr.name | attributeValue:item():entityType():lookupReferenceOptions():allEntityTypes()) || '-' }}\n              }\n              </dd>\n          </ng-template>\n    </bs-grid>\n    @if (et.queries?.length) {\n      @for (queryAlias of et.queries; track queryAlias) {\n        <spark-sub-query [queryId]=\"queryAlias\" [parentId]=\"currentItem.id!\" [parentType]=\"et.name\" />\n      }\n    }\n    @if (extraContentTemplate(); as extraContentTpl) {\n      <ng-container *ngTemplateOutlet=\"extraContentTpl; context: { $implicit: currentItem, entityType: et }\"></ng-container>\n    }\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\n</bs-container>\n", styles: [".spark-actionbar{position:sticky;top:0;z-index:400;background-color:var(--bs-tertiary-bg);border-bottom:1px solid var(--bs-border-color);margin-bottom:1rem}.spark-actionbar .btn{border-radius:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showCustomActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomActions", required: false }] }], extraActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraActionsTemplate", required: false }] }], extraContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraContentTemplate", required: false }] }], edited: [{ type: i0.Output, args: ["edited"] }], deleted: [{ type: i0.Output, args: ["deleted"] }], customActionExecuted: [{ type: i0.Output, args: ["customActionExecuted"] }] } });
 
 /**