@ethlete/query 5.24.0 → 5.25.0

package/fesm2022/ethlete-query.mjs

@@ -1,6 +1,6 @@
 import * as i1 from '@ethlete/core';
-import { createDestroy, computedTillTruthy, syncSignal, getCookie, setCookie, deleteCookie, DelayableDirective, nextFrame, RuntimeError, isObject, getDomain, previousSignalValue, injectQueryParamChanges, injectQueryParams, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
-import { Observable, takeUntil, startWith, pairwise, tap, switchMap, of, BehaviorSubject, Subject, fromEvent, timer, take, filter, takeWhile, map, ReplaySubject, shareReplay, combineLatest, interval, skip, withLatestFrom, debounceTime, Subscription, retry, throwError, catchError, merge } from 'rxjs';
+import { createDestroy, computedTillTruthy, syncSignal, getCookie, setCookie, deleteCookie, DelayableDirective, nextFrame, RuntimeError, isObject, injectRoute, getDomain, previousSignalValue, injectQueryParamChanges, injectQueryParams, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
+import { Observable, takeUntil, startWith, pairwise, tap, switchMap, of, BehaviorSubject, Subject, fromEvent, timer, take, filter, takeWhile, map, shareReplay, ReplaySubject, combineLatest, interval, skip, withLatestFrom, debounceTime, Subscription, retry, throwError, catchError, merge } from 'rxjs';
 import * as i0 from '@angular/core';
 import { assertInInjectionContext, inject, Injector, computed, signal, isDevMode, untracked, TemplateRef, ViewContainerRef, ErrorHandler, ChangeDetectorRef, Directive, Input, InjectionToken, ElementRef, Pipe, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, runInInjectionContext, EnvironmentInjector, createEnvironmentInjector, DestroyRef, NgZone } from '@angular/core';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -13,7 +13,6 @@ import { io } from 'socket.io-client';
 import { Router, ActivatedRoute } from '@angular/router';
 
 class CustomHeaderAuthProvider {
-    _config;
     get header() {
         return { [this._config.name]: this._config.value };
     }
@@ -26,7 +25,6 @@ class CustomHeaderAuthProvider {
 }
 
 class BasicAuthProvider {
-    _config;
     get header() {
         return { Authorization: `Basic ${this._basicAuthString}` };
     }
@@ -43,7 +41,6 @@ class BasicAuthProvider {
 
 const buildErrorMessage = (code, message) => `[@ethlete\\query:${code}] ${message}`;
 class QueryError extends Error {
-    data;
     constructor(code, message, data) {
         super(buildErrorMessage(code, message));
         this.name = 'QueryError';
@@ -699,71 +696,67 @@ const deepFreeze = (object) => {
 const def = () => null;
 
 class QueryCreator {
-    _queryConfig;
-    _client;
-    _store;
     constructor(_queryConfig, _client, _store) {
         this._queryConfig = _queryConfig;
         this._client = _client;
         this._store = _store;
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    prepare = (args) => {
-        const route = buildRoute({
-            base: this._client.config.baseRoute,
-            route: this._queryConfig.route,
-            pathParams: args?.pathParams,
-            queryParams: computeQueryQueryParams({ config: this._queryConfig, client: this._client, args }),
-            queryParamConfig: this._client.config.request?.queryParams,
-        });
-        const cacheKey = (args?.config?.queryStoreCacheKey ?? '') + buildQueryCacheKey$1(route, args);
-        if (shouldCacheQuery$1(this._queryConfig.method) && !args?.config?.skipQueryStore) {
-            const existingQuery = this._store.get(cacheKey);
-            if (existingQuery) {
-                return existingQuery;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.prepare = (args) => {
+            const route = buildRoute({
+                base: this._client.config.baseRoute,
+                route: this._queryConfig.route,
+                pathParams: args?.pathParams,
+                queryParams: computeQueryQueryParams({ config: this._queryConfig, client: this._client, args }),
+                queryParamConfig: this._client.config.request?.queryParams,
+            });
+            const cacheKey = (args?.config?.queryStoreCacheKey ?? '') + buildQueryCacheKey$1(route, args);
+            if (shouldCacheQuery$1(this._queryConfig.method) && !args?.config?.skipQueryStore) {
+                const existingQuery = this._store.get(cacheKey);
+                if (existingQuery) {
+                    return existingQuery;
+                }
             }
-        }
-        const query = new Query(this._client, this._queryConfig, route, args ?? {}, cacheKey);
-        if (shouldCacheQuery$1(this._queryConfig.method) && !args?.config?.skipQueryStore) {
-            this._store.add(cacheKey, query);
-        }
-        this._store._dispatchQueryCreated(query);
-        return query;
-    };
-    createSubject = (initialValue, config) => {
-        assertInInjectionContext(this.createSubject);
-        const subject = new BehaviorSubject(initialValue ?? null);
-        addQueryContainerHandling(subject, () => subject.getValue(), config);
-        return subject;
-    };
-    createSignal = (initialValue, config) => {
-        assertInInjectionContext(this.createSignal);
-        const _signal = signal(initialValue ?? null);
-        addQueryContainerHandling(toObservable(_signal), () => _signal(), config);
-        return _signal;
-    };
-    /**
-     * @deprecated Use `myQuery.createSubject()` or `myQuery.createSignal()` instead. Will be removed in v6.
-     */
-    behaviorSubject = (initialValue) => new BehaviorSubject(initialValue ?? null);
+            const query = new Query(this._client, this._queryConfig, route, args ?? {}, cacheKey);
+            if (shouldCacheQuery$1(this._queryConfig.method) && !args?.config?.skipQueryStore) {
+                this._store.add(cacheKey, query);
+            }
+            this._store._dispatchQueryCreated(query);
+            return query;
+        };
+        this.createSubject = (initialValue, config) => {
+            assertInInjectionContext(this.createSubject);
+            const subject = new BehaviorSubject(initialValue ?? null);
+            addQueryContainerHandling(subject, () => subject.getValue(), config);
+            return subject;
+        };
+        this.createSignal = (initialValue, config) => {
+            assertInInjectionContext(this.createSignal);
+            const _signal = signal(initialValue ?? null);
+            addQueryContainerHandling(toObservable(_signal), () => _signal(), config);
+            return _signal;
+        };
+        /**
+         * @deprecated Use `myQuery.createSubject()` or `myQuery.createSignal()` instead. Will be removed in v6.
+         */
+        this.behaviorSubject = (initialValue) => new BehaviorSubject(initialValue ?? null);
+    }
 }
 
 class QueryStore {
-    _config;
-    /**
-     * @internal
-     */
-    _store = new Map();
-    _garbageCollector = null;
-    _isInLowResourceMode = false;
-    _lastBlurTimestamp = Date.now();
-    _storeChange$ = new Subject();
-    _queryCreated$ = new Subject();
-    storeChange$ = this._storeChange$.asObservable();
-    queryCreated$ = this._queryCreated$.asObservable();
     constructor(_config) {
         this._config = _config;
+        /**
+         * @internal
+         */
+        this._store = new Map();
+        this._garbageCollector = null;
+        this._isInLowResourceMode = false;
+        this._lastBlurTimestamp = Date.now();
+        this._storeChange$ = new Subject();
+        this._queryCreated$ = new Subject();
+        this.storeChange$ = this._storeChange$.asObservable();
+        this.queryCreated$ = this._queryCreated$.asObservable();
         this._initSmartQueryHandling();
     }
     add(id, query) {
@@ -894,11 +887,6 @@ class QueryStore {
 }
 
 class QueryClient {
-    _clientConfig;
-    /**
-     * @internal
-     */
-    _store;
     get config() {
         return this._clientConfig;
     }
@@ -908,9 +896,64 @@ class QueryClient {
     get authProvider$() {
         return this._authProvider$.asObservable() ?? this._clientConfig.parent?._authProvider$.asObservable() ?? null;
     }
-    _authProvider$ = new BehaviorSubject(null);
     constructor(_clientConfig) {
         this._clientConfig = _clientConfig;
+        this._authProvider$ = new BehaviorSubject(null);
+        this.get = (queryConfig) => this.fetch({
+            ...queryConfig,
+            method: 'GET',
+        });
+        this.post = (queryConfig) => this.fetch({
+            ...queryConfig,
+            method: 'POST',
+        });
+        this.put = (queryConfig) => this.fetch({
+            ...queryConfig,
+            method: 'PUT',
+        });
+        this.patch = (queryConfig) => this.fetch({
+            ...queryConfig,
+            method: 'PATCH',
+        });
+        this.delete = (queryConfig) => this.fetch({
+            ...queryConfig,
+            method: 'DELETE',
+        });
+        this.gqlQuery = (queryConfig) => this.fetch({
+            ...queryConfig,
+            method: 'GQL_QUERY',
+        });
+        this.gqlMutate = (queryConfig) => this.fetch({
+            ...queryConfig,
+            method: 'GQL_MUTATE',
+        });
+        this.fetch = (queryConfig) => new QueryCreator(queryConfig, this, this._store);
+        this.setAuthProvider = (authProvider) => {
+            if (this.authProvider) {
+                this.authProvider?.cleanUp();
+            }
+            this._authProvider$.next(authProvider);
+        };
+        this.setDefaultHeaders = (config) => {
+            if (!this._clientConfig.request) {
+                this._clientConfig.request = {
+                    headers: config.headers ?? undefined,
+                };
+            }
+            else {
+                this._clientConfig.request.headers = config.headers ?? undefined;
+            }
+            if (config.refreshQueriesInUse) {
+                this._store.refreshQueriesInUse({ purgeUnused: true, ignoreCacheValidity: true });
+            }
+        };
+        this.clearAuthProvider = () => {
+            this.authProvider?.cleanUp();
+            this._authProvider$.next(null);
+        };
+        this._updateBaseRoute = (route) => {
+            this._clientConfig.baseRoute = route;
+        };
         this._store = new QueryStore({
             enableChangeLogging: _clientConfig.logging?.queryStateChanges,
             enableGarbageCollectorLogging: _clientConfig.logging?.queryStateGarbageCollector,
@@ -918,61 +961,6 @@ class QueryClient {
             enableSmartPolling: _clientConfig.request?.enableSmartPolling ?? true,
         });
     }
-    get = (queryConfig) => this.fetch({
-        ...queryConfig,
-        method: 'GET',
-    });
-    post = (queryConfig) => this.fetch({
-        ...queryConfig,
-        method: 'POST',
-    });
-    put = (queryConfig) => this.fetch({
-        ...queryConfig,
-        method: 'PUT',
-    });
-    patch = (queryConfig) => this.fetch({
-        ...queryConfig,
-        method: 'PATCH',
-    });
-    delete = (queryConfig) => this.fetch({
-        ...queryConfig,
-        method: 'DELETE',
-    });
-    gqlQuery = (queryConfig) => this.fetch({
-        ...queryConfig,
-        method: 'GQL_QUERY',
-    });
-    gqlMutate = (queryConfig) => this.fetch({
-        ...queryConfig,
-        method: 'GQL_MUTATE',
-    });
-    fetch = (queryConfig) => new QueryCreator(queryConfig, this, this._store);
-    setAuthProvider = (authProvider) => {
-        if (this.authProvider) {
-            this.authProvider?.cleanUp();
-        }
-        this._authProvider$.next(authProvider);
-    };
-    setDefaultHeaders = (config) => {
-        if (!this._clientConfig.request) {
-            this._clientConfig.request = {
-                headers: config.headers ?? undefined,
-            };
-        }
-        else {
-            this._clientConfig.request.headers = config.headers ?? undefined;
-        }
-        if (config.refreshQueriesInUse) {
-            this._store.refreshQueriesInUse({ purgeUnused: true, ignoreCacheValidity: true });
-        }
-    };
-    clearAuthProvider = () => {
-        this.authProvider?.cleanUp();
-        this._authProvider$.next(null);
-    };
-    _updateBaseRoute = (route) => {
-        this._clientConfig.baseRoute = route;
-    };
 }
 
 const shouldCacheQuery$1 = (method) => {
@@ -1264,36 +1252,6 @@ const paginatedEntityValueUpdater = (findFn) => ({ response, rawResponse, entity
 
 let _nextQueryId = 0;
 class Query {
-    _client;
-    _queryConfig;
-    _routeWithParams;
-    _arguments;
-    _queryStoreKey;
-    _id = _nextQueryId++;
-    _currentLocalId = 0;
-    _pollingSubscription = null;
-    _onAbort$ = new Subject();
-    _currentPollConfig = null;
-    /**
-     * @internal
-     * Used to track which components depend on this query.
-     * The key is the component's _tNode index.
-     * The value is the number of times the component has subscribed to this query.
-     * The value might increase since we cant distinguish between a component and a host directive applied to it.
-     */
-    _dependents = {};
-    /**
-     * @internal
-     */
-    _dependentsChanged$ = new ReplaySubject();
-    /**
-     * @internal
-     */
-    _isPollingPaused = false;
-    _state$ = new BehaviorSubject({
-        type: "PREPARED" /* QueryStateType.Prepared */,
-        meta: { id: this._currentLocalId, triggeredVia: 'program' },
-    });
     get _nextId() {
         return ++this._currentLocalId;
     }
@@ -1387,6 +1345,31 @@ class Query {
         this._routeWithParams = _routeWithParams;
         this._arguments = _arguments;
         this._queryStoreKey = _queryStoreKey;
+        this._id = _nextQueryId++;
+        this._currentLocalId = 0;
+        this._pollingSubscription = null;
+        this._onAbort$ = new Subject();
+        this._currentPollConfig = null;
+        /**
+         * @internal
+         * Used to track which components depend on this query.
+         * The key is the component's _tNode index.
+         * The value is the number of times the component has subscribed to this query.
+         * The value might increase since we cant distinguish between a component and a host directive applied to it.
+         */
+        this._dependents = {};
+        /**
+         * @internal
+         */
+        this._dependentsChanged$ = new ReplaySubject();
+        /**
+         * @internal
+         */
+        this._isPollingPaused = false;
+        this._state$ = new BehaviorSubject({
+            type: "PREPARED" /* QueryStateType.Prepared */,
+            meta: { id: this._currentLocalId, triggeredVia: 'program' },
+        });
     }
     execute(options = {}) {
         const { skipCache = false, _triggeredVia: triggeredVia = 'program', cancelPrevious = false } = options;
@@ -1715,13 +1698,6 @@ const decryptBearer = (token) => {
 };
 
 class BearerAuthProvider {
-    _config;
-    _destroy$ = new Subject();
-    _currentRefreshQuery$ = new BehaviorSubject(null);
-    _tokens$ = new BehaviorSubject({
-        token: null,
-        refreshToken: null,
-    });
     get header() {
         return { Authorization: `Bearer ${this._tokens$.getValue().token}` };
     }
@@ -1744,6 +1720,12 @@ class BearerAuthProvider {
     }
     constructor(_config) {
         this._config = _config;
+        this._destroy$ = new Subject();
+        this._currentRefreshQuery$ = new BehaviorSubject(null);
+        this._tokens$ = new BehaviorSubject({
+            token: null,
+            refreshToken: null,
+        });
         const cookieEnabled = _config.refreshConfig?.cookieEnabled ?? true;
         const cookieToken = _config.refreshConfig?.cookieName && cookieEnabled ? (getCookie(_config.refreshConfig.cookieName) ?? null) : null;
         this._tokens$.next({
@@ -1884,22 +1866,25 @@ const isClassValidatorError = (error) => {
 };
 
 class QueryDirective {
-    _mainTemplateRef = inject(TemplateRef);
-    _viewContainerRef = inject(ViewContainerRef);
-    _errorHandler = inject(ErrorHandler);
-    _cdr = inject(ChangeDetectorRef);
-    _isMainViewCreated = false;
-    _subscription = null;
-    _viewContext = {
-        $implicit: null,
-        etQuery: null,
-        loading: false,
-        refreshing: false,
-        error: null,
-        progress: null,
-        scope: null,
-        query: null,
-    };
+    constructor() {
+        this._mainTemplateRef = inject(TemplateRef);
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._errorHandler = inject(ErrorHandler);
+        this._cdr = inject(ChangeDetectorRef);
+        this._isMainViewCreated = false;
+        this._subscription = null;
+        this._viewContext = {
+            $implicit: null,
+            etQuery: null,
+            loading: false,
+            refreshing: false,
+            error: null,
+            progress: null,
+            scope: null,
+            query: null,
+        };
+        this._cache = false;
+    }
     get query() {
         return this._query;
     }
@@ -1907,14 +1892,12 @@ class QueryDirective {
         this._query = v;
         this._subscribeToQuery();
     }
-    _query;
     get cache() {
         return this._cache;
     }
     set cache(v) {
         this._cache = v;
     }
-    _cache = false;
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
@@ -1983,8 +1966,8 @@ class QueryDirective {
             this._viewContainerRef.createEmbeddedView(this._mainTemplateRef, this._viewContext);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryDirective, decorators: [{
             type: Directive,
@@ -2001,58 +1984,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             }] } });
 
 class InfinityQuery {
-    _config;
-    _destroy$;
-    _queries$ = new BehaviorSubject([]);
-    _currentPage$ = new BehaviorSubject(null);
-    _currentCalculatedPage$ = new BehaviorSubject(null);
-    _totalPages$ = new BehaviorSubject(null);
-    _itemsPerPage$ = new BehaviorSubject(10);
-    _data$ = this._queries$.pipe(switchMap((queries) => {
-        if (!queries.length) {
-            return of([]);
-        }
-        return combineLatest(queries.map((query) => query.state$.pipe(filterSuccess(), map((state) => ({ state, query })))));
-    }), tap((stateMaps) => {
-        const lastState = stateMaps[stateMaps.length - 1]?.state;
-        const lastQuery = stateMaps[stateMaps.length - 1]?.query;
-        if (!lastState || !lastQuery) {
-            return;
-        }
-        const totalPages = this._config.response.totalPagesExtractor?.({
-            response: lastState.response,
-            itemsPerPage: this.itemsPerPage,
-            args: lastQuery._arguments,
-        }) ??
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            lastState.response?.totalPages ??
-            null;
-        this._totalPages$.next(totalPages);
-    }), map((stateMaps) => {
-        if (!stateMaps.length) {
-            return null;
-        }
-        const fullData = stateMaps.reduce((acc, stateMap) => {
-            const valExtractFn = this._config?.response?.valueExtractor;
-            let data = valExtractFn
-                ? valExtractFn?.(stateMap.state.response)
-                : stateMap.state.response;
-            if (this._config.response.reverse) {
-                data = [...data].reverse();
-            }
-            if (this._config.response.appendItemsTo === 'start') {
-                acc.unshift(...data);
-            }
-            else {
-                acc.push(...data);
-            }
-            return acc;
-        }, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        []);
-        return fullData;
-    }), shareReplay({ bufferSize: 1, refCount: true }));
-    _lastQuery$ = this._queries$.pipe(map((queries) => queries[queries.length - 1] ?? null), shareReplay({ bufferSize: 1, refCount: true }));
     get currentPage$() {
         return this._currentPage$.asObservable();
     }
@@ -2086,6 +2017,56 @@ class InfinityQuery {
     constructor(_config, _destroy$) {
         this._config = _config;
         this._destroy$ = _destroy$;
+        this._queries$ = new BehaviorSubject([]);
+        this._currentPage$ = new BehaviorSubject(null);
+        this._currentCalculatedPage$ = new BehaviorSubject(null);
+        this._totalPages$ = new BehaviorSubject(null);
+        this._itemsPerPage$ = new BehaviorSubject(10);
+        this._data$ = this._queries$.pipe(switchMap((queries) => {
+            if (!queries.length) {
+                return of([]);
+            }
+            return combineLatest(queries.map((query) => query.state$.pipe(filterSuccess(), map((state) => ({ state, query })))));
+        }), tap((stateMaps) => {
+            const lastState = stateMaps[stateMaps.length - 1]?.state;
+            const lastQuery = stateMaps[stateMaps.length - 1]?.query;
+            if (!lastState || !lastQuery) {
+                return;
+            }
+            const totalPages = this._config.response.totalPagesExtractor?.({
+                response: lastState.response,
+                itemsPerPage: this.itemsPerPage,
+                args: lastQuery._arguments,
+            }) ??
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                lastState.response?.totalPages ??
+                null;
+            this._totalPages$.next(totalPages);
+        }), map((stateMaps) => {
+            if (!stateMaps.length) {
+                return null;
+            }
+            const fullData = stateMaps.reduce((acc, stateMap) => {
+                const valExtractFn = this._config?.response?.valueExtractor;
+                let data = valExtractFn
+                    ? valExtractFn?.(stateMap.state.response)
+                    : stateMap.state.response;
+                if (this._config.response.reverse) {
+                    data = [...data].reverse();
+                }
+                if (this._config.response.appendItemsTo === 'start') {
+                    acc.unshift(...data);
+                }
+                else {
+                    acc.push(...data);
+                }
+                return acc;
+            }, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            []);
+            return fullData;
+        }), shareReplay({ bufferSize: 1, refCount: true }));
+        this._lastQuery$ = this._queries$.pipe(map((queries) => queries[queries.length - 1] ?? null), shareReplay({ bufferSize: 1, refCount: true }));
         this._itemsPerPage$.next(this._config.limitParam?.value ?? 10);
     }
     nextPage() {
@@ -2178,28 +2159,6 @@ const skipPaginationPageParamCalculator = ({ page, itemsPerPage }) => itemsPerPa
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const INFINITY_QUERY_TOKEN = new InjectionToken('INFINITY_QUERY_TOKEN');
 class InfinityQueryDirective {
-    _queryConfigChanged$ = new Subject();
-    _viewContext = {
-        $implicit: null,
-        etInfinityQuery: null,
-        loading: false,
-        error: null,
-        isFirstLoad: false,
-        canLoadMore: false,
-        currentPage: null,
-        currentCalculatedPage: null,
-        totalPages: null,
-        itemsPerPage: null,
-        currentQuery: null,
-    };
-    _infinityQueryInstance = null;
-    _destroy$ = createDestroy();
-    _cdr = inject(ChangeDetectorRef);
-    _viewContainerRef = inject(ViewContainerRef);
-    _mainTemplateRef = inject((TemplateRef));
-    _errorHandler = inject(ErrorHandler);
-    _delayable = inject(DelayableDirective, { host: true });
-    _data$ = new BehaviorSubject([]);
     get infinityQuery() {
         return this._infinityQuery;
     }
@@ -2209,7 +2168,6 @@ class InfinityQueryDirective {
         this._infinityQueryInstance = this._setupInfinityQuery(v);
         this._infinityQueryInstance.nextPage();
     }
-    _infinityQuery;
     get context() {
         return this._viewContext;
     }
@@ -2219,11 +2177,33 @@ class InfinityQueryDirective {
     get data$() {
         return this._data$.asObservable();
     }
-    data = toSignal(this._data$, { requireSync: true });
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
     constructor() {
+        this._queryConfigChanged$ = new Subject();
+        this._viewContext = {
+            $implicit: null,
+            etInfinityQuery: null,
+            loading: false,
+            error: null,
+            isFirstLoad: false,
+            canLoadMore: false,
+            currentPage: null,
+            currentCalculatedPage: null,
+            totalPages: null,
+            itemsPerPage: null,
+            currentQuery: null,
+        };
+        this._infinityQueryInstance = null;
+        this._destroy$ = createDestroy();
+        this._cdr = inject(ChangeDetectorRef);
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._mainTemplateRef = inject((TemplateRef));
+        this._errorHandler = inject(ErrorHandler);
+        this._delayable = inject(DelayableDirective, { host: true });
+        this._data$ = new BehaviorSubject([]);
+        this.data = toSignal(this._data$, { requireSync: true });
         this._viewContainerRef.createEmbeddedView(this._mainTemplateRef, this._viewContext);
     }
     _setupInfinityQuery(config) {
@@ -2297,8 +2277,8 @@ class InfinityQueryDirective {
         this._viewContext.currentQuery = null;
         this._data$.next([]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }], exportAs: ["etInfinityQuery"], hostDirectives: [{ directive: i1.DelayableDirective }], ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }], exportAs: ["etInfinityQuery"], hostDirectives: [{ directive: i1.DelayableDirective }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
@@ -2315,12 +2295,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             }] } });
 
 class InfinityQueryTriggerDirective {
-    _elementRef = inject((ElementRef));
-    _infinityQuery = inject(INFINITY_QUERY_TOKEN);
-    _destroy = new Subject();
-    _observer = null;
-    click$ = fromEvent(this._elementRef.nativeElement, 'click');
-    scrollContainerSelector = null;
+    constructor() {
+        this._elementRef = inject((ElementRef));
+        this._infinityQuery = inject(INFINITY_QUERY_TOKEN);
+        this._destroy = new Subject();
+        this._observer = null;
+        this.click$ = fromEvent(this._elementRef.nativeElement, 'click');
+        this.scrollContainerSelector = null;
+    }
     ngOnInit() {
         const isInteractive = this._elementRef.nativeElement.tagName === 'BUTTON';
         if (isInteractive) {
@@ -2350,8 +2332,8 @@ class InfinityQueryTriggerDirective {
         });
         this._observer.observe(this._elementRef.nativeElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
             type: Directive,
@@ -2377,8 +2359,8 @@ class QueryShortNamePipe {
         }
         return route;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryShortNamePipe, decorators: [{
             type: Pipe,
@@ -2398,159 +2380,161 @@ const provideQueryClientForDevtools = (queryClient) => {
 };
 
 class QueryDevtoolsComponent {
-    _cdr = inject(ChangeDetectorRef);
-    _destroy$ = createDestroy();
-    queryClientConfigs = inject(QUERY_CLIENT_DEVTOOLS_TOKEN);
-    isOpen = signal(false);
-    isTranslucent = signal(false);
-    snapLayout = signal('full');
-    queryListMode = signal('live');
-    viewMode = signal('query');
-    showResponse = signal(false);
-    showRawResponse = signal(false);
-    showQueryConfig = signal(false);
-    showEntityStoreValue = signal(false);
-    showArguments = signal(false);
-    selectedClientIdCtrl = new FormControl(0);
-    selectedClientId = toSignal(this.selectedClientIdCtrl.valueChanges.pipe(startWith(this.selectedClientIdCtrl.value)));
-    selectedQueryId = signal(null);
-    selectedClientConfig = computed(() => {
-        if (this.queryClientConfigs.length === 1) {
-            return this.queryClientConfigs[0];
-        }
-        const index = this.selectedClientId() ?? 0;
-        const cfg = this.queryClientConfigs[index];
-        if (!cfg) {
-            return this.queryClientConfigs[0];
-        }
-        return cfg;
-    });
-    queryStore = computed(() => {
-        const config = this.selectedClientConfig();
-        return config.client._store;
-    });
-    queryStore$ = toObservable(this.queryStore);
-    _queries$ = new BehaviorSubject([]);
-    queries = toSignal(this._queries$);
-    selectedQuery = computed(() => {
-        const id = this.selectedQueryId();
-        const mode = this.queryListMode();
-        if (id === null || !mode) {
-            return null;
-        }
-        if (mode === 'live') {
-            return this.queries()?.find((q) => q._id === id) ?? null;
-        }
-        return this.queryHistory$.getValue()?.find((q) => q._id === id) ?? null;
-    });
-    selectedQuery$ = toObservable(this.selectedQuery);
-    selectedQueryEntityStore = computed(() => {
-        const query = this.selectedQuery();
-        if (!query)
-            return null;
-        return query.store;
-    });
-    selectedQueryEntityStore$ = toObservable(this.selectedQueryEntityStore);
-    selectedQueryEntityStoreValue$ = this.selectedQueryEntityStore$.pipe(switchMap((s) => s?._change$.pipe(startWith(''), map(() => {
-        if (!s._dictionary)
-            return null;
-        return Array.from(s._dictionary).reduce((obj, [key, value]) => {
-            obj[key] = value;
-            return obj;
-        }, {});
-    })) ?? of(null)));
-    queryHistory$ = new BehaviorSubject([]);
-    stringifiedQueryConfig = computed(() => {
-        const query = this.selectedQuery();
-        if (!query)
-            return null;
-        const cfg = query._queryConfig;
-        const route = typeof cfg.route === 'string' ? cfg.route : cfg.route ? cfg.route({}).replace(/undefined/g, ':param') : null;
-        const sharedCfg = {
-            method: cfg.method,
-            secure: cfg.secure,
-            route,
-            reportProgress: cfg.reportProgress,
-            responseType: cfg.responseType,
-            withCredentials: cfg.withCredentials,
-            autoRefreshOn: cfg.autoRefreshOn,
-            enableSmartPolling: cfg.enableSmartPolling,
-            hasEntityStore: !!cfg.entity,
-        };
-        if (isGqlQueryConfig(cfg)) {
-            return {
-                ...sharedCfg,
-                query: cfg.query,
-                transferVia: cfg.transferVia,
-            };
-        }
-        return {
-            ...sharedCfg,
-        };
-    });
-    authProvider = toSignal(toObservable(this.selectedClientConfig).pipe(switchMap((c) => c.client.authProvider$)));
-    authProviderDetails = computed(() => {
-        const provider = this.authProvider();
-        if (!provider)
-            return null;
-        if (provider instanceof CustomHeaderAuthProvider) {
-            return {
-                type: 'CustomHeaderAuthProvider',
-                header: () => provider.header,
-                provider: provider,
-                config: {
-                    name: provider._config.name,
-                    value: provider._config.value,
-                },
+    constructor() {
+        this._cdr = inject(ChangeDetectorRef);
+        this._destroy$ = createDestroy();
+        this.queryClientConfigs = inject(QUERY_CLIENT_DEVTOOLS_TOKEN);
+        this.isOpen = signal(false);
+        this.isTranslucent = signal(false);
+        this.snapLayout = signal('full');
+        this.queryListMode = signal('live');
+        this.viewMode = signal('query');
+        this.showResponse = signal(false);
+        this.showRawResponse = signal(false);
+        this.showQueryConfig = signal(false);
+        this.showEntityStoreValue = signal(false);
+        this.showArguments = signal(false);
+        this.selectedClientIdCtrl = new FormControl(0);
+        this.selectedClientId = toSignal(this.selectedClientIdCtrl.valueChanges.pipe(startWith(this.selectedClientIdCtrl.value)));
+        this.selectedQueryId = signal(null);
+        this.selectedClientConfig = computed(() => {
+            if (this.queryClientConfigs.length === 1) {
+                return this.queryClientConfigs[0];
+            }
+            const index = this.selectedClientId() ?? 0;
+            const cfg = this.queryClientConfigs[index];
+            if (!cfg) {
+                return this.queryClientConfigs[0];
+            }
+            return cfg;
+        });
+        this.queryStore = computed(() => {
+            const config = this.selectedClientConfig();
+            return config.client._store;
+        });
+        this.queryStore$ = toObservable(this.queryStore);
+        this._queries$ = new BehaviorSubject([]);
+        this.queries = toSignal(this._queries$);
+        this.selectedQuery = computed(() => {
+            const id = this.selectedQueryId();
+            const mode = this.queryListMode();
+            if (id === null || !mode) {
+                return null;
+            }
+            if (mode === 'live') {
+                return this.queries()?.find((q) => q._id === id) ?? null;
+            }
+            return this.queryHistory$.getValue()?.find((q) => q._id === id) ?? null;
+        });
+        this.selectedQuery$ = toObservable(this.selectedQuery);
+        this.selectedQueryEntityStore = computed(() => {
+            const query = this.selectedQuery();
+            if (!query)
+                return null;
+            return query.store;
+        });
+        this.selectedQueryEntityStore$ = toObservable(this.selectedQueryEntityStore);
+        this.selectedQueryEntityStoreValue$ = this.selectedQueryEntityStore$.pipe(switchMap((s) => s?._change$.pipe(startWith(''), map(() => {
+            if (!s._dictionary)
+                return null;
+            return Array.from(s._dictionary).reduce((obj, [key, value]) => {
+                obj[key] = value;
+                return obj;
+            }, {});
+        })) ?? of(null)));
+        this.queryHistory$ = new BehaviorSubject([]);
+        this.stringifiedQueryConfig = computed(() => {
+            const query = this.selectedQuery();
+            if (!query)
+                return null;
+            const cfg = query._queryConfig;
+            const route = typeof cfg.route === 'string' ? cfg.route : cfg.route ? cfg.route({}).replace(/undefined/g, ':param') : null;
+            const sharedCfg = {
+                method: cfg.method,
+                secure: cfg.secure,
+                route,
+                reportProgress: cfg.reportProgress,
+                responseType: cfg.responseType,
+                withCredentials: cfg.withCredentials,
+                autoRefreshOn: cfg.autoRefreshOn,
+                enableSmartPolling: cfg.enableSmartPolling,
+                hasEntityStore: !!cfg.entity,
             };
-        }
-        else if (provider instanceof BasicAuthProvider) {
+            if (isGqlQueryConfig(cfg)) {
+                return {
+                    ...sharedCfg,
+                    query: cfg.query,
+                    transferVia: cfg.transferVia,
+                };
+            }
             return {
-                type: 'BasicAuthProvider',
-                header: () => provider.header,
-                provider: provider,
-                config: {
-                    username: provider._config.username,
-                    password: provider._config.password,
-                },
+                ...sharedCfg,
             };
-        }
-        else if (isBearerAuthProvider(provider)) {
-            const refreshCfg = provider._config.refreshConfig;
-            return {
-                type: 'BearerAuthProvider',
-                header: () => provider.header,
-                provider: provider,
-                config: {
-                    token: provider._config.token,
-                    refreshConfig: {
-                        refreshOnUnauthorizedResponse: refreshCfg?.refreshOnUnauthorizedResponse ?? 'true (default)',
-                        token: refreshCfg?.token,
-                        cookieName: refreshCfg?.cookieName,
-                        cookieDomain: refreshCfg?.cookieDomain ?? 'current origin (default)',
-                        cookieExpiresInDays: refreshCfg?.cookieExpiresInDays ?? '30 (default)',
-                        cookiePath: refreshCfg?.cookiePath ?? '/ (default)',
-                        cookieEnabled: refreshCfg?.cookieEnabled ?? 'true (default)',
-                        cookieSameSite: refreshCfg?.cookieSameSite ?? 'lax (default)',
-                        refreshBuffer: refreshCfg?.refreshBuffer ?? '30000 (default)',
-                        expiresInPropertyName: refreshCfg?.expiresInPropertyName ?? 'exp (default)',
-                        strategy: refreshCfg?.strategy ?? 'AuthBearerRefreshStrategy.BeforeExpiration (default)',
-                        requestArgsAdapter: refreshCfg?.requestArgsAdapter ? 'custom' : 'default',
-                        responseAdapter: refreshCfg?.responseAdapter ? 'custom' : 'default',
+        });
+        this.authProvider = toSignal(toObservable(this.selectedClientConfig).pipe(switchMap((c) => c.client.authProvider$)));
+        this.authProviderDetails = computed(() => {
+            const provider = this.authProvider();
+            if (!provider)
+                return null;
+            if (provider instanceof CustomHeaderAuthProvider) {
+                return {
+                    type: 'CustomHeaderAuthProvider',
+                    header: () => provider.header,
+                    provider: provider,
+                    config: {
+                        name: provider._config.name,
+                        value: provider._config.value,
                     },
-                },
-            };
-        }
-        else {
-            return {
-                type: 'UnknownAuthProvider',
-                header: () => provider.header,
-                provider: provider,
-                config: {},
-            };
-        }
-    });
-    constructor() {
+                };
+            }
+            else if (provider instanceof BasicAuthProvider) {
+                return {
+                    type: 'BasicAuthProvider',
+                    header: () => provider.header,
+                    provider: provider,
+                    config: {
+                        username: provider._config.username,
+                        password: provider._config.password,
+                    },
+                };
+            }
+            else if (isBearerAuthProvider(provider)) {
+                const refreshCfg = provider._config.refreshConfig;
+                return {
+                    type: 'BearerAuthProvider',
+                    header: () => provider.header,
+                    provider: provider,
+                    config: {
+                        token: provider._config.token,
+                        refreshConfig: {
+                            refreshOnUnauthorizedResponse: refreshCfg?.refreshOnUnauthorizedResponse ?? 'true (default)',
+                            token: refreshCfg?.token,
+                            cookieName: refreshCfg?.cookieName,
+                            cookieDomain: refreshCfg?.cookieDomain ?? 'current origin (default)',
+                            cookieExpiresInDays: refreshCfg?.cookieExpiresInDays ?? '30 (default)',
+                            cookiePath: refreshCfg?.cookiePath ?? '/ (default)',
+                            cookieEnabled: refreshCfg?.cookieEnabled ?? 'true (default)',
+                            cookieSameSite: refreshCfg?.cookieSameSite ?? 'lax (default)',
+                            refreshBuffer: refreshCfg?.refreshBuffer ?? '30000 (default)',
+                            expiresInPropertyName: refreshCfg?.expiresInPropertyName ?? 'exp (default)',
+                            strategy: refreshCfg?.strategy ?? 'AuthBearerRefreshStrategy.BeforeExpiration (default)',
+                            requestArgsAdapter: refreshCfg?.requestArgsAdapter ? 'custom' : 'default',
+                            responseAdapter: refreshCfg?.responseAdapter ? 'custom' : 'default',
+                        },
+                    },
+                };
+            }
+            else {
+                return {
+                    type: 'UnknownAuthProvider',
+                    header: () => provider.header,
+                    provider: provider,
+                    config: {},
+                };
+            }
+        });
+        this.trackByClient = (_, { client }) => client.config.baseRoute;
+        this.trackByQuery = (_, { _id }) => _id;
         this.selectedClientIdCtrl.valueChanges
             .pipe(tap(() => this.clearQueryHistory()), takeUntil(this._destroy$))
             .subscribe();
@@ -2630,8 +2614,6 @@ class QueryDevtoolsComponent {
             this.viewMode.set(parsed.viewMode ?? 'query');
         }
     }
-    trackByClient = (_, { client }) => client.config.baseRoute;
-    trackByQuery = (_, { _id }) => _id;
     toggleOpen() {
         this.isOpen.set(!this.isOpen());
     }
@@ -2671,8 +2653,8 @@ class QueryDevtoolsComponent {
     clearQueryHistory() {
         this.queryHistory$.next([]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }, { kind: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }, { kind: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
             type: Component,
@@ -2682,7 +2664,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
         }], ctorParameters: () => [] });
 
 class EntityStoreError extends Error {
-    detail;
     constructor(message, detail) {
         super(message);
         this.detail = detail;
@@ -2693,17 +2674,16 @@ function flatten(arr) {
     return arr.reduce((acc, val) => acc.concat(val), []);
 }
 class EntityStore {
-    _config;
-    /**
-     * @internal
-     */
-    _dictionary = new Map();
-    /**
-     * @internal
-     */
-    _change$ = new Subject();
     constructor(_config) {
         this._config = _config;
+        /**
+         * @internal
+         */
+        this._dictionary = new Map();
+        /**
+         * @internal
+         */
+        this._change$ = new Subject();
     }
     select(keyOrKeys) {
         if (Array.isArray(keyOrKeys)) {
@@ -2907,6 +2887,9 @@ const pagedQueryStackPreviousPageCalledButAlreadyAtFirstPage = () => {
 const queryStackWithArgsUsed = () => {
     return new RuntimeError(500 /* QueryRuntimeErrorCode.QUERY_STACK_WITH_ARGS_USED */, `withArgs() has been used in a query stack or a paged query stack. This is not supported.`);
 };
+const queryStackWithResponseUpdateUsed = () => {
+    return new RuntimeError(501 /* QueryRuntimeErrorCode.QUERY_STACK_WITH_RESPONSE_UPDATE_USED */, `withResponseUpdate() has been used in a query stack or a paged query stack. This is not supported.`);
+};
 
 const defaultResponseTransformer = (response) => {
     if (!isObject(response)) {
@@ -2963,6 +2946,7 @@ const createAuthProviderQuery = (config, authProviderConfig) => {
     };
 };
 const createBearerAuthProvider = (options) => {
+    const route = injectRoute();
     const cookieEnabled = signal(options.cookie === undefined ? false : (options.cookie.enabled ?? true));
     const cookieOptions = {
         expiresInDays: 30,
@@ -2971,6 +2955,7 @@ const createBearerAuthProvider = (options) => {
         sameSite: 'lax',
         domain: getDomain() ?? 'localhost',
         refreshArgsTransformer: (token) => ({ body: { token } }),
+        autoLoginExcludeRoutes: [],
         ...(options.cookie ?? {}),
     };
     const loginQuery = options.login ? createAuthProviderQuery(options.login, options) : null;
@@ -3135,7 +3120,9 @@ const createBearerAuthProvider = (options) => {
         tokens,
     };
     if (cookieEnabled()) {
-        tryLoginWithCookie();
+        if (!cookieOptions.autoLoginExcludeRoutes.some((r) => route().startsWith(r))) {
+            tryLoginWithCookie();
+        }
     }
     return bearerAuthProvider;
 };
@@ -3171,6 +3158,7 @@ const setupQueryState = (options) => {
     const error = signal(null);
     const loading = signal(null);
     const lastTimeExecutedAt = signal(null);
+    const request = signal(null);
     const state = {
         response,
         args,
@@ -3178,6 +3166,9 @@ const setupQueryState = (options) => {
         loading,
         error,
         lastTimeExecutedAt,
+        subtle: {
+            request,
+        },
     };
     return state;
 };
@@ -3389,6 +3380,7 @@ const maybeExecute = (options) => {
 const createQueryObject = (options) => {
     const { state, execute, deps } = options;
     const destroy = () => deps.injector.destroy();
+    const setResponse = (response) => state.response.set(response);
     const createSnapshot = createQuerySnapshotFn({ state, deps, execute });
     const query = {
         execute,
@@ -3403,6 +3395,7 @@ const createQueryObject = (options) => {
         reset: execute.reset,
         subtle: {
             destroy,
+            setResponse,
         },
     };
     return query;
@@ -3734,6 +3727,22 @@ const withAutoRefresh = (options) => {
         },
     });
 };
+const withResponseUpdate = (options) => {
+    return createQueryFeature({
+        type: "withResponseUpdate" /* QueryFeatureType.WithResponseUpdate */,
+        fn: (context) => {
+            queryEffect(() => {
+                const currentResponse = untracked(() => context.state.response());
+                const response = options.updater({ currentResponse });
+                if (response === null)
+                    return;
+                untracked(() => {
+                    context.state.response.set(response);
+                });
+            }, QUERY_EFFECT_ERROR_MESSAGE, { injector: context.deps.injector });
+        },
+    });
+};
 
 /** Transforms an array of arrays into a single array and filters out `null` values. */
 const transformArrayResponse = (responses) => responses.filter((r) => !!r).flatMap((r) => r);
@@ -3749,9 +3758,13 @@ const createQueryStack = (options) => {
     const queries = signal([]);
     const lastQuery = signal(null);
     const hasWithArgsFeature = features.some((f) => f.type == "withArgs" /* QueryFeatureType.WithArgs */);
+    const hasWithOptimisticUpdateFeature = features.some((f) => f.type == "withResponseUpdate" /* QueryFeatureType.WithResponseUpdate */);
     if (hasWithArgsFeature) {
         throw queryStackWithArgsUsed();
     }
+    if (hasWithOptimisticUpdateFeature) {
+        throw queryStackWithResponseUpdateUsed();
+    }
     effect(() => {
         // Clear the stack if dependencies change
         dependencies?.();
@@ -4105,6 +4118,7 @@ const queryExecute = (options) => {
         executeState.effectRefs.push(responseRef, loadingRef, errorRef, latestHttpEventRef);
     });
     state.lastTimeExecutedAt.set(Date.now());
+    state.subtle.request.set(request);
 };
 const cleanupPreviousExecute = (options) => {
     const { executeState } = options;
@@ -4555,70 +4569,77 @@ const createGqlMutationViaPost = (client) => {
     return (creatorOptions) => createGqlQueryCreator(creatorOptions, { method: 'MUTATE', client, transport: 'POST' });
 };
 
-const roomAlreadyJoined = (room) => {
-    return new RuntimeError(1000 /* QueryRuntimeErrorCode.ROOM_ALREADY_JOINED */, `Tried joining the room "${room}" but it has already been joined.`);
-};
 const roomNotJoined = (room) => {
-    return new RuntimeError(1001 /* QueryRuntimeErrorCode.ROOM_NOT_JOINED */, `Tried leaving the room "${room}" but it has not been joined.`);
+    return new RuntimeError(1000 /* WebSocketRuntimeErrorCode.ROOM_NOT_JOINED */, `Tried leaving the room "${room}" but it has not been joined.`);
 };
 const messageMalformed = () => {
-    return new RuntimeError(1002 /* QueryRuntimeErrorCode.MESSAGE_MALFORMED */, 'A message has been received but it is malformed (cannot be parsed as JSON).');
+    return new RuntimeError(1001 /* WebSocketRuntimeErrorCode.MESSAGE_MALFORMED */, 'A message has been received but it is malformed (cannot be parsed as JSON).');
 };
 
 const createWebSocketClient = (config) => {
-    const joinedRooms = new Set();
     const socket = io(config.url, {
         withCredentials: true,
         autoConnect: false,
     });
-    const currentEvent = signal(null);
+    const rooms = new Map();
     const isConnected = signal(false);
     const joinRoom = (room) => {
-        if (joinedRooms.has(room)) {
-            if (isDevMode())
-                throw roomAlreadyJoined(room);
-            return;
-        }
-        socket.emit('join-room', room);
-        joinedRooms.add(room);
-    };
-    const joinComputedRoom = (room) => {
-        const pre = previousSignalValue(computed(() => room()));
+        const roomFn = typeof room === 'function' ? room : () => room;
+        const join = (name) => {
+            socket.emit('join-room', name);
+            const existingRoom = rooms.get(name);
+            if (existingRoom)
+                return existingRoom;
+            const message = signal(null);
+            const newRoom = {
+                latestMessage: message,
+            };
+            rooms.set(name, newRoom);
+            return newRoom;
+        };
+        const pre = previousSignalValue(computed(() => roomFn()));
+        const roomData = signal(null);
         effect(() => {
-            const current = room();
+            const current = roomFn();
             untracked(() => {
                 const previous = pre();
                 if (previous === current)
                     return;
                 if (previous)
                     leaveRoom(previous);
-                if (current)
-                    joinRoom(current);
+                if (current) {
+                    const joinedRoom = join(current);
+                    if (joinedRoom)
+                        roomData.set(joinedRoom);
+                }
+                else {
+                    roomData.set(null);
+                }
             });
         });
         inject(DestroyRef).onDestroy(() => {
-            const current = room();
-            if (current)
+            const current = roomFn();
+            if (current) {
                 leaveRoom(current);
+                roomData.set(null);
+            }
         });
+        return roomData.asReadonly();
     };
     const leaveRoom = (room) => {
-        if (!joinedRooms.has(room)) {
+        if (!rooms.has(room)) {
             if (isDevMode())
                 throw roomNotJoined(room);
-            return;
         }
         socket.emit('leave-room', room);
-        joinedRooms.delete(room);
-    };
-    const leaveAllRooms = () => {
-        joinedRooms.forEach((room) => leaveRoom(room));
-        joinedRooms.clear();
+        rooms.delete(room);
     };
     const setupWebSocketConnectionListener = () => {
         socket.on('connect', () => {
             isConnected.set(true);
-            joinedRooms.forEach((room) => joinRoom(room));
+            for (const room of rooms.keys()) {
+                joinRoom(room);
+            }
         });
         socket.on('disconnect', () => isConnected.set(false));
     };
@@ -4626,7 +4647,9 @@ const createWebSocketClient = (config) => {
         socket.onAny((data) => {
             try {
                 const json = JSON.parse(data);
-                currentEvent.set(json);
+                const room = rooms.get(json.room);
+                if (room)
+                    room.latestMessage.set(json);
             }
             catch (error) {
                 console.error(error);
@@ -4641,11 +4664,10 @@ const createWebSocketClient = (config) => {
     socket.connect();
     const client = {
         joinRoom,
-        joinComputedRoom,
-        leaveRoom,
-        leaveAllRooms,
-        currentEvent: currentEvent.asReadonly(),
         isConnected: isConnected.asReadonly(),
+        subtle: {
+            leaveRoom,
+        },
     };
     return client;
 };
@@ -4738,6 +4760,7 @@ var index = /*#__PURE__*/Object.freeze({
     queryExecute: queryExecute,
     queryFeatureUsedMultipleTimes: queryFeatureUsedMultipleTimes,
     queryStackWithArgsUsed: queryStackWithArgsUsed,
+    queryStackWithResponseUpdateUsed: queryStackWithResponseUpdateUsed,
     refreshTokenCalledWithoutConfig: refreshTokenCalledWithoutConfig,
     resetExecuteState: resetExecuteState,
     selectRoleCalledWithoutConfig: selectRoleCalledWithoutConfig,
@@ -4763,6 +4786,7 @@ var index = /*#__PURE__*/Object.freeze({
     withLogging: withLogging,
     withPolling: withPolling,
     withPollingUsedOnUnsupportedHttpMethod: withPollingUsedOnUnsupportedHttpMethod,
+    withResponseUpdate: withResponseUpdate,
     withSuccessHandling: withSuccessHandling
 });
 
@@ -4865,7 +4889,6 @@ const transformToSortQueryParam = (value) => {
 
 const ET_ARR_PREFIX = 'ET_ARR__';
 class QueryField {
-    data;
     get control() {
         return this.data.control;
     }
@@ -4876,70 +4899,12 @@ class QueryField {
 const IGNORED_FILTER_COUNT_FIELDS = ['page', 'skip', 'take', 'limit', 'sort', 'sortBy', 'sortOrder', 'query', 'search'];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 class QueryForm {
-    _fields;
-    _options;
-    _destroy$ = createDestroy();
-    _unobserveTrigger$ = new Subject();
-    _router = inject(Router);
-    _activatedRoute = inject(ActivatedRoute);
-    _defaultValues = this._extractDefaultValues();
-    _zone = inject(NgZone);
-    _didValueChanges$ = new Subject();
-    _isObserving = false;
-    _skipNextResets = false;
-    _queryParamChanges$ = toObservable(injectQueryParamChanges());
-    _queryParams = injectQueryParams();
-    /**
-     * The angular form group that contains all the fields.
-     *
-     * **Do not** use any of the following methods on this form group:
-     * - `setValue`: Use `QueryForm.setValue` instead.
-     * - `patchValue`: Use `QueryForm.patchValue` instead.
-     * - `valueChanges`: Use `QueryForm.changes$` instead.
-     * - `value`: Use `QueryForm.value` instead.
-     * - `controls`: Use `QueryForm.controls` instead.
-     */
-    form = this._setupFormGroup();
-    _lastFormValue$ = new BehaviorSubject(null);
-    _currentFormValue$ = new BehaviorSubject(this._formValue);
     get _formValue() {
         return this.form.getRawValue();
     }
     get _form() {
         return this.form;
     }
-    _changes$ = new BehaviorSubject({
-        previousValue: null,
-        currentValue: this.form.getRawValue(),
-    });
-    changes$ = this._changes$.asObservable();
-    currentValue$ = this._changes$.pipe(map(({ currentValue }) => currentValue));
-    previousValue$ = this._changes$.pipe(map(({ previousValue }) => previousValue));
-    changes = toSignal(this.changes$);
-    currentValue = toSignal(this.currentValue$);
-    previousValue = toSignal(this.previousValue$);
-    /**
-     * The number of active filters.
-     *
-     * Excludes the following fields by default:
-     * - `page`
-     * - `skip`
-     * - `take`
-     * - `limit`
-     * - `sort`
-     * - `sortBy`
-     * - `sortOrder`
-     * - `query`
-     * - `search`
-     */
-    activeFilterCount$ = this.changes$.pipe(map(({ currentValue }) => Object.entries(currentValue)
-        .map(([key, value]) => {
-        if (IGNORED_FILTER_COUNT_FIELDS.includes(key) || this._fields[key]?.data.skipInFilterCount) {
-            return true;
-        }
-        return this._isDefaultValue(key, value);
-    })
-        .filter((v) => v === false).length));
     get controls() {
         return this.form.controls;
     }
@@ -4956,6 +4921,62 @@ class QueryForm {
     constructor(_fields, _options) {
         this._fields = _fields;
         this._options = _options;
+        this._destroy$ = createDestroy();
+        this._unobserveTrigger$ = new Subject();
+        this._router = inject(Router);
+        this._activatedRoute = inject(ActivatedRoute);
+        this._defaultValues = this._extractDefaultValues();
+        this._zone = inject(NgZone);
+        this._didValueChanges$ = new Subject();
+        this._isObserving = false;
+        this._skipNextResets = false;
+        this._queryParamChanges$ = toObservable(injectQueryParamChanges());
+        this._queryParams = injectQueryParams();
+        /**
+         * The angular form group that contains all the fields.
+         *
+         * **Do not** use any of the following methods on this form group:
+         * - `setValue`: Use `QueryForm.setValue` instead.
+         * - `patchValue`: Use `QueryForm.patchValue` instead.
+         * - `valueChanges`: Use `QueryForm.changes$` instead.
+         * - `value`: Use `QueryForm.value` instead.
+         * - `controls`: Use `QueryForm.controls` instead.
+         */
+        this.form = this._setupFormGroup();
+        this._lastFormValue$ = new BehaviorSubject(null);
+        this._currentFormValue$ = new BehaviorSubject(this._formValue);
+        this._changes$ = new BehaviorSubject({
+            previousValue: null,
+            currentValue: this.form.getRawValue(),
+        });
+        this.changes$ = this._changes$.asObservable();
+        this.currentValue$ = this._changes$.pipe(map(({ currentValue }) => currentValue));
+        this.previousValue$ = this._changes$.pipe(map(({ previousValue }) => previousValue));
+        this.changes = toSignal(this.changes$);
+        this.currentValue = toSignal(this.currentValue$);
+        this.previousValue = toSignal(this.previousValue$);
+        /**
+         * The number of active filters.
+         *
+         * Excludes the following fields by default:
+         * - `page`
+         * - `skip`
+         * - `take`
+         * - `limit`
+         * - `sort`
+         * - `sortBy`
+         * - `sortOrder`
+         * - `query`
+         * - `search`
+         */
+        this.activeFilterCount$ = this.changes$.pipe(map(({ currentValue }) => Object.entries(currentValue)
+            .map(([key, value]) => {
+            if (IGNORED_FILTER_COUNT_FIELDS.includes(key) || this._fields[key]?.data.skipInFilterCount) {
+                return true;
+            }
+            return this._isDefaultValue(key, value);
+        })
+            .filter((v) => v === false).length));
         assertInInjectionContext(QueryForm);
         inject(DestroyRef).onDestroy(() => this._cleanup());
     }