@ethlete/query 4.14.0 → 4.15.0

package/fesm2022/ethlete-query.mjs

@@ -1,10 +1,10 @@
 import * as i1$1 from '@ethlete/core';
-import { getCookie, setCookie, deleteCookie, createDestroy, nextFrame, DelayableDirective, RouterStateService, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
-import { Observable, BehaviorSubject, Subject, fromEvent, timer, takeUntil, take, filter, takeWhile, switchMap, of, tap, shareReplay, interval, skip, map, startWith, combineLatest, withLatestFrom, debounceTime, merge } from 'rxjs';
+import { createDestroy, getCookie, setCookie, deleteCookie, nextFrame, DelayableDirective, RouterStateService, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
+import { Observable, takeUntil, startWith, pairwise, tap, BehaviorSubject, Subject, fromEvent, timer, take, filter, takeWhile, switchMap, of, shareReplay, ReplaySubject, interval, skip, map, combineLatest, withLatestFrom, debounceTime, merge } from 'rxjs';
 import * as i0 from '@angular/core';
-import { signal, isDevMode, Pipe, InjectionToken, inject, ChangeDetectorRef, computed, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, ViewContainerRef, ErrorHandler, Directive, Input, ElementRef, NgZone, assertInInjectionContext } from '@angular/core';
+import { assertInInjectionContext, inject, Injector, signal, isDevMode, Pipe, InjectionToken, ChangeDetectorRef, computed, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, ViewContainerRef, ErrorHandler, Directive, Input, ElementRef, NgZone } from '@angular/core';
+import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgIf, NgFor, AsyncPipe, JsonPipe, NgClass } from '@angular/common';
-import { toSignal, toObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormGroup } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
@@ -156,10 +156,16 @@ const extractExpiresInSeconds = (headers) => {
         return null;
     }
     if (cacheControl?.includes('max-age')) {
-        maxAge = parseInt(cacheControl.split('max-age=')[1]);
+        const m = cacheControl.split('max-age=')[1];
+        if (m) {
+            maxAge = parseInt(m);
+        }
     }
     else if (cacheControl?.includes('s-maxage')) {
-        maxAge = parseInt(cacheControl.split('s-maxage=')[1]);
+        const m = cacheControl.split('s-maxage=')[1];
+        if (m) {
+            maxAge = parseInt(m);
+        }
     }
     if (maxAge && age) {
         const ageSeconds = parseInt(age);
@@ -323,7 +329,7 @@ const request = (config) => {
     const headers = config.headers || {};
     const responseType = config.responseType || 'json';
     const body = config.body || null;
-    const url = config.urlWithParams.split('?')[0];
+    const url = config.urlWithParams.split('?')[0] || '';
     const retryFn = config.retryFn || shouldRetryRequest;
     let currentRetryCount = 0;
     let retryTimeout = null;
@@ -512,43 +518,43 @@ const request = (config) => {
     });
 };
 
-class QuerySubject extends BehaviorSubject {
-    constructor(initialValue = null, _config) {
-        super(initialValue);
-        this._config = _config;
-    }
-    next(value) {
-        if (this._config?.abortPrevious) {
-            this.value?.abort();
-        }
-        super.next(value);
-    }
-}
-const querySignal = (initialValue = null, config) => {
-    const _signal = signal(initialValue);
-    const origMutate = _signal.mutate.bind(_signal);
-    const origUpdate = _signal.update.bind(_signal);
-    const origSet = _signal.set.bind(_signal);
-    _signal.mutate = (mutatorFn) => {
-        if (config?.abortPrevious) {
-            _signal()?.abort();
-        }
-        origMutate(mutatorFn);
-    };
-    _signal.update = (updateFn) => {
-        if (config?.abortPrevious) {
-            _signal()?.abort();
-        }
-        origUpdate(updateFn);
-    };
-    _signal.set = (value) => {
-        if (config?.abortPrevious) {
-            _signal()?.abort();
+const addQueryContainerHandling = (obs, valueFn, config) => {
+    assertInInjectionContext(addQueryContainerHandling);
+    const { abortPrevious, abortOnDestroy } = config ?? {};
+    const injector = inject(Injector);
+    const destroy$ = createDestroy();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const tNode = injector._tNode;
+    const componentId = tNode?.index ?? -1;
+    obs
+        .pipe(takeUntil(destroy$), startWith(null), pairwise(), tap(([prevQuery, currQuery]) => {
+        prevQuery?._removeDependent(componentId);
+        currQuery?._addDependent(componentId);
+        if (!prevQuery?._hasDependents() &&
+            ((abortPrevious === undefined && prevQuery?.canBeCached) || abortPrevious)) {
+            prevQuery?.abort();
+        }
+    }))
+        .subscribe();
+    destroy$.subscribe(() => {
+        const query = valueFn();
+        query?._removeDependent(componentId);
+        if (!query?._hasDependents() && ((query?.canBeCached && abortOnDestroy === undefined) || abortOnDestroy)) {
+            query?.abort();
         }
-        origSet(value);
-    };
-    return _signal;
+    });
 };
+function toQuerySignal(source, options) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const s = toSignal(source, options);
+    addQueryContainerHandling(source, () => s(), options);
+    return s;
+}
+function toQuerySubject(source, options) {
+    const obs = toObservable(source, options);
+    addQueryContainerHandling(obs, () => source(), options);
+    return obs;
+}
 
 const deepFreeze = (object) => {
     // check if object is actually an object or frozen
@@ -604,12 +610,22 @@ class QueryCreator {
             this._store._dispatchQueryCreated(query);
             return query;
         };
-        this.createSubject = (initialValue, config) => new QuerySubject(initialValue ?? null, config);
-        this.createSignal = (initialValue, config) => querySignal(initialValue ?? null, config);
+        this.createSubject = (initialValue, config) => {
+            assertInInjectionContext(this.createSubject);
+            const subject = new BehaviorSubject(initialValue ?? null);
+            addQueryContainerHandling(subject, () => subject.getValue(), config);
+            return subject;
+        };
+        this.createSignal = (initialValue, config) => {
+            assertInInjectionContext(this.createSignal);
+            const _signal = signal(initialValue ?? null);
+            addQueryContainerHandling(toObservable(_signal), () => _signal(), config);
+            return _signal;
+        };
         /**
          * @deprecated Use `myQuery.createSubject()` or `myQuery.createSignal()` instead. Will be removed in v5.
          */
-        this.behaviorSubject = (initialValue, config) => new QuerySubject(initialValue ?? null, config);
+        this.behaviorSubject = (initialValue) => new BehaviorSubject(initialValue ?? null);
     }
 }
 
@@ -1133,7 +1149,7 @@ class Query {
         return ts < Date.now();
     }
     get isInUse() {
-        return this._state$.observed;
+        return this._state$.observed || Object.keys(this._dependents).length > 0;
     }
     /**
      * @internal
@@ -1186,6 +1202,18 @@ class Query {
         this._pollingSubscription = null;
         this._onAbort$ = new Subject();
         this._currentPollConfig = null;
+        /**
+         * @internal
+         * Used to track which components depend on this query.
+         * The key is the component's _tNode index.
+         * The value is the number of times the component has subscribed to this query.
+         * The value might increase since we cant distinguish between a component and a host directive applied to it.
+         */
+        this._dependents = {};
+        /**
+         * @internal
+         */
+        this._dependentsChanged$ = new ReplaySubject();
         /**
          * @internal
          */
@@ -1364,6 +1392,36 @@ class Query {
             .get({ args: this._arguments, id, response: s.response, store: this._queryConfig.entity.store })
             .pipe(map((v) => ({ ...s, response: v })));
     }
+    /**
+     * @internal
+     */
+    _addDependent(tNodeIndex) {
+        if (!this._dependents[tNodeIndex]) {
+            this._dependents[tNodeIndex] = 0;
+        }
+        this._dependents[tNodeIndex]++;
+        this._dependentsChanged$.next(this._dependents);
+    }
+    /**
+     * @internal
+     */
+    _removeDependent(tNodeIndex) {
+        const count = this._dependents[tNodeIndex];
+        if (count === undefined) {
+            return;
+        }
+        this._dependents[tNodeIndex]--;
+        if (count <= 1) {
+            delete this._dependents[tNodeIndex];
+        }
+        this._dependentsChanged$.next(this._dependents);
+    }
+    /**
+     * @internal
+     */
+    _hasDependents() {
+        return Object.keys(this._dependents).length > 0;
+    }
 }
 
 const isBasicAuthProvider = (authProvider) => authProvider instanceof BasicAuthProvider;
