@ethlete/query 5.41.4 → 5.42.0

package/fesm2022/ethlete-query.mjs

@@ -1,5 +1,5 @@
 import * as i1 from '@ethlete/core';
-import { createDestroy, computedTillTruthy, syncSignal as syncSignal$1, RuntimeError, isObject, injectRoute, getDomain, getCookie, setCookie, deleteCookie, clamp, previousSignalValue, DelayableDirective, nextFrame, injectQueryParamChanges, injectQueryParams, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
+import { createDestroy, computedTillTruthy, syncSignal, RuntimeError, isObject, injectRoute, getDomain, getCookie, setCookie, deleteCookie, clamp, previousSignalValue, DelayableDirective, nextFrame, injectQueryParamChanges, injectQueryParams, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
 import { Observable, takeUntil, startWith, pairwise, tap, switchMap, of, BehaviorSubject, Subject, fromEvent, timer, take, Subscription, retry, throwError, catchError, ReplaySubject, map, shareReplay, interval, skip, takeWhile, filter, combineLatest, withLatestFrom, debounceTime, merge } from 'rxjs';
 import { HttpStatusCode, HttpErrorResponse, HttpEventType, HttpClient, HttpHeaders } from '@angular/common/http';
 import * as i0 from '@angular/core';
@@ -7,7 +7,7 @@ import { assertInInjectionContext, inject, Injector, runInInjectionContext, sign
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { getActiveConsumer, setActiveConsumer } from '@angular/core/primitives/signals';
 import { io } from 'socket.io-client';
-import { AsyncPipe, JsonPipe, NgClass } from '@angular/common';
+import { NgClass, AsyncPipe, JsonPipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormGroup } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
@@ -643,7 +643,7 @@ function effectComputed(computation, injector) {
         // Ignore errors in the initial computation
         // Angular might throw an error if required inputs are read but not available yet
     }
-    const lastResult = signal(initialData);
+    const lastResult = signal(initialData, ...(ngDevMode ? [{ debugName: "lastResult" }] : []));
     effect(() => {
         const data = runInInjectionContext(injector, () => computation());
         untracked(() => {
@@ -694,8 +694,8 @@ function queryStateSignal(source, options) {
     })), {
         initialValue: null,
     });
-    const rwSignal = signal(roSignal());
-    syncSignal$1(roSignal, rwSignal);
+    const rwSignal = signal(roSignal(), ...(ngDevMode ? [{ debugName: "rwSignal" }] : []));
+    syncSignal(roSignal, rwSignal);
     return rwSignal;
 }
 function queryStateResponseSignal(source, options) {
@@ -703,7 +703,7 @@ function queryStateResponseSignal(source, options) {
     const dataSignal = computed(() => {
         const state = s();
         return isQueryStateSuccess(state) ? state.response : null;
-    });
+    }, ...(ngDevMode ? [{ debugName: "dataSignal" }] : []));
     dataSignal['reset'] = () => {
         s.set(null);
     };
@@ -786,7 +786,7 @@ class QueryCreator {
         };
         this.createSignal = (initialValue, config) => {
             assertInInjectionContext(this.createSignal);
-            const _signal = signal(initialValue ?? null);
+            const _signal = signal(initialValue ?? null, ...(ngDevMode ? [{ debugName: "_signal" }] : []));
             addQueryContainerHandling(toObservable(_signal), () => _signal(), config);
             return _signal;
         };
@@ -1037,84 +1037,119 @@ const buildQueryCacheKey$1 = (route, args) => {
     return hash.toString();
 };
 
+// codes 0-999
+const QueryRuntimeErrorCode = {
+    // Query
+    QUERY_FEATURE_USED_MULTIPLE_TIMES: 0,
+    // Query features
+    WITH_ARGS_QUERY_FEATURE_MISSING_BUT_ROUTE_IS_FUNCTION: 100,
+    WITH_POLLING_USED_ON_UNSUPPORTED_HTTP_METHOD: 101,
+    WITH_AUTO_REFRESH_USED_ON_UNSUPPORTED_HTTP_METHOD: 102,
+    WITH_AUTO_REFRESH_USED_IN_MANUAL_QUERY: 103,
+    SILENCE_MISSING_WITH_ARGS_FEATURE_ERROR_USED_BUT_WITH_ARGS_PRESENT: 104,
+    // Auth provider
+    COOKIE_LOGIN_TRIED_BUT_COOKIE_DISABLED: 200,
+    ENABLE_COOKIE_CALLED_WITHOUT_COOKIE_CONFIG: 201,
+    DISABLE_COOKIE_CALLED_WITHOUT_COOKIE_CONFIG: 202,
+    LOGIN_CALLED_WITHOUT_CONFIG: 203,
+    LOGIN_WITH_TOKEN_CALLED_WITHOUT_CONFIG: 204,
+    REFRESH_TOKEN_CALLED_WITHOUT_CONFIG: 205,
+    SELECT_ROLE_CALLED_WITHOUT_CONFIG: 206,
+    DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_OBJECT: 207,
+    DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_CONTAINING_ACCESS_TOKEN: 208,
+    DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_CONTAINING_REFRESH_TOKEN: 209,
+    UNABLE_TO_DECRYPT_BEARER_TOKEN: 210,
+    BEARER_EXPIRES_IN_PROPERTY_NOT_NUMBER: 211,
+    // Query Repository
+    UNCACHEABLE_REQUEST_HAS_CACHE_KEY_PARAM: 300,
+    UNCACHEABLE_REQUEST_HAS_ALLOW_CACHE_PARAM: 301,
+    // Paged Query Stack
+    PAGED_QUERY_STACK_PAGE_BIGGER_THAN_TOTAL_PAGES: 400,
+    PAGED_QUERY_STACK_NEXT_PAGE_CALLED_WITHOUT_PREVIOUS_PAGE: 401,
+    PAGED_QUERY_STACK_PREVIOUS_PAGE_CALLED_BUT_ALREADY_AT_FIRST_PAGE: 402,
+    // Query Stack
+    QUERY_STACK_WITH_ARGS_USED: 500,
+    QUERY_STACK_WITH_RESPONSE_UPDATE_USED: 501,
+    QUERY_STACK_TOTAL_QUERIES_AND_EXPECTED_QUERIES_MISMATCH: 502,
+};
 const queryFeatureUsedMultipleTimes = (type) => {
-    return new RuntimeError(0 /* QueryRuntimeErrorCode.QUERY_FEATURE_USED_MULTIPLE_TIMES */, `The query feature "${type}()" was used multiple times.`);
+    return new RuntimeError(QueryRuntimeErrorCode.QUERY_FEATURE_USED_MULTIPLE_TIMES, `The query feature "${type}()" was used multiple times.`);
 };
 const withArgsQueryFeatureMissingButRouteIsFunction = () => {
-    return new RuntimeError(100 /* QueryRuntimeErrorCode.WITH_ARGS_QUERY_FEATURE_MISSING_BUT_ROUTE_IS_FUNCTION */, `This queries route is a function, but a "withArgs()" feature is missing.`);
+    return new RuntimeError(QueryRuntimeErrorCode.WITH_ARGS_QUERY_FEATURE_MISSING_BUT_ROUTE_IS_FUNCTION, `This queries route is a function, but a "withArgs()" feature is missing.`);
 };
 const withPollingUsedOnUnsupportedHttpMethod = (method) => {
-    return new RuntimeError(101 /* QueryRuntimeErrorCode.WITH_POLLING_USED_ON_UNSUPPORTED_HTTP_METHOD */, `This is a "${method}" request, "withPolling()" is only supported for GET, HEAD, OPTIONS requests and GQL queries.`);
+    return new RuntimeError(QueryRuntimeErrorCode.WITH_POLLING_USED_ON_UNSUPPORTED_HTTP_METHOD, `This is a "${method}" request, "withPolling()" is only supported for GET, HEAD, OPTIONS requests and GQL queries.`);
 };
 const withAutoRefreshUsedOnUnsupportedHttpMethod = (method) => {
-    return new RuntimeError(102 /* QueryRuntimeErrorCode.WITH_AUTO_REFRESH_USED_ON_UNSUPPORTED_HTTP_METHOD */, `This is a "${method}" request, "withAutoRefresh()" is only supported for GET, HEAD, OPTIONS requests and GQL queries.`);
+    return new RuntimeError(QueryRuntimeErrorCode.WITH_AUTO_REFRESH_USED_ON_UNSUPPORTED_HTTP_METHOD, `This is a "${method}" request, "withAutoRefresh()" is only supported for GET, HEAD, OPTIONS requests and GQL queries.`);
 };
 const withAutoRefreshUsedInManualQuery = () => {
-    return new RuntimeError(103 /* QueryRuntimeErrorCode.WITH_AUTO_REFRESH_USED_IN_MANUAL_QUERY */, `"withAutoRefresh()" has been used inside a query that has "onlyManualExecution" set to true.` +
+    return new RuntimeError(QueryRuntimeErrorCode.WITH_AUTO_REFRESH_USED_IN_MANUAL_QUERY, `"withAutoRefresh()" has been used inside a query that has "onlyManualExecution" set to true.` +
         ` If this is intentional, set "ignoreOnlyManualExecution" to true inside the auto refresh config.`);
 };
 const silenceMissingWithArgsFeatureErrorUsedButWithArgsPresent = () => {
-    return new RuntimeError(104 /* QueryRuntimeErrorCode.SILENCE_MISSING_WITH_ARGS_FEATURE_ERROR_USED_BUT_WITH_ARGS_PRESENT */, `The "silenceMissingWithArgsFeatureError" config is set to true, but a "withArgs()" feature is present.`);
+    return new RuntimeError(QueryRuntimeErrorCode.SILENCE_MISSING_WITH_ARGS_FEATURE_ERROR_USED_BUT_WITH_ARGS_PRESENT, `The "silenceMissingWithArgsFeatureError" config is set to true, but a "withArgs()" feature is present.`);
 };
 const cookieLoginTriedButCookieDisabled = () => {
-    return new RuntimeError(200 /* QueryRuntimeErrorCode.COOKIE_LOGIN_TRIED_BUT_COOKIE_DISABLED */, `Cookie login has been tried, but the cookie is disabled.`);
+    return new RuntimeError(QueryRuntimeErrorCode.COOKIE_LOGIN_TRIED_BUT_COOKIE_DISABLED, `Cookie login has been tried, but the cookie is disabled.`);
 };
 const enableCookieCalledWithoutCookieConfig = () => {
-    return new RuntimeError(201 /* QueryRuntimeErrorCode.ENABLE_COOKIE_CALLED_WITHOUT_COOKIE_CONFIG */, `enableCookie() has been called but there is no cookie config. Please set it during the auth provider creation.`);
+    return new RuntimeError(QueryRuntimeErrorCode.ENABLE_COOKIE_CALLED_WITHOUT_COOKIE_CONFIG, `enableCookie() has been called but there is no cookie config. Please set it during the auth provider creation.`);
 };
 const disableCookieCalledWithoutCookieConfig = () => {
-    return new RuntimeError(202 /* QueryRuntimeErrorCode.DISABLE_COOKIE_CALLED_WITHOUT_COOKIE_CONFIG */, `disableCookie() has been called but there is no cookie config. Please set it during the auth provider creation.`);
+    return new RuntimeError(QueryRuntimeErrorCode.DISABLE_COOKIE_CALLED_WITHOUT_COOKIE_CONFIG, `disableCookie() has been called but there is no cookie config. Please set it during the auth provider creation.`);
 };
 const loginCalledWithoutConfig = () => {
-    return new RuntimeError(203 /* QueryRuntimeErrorCode.LOGIN_CALLED_WITHOUT_CONFIG */, `login() has been called without a config. Please set it during the auth provider creation.`);
+    return new RuntimeError(QueryRuntimeErrorCode.LOGIN_CALLED_WITHOUT_CONFIG, `login() has been called without a config. Please set it during the auth provider creation.`);
 };
 const loginWithTokenCalledWithoutConfig = () => {
-    return new RuntimeError(204 /* QueryRuntimeErrorCode.LOGIN_WITH_TOKEN_CALLED_WITHOUT_CONFIG */, `loginWithToken() has been called without a config. Please set it during the auth provider creation.`);
+    return new RuntimeError(QueryRuntimeErrorCode.LOGIN_WITH_TOKEN_CALLED_WITHOUT_CONFIG, `loginWithToken() has been called without a config. Please set it during the auth provider creation.`);
 };
 const refreshTokenCalledWithoutConfig = () => {
-    return new RuntimeError(205 /* QueryRuntimeErrorCode.REFRESH_TOKEN_CALLED_WITHOUT_CONFIG */, `refreshToken() has been called without a config. Please set it during the auth provider creation.`);
+    return new RuntimeError(QueryRuntimeErrorCode.REFRESH_TOKEN_CALLED_WITHOUT_CONFIG, `refreshToken() has been called without a config. Please set it during the auth provider creation.`);
 };
 const selectRoleCalledWithoutConfig = () => {
-    return new RuntimeError(206 /* QueryRuntimeErrorCode.SELECT_ROLE_CALLED_WITHOUT_CONFIG */, `selectRole() has been called without a config. Please set it during the auth provider creation.`);
+    return new RuntimeError(QueryRuntimeErrorCode.SELECT_ROLE_CALLED_WITHOUT_CONFIG, `selectRole() has been called without a config. Please set it during the auth provider creation.`);
 };
 const defaultResponseTransformerResponseNotObject = (currentType) => {
-    return new RuntimeError(207 /* QueryRuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_OBJECT */, `The default response transformer expects the response to be an object, but it is a "${currentType}".`);
+    return new RuntimeError(QueryRuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_OBJECT, `The default response transformer expects the response to be an object, but it is a "${currentType}".`);
 };
 const defaultResponseTransformerResponseNotContainingAccessToken = () => {
-    return new RuntimeError(208 /* QueryRuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_CONTAINING_ACCESS_TOKEN */, `The default response transformer expects the response to contain an "accessToken" property.`);
+    return new RuntimeError(QueryRuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_CONTAINING_ACCESS_TOKEN, `The default response transformer expects the response to contain an "accessToken" property.`);
 };
 const defaultResponseTransformerResponseNotContainingRefreshToken = () => {
-    return new RuntimeError(209 /* QueryRuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_CONTAINING_REFRESH_TOKEN */, `The default response transformer expects the response to contain a "refreshToken" property.`);
+    return new RuntimeError(QueryRuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_CONTAINING_REFRESH_TOKEN, `The default response transformer expects the response to contain a "refreshToken" property.`);
 };
 const unableToDecryptBearerToken = (token) => {
-    return new RuntimeError(210 /* QueryRuntimeErrorCode.UNABLE_TO_DECRYPT_BEARER_TOKEN */, `The bearer token could not be decrypted: ${token}`);
+    return new RuntimeError(QueryRuntimeErrorCode.UNABLE_TO_DECRYPT_BEARER_TOKEN, `The bearer token could not be decrypted: ${token}`);
 };
 const bearerExpiresInPropertyNotNumber = (expiresIn) => {
-    return new RuntimeError(211 /* QueryRuntimeErrorCode.BEARER_EXPIRES_IN_PROPERTY_NOT_NUMBER */, `The expires in property is not a number: ${expiresIn}`);
+    return new RuntimeError(QueryRuntimeErrorCode.BEARER_EXPIRES_IN_PROPERTY_NOT_NUMBER, `The expires in property is not a number: ${expiresIn}`);
 };
 const uncacheableRequestHasCacheKeyParam = (key) => {
-    return new RuntimeError(300 /* QueryRuntimeErrorCode.UNCACHEABLE_REQUEST_HAS_CACHE_KEY_PARAM */, `This request is uncacheable, but a cache key was provided: ${key}. Please remove it.`);
+    return new RuntimeError(QueryRuntimeErrorCode.UNCACHEABLE_REQUEST_HAS_CACHE_KEY_PARAM, `This request is uncacheable, but a cache key was provided: ${key}. Please remove it.`);
 };
 const uncacheableRequestHasAllowCacheParam = () => {
-    return new RuntimeError(301 /* QueryRuntimeErrorCode.UNCACHEABLE_REQUEST_HAS_ALLOW_CACHE_PARAM */, `This request is uncacheable, but allowCache is set to true. Please remove it.`);
+    return new RuntimeError(QueryRuntimeErrorCode.UNCACHEABLE_REQUEST_HAS_ALLOW_CACHE_PARAM, `This request is uncacheable, but allowCache is set to true. Please remove it.`);
 };
 const pagedQueryStackPageBiggerThanTotalPages = (page, totalPages) => {
-    return new RuntimeError(400 /* QueryRuntimeErrorCode.PAGED_QUERY_STACK_PAGE_BIGGER_THAN_TOTAL_PAGES */, `The page "${page}" is bigger than the total pages "${totalPages}".`);
+    return new RuntimeError(QueryRuntimeErrorCode.PAGED_QUERY_STACK_PAGE_BIGGER_THAN_TOTAL_PAGES, `The page "${page}" is bigger than the total pages "${totalPages}".`);
 };
 const pagedQueryStackNextPageCalledWithoutPreviousPage = () => {
-    return new RuntimeError(401 /* QueryRuntimeErrorCode.PAGED_QUERY_STACK_NEXT_PAGE_CALLED_WITHOUT_PREVIOUS_PAGE */, `fetchNextPage() has been called but the current page is not yet loaded. Please call it after the previous page has been loaded.`);
+    return new RuntimeError(QueryRuntimeErrorCode.PAGED_QUERY_STACK_NEXT_PAGE_CALLED_WITHOUT_PREVIOUS_PAGE, `fetchNextPage() has been called but the current page is not yet loaded. Please call it after the previous page has been loaded.`);
 };
 const pagedQueryStackPreviousPageCalledButAlreadyAtFirstPage = () => {
-    return new RuntimeError(402 /* QueryRuntimeErrorCode.PAGED_QUERY_STACK_PREVIOUS_PAGE_CALLED_BUT_ALREADY_AT_FIRST_PAGE */, `fetchPreviousPage() has been called but the current page is already the first page.`);
+    return new RuntimeError(QueryRuntimeErrorCode.PAGED_QUERY_STACK_PREVIOUS_PAGE_CALLED_BUT_ALREADY_AT_FIRST_PAGE, `fetchPreviousPage() has been called but the current page is already the first page.`);
 };
 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.`);
+    return new RuntimeError(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.`);
+    return new RuntimeError(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 queryStackTotalQueriesAndExpectedQueriesMismatch = (totalQueries, expectedQueries) => {
-    return new RuntimeError(502 /* QueryRuntimeErrorCode.QUERY_STACK_TOTAL_QUERIES_AND_EXPECTED_QUERIES_MISMATCH */, `The total queries "${totalQueries}" and the expected queries "${expectedQueries}" do not match. This usually happens if a query depends on the response of the previous query to calculate its pagination values. Set blockExecutionDuringLoading to true to prevent this.`);
+    return new RuntimeError(QueryRuntimeErrorCode.QUERY_STACK_TOTAL_QUERIES_AND_EXPECTED_QUERIES_MISMATCH, `The total queries "${totalQueries}" and the expected queries "${expectedQueries}" do not match. This usually happens if a query depends on the response of the previous query to calculate its pagination values. Set blockExecutionDuringLoading to true to prevent this.`);
 };
 
 const defaultResponseTransformer = (response) => {
@@ -1132,7 +1167,7 @@ const defaultResponseTransformer = (response) => {
 const FIVE_MINUTES = 5 * 60 * 1000;
 const createAuthProviderQuery = (config, authProviderConfig) => {
     const query = config.queryCreator({ onlyManualExecution: true });
-    const triggeredInternally = signal(false);
+    const triggeredInternally = signal(false, ...(ngDevMode ? [{ debugName: "triggeredInternally" }] : []));
     const tokens = computed(() => {
         const res = query.response();
         if (!res)
@@ -1145,7 +1180,7 @@ const createAuthProviderQuery = (config, authProviderConfig) => {
             bearer: bearerValue,
             tokens: transformed,
         };
-    });
+    }, ...(ngDevMode ? [{ debugName: "tokens" }] : []));
     const expiresIn = computed(() => {
         const res = tokens();
         if (!res)
@@ -1158,7 +1193,7 @@ const createAuthProviderQuery = (config, authProviderConfig) => {
         // const dummyRemainingTime = (query.lastTimeExecutedAt() ?? 0) + 5000 - new Date().getTime();
         const remainingTime = new Date(expiresIn * 1000).getTime() - refreshBuffer - new Date().getTime();
         return remainingTime;
-    });
+    }, ...(ngDevMode ? [{ debugName: "expiresIn" }] : []));
     const execute = (newArgs, options) => {
         query.execute({ args: newArgs });
         triggeredInternally.set(options?.triggeredInternally ?? false);
@@ -1174,7 +1209,7 @@ const createAuthProviderQuery = (config, authProviderConfig) => {
 const createBearerAuthProvider = (options) => {
     const route = injectRoute();
     const client = inject(options.queryClientRef);
-    const cookieEnabled = signal(options.cookie === undefined ? false : (options.cookie.enabled ?? true));
+    const cookieEnabled = signal(options.cookie === undefined ? false : (options.cookie.enabled ?? true), ...(ngDevMode ? [{ debugName: "cookieEnabled" }] : []));
     const cookieOptions = {
         expiresInDays: 30,
         name: 'etAuth',
@@ -1198,17 +1233,17 @@ const createBearerAuthProvider = (options) => {
     const latestExecutedQuery = computed(() => {
         const relevantQueries = queries.filter((q) => q.query && q.query.query.lastTimeExecutedAt() !== null);
         return findMostRecentQuery(relevantQueries);
-    });
+    }, ...(ngDevMode ? [{ debugName: "latestExecutedQuery" }] : []));
     const tokens = computed(() => {
         const query = latestExecutedQuery();
         return query?.query?.tokens()?.tokens ?? null;
-    });
+    }, ...(ngDevMode ? [{ debugName: "tokens" }] : []));
     const bearerData = computed(() => {
         const accessToken = tokens()?.accessToken;
         if (!accessToken)
             return null;
         return (options.bearerDecryptFn?.(accessToken) ?? decryptBearer(accessToken));
-    });
+    }, ...(ngDevMode ? [{ debugName: "bearerData" }] : []));
     toObservable(computed(() => {
         const query = latestExecutedQuery();
         const expiresIn = query?.query?.expiresIn() ?? null;
@@ -1227,7 +1262,7 @@ const createBearerAuthProvider = (options) => {
         }, { triggeredInternally: true })));
     }), takeUntilDestroyed())
         .subscribe();
