@ethlete/query 6.0.0-next.1 → 6.0.0-next.11

package/fesm2022/ethlete-query.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { isDevMode, DestroyRef, InjectionToken, inject, Injector, EnvironmentInjector, ErrorHandler, ɵEffectScheduler as _EffectScheduler, createEnvironmentInjector, effect, computed, untracked, signal, linkedSignal, runInInjectionContext, assertInInjectionContext, ChangeDetectorRef, ViewContainerRef, TemplateRef, Input, Directive, ElementRef, input, Pipe, ViewEncapsulation, ChangeDetectionStrategy, Component, DOCUMENT, NgZone } from '@angular/core';
+import { isDevMode, DestroyRef, InjectionToken, inject, Injector, EnvironmentInjector, ErrorHandler, createEnvironmentInjector, effect, untracked, signal, linkedSignal, computed, runInInjectionContext, assertInInjectionContext, ChangeDetectorRef, ViewContainerRef, TemplateRef, Input, Directive, ElementRef, input, Pipe, ViewEncapsulation, ChangeDetectionStrategy, Component, DOCUMENT, NgZone } from '@angular/core';
 import { createStaticProvider, RuntimeError, clamp, createDestroy, computedTillTruthy, getCookie, setCookie, deleteCookie, createProvider, nextFrame, createRootProvider, isObject, injectRoute, getDomain, injectQueryParamChanges, injectQueryParams, clone, equal, ET_PROPERTY_REMOVED, previousSignalValue } from '@ethlete/core';
-import { Observable, Subscription, tap, retry, throwError, timer, catchError, takeUntil, startWith, pairwise, switchMap, of, BehaviorSubject, Subject, fromEvent, take, filter, ReplaySubject, map, shareReplay, interval, skip, takeWhile, combineLatest, EMPTY, withLatestFrom, debounceTime, merge, throttleTime } from 'rxjs';
+import { filter, Subject, Subscription, Observable, tap, retry, throwError, timer, catchError, takeUntil, startWith, pairwise, switchMap, of, BehaviorSubject, fromEvent, take, ReplaySubject, map, shareReplay, interval, skip, takeWhile, combineLatest, EMPTY, withLatestFrom, debounceTime, merge, throttleTime } from 'rxjs';
 import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { HttpClient, HttpErrorResponse, HttpEventType, HttpHeaders, HttpStatusCode } from '@angular/common/http';