@@ -1372,6 +1430,9 @@ const isCustomHeaderAuthProvider = (authProvider) => authProvider instanceof Cus
 const decryptBearer = (token) => {
     try {
         const base64Url = token.split('.')[1];
+        if (!base64Url) {
+            return null;
+        }
         const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
         const jsonPayload = decodeURIComponent(atob(base64)
             .split('')
@@ -1610,7 +1671,11 @@ class QueryDevtoolsComponent {
                 return this.queryClientConfigs[0];
             }
             const index = this.selectedClientId() ?? 0;
-            return this.queryClientConfigs[index];
+            const cfg = this.queryClientConfigs[index];
+            if (!cfg) {
+                return this.queryClientConfigs[0];
+            }
+            return cfg;
         });
         this.queryStore = computed(() => {
             const config = this.selectedClientConfig();
@@ -1630,6 +1695,7 @@ class QueryDevtoolsComponent {
             }
             return this.queryHistory()?.find((q) => q._id === id) ?? null;
         });
+        this.selectedQuery$ = toObservable(this.selectedQuery);
         this.selectedQueryEntityStore = computed(() => {
             const query = this.selectedQuery();
             if (!query)
@@ -1679,6 +1745,9 @@ class QueryDevtoolsComponent {
         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) => this._queries$.next(Array.from(s.values()))), takeUntil(this._destroy$))))
             .subscribe();
