@yuuvis/client-framework 3.23.0 → 3.24.0

package/fesm2022/yuuvis-client-framework-query-list.mjs

@@ -1,15 +1,17 @@
 import * as i0 from '@angular/core';
-import { inject, signal, viewChild, contentChild, input, output, computed, untracked, effect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { inject, signal, viewChild, contentChild, input, output, computed, linkedSignal, untracked, effect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3 from '@angular/material/paginator';
-import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { SearchService } from '@yuuvis/client-core';
 import { ClickDoubleDirective, DragSelectDirective, DragSelectItemDirective } from '@yuuvis/client-framework/common';
 import * as i2 from '@yuuvis/client-framework/list';
 import { YuvListModule } from '@yuuvis/client-framework/list';
 import { DeviceService } from '@yuuvis/material';
+import { Subject, switchMap, EMPTY, defer, map, catchError, finalize } from 'rxjs';
 
 /**
  * Query-driven list component that executes a search query and renders the results
@@ -78,6 +80,14 @@ class QueryListComponent {
     #items;
     #dropInItems;
     #listItemUpdates;
+    // Every search the list runs — new query, page change, refresh — goes through this one stream, so
+    // a newer request cancels the one still in flight instead of racing it, and a late response can
+    // never overwrite a newer one (see `#load`). `null` cancels without a new request (see `#cancel`).
+    #requests;
+    // The request still in flight — `busy` follows it — and the one whose result is on screen: what
+    // `refresh()` re-runs.
+    #pendingRequest;
+    #shownRequest;
     //#endregion
     constructor() {
         //#region Dependencies
@@ -132,8 +142,8 @@ class QueryListComponent {
          *
          * Accepts either a structured `SearchQuery` object (field filters, sort orders, etc.)
          * or a raw CMIS query string. The query is re-executed reactively every time this
-         * input changes. Set to `null` or `undefined` to clear the list without triggering
-         * a new request.
+         * input changes. Set to `null` or `undefined` to stop searching: a request still in
+         * flight is cancelled, and the list keeps showing the result it has.
          */
         this.query = input(...(ngDevMode ? [undefined, { debugName: "query" }] : /* istanbul ignore next */ []));
         /**
@@ -375,27 +385,44 @@ class QueryListComponent {
         /**
          * Indicates whether a search request is currently in flight.
          *
-         * Set to `true` immediately before a query or page request is dispatched to the
-         * search service, and back to `false` once the response (or error) arrives.
+         * `true` from the moment a query or page request is dispatched to the search service until
+         * the latest request settles (response, error or cancellation). A request superseded by a
+         * newer one is cancelled, and `busy` stays `true` across that switch. Derived from the request
+         * in flight but still writable: a value set from outside holds until the loading state changes.
          * Bind this to a loading indicator or `BusyOverlayDirective` in the parent template:
          * ```html
          * <yuv-query-list #qList ...>...</yuv-query-list>
          * <yuv-busy-overlay [active]="qList.busy()" />
          * ```
          */
-        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.busy = linkedSignal(() => this.#pendingRequest() !== null, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        // Only there while the result has several pages. TS `private` because a signal query cannot sit
+        // on an ES-private field (NG1053).
+        this.paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : /* istanbul ignore next */ []));
         this.#items = signal([], ...(ngDevMode ? [{ debugName: "#items" }] : /* istanbul ignore next */ []));
         this.#dropInItems = signal([], ...(ngDevMode ? [{ debugName: "#dropInItems" }] : /* istanbul ignore next */ []));
         this.#listItemUpdates = signal({}, ...(ngDevMode ? [{ debugName: "#listItemUpdates" }] : /* istanbul ignore next */ []));
+        // Every search the list runs — new query, page change, refresh — goes through this one stream, so
+        // a newer request cancels the one still in flight instead of racing it, and a late response can
+        // never overwrite a newer one (see `#load`). `null` cancels without a new request (see `#cancel`).
+        this.#requests = new Subject();
+        // The request still in flight — `busy` follows it — and the one whose result is on screen: what
+        // `refresh()` re-runs.
+        this.#pendingRequest = signal(null, ...(ngDevMode ? [{ debugName: "#pendingRequest" }] : /* istanbul ignore next */ []));
+        this.#shownRequest = signal(null, ...(ngDevMode ? [{ debugName: "#shownRequest" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region Effects
         this.#executeQueryEffect = () => {
             // execute the query each time it changes
             const query = this.query();
-            if (query)
-                untracked(() => {
-                    this.#executeQuery(query || null);
-                });
+            untracked(() => {
+                if (query) {
+                    this.#request({ query, page: null });
+                }
+                else {
+                    this.#cancel();
+                }
+            });
         };
         /**
          * Keeps the inner list's positional selection aligned with the id-based {@link selectedIds}
@@ -433,6 +460,9 @@ class QueryListComponent {
         };
         effect(this.#executeQueryEffect);
         effect(this.#resyncSelectionEffect);
+        this.#requests
+            .pipe(switchMap((request) => (request ? this.#load(request) : EMPTY)), takeUntilDestroyed())
+            .subscribe(({ request, result }) => this.#showResult(request, result));
     }
     //#region UI Methods
     /** Resolves the tracking key for a result item in the `@for` loop. */