+import { HttpClient, HttpEventType, HttpErrorResponse, HttpHeaders, HttpStatusCode } from '@angular/common/http';
 import { getActiveConsumer, setActiveConsumer } from '@angular/core/primitives/signals';
 import { NgClass, AsyncPipe, JsonPipe } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -46,9 +46,6 @@ const createGqlExecuteFn = (executeOptions) => {
     const reset = () => resetExecuteState({ executeState, executeOptions });
     const exec = (executeArgs) => {
         circularChecker.check();
-        // Make sure all effects are flushed before reading the args.
-        // A withArgs feature effect might still be pending otherwise resulting in the wrong args being read.
-        executeOptions.deps.effectScheduler.flush();
         const { args = executeOptions.state.args(), options } = executeArgs ?? {};
         const query = transformGql(executeOptions.creatorInternals.query);
         let gqlParams = query(args?.variables);
@@ -133,7 +130,6 @@ const setupQueryDependencies = (options) => {
         scopeDestroyRef: hostInjector.get(DestroyRef),
         client: hostInjector.get(clientToken),
         injector: undefined, // Will be set after injector creation
-        effectScheduler: hostInjector.get(_EffectScheduler),
         ngErrorHandler: hostInjector.get(ErrorHandler),
         httpClient: hostInjector.get(HttpClient),
     };
@@ -307,17 +303,27 @@ const withArgs = (args) => {
     return createQueryFeature({
         type: QueryFeatureType.WITH_ARGS,
         fn: (context) => {
-            const currArgs = computed(() => args(), ...(ngDevMode ? [{ debugName: "currArgs" }] : []));
+            // `state.args` is reactively backed by this source, so every reader (exec, polling,
+            // auto-refresh) always sees the latest value with no pending-effect window. Sentinels are
+            // resolved here: CLEAR -> null, `null` ("don't change") -> keep the previous value.
+            let previous = null;
+            context.state.subtle.setArgsSource(() => {
+                const value = args();
+                if (value === CLEAR_QUERY_ARGS) {
+                    previous = null;
+                    return null;
+                }
+                if (value === null)
+                    return previous;
+                previous = value;
+                return value;
+            });
+            // Trigger (auto-)execution whenever the resolved args change.
             nestedEffect(() => {
-                const currArgsNow = currArgs();
+                const currArgsNow = context.state.args();
                 if (currArgsNow === null)
                     return;
                 untracked(() => {
-                    if (currArgsNow === CLEAR_QUERY_ARGS) {
-                        context.state.args.set(null);
-                        return;
-                    }
-                    context.state.args.set(currArgsNow);
                     if (context.flags.shouldAutoExecute)
                         context.execute({ args: currArgsNow });
                 });
@@ -366,14 +372,9 @@ const withLogging = (options) => {
     return createQueryFeature({
         type: QueryFeatureType.WITH_LOGGING,
         fn: (context) => {
-            nestedEffect(() => {
-                const event = context.state.latestHttpEvent();
-                if (event === null)
-                    return;
-                untracked(() => {
-                    options.logFn(event);
-                });
-            }, { injector: context.deps.injector });
+            context.state.events$.pipe(takeUntilDestroyed(context.deps.destroyRef)).subscribe((event) => {
+                options.logFn(event);
+            });
         },
     });
 };
@@ -382,14 +383,11 @@ const withErrorHandling = (options) => {
     return createQueryFeature({
         type: QueryFeatureType.WITH_ERROR_HANDLING,
         fn: (context) => {
-            nestedEffect(() => {
-                const error = context.state.error();
-                if (error === null)
-                    return;
-                untracked(() => {
-                    options.handler(error);
-                });
-            }, { injector: context.deps.injector });
+            context.state.events$
+                .pipe(filter((event) => event.type === 'error'), takeUntilDestroyed(context.deps.destroyRef))
+                .subscribe((event) => {
+                options.handler(event.error);
+            });
         },
     });
 };
@@ -398,14 +396,11 @@ const withSuccessHandling = (options) => {
     return createQueryFeature({
         type: QueryFeatureType.WITH_SUCCESS_HANDLING,
         fn: (context) => {
-            nestedEffect(() => {
-                const response = context.state.response();
-                if (response === null)
-                    return;
-                untracked(() => {
-                    options.handler(response);
-                });
-            }, { injector: context.deps.injector });
+            context.state.events$
+                .pipe(filter((event) => event.type === HttpEventType.Response), takeUntilDestroyed(context.deps.destroyRef))
+                .subscribe(() => {
+                options.handler(context.state.response());
+            });
         },
     });
 };
@@ -458,20 +453,32 @@ const withResponseUpdate = (options) => {
 };
 
 const setupQueryState = (options) => {
-    const request = signal(null, ...(ngDevMode ? [{ debugName: "request" }] : []));
-    const rawResponse = linkedSignal(() => request()?.response() ?? null, ...(ngDevMode ? [{ debugName: "rawResponse" }] : []));
+    const request = signal(null, ...(ngDevMode ? [{ debugName: "request" }] : /* istanbul ignore next */ []));
+    const rawResponse = linkedSignal(() => request()?.response() ?? null, ...(ngDevMode ? [{ debugName: "rawResponse" }] : /* istanbul ignore next */ []));
     const response = computed(() => {
         const raw = rawResponse();
         if (raw === null)
             return null;
         return options.transformResponse ? options.transformResponse(raw) : raw;
-    }, ...(ngDevMode ? [{ debugName: "response" }] : []));
-    const loading = linkedSignal(() => request()?.loading() ?? null, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    const error = linkedSignal(() => request()?.error() ?? null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-    const latestHttpEvent = linkedSignal(() => request()?.currentEvent() ?? null, ...(ngDevMode ? [{ debugName: "latestHttpEvent" }] : []));
-    const args = signal(null, ...(ngDevMode ? [{ debugName: "args" }] : []));
-    const lastTimeExecutedAt = signal(null, ...(ngDevMode ? [{ debugName: "lastTimeExecutedAt" }] : []));
-    const lastTriggeredBy = signal(null, ...(ngDevMode ? [{ debugName: "lastTriggeredBy" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "response" }] : /* istanbul ignore next */ []));
+    const loading = linkedSignal(() => request()?.loading() ?? null, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    const error = linkedSignal(() => request()?.error() ?? null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    const latestHttpEvent = linkedSignal(() => request()?.currentEvent() ?? null, ...(ngDevMode ? [{ debugName: "latestHttpEvent" }] : /* istanbul ignore next */ []));
+    // `args` is reactively sourced: reads always reflect the latest value from the installed source
+    // (e.g. the `withArgs` feature), so there is no stale window between a source change and an
+    // effect writing it. It stays writable (reset / auth-error clear it via `.set(null)`); a manual
+    // set is overridden again the next time the source's dependencies change.
+    const argsSource = signal(() => null, ...(ngDevMode ? [{ debugName: "argsSource" }] : /* istanbul ignore next */ []));
+    const args = linkedSignal(() => argsSource()(), ...(ngDevMode ? [{ debugName: "args" }] : /* istanbul ignore next */ []));
+    const setArgsSource = (source) => argsSource.set(source);
+    const lastTimeExecutedAt = signal(null, ...(ngDevMode ? [{ debugName: "lastTimeExecutedAt" }] : /* istanbul ignore next */ []));
+    const lastTriggeredBy = signal(null, ...(ngDevMode ? [{ debugName: "lastTriggeredBy" }] : /* istanbul ignore next */ []));
+    const requestEvents$ = new Subject();
+    let requestEventsSubscription = Subscription.EMPTY;
+    const bindRequestEvents = (request) => {
+        requestEventsSubscription.unsubscribe();
+        requestEventsSubscription = request.events$.subscribe((event) => requestEvents$.next(event));
+    };
     const executionState = computed(() => {
         const currentResponse = response();
         const currentError = error();
@@ -506,7 +513,7 @@ const setupQueryState = (options) => {
         else {
             return null;
         }
-    }, ...(ngDevMode ? [{ debugName: "executionState" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "executionState" }] : /* istanbul ignore next */ []));
     const state = {
         rawResponse,
         response,
@@ -517,9 +524,12 @@ const setupQueryState = (options) => {
         lastTimeExecutedAt,
         lastTriggeredBy,
         executionState,
+        events$: requestEvents$.asObservable(),
         subtle: {
             request,
             rawResponse,
+            bindRequestEvents,
+            setArgsSource,
         },
     };
     return state;
@@ -530,7 +540,7 @@ const createQuerySnapshotFn = (options) => {
     const context = injectQueryContext();
     const snapshotFn = () => {
         const snapshotState = setupQueryState({});
-        const isAlive = signal(true, ...(ngDevMode ? [{ debugName: "isAlive" }] : []));
+        const isAlive = signal(true, ...(ngDevMode ? [{ debugName: "isAlive" }] : /* istanbul ignore next */ []));
         const killEffectRef = effect(() => {
             const currentLoading = state.loading();
             const currentError = state.error();
@@ -549,13 +559,14 @@ const createQuerySnapshotFn = (options) => {
                 snapshotState.rawResponse.set(currentResponse);
                 if (currentLoading)
                     return;
-                if (!currentResponse && !currentError)
+                const hasCompletedResponse = currentLatestHttpEvent?.type === HttpEventType.Response;
+                if (!hasCompletedResponse && !currentError)
                     return;
                 // kill the effect once loading is done and we either have a response or an error
                 killEffectRef.destroy();
                 isAlive.set(false);
             });
-        }, { ...(ngDevMode ? { debugName: "killEffectRef" } : {}), injector: context.deps.injector });
+        }, { ...(ngDevMode ? { debugName: "killEffectRef" } : /* istanbul ignore next */ {}), injector: context.deps.injector });
         const snapshot = {
             args: wrapAsObservableSignal(snapshotState.args.asReadonly(), context.deps.injector),
             response: wrapAsObservableSignal(snapshotState.response, context.deps.injector),
@@ -745,6 +756,7 @@ const queryExecute = (options) => {
     state.lastTimeExecutedAt.set(Date.now());
     state.lastTriggeredBy.set(runQueryOptions?.triggeredBy ?? null);
     state.subtle.request.set(request);
+    state.subtle.bindRequestEvents(request);
 };
 const circularQueryDependencyChecker = () => {
     let lastTriggerTs = 0;
@@ -778,9 +790,6 @@ const createExecuteFn = (executeOptions) => {
     const reset = () => resetExecuteState({ executeState, executeOptions });
     const exec = (executeArgs) => {
         circularChecker.check();
-        // Make sure all effects are flushed before reading the args.
-        // A withArgs feature effect might still be pending otherwise resulting in the wrong args being read.
-        executeOptions.deps.effectScheduler.flush();
         const { args = executeOptions.state.args(), options } = executeArgs ?? {};
         queryExecute({ executeOptions, executeState, args, options });
     };
@@ -1538,18 +1547,19 @@ const SPEED_BUFFER_TIME_IN_MS = 2000;
 const createHttpRequest = (options) => {
     let currentStreamSubscription = Subscription.EMPTY;
     const { args, clientOptions, dependencies } = options;
-    const currentEvent = signal(null, ...(ngDevMode ? [{ debugName: "currentEvent" }] : []));
-    const loading = signal(null, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    const error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-    const response = signal(null, ...(ngDevMode ? [{ debugName: "response" }] : []));
-    const lastLoadEventTime = signal(0, ...(ngDevMode ? [{ debugName: "lastLoadEventTime" }] : []));
-    const lastLoadEventAmount = signal(0, ...(ngDevMode ? [{ debugName: "lastLoadEventAmount" }] : []));
-    const lastExecuteTime = signal(0, ...(ngDevMode ? [{ debugName: "lastExecuteTime" }] : []));
-    const expiresIn = signal(null, ...(ngDevMode ? [{ debugName: "expiresIn" }] : []));
+    const currentEvent = signal(null, ...(ngDevMode ? [{ debugName: "currentEvent" }] : /* istanbul ignore next */ []));
+    const event$ = new Subject();
+    const loading = signal(null, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    const error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    const response = signal(null, ...(ngDevMode ? [{ debugName: "response" }] : /* istanbul ignore next */ []));
+    const lastLoadEventTime = signal(0, ...(ngDevMode ? [{ debugName: "lastLoadEventTime" }] : /* istanbul ignore next */ []));
+    const lastLoadEventAmount = signal(0, ...(ngDevMode ? [{ debugName: "lastLoadEventAmount" }] : /* istanbul ignore next */ []));
+    const lastExecuteTime = signal(0, ...(ngDevMode ? [{ debugName: "lastExecuteTime" }] : /* istanbul ignore next */ []));
+    const expiresIn = signal(null, ...(ngDevMode ? [{ debugName: "expiresIn" }] : /* istanbul ignore next */ []));
     const isStale = computed(() => {
         const expiresInTs = expiresIn();
         return expiresInTs === null || expiresInTs < Date.now();
-    }, ...(ngDevMode ? [{ debugName: "isStale" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "isStale" }] : /* istanbul ignore next */ []));
     const createStream = () => {
         const headers = typeof args?.headers === 'function' ? args.headers() : args?.headers;
         return dependencies.httpClient
@@ -1600,14 +1610,12 @@ const createHttpRequest = (options) => {
         return true;
     };
     const destroy = () => {
-        if (currentStreamSubscription.closed) {
-            return false;
-        }
+        const wasActive = !currentStreamSubscription.closed;
         currentStreamSubscription.unsubscribe();
-        return true;
+        event$.complete();
+        return wasActive;
     };
     const updateState = (event) => {
-        currentEvent.set(event);
         switch (event.type) {
             case HttpEventType.Response:
                 {
@@ -1634,12 +1642,16 @@ const createHttpRequest = (options) => {
                 }
                 break;
         }
+        currentEvent.set(event);
+        event$.next(event);
     };
     const updateErrorState = (errorResponse) => {
         const errorRes = createQueryErrorResponse(errorResponse);
         error.set(errorRes);
         loading.set(null);
-        currentEvent.set({ type: 'error', error: errorRes });
+        const errorEvent = { type: 'error', error: errorRes };
+        currentEvent.set(errorEvent);
+        event$.next(errorEvent);
         options.dependencies.ngErrorHandler.handleError(errorRes.raw);
     };
     const updateLoadingState = (event) => {
@@ -1679,6 +1691,7 @@ const createHttpRequest = (options) => {
         error: error.asReadonly(),
         response: response.asReadonly(),
         currentEvent: currentEvent.asReadonly(),
+        events$: event$.asObservable(),
         isStale,
     };
     return httpRequest;
@@ -1696,9 +1709,9 @@ const createQueryStack = (options) => {
         return { queries, lastQuery };
     }, transform, argsKeyFn, deduplicateArgs, maxQueries = Infinity, removeStrategy = 'oldest', } = options ?? {};
     const injector = inject(Injector);
-    const queries = signal([], ...(ngDevMode ? [{ debugName: "queries" }] : []));
-    const lastQuery = signal(null, ...(ngDevMode ? [{ debugName: "lastQuery" }] : []));
-    const firstQuery = computed(() => queries()[0] ?? null, ...(ngDevMode ? [{ debugName: "firstQuery" }] : []));
+    const queries = signal([], ...(ngDevMode ? [{ debugName: "queries" }] : /* istanbul ignore next */ []));
+    const lastQuery = signal(null, ...(ngDevMode ? [{ debugName: "lastQuery" }] : /* istanbul ignore next */ []));
+    const firstQuery = computed(() => queries()[0] ?? null, ...(ngDevMode ? [{ debugName: "firstQuery" }] : /* istanbul ignore next */ []));
     const hasWithArgsFeature = features.some((f) => f.type == QueryFeatureType.WITH_ARGS);
     const hasWithOptimisticUpdateFeature = features.some((f) => f.type == QueryFeatureType.WITH_RESPONSE_UPDATE);
     if (hasWithArgsFeature) {
@@ -1780,23 +1793,23 @@ const createQueryStack = (options) => {
         untracked(() => clear());
     });
     effect(() => runWithArgs(args(dependencies?.())));
-    const anyLoading = computed(() => queries().some((q) => q.loading()), ...(ngDevMode ? [{ debugName: "anyLoading" }] : []));
-    const loadingCount = computed(() => queries().filter((q) => q.loading()).length, ...(ngDevMode ? [{ debugName: "loadingCount" }] : []));
+    const anyLoading = computed(() => queries().some((q) => q.loading()), ...(ngDevMode ? [{ debugName: "anyLoading" }] : /* istanbul ignore next */ []));
+    const loadingCount = computed(() => queries().filter((q) => q.loading()).length, ...(ngDevMode ? [{ debugName: "loadingCount" }] : /* istanbul ignore next */ []));
     const allLoading = computed(() => {
         const qs = queries();
         return qs.length > 0 && qs.every((q) => q.loading());
-    }, ...(ngDevMode ? [{ debugName: "allLoading" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "allLoading" }] : /* istanbul ignore next */ []));
     const loadingProgress = computed(() => {
         const total = queries().length;
         const loaded = queries().filter((q) => !q.loading()).length;
         return { loaded, total };
-    }, ...(ngDevMode ? [{ debugName: "loadingProgress" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "loadingProgress" }] : /* istanbul ignore next */ []));
     const anyError = computed(() => queries()
         .map((q) => q.error())
-        .find((e) => e !== null) ?? null, ...(ngDevMode ? [{ debugName: "anyError" }] : []));
+        .find((e) => e !== null) ?? null, ...(ngDevMode ? [{ debugName: "anyError" }] : /* istanbul ignore next */ []));
     const errors = computed(() => queries()
         .map((q) => q.error())
-        .filter((e) => e !== null), ...(ngDevMode ? [{ debugName: "errors" }] : []));
+        .filter((e) => e !== null), ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     const response = computed(() => {
         const responses = queries().map((q) => q.response());
         return transform?.(responses) ?? responses;
@@ -1891,12 +1904,12 @@ const fakePaginationAdapter = (totalHits = 10) => {
 };
 const createPagedQueryStack = (options) => {
     const { responseNormalizer, queryCreator, features } = options;
-    const currentPageArgs = signal(null, ...(ngDevMode ? [{ debugName: "currentPageArgs" }] : []));
-    const initialPage = signal(options.initialPage ?? 1, ...(ngDevMode ? [{ debugName: "initialPage" }] : []));
-    const loadedMinPage = signal(initialPage(), ...(ngDevMode ? [{ debugName: "loadedMinPage" }] : []));
-    const loadedMaxPage = signal(initialPage(), ...(ngDevMode ? [{ debugName: "loadedMaxPage" }] : []));
-    const lastResetTimestamp = signal(Date.now(), ...(ngDevMode ? [{ debugName: "lastResetTimestamp" }] : []));
-    const pageDirection = signal('next', ...(ngDevMode ? [{ debugName: "pageDirection" }] : []));
+    const currentPageArgs = signal(null, ...(ngDevMode ? [{ debugName: "currentPageArgs" }] : /* istanbul ignore next */ []));
+    const initialPage = signal(options.initialPage ?? 1, ...(ngDevMode ? [{ debugName: "initialPage" }] : /* istanbul ignore next */ []));
+    const loadedMinPage = signal(initialPage(), ...(ngDevMode ? [{ debugName: "loadedMinPage" }] : /* istanbul ignore next */ []));
+    const loadedMaxPage = signal(initialPage(), ...(ngDevMode ? [{ debugName: "loadedMaxPage" }] : /* istanbul ignore next */ []));
+    const resetTrigger = signal(0, ...(ngDevMode ? [{ debugName: "resetTrigger" }] : /* istanbul ignore next */ []));
+    const pageDirection = signal('next', ...(ngDevMode ? [{ debugName: "pageDirection" }] : /* istanbul ignore next */ []));
     const stack = createQueryStack({
         args: () => null,
         queryCreator,
@@ -1919,7 +1932,7 @@ const createPagedQueryStack = (options) => {
         transform: transformArrayResponse,
     });
     effect(() => {
-        lastResetTimestamp();
+        resetTrigger();
         const args = options.args(initialPage(), []);
         untracked(() => {
             stack.clear();
@@ -1935,22 +1948,22 @@ const createPagedQueryStack = (options) => {
         if (!res)
             return null;
         return responseNormalizer(res, all);
-    }, ...(ngDevMode ? [{ debugName: "maxPagination" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "maxPagination" }] : /* istanbul ignore next */ []));
     const minPagination = computed(() => {
         const res = stack.firstQuery()?.response();
         const all = stack.response();
         if (!res)
             return null;
         return responseNormalizer(res, all);
-    }, ...(ngDevMode ? [{ debugName: "minPagination" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "minPagination" }] : /* istanbul ignore next */ []));
     const isFirstPageLoaded = computed(() => {
         const min = minPagination();
         return min ? loadedMinPage() === min.currentPage : false;
-    }, ...(ngDevMode ? [{ debugName: "isFirstPageLoaded" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "isFirstPageLoaded" }] : /* istanbul ignore next */ []));
     const isLastPageLoaded = computed(() => {
         const max = maxPagination();
         return max ? loadedMaxPage() === max.totalPages : false;
-    }, ...(ngDevMode ? [{ debugName: "isLastPageLoaded" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "isLastPageLoaded" }] : /* istanbul ignore next */ []));
     const fetchPreviousPage = () => {
         const page = loadedMinPage() - 1;
         const allResponses = stack.response();
@@ -2019,25 +2032,25 @@ const createPagedQueryStack = (options) => {
         const page = resetOptions?.initialPage ?? initialPage();
         initialPage.set(page);
         pageDirection.set('next');
-        lastResetTimestamp.set(Date.now());
+        resetTrigger.update((v) => v + 1);
     };
     const canFetchPreviousPage = computed(() => {
         const currentMinPagination = minPagination();
         if (!currentMinPagination)
             return false;
         return loadedMinPage() > 1;
-    }, ...(ngDevMode ? [{ debugName: "canFetchPreviousPage" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "canFetchPreviousPage" }] : /* istanbul ignore next */ []));
     const canFetchNextPage = computed(() => {
         const currentMaxPagination = maxPagination();
         return currentMaxPagination ? loadedMaxPage() < currentMaxPagination.totalPages : false;
-    }, ...(ngDevMode ? [{ debugName: "canFetchNextPage" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "canFetchNextPage" }] : /* istanbul ignore next */ []));
     const items = computed(() => {
         const res = stack.response();
         return res.map((r) => responseNormalizer(r, res).items).flat();
-    }, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     const isFirstLoad = computed(() => {
         return stack.queries().length === 1 && !!stack.lastQuery()?.loading();
-    }, ...(ngDevMode ? [{ debugName: "isFirstLoad" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "isFirstLoad" }] : /* istanbul ignore next */ []));
     const execute = (options) => {
         const whereFn = options?.where;
         if (whereFn) {
@@ -2210,7 +2223,7 @@ function effectComputed(computation, injector) {
         // Ignore errors in the initial computation
         // Angular might throw an error if required inputs are read but not available yet
     }
-    const lastResult = signal(initialData, ...(ngDevMode ? [{ debugName: "lastResult" }] : []));
+    const lastResult = signal(initialData, ...(ngDevMode ? [{ debugName: "lastResult" }] : /* istanbul ignore next */ []));
     effect(() => {
         const data = runInInjectionContext(injector, () => computation());
         untracked(() => {
@@ -2261,7 +2274,7 @@ function queryStateSignal(source, options) {
     })), {
         initialValue: null,
     });
-    const rwSignal = linkedSignal(roSignal, ...(ngDevMode ? [{ debugName: "rwSignal" }] : []));
+    const rwSignal = linkedSignal(roSignal, ...(ngDevMode ? [{ debugName: "rwSignal" }] : /* istanbul ignore next */ []));
     return rwSignal;
 }
 function queryStateResponseSignal(source, options) {
@@ -2269,7 +2282,7 @@ function queryStateResponseSignal(source, options) {
     const dataSignal = computed(() => {
         const state = s();
         return isQueryStateSuccess(state) ? state.response : null;
-    }, ...(ngDevMode ? [{ debugName: "dataSignal" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "dataSignal" }] : /* istanbul ignore next */ []));
     dataSignal['reset'] = () => {
         s.set(null);
     };
@@ -2352,7 +2365,7 @@ class V2QueryCreator {
         };
         this.createSignal = (initialValue, config) => {
             assertInInjectionContext(this.createSignal);
-            const _signal = signal(initialValue ?? null, ...(ngDevMode ? [{ debugName: "_signal" }] : []));
+            const _signal = signal(initialValue ?? null, ...(ngDevMode ? [{ debugName: "_signal" }] : /* istanbul ignore next */ []));
             addQueryContainerHandling(toObservable(_signal), () => _signal(), config);
             return _signal;
         };
@@ -2622,11 +2635,14 @@ const createSecureExecuteFactory = (options) => {
     const circularChecker = circularQueryDependencyChecker();
     let authQuerySubscription = Subscription.EMPTY;
     let tokenRefreshSubscription = Subscription.EMPTY;
+    let tokenWaitSubscription = Subscription.EMPTY;
     const reset = () => {
         authQuerySubscription.unsubscribe();
         authQuerySubscription = Subscription.EMPTY;
         tokenRefreshSubscription.unsubscribe();
         tokenRefreshSubscription = Subscription.EMPTY;
+        tokenWaitSubscription.unsubscribe();
+        tokenWaitSubscription = Subscription.EMPTY;
         resetExecuteState({
             executeState,
             executeOptions: { deps: options.deps, state: options.state },
@@ -2667,11 +2683,27 @@ const createSecureExecuteFactory = (options) => {
             },
         }, tokens, headers, executeState);
     };
+    // The auth query completing and the access token being populated happen on two
+    // different reactive timelines: the token is set by a separate token-extraction
+    // effect (see `setupBearerQueryRegistry`), and for cross-client / secure auth
+    // queries the completion is delivered through several nested `toObservable` hops.
+    // Calling `authAndExec` purely because the auth query is "done" therefore races
+    // the token and can run while it is still null. Gate on the token signal instead:
+    // execute immediately if it is already available, otherwise wait for it.
+    const authAndExecWhenTokenReady = (executeArgs) => {
+        if (options.authProvider.accessToken()) {
+            authAndExec(executeArgs);
+            return;
+        }
+        tokenWaitSubscription.unsubscribe();
+        tokenWaitSubscription = toObservable(options.authProvider.accessToken, {
+            injector: options.deps.injector,
+        })
+            .pipe(filter(Boolean), take(1), tap(() => authAndExec(executeArgs)))
+            .subscribe();
+    };
     const exec = (executeArgs) => {
         circularChecker.check();
-        // Make sure all effects are flushed before reading the args.
-        // A withArgs feature effect might still be pending otherwise resulting in the wrong args being read.
-        options.deps.effectScheduler.flush();
         const execArgsWithDefaults = {
             args: executeArgs?.args ?? options.state.args(),
             options: executeArgs?.options,
@@ -2680,6 +2712,8 @@ const createSecureExecuteFactory = (options) => {
         authQuerySubscription = Subscription.EMPTY;
         tokenRefreshSubscription.unsubscribe();
         tokenRefreshSubscription = Subscription.EMPTY;
+        tokenWaitSubscription.unsubscribe();
+        tokenWaitSubscription = Subscription.EMPTY;
         tokenRefreshSubscription = options.authProvider.afterTokenRefresh$
             .pipe(filter(() => {
             const currentError = options.state.error();
@@ -2707,14 +2741,14 @@ const createSecureExecuteFactory = (options) => {
                         error(query);
                     }
                     else if (query.response()) {
-                        authAndExec(execArgsWithDefaults);
+                        authAndExecWhenTokenReady(execArgsWithDefaults);
                     }
                 }));
             }))
                 .subscribe();
         }
         else if (authQuery.response()) {
-            authAndExec(execArgsWithDefaults);
+            authAndExecWhenTokenReady(execArgsWithDefaults);
         }
         else if (authQuery.error()) {
             error(authQuery);
@@ -2959,7 +2993,7 @@ class LegacyQuery {
                     });
                 }
             });
-        }, ...(ngDevMode ? [{ debugName: "storeSyncEffect" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "storeSyncEffect" }] : /* istanbul ignore next */ []));
         /**
          * @internal
          */
@@ -3112,7 +3146,7 @@ class LegacyQueryCreator {
                                 legacyQuery.destroy();
                                 destroyEffect.destroy();
                             }
-                        }, ...(ngDevMode ? [{ debugName: "destroyEffect" }] : []));
+                        }, ...(ngDevMode ? [{ debugName: "destroyEffect" }] : /* istanbul ignore next */ []));
                     }
                     return legacyQuery;
                 });
@@ -3124,7 +3158,7 @@ class LegacyQueryCreator {
             return subject;
         };
         this.createSignal = (initialValue, config) => {
-            const _signal = signal(initialValue ?? null, ...(ngDevMode ? [{ debugName: "_signal" }] : []));
+            const _signal = signal(initialValue ?? null, ...(ngDevMode ? [{ debugName: "_signal" }] : /* istanbul ignore next */ []));
             addQueryContainerHandling(toObservable(_signal), () => _signal(), config);
             return _signal;
         };
@@ -3271,7 +3305,7 @@ const createQueryCollectionSubject = (queryMap, config) => {
 };
 const createQueryCollectionSignal = (queryMap, config) => {
     assertInInjectionContext(createQueryCollectionSignal);
-    const _signal = signal(null, ...(ngDevMode ? [{ debugName: "_signal" }] : []));
+    const _signal = signal(null, ...(ngDevMode ? [{ debugName: "_signal" }] : /* istanbul ignore next */ []));
     addQueryContainerHandling(toObservable(_signal).pipe(map((s) => s?.query ?? null)), () => _signal()?.query ?? null, config);
     return _signal;
 };
@@ -4005,7 +4039,7 @@ class V2BearerAuthProvider {
 }
 
 const [provideInfinityQueryResponseDelay, injectInfinityQueryResponseDelay] = createProvider(() => {
-    const enabled = signal(false, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
+    const enabled = signal(false, ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
     const enabled$ = toObservable(enabled);
     return {
         enabled,
@@ -4316,13 +4350,13 @@ class InfinityQueryDirective {
         this._viewContext.currentQuery = null;
         this._data$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [
             { provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective },
             provideInfinityQueryResponseDelay(),
         ], exportAs: ["etInfinityQuery"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InfinityQueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etInfinityQuery]',
@@ -4344,10 +4378,10 @@ class InfinityQueryTriggerDirective {
         this._destroy = new Subject();
         this._observer = null;
         this.click$ = fromEvent(this._elementRef.nativeElement, 'click');
-        this.scrollContainerSelector = input(null, ...(ngDevMode ? [{ debugName: "scrollContainerSelector" }] : []));
+        this.scrollContainerSelector = input(null, ...(ngDevMode ? [{ debugName: "scrollContainerSelector" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.infinityQueryOverride = input(null, ...(ngDevMode ? [{ debugName: "infinityQueryOverride" }] : []));
-        this.infinityQuery = computed(() => this.infinityQueryOverride() ?? this._infinityQuery, ...(ngDevMode ? [{ debugName: "infinityQuery" }] : []));
+        this.infinityQueryOverride = input(null, ...(ngDevMode ? [{ debugName: "infinityQueryOverride" }] : /* istanbul ignore next */ []));
+        this.infinityQuery = computed(() => this.infinityQueryOverride() ?? this._infinityQuery, ...(ngDevMode ? [{ debugName: "infinityQuery" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         const isInteractive = this._elementRef.nativeElement.tagName === 'BUTTON';
@@ -4379,10 +4413,10 @@ class InfinityQueryTriggerDirective {
         });
         this._observer.observe(this._elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: { classPropertyName: "scrollContainerSelector", publicName: "scrollContainerSelector", isSignal: true, isRequired: false, transformFunction: null }, infinityQueryOverride: { classPropertyName: "infinityQueryOverride", publicName: "infinityQueryOverride", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: { classPropertyName: "scrollContainerSelector", publicName: "scrollContainerSelector", isSignal: true, isRequired: false, transformFunction: null }, infinityQueryOverride: { classPropertyName: "infinityQueryOverride", publicName: "infinityQueryOverride", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etInfinityQueryTrigger], et-infinity-query-trigger',
@@ -4406,8 +4440,8 @@ class QueryDirective {
             scope: null,
             query: null,
         };
-        this.query = input.required({ ...(ngDevMode ? { debugName: "query" } : {}), alias: 'etQuery' });
-        this.cache = input(false, { ...(ngDevMode ? { debugName: "cache" } : {}), alias: 'etQueryCache' });
+        this.query = input.required({ ...(ngDevMode ? { debugName: "query" } : /* istanbul ignore next */ {}), alias: 'etQuery' });
+        this.cache = input(false, { ...(ngDevMode ? { debugName: "cache" } : /* istanbul ignore next */ {}), alias: 'etQueryCache' });
         this.queryState = queryStateSignal(this.query);
         inject(ViewContainerRef).createEmbeddedView(inject(TemplateRef), this._viewContext);
         effect(() => {
@@ -4468,10 +4502,10 @@ class QueryDirective {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: { classPropertyName: "query", publicName: "etQuery", isSignal: true, isRequired: true, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "etQueryCache", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: { classPropertyName: "query", publicName: "etQuery", isSignal: true, isRequired: true, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "etQueryCache", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: QueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: QueryDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etQuery]',
@@ -4492,10 +4526,10 @@ class QueryShortNamePipe {
         }
         return route;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: QueryShortNamePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: QueryShortNamePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'queryShortName' }]
         }] });
@@ -4517,19 +4551,19 @@ class QueryDevtoolsComponent {
         this._cdr = inject(ChangeDetectorRef);
         this._destroy$ = createDestroy();
         this.queryClientConfigs = inject(QUERY_CLIENT_DEVTOOLS_TOKEN);
-        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.isTranslucent = signal(false, ...(ngDevMode ? [{ debugName: "isTranslucent" }] : []));
-        this.snapLayout = signal('full', ...(ngDevMode ? [{ debugName: "snapLayout" }] : []));
-        this.queryListMode = signal('live', ...(ngDevMode ? [{ debugName: "queryListMode" }] : []));
-        this.viewMode = signal('query', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
-        this.showResponse = signal(false, ...(ngDevMode ? [{ debugName: "showResponse" }] : []));
-        this.showRawResponse = signal(false, ...(ngDevMode ? [{ debugName: "showRawResponse" }] : []));
-        this.showQueryConfig = signal(false, ...(ngDevMode ? [{ debugName: "showQueryConfig" }] : []));
-        this.showEntityStoreValue = signal(false, ...(ngDevMode ? [{ debugName: "showEntityStoreValue" }] : []));
-        this.showArguments = signal(false, ...(ngDevMode ? [{ debugName: "showArguments" }] : []));
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.isTranslucent = signal(false, ...(ngDevMode ? [{ debugName: "isTranslucent" }] : /* istanbul ignore next */ []));
+        this.snapLayout = signal('full', ...(ngDevMode ? [{ debugName: "snapLayout" }] : /* istanbul ignore next */ []));
+        this.queryListMode = signal('live', ...(ngDevMode ? [{ debugName: "queryListMode" }] : /* istanbul ignore next */ []));
+        this.viewMode = signal('query', ...(ngDevMode ? [{ debugName: "viewMode" }] : /* istanbul ignore next */ []));
+        this.showResponse = signal(false, ...(ngDevMode ? [{ debugName: "showResponse" }] : /* istanbul ignore next */ []));
+        this.showRawResponse = signal(false, ...(ngDevMode ? [{ debugName: "showRawResponse" }] : /* istanbul ignore next */ []));
+        this.showQueryConfig = signal(false, ...(ngDevMode ? [{ debugName: "showQueryConfig" }] : /* istanbul ignore next */ []));
+        this.showEntityStoreValue = signal(false, ...(ngDevMode ? [{ debugName: "showEntityStoreValue" }] : /* istanbul ignore next */ []));
+        this.showArguments = signal(false, ...(ngDevMode ? [{ debugName: "showArguments" }] : /* istanbul ignore next */ []));
         this.selectedClientIdCtrl = new FormControl(0);
         this.selectedClientId = toSignal(this.selectedClientIdCtrl.valueChanges.pipe(startWith(this.selectedClientIdCtrl.value)));
-        this.selectedQueryId = signal(null, ...(ngDevMode ? [{ debugName: "selectedQueryId" }] : []));
+        this.selectedQueryId = signal(null, ...(ngDevMode ? [{ debugName: "selectedQueryId" }] : /* istanbul ignore next */ []));
         this.selectedClientConfig = computed(() => {
             if (this.queryClientConfigs.length === 1) {
                 return this.queryClientConfigs[0];
@@ -4540,11 +4574,11 @@ class QueryDevtoolsComponent {
                 return this.queryClientConfigs[0];
             }
             return cfg;
-        }, ...(ngDevMode ? [{ debugName: "selectedClientConfig" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "selectedClientConfig" }] : /* istanbul ignore next */ []));
         this.queryStore = computed(() => {
             const config = this.selectedClientConfig();
             return config.client._store;
-        }, ...(ngDevMode ? [{ debugName: "queryStore" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "queryStore" }] : /* istanbul ignore next */ []));
         this.queryStore$ = toObservable(this.queryStore);
         this._queries$ = new BehaviorSubject([]);
         this.queries = toSignal(this._queries$);
@@ -4558,14 +4592,14 @@ class QueryDevtoolsComponent {
                 return this.queries()?.find((q) => q._id === id) ?? null;
             }
             return this.queryHistory$.getValue()?.find((q) => q._id === id) ?? null;
-        }, ...(ngDevMode ? [{ debugName: "selectedQuery" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "selectedQuery" }] : /* istanbul ignore next */ []));
         this.selectedQuery$ = toObservable(this.selectedQuery);
         this.selectedQueryEntityStore = computed(() => {
             const query = this.selectedQuery();
             if (!query)
                 return null;
             return query.store;
-        }, ...(ngDevMode ? [{ debugName: "selectedQueryEntityStore" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "selectedQueryEntityStore" }] : /* istanbul ignore next */ []));
         this.selectedQueryEntityStore$ = toObservable(this.selectedQueryEntityStore);
         this.selectedQueryEntityStoreValue$ = this.selectedQueryEntityStore$.pipe(switchMap((s) => s?._change$.pipe(startWith(''), map(() => {
             if (!s._dictionary)
@@ -4603,7 +4637,7 @@ class QueryDevtoolsComponent {
             return {
                 ...sharedCfg,
             };
-        }, ...(ngDevMode ? [{ debugName: "stringifiedQueryConfig" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "stringifiedQueryConfig" }] : /* istanbul ignore next */ []));
         this.authProvider = toSignal(toObservable(this.selectedClientConfig).pipe(switchMap((c) => c.client.authProvider$)));
         this.authProviderDetails = computed(() => {
             const provider = this.authProvider();
@@ -4665,7 +4699,7 @@ class QueryDevtoolsComponent {
                     config: {},
                 };
             }
-        }, ...(ngDevMode ? [{ debugName: "authProviderDetails" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "authProviderDetails" }] : /* istanbul ignore next */ []));
         this.trackByClient = (_, { client }) => client.config.baseRoute;
         this.trackByQuery = (_, { _id }) => _id;
         this.selectedClientIdCtrl.valueChanges
@@ -4786,10 +4820,10 @@ class QueryDevtoolsComponent {
     clearQueryHistory() {
         this.queryHistory$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "@if (!isOpen()) {\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Query Devtools</button>\n}\n\n@if (isOpen()) {\n  <div\n    [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n    class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n  >\n    <header class=\"et-qd-header\">\n      <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n      <div class=\"et-qd-header__select\">\n        <label for=\"et-query-client-instance\">Client instance</label>\n        <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n          @for (clientConfig of queryClientConfigs; track trackByClient(i, clientConfig); let i = $index) {\n            <option [value]=\"i\">\n              {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n            </option>\n          }\n        </select>\n      </div>\n\n      <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n    </header>\n\n    <div class=\"et-qd-sub-header\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n        (click)=\"toggleTranslucent()\"\n        class=\"et-qd-chip et-qd-translucent-clickable\"\n      >\n        Translucent\n      </button>\n      <div class=\"et-qd-sub-header__divider\"></div>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n        (click)=\"selectSnapLayout('full')\"\n        class=\"et-qd-chip\"\n      >\n        Fullscreen\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n        (click)=\"selectSnapLayout('top')\"\n        class=\"et-qd-chip\"\n      >\n        Top\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n        (click)=\"selectSnapLayout('bottom')\"\n        class=\"et-qd-chip\"\n      >\n        Bottom\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n        (click)=\"selectSnapLayout('left')\"\n        class=\"et-qd-chip\"\n      >\n        Left\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n        (click)=\"selectSnapLayout('right')\"\n        class=\"et-qd-chip\"\n      >\n        Right\n      </button>\n    </div>\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-client\">\n        <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n        <div class=\"et-qd-client__actions\">\n          <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n          <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n            Refresh all (ignore caches)\n          </button>\n          <button\n            (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n            class=\"et-qd-chip\"\n          >\n            Refresh all (ignore caches & purge unused)\n          </button>\n        </div>\n      </div>\n    }\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-queries\">\n        <p class=\"et-qd-queries__title\">Inspector</p>\n        <div class=\"et-qd-queries__actions\">\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' || viewMode() !== 'query' }\"\n            (click)=\"selectQueryListMode('live'); selectViewMode('query')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Live Queries ({{ queries()?.length ?? 0 }})\n          </button>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' || viewMode() !== 'query' }\"\n            (click)=\"selectQueryListMode('history'); selectViewMode('query')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Query History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n          </button>\n          @if (queryListMode() === 'history' && viewMode() === 'query') {\n            <div class=\"et-qd-queries__divider\"></div>\n            <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n          }\n\n          <div class=\"et-qd-queries__divider\"></div>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': viewMode() !== 'authProvider' }\"\n            (click)=\"selectViewMode('authProvider')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Auth Provider\n          </button>\n        </div>\n\n        @if (viewMode() === 'query') {\n          <div class=\"et-qd-queries__browser\">\n            @if (queryListMode() === 'live') {\n              <ul class=\"et-qd-queries__browser-list\">\n                @for (query of queries(); track trackByQuery($index, query)) {\n                  <li>\n                    <button\n                      [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n                      (click)=\"selectQuery(query)\"\n                    >\n                      <span> {{ query._queryConfig.method }}</span>\n                      <span> {{ query | queryShortName }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            @if (queryListMode() === 'history') {\n              <ul class=\"et-qd-queries__browser-list\">\n                @for (query of queryHistory$ | async; track trackByQuery($index, query)) {\n                  <li>\n                    <button\n                      [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n                      (click)=\"selectQuery(query)\"\n                    >\n                      <span> {{ query._queryConfig.method }}</span>\n                      <span> {{ query | queryShortName }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            <div class=\"et-qd-queries__browser-detail\">\n              @if (selectedQuery(); as query) {\n                <p class=\"et-qd-queries__browser-detail__title\">\n                  {{ query._queryConfig.method }} {{ query._routeWithParams }}\n                </p>\n\n                <div class=\"et-qd-queries__actions\">\n                  <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n                  <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n                    Execute (ignore cache)\n                  </button>\n\n                  <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n                  <div class=\"et-qd-queries__divider\"></div>\n                  <button\n                    [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n                    (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n                    class=\"et-qd-chip et-qd-chip-bordered\"\n                  >\n                    Poll\n                  </button>\n\n                  <button\n                    [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n                    (click)=\"query.stopPolling()\"\n                    class=\"et-qd-chip et-qd-chip-bordered\"\n                  >\n                    Stop polling\n                  </button>\n                  @if (query.isPolling || query._isPollingPaused) {\n                    <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                      Pause polling\n                    </button>\n                    <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                      Resume polling\n                    </button>\n                  }\n                </div>\n\n                <div class=\"et-qd-list\">\n                  <div class=\"et-qd-list-item\">\n                    <p>State type</p>\n                    <pre>{{ query.rawState.type }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Dependents</p>\n                    <pre>{{ query._dependents | json }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is expired</p>\n                    <pre>{{ query.isExpired }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is in use</p>\n                    <pre>{{ query.isInUse }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Subscriber count</p>\n                    <pre>{{ query._subscriberCount }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is polling</p>\n                    <pre>{{ query.isPolling }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is polling paused</p>\n                    <pre>{{ query._isPollingPaused }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Enable smart polling</p>\n                    <pre>{{ query._enableSmartPolling }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Query store key</p>\n                    <pre>{{ query._queryStoreKey }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Arguments</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                        (click)=\"toggleShowArguments()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showArguments()) {\n                      <pre>{{ query._arguments | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>State</p>\n                    <p><i> Warning, this will cause a subscription if shown!</i></p>\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n                        (click)=\"toggleShowResponse()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showResponse()) {\n                      <pre>{{ query.state$ | async | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Raw state</p>\n                    <p><i> The query state unaffected by entity stores</i></p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n                        (click)=\"toggleShowRawResponse()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showRawResponse()) {\n                      <pre>{{ query.rawState | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Query config</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n                        (click)=\"toggleShowQueryConfig()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showQueryConfig()) {\n                      <pre>{{ stringifiedQueryConfig() | json }}</pre>\n                    }\n                  </div>\n\n                  @if (!!query._queryConfig.entity) {\n                    <div class=\"et-qd-list-item\">\n                      <p>Entity store value</p>\n\n                      <div>\n                        <button\n                          [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n                          (click)=\"toggleShowEntityStoreValue()\"\n                          class=\"et-qd-chip et-qd-chip-bordered\"\n                        >\n                          Toggle\n                        </button>\n                      </div>\n                      @if (showEntityStoreValue()) {\n                        <pre>{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        } @else if (viewMode() === 'authProvider') {\n          <div class=\"et-qd-auth-provider__viewer\">\n            @if (authProviderDetails(); as details) {\n              <div class=\"et-qd-list\">\n                <div class=\"et-qd-list-item\">\n                  <p>Type</p>\n                  <pre>{{ details.type }}</pre>\n                </div>\n                <div class=\"et-qd-list-item\">\n                  <p>Header value</p>\n                  <pre>{{ details.header() | json }}</pre>\n                </div>\n                <div class=\"et-qd-list-item\">\n                  <p>Config</p>\n                  <pre>{{ details.config | json }}</pre>\n                </div>\n\n                @if (details.type === 'BearerAuthProvider') {\n                  <div class=\"et-qd-list-item\">\n                    <p>Tokens</p>\n                    <pre>{{ details.provider.tokens$ | async | json }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Should refresh on unauthorized response</p>\n                    <pre>{{ details.provider.shouldRefreshOnUnauthorizedResponse }}</pre>\n                  </div>\n\n                  <ng-container\n                    *etQuery=\"\n                      details.provider.currentRefreshQuery$ | async as response;\n                      loading as loading;\n                      error as error;\n                      query as query\n                    \"\n                  >\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query response</p>\n\n                      <div>\n                        <button (click)=\"details.provider._refreshQuery()\" class=\"et-qd-chip et-qd-chip-bordered\">\n                          Refresh\n                        </button>\n                      </div>\n                      <pre>{{ response | json }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query loading</p>\n                      <pre>{{ loading }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query error</p>\n                      <pre>{{ error ?? 'null' }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>State</p>\n                      <pre>{{ query?.state$ | async | json }}</pre>\n                    </div>\n                  </ng-container>\n                }\n              </div>\n            } @else {\n              <p>No auth provider set</p>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%;border-right:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%;border-top:1px solid rgb(37,41,46)}button.et-query-devtools-open-btn{position:fixed;inset-inline-end:20px;inset-block-end:0;z-index:9999;font-family:monospace;border-radius:3px 3px 0 0;line-height:14px;font-size:12px}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid rgb(59.734939759,66.1927710843,74.265060241);padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid rgb(59.734939759,66.1927710843,74.265060241);margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid rgb(59.734939759,66.1927710843,74.265060241);list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid rgb(59.734939759,66.1927710843,74.265060241);background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px;display:block}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-auth-provider__viewer{border-top:1px solid rgb(59.734939759,66.1927710843,74.265060241);margin-left:-12px;margin-right:-12px;margin-bottom:-12px;padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "@if (!isOpen()) {\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Query Devtools</button>\n}\n\n@if (isOpen()) {\n  <div\n    [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n    class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n  >\n    <header class=\"et-qd-header\">\n      <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n      <div class=\"et-qd-header__select\">\n        <label for=\"et-query-client-instance\">Client instance</label>\n        <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n          @for (clientConfig of queryClientConfigs; track trackByClient(i, clientConfig); let i = $index) {\n            <option [value]=\"i\">\n              {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n            </option>\n          }\n        </select>\n      </div>\n\n      <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n    </header>\n\n    <div class=\"et-qd-sub-header\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n        (click)=\"toggleTranslucent()\"\n        class=\"et-qd-chip et-qd-translucent-clickable\"\n      >\n        Translucent\n      </button>\n      <div class=\"et-qd-sub-header__divider\"></div>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n        (click)=\"selectSnapLayout('full')\"\n        class=\"et-qd-chip\"\n      >\n        Fullscreen\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n        (click)=\"selectSnapLayout('top')\"\n        class=\"et-qd-chip\"\n      >\n        Top\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n        (click)=\"selectSnapLayout('bottom')\"\n        class=\"et-qd-chip\"\n      >\n        Bottom\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n        (click)=\"selectSnapLayout('left')\"\n        class=\"et-qd-chip\"\n      >\n        Left\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n        (click)=\"selectSnapLayout('right')\"\n        class=\"et-qd-chip\"\n      >\n        Right\n      </button>\n    </div>\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-client\">\n        <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n        <div class=\"et-qd-client__actions\">\n          <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n          <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n            Refresh all (ignore caches)\n          </button>\n          <button\n            (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n            class=\"et-qd-chip\"\n          >\n            Refresh all (ignore caches & purge unused)\n          </button>\n        </div>\n      </div>\n    }\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-queries\">\n        <p class=\"et-qd-queries__title\">Inspector</p>\n        <div class=\"et-qd-queries__actions\">\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' || viewMode() !== 'query' }\"\n            (click)=\"selectQueryListMode('live'); selectViewMode('query')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Live Queries ({{ queries()?.length ?? 0 }})\n          </button>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' || viewMode() !== 'query' }\"\n            (click)=\"selectQueryListMode('history'); selectViewMode('query')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Query History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n          </button>\n          @if (queryListMode() === 'history' && viewMode() === 'query') {\n            <div class=\"et-qd-queries__divider\"></div>\n            <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n          }\n\n          <div class=\"et-qd-queries__divider\"></div>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': viewMode() !== 'authProvider' }\"\n            (click)=\"selectViewMode('authProvider')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Auth Provider\n          </button>\n        </div>\n\n        @if (viewMode() === 'query') {\n          <div class=\"et-qd-queries__browser\">\n            @if (queryListMode() === 'live') {\n              <ul class=\"et-qd-queries__browser-list\">\n                @for (query of queries(); track trackByQuery($index, query)) {\n                  <li>\n                    <button\n                      [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n                      (click)=\"selectQuery(query)\"\n                    >\n                      <span> {{ query._queryConfig.method }}</span>\n                      <span> {{ query | queryShortName }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            @if (queryListMode() === 'history') {\n              <ul class=\"et-qd-queries__browser-list\">\n                @for (query of queryHistory$ | async; track trackByQuery($index, query)) {\n                  <li>\n                    <button\n                      [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n                      (click)=\"selectQuery(query)\"\n                    >\n                      <span> {{ query._queryConfig.method }}</span>\n                      <span> {{ query | queryShortName }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            <div class=\"et-qd-queries__browser-detail\">\n              @if (selectedQuery(); as query) {\n                <p class=\"et-qd-queries__browser-detail__title\">\n                  {{ query._queryConfig.method }} {{ query._routeWithParams }}\n                </p>\n\n                <div class=\"et-qd-queries__actions\">\n                  <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n                  <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n                    Execute (ignore cache)\n                  </button>\n\n                  <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n                  <div class=\"et-qd-queries__divider\"></div>\n                  <button\n                    [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n                    (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n                    class=\"et-qd-chip et-qd-chip-bordered\"\n                  >\n                    Poll\n                  </button>\n\n                  <button\n                    [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n                    (click)=\"query.stopPolling()\"\n                    class=\"et-qd-chip et-qd-chip-bordered\"\n                  >\n                    Stop polling\n                  </button>\n                  @if (query.isPolling || query._isPollingPaused) {\n                    <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                      Pause polling\n                    </button>\n                    <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                      Resume polling\n                    </button>\n                  }\n                </div>\n\n                <div class=\"et-qd-list\">\n                  <div class=\"et-qd-list-item\">\n                    <p>State type</p>\n                    <pre>{{ query.rawState.type }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Dependents</p>\n                    <pre>{{ query._dependents | json }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is expired</p>\n                    <pre>{{ query.isExpired }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is in use</p>\n                    <pre>{{ query.isInUse }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Subscriber count</p>\n                    <pre>{{ query._subscriberCount }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is polling</p>\n                    <pre>{{ query.isPolling }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is polling paused</p>\n                    <pre>{{ query._isPollingPaused }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Enable smart polling</p>\n                    <pre>{{ query._enableSmartPolling }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Query store key</p>\n                    <pre>{{ query._queryStoreKey }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Arguments</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                        (click)=\"toggleShowArguments()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showArguments()) {\n                      <pre>{{ query._arguments | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>State</p>\n                    <p><i> Warning, this will cause a subscription if shown!</i></p>\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n                        (click)=\"toggleShowResponse()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showResponse()) {\n                      <pre>{{ query.state$ | async | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Raw state</p>\n                    <p><i> The query state unaffected by entity stores</i></p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n                        (click)=\"toggleShowRawResponse()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showRawResponse()) {\n                      <pre>{{ query.rawState | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Query config</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n                        (click)=\"toggleShowQueryConfig()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showQueryConfig()) {\n                      <pre>{{ stringifiedQueryConfig() | json }}</pre>\n                    }\n                  </div>\n\n                  @if (!!query._queryConfig.entity) {\n                    <div class=\"et-qd-list-item\">\n                      <p>Entity store value</p>\n\n                      <div>\n                        <button\n                          [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n                          (click)=\"toggleShowEntityStoreValue()\"\n                          class=\"et-qd-chip et-qd-chip-bordered\"\n                        >\n                          Toggle\n                        </button>\n                      </div>\n                      @if (showEntityStoreValue()) {\n                        <pre>{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        } @else if (viewMode() === 'authProvider') {\n          <div class=\"et-qd-auth-provider__viewer\">\n            @if (authProviderDetails(); as details) {\n              <div class=\"et-qd-list\">\n                <div class=\"et-qd-list-item\">\n                  <p>Type</p>\n                  <pre>{{ details.type }}</pre>\n                </div>\n                <div class=\"et-qd-list-item\">\n                  <p>Header value</p>\n                  <pre>{{ details.header() | json }}</pre>\n                </div>\n                <div class=\"et-qd-list-item\">\n                  <p>Config</p>\n                  <pre>{{ details.config | json }}</pre>\n                </div>\n\n                @if (details.type === 'BearerAuthProvider') {\n                  <div class=\"et-qd-list-item\">\n                    <p>Tokens</p>\n                    <pre>{{ details.provider.tokens$ | async | json }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Should refresh on unauthorized response</p>\n                    <pre>{{ details.provider.shouldRefreshOnUnauthorizedResponse }}</pre>\n                  </div>\n\n                  <ng-container\n                    *etQuery=\"\n                      details.provider.currentRefreshQuery$ | async as response;\n                      loading as loading;\n                      error as error;\n                      query as query\n                    \"\n                  >\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query response</p>\n\n                      <div>\n                        <button (click)=\"details.provider._refreshQuery()\" class=\"et-qd-chip et-qd-chip-bordered\">\n                          Refresh\n                        </button>\n                      </div>\n                      <pre>{{ response | json }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query loading</p>\n                      <pre>{{ loading }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query error</p>\n                      <pre>{{ error ?? 'null' }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>State</p>\n                      <pre>{{ query?.state$ | async | json }}</pre>\n                    </div>\n                  </ng-container>\n                }\n              </div>\n            } @else {\n              <p>No auth provider set</p>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%;border-right:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%;border-top:1px solid rgb(37,41,46)}button.et-query-devtools-open-btn{position:fixed;inset-inline-end:20px;inset-block-end:0;z-index:9999;font-family:monospace;border-radius:3px 3px 0 0;line-height:14px;font-size:12px}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid rgb(59.734939759,66.1927710843,74.265060241);padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid rgb(59.734939759,66.1927710843,74.265060241);margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid rgb(59.734939759,66.1927710843,74.265060241);list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid rgb(59.734939759,66.1927710843,74.265060241);background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px;display:block}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-auth-provider__viewer{border-top:1px solid rgb(59.734939759,66.1927710843,74.265060241);margin-left:-12px;margin-right:-12px;margin-bottom:-12px;padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-query-devtools', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
                         class: 'et-query-devtools',
@@ -5040,26 +5074,17 @@ const createQueryRepository = (config) => {
         else {
             const consumers = new Map([]);
             consumers.set(consumerDestroyRef, destroyListener);
-            const eventSubscription = combineLatest([
-                toObservable(request.error, { injector: config.dependencies.injector }),
-                toObservable(request.response, { injector: config.dependencies.injector }),
-            ]).subscribe(([errorValue, responseValue]) => {
-                if (errorValue?.raw instanceof HttpErrorResponse) {
-                    eventsSubject.next({
-                        type: 'request-error',
-                        error: errorValue.raw,
-                        key,
-                        isSecure,
-                        request,
-                    });
+            // Drive repository events off the request's discrete, terminal event stream rather than
+            // recombining the `error` + `response` signals via combineLatest (which could observe stale
+            // pairings). Each settle emits exactly one terminal event.
+            const eventSubscription = request.events$.subscribe((event) => {
+                if (event.type === 'error') {
+                    if (event.error.raw instanceof HttpErrorResponse) {
+                        eventsSubject.next({ type: 'request-error', error: event.error.raw, key, isSecure, request });
+                    }
                 }
-                else if (responseValue !== null && !errorValue) {
-                    eventsSubject.next({
-                        type: 'request-success',
-                        key,
-                        isSecure,
-                        request,
-                    });
+                else if (event.type === HttpEventType.Response) {
+                    eventsSubject.next({ type: 'request-success', key, isSecure, request });
                 }
             });
             cache.set(key, {
@@ -5164,7 +5189,10 @@ const setupLeaderElection = () => {
     const leaderTimeout = 3000;
     const storageKey = 'ethlete-auth-leader-heartbeat';
     const tabId = `tab-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
-    const isLeader = signal(false, ...(ngDevMode ? [{ debugName: "isLeader" }] : []));
+    const isLeader = signal(false, ...(ngDevMode ? [{ debugName: "isLeader" }] : /* istanbul ignore next */ []));
+    const instanceCount = signal(1, ...(ngDevMode ? [{ debugName: "instanceCount" }] : /* istanbul ignore next */ []));
+    const knownTabs = new Map();
+    knownTabs.set(tabId, Date.now());
     let channel = null;
     let heartbeatIntervalId = null;
     let leaderCheckIntervalId = null;
@@ -5172,6 +5200,7 @@ const setupLeaderElection = () => {
         isLeader.set(true);
         return {
             isLeader: isLeader.asReadonly(),
+            instanceCount: instanceCount.asReadonly(),
             becomeLeader: () => {
                 /* no-op */
             },
@@ -5181,6 +5210,7 @@ const setupLeaderElection = () => {
         };
     }
     channel = new BroadcastChannel(channelName);
+    channel.postMessage({ type: 'instance-register', tabId });
     const updateLeaderHeartbeat = (newTabId = tabId) => {
         try {
             localStorage.setItem(storageKey, JSON.stringify({ tabId: newTabId, timestamp: Date.now() }));
@@ -5227,48 +5257,60 @@ const setupLeaderElection = () => {
         const heartbeat = getLeaderHeartbeat();
         const now = Date.now();
         if (!heartbeat || now - heartbeat.timestamp > leaderTimeout) {
-            // No leader or leader is dead
             if (!isLeader()) {
                 becomeLeader();
             }
         }
         else if (heartbeat.tabId === tabId) {
-            // We are the leader, update heartbeat
             if (!isLeader()) {
                 isLeader.set(true);
             }
             updateLeaderHeartbeat();
         }
         else {
-            // Another tab is leader
             if (isLeader()) {
                 isLeader.set(false);
             }
         }
     };
-    // Handle messages from other tabs
     channel.onmessage = (event) => {
         const message = event.data;
         if (message.type === 'heartbeat') {
+            if (message.tabId !== tabId) {
+                knownTabs.set(message.tabId, Date.now());
+            }
             if (message.tabId !== tabId && isLeader()) {
-                // Another tab claims to be leader, resolve conflict
                 const heartbeat = getLeaderHeartbeat();
                 if (heartbeat && heartbeat.tabId === message.tabId) {
-                    // Other tab is legitimate leader
                     releaseLeadership();
                 }
             }
         }
+        else if (message.type === 'tab-heartbeat') {
+            if (message.tabId !== tabId) {
+                knownTabs.set(message.tabId, Date.now());
+            }
+        }
+        else if (message.type === 'instance-register') {
+            if (message.tabId !== tabId) {
+                knownTabs.set(message.tabId, Date.now());
+                instanceCount.set(knownTabs.size);
+                channel?.postMessage({ type: 'tab-heartbeat', tabId });
+            }
+        }
+        else if (message.type === 'instance-unregister') {
+            if (message.tabId !== tabId) {
+                knownTabs.delete(message.tabId);
+                instanceCount.set(knownTabs.size);
+            }
+        }
         else if (message.type === 'leader-claim') {
             if (message.tabId !== tabId && isLeader()) {
-                // Conflict: both tabs think they're leader
-                // Let the tab with earlier heartbeat win
                 const heartbeat = getLeaderHeartbeat();
                 if (heartbeat && heartbeat.tabId === message.tabId) {
                     releaseLeadership();
                 }
                 else {
-                    // We were leader first, send heartbeat to assert dominance
                     const assertMessage = {
                         type: 'heartbeat',
                         tabId,
@@ -5279,35 +5321,40 @@ const setupLeaderElection = () => {
         }
         else if (message.type === 'leader-release') {
             if (message.tabId !== tabId) {
-                // Leader released, try to become new leader
                 setTimeout(() => checkLeaderStatus(), 100);
             }
         }
     };
-    // Try to become leader on startup
     checkLeaderStatus();
-    // Send heartbeat periodically if we're the leader
     heartbeatIntervalId = setInterval(() => {
+        knownTabs.set(tabId, Date.now());
         if (isLeader()) {
             updateLeaderHeartbeat();
-            const message = {
-                type: 'heartbeat',
-                tabId,
-            };
-            channel?.postMessage(message);
+            channel?.postMessage({ type: 'heartbeat', tabId });
+        }
+        else {
+            channel?.postMessage({ type: 'tab-heartbeat', tabId });
+        }
+        const now = Date.now();
+        let changed = false;
+        for (const [id, lastSeen] of knownTabs) {
+            if (id !== tabId && now - lastSeen > leaderTimeout) {
+                knownTabs.delete(id);
+                changed = true;
+            }
+        }
+        if (changed) {
+            instanceCount.set(knownTabs.size);
         }
     }, heartbeatInterval);
-    // Check leader status periodically
     leaderCheckIntervalId = setInterval(() => {
         checkLeaderStatus();
     }, heartbeatInterval);
-    // Handle tab visibility changes
     const handleVisibilityChange = () => {
         if (document.hidden && isLeader()) {
             // Tab is hidden but we're leader - keep leadership but other tabs will take over if we die
         }
         else if (!document.hidden && !isLeader()) {
-            // Tab became visible and we're not leader - check if we should become leader
             checkLeaderStatus();
         }
     };
@@ -5319,10 +5366,10 @@ const setupLeaderElection = () => {
         if (leaderCheckIntervalId) {
             clearInterval(leaderCheckIntervalId);
         }
+        channel?.postMessage({ type: 'instance-unregister', tabId });
         releaseLeadership();
         document.removeEventListener('visibilitychange', handleVisibilityChange);
         channel?.close();
-        // Clean up storage if we were the leader
         const heartbeat = getLeaderHeartbeat();
         if (heartbeat?.tabId === tabId) {
             try {
@@ -5336,6 +5383,7 @@ const setupLeaderElection = () => {
     destroyRef.onDestroy(cleanup);
     return {
         isLeader: isLeader.asReadonly(),
+        instanceCount: instanceCount.asReadonly(),
         becomeLeader,
         cleanup,
     };
@@ -5516,11 +5564,20 @@ const defaultExtractTokens = (response) => {
     }
     return { accessToken: response['accessToken'], refreshToken: response['refreshToken'] };
 };
-const setupBearerQueryRegistry = (builders, injector, latestExecutedQuery, latestNonInternalQuery, setTokens) => {
+const deriveExecutionStateType = (builder, triggeredBy) => {
+    if (triggeredBy === 'persistent-auth')
+        return 'autoLogin';
+    if (builder._type === 'tokenRefreshQuery')
+        return 'tokenRefresh';
+    if (triggeredBy === 'token-revocation')
+        return 'revocation';
+    return builder.key;
+};
+const setupBearerQueryRegistry = (builders, injector, latestExecutedQuery, latestNonInternalQuery, setTokens, executionState) => {
     const queries = {};
     const querySnapshots = new Map();
     for (const builder of builders) {
-        const querySnapshot = signal(null, ...(ngDevMode ? [{ debugName: "querySnapshot" }] : []));
+        const querySnapshot = signal(null, ...(ngDevMode ? [{ debugName: "querySnapshot" }] : /* istanbul ignore next */ []));
         querySnapshots.set(builder.key, querySnapshot);
         const extractTokens = builder.config.extractTokens ?? defaultExtractTokens;
         effect(() => {
@@ -5549,10 +5606,27 @@ const setupBearerQueryRegistry = (builders, injector, latestExecutedQuery, lates
             });
             query.execute({ args, options });
             const snapshot = query.createSnapshot();
-            latestExecutedQuery.set({ key: builder.key, snapshot });
-            if (!snapshot.triggeredBy()) {
-                latestNonInternalQuery.set({ key: builder.key, snapshot });
+            const stateType = deriveExecutionStateType(builder, options?.triggeredBy);
+            if (stateType !== 'revocation') {
+                latestExecutedQuery.set({ key: builder.key, snapshot });
+                if (!snapshot.triggeredBy()) {
+                    latestNonInternalQuery.set({ key: builder.key, snapshot });
+                }
             }
+            executionState.set({ type: stateType, state: 'loading' });
+            effect(() => {
+                const response = snapshot.response();
+                const loading = snapshot.loading();
+                const error = snapshot.error();
+                if (loading)
+                    return;
+                if (error) {
+                    executionState.set({ type: stateType, state: 'error', error });
+                }
+                else if (response) {
+                    executionState.set({ type: stateType, state: 'success', response });
+                }
+            }, { injector });
             querySnapshot.set(snapshot);
             return snapshot;
         };
@@ -5602,13 +5676,18 @@ const createLeaderElection = (config) => {
     const leaderElectionEnabled = multiTabSyncEnabled &&
         (typeof multiTabSyncConfig === 'object' ? (multiTabSyncConfig?.leaderElection ?? true) : true);
     const leaderElection = leaderElectionEnabled ? setupLeaderElection() : null;
-    return () => (leaderElectionEnabled ? (leaderElection?.isLeader() ?? true) : true);
+    const isLeaderFn = () => (leaderElectionEnabled ? (leaderElection?.isLeader() ?? true) : true);
+    const leaderElectionContext = leaderElection
+        ? { isLeader: leaderElection.isLeader, instanceCount: leaderElection.instanceCount }
+        : undefined;
+    return { isLeaderFn, leaderElectionContext };
 };
 const createBearerAuthProviderImpl = (config) => {
     const injector = inject(Injector);
+    const destroyRef = inject(DestroyRef);
     const queryClient = config.queryClientRef[1]();
-    const accessToken = signal(null, ...(ngDevMode ? [{ debugName: "accessToken" }] : []));
-    const refreshToken = signal(null, ...(ngDevMode ? [{ debugName: "refreshToken" }] : []));
+    const accessToken = signal(null, ...(ngDevMode ? [{ debugName: "accessToken" }] : /* istanbul ignore next */ []));
+    const refreshToken = signal(null, ...(ngDevMode ? [{ debugName: "refreshToken" }] : /* istanbul ignore next */ []));
     const afterTokenRefresh$ = new Subject();
     const bearerData = computed(() => {
         const token = accessToken();
@@ -5623,20 +5702,24 @@ const createBearerAuthProviderImpl = (config) => {
             }
             return null;
         }
-    }, ...(ngDevMode ? [{ debugName: "bearerData" }] : []));
-    const isAuthenticated = computed(() => !!accessToken(), ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : []));
-    const latestExecutedQuery = signal(null, ...(ngDevMode ? [{ debugName: "latestExecutedQuery" }] : []));
-    const latestNonInternalQuery = signal(null, ...(ngDevMode ? [{ debugName: "latestNonInternalQuery" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "bearerData" }] : /* istanbul ignore next */ []));
+    const isAuthenticated = computed(() => !!accessToken(), ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : /* istanbul ignore next */ []));
+    const latestExecutedQuery = signal(null, ...(ngDevMode ? [{ debugName: "latestExecutedQuery" }] : /* istanbul ignore next */ []));
+    const latestNonInternalQuery = signal(null, ...(ngDevMode ? [{ debugName: "latestNonInternalQuery" }] : /* istanbul ignore next */ []));
+    const executionState = signal(null, ...(ngDevMode ? [{ debugName: "executionState" }] : /* istanbul ignore next */ []));
     const setTokens = (access, refresh) => {
         accessToken.set(access);
         refreshToken.set(refresh);
         afterTokenRefresh$.next();
     };
-    const { queries } = setupBearerQueryRegistry(config.queries, injector, latestExecutedQuery, latestNonInternalQuery, setTokens);
+    const { queries } = setupBearerQueryRegistry(config.queries, injector, latestExecutedQuery, latestNonInternalQuery, setTokens, executionState);
     const logout = () => {
         accessToken.set(null);
         refreshToken.set(null);
         queryClient.repository.unbindAllSecure();
+        latestExecutedQuery.set(null);
+        latestNonInternalQuery.set(null);
+        executionState.set({ type: 'logout', state: 'success' });
     };
     const isLeader = createLeaderElection(config);
     const querySetupContext = {
@@ -5645,7 +5728,7 @@ const createBearerAuthProviderImpl = (config) => {
         bearerDecryptFn: config.bearerDecryptFn,
         queryClient,
         repository: queryClient.repository,
-        isLeader,
+        isLeader: isLeader.isLeaderFn,
         afterTokenRefresh$,
         queries: queries,
     };
@@ -5658,10 +5741,13 @@ const createBearerAuthProviderImpl = (config) => {
         bearerData,
         logout,
         injector,
+        destroyRef,
         setTokens,
-        isLeader,
+        isLeader: isLeader.isLeaderFn,
+        leaderElection: isLeader.leaderElectionContext,
         afterTokenRefresh$,
         queries: queries,
+        executionState,
     };
     const features = setupFeatures(config.features, featureSetupContext);
     setupMultiTabSyncIfEnabled(config, accessToken, refreshToken, queryClient);
@@ -5674,6 +5760,7 @@ const createBearerAuthProviderImpl = (config) => {
         isAuthenticated,
         latestExecutedQuery: latestExecutedQuery.asReadonly(),
         latestNonInternalQuery: latestNonInternalQuery.asReadonly(),
+        executionState: executionState.asReadonly(),
         logout,
         afterTokenRefresh$,
     };
@@ -5823,8 +5910,8 @@ const withInactivityLogout = (config = {}) => {
         const activityEvents = config.activityEvents ?? ['mousedown', 'keydown', 'scroll', 'touchstart'];
         const destroyRef = inject(DestroyRef);
         const document = inject(DOCUMENT);
-        const enabled = signal(true, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
-        const lastActivityTime = signal(Date.now(), ...(ngDevMode ? [{ debugName: "lastActivityTime" }] : []));
+        const enabled = signal(true, ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+        const lastActivityTime = signal(Date.now(), ...(ngDevMode ? [{ debugName: "lastActivityTime" }] : /* istanbul ignore next */ []));
         const resetTimer = () => {
             lastActivityTime.set(Date.now());
         };
@@ -5907,7 +5994,7 @@ const createPersistentAuthFeature = (config, context) => {
         }
         return config.defaultRememberMe ?? false;
     };
-    const rememberMeSignal = signal(initializeRememberMe(), ...(ngDevMode ? [{ debugName: "rememberMeSignal" }] : []));
+    const rememberMeSignal = signal(initializeRememberMe(), ...(ngDevMode ? [{ debugName: "rememberMeSignal" }] : /* istanbul ignore next */ []));
     effect(() => {
         const token = refreshToken();
         const rememberMe = rememberMeSignal();
@@ -5968,7 +6055,7 @@ const withTokenExpirationWarning = (config = {}) => {
             if (typeof exp !== 'number')
                 return null;
             return new Date(exp * 1000);
-        }, ...(ngDevMode ? [{ debugName: "expiresAt" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "expiresAt" }] : /* istanbul ignore next */ []));
         const expiresIn$ = combineLatest([interval(checkInterval), toObservable(context.bearerData)]).pipe(map(() => {
             const expiry = expiresAt();
             if (!expiry)
@@ -5999,23 +6086,26 @@ const withTokenExpirationWarning = (config = {}) => {
 const withTokenRevocation = (config) => {
     return (context) => {
         const revokeOnLogout = config.revokeOnLogout ?? true;
-        const enabled = signal(true, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
+        const enabled = signal(true, ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
         let previousAccessToken = null;
+        let previousRefreshToken = null;
         let currentRevocationSnapshot = null;
-        const revoke = () => {
+        const revokeWithTokens = (accessToken, refreshToken) => {
             if (currentRevocationSnapshot?.isAlive())
                 return currentRevocationSnapshot;
-            const accessToken = context.accessToken();
-            const refreshToken = context.refreshToken();
             if (!accessToken && !refreshToken) {
                 return null;
             }
             const args = config.buildArgs({ accessToken, refreshToken });
+            context.executionState.set({ type: 'revocation', state: 'loading' });
             currentRevocationSnapshot = context.queries[config.queryKey].execute(args, {
                 triggeredBy: 'token-revocation',
             });
             return currentRevocationSnapshot;
         };
+        const revoke = () => {
+            return revokeWithTokens(context.accessToken(), context.refreshToken());
+        };
         const enable = () => {
             enabled.set(true);
         };
@@ -6025,10 +6115,12 @@ const withTokenRevocation = (config) => {
         if (revokeOnLogout) {
             effect(() => {
                 const currentToken = context.accessToken();
+                const currentRefreshToken = context.refreshToken();
                 if (previousAccessToken && !currentToken && enabled()) {
-                    untracked(() => revoke());
+                    untracked(() => revokeWithTokens(previousAccessToken, previousRefreshToken));
                 }
                 previousAccessToken = currentToken;
+                previousRefreshToken = currentRefreshToken;
             }, { injector: context.injector });
         }
         const instance = {
@@ -6074,7 +6166,7 @@ const createTrackingFeature = (context, config) => {
             }
         }
     };
-    const emit = (event, data) => {
+    const fireHandlers = (event, data) => {
         const eventHandlers = handlers.get(event);
         if (eventHandlers) {
             eventHandlers.forEach((handler) => {
@@ -6087,6 +6179,27 @@ const createTrackingFeature = (context, config) => {
             });
         }
     };
+    const forwardingChannel = context.leaderElection && typeof BroadcastChannel !== 'undefined'
+        ? new BroadcastChannel('ethlete-auth-tracking')
+        : null;
+    if (forwardingChannel) {
+        forwardingChannel.onmessage = (messageEvent) => {
+            if (context.isLeader()) {
+                fireHandlers(messageEvent.data.event, messageEvent.data.data);
+            }
+        };
+        context.destroyRef.onDestroy(() => forwardingChannel.close());
+    }
+    const emit = (event, data) => {
+        if (forwardingChannel && !context.isLeader()) {
+            forwardingChannel.postMessage({ event, data });
+            return;
+        }
+        fireHandlers(event, data);
+    };
+    const emitDirect = (event, data) => {
+        fireHandlers(event, data);
+    };
     const trackedQueries = new Map();
     Object.entries(context.queries).forEach(([key, queryEntry]) => {
         const query = queryEntry; // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -6103,17 +6216,11 @@ const createTrackingFeature = (context, config) => {
             const prevState = trackedQueries.get(key);
             if (response && !loading && !error && prevState?.lastResult !== 'success') {
                 trackedQueries.set(key, { loading: false, lastResult: 'success' });
-                emit(`${key}Success`, {
-                    queryKey: key,
-                    snapshot,
-                });
+                emit(`${key}Success`, { snapshot });
             }
             if (error && !loading && prevState?.lastResult !== 'error') {
                 trackedQueries.set(key, { loading: false, lastResult: 'error' });
-                emit(`${key}Failure`, {
-                    queryKey: key,
-                    error,
-                });
+                emit(`${key}Failure`, { error });
             }
             if (loading) {
                 trackedQueries.set(key, { loading: true, lastResult: null });
@@ -6143,6 +6250,17 @@ const createTrackingFeature = (context, config) => {
             }
         });
     }
+    if (context.leaderElection) {
+        const { isLeader: isLeaderSignal, instanceCount: instanceCountSignal } = context.leaderElection;
+        effect(() => {
+            emitDirect('leaderStatusChange', { isLeader: isLeaderSignal() });
+        });
+        effect(() => {
+            emitDirect('leaderInstanceCountChange', {
+                count: instanceCountSignal(),
+            });
+        });
+    }
     return {
         on,
         off,
@@ -6326,10 +6444,10 @@ class ParseHttpErrorCodeToTitleDePipe {
     constructor() {
         this.transform = parseHttpErrorCodeToTitleDe;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ParseHttpErrorCodeToTitleDePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: ParseHttpErrorCodeToTitleDePipe, isStandalone: true, name: "parseHttpErrorCodeToTitleDe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ParseHttpErrorCodeToTitleDePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ParseHttpErrorCodeToTitleDePipe, isStandalone: true, name: "parseHttpErrorCodeToTitleDe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ParseHttpErrorCodeToTitleDePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ParseHttpErrorCodeToTitleDePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'parseHttpErrorCodeToTitleDe',
@@ -6339,10 +6457,10 @@ class ParseHttpErrorCodeToMessageDePipe {
     constructor() {
         this.transform = parseHttpErrorCodeToMessageDe;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ParseHttpErrorCodeToMessageDePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: ParseHttpErrorCodeToMessageDePipe, isStandalone: true, name: "parseHttpErrorCodeToMessageDe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ParseHttpErrorCodeToMessageDePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ParseHttpErrorCodeToMessageDePipe, isStandalone: true, name: "parseHttpErrorCodeToMessageDe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ParseHttpErrorCodeToMessageDePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ParseHttpErrorCodeToMessageDePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'parseHttpErrorCodeToMessageDe',
@@ -6526,10 +6644,10 @@ class ParseHttpErrorCodeToTitleEnPipe {
     constructor() {
         this.transform = parseHttpErrorCodeToTitleEn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ParseHttpErrorCodeToTitleEnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: ParseHttpErrorCodeToTitleEnPipe, isStandalone: true, name: "parseHttpErrorCodeToTitleEn" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ParseHttpErrorCodeToTitleEnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ParseHttpErrorCodeToTitleEnPipe, isStandalone: true, name: "parseHttpErrorCodeToTitleEn" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ParseHttpErrorCodeToTitleEnPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ParseHttpErrorCodeToTitleEnPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'parseHttpErrorCodeToTitleEn',
@@ -6539,10 +6657,10 @@ class ParseHttpErrorCodeToMessageEnPipe {
     constructor() {
         this.transform = parseHttpErrorCodeToMessageEn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ParseHttpErrorCodeToMessageEnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: ParseHttpErrorCodeToMessageEnPipe, isStandalone: true, name: "parseHttpErrorCodeToMessageEn" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ParseHttpErrorCodeToMessageEnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: ParseHttpErrorCodeToMessageEnPipe, isStandalone: true, name: "parseHttpErrorCodeToMessageEn" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ParseHttpErrorCodeToMessageEnPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ParseHttpErrorCodeToMessageEnPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'parseHttpErrorCodeToMessageEn',
@@ -6966,8 +7084,11 @@ class QueryForm {
                 continue;
             const valueGotRemoved = value === ET_PROPERTY_REMOVED;
             if (valueGotRemoved) {
-                field.control.setValue(this._getDefaultValue(key), { emitEvent: false });
-                didValueChanges = true;
+                const defaultValue = this._getDefaultValue(key);
+                if (!equal(field.control.value, defaultValue)) {
+                    field.control.setValue(defaultValue, { emitEvent: false });
+                    didValueChanges = true;
+                }
                 continue;
             }
             let deserializedValue = value;
@@ -7139,6 +7260,21 @@ class QueryForm {
         });
     }
     _handleFormChange(forceOverwrite = false) {
+        // Normalize values that have a valueToQueryParamTransformFn returning null/undefined to their
+        // field default before capturing the new value. This prevents intermediate "empty object" states
+        // (e.g. Sort emitting { active: '', direction: '' } when cleared) from being
+        // emitted as distinct form values.
+        for (const [key, field] of Object.entries(this._fields)) {
+            if (!field.data.valueToQueryParamTransformFn)
+                continue;
+            const rawValue = this._formValue[key];
+            if (this._isDefaultValue(key, rawValue))
+                continue;
+            const serialized = field.data.valueToQueryParamTransformFn(rawValue);
+            if (serialized !== null && serialized !== undefined)
+                continue;
+            this.form.controls[key]?.setValue(this._getDefaultValue(key), { emitEvent: false });
+        }
         const currentVal = clone(this._currentFormValue$.value);
         const newVal = clone(this._formValue);
         if (equal(currentVal, newVal)) {
@@ -7194,17 +7330,17 @@ const createWebSocketClient = (options) => {
             transports: options.transports,
         });
         const rooms = new Map();
-        const isConnected = signal(false, ...(ngDevMode ? [{ debugName: "isConnected" }] : []));
+        const isConnected = signal(false, ...(ngDevMode ? [{ debugName: "isConnected" }] : /* istanbul ignore next */ []));
         const joinRoom = (room) => {
             const roomFn = typeof room === 'function' ? room : () => room;
             const pre = previousSignalValue(computed(() => roomFn()));
-            const roomData = signal(null, ...(ngDevMode ? [{ debugName: "roomData" }] : []));
+            const roomData = signal(null, ...(ngDevMode ? [{ debugName: "roomData" }] : /* istanbul ignore next */ []));
             const join = (name) => {
                 socket.emit('join-room', name);
                 const existingRoom = rooms.get(name);
                 if (existingRoom)
                     return existingRoom;
-                const message = signal(null, ...(ngDevMode ? [{ debugName: "message" }] : []));
+                const message = signal(null, ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
                 const newRoom = {
                     latestMessage: message,
                 };