@ethlete/query 4.7.3 → 4.7.5

package/fesm2022/ethlete-query.mjs

@@ -1,11 +1,12 @@
-import * as i1 from '@ethlete/core';
-import { getCookie, setCookie, deleteCookie, createDestroy, DelayableDirective, RouterStateService, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
+import * as i1$1 from '@ethlete/core';
+import { getCookie, setCookie, deleteCookie, createDestroy, nextFrame, DelayableDirective, RouterStateService, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
 import { Observable, filter, takeWhile, switchMap, of, tap, BehaviorSubject, shareReplay, Subject, takeUntil, interval, skip, map, timer, startWith, combineLatest, withLatestFrom, fromEvent, debounceTime, take, concat } from 'rxjs';
 import * as i0 from '@angular/core';
-import { isDevMode, InjectionToken, inject, signal, computed, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, ViewContainerRef, ErrorHandler, ChangeDetectorRef, Directive, Input, ElementRef, NgZone, assertInInjectionContext } from '@angular/core';
-import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { FormGroup } from '@angular/forms';
+import { isDevMode, InjectionToken, inject, ChangeDetectorRef, signal, computed, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, ViewContainerRef, ErrorHandler, Directive, Input, ElementRef, NgZone, assertInInjectionContext } from '@angular/core';
+import { NgIf, NgFor, AsyncPipe, JsonPipe, NgClass } from '@angular/common';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, FormGroup } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
 class CustomHeaderAuthProvider {
@@ -742,9 +743,10 @@ const paginatedEntityValueUpdater = (findFn) => ({ response, rawResponse, entity
     };
 };
 
+let _nextQueryId = 0;
 class Query {
     get _nextId() {
-        return ++this._currentId;
+        return ++this._currentLocalId;
     }
     get state$() {
         return this._state$.pipe(tap((s) => {
@@ -818,9 +820,9 @@ class Query {
         this._queryConfig = _queryConfig;
         this._routeWithParams = _routeWithParams;
         this._args = _args;
-        this._currentId = 0;
+        this._id = _nextQueryId++;
+        this._currentLocalId = 0;
         this._pollingSubscription = null;
-        this._requestSubscription = null;
         this._onAbort$ = new Subject();
         this._currentPollConfig = null;
         /**
@@ -829,7 +831,7 @@ class Query {
         this._isPollingPaused = false;
         this._state$ = new BehaviorSubject({
             type: "PREPARED" /* QueryStateType.Prepared */,
-            meta: { id: this._currentId, triggeredVia: 'program' },
+            meta: { id: this._currentLocalId, triggeredVia: 'program' },
         });
     }
     execute(options = {}) {
@@ -856,7 +858,7 @@ class Query {
         const method = computeQueryMethod({ config: queryConfig, client: this._client });
         const body = computeQueryBody({ config: queryConfig, client: this._client, args: this._args, method });
         const headers = computeQueryHeaders({ client: this._client, config: queryConfig, args: this._args });
-        this._requestSubscription = request({
+        request({
             urlWithParams: this._routeWithParams,
             method,
             body,
@@ -1187,45 +1189,67 @@ const provideQueryClientForDevtools = (queryClient) => {
 
 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.selectedClientId = signal(0);
-        this.selectedQueryPath = signal(null);
+        this.selectedClientIdCtrl = new FormControl(0);
+        this.selectedClientId = toSignal(this.selectedClientIdCtrl.valueChanges.pipe(startWith(this.selectedClientIdCtrl.value)));
+        this.selectedQueryId = signal(null);
         this.selectedClientConfig = computed(() => {
             if (this.queryClientConfigs.length === 1) {
                 return this.queryClientConfigs[0];
             }
-            const index = this.selectedClientId();
+            const index = this.selectedClientId() ?? 0;
             return this.queryClientConfigs[index];
         });
         this.queryStore = computed(() => {
             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 path = this.selectedQueryPath();
-            if (!path) {
+            const id = this.selectedQueryId();
+            const mode = this.queryListMode();
+            if (id === null || !mode) {
                 return null;
             }
-            return this.queries()?.find((q) => q._routeWithParams === path) ?? null;
+            if (mode === 'live') {
+                return this.queries()?.find((q) => q._id === id) ?? null;
+            }
+            return this.queryHistory()?.find((q) => q._id === id) ?? null;
         });
+        this.queryHistory = signal([]);
         this.trackByClient = (_, { client }) => client.config.baseRoute;
-        this.trackByQuery = (_, { _routeWithParams }) => _routeWithParams;
-        const change$ = new Subject();
-        effect(() => {
-            change$.next(true);
-            const store = this.queryStore();
-            store.storeChange$
-                .pipe(startWith(''), map(() => store._store), tap((s) => this._queries$.next(Array.from(s.values()))), takeUntil(change$), takeUntil(this._destroy$))
-                .subscribe();
-        }, { allowSignalWrites: true });
+        this.trackByQuery = (_, { _id }) => _id;
+        this.selectedClientIdCtrl.valueChanges
+            .pipe(tap(() => this.clearQueryHistory()), takeUntil(this._destroy$))
+            .subscribe();
+        this.queryStore$
+            .pipe(switchMap((s) => s.storeChange$.pipe(startWith(''), map(() => s._store), tap((s) => this._queries$.next(Array.from(s.values()))), takeUntil(this._destroy$))))
+            .subscribe();
+        this._queries$
+            .pipe(tap((queries) => {
+            const currentHistory = this.queryHistory();
+            if (!queries || !currentHistory)
+                return;
+            const currentHistoryClone = [...currentHistory];
+            for (const query of queries) {
+                if (!currentHistoryClone.includes(query)) {
+                    currentHistoryClone.unshift(query);
+                }
+            }
+            currentHistoryClone.splice(50);
+            this.queryHistory.set(currentHistoryClone);
+        }), takeUntil(this._destroy$))
+            .subscribe();
         effect(() => {
             const devtoolConfig = {
                 isOpen: this.isOpen(),
@@ -1234,7 +1258,8 @@ class QueryDevtoolsComponent {
                 showResponse: this.showResponse(),
                 showRawResponse: this.showRawResponse(),
                 selectedClientId: this.selectedClientId(),
-                selectedQueryPath: this.selectedQueryPath(),
+                selectedQueryPath: this.selectedQueryId(),
+                queryListMode: this.queryListMode(),
             };
             window.localStorage.setItem('ethlete:query:devtools', JSON.stringify(devtoolConfig));
         });
@@ -1246,8 +1271,9 @@ class QueryDevtoolsComponent {
             this.snapLayout.set(parsed.snapLayout ?? 'full');
             this.showResponse.set(parsed.showResponse ?? false);
             this.showRawResponse.set(parsed.showRawResponse ?? false);
-            this.selectedClientId.set(parsed.selectedClientId ?? 0);
-            this.selectedQueryPath.set(parsed.selectedQueryPath ?? null);
+            this.selectedClientIdCtrl.setValue(parsed.selectedClientId ?? 0);
+            this.selectedQueryId.set(parsed.selectedQueryPath ?? null);
+            this.queryListMode.set(parsed.queryListMode ?? 'live');
         }
     }
     toggleOpen() {
@@ -1258,6 +1284,9 @@ class QueryDevtoolsComponent {
     }
     toggleShowResponse() {
         this.showResponse.set(!this.showResponse());
+        nextFrame(() => {
+            this._cdr.markForCheck();
+        });
     }
     toggleShowRawResponse() {
         this.showRawResponse.set(!this.showRawResponse());
@@ -1265,20 +1294,23 @@ class QueryDevtoolsComponent {
     selectSnapLayout(layout) {
         this.snapLayout.set(layout);
     }
-    selectClient(clientId) {
-        this.selectedClientId.set(clientId);
+    selectQueryListMode(mode) {
+        this.queryListMode.set(mode);
     }
     selectQuery(query) {
-        this.selectedQueryPath.set(query._routeWithParams);
+        this.selectedQueryId.set(query._id);
+    }
+    clearQueryHistory() {
+        this.queryHistory.set([]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn\">Open Devtools</button>\n\n<div\n  *ngIf=\"isOpen()\"\n  [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n  class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close-btn\">Close Devtools</button>\n  <button (click)=\"toggleTranslucent()\" class=\"et-query-devtools-translucent-btn\">Toggle Translucent</button>\n  <button (click)=\"selectSnapLayout('full')\" class=\"et-query-devtools-snap-btn\">Snap full</button>\n  <button (click)=\"selectSnapLayout('top')\" class=\"et-query-devtools-snap-btn\">Snap top</button>\n  <button (click)=\"selectSnapLayout('bottom')\" class=\"et-query-devtools-snap-btn\">Snap bottom</button>\n  <button (click)=\"selectSnapLayout('left')\" class=\"et-query-devtools-snap-btn\">Snap left</button>\n  <button (click)=\"selectSnapLayout('right')\" class=\"et-query-devtools-snap-btn\">Snap right</button>\n\n  <ng-container *ngIf=\"queryClientConfigs.length > 1\">\n    <p>Client instance:</p>\n    <ul>\n      <li *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\">\n        <button (click)=\"selectClient(i)\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedClientConfig() as cfg\">\n    <p>{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n    <button (click)=\"cfg.client._store.refreshQueriesInUse()\">Force Refresh of in use queries</button> <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\">HARD Force Refresh</button>\n    <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\">\n      PURGE & HARD Force Refresh\n    </button>\n\n    <ul>\n      <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n        <button (click)=\"selectQuery(query)\">\n          {{ query._routeWithParams }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedQuery() as query\">\n    <p>{{ query._routeWithParams }}</p>\n\n    <button (click)=\"query.execute()\">Execute</button> <br />\n    <button (click)=\"query.execute({ skipCache: true })\">FORCE Execute</button> <br />\n    <button (click)=\"query.abort()\">Abort</button> <br />\n    <button (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\">Poll</button> <br />\n    <button (click)=\"query.stopPolling()\">Stop polling</button> <br />\n    <button (click)=\"query.pausePolling()\">Pause polling</button> <br />\n    <button (click)=\"query.resumePolling()\">Resume polling</button> <br />\n\n    <div>\n      <p>state type</p>\n      <pre>{{ query.rawState.type }}</pre>\n    </div>\n\n    <div>\n      <p>_enableSmartPolling:</p>\n      <pre>{{ query._enableSmartPolling }}</pre>\n    </div>\n\n    <div>\n      <p>isExpired:</p>\n      <pre>{{ query.isExpired }}</pre>\n    </div>\n\n    <div>\n      <p>isInUse:</p>\n      <pre>{{ query.isInUse }}</pre>\n    </div>\n\n    <div>\n      <p>_subscriberCount:</p>\n      <pre>{{ query._subscriberCount }}</pre>\n    </div>\n\n    <div>\n      <p>isPolling:</p>\n      <pre>{{ query.isPolling }}</pre>\n    </div>\n\n    <div>\n      <p>_arguments:</p>\n      <pre>{{ query._arguments | json }}</pre>\n    </div>\n\n    <div>\n      <p>state$:</p>\n      <p><i> Warning, this will cause a subscription if shown </i></p>\n      <button (click)=\"toggleShowResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n    </div>\n\n    <div>\n      <p>rawState:</p>\n      <button (click)=\"toggleShowRawResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n    </div>\n  </ng-container>\n</div>\n", styles: [".et-query-devtools-container{position:fixed;inset:0;background-color:#000;z-index:10000;overflow:auto}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Open Devtools</button>\n\n<div\n  *ngIf=\"isOpen()\"\n  [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n  class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n  <header class=\"et-qd-header\">\n    <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n    <div class=\"et-qd-header__select\">\n      <label for=\"et-query-client-instance\">Client instance</label>\n      <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n        <option *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\" [value]=\"i\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </option>\n      </select>\n    </div>\n\n    <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n  </header>\n\n  <div class=\"et-qd-sub-header\">\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n      (click)=\"toggleTranslucent()\"\n      class=\"et-qd-chip et-qd-translucent-clickable\"\n    >\n      Translucent\n    </button>\n    <div class=\"et-qd-sub-header__divider\"></div>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n      (click)=\"selectSnapLayout('full')\"\n      class=\"et-qd-chip\"\n    >\n      Fullscreen\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n      (click)=\"selectSnapLayout('top')\"\n      class=\"et-qd-chip\"\n    >\n      Top\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n      (click)=\"selectSnapLayout('bottom')\"\n      class=\"et-qd-chip\"\n    >\n      Bottom\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n      (click)=\"selectSnapLayout('left')\"\n      class=\"et-qd-chip\"\n    >\n      Left\n    </button>\n    <button\n      [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n      (click)=\"selectSnapLayout('right')\"\n      class=\"et-qd-chip\"\n    >\n      Right\n    </button>\n  </div>\n\n  <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-client\">\n    <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n    <div class=\"et-qd-client__actions\">\n      <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n      <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n        Refresh all (ignore caches)\n      </button>\n      <button\n        (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n        class=\"et-qd-chip\"\n      >\n        Refresh all (ignore caches & purge unused)\n      </button>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-queries\">\n    <p class=\"et-qd-queries__title\">Query browser</p>\n    <div class=\"et-qd-queries__actions\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' }\"\n        (click)=\"selectQueryListMode('live')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        Live ({{ queries()?.length ?? 0 }})\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' }\"\n        (click)=\"selectQueryListMode('history')\"\n        class=\"et-qd-chip et-qd-chip-bordered\"\n      >\n        History ({{ queryHistory().length }}/50)\n      </button>\n      <ng-container *ngIf=\"queryListMode() === 'history'\">\n        <div class=\"et-qd-queries__divider\"></div>\n        <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n      </ng-container>\n    </div>\n\n    <div class=\"et-qd-queries__browser\">\n      <ul *ngIf=\"queryListMode() === 'live'\" class=\"et-qd-queries__browser-list\">\n        <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n          <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n            <span> {{ query._routeWithParams }}</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            {{ query._routeWithParams }}\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\">{{ query._routeWithParams }}</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              <pre>{{ 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          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".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:50px;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}.et-qd-queries__browser-list li button span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-query-devtools', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
                         class: 'et-query-devtools',
-                    }, imports: [NgIf, NgFor, AsyncPipe, JsonPipe], hostDirectives: [], template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn\">Open Devtools</button>\n\n<div\n  *ngIf=\"isOpen()\"\n  [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n  class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close-btn\">Close Devtools</button>\n  <button (click)=\"toggleTranslucent()\" class=\"et-query-devtools-translucent-btn\">Toggle Translucent</button>\n  <button (click)=\"selectSnapLayout('full')\" class=\"et-query-devtools-snap-btn\">Snap full</button>\n  <button (click)=\"selectSnapLayout('top')\" class=\"et-query-devtools-snap-btn\">Snap top</button>\n  <button (click)=\"selectSnapLayout('bottom')\" class=\"et-query-devtools-snap-btn\">Snap bottom</button>\n  <button (click)=\"selectSnapLayout('left')\" class=\"et-query-devtools-snap-btn\">Snap left</button>\n  <button (click)=\"selectSnapLayout('right')\" class=\"et-query-devtools-snap-btn\">Snap right</button>\n\n  <ng-container *ngIf=\"queryClientConfigs.length > 1\">\n    <p>Client instance:</p>\n    <ul>\n      <li *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\">\n        <button (click)=\"selectClient(i)\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedClientConfig() as cfg\">\n    <p>{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n    <button (click)=\"cfg.client._store.refreshQueriesInUse()\">Force Refresh of in use queries</button> <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\">HARD Force Refresh</button>\n    <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\">\n      PURGE & HARD Force Refresh\n    </button>\n\n    <ul>\n      <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n        <button (click)=\"selectQuery(query)\">\n          {{ query._routeWithParams }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedQuery() as query\">\n    <p>{{ query._routeWithParams }}</p>\n\n    <button (click)=\"query.execute()\">Execute</button> <br />\n    <button (click)=\"query.execute({ skipCache: true })\">FORCE Execute</button> <br />\n    <button (click)=\"query.abort()\">Abort</button> <br />\n    <button (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\">Poll</button> <br />\n    <button (click)=\"query.stopPolling()\">Stop polling</button> <br />\n    <button (click)=\"query.pausePolling()\">Pause polling</button> <br />\n    <button (click)=\"query.resumePolling()\">Resume polling</button> <br />\n\n    <div>\n      <p>state type</p>\n      <pre>{{ query.rawState.type }}</pre>\n    </div>\n\n    <div>\n      <p>_enableSmartPolling:</p>\n      <pre>{{ query._enableSmartPolling }}</pre>\n    </div>\n\n    <div>\n      <p>isExpired:</p>\n      <pre>{{ query.isExpired }}</pre>\n    </div>\n\n    <div>\n      <p>isInUse:</p>\n      <pre>{{ query.isInUse }}</pre>\n    </div>\n\n    <div>\n      <p>_subscriberCount:</p>\n      <pre>{{ query._subscriberCount }}</pre>\n    </div>\n\n    <div>\n      <p>isPolling:</p>\n      <pre>{{ query.isPolling }}</pre>\n    </div>\n\n    <div>\n      <p>_arguments:</p>\n      <pre>{{ query._arguments | json }}</pre>\n    </div>\n\n    <div>\n      <p>state$:</p>\n      <p><i> Warning, this will cause a subscription if shown </i></p>\n      <button (click)=\"toggleShowResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n    </div>\n\n    <div>\n      <p>rawState:</p>\n      <button (click)=\"toggleShowRawResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n    </div>\n  </ng-container>\n</div>\n", styles: [".et-query-devtools-container{position:fixed;inset:0;background-color:#000;z-index:10000;overflow:auto}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999}\n"] }]
+                    }, imports: [NgIf, NgFor, AsyncPipe, JsonPipe, ReactiveFormsModule, NgClass], 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._routeWithParams }}</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            {{ query._routeWithParams }}\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\">{{ query._routeWithParams }}</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              <pre>{{ 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          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".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:50px;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}.et-qd-queries__browser-list li button span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.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 {
@@ -1708,7 +1740,7 @@ class InfinityQueryDirective {
         this._data$.next([]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.6", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }], exportAs: ["etInfinityQuery"], hostDirectives: [{ directive: i1.DelayableDirective }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.6", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }], exportAs: ["etInfinityQuery"], hostDirectives: [{ directive: i1$1.DelayableDirective }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,