@ethlete/query 4.16.1 → 4.16.3

package/fesm2022/ethlete-query.mjs

@@ -596,7 +596,7 @@ class QueryCreator {
                 queryParams: computeQueryQueryParams({ config: this._queryConfig, client: this._client, args }),
                 queryParamConfig: this._client.config.request?.queryParams,
             });
-            const cacheKey = args?.config?.queryStoreCacheKey ??
+            const cacheKey = (args?.config?.queryStoreCacheKey ?? '') +
                 (isGqlQueryConfig(this._queryConfig) ? buildGqlCacheKey(this._queryConfig, args) : route);
             if (shouldCacheQuery(this._queryConfig.method) && !args?.config?.skipQueryStore) {
                 const existingQuery = this._store.get(cacheKey);
@@ -1699,7 +1699,7 @@ class QueryDevtoolsComponent {
             if (mode === 'live') {
                 return this.queries()?.find((q) => q._id === id) ?? null;
             }
-            return this.queryHistory()?.find((q) => q._id === id) ?? null;
+            return this.queryHistory$.getValue()?.find((q) => q._id === id) ?? null;
         });
         this.selectedQuery$ = toObservable(this.selectedQuery);
         this.selectedQueryEntityStore = computed(() => {
@@ -1717,7 +1717,7 @@ class QueryDevtoolsComponent {
                 return obj;
             }, {});
         })) ?? of(null)));
-        this.queryHistory = signal([]);
+        this.queryHistory$ = new BehaviorSubject([]);
         this.stringifiedQueryConfig = computed(() => {
             const query = this.selectedQuery();
             if (!query)
@@ -1759,7 +1759,7 @@ class QueryDevtoolsComponent {
             .subscribe();
         this.queryStore$
             .pipe(switchMap((s) => s.queryCreated$.pipe(tap((query) => {
-            const currentHistory = this.queryHistory();
+            const currentHistory = this.queryHistory$.getValue();
             if (!currentHistory)
                 return;
             const currentHistoryClone = [...currentHistory];
@@ -1767,12 +1767,12 @@ class QueryDevtoolsComponent {
                 currentHistoryClone.unshift(query);
             }
             currentHistoryClone.splice(50);
-            this.queryHistory.set(currentHistoryClone);
+            this.queryHistory$.next(currentHistoryClone);
         }), takeUntil(this._destroy$))))
             .subscribe();
         this._queries$
             .pipe(tap((queries) => {
-            const currentHistory = this.queryHistory();
+            const currentHistory = this.queryHistory$.getValue();
             if (!queries || !currentHistory)
                 return;
             const currentHistoryClone = [...currentHistory];
@@ -1782,7 +1782,7 @@ class QueryDevtoolsComponent {
                 }
             }
             currentHistoryClone.splice(50);
-            this.queryHistory.set(currentHistoryClone);
+            this.queryHistory$.next(currentHistoryClone);
         }), takeUntil(this._destroy$))
             .subscribe();
         effect(() => {
@@ -1851,16 +1851,16 @@ class QueryDevtoolsComponent {
         this.selectedQueryId.set(query._id);
     }
     clearQueryHistory() {
-        this.queryHistory.set([]);
+        this.queryHistory$.next([]);
     }
     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>Dependents</p>\n              <pre>{{ query._dependents | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is expired</p>\n              <pre>{{ query.isExpired }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is in use</p>\n              <pre>{{ query.isInUse }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Subscriber count</p>\n              <pre>{{ query._subscriberCount }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is polling</p>\n              <pre>{{ query.isPolling }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is polling paused</p>\n              <pre>{{ query._isPollingPaused }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Enable smart polling</p>\n              <pre>{{ query._enableSmartPolling }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Query store key</p>\n              <pre>{{ query._queryStoreKey }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Arguments</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                  (click)=\"toggleShowArguments()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <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$ | async)?.length ?? 0 }}/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$ | async; 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>Query store key</p>\n              <pre>{{ query._queryStoreKey }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Arguments</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                  (click)=\"toggleShowArguments()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <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>Dependents</p>\n              <pre>{{ query._dependents | json }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is expired</p>\n              <pre>{{ query.isExpired }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is in use</p>\n              <pre>{{ query.isInUse }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Subscriber count</p>\n              <pre>{{ query._subscriberCount }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is polling</p>\n              <pre>{{ query.isPolling }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Is polling paused</p>\n              <pre>{{ query._isPollingPaused }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Enable smart polling</p>\n              <pre>{{ query._enableSmartPolling }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Query store key</p>\n              <pre>{{ query._queryStoreKey }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Arguments</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                  (click)=\"toggleShowArguments()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <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$ | async)?.length ?? 0 }}/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$ | async; 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>Query store key</p>\n              <pre>{{ query._queryStoreKey }}</pre>\n            </div>\n\n            <div class=\"et-qd-list-item\">\n              <p>Arguments</p>\n\n              <div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                  (click)=\"toggleShowArguments()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Toggle\n                </button>\n              </div>\n              <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 {
@@ -1920,7 +1920,7 @@ class QueryDirective {
             this._viewContext.query = null;
             return;
         }
-        if (isQueryStatePrepared(query.rawState)) {
+        if (isQueryStatePrepared(query.rawState) || isQueryStateCancelled(query.rawState)) {
             query.execute();
         }
         const sub = query.state$.pipe(tap((state) => this._updateView(state))).subscribe();