@mintplayer/ng-spark 0.4.0 → 22.0.1

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

@@ -10,9 +10,7 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { Color } from '@mintplayer/ng-bootstrap';
 import { BsAlertComponent } from '@mintplayer/ng-bootstrap/alert';
 import { DatatableSettings, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective } from '@mintplayer/ng-bootstrap/datatable';
-import { VirtualDatatableDataSource, BsVirtualDatatableComponent, BsVirtualRowTemplateDirective } from '@mintplayer/ng-bootstrap/virtual-datatable';
 import { BsFormComponent, BsFormControlDirective } from '@mintplayer/ng-bootstrap/form';
-import { BsContainerComponent } from '@mintplayer/ng-bootstrap/container';
 import { BsGridComponent, BsGridRowDirective, BsGridColumnDirective } from '@mintplayer/ng-bootstrap/grid';
 import { BsInputGroupComponent } from '@mintplayer/ng-bootstrap/input-group';
 import { BsPriorityNavComponent, BsPriorityNavItemDirective } from '@mintplayer/ng-bootstrap/priority-nav';
@@ -31,40 +29,61 @@ class SparkQueryListComponent {
     lang = inject(SparkLanguageService);
     rendererRegistry = inject(SPARK_ATTRIBUTE_RENDERERS);
     destroyRef = inject(DestroyRef);
-    extraActionsTemplate = input(null, ...(ngDevMode ? [{ debugName: "extraActionsTemplate" }] : []));
-    showCustomActions = input(true, ...(ngDevMode ? [{ debugName: "showCustomActions" }] : []));
+    extraActionsTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extraActionsTemplate" }] : /* istanbul ignore next */ []));
+    showCustomActions = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCustomActions" }] : /* istanbul ignore next */ []));
     rowClicked = output();
     createClicked = output();
     customActionExecuted = output();
     colors = Color;
-    errorMessage = signal(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
-    query = signal(null, ...(ngDevMode ? [{ debugName: "query" }] : []));
-    entityType = signal(null, ...(ngDevMode ? [{ debugName: "entityType" }] : []));
-    allEntityTypes = signal([], ...(ngDevMode ? [{ debugName: "allEntityTypes" }] : []));
-    lookupReferenceOptions = signal({}, ...(ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : []));
-    paginationData = signal(undefined, ...(ngDevMode ? [{ debugName: "paginationData" }] : []));
+    errorMessage = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* 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 */ []));
+    lookupReferenceOptions = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lookupReferenceOptions" }] : /* istanbul ignore next */ []));
+    resultCount = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resultCount" }] : /* istanbul ignore next */ []));
     searchTerm = '';
-    canRead = signal(false, ...(ngDevMode ? [{ debugName: "canRead" }] : []));
-    canCreate = signal(false, ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
-    customActions = signal([], ...(ngDevMode ? [{ debugName: "customActions" }] : []));
-    isStreaming = signal(false, ...(ngDevMode ? [{ debugName: "isStreaming" }] : []));
+    canRead = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canRead" }] : /* istanbul ignore next */ []));
+    canCreate = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canCreate" }] : /* istanbul ignore next */ []));
+    customActions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customActions" }] : /* istanbul ignore next */ []));
+    isStreaming = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isStreaming" }] : /* istanbul ignore next */ []));
     streamingSub = null;
-    allItems = signal([], ...(ngDevMode ? [{ debugName: "allItems" }] : []));
-    filteredItems = [];
+    allItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allItems" }] : /* istanbul ignore next */ []));
+    streamItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "streamItems" }] : /* istanbul ignore next */ []));
+    fetchFn = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fetchFn" }] : /* 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 */ []));
     constructor() {
         this.route.paramMap.pipe(takeUntilDestroyed()).subscribe(params => this.onParamsChange(params));
         this.destroyRef.onDestroy(() => this.disconnectStreaming());
     }
     async onParamsChange(params) {
+        // Reset prior-route state so we render the spinner (not stale rows from
+        // the previous query) while the new query/entityType resolve.
+        this.entityType.set(null);
+        this.fetchFn.set(null);
+        this.resultCount.set(null);
+        this.allItems.set([]);
+        this.streamItems.set([]);
+        this.disconnectStreaming();
         const queryId = params.get('queryId');
         const typeParam = params.get('type');
         let resolvedQuery = null;
@@ -106,27 +125,20 @@ class SparkQueryListComponent {
                 property: sc.property,
                 direction: sc.direction === 'desc' ? 'descending' : 'ascending'
             }));