@@ -591,7 +621,7 @@ class QueryListComponent {
      * appear in the current query (e.g. because the index has not been updated), drop it
      * in temporarily so the user sees it immediately without a full refresh.
      *
-     * Drop-in items are cleared automatically when the user navigates to a different page.
+     * Drop-in items are cleared automatically once a page the user navigates to is shown.
      * Call `dropItems([])` to remove them programmatically.
      *
      * @param items    Items to prepend. Must be of type `T` (same as query result items).
@@ -699,21 +729,24 @@ class QueryListComponent {
     /**
      * Re-executes the current query without changing the page or query parameters.
      *
-     * If pagination is active, re-fetches the same page the user is currently on.
-     * If no pagination is active, re-runs the original query from scratch.
+     * Re-runs what the list is about to show or is showing: a request still in flight, otherwise
+     * the page the user is currently on, or the query from scratch if it has only one page. If that
+     * page no longer exists — its objects were deleted — the list moves to the last page there is.
      *
      * Use this to reflect server-side changes (e.g. after a create/delete operation)
      * without navigating away from the current view.
      */
     refresh() {
         const query = this.query();
-        if (query) {
-            if (this.pagination()) {
-                this.goToPage(this.pagination().page);
-            }
-            else
-                this.#executeQuery(query || null);
-        }
+        if (!query)
+            return;
+        // A request in flight is re-run as it is, so a page change still clears the drop-in items. The shown
+        // one only for its page: its drop-ins are gone already, and any there now were added since.
+        // Not `pagination()`: after a new query failed to load, that still describes the previous query's
+        // result, and its page number would be applied to the new one.
+        const pending = this.#pendingRequest();
+        const shown = this.#shownRequest();
+        this.#request(pending?.query === query ? pending : { query, page: shown?.query === query ? shown.page : null });
     }
     /**
      * Forces the `transformer` function to be re-applied to the current result set.
@@ -730,25 +763,33 @@ class QueryListComponent {
     /**
      * Handles a page-change event emitted by the `mat-paginator`.
      *
-     * Converts the zero-based `pageEvent.pageIndex` to the one-based page number
-     * expected by `goToPage()` and delegates the request.
+     * Loads the page for the zero-based `pageEvent.pageIndex`, like `goToPage()`, and clears the
+     * drop-in items once that page is shown. If it fails to load, they stay.
      *
      * Bound to `(page)` on the `mat-paginator` in the template.
      *
+     * Ignored while the paginator still shows the previous query's result — a new query is loading or
+     * failed to load — since its page numbers mean nothing for the current query.
+     *
      * @param pageEvent The pagination event emitted by `MatPaginatorModule`.
      */
     changePage(pageEvent) {
-        this.#dropInItems.set([]);
-        this.goToPage(pageEvent.pageIndex + 1);
+        const shown = this.#shownRequest();
+        if (!shown || shown.query !== this.query()) {
+            this.#syncPaginatorPage();
+            return;
+        }
+        this.#request({ query: shown.query, page: pageEvent.pageIndex + 1, clearDropIns: true });
     }
     /**
      * Fetches and displays the given page of the current query result.
      *
      * Sets `busy` to `true` for the duration of the request. On success, updates
      * the pagination state, clears all optimistic overrides (they are page-scoped),
-     * and replaces `#items` with the new page's results.
-     *
-     * Also used internally by `refresh()` to reload the currently active page.
+     * and replaces `#items` with the new page's results. A request still in flight — an earlier
+     * page change or a new query — is cancelled. If loading the page fails, the list and the
+     * paginator stay on the page that was loaded before. A page past the last one loads the last
+     * page instead.
      *
      * @param page One-based page number to navigate to.
      */
@@ -756,21 +797,7 @@ class QueryListComponent {
         const query = this.query();
         if (!query)
             return;
-        this.busy.set(true);
-        this.#searchService.getPage(query, page, this.effectivePageSize(), this.includePermissions()).subscribe({
-            next: (res) => {
-                this.#setupPagination(res);
-                this.#listItemUpdates.set({});
-                this.#items.set(res.items);
-                this.queryResult.emit({ totalCount: res.totalNumItems, items: res.items });
-                this.busy.set(false);
-            },
-            error: (err) => {
-                // TODO: how should errors be handles in case hat loading pages fail
-                this.busy.set(false);
-                console.error(err);
-            }
-        });
+        this.#request({ query, page });
     }
     //#endregion
     //#region Utilities
