@ethlete/query 5.8.0 → 5.9.0

package/fesm2022/ethlete-query.mjs

@@ -1,11 +1,11 @@
-import * as i1$1 from '@ethlete/core';
-import { createDestroy, getCookie, setCookie, deleteCookie, nextFrame, DelayableDirective, RouterStateService, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
-import { Observable, takeUntil, startWith, pairwise, tap, of, switchMap, BehaviorSubject, Subject, fromEvent, take, timer, filter, takeWhile, map, shareReplay, ReplaySubject, interval, skip, combineLatest, withLatestFrom, debounceTime, merge } from 'rxjs';
+import * as i1 from '@ethlete/core';
+import { createDestroy, getCookie, setCookie, deleteCookie, DelayableDirective, nextFrame, RouterStateService, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
+import { Observable, takeUntil, startWith, pairwise, tap, switchMap, of, BehaviorSubject, Subject, fromEvent, timer, take, filter, takeWhile, map, shareReplay, ReplaySubject, combineLatest, interval, skip, withLatestFrom, debounceTime, merge } from 'rxjs';
 import * as i0 from '@angular/core';
-import { assertInInjectionContext, Injector, inject, computed, signal, isDevMode, untracked, Pipe, InjectionToken, ChangeDetectorRef, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, ViewContainerRef, ErrorHandler, Directive, Input, ElementRef, NgZone } from '@angular/core';
+import { assertInInjectionContext, inject, Injector, computed, signal, isDevMode, untracked, TemplateRef, ViewContainerRef, ErrorHandler, ChangeDetectorRef, Directive, Input, InjectionToken, ElementRef, Pipe, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, NgZone } from '@angular/core';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { AsyncPipe, JsonPipe, NgClass } from '@angular/common';
-import * as i1 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormGroup } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -1369,25 +1369,49 @@ class Query {
             }
         }
         this._updateState({ type: "LOADING" /* QueryStateType.Loading */, meta });
-        const method = computeQueryMethod({ config: queryConfig, client: this._client });
-        const body = computeQueryBody({ config: queryConfig, client: this._client, args: this._arguments, method });
-        const headers = computeQueryHeaders({ client: this._client, config: queryConfig, args: this._arguments });
         if (this._isInMockMode) {
-            this._mockRequest(headers, meta, options);
+            this._mockRequest({}, meta, options);
         }
         else {
-            request({
-                urlWithParams: this._routeWithParams,
-                method,
-                body,
-                headers,
-                reportProgress: queryConfig.reportProgress,
-                responseType: queryConfig.responseType,
-                withCredentials: queryConfig.withCredentials,
-                cacheAdapter: this._client.config.request?.cacheAdapter,
-                retryFn: this._client.config.request?.retryFn,
-            })
-                .pipe(tap((state) => this._updateEntityState(state, meta, options)), takeUntil(this._onAbort$))
+            let goSignal = of(true);
+            if (authProvider &&
+                isBearerAuthProvider(authProvider) &&
+                queryConfig.secure &&
+                !isQueryStateSuccess(authProvider.currentRefreshQuery?.rawState)) {
+                // On page load the query might be executed before the auth provider has been initialized.
+                // In this case we need to wait for the auth provider to be ready before we can execute the query.
+                goSignal = combineLatest([
+                    // The tokens might get set without a refresh query being created (e.g.) directly after login.
+                    authProvider.currentRefreshQuery$.pipe(switchQueryState(), takeUntilResponse()),
+                    authProvider.tokens$.pipe(take(1)),
+                ]).pipe(takeUntil(this._onAbort$), filter(([state, tokens]) => {
+                    if (state) {
+                        return !isQueryStateLoading(state);
+                    }
+                    return !!tokens;
+                }), tap(([state]) => {
+                    if (isQueryStateFailure(state)) {
+                        this._updateEntityState({ type: 'failure', error: state.error, headers: {} }, meta, options);
+                    }
+                }), map(() => true), take(1));
+            }
+            goSignal
+                .pipe(switchMap(() => {
+                const method = computeQueryMethod({ config: queryConfig, client: this._client });
+                const body = computeQueryBody({ config: queryConfig, client: this._client, args: this._arguments, method });
+                const headers = computeQueryHeaders({ client: this._client, config: queryConfig, args: this._arguments });
+                return request({
+                    urlWithParams: this._routeWithParams,
+                    method,
+                    body,
+                    headers,
+                    reportProgress: queryConfig.reportProgress,
+                    responseType: queryConfig.responseType,
+                    withCredentials: queryConfig.withCredentials,
+                    cacheAdapter: this._client.config.request?.cacheAdapter,
+                    retryFn: this._client.config.request?.retryFn,
+                }).pipe(tap((state) => this._updateEntityState(state, meta, options)), takeUntil(this._onAbort$));
+            }))
                 .subscribe();
         }
         return this;