-            if (resolvedQuery?.renderMode === 'VirtualScrolling') {
-                this.virtualSettings.set(new DatatableSettings({ sortColumns: initialSortColumns }));
-                if (resolvedQuery?.isStreamingQuery) {
-                    // Streaming + VirtualScrolling: create a stable client-side data source, then connect WebSocket
-                    this.virtualDataSource.set(new VirtualDatatableDataSource((skip, take) => Promise.resolve({
-                        data: this.filteredItems.slice(skip, skip + take),
-                        totalRecords: this.filteredItems.length
-                    }), 50));
-                    this.connectStreaming(resolvedQuery.id);
-                }
-                else {
-                    this.initVirtualDataSource();
-                }
+            this.settings.set(new DatatableSettings({
+                perPage: { values: [10, 25, 50], selected: 10 },
+                page: { values: [1], selected: 1 },
+                sortColumns: initialSortColumns
+            }));
+            if (resolvedQuery?.isStreamingQuery) {
+                // Streaming: WebSocket feeds allItems; the datatable binds [data]="streamItems()".
+                this.connectStreaming(resolvedQuery.id);
             }
-            else {
-                this.settings.set(new DatatableSettings({
-                    perPage: { values: [10, 25, 50], selected: 10 },
-                    page: { values: [1], selected: 1 },
-                    sortColumns: initialSortColumns
-                }));
-                await this.loadItems();
+            else if (resolvedQuery) {
+                // Non-streaming: the datatable drives paging/sorting via [(settings)] and calls
+                // fetchFn per page. Virtual scrolling is just the [virtualScroll] template flag —
+                // the datatable front-loads all pages from fetchFn when virtual.
+                this.fetchFn.set(this.makeFetch(resolvedQuery));
             }
             this.loadLookupReferenceOptions();
             const [permissions, actions] = await Promise.all([
@@ -148,7 +160,7 @@ class SparkQueryListComponent {
             await this.sparkService.executeCustomAction(this.entityType().id, action.name);
             this.customActionExecuted.emit({ action });
             if (action.refreshOnCompleted) {
-                this.onSettingsChange();
+                this.refresh();
             }
         }
         catch (e) {
@@ -195,89 +207,76 @@ class SparkQueryListComponent {
         }
         return plural;
     }
-    initVirtualDataSource() {
-        const currentQuery = this.query();
-        if (!currentQuery)
-            return;
-        this.virtualDataSource.set(new VirtualDatatableDataSource((skip, take) => this.sparkService.executeQuery(currentQuery.id, {
-            sortColumns: this.virtualSettings().sortColumns,
-            skip, take,
+    /**
+     * Builds the server-side fetch callback the datatable invokes per page/sort.
+     * Reads `searchTerm` live, so a settings change (or a new fetchFn identity)
+     * refetches with the current search term.
+     */
+    makeFetch(query) {
+        return (req) => this.sparkService.executeQuery(query.id, {
+            sortColumns: req.sortColumns,
+            skip: (req.page - 1) * req.perPage,
+            take: req.perPage,
             search: this.searchTerm || undefined,
-        }).then(r => ({ data: r.data, totalRecords: r.totalRecords })), 50));
-    }
-    async loadItems() {
-        const currentQuery = this.query();
-        if (!currentQuery)
-            return;
-        // Streaming queries use WebSocket instead of HTTP
-        if (currentQuery.isStreamingQuery) {
-            this.connectStreaming(currentQuery.id);
-            return;
-        }
-        // Non-streaming: disconnect any previous streaming connection
-        this.disconnectStreaming();
-        try {
-            const s = this.settings();
-            const result = await this.sparkService.executeQuery(currentQuery.id, {
-                sortColumns: s.sortColumns,
-                skip: (s.page.selected - 1) * s.perPage.selected,
-                take: s.perPage.selected,
-                search: this.searchTerm || undefined,
-            });
+        }).then(r => {
             this.errorMessage.set(null);
-            const totalPages = Math.ceil(result.totalRecords / s.perPage.selected) || 1;
-            this.paginationData.set({
-                data: result.data,
-                totalRecords: result.totalRecords,
-                totalPages: totalPages,
-                perPage: s.perPage.selected,
-                page: s.page.selected
-            });
-            s.page.values = Array.from({ length: totalPages }, (_, i) => i + 1);
-        }
-        catch (e) {
+            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((e) => {
             this.errorMessage.set(e.error?.error || e.message || 'An unexpected error occurred');
-            this.paginationData.set(undefined);
-        }
+            this.resultCount.set(0);
+            return { data: [], totalRecords: 0, totalPages: 1, perPage: req.perPage, page: req.page };
+        });
     }
-    onSettingsChange() {
+    /** Force a refetch (e.g. after a custom action) without changing page/sort. */
+    refresh() {
         if (this.isStreaming()) {
-            // Streaming: sort/filter is client-side only
             this.applyFilter();
             return;
         }
-        if (this.query()?.renderMode === 'VirtualScrolling') {
-            this.virtualDataSource()?.reset();
-            this.initVirtualDataSource();
-        }
-        else {
-            this.loadItems();
-        }
+        const q = this.query();
+        if (q)
+            this.fetchFn.set(this.makeFetch(q));
     }
     onSearchChange() {
         if (this.isStreaming()) {
             this.applyFilter();
             return;
         }
-        if (this.query()?.renderMode === 'VirtualScrolling') {
-            this.virtualDataSource()?.reset();
-            this.initVirtualDataSource();
-        }
-        else {
-            this.settings().page.selected = 1;
-            this.loadItems();
-        }
+        // Reset to page 1 for the new search.
+        const s = this.settings();
+        this.settings.set(new DatatableSettings({
+            perPage: { values: s.perPage.values, selected: s.perPage.selected },
+            page: { values: [1], selected: 1 },
+            sortColumns: s.sortColumns,
+        }));
+        // Re-assign the fetch callback so the datatable refetches even when
+        // page/perPage/sort are unchanged. ng-bootstrap 22.4's web component dedupes
+        // reloads by {sortColumns, perPage, page}; setting a new fetch identity resets
+        // that key (set fetch → _lastReloadKey = null) and forces the reload. makeFetch
+        // reads searchTerm live (mirrors refresh()).
+        const q = this.query();
+        if (q)
+            this.fetchFn.set(this.makeFetch(q));
     }
     clearSearch() {
         this.searchTerm = '';
         this.onSearchChange();
     }
-    isVirtualScrolling = computed(() => this.query()?.renderMode === 'VirtualScrolling', ...(ngDevMode ? [{ debugName: "isVirtualScrolling" }] : []));
+    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 */ []));
     getColumnRendererComponent(attr) {
         if (!attr.renderer)
             return null;
@@ -369,9 +368,9 @@ class SparkQueryListComponent {
             const term = this.searchTerm.toLowerCase();
             items = items.filter(item => item.attributes.some(a => String(a.value ?? '').toLowerCase().includes(term)));
         }
-        // Apply sorting
-        const isVirtual = this.query()?.renderMode === 'VirtualScrolling';
-        const sortCols = isVirtual ? this.virtualSettings().sortColumns : this.settings().sortColumns;
+        // Apply sorting (client-side for the streaming snapshot; the datatable in
+        // [data] mode also auto-sorts on header clicks).
+        const sortCols = this.settings().sortColumns;
         if (sortCols.length > 0) {
             items = [...items].sort((a, b) => {
                 for (const col of sortCols) {
@@ -384,31 +383,17 @@ class SparkQueryListComponent {
                 return 0;
             });
         }
-        if (isVirtual) {
-            // Update the mutable filtered items array.
-            // The stable data source's fetchFn closure reads from this.filteredItems,
-            // so clearing its cache and emitting empty triggers the CDK viewport to re-fetch.
-            this.filteredItems = items;
-            this.virtualDataSource()?.reset();
-        }
-        else {
-            this.paginationData.set({
-                data: items,
-                totalRecords: items.length,
-                totalPages: 1,
-                perPage: items.length,
-                page: 1
-            });
-        }
+        this.streamItems.set(items);
+        this.resultCount.set(items.length);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SparkQueryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SparkQueryListComponent, isStandalone: true, selector: "spark-query-list", inputs: { extraActionsTemplate: { classPropertyName: "extraActionsTemplate", publicName: "extraActionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, showCustomActions: { classPropertyName: "showCustomActions", publicName: "showCustomActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClicked: "rowClicked", createClicked: "createClicked", customActionExecuted: "customActionExecuted" }, host: { properties: { "class.virtual-scrolling": "isVirtualScrolling()" } }, ngImport: i0, template: "<div class=\"d-flex flex-column h-100\">\n  <div class=\"spark-actionbar py-2 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\" [class.px-3]=\"!isVirtualScrolling()\">\n    <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n      @if (canCreate()) {\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-primary\" (click)=\"onCreate()\">\n          <spark-icon name=\"plus-lg\" /> {{ 'common.new' | t }}\n        </button>\n      }\n      @if (showCustomActions()) {\n        @for (action of customActions(); track action.name) {\n          <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 class=\"mb-4 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n    {{ (query()?.description | resolveTranslation) || query()?.name || ('common.loading' | t) }}\n    @if (isStreaming()) {\n      <span class=\"badge bg-success ms-2\" style=\"font-size: 0.5em; vertical-align: middle;\">LIVE</span>\n    }\n  </h2>\n\n  @if (entityType()) {\n    <!-- Search box -->\n    <div class=\"flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n      <bs-form>\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"4\">\n              <bs-input-group>\n                <span class=\"input-group-text\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [(ngModel)]=\"searchTerm\"\n                  (ngModelChange)=\"onSearchChange()\">\n                @if (searchTerm) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            <div [md]=\"8\" class=\"text-end\">\n              @if (searchTerm && paginationData()) {\n                <span class=\"text-muted\">\n                  {{ paginationData()!.totalRecords }} {{ paginationData()!.totalRecords === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              }\n            </div>\n          </div>\n        </bs-grid>\n      </bs-form>\n\n      @if (errorMessage(); as err) {\n        <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n          {{ err }}\n        </bs-alert>\n      }\n    </div>\n\n    @if (query()?.renderMode === 'VirtualScrolling') {\n      @if (virtualDataSource(); as vds) {\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]\" (click)=\"rowClicked.emit(item)\">\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      }\n    } @else {\n      <bs-datatable class=\"flex-grow-1\" [(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]\" (click)=\"rowClicked.emit(item)\">\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  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\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      [indeterminate]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) == null\"\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", 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}:host{display:flex;flex-direction:column;flex:1;min-height:0}:host.virtual-scrolling{margin:0 -1.5rem -1.5rem}tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}\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: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.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: 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: BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "component", type: BsGridComponent, selector: "bs-grid", inputs: ["stopFullWidthAt"] }, { kind: "directive", type: BsGridRowDirective, selector: "[bsRow]" }, { kind: "directive", type: BsGridColumnDirective, selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]", inputs: ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: BsInputGroupComponent, selector: "bs-input-group" }, { kind: "component", type: BsPriorityNavComponent, selector: "bs-priority-nav", inputs: ["moreLabel", "moreLabelTemplate", "collapseAt", "overflowFrom", "hideEmptyMore"], outputs: ["overflowChange"] }, { kind: "directive", type: BsPriorityNavItemDirective, selector: "[bsPriorityNavItem]", inputs: ["bsPriorityNavItem", "bsPriorityNavItemHideBelow"] }, { kind: "component", type: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "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: SparkQueryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: SparkQueryListComponent, isStandalone: true, selector: "spark-query-list", inputs: { extraActionsTemplate: { classPropertyName: "extraActionsTemplate", publicName: "extraActionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, showCustomActions: { classPropertyName: "showCustomActions", publicName: "showCustomActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClicked: "rowClicked", createClicked: "createClicked", customActionExecuted: "customActionExecuted" }, host: { properties: { "class.virtual-scrolling": "isVirtualScrolling()" } }, ngImport: i0, template: "<div class=\"d-flex flex-column h-100\">\n  <div class=\"spark-actionbar py-2 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\" [class.px-3]=\"!isVirtualScrolling()\">\n    <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n      @if (canCreate()) {\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-primary\" (click)=\"onCreate()\">\n          <spark-icon name=\"plus-lg\" /> {{ 'common.new' | t }}\n        </button>\n      }\n      @if (showCustomActions()) {\n        @for (action of customActions(); track action.name) {\n          <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 class=\"mb-4 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n    {{ (query()?.description | resolveTranslation) || query()?.name || ('common.loading' | t) }}\n    @if (isStreaming()) {\n      <span class=\"badge bg-success ms-2\" style=\"font-size: 0.5em; vertical-align: middle;\">LIVE</span>\n    }\n  </h2>\n\n  @if (entityType()) {\n    <!-- Search box -->\n    <div class=\"flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n      <bs-form>\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"4\">\n              <bs-input-group>\n                <span class=\"input-group-text\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [(ngModel)]=\"searchTerm\"\n                  (ngModelChange)=\"onSearchChange()\">\n                @if (searchTerm) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            <div [md]=\"8\" class=\"text-end\">\n              @if (searchTerm && resultCount() !== null) {\n                <span class=\"text-muted\">\n                  {{ resultCount() }} {{ resultCount() === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              }\n            </div>\n          </div>\n        </bs-grid>\n      </bs-form>\n\n      @if (errorMessage(); as err) {\n        <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n          {{ err }}\n        </bs-alert>\n      }\n    </div>\n\n    @if (isStreaming()) {\n      <bs-datatable class=\"flex-grow-1\"\n          [virtualScroll]=\"isVirtualScrolling()\"\n          [itemSize]=\"40\"\n          [isResponsive]=\"isVirtualScrolling()\"\n          [data]=\"streamItems()\"\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]\" (click)=\"rowClicked.emit(row)\">\n                    <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n                  </a>\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n                }\n              } @else {\n                &nbsp;\n              }\n            </td>\n          }\n        </ng-container>\n      </bs-datatable>\n    } @else {\n      <bs-datatable class=\"flex-grow-1\"\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]\" (click)=\"rowClicked.emit(row)\">\n                    <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n                  </a>\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n                }\n              } @else {\n                &nbsp;\n              }\n            </td>\n          }\n        </ng-container>\n      </bs-datatable>\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\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      [indeterminate]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) == null\"\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", 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}:host{display:flex;flex-direction:column;flex:1;min-height:0}:host.virtual-scrolling{margin:0 -1.5rem -1.5rem}:host.virtual-scrolling ::ng-deep bs-datatable{display:flex;flex-direction:column;min-height:0;--mp-datatable-virtual-max-height: 100%}:host.virtual-scrolling ::ng-deep bs-datatable mp-datatable{flex:1 1 auto;min-height:0}tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}\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: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.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: 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: BsFormComponent, selector: "bs-form", inputs: ["action", "method"], outputs: ["submitted"] }, { kind: "directive", type: BsFormControlDirective, selector: "bs-form input:not(.no-form-control), bs-form textarea:not(.no-form-control)" }, { kind: "component", type: BsGridComponent, selector: "bs-grid", inputs: ["stopFullWidthAt"] }, { kind: "directive", type: BsGridRowDirective, selector: "[bsRow]" }, { kind: "directive", type: BsGridColumnDirective, selector: "[xxs],[xs],[sm],[md],[lg],[xl],[xxl]", inputs: ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] }, { kind: "component", type: BsInputGroupComponent, selector: "bs-input-group" }, { kind: "component", type: BsPriorityNavComponent, selector: "bs-priority-nav", inputs: ["moreLabel", "moreLabelTemplate", "collapseAt", "overflowFrom", "hideEmptyMore", "ariaLabel"], outputs: ["overflowChange"] }, { kind: "directive", type: BsPriorityNavItemDirective, selector: "[bsPriorityNavItem]", inputs: ["bsPriorityNavItem", "bsPriorityNavItemHideBelow"] }, { kind: "component", type: BsSpinnerComponent, selector: "bs-spinner", inputs: ["type", "color"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }, { kind: "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: SparkQueryListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: SparkQueryListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spark-query-list', imports: [CommonModule, NgTemplateOutlet, NgComponentOutlet, FormsModule, RouterModule, BsAlertComponent, BsContainerComponent, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective, BsVirtualDatatableComponent, BsVirtualRowTemplateDirective, BsFormComponent, BsFormControlDirective, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsInputGroupComponent, BsPriorityNavComponent, BsPriorityNavItemDirective, BsSpinnerComponent, SparkIconComponent, ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'spark-query-list', imports: [CommonModule, NgTemplateOutlet, NgComponentOutlet, FormsModule, RouterModule, BsAlertComponent, BsDatatableComponent, BsDatatableColumnDirective, BsRowTemplateDirective, BsFormComponent, BsFormControlDirective, BsGridComponent, BsGridRowDirective, BsGridColumnDirective, BsInputGroupComponent, BsPriorityNavComponent, BsPriorityNavItemDirective, BsSpinnerComponent, SparkIconComponent, ResolveTranslationPipe, TranslateKeyPipe, AttributeValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.virtual-scrolling]': 'isVirtualScrolling()'
-                    }, template: "<div class=\"d-flex flex-column h-100\">\n  <div class=\"spark-actionbar py-2 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\" [class.px-3]=\"!isVirtualScrolling()\">\n    <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n      @if (canCreate()) {\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-primary\" (click)=\"onCreate()\">\n          <spark-icon name=\"plus-lg\" /> {{ 'common.new' | t }}\n        </button>\n      }\n      @if (showCustomActions()) {\n        @for (action of customActions(); track action.name) {\n          <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 class=\"mb-4 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n    {{ (query()?.description | resolveTranslation) || query()?.name || ('common.loading' | t) }}\n    @if (isStreaming()) {\n      <span class=\"badge bg-success ms-2\" style=\"font-size: 0.5em; vertical-align: middle;\">LIVE</span>\n    }\n  </h2>\n\n  @if (entityType()) {\n    <!-- Search box -->\n    <div class=\"flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n      <bs-form>\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"4\">\n              <bs-input-group>\n                <span class=\"input-group-text\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [(ngModel)]=\"searchTerm\"\n                  (ngModelChange)=\"onSearchChange()\">\n                @if (searchTerm) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            <div [md]=\"8\" class=\"text-end\">\n              @if (searchTerm && paginationData()) {\n                <span class=\"text-muted\">\n                  {{ paginationData()!.totalRecords }} {{ paginationData()!.totalRecords === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              }\n            </div>\n          </div>\n        </bs-grid>\n      </bs-form>\n\n      @if (errorMessage(); as err) {\n        <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n          {{ err }}\n        </bs-alert>\n      }\n    </div>\n\n    @if (query()?.renderMode === 'VirtualScrolling') {\n      @if (virtualDataSource(); as vds) {\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]\" (click)=\"rowClicked.emit(item)\">\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      }\n    } @else {\n      <bs-datatable class=\"flex-grow-1\" [(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]\" (click)=\"rowClicked.emit(item)\">\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  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\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      [indeterminate]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) == null\"\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", 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}:host{display:flex;flex-direction:column;flex:1;min-height:0}:host.virtual-scrolling{margin:0 -1.5rem -1.5rem}tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}\n"] }]
+                    }, template: "<div class=\"d-flex flex-column h-100\">\n  <div class=\"spark-actionbar py-2 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\" [class.px-3]=\"!isVirtualScrolling()\">\n    <bs-priority-nav [moreLabel]=\"lang.t('common.more')\" [collapseAt]=\"'sm'\">\n      @if (canCreate()) {\n        <button *bsPriorityNavItem=\"1\" class=\"btn btn-primary\" (click)=\"onCreate()\">\n          <spark-icon name=\"plus-lg\" /> {{ 'common.new' | t }}\n        </button>\n      }\n      @if (showCustomActions()) {\n        @for (action of customActions(); track action.name) {\n          <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 class=\"mb-4 flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n    {{ (query()?.description | resolveTranslation) || query()?.name || ('common.loading' | t) }}\n    @if (isStreaming()) {\n      <span class=\"badge bg-success ms-2\" style=\"font-size: 0.5em; vertical-align: middle;\">LIVE</span>\n    }\n  </h2>\n\n  @if (entityType()) {\n    <!-- Search box -->\n    <div class=\"flex-shrink-0\" [class.px-4]=\"isVirtualScrolling()\">\n      <bs-form>\n        <bs-grid>\n          <div bsRow class=\"mb-3\">\n            <div [md]=\"4\">\n              <bs-input-group>\n                <span class=\"input-group-text\">\n                  <spark-icon name=\"search\" />\n                </span>\n                <input\n                  type=\"text\"\n                  [placeholder]=\"'common.search' | t\"\n                  [(ngModel)]=\"searchTerm\"\n                  (ngModelChange)=\"onSearchChange()\">\n                @if (searchTerm) {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-outline-secondary\"\n                    (click)=\"clearSearch()\">\n                    <spark-icon name=\"x-lg\" />\n                  </button>\n                }\n              </bs-input-group>\n            </div>\n            <div [md]=\"8\" class=\"text-end\">\n              @if (searchTerm && resultCount() !== null) {\n                <span class=\"text-muted\">\n                  {{ resultCount() }} {{ resultCount() === 1 ? ('common.resultFound' | t) : ('common.resultsFound' | t) }}\n                </span>\n              }\n            </div>\n          </div>\n        </bs-grid>\n      </bs-form>\n\n      @if (errorMessage(); as err) {\n        <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n          {{ err }}\n        </bs-alert>\n      }\n    </div>\n\n    @if (isStreaming()) {\n      <bs-datatable class=\"flex-grow-1\"\n          [virtualScroll]=\"isVirtualScrolling()\"\n          [itemSize]=\"40\"\n          [isResponsive]=\"isVirtualScrolling()\"\n          [data]=\"streamItems()\"\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]\" (click)=\"rowClicked.emit(row)\">\n                    <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n                  </a>\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n                }\n              } @else {\n                &nbsp;\n              }\n            </td>\n          }\n        </ng-container>\n      </bs-datatable>\n    } @else {\n      <bs-datatable class=\"flex-grow-1\"\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]\" (click)=\"rowClicked.emit(row)\">\n                    <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n                  </a>\n                } @else {\n                  <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, attr: attr }\"></ng-container>\n                }\n              } @else {\n                &nbsp;\n              }\n            </td>\n          }\n        </ng-container>\n      </bs-datatable>\n    }\n  } @else {\n    <div class=\"text-center p-5\">\n      <bs-spinner />\n    </div>\n  }\n</div>\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      [indeterminate]=\"(attr.name | attributeValue:item:entityType():lookupReferenceOptions():allEntityTypes()) == null\"\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", 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}:host{display:flex;flex-direction:column;flex:1;min-height:0}:host.virtual-scrolling{margin:0 -1.5rem -1.5rem}:host.virtual-scrolling ::ng-deep bs-datatable{display:flex;flex-direction:column;min-height:0;--mp-datatable-virtual-max-height: 100%}:host.virtual-scrolling ::ng-deep bs-datatable mp-datatable{flex:1 1 auto;min-height:0}tr:hover{background-color:#0000000d}td input[type=checkbox]:disabled{opacity:1;pointer-events:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { extraActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraActionsTemplate", required: false }] }], showCustomActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCustomActions", required: false }] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], createClicked: [{ type: i0.Output, args: ["createClicked"] }], customActionExecuted: [{ type: i0.Output, args: ["customActionExecuted"] }] } });
 
 /**