-    const latestNonInternalQuery = signal(null);
+    const latestNonInternalQuery = signal(null, ...(ngDevMode ? [{ debugName: "latestNonInternalQuery" }] : []));
     effect(() => {
         const relevantQueries = queries.filter((q) => q.query && !q.query.triggeredInternally() && q.query.query.lastTimeExecutedAt() !== null);
         const lastQuery = findMostRecentQuery(relevantQueries);
@@ -1395,14 +1430,189 @@ const isClassValidatorError = (error) => {
     return typeof error === 'object' && error !== null && 'statusCode' in error && 'message' in error && 'error' in error;
 };
 
+const QueryFeatureType = {
+    WITH_ARGS: 'WITH_ARGS',
+    WITH_LOGGING: 'WITH_LOGGING',
+    WITH_ERROR_HANDLING: 'WITH_ERROR_HANDLING',
+    WITH_SUCCESS_HANDLING: 'WITH_SUCCESS_HANDLING',
+    WITH_POLLING: 'WITH_POLLING',
+    WITH_AUTO_REFRESH: 'WITH_AUTO_REFRESH',
+    WITH_RESPONSE_UPDATE: 'WITH_RESPONSE_UPDATE',
+};
+const createQueryFeature = (config) => {
+    return config;
+};
+/**
+ * A query feature that allows you to set the arguments of the query.
+ * The arguments are read within a computed function, so you can use reactive values.
+ *
+ * To set the arguments to `null`, return the symbol `CLEAR_QUERY_ARGS`.
+ * If you instead return `null`, the arguments won't change.
+ *
+ * Changing arguments will automatically trigger a new execution of the query if it is eligible for auto execution (e.g. a GET request).
+ */
+const withArgs = (args) => {
+    return createQueryFeature({
+        type: QueryFeatureType.WITH_ARGS,
+        fn: (context) => {
+            const currArgs = computed(() => args(), ...(ngDevMode ? [{ debugName: "currArgs" }] : []));
+            nestedEffect(() => {
+                const currArgsNow = currArgs();
+                if (currArgsNow === null)
+                    return;
+                untracked(() => {
+                    if (currArgsNow === CLEAR_QUERY_ARGS) {
+                        context.state.args.set(null);
+                        return;
+                    }
+                    context.state.args.set(currArgsNow);
+                    if (context.flags.shouldAutoExecute)
+                        context.execute({ args: currArgsNow });
+                });
+            }, { injector: context.deps.injector });
+        },
+    });
+};
+/**
+ * A query feature that will automatically execute the query at a given interval.
+ * The interval will be cleared when the query is destroyed.
+ * The interval will be reset when the arguments of the query change.
+ *
+ * @throws If the query is not eligible for auto execution (e.g. a POST request)
+ */
+const withPolling = (options) => {
+    return createQueryFeature({
+        type: QueryFeatureType.WITH_POLLING,
+        fn: (context) => {
+            if (!context.flags.shouldAutoExecuteMethod) {
+                throw withPollingUsedOnUnsupportedHttpMethod(context.flags.method);
+            }
+            let intervalId = null;
+            nestedEffect(() => {
+                const args = context.state.args();
+                untracked(() => {
+                    if (intervalId !== null)
+                        clearInterval(intervalId);
+                    // Don't start polling if the query doesn't have args.
+                    // It should have args because a withArgs feature is present.
+                    if (args === null && context.flags.hasWithArgsFeature)
+                        return;
+                    if (options.executeInitially) {
+                        context.execute({ args });
+                    }
+                    intervalId = window.setInterval(() => {
+                        context.execute({ args });
+                    }, options.interval);
+                });
+            }, { injector: context.deps.injector });
+            context.deps.destroyRef.onDestroy(() => intervalId !== null && clearInterval(intervalId));
+        },
+    });
+};
+/** A query feature that can be used to log the latest http event */
+const withLogging = (options) => {
+    return createQueryFeature({
+        type: QueryFeatureType.WITH_LOGGING,
+        fn: (context) => {
+            nestedEffect(() => {
+                const event = context.state.latestHttpEvent();
+                if (event === null)
+                    return;
+                untracked(() => {
+                    options.logFn(event);
+                });
+            }, { injector: context.deps.injector });
+        },
+    });
+};
+/** A query feature that can be used to handle errors */
+const withErrorHandling = (options) => {
+    return createQueryFeature({
+        type: QueryFeatureType.WITH_ERROR_HANDLING,
+        fn: (context) => {
+            nestedEffect(() => {
+                const error = context.state.error();
+                if (error === null)
+                    return;
+                untracked(() => {
+                    options.handler(error);
+                });
+            }, { injector: context.deps.injector });
+        },
+    });
+};
+/** A query feature that can be used to handle successful responses */
+const withSuccessHandling = (options) => {
+    return createQueryFeature({
+        type: QueryFeatureType.WITH_SUCCESS_HANDLING,
+        fn: (context) => {
+            nestedEffect(() => {
+                const response = context.state.response();
+                if (response === null)
+                    return;
+                untracked(() => {
+                    options.handler(response);
+                });
+            }, { injector: context.deps.injector });
+        },
+    });
+};
+/**
+ * A query feature that will automatically execute the query when any of the provided signals change
+ * @throws If the query is not eligible for auto execution (e.g. a POST request)
+ * @throws If the query has the `onlyManualExecution` query config flag set and `ignoreOnlyManualExecution` is not set
+ */
+const withAutoRefresh = (options) => {
+    return createQueryFeature({
+        type: QueryFeatureType.WITH_AUTO_REFRESH,
+        fn: (context) => {
+            if (!context.flags.shouldAutoExecuteMethod) {
+                throw withAutoRefreshUsedOnUnsupportedHttpMethod(context.flags.method);
+            }
+            if (context.flags.onlyManualExecution && !options.ignoreOnlyManualExecution) {
+                throw withAutoRefreshUsedInManualQuery();
+            }
+            nestedEffect(() => {
+                for (const signal of options.onSignalChanges) {
+                    signal();
+                }
+                untracked(() => {
+                    const args = context.state.args();
+                    // Don't start polling if the query doesn't have args.
+                    // It should have args because a withArgs feature is present.
+                    if (args === null && context.flags.hasWithArgsFeature)
+                        return;
+                    context.execute({ args });
+                });
+            }, { injector: context.deps.injector });
+        },
+    });
+};
+const withResponseUpdate = (options) => {
+    return createQueryFeature({
+        type: QueryFeatureType.WITH_RESPONSE_UPDATE,
+        fn: (context) => {
+            nestedEffect(() => {
+                const currentResponse = untracked(() => context.state.response());
+                const response = options.updater({ currentResponse });
+                if (response === null)
+                    return;
+                untracked(() => {
+                    context.state.response.set(response);
+                });
+            }, { injector: context.deps.injector });
+        },
+    });
+};
+
 const setupQueryState = (options) => {
-    const response = signal(null);
-    const args = signal(null);
-    const latestHttpEvent = signal(null);
-    const error = signal(null);
-    const loading = signal(null);
-    const lastTimeExecutedAt = signal(null);
-    const request = signal(null);
+    const response = signal(null, ...(ngDevMode ? [{ debugName: "response" }] : []));
+    const args = signal(null, ...(ngDevMode ? [{ debugName: "args" }] : []));
+    const latestHttpEvent = signal(null, ...(ngDevMode ? [{ debugName: "latestHttpEvent" }] : []));
+    const error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    const loading = signal(null, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    const lastTimeExecutedAt = signal(null, ...(ngDevMode ? [{ debugName: "lastTimeExecutedAt" }] : []));
+    const request = signal(null, ...(ngDevMode ? [{ debugName: "request" }] : []));
     const executionState = computed(() => {
         const currentResponse = response();
         const currentError = error();
@@ -1437,7 +1647,7 @@ const setupQueryState = (options) => {
         else {
             return null;
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "executionState" }] : []));
     const state = {
         response,
         args,
@@ -1457,7 +1667,7 @@ const createQuerySnapshotFn = (options) => {
     const { state, deps } = options;
     const snapshotFn = () => {
         const snapshotState = setupQueryState({});
-        const isAlive = signal(true);
+        const isAlive = signal(true, ...(ngDevMode ? [{ debugName: "isAlive" }] : []));
         const killEffectRef = effect(() => {
             const currentLoading = state.loading();
             const currentError = state.error();
@@ -1480,7 +1690,7 @@ const createQuerySnapshotFn = (options) => {
                 killEffectRef.destroy();
                 isAlive.set(false);
             });
-        }, { injector: deps.injector });
+        }, ...(ngDevMode ? [{ debugName: "killEffectRef", injector: deps.injector }] : [{ injector: deps.injector }]));
         const snapshot = {
             args: snapshotState.args.asReadonly(),
             response: snapshotState.response.asReadonly(),
@@ -1633,7 +1843,7 @@ const shouldRetryRequest = (options) => {
 };
 const getQueryFeatureUsage = (options) => {
     const { creator, features, queryConfig, creatorInternals } = options;
-    const hasWithArgsFeature = features.some((f) => f.type == "withArgs" /* QueryFeatureType.WithArgs */);
+    const hasWithArgsFeature = features.some((f) => f.type == QueryFeatureType.WITH_ARGS);
     const shouldAutoExecuteMethod = isCreateGqlQueryOptions(options)
         ? shouldAutoExecuteGqlQuery(options.creatorInternals.method)
         : shouldAutoExecuteQuery(options.creatorInternals.method);
@@ -1813,18 +2023,18 @@ const SPEED_BUFFER_TIME_IN_MS = 2000;
 const createHttpRequest = (options) => {
     let currentStreamSubscription = Subscription.EMPTY;
     const { args, clientOptions, dependencies } = options;
-    const currentEvent = signal(null);
-    const loading = signal(null);
-    const error = signal(null);
-    const response = signal(null);
-    const lastLoadEventTime = signal(0);
-    const lastLoadEventAmount = signal(0);
-    const lastExecuteTime = signal(0);
-    const expiresIn = signal(null);
+    const currentEvent = signal(null, ...(ngDevMode ? [{ debugName: "currentEvent" }] : []));
+    const loading = signal(null, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    const error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    const response = signal(null, ...(ngDevMode ? [{ debugName: "response" }] : []));
+    const lastLoadEventTime = signal(0, ...(ngDevMode ? [{ debugName: "lastLoadEventTime" }] : []));
+    const lastLoadEventAmount = signal(0, ...(ngDevMode ? [{ debugName: "lastLoadEventAmount" }] : []));
+    const lastExecuteTime = signal(0, ...(ngDevMode ? [{ debugName: "lastExecuteTime" }] : []));
+    const expiresIn = signal(null, ...(ngDevMode ? [{ debugName: "expiresIn" }] : []));
     const isStale = computed(() => {
         const expiresInTs = expiresIn();
         return expiresInTs === null || expiresInTs < Date.now();
-    });
+    }, ...(ngDevMode ? [{ debugName: "isStale" }] : []));
     const stream = dependencies.httpClient
         .request(options.method, options.fullPath, {
         observe: 'events',
@@ -1951,172 +2161,6 @@ const createHttpRequest = (options) => {
     return httpRequest;
 };
 
-const createQueryFeature = (config) => {
-    return config;
-};
-/**
- * A query feature that allows you to set the arguments of the query.
- * The arguments are read within a computed function, so you can use reactive values.
- *
- * To set the arguments to `null`, return the symbol `CLEAR_QUERY_ARGS`.
- * If you instead return `null`, the arguments won't change.
- *
- * Changing arguments will automatically trigger a new execution of the query if it is eligible for auto execution (e.g. a GET request).
- */
-const withArgs = (args) => {
-    return createQueryFeature({
-        type: "withArgs" /* QueryFeatureType.WithArgs */,
-        fn: (context) => {
-            const currArgs = computed(() => args());
-            nestedEffect(() => {
-                const currArgsNow = currArgs();
-                if (currArgsNow === null)
-                    return;
-                untracked(() => {
-                    if (currArgsNow === CLEAR_QUERY_ARGS) {
-                        context.state.args.set(null);
-                        return;
-                    }
-                    context.state.args.set(currArgsNow);
-                    if (context.flags.shouldAutoExecute)
-                        context.execute({ args: currArgsNow });
-                });
-            }, { injector: context.deps.injector });
-        },
-    });
-};
-/**
- * A query feature that will automatically execute the query at a given interval.
- * The interval will be cleared when the query is destroyed.
- * The interval will be reset when the arguments of the query change.
- *
- * @throws If the query is not eligible for auto execution (e.g. a POST request)
- */
-const withPolling = (options) => {
-    return createQueryFeature({
-        type: "withPolling" /* QueryFeatureType.WithPolling */,
-        fn: (context) => {
-            if (!context.flags.shouldAutoExecuteMethod) {
-                throw withPollingUsedOnUnsupportedHttpMethod(context.flags.method);
-            }
-            let intervalId = null;
-            nestedEffect(() => {
-                const args = context.state.args();
-                untracked(() => {
-                    if (intervalId !== null)
-                        clearInterval(intervalId);
-                    // Don't start polling if the query doesn't have args.
-                    // It should have args because a withArgs feature is present.
-                    if (args === null && context.flags.hasWithArgsFeature)
-                        return;
-                    if (options.executeInitially) {
-                        context.execute({ args });
-                    }
-                    intervalId = window.setInterval(() => {
-                        context.execute({ args });
-                    }, options.interval);
-                });
-            }, { injector: context.deps.injector });
-            context.deps.destroyRef.onDestroy(() => intervalId !== null && clearInterval(intervalId));
-        },
-    });
-};
-/** A query feature that can be used to log the latest http event */
-const withLogging = (options) => {
-    return createQueryFeature({
-        type: "withLogging" /* QueryFeatureType.WithLogging */,
-        fn: (context) => {
-            nestedEffect(() => {
-                const event = context.state.latestHttpEvent();
-                if (event === null)
-                    return;
-                untracked(() => {
-                    options.logFn(event);
-                });
-            }, { injector: context.deps.injector });
-        },
-    });
-};
-/** A query feature that can be used to handle errors */
-const withErrorHandling = (options) => {
-    return createQueryFeature({
-        type: "withErrorHandling" /* QueryFeatureType.WithErrorHandling */,
-        fn: (context) => {
-            nestedEffect(() => {
-                const error = context.state.error();
-                if (error === null)
-                    return;
-                untracked(() => {
-                    options.handler(error);
-                });
-            }, { injector: context.deps.injector });
-        },
-    });
-};
-/** A query feature that can be used to handle successful responses */
-const withSuccessHandling = (options) => {
-    return createQueryFeature({
-        type: "withSuccessHandling" /* QueryFeatureType.WithSuccessHandling */,
-        fn: (context) => {
-            nestedEffect(() => {
-                const response = context.state.response();
-                if (response === null)
-                    return;
-                untracked(() => {
-                    options.handler(response);
-                });
-            }, { injector: context.deps.injector });
-        },
-    });
-};
-/**
- * A query feature that will automatically execute the query when any of the provided signals change
- * @throws If the query is not eligible for auto execution (e.g. a POST request)
- * @throws If the query has the `onlyManualExecution` query config flag set and `ignoreOnlyManualExecution` is not set
- */
-const withAutoRefresh = (options) => {
-    return createQueryFeature({
-        type: "withAutoRefresh" /* QueryFeatureType.WithAutoRefresh */,
-        fn: (context) => {
-            if (!context.flags.shouldAutoExecuteMethod) {
-                throw withAutoRefreshUsedOnUnsupportedHttpMethod(context.flags.method);
-            }
-            if (context.flags.onlyManualExecution && !options.ignoreOnlyManualExecution) {
-                throw withAutoRefreshUsedInManualQuery();
-            }
-            nestedEffect(() => {
-                for (const signal of options.onSignalChanges) {
-                    signal();
-                }
-                untracked(() => {
-                    const args = context.state.args();
-                    // Don't start polling if the query doesn't have args.
-                    // It should have args because a withArgs feature is present.
-                    if (args === null && context.flags.hasWithArgsFeature)
-                        return;
-                    context.execute({ args });
-                });
-            }, { injector: context.deps.injector });
-        },
-    });
-};
-const withResponseUpdate = (options) => {
-    return createQueryFeature({
-        type: "withResponseUpdate" /* QueryFeatureType.WithResponseUpdate */,
-        fn: (context) => {
-            nestedEffect(() => {
-                const currentResponse = untracked(() => context.state.response());
-                const response = options.updater({ currentResponse });
-                if (response === null)
-                    return;
-                untracked(() => {
-                    context.state.response.set(response);
-                });
-            }, { injector: context.deps.injector });
-        },
-    });
-};
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /** Transforms an array of arrays into a single array and filters out `null` values. */
 const transformArrayResponse = (responses) => responses.filter((r) => !!r).flatMap((r) => r);
@@ -2129,11 +2173,11 @@ const createQueryStack = (options) => {
         return { queries, lastQuery };
     }, transform, } = options ?? {};
     const injector = inject(Injector);
-    const queries = signal([]);
-    const lastQuery = signal(null);
-    const firstQuery = computed(() => queries()[0] ?? null);
-    const hasWithArgsFeature = features.some((f) => f.type == "withArgs" /* QueryFeatureType.WithArgs */);
-    const hasWithOptimisticUpdateFeature = features.some((f) => f.type == "withResponseUpdate" /* QueryFeatureType.WithResponseUpdate */);
+    const queries = signal([], ...(ngDevMode ? [{ debugName: "queries" }] : []));
+    const lastQuery = signal(null, ...(ngDevMode ? [{ debugName: "lastQuery" }] : []));
+    const firstQuery = computed(() => queries()[0] ?? null, ...(ngDevMode ? [{ debugName: "firstQuery" }] : []));
+    const hasWithArgsFeature = features.some((f) => f.type == QueryFeatureType.WITH_ARGS);
+    const hasWithOptimisticUpdateFeature = features.some((f) => f.type == QueryFeatureType.WITH_RESPONSE_UPDATE);
     if (hasWithArgsFeature) {
         throw queryStackWithArgsUsed();
     }
@@ -2173,10 +2217,10 @@ const createQueryStack = (options) => {
         });
         return result;
     };
-    const loading = computed(() => queries().some((q) => q.loading()));
+    const loading = computed(() => queries().some((q) => q.loading()), ...(ngDevMode ? [{ debugName: "loading" }] : []));
     const error = computed(() => queries()
         .map((q) => q.error())
-        .find((e) => e !== null) ?? null);
+        .find((e) => e !== null) ?? null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     const response = computed(() => {
         const responses = queries().map((q) => q.response());
         return transform?.(responses) ?? responses;
@@ -2266,12 +2310,12 @@ const fakePaginationAdapter = (totalHits = 10) => {
 };
 const createPagedQueryStack = (options) => {
     const { responseNormalizer, queryCreator, features } = options;
-    const currentPageArgs = signal(null);
-    const initialPage = signal(options.initialPage ?? 1);
-    const loadedMinPage = signal(initialPage());
-    const loadedMaxPage = signal(initialPage());
-    const lastResetTimestamp = signal(Date.now());
-    const pageDirection = signal('next');
+    const currentPageArgs = signal(null, ...(ngDevMode ? [{ debugName: "currentPageArgs" }] : []));
+    const initialPage = signal(options.initialPage ?? 1, ...(ngDevMode ? [{ debugName: "initialPage" }] : []));
+    const loadedMinPage = signal(initialPage(), ...(ngDevMode ? [{ debugName: "loadedMinPage" }] : []));
+    const loadedMaxPage = signal(initialPage(), ...(ngDevMode ? [{ debugName: "loadedMaxPage" }] : []));
+    const lastResetTimestamp = signal(Date.now(), ...(ngDevMode ? [{ debugName: "lastResetTimestamp" }] : []));
+    const pageDirection = signal('next', ...(ngDevMode ? [{ debugName: "pageDirection" }] : []));
     const stack = createQueryStack({
         args: () => null,
         queryCreator,
@@ -2310,22 +2354,22 @@ const createPagedQueryStack = (options) => {
         if (!res)
             return null;
         return responseNormalizer(res, all);
-    });
+    }, ...(ngDevMode ? [{ debugName: "maxPagination" }] : []));
     const minPagination = computed(() => {
         const res = stack.firstQuery()?.response();
         const all = stack.response();
         if (!res)
             return null;
         return responseNormalizer(res, all);
-    });
+    }, ...(ngDevMode ? [{ debugName: "minPagination" }] : []));
     const isFirstPageLoaded = computed(() => {
         const min = minPagination();
         return min ? loadedMinPage() === min.currentPage : false;
-    });
+    }, ...(ngDevMode ? [{ debugName: "isFirstPageLoaded" }] : []));
     const isLastPageLoaded = computed(() => {
         const max = maxPagination();
         return max ? loadedMaxPage() === max.totalPages : false;
-    });
+    }, ...(ngDevMode ? [{ debugName: "isLastPageLoaded" }] : []));
     const fetchPreviousPage = () => {
         const page = loadedMinPage() - 1;
         const allResponses = stack.response();
@@ -2401,18 +2445,18 @@ const createPagedQueryStack = (options) => {
         if (!currentMinPagination)
             return false;
         return loadedMinPage() > 1;
-    });
+    }, ...(ngDevMode ? [{ debugName: "canFetchPreviousPage" }] : []));
     const canFetchNextPage = computed(() => {
         const currentMaxPagination = maxPagination();
         return currentMaxPagination ? loadedMaxPage() < currentMaxPagination.totalPages : false;
-    });
+    }, ...(ngDevMode ? [{ debugName: "canFetchNextPage" }] : []));
     const items = computed(() => {
         const res = stack.response();
         return res.map((r) => responseNormalizer(r, res).items).flat();
-    });
+    }, ...(ngDevMode ? [{ debugName: "items" }] : []));
     const isFirstLoad = computed(() => {
         return stack.queries().length === 1 && !!stack.lastQuery()?.loading();
-    });
+    }, ...(ngDevMode ? [{ debugName: "isFirstLoad" }] : []));
     const execute = (options) => {
         const whereFn = options?.where;
         if (whereFn) {
@@ -2532,7 +2576,7 @@ const setupQueryExecuteState = () => {
         previousKey: signal(false),
     };
 };
-const syncSignal = (signal, target) => {
+const bindSignalToTarget = (signal, target) => {
     target.set(signal());
     return nestedEffect(() => {
         const val = signal();
@@ -2561,10 +2605,10 @@ const queryExecute = (options) => {
     executeState.previousKey.set(key);
     const responseSignal = transformResponse ? computed(() => transformResponse(request.response())) : request.response;
     runInInjectionContext(deps.injector, () => {
-        const responseRef = syncSignal(responseSignal, state.response);
-        const loadingRef = syncSignal(request.loading, state.loading);
-        const errorRef = syncSignal(request.error, state.error);
-        const latestHttpEventRef = syncSignal(request.currentEvent, state.latestHttpEvent);
+        const responseRef = bindSignalToTarget(responseSignal, state.response);
+        const loadingRef = bindSignalToTarget(request.loading, state.loading);
+        const errorRef = bindSignalToTarget(request.error, state.error);
+        const latestHttpEventRef = bindSignalToTarget(request.currentEvent, state.latestHttpEvent);
         executeState.effectRefs.push(responseRef, loadingRef, errorRef, latestHttpEventRef);
     });
     state.lastTimeExecutedAt.set(Date.now());
@@ -3217,7 +3261,7 @@ class LegacyQuery {
                     });
                 }
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "storeSyncEffect" }] : []));
         /**
          * @internal
          */