@@ -1815,253 +1839,6 @@ const isClassValidatorError = (error) => {
     return typeof error === 'object' && error !== null && 'statusCode' in error && 'message' in error && 'error' in error;
 };
 
-class QueryShortNamePipe {
-    transform(value) {
-        const route = value._routeWithParams;
-        if (typeof route === 'string') {
-            // given an url that looks like this: https://api.github.com/repos/EladBezalel/etimo-achievements or https://api.github.com/repos/EladBezalel/etimo-achievements?test=1&test2=2
-            // we want to extract the last 3 parts of the url, so we get: repos/EladBezalel/etimo-achievements
-            const parts = route.split('/');
-            if (parts.length > 3) {
-                return `.../${parts.slice(parts.length - 3).join('/')}`;
-            }
-            return route;
-        }
-        console.log(route);
-        return route;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.4", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryShortNamePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'queryShortName', standalone: true }]
-        }] });
-
-const QUERY_CLIENT_DEVTOOLS_TOKEN = new InjectionToken('QUERY_CLIENT_DEVTOOLS_TOKEN');
-const provideQueryClientForDevtools = (queryClient) => {
-    if (!isDevMode()) {
-        console.warn('You are using the Query Devtools in production mode. This increases the size of your bundle and should only be used for development purposes.');
-    }
-    return {
-        provide: QUERY_CLIENT_DEVTOOLS_TOKEN,
-        useValue: queryClient,
-        multi: true,
-    };
-};
-
-class QueryDevtoolsComponent {
-    constructor() {
-        this._cdr = inject(ChangeDetectorRef);
-        this._destroy$ = createDestroy();
-        this.queryClientConfigs = inject(QUERY_CLIENT_DEVTOOLS_TOKEN);
-        this.isOpen = signal(false);
-        this.isTranslucent = signal(false);
-        this.snapLayout = signal('full');
-        this.queryListMode = signal('live');
-        this.showResponse = signal(false);
-        this.showRawResponse = signal(false);
-        this.showQueryConfig = signal(false);
-        this.showEntityStoreValue = signal(false);
-        this.showArguments = signal(false);
-        this.selectedClientIdCtrl = new FormControl(0);
-        this.selectedClientId = toSignal(this.selectedClientIdCtrl.valueChanges.pipe(startWith(this.selectedClientIdCtrl.value)));
-        this.selectedQueryId = signal(null);
-        this.selectedClientConfig = computed(() => {
-            if (this.queryClientConfigs.length === 1) {
-                return this.queryClientConfigs[0];
-            }
-            const index = this.selectedClientId() ?? 0;
-            const cfg = this.queryClientConfigs[index];
-            if (!cfg) {
-                return this.queryClientConfigs[0];
-            }
-            return cfg;
-        });
-        this.queryStore = computed(() => {
-            const config = this.selectedClientConfig();
-            return config.client._store;
-        });
-        this.queryStore$ = toObservable(this.queryStore);
-        this._queries$ = new BehaviorSubject([]);
-        this.queries = toSignal(this._queries$);
-        this.selectedQuery = computed(() => {
-            const id = this.selectedQueryId();
-            const mode = this.queryListMode();
-            if (id === null || !mode) {
-                return null;
-            }
-            if (mode === 'live') {
-                return this.queries()?.find((q) => q._id === id) ?? null;
-            }
-            return this.queryHistory$.getValue()?.find((q) => q._id === id) ?? null;
-        });
-        this.selectedQuery$ = toObservable(this.selectedQuery);
-        this.selectedQueryEntityStore = computed(() => {
-            const query = this.selectedQuery();
-            if (!query)
-                return null;
-            return query.store;
-        });
-        this.selectedQueryEntityStore$ = toObservable(this.selectedQueryEntityStore);
-        this.selectedQueryEntityStoreValue$ = this.selectedQueryEntityStore$.pipe(switchMap((s) => s?._change$.pipe(startWith(''), map(() => {
-            if (!s._dictionary)
-                return null;
-            return Array.from(s._dictionary).reduce((obj, [key, value]) => {
-                obj[key] = value;
-                return obj;
-            }, {});
-        })) ?? of(null)));
-        this.queryHistory$ = new BehaviorSubject([]);
-        this.stringifiedQueryConfig = computed(() => {
-            const query = this.selectedQuery();
-            if (!query)
-                return null;
-            const cfg = query._queryConfig;
-            const route = typeof cfg.route === 'string' ? cfg.route : cfg.route ? cfg.route({}).replace(/undefined/g, ':param') : null;
-            const sharedCfg = {
-                method: cfg.method,
-                secure: cfg.secure,
-                route,
-                reportProgress: cfg.reportProgress,
-                responseType: cfg.responseType,
-                withCredentials: cfg.withCredentials,
-                autoRefreshOn: cfg.autoRefreshOn,
-                enableSmartPolling: cfg.enableSmartPolling,
-                hasEntityStore: !!cfg.entity,
-            };
-            if (isGqlQueryConfig(cfg)) {
-                return {
-                    ...sharedCfg,
-                    query: cfg.query,
-                    transferVia: cfg.transferVia,
-                };
-            }
-            return {
-                ...sharedCfg,
-            };
-        });
-        this.trackByClient = (_, { client }) => client.config.baseRoute;
-        this.trackByQuery = (_, { _id }) => _id;
-        this.selectedClientIdCtrl.valueChanges
-            .pipe(tap(() => this.clearQueryHistory()), takeUntil(this._destroy$))
-            .subscribe();
-        this.selectedQuery$
-            .pipe(switchMap((q) => q?._dependentsChanged$ ?? of(null)), tap(() => this._cdr.markForCheck()), takeUntilDestroyed())
-            .subscribe();
-        this.queryStore$
-            .pipe(switchMap((s) => s.storeChange$.pipe(startWith(''), map(() => s._store), tap((s) => {
-            untracked(() => {
-                this._queries$.next(Array.from(s.values()));
-            });
-        }), takeUntil(this._destroy$))))
-            .subscribe();
-        this.queryStore$
-            .pipe(switchMap((s) => s.queryCreated$.pipe(tap((query) => {
-            const currentHistory = this.queryHistory$.getValue();
-            if (!currentHistory)
-                return;
-            const currentHistoryClone = [...currentHistory];
-            if (!currentHistory.some((q) => q._id === query._id)) {
-                currentHistoryClone.unshift(query);
-            }
-            currentHistoryClone.splice(50);
-            this.queryHistory$.next(currentHistoryClone);
-        }), takeUntil(this._destroy$))))
-            .subscribe();
-        this._queries$
-            .pipe(tap((queries) => {
-            const currentHistory = this.queryHistory$.getValue();
-            if (!queries || !currentHistory)
-                return;
-            const currentHistoryClone = [...currentHistory];
-            for (const query of queries) {
-                if (!currentHistoryClone.some((q) => q._id === query._id)) {
-                    currentHistoryClone.unshift(query);
-                }
-            }
-            currentHistoryClone.splice(50);
-            this.queryHistory$.next(currentHistoryClone);
-        }), takeUntil(this._destroy$))
-            .subscribe();
-        effect(() => {
-            const devtoolConfig = {
-                isOpen: this.isOpen(),
-                isTranslucent: this.isTranslucent(),
-                snapLayout: this.snapLayout(),
-                showResponse: this.showResponse(),
-                showRawResponse: this.showRawResponse(),
-                showQueryConfig: this.showQueryConfig(),
-                showEntityStoreValue: this.showEntityStoreValue(),
-                showArguments: this.showArguments(),
-                selectedClientId: this.selectedClientId(),
-                selectedQueryPath: this.selectedQueryId(),
-                queryListMode: this.queryListMode(),
-            };
-            window.localStorage.setItem('ethlete:query:devtools', JSON.stringify(devtoolConfig));
-        }, { allowSignalWrites: true });
-        const initialConfig = window.localStorage.getItem('ethlete:query:devtools');
-        if (initialConfig) {
-            const parsed = JSON.parse(initialConfig);
-            this.isOpen.set(parsed.isOpen ?? false);
-            this.isTranslucent.set(parsed.isTranslucent ?? false);
-            this.snapLayout.set(parsed.snapLayout ?? 'full');
-            this.showResponse.set(parsed.showResponse ?? false);
-            this.showRawResponse.set(parsed.showRawResponse ?? false);
-            this.showQueryConfig.set(parsed.showQueryConfig ?? false);
-            this.showEntityStoreValue.set(parsed.showEntityStoreValue ?? false);
-            this.showArguments.set(parsed.showArguments ?? false);
-            this.selectedClientIdCtrl.setValue(parsed.selectedClientId ?? 0);
-            this.selectedQueryId.set(parsed.selectedQueryPath ?? null);
-            this.queryListMode.set(parsed.queryListMode ?? 'live');
-        }
-    }
-    toggleOpen() {
-        this.isOpen.set(!this.isOpen());
-    }
-    toggleTranslucent() {
-        this.isTranslucent.set(!this.isTranslucent());
-    }
-    toggleShowResponse() {
-        this.showResponse.set(!this.showResponse());
-        nextFrame(() => {
-            this._cdr.markForCheck();
-        });
-    }
-    toggleShowQueryConfig() {
-        this.showQueryConfig.set(!this.showQueryConfig());
-    }
-    toggleShowRawResponse() {
-        this.showRawResponse.set(!this.showRawResponse());
-    }
-    toggleShowEntityStoreValue() {
-        this.showEntityStoreValue.set(!this.showEntityStoreValue());
-    }
-    toggleShowArguments() {
-        this.showArguments.set(!this.showArguments());
-    }
-    selectSnapLayout(layout) {
-        this.snapLayout.set(layout);
-    }
-    selectQueryListMode(mode) {
-        this.queryListMode.set(mode);
-    }
-    selectQuery(query) {
-        this.selectedQueryId.set(query._id);
-    }
-    clearQueryHistory() {
-        this.queryHistory$.next([]);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.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\">Open 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\">Query browser</p>\n        <div class=\"et-qd-queries__actions\">\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' }\"\n            (click)=\"selectQueryListMode('live')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Live ({{ queries()?.length ?? 0 }})\n          </button>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' }\"\n            (click)=\"selectQueryListMode('history')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n          </button>\n          @if (queryListMode() === 'history') {\n            <div class=\"et-qd-queries__divider\"></div>\n            <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n          }\n        </div>\n\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 [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n                    <span> {{ query._queryConfig.method }}</span>\n                    <span> {{ query | queryShortName }}</span>\n                  </button>\n                </li>\n              }\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 [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n                    <span> {{ query._queryConfig.method }}</span>\n                    <span> {{ query | queryShortName }}</span>\n                  </button>\n                </li>\n              }\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      </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)}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999;all:unset;font-family:monospace}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid #3c424a;padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid #3c424a;margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid #3c424a;list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid #3c424a;background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;gap:2px}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'et-query-devtools', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
-                        class: 'et-query-devtools',
-                    }, imports: [AsyncPipe, JsonPipe, ReactiveFormsModule, NgClass, QueryShortNamePipe], template: "@if (!isOpen()) {\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Open 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\">Query browser</p>\n        <div class=\"et-qd-queries__actions\">\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' }\"\n            (click)=\"selectQueryListMode('live')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Live ({{ queries()?.length ?? 0 }})\n          </button>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' }\"\n            (click)=\"selectQueryListMode('history')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n          </button>\n          @if (queryListMode() === 'history') {\n            <div class=\"et-qd-queries__divider\"></div>\n            <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n          }\n        </div>\n\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 [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n                    <span> {{ query._queryConfig.method }}</span>\n                    <span> {{ query | queryShortName }}</span>\n                  </button>\n                </li>\n              }\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 [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n                    <span> {{ query._queryConfig.method }}</span>\n                    <span> {{ query | queryShortName }}</span>\n                  </button>\n                </li>\n              }\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      </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)}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999;all:unset;font-family:monospace}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid #3c424a;padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid #3c424a;margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid #3c424a;list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid #3c424a;background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;gap:2px}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"] }]
-        }], ctorParameters: () => [] });
-
 class QueryDirective {
     constructor() {
         this._mainTemplateRef = inject(TemplateRef);
@@ -2163,10 +1940,10 @@ class QueryDirective {
             this._viewContainerRef.createEmbeddedView(this._mainTemplateRef, this._viewContext);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: QueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2498,10 +2275,10 @@ class InfinityQueryDirective {
         this._viewContext.currentQuery = null;
         this._data$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }], exportAs: ["etInfinityQuery"], hostDirectives: [{ directive: i1$1.DelayableDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", 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: "17.2.4", ngImport: i0, type: InfinityQueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2554,10 +2331,10 @@ class InfinityQueryTriggerDirective {
         });
         this._observer.observe(this._elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2568,6 +2345,325 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 type: Input
             }] } });
 