@@ -782,32 +809,80 @@ class QueryListComponent {
         const value = item[prop];
         return value == null ? undefined : String(value);
     }
+    /** Starts `request`, cancelling any request still in flight (see `#requests`). */
+    #request(request) {
+        // A copy: `#load` tells requests apart by identity, and `request` may be the one still in flight.
+        const started = { ...request };
+        // Before `next()`: `switchMap` cancels the superseded request first, and its `finalize` must already
+        // find a newer request pending, or it would clear `busy` while this one is still loading.
+        this.#pendingRequest.set(started);
+        this.#requests.next(started);
+    }
     /**
-     * Executes a search query.
-     * @param query The search query to execute.
-     * This may be a SearchQuery object or a string. If it's a string, it is supposed to
-     * be a CMIS query statement.
+     * Cancels the request still in flight, if any; the list keeps what it shows. With no newer request
+     * pending, the cancelled one's `finalize` clears `busy` and syncs the paginator.
      */
-    #executeQuery(query) {
-        if (query && !this.busy()) {
-            this.busy.set(true);
-            const size = this.effectivePageSize();
-            (typeof query === 'string'
-                ? this.#searchService.searchCmis(query, size, this.includePermissions())
-                : this.#searchService.search({ ...query, size })).subscribe({
-                next: (res) => {
-                    this.#setupPagination(res);
-                    this.#listItemUpdates.set({});
-                    this.#items.set(res.items);
-                    this.queryResult.emit({ totalCount: res.totalNumItems, items: res.items });
-                    this.busy.set(false);
-                },
-                error: (err) => {
-                    this.busy.set(false);
-                    console.error(err);
-                }
-            });
+    #cancel() {
+        this.#requests.next(null);
+    }
+    /**
+     * Loads one request. A failure is logged and leaves the current result in place, and it must not
+     * end `#requests` — every later search goes through that same stream.
+     */
+    #load(request) {
+        // `defer`: building the search can throw — e.g. a query that cannot be serialized — and a throw
+        // outside the pipe would get past `catchError`.
+        return defer(() => this.#search(request)).pipe(map((result) => ({ request, result })), catchError((err) => {
+            console.error(err);
+            return EMPTY;
+        }), finalize(() => {
+            // A superseded request leaves `busy` and the paginator to the one that replaced it.
+            if (this.#pendingRequest() !== request)
+                return;
+            this.#pendingRequest.set(null);
+            this.#syncPaginatorPage();
+        }));
+    }
+    /**
+     * The search call for `request`. The query may be a `SearchQuery` object or a string; a string is
+     * supposed to be a CMIS query statement.
+     */
+    #search({ query, page }) {
+        const size = this.effectivePageSize();
+        // `getPage` writes `from` onto a query object and pages it by the object's own `size`, so it gets a copy
+        // sized to this list's pages. Left on the consumer's object, `from` would open its next search — or a
+        // copy made for a sort change — on a later page.
+        const target = typeof query === 'string' ? query : { ...query, size };
+        return this.#searchService.getPage(target, page ?? 1, size, this.includePermissions());
+    }
+    #showResult(request, result) {
+        const lastPage = result.paging?.totalPages ?? 1;
+        if (request.page !== null && request.page > lastPage) {
+            // The page is gone, e.g. `refresh()` after its objects were deleted. Showing it empty would strand
+            // the user, and with a single page left there is not even a paginator to leave it with.
+            this.#request({ ...request, page: lastPage > 1 ? lastPage : null });
+            return;
         }