@@ -1779,13 +1848,13 @@ class QueryDevtoolsComponent {
         this.queryHistory.set([]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Open Devtools</button>\n\n<div\n  *ngIf=\"isOpen()\"\n  [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n  class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n  <header class=\"et-qd-header\">\n    <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n    <div class=\"et-qd-header__select\">\n      <label for=\"et-query-client-instance\">Client instance</label>\n      <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n        <option *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\" [value]=\"i\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </option>\n      </select>\n    </div>\n\n    <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n  </header>\n\n  <div class=\"et-qd-sub-header\">\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n      (click)=\"toggleTranslucent()\"\n      class=\"et-qd-chip et-qd-translucent-clickable\"\n    >\n      Translucent\n    </button>\n    <div class=\"et-qd-sub-header__divider\"></div>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n      (click)=\"selectSnapLayout('full')\"\n      class=\"et-qd-chip\"\n    >\n      Fullscreen\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n      (click)=\"selectSnapLayout('top')\"\n      class=\"et-qd-chip\"\n    >\n      Top\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n      (click)=\"selectSnapLayout('bottom')\"\n      class=\"et-qd-chip\"\n    >\n      Bottom\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n      (click)=\"selectSnapLayout('left')\"\n      class=\"et-qd-chip\"\n    >\n      Left\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n      (click)=\"selectSnapLayout('right')\"\n      class=\"et-qd-chip\"\n    >\n      Right\n    </button>\n  </div>\n\n  <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-client\">\n    <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n    <div class=\"et-qd-client__actions\">\n      <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n      <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n        Refresh all (ignore caches)\n      </button>\n      <button\n        (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n        class=\"et-qd-chip\"\n      >\n        Refresh all (ignore caches & purge unused)\n      </button>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-queries\">\n    <p class=\"et-qd-queries__title\">Query browser</p>\n    <div class=\"et-qd-queries__actions\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' }\"\n        (click)=\"selectQueryListMode('live')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        Live ({{ queries()?.length ?? 0 }})\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' }\"\n        (click)=\"selectQueryListMode('history')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        History ({{ queryHistory().length }}/50)\n      </button>\n      <ng-container *ngIf=\"queryListMode() === 'history'\">\n        <div class=\"et-qd-queries__divider\"></div>\n        <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n      </ng-container>\n    </div>\n\n    <div class=\"et-qd-queries__browser\">\n      <ul *ngIf=\"queryListMode() === 'live'\" class=\"et-qd-queries__browser-list\">\n        <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n          <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n            <span> {{ query._queryConfig.method }}</span>\n            <span> {{ query | queryShortName }}</span>\n          </button>\n        </li>\n      </ul>\n      <ul *ngIf=\"queryListMode() === 'history'\" class=\"et-qd-queries__browser-list\">\n        <li *ngFor=\"let query of queryHistory(); trackBy: trackByQuery\">\n          <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n            <span> {{ query._queryConfig.method }}</span>\n            <span> {{ query | queryShortName }}</span>\n          </button>\n        </li>\n      </ul>\n      <div class=\"et-qd-queries__browser-detail\">\n        <ng-container *ngIf=\"selectedQuery() as query\">\n          <p class=\"et-qd-queries__browser-detail__title\">\n            {{ query._queryConfig.method }} {{ query._routeWithParams }}\n          </p>\n\n          <div class=\"et-qd-queries__actions\">\n            <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n            <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n              Execute (ignore cache)\n            </button>\n\n            <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n            <div class=\"et-qd-queries__divider\"></div>\n            <button\n              [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n              (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n              class=\"et-qd-chip et-qd-chip-bordered\"\n            >\n              Poll\n            </button>\n\n            <button\n              [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n              (click)=\"query.stopPolling()\"\n              class=\"et-qd-chip et-qd-chip-bordered\"\n            >\n              Stop polling\n            </button>\n            <ng-container *ngIf=\"query.isPolling || query._isPollingPaused\">\n              <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                Pause polling\n              </button>\n              <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                Resume polling\n              </button>\n            </ng-container>\n          </div>\n\n          <div class=\"et-qd-list\">\n            <div class=\"et-qd-list-item\">\n              <p>State type</p>\n              <pre>{{ query.rawState.type }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is expired</p>\n              <pre>{{ query.isExpired }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is in use</p>\n              <pre>{{ query.isInUse }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Subscriber count</p>\n              <pre>{{ query._subscriberCount }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is polling</p>\n              <pre>{{ query.isPolling }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is polling paused</p>\n              <pre>{{ query._isPollingPaused }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Enable smart polling</p>\n              <pre>{{ query._enableSmartPolling }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Arguments</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                  (click)=\"toggleShowArguments()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showArguments()\">{{ query._arguments | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>State</p>\n              <p><i> Warning, this will cause a subscription if shown!</i></p>\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n                  (click)=\"toggleShowResponse()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Raw state</p>\n              <p><i> The query state unaffected by entity stores</i></p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n                  (click)=\"toggleShowRawResponse()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Query config</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n                  (click)=\"toggleShowQueryConfig()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showQueryConfig()\">{{ stringifiedQueryConfig() | json }}</pre>\n            </div>\n\n            <div *ngIf=\"!!query._queryConfig.entity\" class=\"et-qd-list-item\">\n              <p>Entity store value</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n                  (click)=\"toggleShowEntityStoreValue()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showEntityStoreValue()\">{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Open Devtools</button>\n\n<div\n  *ngIf=\"isOpen()\"\n  [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n  class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n  <header class=\"et-qd-header\">\n    <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n    <div class=\"et-qd-header__select\">\n      <label for=\"et-query-client-instance\">Client instance</label>\n      <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n        <option *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\" [value]=\"i\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </option>\n      </select>\n    </div>\n\n    <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n  </header>\n\n  <div class=\"et-qd-sub-header\">\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n      (click)=\"toggleTranslucent()\"\n      class=\"et-qd-chip et-qd-translucent-clickable\"\n    >\n      Translucent\n    </button>\n    <div class=\"et-qd-sub-header__divider\"></div>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n      (click)=\"selectSnapLayout('full')\"\n      class=\"et-qd-chip\"\n    >\n      Fullscreen\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n      (click)=\"selectSnapLayout('top')\"\n      class=\"et-qd-chip\"\n    >\n      Top\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n      (click)=\"selectSnapLayout('bottom')\"\n      class=\"et-qd-chip\"\n    >\n      Bottom\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n      (click)=\"selectSnapLayout('left')\"\n      class=\"et-qd-chip\"\n    >\n      Left\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n      (click)=\"selectSnapLayout('right')\"\n      class=\"et-qd-chip\"\n    >\n      Right\n    </button>\n  </div>\n\n  <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-client\">\n    <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n    <div class=\"et-qd-client__actions\">\n      <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n      <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n        Refresh all (ignore caches)\n      </button>\n      <button\n        (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n        class=\"et-qd-chip\"\n      >\n        Refresh all (ignore caches & purge unused)\n      </button>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-queries\">\n    <p class=\"et-qd-queries__title\">Query browser</p>\n    <div class=\"et-qd-queries__actions\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' }\"\n        (click)=\"selectQueryListMode('live')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        Live ({{ queries()?.length ?? 0 }})\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' }\"\n        (click)=\"selectQueryListMode('history')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        History ({{ queryHistory().length }}/50)\n      </button>\n      <ng-container *ngIf=\"queryListMode() === 'history'\">\n        <div class=\"et-qd-queries__divider\"></div>\n        <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n      </ng-container>\n    </div>\n\n    <div class=\"et-qd-queries__browser\">\n      <ul *ngIf=\"queryListMode() === 'live'\" class=\"et-qd-queries__browser-list\">\n        <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n          <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n            <span> {{ query._queryConfig.method }}</span>\n            <span> {{ query | queryShortName }}</span>\n          </button>\n        </li>\n      </ul>\n      <ul *ngIf=\"queryListMode() === 'history'\" class=\"et-qd-queries__browser-list\">\n        <li *ngFor=\"let query of queryHistory(); trackBy: trackByQuery\">\n          <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n            <span> {{ query._queryConfig.method }}</span>\n            <span> {{ query | queryShortName }}</span>\n          </button>\n        </li>\n      </ul>\n      <div class=\"et-qd-queries__browser-detail\">\n        <ng-container *ngIf=\"selectedQuery() as query\">\n          <p class=\"et-qd-queries__browser-detail__title\">\n            {{ query._queryConfig.method }} {{ query._routeWithParams }}\n          </p>\n\n          <div class=\"et-qd-queries__actions\">\n            <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n            <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n              Execute (ignore cache)\n            </button>\n\n            <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n            <div class=\"et-qd-queries__divider\"></div>\n            <button\n              [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n              (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n              class=\"et-qd-chip et-qd-chip-bordered\"\n            >\n              Poll\n            </button>\n\n            <button\n              [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n              (click)=\"query.stopPolling()\"\n              class=\"et-qd-chip et-qd-chip-bordered\"\n            >\n              Stop polling\n            </button>\n            <ng-container *ngIf=\"query.isPolling || query._isPollingPaused\">\n              <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                Pause polling\n              </button>\n              <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                Resume polling\n              </button>\n            </ng-container>\n          </div>\n\n          <div class=\"et-qd-list\">\n            <div class=\"et-qd-list-item\">\n              <p>State type</p>\n              <pre>{{ query.rawState.type }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>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>Arguments</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                  (click)=\"toggleShowArguments()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showArguments()\">{{ query._arguments | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>State</p>\n              <p><i> Warning, this will cause a subscription if shown!</i></p>\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n                  (click)=\"toggleShowResponse()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Raw state</p>\n              <p><i> The query state unaffected by entity stores</i></p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n                  (click)=\"toggleShowRawResponse()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Query config</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n                  (click)=\"toggleShowQueryConfig()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showQueryConfig()\">{{ stringifiedQueryConfig() | json }}</pre>\n            </div>\n\n            <div *ngIf=\"!!query._queryConfig.entity\" class=\"et-qd-list-item\">\n              <p>Entity store value</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n                  (click)=\"toggleShowEntityStoreValue()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showEntityStoreValue()\">{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-query-devtools', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
                         class: 'et-query-devtools',
-                    }, imports: [NgIf, NgFor, AsyncPipe, JsonPipe, ReactiveFormsModule, NgClass, QueryShortNamePipe], hostDirectives: [], template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Open Devtools</button>\n\n<div\n  *ngIf=\"isOpen()\"\n  [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n  class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n  <header class=\"et-qd-header\">\n    <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n    <div class=\"et-qd-header__select\">\n      <label for=\"et-query-client-instance\">Client instance</label>\n      <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n        <option *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\" [value]=\"i\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </option>\n      </select>\n    </div>\n\n    <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n  </header>\n\n  <div class=\"et-qd-sub-header\">\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n      (click)=\"toggleTranslucent()\"\n      class=\"et-qd-chip et-qd-translucent-clickable\"\n    >\n      Translucent\n    </button>\n    <div class=\"et-qd-sub-header__divider\"></div>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n      (click)=\"selectSnapLayout('full')\"\n      class=\"et-qd-chip\"\n    >\n      Fullscreen\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n      (click)=\"selectSnapLayout('top')\"\n      class=\"et-qd-chip\"\n    >\n      Top\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n      (click)=\"selectSnapLayout('bottom')\"\n      class=\"et-qd-chip\"\n    >\n      Bottom\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n      (click)=\"selectSnapLayout('left')\"\n      class=\"et-qd-chip\"\n    >\n      Left\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n      (click)=\"selectSnapLayout('right')\"\n      class=\"et-qd-chip\"\n    >\n      Right\n    </button>\n  </div>\n\n  <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-client\">\n    <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n    <div class=\"et-qd-client__actions\">\n      <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n      <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n        Refresh all (ignore caches)\n      </button>\n      <button\n        (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n        class=\"et-qd-chip\"\n      >\n        Refresh all (ignore caches & purge unused)\n      </button>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-queries\">\n    <p class=\"et-qd-queries__title\">Query browser</p>\n    <div class=\"et-qd-queries__actions\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' }\"\n        (click)=\"selectQueryListMode('live')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        Live ({{ queries()?.length ?? 0 }})\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' }\"\n        (click)=\"selectQueryListMode('history')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        History ({{ queryHistory().length }}/50)\n      </button>\n      <ng-container *ngIf=\"queryListMode() === 'history'\">\n        <div class=\"et-qd-queries__divider\"></div>\n        <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n      </ng-container>\n    </div>\n\n    <div class=\"et-qd-queries__browser\">\n      <ul *ngIf=\"queryListMode() === 'live'\" class=\"et-qd-queries__browser-list\">\n        <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n          <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n            <span> {{ query._queryConfig.method }}</span>\n            <span> {{ query | queryShortName }}</span>\n          </button>\n        </li>\n      </ul>\n      <ul *ngIf=\"queryListMode() === 'history'\" class=\"et-qd-queries__browser-list\">\n        <li *ngFor=\"let query of queryHistory(); trackBy: trackByQuery\">\n          <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n            <span> {{ query._queryConfig.method }}</span>\n            <span> {{ query | queryShortName }}</span>\n          </button>\n        </li>\n      </ul>\n      <div class=\"et-qd-queries__browser-detail\">\n        <ng-container *ngIf=\"selectedQuery() as query\">\n          <p class=\"et-qd-queries__browser-detail__title\">\n            {{ query._queryConfig.method }} {{ query._routeWithParams }}\n          </p>\n\n          <div class=\"et-qd-queries__actions\">\n            <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n            <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n              Execute (ignore cache)\n            </button>\n\n            <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n            <div class=\"et-qd-queries__divider\"></div>\n            <button\n              [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n              (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n              class=\"et-qd-chip et-qd-chip-bordered\"\n            >\n              Poll\n            </button>\n\n            <button\n              [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n              (click)=\"query.stopPolling()\"\n              class=\"et-qd-chip et-qd-chip-bordered\"\n            >\n              Stop polling\n            </button>\n            <ng-container *ngIf=\"query.isPolling || query._isPollingPaused\">\n              <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                Pause polling\n              </button>\n              <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                Resume polling\n              </button>\n            </ng-container>\n          </div>\n\n          <div class=\"et-qd-list\">\n            <div class=\"et-qd-list-item\">\n              <p>State type</p>\n              <pre>{{ query.rawState.type }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is expired</p>\n              <pre>{{ query.isExpired }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is in use</p>\n              <pre>{{ query.isInUse }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Subscriber count</p>\n              <pre>{{ query._subscriberCount }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is polling</p>\n              <pre>{{ query.isPolling }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is polling paused</p>\n              <pre>{{ query._isPollingPaused }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Enable smart polling</p>\n              <pre>{{ query._enableSmartPolling }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Arguments</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                  (click)=\"toggleShowArguments()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showArguments()\">{{ query._arguments | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>State</p>\n              <p><i> Warning, this will cause a subscription if shown!</i></p>\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n                  (click)=\"toggleShowResponse()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Raw state</p>\n              <p><i> The query state unaffected by entity stores</i></p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n                  (click)=\"toggleShowRawResponse()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Query config</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n                  (click)=\"toggleShowQueryConfig()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showQueryConfig()\">{{ stringifiedQueryConfig() | json }}</pre>\n            </div>\n\n            <div *ngIf=\"!!query._queryConfig.entity\" class=\"et-qd-list-item\">\n              <p>Entity store value</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n                  (click)=\"toggleShowEntityStoreValue()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showEntityStoreValue()\">{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":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"] }]
+                    }, imports: [NgIf, NgFor, AsyncPipe, JsonPipe, ReactiveFormsModule, NgClass, QueryShortNamePipe], hostDirectives: [], template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Open Devtools</button>\n\n<div\n  *ngIf=\"isOpen()\"\n  [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n  class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n  <header class=\"et-qd-header\">\n    <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n    <div class=\"et-qd-header__select\">\n      <label for=\"et-query-client-instance\">Client instance</label>\n      <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n        <option *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\" [value]=\"i\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </option>\n      </select>\n    </div>\n\n    <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n  </header>\n\n  <div class=\"et-qd-sub-header\">\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n      (click)=\"toggleTranslucent()\"\n      class=\"et-qd-chip et-qd-translucent-clickable\"\n    >\n      Translucent\n    </button>\n    <div class=\"et-qd-sub-header__divider\"></div>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n      (click)=\"selectSnapLayout('full')\"\n      class=\"et-qd-chip\"\n    >\n      Fullscreen\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n      (click)=\"selectSnapLayout('top')\"\n      class=\"et-qd-chip\"\n    >\n      Top\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n      (click)=\"selectSnapLayout('bottom')\"\n      class=\"et-qd-chip\"\n    >\n      Bottom\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n      (click)=\"selectSnapLayout('left')\"\n      class=\"et-qd-chip\"\n    >\n      Left\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n      (click)=\"selectSnapLayout('right')\"\n      class=\"et-qd-chip\"\n    >\n      Right\n    </button>\n  </div>\n\n  <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-client\">\n    <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n    <div class=\"et-qd-client__actions\">\n      <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n      <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n        Refresh all (ignore caches)\n      </button>\n      <button\n        (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n        class=\"et-qd-chip\"\n      >\n        Refresh all (ignore caches & purge unused)\n      </button>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-queries\">\n    <p class=\"et-qd-queries__title\">Query browser</p>\n    <div class=\"et-qd-queries__actions\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' }\"\n        (click)=\"selectQueryListMode('live')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        Live ({{ queries()?.length ?? 0 }})\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' }\"\n        (click)=\"selectQueryListMode('history')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        History ({{ queryHistory().length }}/50)\n      </button>\n      <ng-container *ngIf=\"queryListMode() === 'history'\">\n        <div class=\"et-qd-queries__divider\"></div>\n        <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n      </ng-container>\n    </div>\n\n    <div class=\"et-qd-queries__browser\">\n      <ul *ngIf=\"queryListMode() === 'live'\" class=\"et-qd-queries__browser-list\">\n        <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n          <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n            <span> {{ query._queryConfig.method }}</span>\n            <span> {{ query | queryShortName }}</span>\n          </button>\n        </li>\n      </ul>\n      <ul *ngIf=\"queryListMode() === 'history'\" class=\"et-qd-queries__browser-list\">\n        <li *ngFor=\"let query of queryHistory(); trackBy: trackByQuery\">\n          <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n            <span> {{ query._queryConfig.method }}</span>\n            <span> {{ query | queryShortName }}</span>\n          </button>\n        </li>\n      </ul>\n      <div class=\"et-qd-queries__browser-detail\">\n        <ng-container *ngIf=\"selectedQuery() as query\">\n          <p class=\"et-qd-queries__browser-detail__title\">\n            {{ query._queryConfig.method }} {{ query._routeWithParams }}\n          </p>\n\n          <div class=\"et-qd-queries__actions\">\n            <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n            <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n              Execute (ignore cache)\n            </button>\n\n            <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n            <div class=\"et-qd-queries__divider\"></div>\n            <button\n              [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n              (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n              class=\"et-qd-chip et-qd-chip-bordered\"\n            >\n              Poll\n            </button>\n\n            <button\n              [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n              (click)=\"query.stopPolling()\"\n              class=\"et-qd-chip et-qd-chip-bordered\"\n            >\n              Stop polling\n            </button>\n            <ng-container *ngIf=\"query.isPolling || query._isPollingPaused\">\n              <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                Pause polling\n              </button>\n              <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                Resume polling\n              </button>\n            </ng-container>\n          </div>\n\n          <div class=\"et-qd-list\">\n            <div class=\"et-qd-list-item\">\n              <p>State type</p>\n              <pre>{{ query.rawState.type }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>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>Arguments</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                  (click)=\"toggleShowArguments()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showArguments()\">{{ query._arguments | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>State</p>\n              <p><i> Warning, this will cause a subscription if shown!</i></p>\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n                  (click)=\"toggleShowResponse()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Raw state</p>\n              <p><i> The query state unaffected by entity stores</i></p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n                  (click)=\"toggleShowRawResponse()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Query config</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n                  (click)=\"toggleShowQueryConfig()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showQueryConfig()\">{{ stringifiedQueryConfig() | json }}</pre>\n            </div>\n\n            <div *ngIf=\"!!query._queryConfig.entity\" class=\"et-qd-list-item\">\n              <p>Entity store value</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n                  (click)=\"toggleShowEntityStoreValue()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <pre *ngIf=\"showEntityStoreValue()\">{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":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: function () { return []; } });
 
 class QueryDirective {
@@ -2265,6 +2334,8 @@ class InfinityQueryTriggerDirective {
     _setupIntersectionObserver() {
         this._observer = new IntersectionObserver((entries) => {
             const entry = entries[0];
+            if (!entry)
+                return;
             if (entry.isIntersecting && !this._infinityQuery.context.loading) {
                 this._infinityQuery.loadNextPage();
             }
@@ -2335,7 +2406,11 @@ class EntityStore {
             }
             const _values = (Array.isArray(valueOrValues[0]) ? flatten(valueOrValues) : valueOrValues);
             for (let i = 0; i < _keys.length; i++) {
-                this._set(_keys[i], _values[i]);
+                const k = _keys[i];
+                const v = _values[i];
+                if (k === undefined || v === undefined)
+                    continue;
+                this._set(k, v);
             }
         }
         else {
@@ -2515,6 +2590,9 @@ const transformToDateArray = (value) => {
 const transformToSort = (value) => {
     if (typeof value === 'string') {
         const [active, direction] = value.split(':');
+        if (!active) {
+            return null;
+        }
         return {
             active,
             direction: direction,
@@ -2606,7 +2684,7 @@ class QueryForm {
          */
         this.activeFilterCount$ = this.changes$.pipe(map(({ currentValue }) => Object.entries(currentValue)
             .map(([key, value]) => {
-            if (IGNORED_FILTER_COUNT_FIELDS.includes(key) || this._fields[key].data.skipInFilterCount) {
+            if (IGNORED_FILTER_COUNT_FIELDS.includes(key) || this._fields[key]?.data.skipInFilterCount) {
                 return true;
             }
             return this._isDefaultValue(key, value);
@@ -2665,11 +2743,13 @@ class QueryForm {
             if (changedFieldsInLastResetLoop.length)
                 return of(null).pipe(map(() => ({ currentValue, previousValue })));
             const debounceValues = currentUniqueChangedFields.map((key) => {
-                const fieldData = this._fields[key].data;
-                if (fieldData.disableDebounceIfFalsy === true && !currentValue[key]) {
+                const field = this._fields[key];
+                if (!field)
+                    return null;
+                if (field.data.disableDebounceIfFalsy === true && !currentValue[key]) {
                     return null;
                 }
-                return fieldData.debounce ?? null;
+                return field.data.debounce ?? null;
             });
             currentUniqueChangedFields = [];
             if (debounceValues.some((v) => v === null) || !debounceValues.length) {
@@ -2700,7 +2780,10 @@ class QueryForm {
     _handleQueryFormResets(previousValue, currentValue) {
         let didResetValues = false;
         for (const formFieldKey in this._fields) {
-            const resets = this._fields[formFieldKey].data.isResetBy;
+            const field = this._fields[formFieldKey];
+            if (!field)
+                continue;
+            const resets = field.data.isResetBy;
             if (!resets)
                 continue;
             const resetConditionKeys = Array.isArray(resets) ? resets : [resets];
@@ -2807,16 +2890,17 @@ class QueryForm {
     _syncViaUrlQueryParams(values, replaceUrl) {
         const queryParams = { ...clone(this._activatedRoute.snapshot.queryParams) };
         for (const [key, value] of Object.entries(values)) {
-            if (!this._fields[key]) {
+            const field = this._fields[key];
+            if (!field) {
                 console.warn(`The field "${key}" is not defined in the QueryForm. Is it a typo?`, this);
                 continue;
             }
-            if (this._isDefaultValue(key, value) || this._fields[key].data.appendToUrl === false) {
+            if (this._isDefaultValue(key, value) || field.data.appendToUrl === false) {
                 delete queryParams[key];
             }
             else {
-                queryParams[key] = this._fields[key].data.valueToQueryParamTransformFn
-                    ? this._fields[key].data.valueToQueryParamTransformFn?.(value)
+                queryParams[key] = field.data.valueToQueryParamTransformFn
+                    ? field.data.valueToQueryParamTransformFn?.(value)
                     : value;
             }
         }
@@ -2847,5 +2931,5 @@ class QueryForm {
  * Generated bundle index. Do not edit.
  */
 
-export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, QUERY_CLIENT_DEVTOOLS_TOKEN, Query, QueryClient, QueryCreator, QueryDevtoolsComponent, QueryDirective, QueryError, QueryField, QueryForm, QueryShortNamePipe, QueryStore, QuerySubject, buildErrorMessage, buildGqlCacheKey, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, insertFrom, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isClassValidatorError, isCustomHeaderAuthProvider, isEmptyString, isGqlQueryConfig, isNaN$1 as isNaN, isQuery, isQueryCollection, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, isSymfonyFormViolationListError, isSymfonyPagerfantaOutOfRangeError, mapToPaginated, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, provideQueryClientForDevtools, querySignal, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, removeFrom, request, resetPageOnError, serializeBody, shouldCacheQuery, shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
+export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, QUERY_CLIENT_DEVTOOLS_TOKEN, Query, QueryClient, QueryCreator, QueryDevtoolsComponent, QueryDirective, QueryError, QueryField, QueryForm, QueryShortNamePipe, QueryStore, addQueryContainerHandling, buildErrorMessage, buildGqlCacheKey, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, insertFrom, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isClassValidatorError, isCustomHeaderAuthProvider, isEmptyString, isGqlQueryConfig, isNaN$1 as isNaN, isQuery, isQueryCollection, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, isSymfonyFormViolationListError, isSymfonyPagerfantaOutOfRangeError, mapToPaginated, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, provideQueryClientForDevtools, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, removeFrom, request, resetPageOnError, serializeBody, shouldCacheQuery, shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, toQuerySignal, toQuerySubject, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
 //# sourceMappingURL=ethlete-query.mjs.map