+class QueryShortNamePipe {
+    transform(value) {
+        const route = value._routeWithParams;
+        if (typeof route === 'string') {
+            // given an url that looks like this: https://api.github.com/repos/EladBezalel/etimo-achievements or https://api.github.com/repos/EladBezalel/etimo-achievements?test=1&test2=2
+            // we want to extract the last 3 parts of the url, so we get: repos/EladBezalel/etimo-achievements
+            const parts = route.split('/');
+            if (parts.length > 3) {
+                return `.../${parts.slice(parts.length - 3).join('/')}`;
+            }
+            return route;
+        }
+        console.log(route);
+        return route;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: QueryShortNamePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'queryShortName', standalone: true }]
+        }] });
+
+const QUERY_CLIENT_DEVTOOLS_TOKEN = new InjectionToken('QUERY_CLIENT_DEVTOOLS_TOKEN');
+const provideQueryClientForDevtools = (queryClient) => {
+    if (!isDevMode()) {
+        console.warn('You are using the Query Devtools in production mode. This increases the size of your bundle and should only be used for development purposes.');
+    }
+    return {
+        provide: QUERY_CLIENT_DEVTOOLS_TOKEN,
+        useValue: queryClient,
+        multi: true,
+    };
+};
+
+class QueryDevtoolsComponent {
+    constructor() {
+        this._cdr = inject(ChangeDetectorRef);
+        this._destroy$ = createDestroy();
+        this.queryClientConfigs = inject(QUERY_CLIENT_DEVTOOLS_TOKEN);
+        this.isOpen = signal(false);
+        this.isTranslucent = signal(false);
+        this.snapLayout = signal('full');
+        this.queryListMode = signal('live');
+        this.viewMode = signal('query');
+        this.showResponse = signal(false);
+        this.showRawResponse = signal(false);
+        this.showQueryConfig = signal(false);
+        this.showEntityStoreValue = signal(false);
+        this.showArguments = signal(false);
+        this.selectedClientIdCtrl = new FormControl(0);
+        this.selectedClientId = toSignal(this.selectedClientIdCtrl.valueChanges.pipe(startWith(this.selectedClientIdCtrl.value)));
+        this.selectedQueryId = signal(null);
+        this.selectedClientConfig = computed(() => {
+            if (this.queryClientConfigs.length === 1) {
+                return this.queryClientConfigs[0];
+            }
+            const index = this.selectedClientId() ?? 0;
+            const cfg = this.queryClientConfigs[index];
+            if (!cfg) {
+                return this.queryClientConfigs[0];
+            }
+            return cfg;
+        });
+        this.queryStore = computed(() => {
+            const config = this.selectedClientConfig();
+            return config.client._store;
+        });
+        this.queryStore$ = toObservable(this.queryStore);
+        this._queries$ = new BehaviorSubject([]);
+        this.queries = toSignal(this._queries$);
+        this.selectedQuery = computed(() => {
+            const id = this.selectedQueryId();
+            const mode = this.queryListMode();
+            if (id === null || !mode) {
+                return null;
+            }
+            if (mode === 'live') {
+                return this.queries()?.find((q) => q._id === id) ?? null;
+            }
+            return this.queryHistory$.getValue()?.find((q) => q._id === id) ?? null;
+        });
+        this.selectedQuery$ = toObservable(this.selectedQuery);
+        this.selectedQueryEntityStore = computed(() => {
+            const query = this.selectedQuery();
+            if (!query)
+                return null;
+            return query.store;
+        });
+        this.selectedQueryEntityStore$ = toObservable(this.selectedQueryEntityStore);
+        this.selectedQueryEntityStoreValue$ = this.selectedQueryEntityStore$.pipe(switchMap((s) => s?._change$.pipe(startWith(''), map(() => {
+            if (!s._dictionary)
+                return null;
+            return Array.from(s._dictionary).reduce((obj, [key, value]) => {
+                obj[key] = value;
+                return obj;
+            }, {});
+        })) ?? of(null)));
+        this.queryHistory$ = new BehaviorSubject([]);
+        this.stringifiedQueryConfig = computed(() => {
+            const query = this.selectedQuery();
+            if (!query)
+                return null;
+            const cfg = query._queryConfig;
+            const route = typeof cfg.route === 'string' ? cfg.route : cfg.route ? cfg.route({}).replace(/undefined/g, ':param') : null;
+            const sharedCfg = {
+                method: cfg.method,
+                secure: cfg.secure,
+                route,
+                reportProgress: cfg.reportProgress,
+                responseType: cfg.responseType,
+                withCredentials: cfg.withCredentials,
+                autoRefreshOn: cfg.autoRefreshOn,
+                enableSmartPolling: cfg.enableSmartPolling,
+                hasEntityStore: !!cfg.entity,
+            };
+            if (isGqlQueryConfig(cfg)) {
+                return {
+                    ...sharedCfg,
+                    query: cfg.query,
+                    transferVia: cfg.transferVia,
+                };
+            }
+            return {
+                ...sharedCfg,
+            };
+        });
+        this.authProvider = toSignal(toObservable(this.selectedClientConfig).pipe(switchMap((c) => c.client.authProvider$)));
+        this.authProviderDetails = computed(() => {
+            const provider = this.authProvider();
+            if (!provider)
+                return null;
+            if (provider instanceof CustomHeaderAuthProvider) {
+                return {
+                    type: 'CustomHeaderAuthProvider',
+                    header: () => provider.header,
+                    provider: provider,
+                    config: {
+                        name: provider._config.name,
+                        value: provider._config.value,
+                    },
+                };
+            }
+            else if (provider instanceof BasicAuthProvider) {
+                return {
+                    type: 'BasicAuthProvider',
+                    header: () => provider.header,
+                    provider: provider,
+                    config: {
+                        username: provider._config.username,
+                        password: provider._config.password,
+                    },
+                };
+            }
+            else if (isBearerAuthProvider(provider)) {
+                const refreshCfg = provider._config.refreshConfig;
+                return {
+                    type: 'BearerAuthProvider',
+                    header: () => provider.header,
+                    provider: provider,
+                    config: {
+                        token: provider._config.token,
+                        refreshConfig: {
+                            refreshOnUnauthorizedResponse: refreshCfg?.refreshOnUnauthorizedResponse ?? 'true (default)',
+                            token: refreshCfg?.token,
+                            cookieName: refreshCfg?.cookieName,
+                            cookieDomain: refreshCfg?.cookieDomain ?? 'current origin (default)',
+                            cookieExpiresInDays: refreshCfg?.cookieExpiresInDays ?? '30 (default)',
+                            cookiePath: refreshCfg?.cookiePath ?? '/ (default)',
+                            cookieEnabled: refreshCfg?.cookieEnabled ?? 'true (default)',
+                            cookieSameSite: refreshCfg?.cookieSameSite ?? 'lax (default)',
+                            refreshBuffer: refreshCfg?.refreshBuffer ?? '30000 (default)',
+                            expiresInPropertyName: refreshCfg?.expiresInPropertyName ?? 'exp (default)',
+                            strategy: refreshCfg?.strategy ?? 'AuthBearerRefreshStrategy.BeforeExpiration (default)',
+                            requestArgsAdapter: refreshCfg?.requestArgsAdapter ? 'custom' : 'default',
+                            responseAdapter: refreshCfg?.responseAdapter ? 'custom' : 'default',
+                        },
+                    },
+                };
+            }
+            else {
+                return {
+                    type: 'UnknownAuthProvider',
+                    header: () => provider.header,
+                    provider: provider,
+                    config: {},
+                };
+            }
+        });
+        this.trackByClient = (_, { client }) => client.config.baseRoute;
+        this.trackByQuery = (_, { _id }) => _id;
+        this.selectedClientIdCtrl.valueChanges
+            .pipe(tap(() => this.clearQueryHistory()), takeUntil(this._destroy$))
+            .subscribe();
+        this.selectedQuery$
+            .pipe(switchMap((q) => q?._dependentsChanged$ ?? of(null)), tap(() => this._cdr.markForCheck()), takeUntilDestroyed())
+            .subscribe();
+        toObservable(this.authProviderDetails)
+            .pipe(switchMap((ap) => (ap?.type === 'BearerAuthProvider' ? ap.provider.tokens$ : of(null))))
+            .pipe(tap(() => this._cdr.markForCheck()), takeUntilDestroyed())
+            .subscribe();
+        this.queryStore$
+            .pipe(switchMap((s) => s.storeChange$.pipe(startWith(''), map(() => s._store), tap((s) => {
+            untracked(() => {
+                this._queries$.next(Array.from(s.values()));
+            });
+        }), takeUntil(this._destroy$))))
+            .subscribe();
+        this.queryStore$
+            .pipe(switchMap((s) => s.queryCreated$.pipe(tap((query) => {
+            const currentHistory = this.queryHistory$.getValue();
+            if (!currentHistory)
+                return;
+            const currentHistoryClone = [...currentHistory];
+            if (!currentHistory.some((q) => q._id === query._id)) {
+                currentHistoryClone.unshift(query);
+            }
+            currentHistoryClone.splice(50);
+            this.queryHistory$.next(currentHistoryClone);
+        }), takeUntil(this._destroy$))))
+            .subscribe();
+        this._queries$
+            .pipe(tap((queries) => {
+            const currentHistory = this.queryHistory$.getValue();
+            if (!queries || !currentHistory)
+                return;
+            const currentHistoryClone = [...currentHistory];
+            for (const query of queries) {
+                if (!currentHistoryClone.some((q) => q._id === query._id)) {
+                    currentHistoryClone.unshift(query);
+                }
+            }
+            currentHistoryClone.splice(50);
+            this.queryHistory$.next(currentHistoryClone);
+        }), takeUntil(this._destroy$))
+            .subscribe();
+        effect(() => {
+            const devtoolConfig = {
+                isOpen: this.isOpen(),
+                isTranslucent: this.isTranslucent(),
+                snapLayout: this.snapLayout(),
+                showResponse: this.showResponse(),
+                showRawResponse: this.showRawResponse(),
+                showQueryConfig: this.showQueryConfig(),
+                showEntityStoreValue: this.showEntityStoreValue(),
+                showArguments: this.showArguments(),
+                selectedClientId: this.selectedClientId(),
+                selectedQueryPath: this.selectedQueryId(),
+                queryListMode: this.queryListMode(),
+                viewMode: this.viewMode(),
+            };
+            window.localStorage.setItem('ethlete:query:devtools', JSON.stringify(devtoolConfig));
+        }, { allowSignalWrites: true });
+        const initialConfig = window.localStorage.getItem('ethlete:query:devtools');
+        if (initialConfig) {
+            const parsed = JSON.parse(initialConfig);
+            this.isOpen.set(parsed.isOpen ?? false);
+            this.isTranslucent.set(parsed.isTranslucent ?? false);
+            this.snapLayout.set(parsed.snapLayout ?? 'full');
+            this.showResponse.set(parsed.showResponse ?? false);
+            this.showRawResponse.set(parsed.showRawResponse ?? false);
+            this.showQueryConfig.set(parsed.showQueryConfig ?? false);
+            this.showEntityStoreValue.set(parsed.showEntityStoreValue ?? false);
+            this.showArguments.set(parsed.showArguments ?? false);
+            this.selectedClientIdCtrl.setValue(parsed.selectedClientId ?? 0);
+            this.selectedQueryId.set(parsed.selectedQueryPath ?? null);
+            this.queryListMode.set(parsed.queryListMode ?? 'live');
+            this.viewMode.set(parsed.viewMode ?? 'query');
+        }
+    }
+    toggleOpen() {
+        this.isOpen.set(!this.isOpen());
+    }
+    toggleTranslucent() {
+        this.isTranslucent.set(!this.isTranslucent());
+    }
+    toggleShowResponse() {
+        this.showResponse.set(!this.showResponse());
+        nextFrame(() => {
+            this._cdr.markForCheck();
+        });
+    }
+    toggleShowQueryConfig() {
+        this.showQueryConfig.set(!this.showQueryConfig());
+    }
+    toggleShowRawResponse() {
+        this.showRawResponse.set(!this.showRawResponse());
+    }
+    toggleShowEntityStoreValue() {
+        this.showEntityStoreValue.set(!this.showEntityStoreValue());
+    }
+    toggleShowArguments() {
+        this.showArguments.set(!this.showArguments());
+    }
+    selectSnapLayout(layout) {
+        this.snapLayout.set(layout);
+    }
+    selectQueryListMode(mode) {
+        this.queryListMode.set(mode);
+    }
+    selectViewMode(mode) {
+        this.viewMode.set(mode);
+    }
+    selectQuery(query) {
+        this.selectedQueryId.set(query._id);
+    }
+    clearQueryHistory() {
+        this.queryHistory$.next([]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", 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\">Open 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)}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999;all:unset;font-family:monospace}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid #3c424a;padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid #3c424a;margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid #3c424a;list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid #3c424a;background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;gap:2px}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-auth-provider__viewer{border-top:1px solid #3c424a;margin-left:-12px;margin-right:-12px;margin-bottom:-12px;padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }, { kind: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-query-devtools', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
+                        class: 'et-query-devtools',
+                    }, imports: [AsyncPipe, JsonPipe, ReactiveFormsModule, NgClass, QueryShortNamePipe, QueryDirective], template: "@if (!isOpen()) {\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Open 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)}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999;all:unset;font-family:monospace}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid #3c424a;padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid #3c424a;margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid #3c424a;list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid #3c424a;background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;gap:2px}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-auth-provider__viewer{border-top:1px solid #3c424a;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"] }]
+        }], ctorParameters: () => [] });
+
 class EntityStoreError extends Error {
     constructor(message, detail) {
         super(message);