@ethlete/query 4.7.4 → 4.7.6

package/fesm2022/ethlete-query.mjs

@@ -1,11 +1,12 @@
-import * as i1 from '@ethlete/core';
-import { getCookie, setCookie, deleteCookie, createDestroy, DelayableDirective, RouterStateService, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
-import { Observable, filter, takeWhile, switchMap, of, tap, BehaviorSubject, shareReplay, Subject, takeUntil, interval, skip, map, timer, startWith, combineLatest, withLatestFrom, fromEvent, debounceTime, take, concat } from 'rxjs';
+import * as i1$1 from '@ethlete/core';
+import { getCookie, setCookie, deleteCookie, createDestroy, nextFrame, DelayableDirective, RouterStateService, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
+import { Observable, BehaviorSubject, Subject, fromEvent, timer, takeUntil, take, filter, takeWhile, switchMap, of, tap, shareReplay, interval, skip, map, startWith, combineLatest, withLatestFrom, debounceTime, concat } from 'rxjs';
 import * as i0 from '@angular/core';
-import { isDevMode, InjectionToken, inject, signal, computed, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, ViewContainerRef, ErrorHandler, ChangeDetectorRef, Directive, Input, ElementRef, NgZone, assertInInjectionContext } from '@angular/core';
-import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
-import { FormGroup } from '@angular/forms';
+import { isDevMode, Pipe, InjectionToken, inject, ChangeDetectorRef, signal, computed, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, ViewContainerRef, ErrorHandler, Directive, Input, ElementRef, NgZone, assertInInjectionContext } from '@angular/core';
+import { NgIf, NgFor, AsyncPipe, JsonPipe, NgClass } from '@angular/common';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, FormGroup } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 class CustomHeaderAuthProvider {
@@ -492,6 +493,270 @@ const request = (config) => {
     });
 };
 