+        this.#shownRequest.set(request);
+        // Before `queryResult`: `TileListComponent` keeps as many leading items as there are drop-ins then.
+        if (request.clearDropIns)
+            this.#dropInItems.set([]);
+        this.#setupPagination(result);
+        this.#listItemUpdates.set({});
+        this.#items.set(result.items);
+        this.queryResult.emit({ totalCount: result.totalNumItems, items: result.items });
+    }
+    /**
+     * Puts the paginator on the page that is actually loaded. It moves to the requested page as soon as
+     * it is clicked, and its `[pageIndex]` binding cannot undo that when the click does not load: the
+     * request failed, or a newer one replaced it and loaded the page that was bound before. The bound
+     * value has not changed, so Angular does not re-apply it.
+     */
+    #syncPaginatorPage() {
+        const paginator = this.paginator();
+        const page = this.pagination()?.page;
+        if (paginator && page)
+            paginator.pageIndex = page - 1;
     }
     #setupPagination(searchResult) {
         this.pagination.set(searchResult.paging
@@ -835,7 +910,7 @@ class QueryListComponent {
      */
     #resyncSelectionEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: QueryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: QueryListComponent, isStandalone: true, selector: "yuv-query-list", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, idProperty: { classPropertyName: "idProperty", publicName: "idProperty", isSignal: true, isRequired: false, transformFunction: null }, transformer: { classPropertyName: "transformer", publicName: "transformer", isSignal: true, isRequired: false, transformFunction: null }, preventChangeUntil: { classPropertyName: "preventChangeUntil", publicName: "preventChangeUntil", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableDragSelect: { classPropertyName: "enableDragSelect", publicName: "enableDragSelect", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, selfHandleSelection: { classPropertyName: "selfHandleSelection", publicName: "selfHandleSelection", isSignal: true, isRequired: false, transformFunction: null }, includePermissions: { classPropertyName: "includePermissions", publicName: "includePermissions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", dragSelectChange: "dragSelectChange", itemDoubleClick: "itemDoubleClick", queryResult: "queryResult" }, host: { properties: { "class.pagination": "!!pagination()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["yuvQueryListItem"], descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: ["yuvQueryListEmpty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-list\n  #list\n  [multiselect]=\"multiselect()\"\n  [autoSelect]=\"autoSelect()\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [selfHandleClick]=\"true\"\n  [selfHandleSelection]=\"selfHandleSelection()\"\n  [externalSelectionVisuals]=\"idSelection()\"\n  [yuvDragSelect]=\"{ disabled: !enableDragSelect() || !multiselect() || isTouchDevice }\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n  (dragSelect)=\"onDragSelect($event)\"\n  (itemSelect)=\"onInnerItemSelect($event)\"\n>\n  @for (resultItem of resultItems(); track trackItem(resultItem, $index)) {\n    <div\n      yuvListItem\n      yuvDragSelectItem\n      [selected]=\"isRowSelected(resultItem)\"\n      [class.drop-in]=\"$index < dropInSize()\"\n      (click.single)=\"onItemClick($index, $event)\"\n      (click.double)=\"onItemDoubleClick($index, $event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemTemplate() || null; context: { $implicit: resultItem, index: $index }\" />\n    </div>\n  } @empty {\n    <ng-container *ngTemplateOutlet=\"emptyTemplate() || null\" />\n  }\n</yuv-list>\n@if (pagination(); as pag) {\n  <mat-paginator\n    class=\"paginator\"\n    [length]=\"pag.total\"\n    [pageSize]=\"effectivePageSize()\"\n    (page)=\"changePage($event)\"\n    hidePageSize\n  />\n}\n", styles: [":host{--paging-background: var(--ymt-surface);--drop-in-item-outline: 2px dashed rgb(from var(--ymt-primary) r g b / .9);--drop-in-item-outline-offset: -3px;display:flex;flex-direction:column;max-height:100%}:host [yuvListItem].drop-in{outline:var(--drop-in-item-outline);outline-offset:var(--drop-in-item-outline-offset);overflow:hidden}:host yuv-list{flex:1;overflow-y:auto}:host mat-paginator{flex:0 0 auto;font:inherit;border-block-start:1px solid var(--ymt-outline-variant);background-color:var(--paging-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i2.ListComponent, selector: "yuv-list", inputs: ["preventChangeUntil", "multiselect", "selfHandleSelection", "externalSelectionVisuals", "selfHandleClick", "autoSelect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i2.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "directive", type: DragSelectDirective, selector: "[yuvDragSelect]", inputs: ["yuvDragSelect"], outputs: ["dragSelectChange", "dragSelect"] }, { kind: "directive", type: DragSelectItemDirective, selector: "[yuvDragSelectItem]" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: QueryListComponent, isStandalone: true, selector: "yuv-query-list", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, idProperty: { classPropertyName: "idProperty", publicName: "idProperty", isSignal: true, isRequired: false, transformFunction: null }, transformer: { classPropertyName: "transformer", publicName: "transformer", isSignal: true, isRequired: false, transformFunction: null }, preventChangeUntil: { classPropertyName: "preventChangeUntil", publicName: "preventChangeUntil", isSignal: true, isRequired: false, transformFunction: null }, autoSelect: { classPropertyName: "autoSelect", publicName: "autoSelect", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableDragSelect: { classPropertyName: "enableDragSelect", publicName: "enableDragSelect", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, selfHandleSelection: { classPropertyName: "selfHandleSelection", publicName: "selfHandleSelection", isSignal: true, isRequired: false, transformFunction: null }, includePermissions: { classPropertyName: "includePermissions", publicName: "includePermissions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", dragSelectChange: "dragSelectChange", itemDoubleClick: "itemDoubleClick", queryResult: "queryResult" }, host: { properties: { "class.pagination": "!!pagination()" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["yuvQueryListItem"], descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: ["yuvQueryListEmpty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-list\n  #list\n  [multiselect]=\"multiselect()\"\n  [autoSelect]=\"autoSelect()\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [selfHandleClick]=\"true\"\n  [selfHandleSelection]=\"selfHandleSelection()\"\n  [externalSelectionVisuals]=\"idSelection()\"\n  [yuvDragSelect]=\"{ disabled: !enableDragSelect() || !multiselect() || isTouchDevice }\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n  (dragSelect)=\"onDragSelect($event)\"\n  (itemSelect)=\"onInnerItemSelect($event)\"\n>\n  @for (resultItem of resultItems(); track trackItem(resultItem, $index)) {\n    <div\n      yuvListItem\n      yuvDragSelectItem\n      [selected]=\"isRowSelected(resultItem)\"\n      [class.drop-in]=\"$index < dropInSize()\"\n      (click.single)=\"onItemClick($index, $event)\"\n      (click.double)=\"onItemDoubleClick($index, $event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemTemplate() || null; context: { $implicit: resultItem, index: $index }\" />\n    </div>\n  } @empty {\n    <ng-container *ngTemplateOutlet=\"emptyTemplate() || null\" />\n  }\n</yuv-list>\n@if (pagination(); as pag) {\n  <mat-paginator\n    class=\"paginator\"\n    [length]=\"pag.total\"\n    [pageIndex]=\"pag.page - 1\"\n    [pageSize]=\"effectivePageSize()\"\n    (page)=\"changePage($event)\"\n    hidePageSize\n  />\n}\n", styles: [":host{--paging-background: var(--ymt-surface);--drop-in-item-outline: 2px dashed rgb(from var(--ymt-primary) r g b / .9);--drop-in-item-outline-offset: -3px;display:flex;flex-direction:column;max-height:100%}:host [yuvListItem].drop-in{outline:var(--drop-in-item-outline);outline-offset:var(--drop-in-item-outline-offset);overflow:hidden}:host yuv-list{flex:1;overflow-y:auto}:host mat-paginator{flex:0 0 auto;font:inherit;border-block-start:1px solid var(--ymt-outline-variant);background-color:var(--paging-background)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: YuvListModule }, { kind: "component", type: i2.ListComponent, selector: "yuv-list", inputs: ["preventChangeUntil", "multiselect", "selfHandleSelection", "externalSelectionVisuals", "selfHandleClick", "autoSelect", "disableSelection"], outputs: ["itemSelect", "itemFocus"] }, { kind: "directive", type: i2.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "directive", type: DragSelectDirective, selector: "[yuvDragSelect]", inputs: ["yuvDragSelect"], outputs: ["dragSelectChange", "dragSelect"] }, { kind: "directive", type: DragSelectItemDirective, selector: "[yuvDragSelectItem]" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: QueryListComponent, decorators: [{
             type: Component,
@@ -846,8 +921,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         DragSelectDirective,
                         DragSelectItemDirective,
                         MatPaginatorModule
-                    ], host: { '[class.pagination]': '!!pagination()' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<yuv-list\n  #list\n  [multiselect]=\"multiselect()\"\n  [autoSelect]=\"autoSelect()\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [selfHandleClick]=\"true\"\n  [selfHandleSelection]=\"selfHandleSelection()\"\n  [externalSelectionVisuals]=\"idSelection()\"\n  [yuvDragSelect]=\"{ disabled: !enableDragSelect() || !multiselect() || isTouchDevice }\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n  (dragSelect)=\"onDragSelect($event)\"\n  (itemSelect)=\"onInnerItemSelect($event)\"\n>\n  @for (resultItem of resultItems(); track trackItem(resultItem, $index)) {\n    <div\n      yuvListItem\n      yuvDragSelectItem\n      [selected]=\"isRowSelected(resultItem)\"\n      [class.drop-in]=\"$index < dropInSize()\"\n      (click.single)=\"onItemClick($index, $event)\"\n      (click.double)=\"onItemDoubleClick($index, $event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemTemplate() || null; context: { $implicit: resultItem, index: $index }\" />\n    </div>\n  } @empty {\n    <ng-container *ngTemplateOutlet=\"emptyTemplate() || null\" />\n  }\n</yuv-list>\n@if (pagination(); as pag) {\n  <mat-paginator\n    class=\"paginator\"\n    [length]=\"pag.total\"\n    [pageSize]=\"effectivePageSize()\"\n    (page)=\"changePage($event)\"\n    hidePageSize\n  />\n}\n", styles: [":host{--paging-background: var(--ymt-surface);--drop-in-item-outline: 2px dashed rgb(from var(--ymt-primary) r g b / .9);--drop-in-item-outline-offset: -3px;display:flex;flex-direction:column;max-height:100%}:host [yuvListItem].drop-in{outline:var(--drop-in-item-outline);outline-offset:var(--drop-in-item-outline-offset);overflow:hidden}:host yuv-list{flex:1;overflow-y:auto}:host mat-paginator{flex:0 0 auto;font:inherit;border-block-start:1px solid var(--ymt-outline-variant);background-color:var(--paging-background)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: ['yuvQueryListItem', { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: ['yuvQueryListEmpty', { isSignal: true }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], idProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "idProperty", required: false }] }], transformer: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformer", required: false }] }], preventChangeUntil: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventChangeUntil", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], dragSelectChange: [{ type: i0.Output, args: ["dragSelectChange"] }], itemDoubleClick: [{ type: i0.Output, args: ["itemDoubleClick"] }], queryResult: [{ type: i0.Output, args: ["queryResult"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], enableDragSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDragSelect", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], selfHandleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selfHandleSelection", required: false }] }], includePermissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "includePermissions", required: false }] }] } });
+                    ], host: { '[class.pagination]': '!!pagination()' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<yuv-list\n  #list\n  [multiselect]=\"multiselect()\"\n  [autoSelect]=\"autoSelect()\"\n  [preventChangeUntil]=\"preventChangeUntil()\"\n  [selfHandleClick]=\"true\"\n  [selfHandleSelection]=\"selfHandleSelection()\"\n  [externalSelectionVisuals]=\"idSelection()\"\n  [yuvDragSelect]=\"{ disabled: !enableDragSelect() || !multiselect() || isTouchDevice }\"\n  (dragSelectChange)=\"onDragSelectChange($event)\"\n  (dragSelect)=\"onDragSelect($event)\"\n  (itemSelect)=\"onInnerItemSelect($event)\"\n>\n  @for (resultItem of resultItems(); track trackItem(resultItem, $index)) {\n    <div\n      yuvListItem\n      yuvDragSelectItem\n      [selected]=\"isRowSelected(resultItem)\"\n      [class.drop-in]=\"$index < dropInSize()\"\n      (click.single)=\"onItemClick($index, $event)\"\n      (click.double)=\"onItemDoubleClick($index, $event)\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemTemplate() || null; context: { $implicit: resultItem, index: $index }\" />\n    </div>\n  } @empty {\n    <ng-container *ngTemplateOutlet=\"emptyTemplate() || null\" />\n  }\n</yuv-list>\n@if (pagination(); as pag) {\n  <mat-paginator\n    class=\"paginator\"\n    [length]=\"pag.total\"\n    [pageIndex]=\"pag.page - 1\"\n    [pageSize]=\"effectivePageSize()\"\n    (page)=\"changePage($event)\"\n    hidePageSize\n  />\n}\n", styles: [":host{--paging-background: var(--ymt-surface);--drop-in-item-outline: 2px dashed rgb(from var(--ymt-primary) r g b / .9);--drop-in-item-outline-offset: -3px;display:flex;flex-direction:column;max-height:100%}:host [yuvListItem].drop-in{outline:var(--drop-in-item-outline);outline-offset:var(--drop-in-item-outline-offset);overflow:hidden}:host yuv-list{flex:1;overflow-y:auto}:host mat-paginator{flex:0 0 auto;font:inherit;border-block-start:1px solid var(--ymt-outline-variant);background-color:var(--paging-background)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: ['yuvQueryListItem', { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: ['yuvQueryListEmpty', { isSignal: true }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], idProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "idProperty", required: false }] }], transformer: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformer", required: false }] }], preventChangeUntil: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventChangeUntil", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }], dragSelectChange: [{ type: i0.Output, args: ["dragSelectChange"] }], itemDoubleClick: [{ type: i0.Output, args: ["itemDoubleClick"] }], queryResult: [{ type: i0.Output, args: ["queryResult"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], enableDragSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDragSelect", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], selfHandleSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selfHandleSelection", required: false }] }], includePermissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "includePermissions", required: false }] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }] } });
 
 const cmp = [QueryListComponent];
 class YuvQueryListModule {