@@ -3384,7 +3428,7 @@ class LegacyQueryCreator {
                                 legacyQuery.destroy();
                                 destroyEffect.destroy();
                             }
-                        });
+                        }, ...(ngDevMode ? [{ debugName: "destroyEffect" }] : []));
                     }
                     return legacyQuery;
                 });
@@ -3396,7 +3440,7 @@ class LegacyQueryCreator {
             return subject;
         };
         this.createSignal = (initialValue, config) => {
-            const _signal = signal(initialValue ?? null);
+            const _signal = signal(initialValue ?? null, ...(ngDevMode ? [{ debugName: "_signal" }] : []));
             addQueryContainerHandling(toObservable(_signal), () => _signal(), config);
             return _signal;
         };
@@ -3584,10 +3628,10 @@ class ParseHttpErrorCodeToTitleDePipe {
     constructor() {
         this.transform = parseHttpErrorCodeToTitleDe;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ParseHttpErrorCodeToTitleDePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ParseHttpErrorCodeToTitleDePipe, isStandalone: true, name: "parseHttpErrorCodeToTitleDe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ParseHttpErrorCodeToTitleDePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: ParseHttpErrorCodeToTitleDePipe, isStandalone: true, name: "parseHttpErrorCodeToTitleDe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ParseHttpErrorCodeToTitleDePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ParseHttpErrorCodeToTitleDePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'parseHttpErrorCodeToTitleDe',
@@ -3598,10 +3642,10 @@ class ParseHttpErrorCodeToMessageDePipe {
     constructor() {
         this.transform = parseHttpErrorCodeToMessageDe;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ParseHttpErrorCodeToMessageDePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ParseHttpErrorCodeToMessageDePipe, isStandalone: true, name: "parseHttpErrorCodeToMessageDe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ParseHttpErrorCodeToMessageDePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: ParseHttpErrorCodeToMessageDePipe, isStandalone: true, name: "parseHttpErrorCodeToMessageDe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ParseHttpErrorCodeToMessageDePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ParseHttpErrorCodeToMessageDePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'parseHttpErrorCodeToMessageDe',
@@ -3786,10 +3830,10 @@ class ParseHttpErrorCodeToTitleEnPipe {
     constructor() {
         this.transform = parseHttpErrorCodeToTitleEn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ParseHttpErrorCodeToTitleEnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ParseHttpErrorCodeToTitleEnPipe, isStandalone: true, name: "parseHttpErrorCodeToTitleEn" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ParseHttpErrorCodeToTitleEnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: ParseHttpErrorCodeToTitleEnPipe, isStandalone: true, name: "parseHttpErrorCodeToTitleEn" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ParseHttpErrorCodeToTitleEnPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ParseHttpErrorCodeToTitleEnPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'parseHttpErrorCodeToTitleEn',
@@ -3800,10 +3844,10 @@ class ParseHttpErrorCodeToMessageEnPipe {
     constructor() {
         this.transform = parseHttpErrorCodeToMessageEn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ParseHttpErrorCodeToMessageEnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: ParseHttpErrorCodeToMessageEnPipe, isStandalone: true, name: "parseHttpErrorCodeToMessageEn" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ParseHttpErrorCodeToMessageEnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: ParseHttpErrorCodeToMessageEnPipe, isStandalone: true, name: "parseHttpErrorCodeToMessageEn" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ParseHttpErrorCodeToMessageEnPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ParseHttpErrorCodeToMessageEnPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'parseHttpErrorCodeToMessageEn',
@@ -3811,11 +3855,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                 }]
         }] });
 
+// codes 1000-1999
+const WebSocketRuntimeErrorCode = {
+    // Web Socket Client
+    ROOM_NOT_JOINED: 1000,
+    MESSAGE_MALFORMED: 1001,
+};
 const roomNotJoined = (room) => {
-    return new RuntimeError(1000 /* WebSocketRuntimeErrorCode.ROOM_NOT_JOINED */, `Tried leaving the room "${room}" but it has not been joined.`);
+    return new RuntimeError(WebSocketRuntimeErrorCode.ROOM_NOT_JOINED, `Tried leaving the room "${room}" but it has not been joined.`);
 };
 const messageMalformed = () => {
-    return new RuntimeError(1001 /* WebSocketRuntimeErrorCode.MESSAGE_MALFORMED */, 'A message has been received but it is malformed (cannot be parsed as JSON).');
+    return new RuntimeError(WebSocketRuntimeErrorCode.MESSAGE_MALFORMED, 'A message has been received but it is malformed (cannot be parsed as JSON).');
 };
 
 const createWebSocketClient = (config) => {
@@ -3825,17 +3875,17 @@ const createWebSocketClient = (config) => {
         transports: config.transports,
     });
     const rooms = new Map();
-    const isConnected = signal(false);
+    const isConnected = signal(false, ...(ngDevMode ? [{ debugName: "isConnected" }] : []));
     const joinRoom = (room) => {
         const roomFn = typeof room === 'function' ? room : () => room;
         const pre = previousSignalValue(computed(() => roomFn()));
-        const roomData = signal(null);
+        const roomData = signal(null, ...(ngDevMode ? [{ debugName: "roomData" }] : []));
         const join = (name) => {
             socket.emit('join-room', name);
             const existingRoom = rooms.get(name);
             if (existingRoom)
                 return existingRoom;
-            const message = signal(null);
+            const message = signal(null, ...(ngDevMode ? [{ debugName: "message" }] : []));
             const newRoom = {
                 latestMessage: message,
             };
@@ -3941,9 +3991,12 @@ var index = /*#__PURE__*/Object.freeze({
     ParseHttpErrorCodeToMessageEnPipe: ParseHttpErrorCodeToMessageEnPipe,
     ParseHttpErrorCodeToTitleDePipe: ParseHttpErrorCodeToTitleDePipe,
     ParseHttpErrorCodeToTitleEnPipe: ParseHttpErrorCodeToTitleEnPipe,
+    QueryFeatureType: QueryFeatureType,
+    QueryRuntimeErrorCode: QueryRuntimeErrorCode,
     SPEED_BUFFER_TIME_IN_MS: SPEED_BUFFER_TIME_IN_MS,
     applyQueryFeatures: applyQueryFeatures,
     bearerExpiresInPropertyNotNumber: bearerExpiresInPropertyNotNumber,
+    bindSignalToTarget: bindSignalToTarget,
     buildQueryCacheKey: buildQueryCacheKey,
     circularQueryDependencyChecker: circularQueryDependencyChecker,
     cleanupPreviousExecute: cleanupPreviousExecute,
@@ -3972,6 +4025,7 @@ var index = /*#__PURE__*/Object.freeze({
     createQueryClientConfig: createQueryClientConfig,
     createQueryCreator: createQueryCreator,
     createQueryErrorResponse: createQueryErrorResponse,
+    createQueryFeature: createQueryFeature,
     createQueryObject: createQueryObject,
     createQueryRepository: createQueryRepository,
     createQuerySnapshotFn: createQuerySnapshotFn,
@@ -4032,6 +4086,7 @@ var index = /*#__PURE__*/Object.freeze({
     silenceMissingWithArgsFeatureErrorUsedButWithArgsPresent: silenceMissingWithArgsFeatureErrorUsedButWithArgsPresent,
     splitQueryConfig: splitQueryConfig,
     transformArrayResponse: transformArrayResponse,
+    transformExecStateToQueryState: transformExecStateToQueryState,
     transformPaginatedResponse: transformPaginatedResponse,
     unableToDecryptBearerToken: unableToDecryptBearerToken,
     uncacheableRequestHasAllowCacheParam: uncacheableRequestHasAllowCacheParam,
@@ -4181,7 +4236,7 @@ const createQueryCollectionSubject = (queryMap, config) => {
 };
 const createQueryCollectionSignal = (queryMap, config) => {
     assertInInjectionContext(createQueryCollectionSignal);
-    const _signal = signal(null);
+    const _signal = signal(null, ...(ngDevMode ? [{ debugName: "_signal" }] : []));
     addQueryContainerHandling(toObservable(_signal).pipe(map((s) => s?.query ?? null)), () => _signal()?.query ?? null, config);
     return _signal;
 };
@@ -4814,6 +4869,9 @@ class BearerAuthProvider {
         this._config.refreshConfig.cookieEnabled = false;
         this._deleteCookie();
     }
+    forceRefresh() {
+        return this._refreshQuery();
+    }
     _setCookie() {
         if (!this._config.refreshConfig?.cookieName || !this.tokens.refreshToken)
             return;
@@ -4919,8 +4977,8 @@ class QueryDirective {
             scope: null,
             query: null,
         };
-        this.query = input.required({ alias: 'etQuery' });
-        this.cache = input(false, { alias: 'etQueryCache' });
+        this.query = input.required(...(ngDevMode ? [{ debugName: "query", alias: 'etQuery' }] : [{ alias: 'etQuery' }]));
+        this.cache = input(false, ...(ngDevMode ? [{ debugName: "cache", alias: 'etQueryCache' }] : [{ alias: 'etQueryCache' }]));
         this.queryState = queryStateSignal(this.query);
         inject(ViewContainerRef).createEmbeddedView(inject(TemplateRef), this._viewContext);
         effect(() => {
@@ -4981,10 +5039,10 @@ class QueryDirective {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: { classPropertyName: "query", publicName: "etQuery", isSignal: true, isRequired: true, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "etQueryCache", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.4", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: { classPropertyName: "query", publicName: "etQuery", isSignal: true, isRequired: true, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "etQueryCache", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: QueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: QueryDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etQuery]',
@@ -5288,10 +5346,10 @@ class InfinityQueryDirective {
         this._viewContext.currentQuery = null;
         this._data$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", 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: "20.3.4", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.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: "20.0.3", ngImport: i0, type: InfinityQueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etInfinityQuery]',
@@ -5343,10 +5401,10 @@ class InfinityQueryTriggerDirective {
         });
         this._observer.observe(this._elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", 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: "20.3.4", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etInfinityQueryTrigger], et-infinity-query-trigger',
@@ -5370,10 +5428,10 @@ class QueryShortNamePipe {
         }
         return route;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.3", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: QueryShortNamePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: QueryShortNamePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'queryShortName', standalone: true }]
         }] });
@@ -5395,19 +5453,19 @@ class QueryDevtoolsComponent {
         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.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.isTranslucent = signal(false, ...(ngDevMode ? [{ debugName: "isTranslucent" }] : []));
+        this.snapLayout = signal('full', ...(ngDevMode ? [{ debugName: "snapLayout" }] : []));
+        this.queryListMode = signal('live', ...(ngDevMode ? [{ debugName: "queryListMode" }] : []));
+        this.viewMode = signal('query', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.showResponse = signal(false, ...(ngDevMode ? [{ debugName: "showResponse" }] : []));
+        this.showRawResponse = signal(false, ...(ngDevMode ? [{ debugName: "showRawResponse" }] : []));
+        this.showQueryConfig = signal(false, ...(ngDevMode ? [{ debugName: "showQueryConfig" }] : []));
+        this.showEntityStoreValue = signal(false, ...(ngDevMode ? [{ debugName: "showEntityStoreValue" }] : []));
+        this.showArguments = signal(false, ...(ngDevMode ? [{ debugName: "showArguments" }] : []));
         this.selectedClientIdCtrl = new FormControl(0);
         this.selectedClientId = toSignal(this.selectedClientIdCtrl.valueChanges.pipe(startWith(this.selectedClientIdCtrl.value)));
-        this.selectedQueryId = signal(null);
+        this.selectedQueryId = signal(null, ...(ngDevMode ? [{ debugName: "selectedQueryId" }] : []));
         this.selectedClientConfig = computed(() => {
             if (this.queryClientConfigs.length === 1) {
                 return this.queryClientConfigs[0];
@@ -5418,11 +5476,11 @@ class QueryDevtoolsComponent {
                 return this.queryClientConfigs[0];
             }
             return cfg;
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedClientConfig" }] : []));
         this.queryStore = computed(() => {
             const config = this.selectedClientConfig();
             return config.client._store;
-        });
+        }, ...(ngDevMode ? [{ debugName: "queryStore" }] : []));
         this.queryStore$ = toObservable(this.queryStore);
         this._queries$ = new BehaviorSubject([]);
         this.queries = toSignal(this._queries$);
@@ -5436,14 +5494,14 @@ class QueryDevtoolsComponent {
                 return this.queries()?.find((q) => q._id === id) ?? null;
             }
             return this.queryHistory$.getValue()?.find((q) => q._id === id) ?? null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedQuery" }] : []));
         this.selectedQuery$ = toObservable(this.selectedQuery);
         this.selectedQueryEntityStore = computed(() => {
             const query = this.selectedQuery();
             if (!query)
                 return null;
             return query.store;
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedQueryEntityStore" }] : []));
         this.selectedQueryEntityStore$ = toObservable(this.selectedQueryEntityStore);
         this.selectedQueryEntityStoreValue$ = this.selectedQueryEntityStore$.pipe(switchMap((s) => s?._change$.pipe(startWith(''), map(() => {
             if (!s._dictionary)
@@ -5481,7 +5539,7 @@ class QueryDevtoolsComponent {
             return {
                 ...sharedCfg,
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "stringifiedQueryConfig" }] : []));
         this.authProvider = toSignal(toObservable(this.selectedClientConfig).pipe(switchMap((c) => c.client.authProvider$)));
         this.authProviderDetails = computed(() => {
             const provider = this.authProvider();
@@ -5543,7 +5601,7 @@ class QueryDevtoolsComponent {
                     config: {},
                 };
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "authProviderDetails" }] : []));
         this.trackByClient = (_, { client }) => client.config.baseRoute;
         this.trackByQuery = (_, { _id }) => _id;
         this.selectedClientIdCtrl.valueChanges
@@ -5664,10 +5722,10 @@ class QueryDevtoolsComponent {
     clearQueryHistory() {
         this.queryHistory$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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: "20.3.4", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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: "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: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-query-devtools', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
                         class: 'et-query-devtools',