+class QueryCreator {
+    constructor(_queryConfig, _client, _store) {
+        this._queryConfig = _queryConfig;
+        this._client = _client;
+        this._store = _store;
+        // 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 = isGqlQueryConfig(this._queryConfig) ? buildGqlCacheKey(this._queryConfig, args) : route;
+            if (shouldCacheQuery(this._queryConfig.method)) {
+                const existingQuery = this._store.get(cacheKey);
+                if (existingQuery) {
+                    return existingQuery;
+                }
+            }
+            const query = new Query(this._client, this._queryConfig, route, args ?? {});
+            if (shouldCacheQuery(this._queryConfig.method)) {
+                this._store.add(cacheKey, query);
+            }
+            this._store._dispatchQueryCreated(query);
+            return query;
+        };
+        this.behaviorSubject = (initialValue) => new BehaviorSubject(initialValue ?? null);
+    }
+}
+
+class QueryStore {
+    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) {
+        this._store.set(id, query);
+        this._initGarbageCollector();
+        this._logState(id, query, 'SET');
+        this._storeChange$.next(id);
+    }
+    get(id) {
+        return this._store.get(id) ?? null;
+    }
+    remove(id) {
+        this._store.delete(id);
+        this._logState(id, null, 'REMOVE');
+        this._storeChange$.next(id);
+    }
+    forEach(callback) {
+        for (const [key, query] of this._store) {
+            callback(query, key);
+        }
+    }
+    refreshQueriesInUse(config) {
+        const { ignoreCacheValidity, purgeUnused } = config ?? {};
+        for (const [key, query] of this._store) {
+            if (query.isInUse &&
+                (query.isExpired || ignoreCacheValidity) &&
+                query.autoRefreshOnConfig.queryClientDefaultHeadersChange) {
+                query.execute({ skipCache: true, _triggeredVia: 'auto' });
+            }
+            else if (purgeUnused && !query.isInUse) {
+                this.remove(key);
+            }
+        }
+    }
+    /**
+     * @internal
+     */
+    _dispatchQueryCreated(query) {
+        this._queryCreated$.next(query);
+    }
+    _initSmartQueryHandling() {
+        const windowBlur$ = fromEvent(window, 'blur');
+        const windowFocus$ = fromEvent(window, 'focus');
+        windowBlur$.subscribe(() => {
+            timer(5000)
+                .pipe(takeUntil(windowFocus$), take(1))
+                .subscribe(() => {
+                this._lastBlurTimestamp = Date.now();
+                this._isInLowResourceMode = true;
+                this._stopGarbageCollector();
+                if (this._config?.enableSmartPolling) {
+                    this.forEach((query) => {
+                        if (!query.isPolling || !query._enableSmartPolling) {
+                            return;
+                        }
+                        query.pausePolling();
+                    });
+                }
+            });
+        });
+        windowFocus$.subscribe(() => {
+            if (!this._isInLowResourceMode) {
+                return;
+            }
+            this._isInLowResourceMode = false;
+            if (this._config?.enableSmartPolling || this._config?.autoRefreshQueriesOnWindowFocus) {
+                this.forEach((query) => {
+                    if (this._config?.enableSmartPolling && query._isPollingPaused) {
+                        query.resumePolling();
+                    }
+                    if (Date.now() - this._lastBlurTimestamp > 15000) {
+                        if (this._config?.autoRefreshQueriesOnWindowFocus &&
+                            query.isExpired &&
+                            query.isInUse &&
+                            query.autoRefreshOnConfig.windowFocus) {
+                            query.execute({ skipCache: true, _triggeredVia: 'auto' });
+                        }
+                    }
+                });
+            }
+            this._initGarbageCollector();
+        });
+    }
+    _logState(key, item, operation) {
+        if (!this._config?.enableChangeLogging)
+            return;
+        const stateAsJson = {};
+        this._store.forEach((value, key) => {
+            stateAsJson[key] = value;
+        });
+        console.log(`%c[${operation}] ${key}`, 'font-weight: bold');
+        console.log({ operation, key, item });
+        console.log(stateAsJson);
+    }
+    _initGarbageCollector() {
+        if (this._garbageCollector !== null) {
+            return;
+        }
+        this._logGarbageCollector('Start');
+        this._garbageCollector = window.setInterval(() => {
+            this._runGarbageCollector();
+        }, 15000);
+    }
+    _stopGarbageCollector() {
+        if (this._garbageCollector !== null) {
+            window.clearInterval(this._garbageCollector);
+            this._garbageCollector = null;
+            this._logGarbageCollector('Stop');
+        }
+    }
+    _runGarbageCollector() {
+        this._logGarbageCollector('Collecting...');
+        this._store.forEach((item, key) => {
+            if (item.isExpired && !item.isInUse) {
+                this.remove(key);
+            }
+        });
+        this._logGarbageCollector('Collection done');
+        if (!this._store.size) {
+            this._stopGarbageCollector();
+        }
+    }
+    _logGarbageCollector(action) {
+        if (!this._config?.enableGarbageCollectorLogging)
+            return;
+        console.log(`%cGC: ${action}`, 'color: yellow; font-weight: bold');
+    }
+}
+
+class QueryClient {
+    get config() {
+        return this._clientConfig;
+    }
+    get authProvider() {
+        return this._authProvider$.getValue() ?? this._clientConfig.parent?._authProvider$.getValue() ?? null;
+    }
+    get authProvider$() {
+        return this._authProvider$.asObservable() ?? this._clientConfig.parent?._authProvider$.asObservable() ?? 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) {
+                throw new Error('The auth provider is already set. Please call clearAuthProvider() first.');
+            }
+            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._store = new QueryStore({
+            enableChangeLogging: _clientConfig.logging?.queryStateChanges,
+            enableGarbageCollectorLogging: _clientConfig.logging?.queryStateGarbageCollector,
+            autoRefreshQueriesOnWindowFocus: _clientConfig.request?.autoRefreshQueriesOnWindowFocus ?? true,
+            enableSmartPolling: _clientConfig.request?.enableSmartPolling ?? true,
+        });
+    }
+}
+
+const shouldCacheQuery = (method) => {
+    return method === 'GET' || method === 'OPTIONS' || method === 'HEAD' || method === 'GQL_QUERY';
+};
+const buildGqlCacheKey = (config, args) => {
+    const { query } = config;
+    const variables = args?.variables || {};
+    const queryWithoutNewLinesAndWhitespace = query.replace(/\s/g, '');
+    const queryFirst50Chars = queryWithoutNewLinesAndWhitespace.slice(0, 50);
+    const queryMiddle25Chars = queryWithoutNewLinesAndWhitespace.slice(queryWithoutNewLinesAndWhitespace.length / 2 - 25, queryWithoutNewLinesAndWhitespace.length / 2 + 25);
+    const queryLast50Chars = queryWithoutNewLinesAndWhitespace.slice(-50);
+    const vars = JSON.stringify(variables);
+    return `${queryFirst50Chars}...${queryMiddle25Chars}...${queryLast50Chars}...${vars}`;
+};
+
 const getOpName = /(query|mutation) ?([\w\d-_]+)? ?\(.*?\)? \{/;
 const transformGql = (str) => {
     str = Array.isArray(str) ? str.join('') : str;
@@ -742,9 +1007,10 @@ const paginatedEntityValueUpdater = (findFn) => ({ response, rawResponse, entity
     };
 };
 
+let _nextQueryId = 0;
 class Query {
     get _nextId() {
-        return ++this._currentId;
+        return ++this._currentLocalId;
     }
     get state$() {
         return this._state$.pipe(tap((s) => {
@@ -800,27 +1066,32 @@ class Query {
     get _enableSmartPolling() {
         return this._queryConfig.enableSmartPolling ?? true;
     }
-    /**
-     * @internal
-     */
-    get _arguments() {
-        return this._args;
-    }
     get store() {
         return this._queryConfig.entity?.store ?? null;
     }
-    constructor(_client, _queryConfig, 
+    get canBeCached() {
+        return shouldCacheQuery(this._queryConfig.method);
+    }
+    constructor(_client, 
     /**
      * @internal
      */
-    _routeWithParams, _args) {
+    _queryConfig, 
+    /**
+     * @internal
+     */
+    _routeWithParams, 
+    /**
+     * @internal
+     */
+    _arguments) {
         this._client = _client;
         this._queryConfig = _queryConfig;
         this._routeWithParams = _routeWithParams;
-        this._args = _args;
-        this._currentId = 0;
+        this._arguments = _arguments;
+        this._id = _nextQueryId++;
+        this._currentLocalId = 0;
         this._pollingSubscription = null;
-        this._requestSubscription = null;
         this._onAbort$ = new Subject();
         this._currentPollConfig = null;
         /**
@@ -829,7 +1100,7 @@ class Query {
         this._isPollingPaused = false;
         this._state$ = new BehaviorSubject({
             type: "PREPARED" /* QueryStateType.Prepared */,
-            meta: { id: this._currentId, triggeredVia: 'program' },
+            meta: { id: this._currentLocalId, triggeredVia: 'program' },
         });
     }
     execute(options = {}) {
@@ -854,9 +1125,9 @@ class Query {
         }
         this._state$.next({ type: "LOADING" /* QueryStateType.Loading */, meta });
         const method = computeQueryMethod({ config: queryConfig, client: this._client });
-        const body = computeQueryBody({ config: queryConfig, client: this._client, args: this._args, method });
-        const headers = computeQueryHeaders({ client: this._client, config: queryConfig, args: this._args });
-        this._requestSubscription = request({
+        const body = computeQueryBody({ config: queryConfig, client: this._client, args: this._arguments, method });
+        const headers = computeQueryHeaders({ client: this._client, config: queryConfig, args: this._arguments });
+        request({
             urlWithParams: this._routeWithParams,
             method,
             body,
@@ -943,9 +1214,9 @@ class Query {
                     ? response['data']
                     : response;
                 if (this._queryConfig.entity && this._queryConfig.entity.set) {
-                    const id = this._queryConfig.entity?.id({ args: this._args, response: responseData });
+                    const id = this._queryConfig.entity?.id({ args: this._arguments, response: responseData });
                     this._queryConfig.entity?.set({
-                        args: this._args,
+                        args: this._arguments,
                         response: responseData,
                         id,
                         store: this._queryConfig.entity.store,
@@ -989,9 +1260,9 @@ class Query {
         if (!isQueryStateSuccess(s) || !this._queryConfig.entity?.get) {
             return of(s);
         }
-        const id = this._queryConfig.entity.id({ args: this._args, response: s.response });
+        const id = this._queryConfig.entity.id({ args: this._arguments, response: s.response });
         return this._queryConfig.entity
-            .get({ args: this._args, id, response: s.response, store: this._queryConfig.entity.store })
+            .get({ args: this._arguments, id, response: s.response, store: this._queryConfig.entity.store })
             .pipe(map((v) => ({ ...s, response: v })));
     }
 }
@@ -1173,6 +1444,29 @@ const isClassValidatorError = (error) => {
     return typeof error === 'object' && error !== null && 'statusCode' in error && 'message' in error && 'error' in error;
 };
 
+class QueryShortNamePipe {
+    transform(value) {
+        const route = value._routeWithParams;
+        if (typeof route === 'string') {
+            // given an url that looks like this: https://api.github.com/repos/EladBezalel/etimo-achievements or https://api.github.com/repos/EladBezalel/etimo-achievements?test=1&test2=2
+            // we want to extract the last 3 parts of the url, so we get: repos/EladBezalel/etimo-achievements
+            const parts = route.split('/');
+            if (parts.length > 3) {
+                return `.../${parts.slice(parts.length - 3).join('/')}`;
+            }
+            return route;
+        }
+        console.log(route);
+        return route;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: QueryShortNamePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'queryShortName', standalone: true }]
+        }] });
+
 const QUERY_CLIENT_DEVTOOLS_TOKEN = new InjectionToken('QUERY_CLIENT_DEVTOOLS_TOKEN');
 const provideQueryClientForDevtools = (queryClient) => {
     if (!isDevMode()) {
@@ -1187,6 +1481,7 @@ const provideQueryClientForDevtools = (queryClient) => {
 
 class QueryDevtoolsComponent {
     constructor() {
+        this._cdr = inject(ChangeDetectorRef);
         this._destroy$ = createDestroy();
         this.queryClientConfigs = inject(QUERY_CLIENT_DEVTOOLS_TOKEN);
         this.isOpen = signal(false);
@@ -1195,13 +1490,17 @@ class QueryDevtoolsComponent {
         this.queryListMode = signal('live');
         this.showResponse = signal(false);
         this.showRawResponse = signal(false);
-        this.selectedClientId = signal(0);
-        this.selectedQueryPath = signal(null);
+        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();
+            const index = this.selectedClientId() ?? 0;
             return this.queryClientConfigs[index];
         });
         this.queryStore = computed(() => {
@@ -1212,22 +1511,74 @@ class QueryDevtoolsComponent {
         this._queries$ = new BehaviorSubject([]);
         this.queries = toSignal(this._queries$);
         this.selectedQuery = computed(() => {
-            const path = this.selectedQueryPath();
+            const id = this.selectedQueryId();
             const mode = this.queryListMode();
-            if (!path || !mode) {
+            if (id === null || !mode) {
                 return null;
             }
             if (mode === 'live') {
-                return this.queries()?.find((q) => q._routeWithParams === path) ?? null;
+                return this.queries()?.find((q) => q._id === id) ?? null;
             }
-            return this.queryHistory()?.find((q) => q._routeWithParams === path) ?? null;
+            return this.queryHistory()?.find((q) => q._id === id) ?? null;
+        });
+        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(() => s?._dictionary ?? null)) ?? of(null)));
         this.queryHistory = signal([]);
+        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,
+            };
+            if (isGqlQueryConfig(cfg)) {
+                return {
+                    ...sharedCfg,
+                    query: cfg.query,
+                    transferVia: cfg.transferVia,
+                };
+            }
+            return {
+                ...sharedCfg,
+            };
+        });
         this.trackByClient = (_, { client }) => client.config.baseRoute;
-        this.trackByQuery = (_, { _routeWithParams }) => _routeWithParams;
+        this.trackByQuery = (_, { _id }) => _id;
+        this.selectedClientIdCtrl.valueChanges
+            .pipe(tap(() => this.clearQueryHistory()), takeUntil(this._destroy$))
+            .subscribe();
         this.queryStore$
             .pipe(switchMap((s) => s.storeChange$.pipe(startWith(''), map(() => s._store), tap((s) => this._queries$.next(Array.from(s.values()))), takeUntil(this._destroy$))))
             .subscribe();
+        this.queryStore$
+            .pipe(switchMap((s) => s.queryCreated$.pipe(tap((query) => {
+            const currentHistory = this.queryHistory();
+            if (!currentHistory)
+                return;
+            const currentHistoryClone = [...currentHistory];
+            if (!currentHistory.some((q) => q._id === query._id)) {
+                currentHistoryClone.unshift(query);
+            }
+            currentHistoryClone.splice(50);
+            this.queryHistory.set(currentHistoryClone);
+        }), takeUntil(this._destroy$))))
+            .subscribe();
         this._queries$
             .pipe(tap((queries) => {
             const currentHistory = this.queryHistory();
@@ -1235,8 +1586,8 @@ class QueryDevtoolsComponent {
                 return;
             const currentHistoryClone = [...currentHistory];
             for (const query of queries) {
-                if (!currentHistoryClone.includes(query)) {
-                    currentHistoryClone.push(query);
+                if (!currentHistoryClone.some((q) => q._id === query._id)) {
+                    currentHistoryClone.unshift(query);
                 }
             }
             currentHistoryClone.splice(50);
@@ -1250,8 +1601,11 @@ class QueryDevtoolsComponent {
                 snapLayout: this.snapLayout(),
                 showResponse: this.showResponse(),
                 showRawResponse: this.showRawResponse(),
+                showQueryConfig: this.showQueryConfig(),
+                showEntityStoreValue: this.showEntityStoreValue(),
+                showArguments: this.showArguments(),
                 selectedClientId: this.selectedClientId(),
-                selectedQueryPath: this.selectedQueryPath(),
+                selectedQueryPath: this.selectedQueryId(),
                 queryListMode: this.queryListMode(),
             };
             window.localStorage.setItem('ethlete:query:devtools', JSON.stringify(devtoolConfig));
@@ -1264,8 +1618,11 @@ class QueryDevtoolsComponent {
             this.snapLayout.set(parsed.snapLayout ?? 'full');
             this.showResponse.set(parsed.showResponse ?? false);
             this.showRawResponse.set(parsed.showRawResponse ?? false);
-            this.selectedClientId.set(parsed.selectedClientId ?? 0);
-            this.selectedQueryPath.set(parsed.selectedQueryPath ?? null);
+            this.showQueryConfig.set(parsed.showQueryConfig ?? false);
+            this.showEntityStoreValue.set(parsed.showEntityStoreValue ?? false);
+            this.showArguments.set(parsed.showArguments ?? false);
+            this.selectedClientIdCtrl.setValue(parsed.selectedClientId ?? 0);
+            this.selectedQueryId.set(parsed.selectedQueryPath ?? null);
             this.queryListMode.set(parsed.queryListMode ?? 'live');
         }
     }
@@ -1277,34 +1634,42 @@ class QueryDevtoolsComponent {
     }
     toggleShowResponse() {
         this.showResponse.set(!this.showResponse());
+        nextFrame(() => {
+            this._cdr.markForCheck();
+        });
+    }
+    toggleShowQueryConfig() {
+        this.showQueryConfig.set(!this.showQueryConfig());
     }
     toggleShowRawResponse() {
         this.showRawResponse.set(!this.showRawResponse());
     }
+    toggleShowEntityStoreValue() {
+        this.showEntityStoreValue.set(!this.showEntityStoreValue());
+    }
+    toggleShowArguments() {
+        this.showArguments.set(!this.showArguments());
+    }
     selectSnapLayout(layout) {
         this.snapLayout.set(layout);
     }
     selectQueryListMode(mode) {
         this.queryListMode.set(mode);
     }
-    selectClient(clientId) {
-        this.selectedClientId.set(clientId);
-        this.clearQueryHistory();
-    }
     selectQuery(query) {
-        this.selectedQueryPath.set(query._routeWithParams);
+        this.selectedQueryId.set(query._id);
     }
     clearQueryHistory() {
         this.queryHistory.set([]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn\">Open Devtools</button>\n\n<div\n  *ngIf=\"isOpen()\"\n  [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n  class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close-btn\">Close Devtools</button>\n  <button (click)=\"toggleTranslucent()\" class=\"et-query-devtools-translucent-btn\">Toggle Translucent</button>\n  <button (click)=\"selectSnapLayout('full')\" class=\"et-query-devtools-snap-btn\">Snap full</button>\n  <button (click)=\"selectSnapLayout('top')\" class=\"et-query-devtools-snap-btn\">Snap top</button>\n  <button (click)=\"selectSnapLayout('bottom')\" class=\"et-query-devtools-snap-btn\">Snap bottom</button>\n  <button (click)=\"selectSnapLayout('left')\" class=\"et-query-devtools-snap-btn\">Snap left</button>\n  <button (click)=\"selectSnapLayout('right')\" class=\"et-query-devtools-snap-btn\">Snap right</button>\n\n  <ng-container *ngIf=\"queryClientConfigs.length > 1\">\n    <p>Client instance:</p>\n    <ul>\n      <li *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\">\n        <button (click)=\"selectClient(i)\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedClientConfig() as cfg\">\n    <p>{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n    <button (click)=\"cfg.client._store.refreshQueriesInUse()\">Force Refresh of in use queries</button> <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\">HARD Force Refresh</button>\n    <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\">\n      PURGE & HARD Force Refresh\n    </button>\n\n    <br />\n    <br />\n\n    <button (click)=\"selectQueryListMode('live')\">Live</button>\n    <button (click)=\"selectQueryListMode('history')\">History (last {{ queryHistory().length }} )</button>\n    <button *ngIf=\"queryListMode() === 'history'\" (click)=\"clearQueryHistory()\">Clear</button>\n    <ul *ngIf=\"queryListMode() === 'live'\">\n      <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n        <button (click)=\"selectQuery(query)\">\n          {{ query._routeWithParams }}\n        </button>\n      </li>\n    </ul>\n\n    <ul *ngIf=\"queryListMode() === 'history'\">\n      <li *ngFor=\"let query of queryHistory(); trackBy: trackByQuery\">\n        <button (click)=\"selectQuery(query)\">\n          {{ query._routeWithParams }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedQuery() as query\">\n    <p>{{ query._routeWithParams }}</p>\n\n    <button (click)=\"query.execute()\">Execute</button> <br />\n    <button (click)=\"query.execute({ skipCache: true })\">FORCE Execute</button> <br />\n    <button (click)=\"query.abort()\">Abort</button> <br />\n    <button (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\">Poll</button> <br />\n    <button (click)=\"query.stopPolling()\">Stop polling</button> <br />\n    <button (click)=\"query.pausePolling()\">Pause polling</button> <br />\n    <button (click)=\"query.resumePolling()\">Resume polling</button> <br />\n\n    <div>\n      <p>state type</p>\n      <pre>{{ query.rawState.type }}</pre>\n    </div>\n\n    <div>\n      <p>_enableSmartPolling:</p>\n      <pre>{{ query._enableSmartPolling }}</pre>\n    </div>\n\n    <div>\n      <p>isExpired:</p>\n      <pre>{{ query.isExpired }}</pre>\n    </div>\n\n    <div>\n      <p>isInUse:</p>\n      <pre>{{ query.isInUse }}</pre>\n    </div>\n\n    <div>\n      <p>_subscriberCount:</p>\n      <pre>{{ query._subscriberCount }}</pre>\n    </div>\n\n    <div>\n      <p>isPolling:</p>\n      <pre>{{ query.isPolling }}</pre>\n    </div>\n\n    <div>\n      <p>_arguments:</p>\n      <pre>{{ query._arguments | json }}</pre>\n    </div>\n\n    <div>\n      <p>state$:</p>\n      <p><i> Warning, this will cause a subscription if shown </i></p>\n      <button (click)=\"toggleShowResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n    </div>\n\n    <div>\n      <p>rawState:</p>\n      <button (click)=\"toggleShowRawResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n    </div>\n  </ng-container>\n</div>\n", styles: [".et-query-devtools-container{position:fixed;inset:0;background-color:#000;z-index:10000;overflow:auto}.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%}.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%}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%}.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%}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Open Devtools</button>\n\n<div\n  *ngIf=\"isOpen()\"\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        <option *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\" [value]=\"i\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </option>\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  <div *ngIf=\"selectedClientConfig() as cfg\" 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  <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-queries\">\n    <p class=\"et-qd-queries__title\">Query browser</p>\n    <div class=\"et-qd-queries__actions\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' }\"\n        (click)=\"selectQueryListMode('live')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        Live ({{ queries()?.length ?? 0 }})\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' }\"\n        (click)=\"selectQueryListMode('history')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        History ({{ queryHistory().length }}/50)\n      </button>\n      <ng-container *ngIf=\"queryListMode() === 'history'\">\n        <div class=\"et-qd-queries__divider\"></div>\n        <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n      </ng-container>\n    </div>\n\n    <div class=\"et-qd-queries__browser\">\n      <ul *ngIf=\"queryListMode() === 'live'\" class=\"et-qd-queries__browser-list\">\n        <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n          <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n            <span> {{ query._queryConfig.method }}</span>\n            <span> {{ query | queryShortName }}</span>\n          </button>\n        </li>\n      </ul>\n      <ul *ngIf=\"queryListMode() === 'history'\" class=\"et-qd-queries__browser-list\">\n        <li *ngFor=\"let query of queryHistory(); trackBy: trackByQuery\">\n          <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n            <span> {{ query._queryConfig.method }}</span>\n            <span> {{ query | queryShortName }}</span>\n          </button>\n        </li>\n      </ul>\n      <div class=\"et-qd-queries__browser-detail\">\n        <ng-container *ngIf=\"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            <ng-container *ngIf=\"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            </ng-container>\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>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>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              <pre *ngIf=\"showArguments()\">{{ query._arguments | json }}</pre>\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              <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\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              <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\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              <pre *ngIf=\"showQueryConfig()\">{{ stringifiedQueryConfig() | json }}</pre>\n            </div>\n\n            <div *ngIf=\"!!query._queryConfig.entity\" 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              <pre *ngIf=\"showEntityStoreValue()\">{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".et-query-devtools{position:fixed;top:0;z-index:1000000;font-size:14px}.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)}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999;all:unset;font-family:monospace}.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 #3c424a;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 #3c424a;margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid #3c424a;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 #3c424a;background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;gap:2px}.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-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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-query-devtools', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
                         class: 'et-query-devtools',
-                    }, imports: [NgIf, NgFor, AsyncPipe, JsonPipe], hostDirectives: [], template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn\">Open Devtools</button>\n\n<div\n  *ngIf=\"isOpen()\"\n  [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n  class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close-btn\">Close Devtools</button>\n  <button (click)=\"toggleTranslucent()\" class=\"et-query-devtools-translucent-btn\">Toggle Translucent</button>\n  <button (click)=\"selectSnapLayout('full')\" class=\"et-query-devtools-snap-btn\">Snap full</button>\n  <button (click)=\"selectSnapLayout('top')\" class=\"et-query-devtools-snap-btn\">Snap top</button>\n  <button (click)=\"selectSnapLayout('bottom')\" class=\"et-query-devtools-snap-btn\">Snap bottom</button>\n  <button (click)=\"selectSnapLayout('left')\" class=\"et-query-devtools-snap-btn\">Snap left</button>\n  <button (click)=\"selectSnapLayout('right')\" class=\"et-query-devtools-snap-btn\">Snap right</button>\n\n  <ng-container *ngIf=\"queryClientConfigs.length > 1\">\n    <p>Client instance:</p>\n    <ul>\n      <li *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\">\n        <button (click)=\"selectClient(i)\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedClientConfig() as cfg\">\n    <p>{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n    <button (click)=\"cfg.client._store.refreshQueriesInUse()\">Force Refresh of in use queries</button> <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\">HARD Force Refresh</button>\n    <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\">\n      PURGE & HARD Force Refresh\n    </button>\n\n    <br />\n    <br />\n\n    <button (click)=\"selectQueryListMode('live')\">Live</button>\n    <button (click)=\"selectQueryListMode('history')\">History (last {{ queryHistory().length }} )</button>\n    <button *ngIf=\"queryListMode() === 'history'\" (click)=\"clearQueryHistory()\">Clear</button>\n    <ul *ngIf=\"queryListMode() === 'live'\">\n      <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n        <button (click)=\"selectQuery(query)\">\n          {{ query._routeWithParams }}\n        </button>\n      </li>\n    </ul>\n\n    <ul *ngIf=\"queryListMode() === 'history'\">\n      <li *ngFor=\"let query of queryHistory(); trackBy: trackByQuery\">\n        <button (click)=\"selectQuery(query)\">\n          {{ query._routeWithParams }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedQuery() as query\">\n    <p>{{ query._routeWithParams }}</p>\n\n    <button (click)=\"query.execute()\">Execute</button> <br />\n    <button (click)=\"query.execute({ skipCache: true })\">FORCE Execute</button> <br />\n    <button (click)=\"query.abort()\">Abort</button> <br />\n    <button (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\">Poll</button> <br />\n    <button (click)=\"query.stopPolling()\">Stop polling</button> <br />\n    <button (click)=\"query.pausePolling()\">Pause polling</button> <br />\n    <button (click)=\"query.resumePolling()\">Resume polling</button> <br />\n\n    <div>\n      <p>state type</p>\n      <pre>{{ query.rawState.type }}</pre>\n    </div>\n\n    <div>\n      <p>_enableSmartPolling:</p>\n      <pre>{{ query._enableSmartPolling }}</pre>\n    </div>\n\n    <div>\n      <p>isExpired:</p>\n      <pre>{{ query.isExpired }}</pre>\n    </div>\n\n    <div>\n      <p>isInUse:</p>\n      <pre>{{ query.isInUse }}</pre>\n    </div>\n\n    <div>\n      <p>_subscriberCount:</p>\n      <pre>{{ query._subscriberCount }}</pre>\n    </div>\n\n    <div>\n      <p>isPolling:</p>\n      <pre>{{ query.isPolling }}</pre>\n    </div>\n\n    <div>\n      <p>_arguments:</p>\n      <pre>{{ query._arguments | json }}</pre>\n    </div>\n\n    <div>\n      <p>state$:</p>\n      <p><i> Warning, this will cause a subscription if shown </i></p>\n      <button (click)=\"toggleShowResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n    </div>\n\n    <div>\n      <p>rawState:</p>\n      <button (click)=\"toggleShowRawResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n    </div>\n  </ng-container>\n</div>\n", styles: [".et-query-devtools-container{position:fixed;inset:0;background-color:#000;z-index:10000;overflow:auto}.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%}.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%}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%}.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%}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999}\n"] }]
+                    }, imports: [NgIf, NgFor, AsyncPipe, JsonPipe, ReactiveFormsModule, NgClass, QueryShortNamePipe], hostDirectives: [], template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Open Devtools</button>\n\n<div\n  *ngIf=\"isOpen()\"\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        <option *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\" [value]=\"i\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </option>\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  <div *ngIf=\"selectedClientConfig() as cfg\" 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  <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-queries\">\n    <p class=\"et-qd-queries__title\">Query browser</p>\n    <div class=\"et-qd-queries__actions\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' }\"\n        (click)=\"selectQueryListMode('live')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        Live ({{ queries()?.length ?? 0 }})\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' }\"\n        (click)=\"selectQueryListMode('history')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        History ({{ queryHistory().length }}/50)\n      </button>\n      <ng-container *ngIf=\"queryListMode() === 'history'\">\n        <div class=\"et-qd-queries__divider\"></div>\n        <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n      </ng-container>\n    </div>\n\n    <div class=\"et-qd-queries__browser\">\n      <ul *ngIf=\"queryListMode() === 'live'\" class=\"et-qd-queries__browser-list\">\n        <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n          <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n            <span> {{ query._queryConfig.method }}</span>\n            <span> {{ query | queryShortName }}</span>\n          </button>\n        </li>\n      </ul>\n      <ul *ngIf=\"queryListMode() === 'history'\" class=\"et-qd-queries__browser-list\">\n        <li *ngFor=\"let query of queryHistory(); trackBy: trackByQuery\">\n          <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n            <span> {{ query._queryConfig.method }}</span>\n            <span> {{ query | queryShortName }}</span>\n          </button>\n        </li>\n      </ul>\n      <div class=\"et-qd-queries__browser-detail\">\n        <ng-container *ngIf=\"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            <ng-container *ngIf=\"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            </ng-container>\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>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>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              <pre *ngIf=\"showArguments()\">{{ query._arguments | json }}</pre>\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              <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\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              <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\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              <pre *ngIf=\"showQueryConfig()\">{{ stringifiedQueryConfig() | json }}</pre>\n            </div>\n\n            <div *ngIf=\"!!query._queryConfig.entity\" 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              <pre *ngIf=\"showEntityStoreValue()\">{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".et-query-devtools{position:fixed;top:0;z-index:1000000;font-size:14px}.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)}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999;all:unset;font-family:monospace}.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 #3c424a;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 #3c424a;margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid #3c424a;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 #3c424a;background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;gap:2px}.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-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"] }]
         }], ctorParameters: function () { return []; } });
 
 class QueryDirective {
@@ -1734,7 +2099,7 @@ class InfinityQueryDirective {
         this._data$.next([]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.6", 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.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.6", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }], exportAs: ["etInfinityQuery"], hostDirectives: [{ directive: i1$1.DelayableDirective }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
@@ -1814,7 +2179,13 @@ function flatten(arr) {
 class EntityStore {
     constructor(_config) {
         this._config = _config;
+        /**
+         * @internal
+         */
         this._dictionary = new Map();
+        /**
+         * @internal
+         */
         this._change$ = new Subject();
     }
     select(keyOrKeys) {
@@ -1945,261 +2316,6 @@ const removeFrom = (store, { where, id }) => {
         .subscribe();
 };
 
-class QueryCreator {
-    constructor(_queryConfig, _client, _store) {
-        this._queryConfig = _queryConfig;
-        this._client = _client;
-        this._store = _store;
-        // 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 = isGqlQueryConfig(this._queryConfig) ? buildGqlCacheKey(this._queryConfig, args) : route;
-            if (shouldCacheQuery(this._queryConfig.method)) {
-                const existingQuery = this._store.get(cacheKey);
-                if (existingQuery) {
-                    return existingQuery;
-                }
-            }
-            const query = new Query(this._client, this._queryConfig, route, args ?? {});
-            if (shouldCacheQuery(this._queryConfig.method)) {
-                this._store.add(cacheKey, query);
-            }
-            return query;
-        };
-        this.behaviorSubject = (initialValue) => new BehaviorSubject(initialValue ?? null);
-    }
-}
-
-class QueryStore {
-    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.storeChange$ = this._storeChange$.asObservable();
-        this._initSmartQueryHandling();
-    }
-    add(id, query) {
-        this._store.set(id, query);
-        this._initGarbageCollector();
-        this._logState(id, query, 'SET');
-        this._storeChange$.next(id);
-    }
-    get(id) {
-        return this._store.get(id) ?? null;
-    }
-    remove(id) {
-        this._store.delete(id);
-        this._logState(id, null, 'REMOVE');
-        this._storeChange$.next(id);
-    }
-    forEach(callback) {
-        for (const [key, query] of this._store) {
-            callback(query, key);
-        }
-    }
-    refreshQueriesInUse(config) {
-        const { ignoreCacheValidity, purgeUnused } = config ?? {};
-        for (const [key, query] of this._store) {
-            if (query.isInUse &&
-                (query.isExpired || ignoreCacheValidity) &&
-                query.autoRefreshOnConfig.queryClientDefaultHeadersChange) {
-                query.execute({ skipCache: true, _triggeredVia: 'auto' });
-            }
-            else if (purgeUnused && !query.isInUse) {
-                this.remove(key);
-            }
-        }
-    }
-    _initSmartQueryHandling() {
-        const windowBlur$ = fromEvent(window, 'blur');
-        const windowFocus$ = fromEvent(window, 'focus');
-        windowBlur$.subscribe(() => {
-            timer(5000)
-                .pipe(takeUntil(windowFocus$), take(1))
-                .subscribe(() => {
-                this._lastBlurTimestamp = Date.now();
-                this._isInLowResourceMode = true;
-                this._stopGarbageCollector();
-                if (this._config?.enableSmartPolling) {
-                    this.forEach((query) => {
-                        if (!query.isPolling || !query._enableSmartPolling) {
-                            return;
-                        }
-                        query.pausePolling();
-                    });
-                }
-            });
-        });
-        windowFocus$.subscribe(() => {
-            if (!this._isInLowResourceMode) {
-                return;
-            }
-            this._isInLowResourceMode = false;
-            if (this._config?.enableSmartPolling || this._config?.autoRefreshQueriesOnWindowFocus) {
-                this.forEach((query) => {
-                    if (this._config?.enableSmartPolling && query._isPollingPaused) {
-                        query.resumePolling();
-                    }
-                    if (Date.now() - this._lastBlurTimestamp > 15000) {
-                        if (this._config?.autoRefreshQueriesOnWindowFocus &&
-                            query.isExpired &&
-                            query.isInUse &&
-                            query.autoRefreshOnConfig.windowFocus) {
-                            query.execute({ skipCache: true, _triggeredVia: 'auto' });
-                        }
-                    }
-                });
-            }
-            this._initGarbageCollector();
-        });
-    }
-    _logState(key, item, operation) {
-        if (!this._config?.enableChangeLogging)
-            return;
-        const stateAsJson = {};
-        this._store.forEach((value, key) => {
-            stateAsJson[key] = value;
-        });
-        console.log(`%c[${operation}] ${key}`, 'font-weight: bold');
-        console.log({ operation, key, item });
-        console.log(stateAsJson);
-    }
-    _initGarbageCollector() {
-        if (this._garbageCollector !== null) {
-            return;
-        }
-        this._logGarbageCollector('Start');
-        this._garbageCollector = window.setInterval(() => {
-            this._runGarbageCollector();
-        }, 15000);
-    }
-    _stopGarbageCollector() {
-        if (this._garbageCollector !== null) {
-            window.clearInterval(this._garbageCollector);
-            this._garbageCollector = null;
-            this._logGarbageCollector('Stop');
-        }
-    }
-    _runGarbageCollector() {
-        this._logGarbageCollector('Collecting...');
-        this._store.forEach((item, key) => {
-            if (item.isExpired && !item.isInUse) {
-                this.remove(key);
-            }
-        });
-        this._logGarbageCollector('Collection done');
-        if (!this._store.size) {
-            this._stopGarbageCollector();
-        }
-    }
-    _logGarbageCollector(action) {
-        if (!this._config?.enableGarbageCollectorLogging)
-            return;
-        console.log(`%cGC: ${action}`, 'color: yellow; font-weight: bold');
-    }
-}
-
-class QueryClient {
-    get config() {
-        return this._clientConfig;
-    }
-    get authProvider() {
-        return this._authProvider$.getValue() ?? this._clientConfig.parent?._authProvider$.getValue() ?? null;
-    }
-    get authProvider$() {
-        return this._authProvider$.asObservable() ?? this._clientConfig.parent?._authProvider$.asObservable() ?? 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) {
-                throw new Error('The auth provider is already set. Please call clearAuthProvider() first.');
-            }
-            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._store = new QueryStore({
-            enableChangeLogging: _clientConfig.logging?.queryStateChanges,
-            enableGarbageCollectorLogging: _clientConfig.logging?.queryStateGarbageCollector,
-            autoRefreshQueriesOnWindowFocus: _clientConfig.request?.autoRefreshQueriesOnWindowFocus ?? true,
-            enableSmartPolling: _clientConfig.request?.enableSmartPolling ?? true,
-        });
-    }
-}
-
-const shouldCacheQuery = (method) => {
-    return method === 'GET' || method === 'OPTIONS' || method === 'HEAD' || method === 'GQL_QUERY';
-};
-const buildGqlCacheKey = (config, args) => {
-    const { query } = config;
-    const variables = args?.variables || {};
-    const queryWithoutNewLinesAndWhitespace = query.replace(/\s/g, '');
-    const queryFirst50Chars = queryWithoutNewLinesAndWhitespace.slice(0, 50);
-    const queryMiddle25Chars = queryWithoutNewLinesAndWhitespace.slice(queryWithoutNewLinesAndWhitespace.length / 2 - 25, queryWithoutNewLinesAndWhitespace.length / 2 + 25);
-    const queryLast50Chars = queryWithoutNewLinesAndWhitespace.slice(-50);
-    const vars = JSON.stringify(variables);
-    return `${queryFirst50Chars}...${queryMiddle25Chars}...${queryLast50Chars}...${vars}`;
-};
-
 const ET_ARR_PREFIX = 'ET_ARR__';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 class QueryFormGroup extends FormGroup {
@@ -2560,5 +2676,5 @@ const def = () => null;
  * Generated bundle index. Do not edit.
  */
 
-export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, QUERY_CLIENT_DEVTOOLS_TOKEN, Query, QueryClient, QueryCreator, QueryDevtoolsComponent, QueryDirective, QueryError, QueryField, QueryForm, QueryFormGroup, QueryStore, buildErrorMessage, buildGqlCacheKey, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, insertFrom, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isClassValidatorError, isCustomHeaderAuthProvider, isEmptyString, isGqlQueryConfig, isNaN$1 as isNaN, isQuery, isQueryCollection, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, isSymfonyFormViolationListError, isSymfonyPagerfantaOutOfRangeError, mapToPaginated, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, provideQueryClientForDevtools, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, removeFrom, request, resetPageOnError, serializeBody, shouldCacheQuery, shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
+export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, QUERY_CLIENT_DEVTOOLS_TOKEN, Query, QueryClient, QueryCreator, QueryDevtoolsComponent, QueryDirective, QueryError, QueryField, QueryForm, QueryFormGroup, QueryShortNamePipe, QueryStore, buildErrorMessage, buildGqlCacheKey, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, insertFrom, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isClassValidatorError, isCustomHeaderAuthProvider, isEmptyString, isGqlQueryConfig, isNaN$1 as isNaN, isQuery, isQueryCollection, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, isSymfonyFormViolationListError, isSymfonyPagerfantaOutOfRangeError, mapToPaginated, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, provideQueryClientForDevtools, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, removeFrom, request, resetPageOnError, serializeBody, shouldCacheQuery, shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
 //# sourceMappingURL=ethlete-query.mjs.map