@ethlete/query 5.16.2 → 5.18.0

package/fesm2022/ethlete-query.mjs

@@ -1,12 +1,13 @@
 import * as i1 from '@ethlete/core';
-import { createDestroy, computedTillTruthy, getCookie, setCookie, deleteCookie, DelayableDirective, nextFrame, RouterStateService, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
-import { Observable, takeUntil, startWith, pairwise, tap, switchMap, of, BehaviorSubject, Subject, fromEvent, timer, take, filter, takeWhile, map, shareReplay, ReplaySubject, combineLatest, interval, skip, withLatestFrom, debounceTime, merge } from 'rxjs';
+import { createDestroy, computedTillTruthy, getCookie, setCookie, deleteCookie, DelayableDirective, nextFrame, RuntimeError, isObject, getDomain, syncSignal, injectQueryParamChanges, injectQueryParams, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
+import { Observable, takeUntil, startWith, pairwise, tap, switchMap, of, BehaviorSubject, Subject, fromEvent, timer, take, filter, takeWhile, map, shareReplay, ReplaySubject, combineLatest, interval, skip, withLatestFrom, debounceTime, Subscription, retry, throwError, catchError, merge } from 'rxjs';
 import * as i0 from '@angular/core';
-import { assertInInjectionContext, inject, Injector, computed, signal, isDevMode, untracked, TemplateRef, ViewContainerRef, ErrorHandler, ChangeDetectorRef, Directive, Input, InjectionToken, ElementRef, Pipe, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, NgZone } from '@angular/core';
+import { assertInInjectionContext, inject, Injector, computed, signal, isDevMode, untracked, TemplateRef, ViewContainerRef, ErrorHandler, ChangeDetectorRef, Directive, Input, InjectionToken, ElementRef, Pipe, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, DestroyRef, runInInjectionContext, NgZone } from '@angular/core';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { AsyncPipe, JsonPipe, NgClass } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormGroup } from '@angular/forms';
+import { HttpErrorResponse, HttpStatusCode, HttpEventType, HttpClient, HttpHeaders } from '@angular/common/http';
 import { Router, ActivatedRoute } from '@angular/router';
 
 class CustomHeaderAuthProvider {
@@ -154,7 +155,7 @@ const buildQueryString = (params, config) => {
     }
     return queryParams.length ? queryParams.join('&') : null;
 };
-const extractExpiresInSeconds = (headers) => {
+const extractExpiresInSeconds$1 = (headers) => {
     const cacheControl = headers['cache-control'];
     const age = headers['age'];
     const expires = headers['expires'];
@@ -292,7 +293,7 @@ const getResponseUrl = (xhr) => {
     }
     return null;
 };
-const shouldRetryRequest = (config) => {
+const shouldRetryRequest$1 = (config) => {
     const defaultRetryDelay = 1000 + 1000 * config.currentRetryCount;
     if (config.currentRetryCount > 3) {
         return { retry: false };
@@ -339,7 +340,7 @@ const request = (config) => {
     const responseType = config.responseType || 'json';
     const body = config.body || null;
     const url = config.urlWithParams.split('?')[0] || '';
-    const retryFn = config.retryFn || shouldRetryRequest;
+    const retryFn = config.retryFn || shouldRetryRequest$1;
     let currentRetryCount = 0;
     let retryTimeout = null;
     return new Observable((observer) => {
@@ -432,7 +433,7 @@ const request = (config) => {
                     headers,
                     response: body,
                 };
-                const expiresInSeconds = config.cacheAdapter?.(headers) ?? extractExpiresInSeconds(headers);
+                const expiresInSeconds = config.cacheAdapter?.(headers) ?? extractExpiresInSeconds$1(headers);
                 const expiresInTimestamp = buildTimestampFromSeconds(expiresInSeconds);
                 if (expiresInTimestamp) {
                     successEvent.expiresInTimestamp = expiresInTimestamp;
@@ -1512,7 +1513,7 @@ class Query {
                 break;
             }
             case 'success': {
-                const { response, expiresInTimestamp } = requestEvent;
+                const { response, expiresInTimestamp, headers } = requestEvent;
                 const isGql = isGqlQueryConfig(this._queryConfig);
                 const responseData = isGql && typeof response === 'object' && !!response && 'data' in response
                     ? response['data']
@@ -1529,6 +1530,7 @@ class Query {
                 this._updateState({
                     type: "SUCCESS" /* QueryStateType.Success */,
                     response: responseData,
+                    headers: headers,
                     meta: { ...meta, expiresAt: expiresInTimestamp },
                 });
                 break;
@@ -1957,10 +1959,10 @@ class QueryDirective {
             this._viewContainerRef.createEmbeddedView(this._mainTemplateRef, this._viewContext);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.4", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: QueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: QueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2268,10 +2270,10 @@ class InfinityQueryDirective {
         this._viewContext.currentQuery = null;
         this._data$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }], exportAs: ["etInfinityQuery"], hostDirectives: [{ directive: i1.DelayableDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.4", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }], exportAs: ["etInfinityQuery"], hostDirectives: [{ directive: i1.DelayableDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InfinityQueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2324,10 +2326,10 @@ class InfinityQueryTriggerDirective {
         });
         this._observer.observe(this._elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.4", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2352,10 +2354,10 @@ class QueryShortNamePipe {
         }
         return route;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.4", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: QueryShortNamePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: QueryShortNamePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'queryShortName', standalone: true }]
         }] });
@@ -2646,10 +2648,10 @@ class QueryDevtoolsComponent {
     clearQueryHistory() {
         this.queryHistory$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "@if (!isOpen()) {\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Query Devtools</button>\n}\n\n@if (isOpen()) {\n  <div\n    [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n    class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n  >\n    <header class=\"et-qd-header\">\n      <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n      <div class=\"et-qd-header__select\">\n        <label for=\"et-query-client-instance\">Client instance</label>\n        <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n          @for (clientConfig of queryClientConfigs; track trackByClient(i, clientConfig); let i = $index) {\n            <option [value]=\"i\">\n              {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n            </option>\n          }\n        </select>\n      </div>\n\n      <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n    </header>\n\n    <div class=\"et-qd-sub-header\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n        (click)=\"toggleTranslucent()\"\n        class=\"et-qd-chip et-qd-translucent-clickable\"\n      >\n        Translucent\n      </button>\n      <div class=\"et-qd-sub-header__divider\"></div>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n        (click)=\"selectSnapLayout('full')\"\n        class=\"et-qd-chip\"\n      >\n        Fullscreen\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n        (click)=\"selectSnapLayout('top')\"\n        class=\"et-qd-chip\"\n      >\n        Top\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n        (click)=\"selectSnapLayout('bottom')\"\n        class=\"et-qd-chip\"\n      >\n        Bottom\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n        (click)=\"selectSnapLayout('left')\"\n        class=\"et-qd-chip\"\n      >\n        Left\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n        (click)=\"selectSnapLayout('right')\"\n        class=\"et-qd-chip\"\n      >\n        Right\n      </button>\n    </div>\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-client\">\n        <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n        <div class=\"et-qd-client__actions\">\n          <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n          <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n            Refresh all (ignore caches)\n          </button>\n          <button\n            (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n            class=\"et-qd-chip\"\n          >\n            Refresh all (ignore caches & purge unused)\n          </button>\n        </div>\n      </div>\n    }\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-queries\">\n        <p class=\"et-qd-queries__title\">Inspector</p>\n        <div class=\"et-qd-queries__actions\">\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' || viewMode() !== 'query' }\"\n            (click)=\"selectQueryListMode('live'); selectViewMode('query')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Live Queries ({{ queries()?.length ?? 0 }})\n          </button>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' || viewMode() !== 'query' }\"\n            (click)=\"selectQueryListMode('history'); selectViewMode('query')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Query History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n          </button>\n          @if (queryListMode() === 'history' && viewMode() === 'query') {\n            <div class=\"et-qd-queries__divider\"></div>\n            <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n          }\n\n          <div class=\"et-qd-queries__divider\"></div>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': viewMode() !== 'authProvider' }\"\n            (click)=\"selectViewMode('authProvider')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Auth Provider\n          </button>\n        </div>\n\n        @if (viewMode() === 'query') {\n          <div class=\"et-qd-queries__browser\">\n            @if (queryListMode() === 'live') {\n              <ul class=\"et-qd-queries__browser-list\">\n                @for (query of queries(); track trackByQuery($index, query)) {\n                  <li>\n                    <button\n                      [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n                      (click)=\"selectQuery(query)\"\n                    >\n                      <span> {{ query._queryConfig.method }}</span>\n                      <span> {{ query | queryShortName }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            @if (queryListMode() === 'history') {\n              <ul class=\"et-qd-queries__browser-list\">\n                @for (query of queryHistory$ | async; track trackByQuery($index, query)) {\n                  <li>\n                    <button\n                      [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n                      (click)=\"selectQuery(query)\"\n                    >\n                      <span> {{ query._queryConfig.method }}</span>\n                      <span> {{ query | queryShortName }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            <div class=\"et-qd-queries__browser-detail\">\n              @if (selectedQuery(); as query) {\n                <p class=\"et-qd-queries__browser-detail__title\">\n                  {{ query._queryConfig.method }} {{ query._routeWithParams }}\n                </p>\n\n                <div class=\"et-qd-queries__actions\">\n                  <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n                  <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n                    Execute (ignore cache)\n                  </button>\n\n                  <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n                  <div class=\"et-qd-queries__divider\"></div>\n                  <button\n                    [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n                    (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n                    class=\"et-qd-chip et-qd-chip-bordered\"\n                  >\n                    Poll\n                  </button>\n\n                  <button\n                    [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n                    (click)=\"query.stopPolling()\"\n                    class=\"et-qd-chip et-qd-chip-bordered\"\n                  >\n                    Stop polling\n                  </button>\n                  @if (query.isPolling || query._isPollingPaused) {\n                    <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                      Pause polling\n                    </button>\n                    <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                      Resume polling\n                    </button>\n                  }\n                </div>\n\n                <div class=\"et-qd-list\">\n                  <div class=\"et-qd-list-item\">\n                    <p>State type</p>\n                    <pre>{{ query.rawState.type }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Dependents</p>\n                    <pre>{{ query._dependents | json }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is expired</p>\n                    <pre>{{ query.isExpired }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is in use</p>\n                    <pre>{{ query.isInUse }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Subscriber count</p>\n                    <pre>{{ query._subscriberCount }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is polling</p>\n                    <pre>{{ query.isPolling }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is polling paused</p>\n                    <pre>{{ query._isPollingPaused }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Enable smart polling</p>\n                    <pre>{{ query._enableSmartPolling }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Query store key</p>\n                    <pre>{{ query._queryStoreKey }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Arguments</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                        (click)=\"toggleShowArguments()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showArguments()) {\n                      <pre>{{ query._arguments | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>State</p>\n                    <p><i> Warning, this will cause a subscription if shown!</i></p>\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n                        (click)=\"toggleShowResponse()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showResponse()) {\n                      <pre>{{ query.state$ | async | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Raw state</p>\n                    <p><i> The query state unaffected by entity stores</i></p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n                        (click)=\"toggleShowRawResponse()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showRawResponse()) {\n                      <pre>{{ query.rawState | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Query config</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n                        (click)=\"toggleShowQueryConfig()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showQueryConfig()) {\n                      <pre>{{ stringifiedQueryConfig() | json }}</pre>\n                    }\n                  </div>\n\n                  @if (!!query._queryConfig.entity) {\n                    <div class=\"et-qd-list-item\">\n                      <p>Entity store value</p>\n\n                      <div>\n                        <button\n                          [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n                          (click)=\"toggleShowEntityStoreValue()\"\n                          class=\"et-qd-chip et-qd-chip-bordered\"\n                        >\n                          Toggle\n                        </button>\n                      </div>\n                      @if (showEntityStoreValue()) {\n                        <pre>{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        } @else if (viewMode() === 'authProvider') {\n          <div class=\"et-qd-auth-provider__viewer\">\n            @if (authProviderDetails(); as details) {\n              <div class=\"et-qd-list\">\n                <div class=\"et-qd-list-item\">\n                  <p>Type</p>\n                  <pre>{{ details.type }}</pre>\n                </div>\n                <div class=\"et-qd-list-item\">\n                  <p>Header value</p>\n                  <pre>{{ details.header() | json }}</pre>\n                </div>\n                <div class=\"et-qd-list-item\">\n                  <p>Config</p>\n                  <pre>{{ details.config | json }}</pre>\n                </div>\n\n                @if (details.type === 'BearerAuthProvider') {\n                  <div class=\"et-qd-list-item\">\n                    <p>Tokens</p>\n                    <pre>{{ details.provider.tokens$ | async | json }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Should refresh on unauthorized response</p>\n                    <pre>{{ details.provider.shouldRefreshOnUnauthorizedResponse }}</pre>\n                  </div>\n\n                  <ng-container\n                    *etQuery=\"\n                      details.provider.currentRefreshQuery$ | async as response;\n                      loading as loading;\n                      error as error;\n                      query as query\n                    \"\n                  >\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query response</p>\n\n                      <div>\n                        <button (click)=\"details.provider._refreshQuery()\" class=\"et-qd-chip et-qd-chip-bordered\">\n                          Refresh\n                        </button>\n                      </div>\n                      <pre>{{ response | json }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query loading</p>\n                      <pre>{{ loading }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query error</p>\n                      <pre>{{ error ?? 'null' }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>State</p>\n                      <pre>{{ query?.state$ | async | json }}</pre>\n                    </div>\n                  </ng-container>\n                }\n              </div>\n            } @else {\n              <p>No auth provider set</p>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%;border-right:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%;border-top:1px solid rgb(37,41,46)}button.et-query-devtools-open-btn{position:fixed;inset-inline-end:20px;inset-block-end:0;z-index:9999;font-family:monospace;border-radius:3px 3px 0 0;line-height:14px;font-size:12px}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid #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;grid-template-columns:auto minmax(0,1fr);gap:2px;display:block}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-auth-provider__viewer{border-top:1px solid #3c424a;margin-left:-12px;margin-right:-12px;margin-bottom:-12px;padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }, { kind: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "@if (!isOpen()) {\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Query Devtools</button>\n}\n\n@if (isOpen()) {\n  <div\n    [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n    class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n  >\n    <header class=\"et-qd-header\">\n      <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n      <div class=\"et-qd-header__select\">\n        <label for=\"et-query-client-instance\">Client instance</label>\n        <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n          @for (clientConfig of queryClientConfigs; track trackByClient(i, clientConfig); let i = $index) {\n            <option [value]=\"i\">\n              {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n            </option>\n          }\n        </select>\n      </div>\n\n      <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n    </header>\n\n    <div class=\"et-qd-sub-header\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n        (click)=\"toggleTranslucent()\"\n        class=\"et-qd-chip et-qd-translucent-clickable\"\n      >\n        Translucent\n      </button>\n      <div class=\"et-qd-sub-header__divider\"></div>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n        (click)=\"selectSnapLayout('full')\"\n        class=\"et-qd-chip\"\n      >\n        Fullscreen\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n        (click)=\"selectSnapLayout('top')\"\n        class=\"et-qd-chip\"\n      >\n        Top\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n        (click)=\"selectSnapLayout('bottom')\"\n        class=\"et-qd-chip\"\n      >\n        Bottom\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n        (click)=\"selectSnapLayout('left')\"\n        class=\"et-qd-chip\"\n      >\n        Left\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n        (click)=\"selectSnapLayout('right')\"\n        class=\"et-qd-chip\"\n      >\n        Right\n      </button>\n    </div>\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-client\">\n        <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n        <div class=\"et-qd-client__actions\">\n          <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n          <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n            Refresh all (ignore caches)\n          </button>\n          <button\n            (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n            class=\"et-qd-chip\"\n          >\n            Refresh all (ignore caches & purge unused)\n          </button>\n        </div>\n      </div>\n    }\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-queries\">\n        <p class=\"et-qd-queries__title\">Inspector</p>\n        <div class=\"et-qd-queries__actions\">\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' || viewMode() !== 'query' }\"\n            (click)=\"selectQueryListMode('live'); selectViewMode('query')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Live Queries ({{ queries()?.length ?? 0 }})\n          </button>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' || viewMode() !== 'query' }\"\n            (click)=\"selectQueryListMode('history'); selectViewMode('query')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Query History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n          </button>\n          @if (queryListMode() === 'history' && viewMode() === 'query') {\n            <div class=\"et-qd-queries__divider\"></div>\n            <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n          }\n\n          <div class=\"et-qd-queries__divider\"></div>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': viewMode() !== 'authProvider' }\"\n            (click)=\"selectViewMode('authProvider')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Auth Provider\n          </button>\n        </div>\n\n        @if (viewMode() === 'query') {\n          <div class=\"et-qd-queries__browser\">\n            @if (queryListMode() === 'live') {\n              <ul class=\"et-qd-queries__browser-list\">\n                @for (query of queries(); track trackByQuery($index, query)) {\n                  <li>\n                    <button\n                      [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n                      (click)=\"selectQuery(query)\"\n                    >\n                      <span> {{ query._queryConfig.method }}</span>\n                      <span> {{ query | queryShortName }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            @if (queryListMode() === 'history') {\n              <ul class=\"et-qd-queries__browser-list\">\n                @for (query of queryHistory$ | async; track trackByQuery($index, query)) {\n                  <li>\n                    <button\n                      [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\"\n                      (click)=\"selectQuery(query)\"\n                    >\n                      <span> {{ query._queryConfig.method }}</span>\n                      <span> {{ query | queryShortName }}</span>\n                    </button>\n                  </li>\n                }\n              </ul>\n            }\n            <div class=\"et-qd-queries__browser-detail\">\n              @if (selectedQuery(); as query) {\n                <p class=\"et-qd-queries__browser-detail__title\">\n                  {{ query._queryConfig.method }} {{ query._routeWithParams }}\n                </p>\n\n                <div class=\"et-qd-queries__actions\">\n                  <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n                  <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n                    Execute (ignore cache)\n                  </button>\n\n                  <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n                  <div class=\"et-qd-queries__divider\"></div>\n                  <button\n                    [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n                    (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n                    class=\"et-qd-chip et-qd-chip-bordered\"\n                  >\n                    Poll\n                  </button>\n\n                  <button\n                    [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n                    (click)=\"query.stopPolling()\"\n                    class=\"et-qd-chip et-qd-chip-bordered\"\n                  >\n                    Stop polling\n                  </button>\n                  @if (query.isPolling || query._isPollingPaused) {\n                    <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                      Pause polling\n                    </button>\n                    <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                      Resume polling\n                    </button>\n                  }\n                </div>\n\n                <div class=\"et-qd-list\">\n                  <div class=\"et-qd-list-item\">\n                    <p>State type</p>\n                    <pre>{{ query.rawState.type }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Dependents</p>\n                    <pre>{{ query._dependents | json }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is expired</p>\n                    <pre>{{ query.isExpired }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is in use</p>\n                    <pre>{{ query.isInUse }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Subscriber count</p>\n                    <pre>{{ query._subscriberCount }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is polling</p>\n                    <pre>{{ query.isPolling }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Is polling paused</p>\n                    <pre>{{ query._isPollingPaused }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Enable smart polling</p>\n                    <pre>{{ query._enableSmartPolling }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Query store key</p>\n                    <pre>{{ query._queryStoreKey }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Arguments</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                        (click)=\"toggleShowArguments()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showArguments()) {\n                      <pre>{{ query._arguments | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>State</p>\n                    <p><i> Warning, this will cause a subscription if shown!</i></p>\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n                        (click)=\"toggleShowResponse()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showResponse()) {\n                      <pre>{{ query.state$ | async | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Raw state</p>\n                    <p><i> The query state unaffected by entity stores</i></p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n                        (click)=\"toggleShowRawResponse()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showRawResponse()) {\n                      <pre>{{ query.rawState | json }}</pre>\n                    }\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Query config</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n                        (click)=\"toggleShowQueryConfig()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showQueryConfig()) {\n                      <pre>{{ stringifiedQueryConfig() | json }}</pre>\n                    }\n                  </div>\n\n                  @if (!!query._queryConfig.entity) {\n                    <div class=\"et-qd-list-item\">\n                      <p>Entity store value</p>\n\n                      <div>\n                        <button\n                          [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n                          (click)=\"toggleShowEntityStoreValue()\"\n                          class=\"et-qd-chip et-qd-chip-bordered\"\n                        >\n                          Toggle\n                        </button>\n                      </div>\n                      @if (showEntityStoreValue()) {\n                        <pre>{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        } @else if (viewMode() === 'authProvider') {\n          <div class=\"et-qd-auth-provider__viewer\">\n            @if (authProviderDetails(); as details) {\n              <div class=\"et-qd-list\">\n                <div class=\"et-qd-list-item\">\n                  <p>Type</p>\n                  <pre>{{ details.type }}</pre>\n                </div>\n                <div class=\"et-qd-list-item\">\n                  <p>Header value</p>\n                  <pre>{{ details.header() | json }}</pre>\n                </div>\n                <div class=\"et-qd-list-item\">\n                  <p>Config</p>\n                  <pre>{{ details.config | json }}</pre>\n                </div>\n\n                @if (details.type === 'BearerAuthProvider') {\n                  <div class=\"et-qd-list-item\">\n                    <p>Tokens</p>\n                    <pre>{{ details.provider.tokens$ | async | json }}</pre>\n                  </div>\n\n                  <div class=\"et-qd-list-item\">\n                    <p>Should refresh on unauthorized response</p>\n                    <pre>{{ details.provider.shouldRefreshOnUnauthorizedResponse }}</pre>\n                  </div>\n\n                  <ng-container\n                    *etQuery=\"\n                      details.provider.currentRefreshQuery$ | async as response;\n                      loading as loading;\n                      error as error;\n                      query as query\n                    \"\n                  >\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query response</p>\n\n                      <div>\n                        <button (click)=\"details.provider._refreshQuery()\" class=\"et-qd-chip et-qd-chip-bordered\">\n                          Refresh\n                        </button>\n                      </div>\n                      <pre>{{ response | json }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query loading</p>\n                      <pre>{{ loading }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>Refresh query error</p>\n                      <pre>{{ error ?? 'null' }}</pre>\n                    </div>\n                    <div class=\"et-qd-list-item\">\n                      <p>State</p>\n                      <pre>{{ query?.state$ | async | json }}</pre>\n                    </div>\n                  </ng-container>\n                }\n              </div>\n            } @else {\n              <p>No auth provider set</p>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%;border-right:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%;border-top:1px solid rgb(37,41,46)}button.et-query-devtools-open-btn{position:fixed;inset-inline-end:20px;inset-block-end:0;z-index:9999;font-family:monospace;border-radius:3px 3px 0 0;line-height:14px;font-size:12px}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid #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;grid-template-columns:auto minmax(0,1fr);gap:2px;display:block}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-auth-provider__viewer{border-top:1px solid #3c424a;margin-left:-12px;margin-right:-12px;margin-bottom:-12px;padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }, { kind: "directive", type: QueryDirective, selector: "[etQuery]", inputs: ["etQuery", "etQueryCache"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-query-devtools', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
                         class: 'et-query-devtools',
@@ -2810,6 +2812,1265 @@ const removeFrom = (store, { where, id }) => {
         .subscribe();
 };
 
+/* eslint-disable @typescript-eslint/no-empty-function */
+const queryFeatureUsedMultipleTimes = (type) => {
+    return new RuntimeError(0 /* RuntimeErrorCode.QUERY_FEATURE_USED_MULTIPLE_TIMES */, `The query feature "${type}()" was used multiple times.`);
+};
+const withArgsQueryFeatureMissingButRouteIsFunction = () => {
+    return new RuntimeError(100 /* RuntimeErrorCode.WITH_ARGS_QUERY_FEATURE_MISSING_BUT_ROUTE_IS_FUNCTION */, `This queries route is a function, but a "withArgs()" feature is missing.`);
+};
+const withPollingUsedOnUnsupportedHttpMethod = (method) => {
+    return new RuntimeError(101 /* RuntimeErrorCode.WITH_POLLING_USED_ON_UNSUPPORTED_HTTP_METHOD */, `This is a "${method}" request, "withPolling()" is only supported for GET, HEAD, OPTIONS requests and GQL queries.`);
+};
+const withAutoRefreshUsedOnUnsupportedHttpMethod = (method) => {
+    return new RuntimeError(102 /* RuntimeErrorCode.WITH_AUTO_REFRESH_USED_ON_UNSUPPORTED_HTTP_METHOD */, `This is a "${method}" request, "withAutoRefresh()" is only supported for GET, HEAD, OPTIONS requests and GQL queries.`);
+};
+const withAutoRefreshUsedInManualQuery = () => {
+    return new RuntimeError(103 /* RuntimeErrorCode.WITH_AUTO_REFRESH_USED_IN_MANUAL_QUERY */, `"withAutoRefresh()" has been used inside a query that has "onlyManualExecution" set to true.` +
+        ` If this is intentional, set "ignoreOnlyManualExecution" to true inside the auto refresh config.`);
+};
+const cookieLoginTriedButCookieDisabled = () => {
+    return new RuntimeError(200 /* RuntimeErrorCode.COOKIE_LOGIN_TRIED_BUT_COOKIE_DISABLED */, `Cookie login has been tried, but the cookie is disabled.`);
+};
+const enableCookieCalledWithoutCookieConfig = () => {
+    return new RuntimeError(201 /* RuntimeErrorCode.ENABLE_COOKIE_CALLED_WITHOUT_COOKIE_CONFIG */, `enableCookie() has been called but there is no cookie config. Please set it during the auth provider creation.`);
+};
+const disableCookieCalledWithoutCookieConfig = () => {
+    return new RuntimeError(202 /* RuntimeErrorCode.DISABLE_COOKIE_CALLED_WITHOUT_COOKIE_CONFIG */, `disableCookie() has been called but there is no cookie config. Please set it during the auth provider creation.`);
+};
+const loginCalledWithoutConfig = () => {
+    return new RuntimeError(203 /* RuntimeErrorCode.LOGIN_CALLED_WITHOUT_CONFIG */, `login() has been called without a config. Please set it during the auth provider creation.`);
+};
+const loginWithTokenCalledWithoutConfig = () => {
+    return new RuntimeError(204 /* RuntimeErrorCode.LOGIN_WITH_TOKEN_CALLED_WITHOUT_CONFIG */, `loginWithToken() has been called without a config. Please set it during the auth provider creation.`);
+};
+const refreshTokenCalledWithoutConfig = () => {
+    return new RuntimeError(205 /* RuntimeErrorCode.REFRESH_TOKEN_CALLED_WITHOUT_CONFIG */, `refreshToken() has been called without a config. Please set it during the auth provider creation.`);
+};
+const selectRoleCalledWithoutConfig = () => {
+    return new RuntimeError(206 /* RuntimeErrorCode.SELECT_ROLE_CALLED_WITHOUT_CONFIG */, `selectRole() has been called without a config. Please set it during the auth provider creation.`);
+};
+const defaultResponseTransformerResponseNotObject = (currentType) => {
+    return new RuntimeError(207 /* RuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_OBJECT */, `The default response transformer expects the response to be an object, but it is a "${currentType}".`);
+};
+const defaultResponseTransformerResponseNotContainingAccessToken = () => {
+    return new RuntimeError(208 /* RuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_CONTAINING_ACCESS_TOKEN */, `The default response transformer expects the response to contain an "accessToken" property.`);
+};
+const defaultResponseTransformerResponseNotContainingRefreshToken = () => {
+    return new RuntimeError(209 /* RuntimeErrorCode.DEFAULT_RESPONSE_TRANSFORMER_RESPONSE_NOT_CONTAINING_REFRESH_TOKEN */, `The default response transformer expects the response to contain a "refreshToken" property.`);
+};
+const unableToDecryptBearerToken = (token) => {
+    return new RuntimeError(210 /* RuntimeErrorCode.UNABLE_TO_DECRYPT_BEARER_TOKEN */, `The bearer token could not be decrypted: ${token}`);
+};
+const bearerExpiresInPropertyNotNumber = (expiresIn) => {
+    return new RuntimeError(211 /* RuntimeErrorCode.BEARER_EXPIRES_IN_PROPERTY_NOT_NUMBER */, `The expires in property is not a number: ${expiresIn}`);
+};
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const defaultResponseTransformer = (response) => {
+    if (!isObject(response)) {
+        throw defaultResponseTransformerResponseNotObject(typeof response);
+    }
+    if (!('accessToken' in response)) {
+        throw defaultResponseTransformerResponseNotContainingAccessToken();
+    }
+    if (!('refreshToken' in response)) {
+        throw defaultResponseTransformerResponseNotContainingRefreshToken();
+    }
+    return response;
+};
+const FIVE_MINUTES = 5 * 60 * 1000;
+const createAuthProviderQuery = (config, authProviderConfig) => {
+    const query = config.queryCreator();
+    const triggeredInternally = signal(false);
+    const tokens = computed(() => {
+        const res = query.response();
+        if (!res)
+            return null;
+        const transformed = config.responseTransformer?.(res) ?? defaultResponseTransformer(res);
+        const bearerValue = decryptBearer(transformed.accessToken);
+        if (!bearerValue)
+            throw unableToDecryptBearerToken(transformed.accessToken);
+        return {
+            bearer: bearerValue,
+            tokens: transformed,
+        };
+    });
+    const expiresIn = computed(() => {
+        const res = tokens();
+        if (!res)
+            return null;
+        const expiresIn = res.bearer[authProviderConfig.expiresInPropertyName ?? 'exp'];
+        const refreshBuffer = authProviderConfig.refreshBuffer ?? FIVE_MINUTES;
+        if (typeof expiresIn !== 'number') {
+            throw bearerExpiresInPropertyNotNumber(expiresIn);
+        }
+        // const dummyRemainingTime = (query.lastTimeExecutedAt() ?? 0) + 5000 - new Date().getTime();
+        const remainingTime = new Date(expiresIn * 1000).getTime() - refreshBuffer - new Date().getTime();
+        return remainingTime;
+    });
+    const execute = (newArgs, options) => {
+        query.execute(newArgs);
+        triggeredInternally.set(options?.triggeredInternally ?? false);
+    };
+    return {
+        execute,
+        query,
+        tokens,
+        expiresIn,
+        triggeredInternally: triggeredInternally.asReadonly(),
+    };
+};
+const createBearerAuthProvider = (options) => {
+    const cookieEnabled = signal(options.cookie === undefined ? false : (options.cookie.enabled ?? true));
+    const cookieOptions = {
+        expiresInDays: 30,
+        name: 'etAuth',
+        path: '/',
+        sameSite: 'lax',
+        domain: getDomain() ?? 'localhost',
+        refreshArgsTransformer: (token) => ({ body: { token } }),
+        ...(options.cookie ?? {}),
+    };
+    const loginQuery = options.login ? createAuthProviderQuery(options.login, options) : null;
+    const tokenLoginQuery = options.tokenLogin ? createAuthProviderQuery(options.tokenLogin, options) : null;
+    const tokenRefreshQuery = options.tokenRefresh ? createAuthProviderQuery(options.tokenRefresh, options) : null;
+    const selectRoleQuery = options.selectRole ? createAuthProviderQuery(options.selectRole, options) : null;
+    const queries = [
+        { type: 'login', query: loginQuery },
+        { type: 'tokenLogin', query: tokenLoginQuery },
+        { type: 'tokenRefresh', query: tokenRefreshQuery },
+        { type: 'selectRole', query: selectRoleQuery },
+    ];
+    const latestExecutedQuery = computed(() => {
+        const relevantQueries = queries.filter((q) => q.query && q.query.query.lastTimeExecutedAt() !== null);
+        return findMostRecentQuery(relevantQueries);
+    });
+    const tokens = computed(() => {
+        const query = latestExecutedQuery();
+        return query?.query?.tokens()?.tokens ?? null;
+    });
+    toObservable(computed(() => {
+        const query = latestExecutedQuery();
+        const expiresIn = query?.query?.expiresIn() ?? null;
+        const tokens = query?.query?.tokens() ?? null;
+        return { expiresIn, tokens, query };
+    }))
+        .pipe(switchMap((res) => {
+        if (!res.tokens || res.expiresIn === null || !options.tokenRefresh)
+            return of(null);
+        const expIn = res.expiresIn;
+        const tokens = res.tokens;
+        if (!expIn || !tokens)
+            return of(null);
+        return timer(expIn).pipe(tap(() => refreshToken({
+            ...cookieOptions.refreshArgsTransformer(tokens.tokens.refreshToken),
+        }, { triggeredInternally: true })));
+    }), takeUntilDestroyed())
+        .subscribe();
+    const latestNonInternalQuery = signal(null);
+    effect(() => {
+        const relevantQueries = queries.filter((q) => q.query && !q.query.triggeredInternally() && q.query.query.lastTimeExecutedAt() !== null);
+        const lastQuery = findMostRecentQuery(relevantQueries);
+        untracked(() => {
+            if (!lastQuery || !lastQuery.query?.query)
+                return;
+            latestNonInternalQuery.set({
+                type: lastQuery.type,
+                ...lastQuery.query.query.createSnapshot(),
+            });
+        });
+    });
+    // Cookie writing
+    effect(() => {
+        const isCookieEnabled = cookieEnabled();
+        const res = latestExecutedQuery();
+        const error = res?.query?.query.error();
+        if (!isCookieEnabled || (error && error.status === 401)) {
+            deleteCookie$1();
+            return;
+        }
+        if (!res?.query)
+            return;
+        const { tokens } = res.query;
+        const rt = tokens()?.tokens.refreshToken;
+        if (!rt)
+            return;
+        writeCookie(rt);
+    });
+    const login = (args) => {
+        if (!loginQuery) {
+            throw loginCalledWithoutConfig();
+        }
+        loginQuery.execute(args);
+        return loginQuery.query.createSnapshot();
+    };
+    const loginWithToken = (args) => {
+        if (!tokenLoginQuery) {
+            throw loginWithTokenCalledWithoutConfig();
+        }
+        tokenLoginQuery.execute(args);
+        return tokenLoginQuery.query.createSnapshot();
+    };
+    const refreshToken = (args, options) => {
+        if (!tokenRefreshQuery) {
+            throw refreshTokenCalledWithoutConfig();
+        }
+        tokenRefreshQuery.execute(args, { triggeredInternally: options?.triggeredInternally });
+        return tokenRefreshQuery.query.createSnapshot();
+    };
+    const selectRole = (args) => {
+        if (!selectRoleQuery) {
+            throw selectRoleCalledWithoutConfig();
+        }
+        selectRoleQuery.execute(args);
+        return selectRoleQuery.query.createSnapshot();
+    };
+    const logout = () => {
+        deleteCookie$1();
+        loginQuery?.query.execute.reset();
+        tokenLoginQuery?.query.execute.reset();
+        tokenRefreshQuery?.query.execute.reset();
+        selectRoleQuery?.query.execute.reset();
+        latestNonInternalQuery.set(null);
+    };
+    const enableCookie = () => {
+        if (isDevMode() && !options.cookie) {
+            throw enableCookieCalledWithoutCookieConfig();
+        }
+        cookieEnabled.set(true);
+    };
+    const disableCookie = () => {
+        if (isDevMode() && !options.cookie) {
+            throw disableCookieCalledWithoutCookieConfig();
+        }
+        cookieEnabled.set(false);
+        deleteCookie$1();
+    };
+    const tryLoginWithCookie = () => {
+        const isCookieEnabled = cookieEnabled();
+        if (!isCookieEnabled) {
+            if (isDevMode()) {
+                throw cookieLoginTriedButCookieDisabled();
+            }
+            return false;
+        }
+        const cookie = getCookie(cookieOptions.name);
+        if (!cookie) {
+            return false;
+        }
+        refreshToken(cookieOptions.refreshArgsTransformer(cookie));
+        return true;
+    };
+    const writeCookie = (refreshToken) => {
+        const { name, expiresInDays, domain, path, sameSite } = cookieOptions;
+        setCookie(name, refreshToken, expiresInDays, domain, path, sameSite);
+    };
+    const deleteCookie$1 = () => {
+        const { name, path, domain } = cookieOptions;
+        deleteCookie(name, path, domain);
+    };
+    const findMostRecentQuery = (queriesToSearch) => {
+        return queriesToSearch.reduce((acc, curr) => {
+            if (!acc)
+                return curr;
+            const accExp = acc.query?.query.lastTimeExecutedAt() ?? null;
+            const currExp = curr.query?.query.lastTimeExecutedAt() ?? null;
+            if (currExp === null || accExp === null)
+                return acc;
+            return accExp > currExp ? acc : curr;
+        }, null);
+    };
+    const bearerAuthProvider = {
+        login,
+        loginWithToken,
+        refreshToken,
+        selectRole,
+        logout,
+        enableCookie,
+        disableCookie,
+        tryLoginWithCookie,
+        latestExecutedQuery: latestNonInternalQuery.asReadonly(),
+        tokens,
+    };
+    if (cookieEnabled()) {
+        tryLoginWithCookie();
+    }
+    return bearerAuthProvider;
+};
+const provideBearerAuthProvider = (config) => {
+    return {
+        provide: config.token,
+        useFactory: () => createBearerAuthProvider(config),
+    };
+};
+
+const createBearerAuthProviderConfig = (options) => {
+    const token = new InjectionToken(`BearerAuthProvider_${options.name}`);
+    const bearerAuthProviderConfig = {
+        name: options.name,
+        queryClientRef: options.queryClientRef,
+        token,
+        cookie: options.cookie,
+        expiresInPropertyName: options.expiresInPropertyName ?? 'exp',
+        refreshBuffer: options.refreshBuffer ?? 300000,
+        refreshOnUnauthorizedResponse: options.refreshOnUnauthorizedResponse ?? true,
+        login: options.login,
+        selectRole: options.selectRole,
+        tokenLogin: options.tokenLogin,
+        tokenRefresh: options.tokenRefresh,
+    };
+    return bearerAuthProviderConfig;
+};
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+/**
+ * Returning this inside e.g. a withComputedArgs feature will reset the query args to null.
+ * This will also pause polling and auto refresh until new args are set.
+ */
+const QUERY_ARGS_RESET = Symbol('QUERY_ARGS_RESET');
+const QUERY_EFFECT_ERROR_MESSAGE = 'Effect triggered too often. This is probably due to a circular dependency inside the query.';
+/** A angular effect that will throw an error in dev mode if it is called too often. This indicates a circular dependency inside the effect. */
+const queryEffect = (fn, errorMessage, options) => {
+    let lastTriggerTs = 0;
+    let illegalWrites = 0;
+    effect(() => {
+        if (isDevMode()) {
+            const now = performance.now();
+            if (now - lastTriggerTs < 100) {
+                illegalWrites++;
+                if (illegalWrites > 5) {
+                    throw new Error(errorMessage);
+                }
+            }
+            lastTriggerTs = now;
+        }
+        fn();
+    }, options);
+};
+const shouldAutoExecuteQuery = (method) => {
+    return method === 'GET' || method === 'HEAD' || method === 'OPTIONS';
+};
+const extractExpiresInSeconds = (headers) => {
+    const cacheControl = headers.get('cache-control');
+    const age = headers.get('age');
+    const expires = headers.get('expires');
+    // In seconds
+    let expiresIn = null;
+    let maxAge = null;
+    if (cacheControl?.includes('no-cache')) {
+        return null;
+    }
+    if (cacheControl?.includes('max-age')) {
+        const m = cacheControl.split('max-age=')[1];
+        if (m) {
+            maxAge = parseInt(m);
+        }
+    }
+    else if (cacheControl?.includes('s-maxage')) {
+        const m = cacheControl.split('s-maxage=')[1];
+        if (m) {
+            maxAge = parseInt(m);
+        }
+    }
+    if (maxAge && age) {
+        const ageSeconds = parseInt(age);
+        expiresIn = maxAge - ageSeconds;
+    }
+    else if (maxAge) {
+        expiresIn = maxAge / 2; // We assume the response is half way to its expiration
+    }
+    else if (expires) {
+        // Used by some apis to tell the response will never expire
+        // In this case we let the response expire after 1 hour
+        if (expires === '-1') {
+            expiresIn = 3600;
+        }
+        else {
+            const expiresDate = new Date(expires);
+            // check if the date is valid
+            if (expiresDate.toString() !== 'Invalid Date') {
+                expiresIn = Math.floor((expiresDate.getTime() - Date.now()) / 1000);
+            }
+        }
+    }
+    return expiresIn;
+};
+const shouldRetryRequest = (options) => {
+    const { retryCount, error } = options;
+    const defaultRetryDelay = 1000 + 1000 * retryCount;
+    if (retryCount > 3) {
+        return { retry: false };
+    }
+    if (!(error instanceof HttpErrorResponse)) {
+        return { retry: false };
+    }
+    const { status, error: detail, headers } = error;
+    // Retry on 5xx errors
+    if (status >= 500) {
+        // Don't retry if a requested page is out of range
+        if (isSymfonyPagerfantaOutOfRangeError(detail)) {
+            return { retry: false };
+        }
+        return { retry: true, delay: defaultRetryDelay };
+    }
+    // Retry on 408 or 425 errors
+    if (status === HttpStatusCode.RequestTimeout || status === HttpStatusCode.TooEarly) {
+        return { retry: true, delay: defaultRetryDelay };
+    }
+    // Retry on 429 errors
+    if (status === HttpStatusCode.TooManyRequests) {
+        const retryAfter = headers.get('retry-after') || headers.get('x-retry-after');
+        if (retryAfter) {
+            const delay = parseInt(retryAfter) * 1000;
+            return { retry: true, delay: Number.isNaN(delay) ? defaultRetryDelay : delay };
+        }
+        return { retry: true, delay: defaultRetryDelay };
+    }
+    // Code 0 usually means the internet connection is down. We retry in this case.
+    // It could also be a CORS issue but that should not be the case in production.
+    if (status === 0) {
+        return { retry: true, delay: defaultRetryDelay };
+    }
+    return { retry: false };
+};
+const getQueryFeatureUsage = (options) => {
+    const { creator, creatorInternals, features, queryConfig } = options;
+    const hasWithArgsFeature = features.some((f) => f.type == "withArgs" /* QueryFeatureType.WithArgs */);
+    const shouldAutoExecuteMethod = shouldAutoExecuteQuery(creatorInternals.method);
+    const shouldAutoExecute = shouldAutoExecuteMethod && !queryConfig.onlyManualExecution;
+    const hasRouteFunction = typeof creator.route === 'function';
+    if (hasRouteFunction && !hasWithArgsFeature) {
+        throw withArgsQueryFeatureMissingButRouteIsFunction();
+    }
+    const featureFnContext = {
+        hasWithArgsFeature,
+        shouldAutoExecuteMethod,
+        shouldAutoExecute,
+        hasRouteFunction,
+    };
+    return featureFnContext;
+};
+const applyQueryFeatures = (options, context) => {
+    const featureTypes = new Set();
+    for (const feature of options.features) {
+        if (featureTypes.has(feature.type)) {
+            throw queryFeatureUsedMultipleTimes(feature.type);
+        }
+        featureTypes.add(feature.type);
+        feature.fn(context);
+    }
+};
+const maybeExecute = (options) => {
+    if (options.flags.shouldAutoExecute && !options.flags.hasRouteFunction && !options.flags.hasWithArgsFeature) {
+        options.execute();
+    }
+};
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const SPEED_BUFFER_TIME_IN_MS = 2000;
+const createHttpRequest = (options) => {
+    let currentStreamSubscription = Subscription.EMPTY;
+    const currentEvent = signal(null);
+    const loading = signal(null);
+    const error = signal(null);
+    const response = signal(null);
+    const lastLoadEventTime = signal(0);
+    const lastLoadEventAmount = signal(0);
+    const lastExecuteTime = signal(0);
+    const expiresIn = signal(null);
+    const isStale = computed(() => {
+        const expiresInTs = expiresIn();
+        return expiresInTs === null || expiresInTs < Date.now();
+    });
+    const stream = options.httpClient
+        .request(options.method, options.fullPath, {
+        observe: 'events',
+        body: options.body,
+        reportProgress: options.reportProgress,
+        withCredentials: options.withCredentials,
+        transferCache: options.transferCache,
+        responseType: options.responseType || 'json',
+        context: options.context,
+        headers: options.headers,
+    })
+        .pipe(tap((event) => updateState(event)), retry({
+        delay: (error, retryCount) => {
+            const retryOptions = { error, retryCount };
+            const retryResult = options.retryFn?.(retryOptions) || shouldRetryRequest(retryOptions);
+            if (!retryResult.retry) {
+                return throwError(() => error);
+            }
+            return timer(retryResult.delay);
+        },
+    }), catchError((e) => {
+        updateErrorState(e);
+        return throwError(() => e);
+    }));
+    const execute = () => {
+        if (loading() || !isStale()) {
+            // Do not execute if there is already a request in progress or the request is not stale
+            return false;
+        }
+        currentStreamSubscription.unsubscribe();
+        lastExecuteTime.set(Date.now());
+        lastLoadEventTime.set(lastExecuteTime());
+        loading.set({
+            executeTime: lastExecuteTime(),
+            progress: null,
+        });
+        error.set(null);
+        expiresIn.set(null);
+        currentStreamSubscription = stream.subscribe();
+        return true;
+    };
+    const destroy = () => {
+        if (currentStreamSubscription.closed) {
+            return false;
+        }
+        currentStreamSubscription.unsubscribe();
+        return true;
+    };
+    const updateState = (event) => {
+        currentEvent.set(event);
+        switch (event.type) {
+            case HttpEventType.Response:
+                {
+                    loading.set(null);
+                    response.set(event.body);
+                    const expiresInSeconds = options.cacheAdapter
+                        ? options.cacheAdapter(event.headers)
+                        : extractExpiresInSeconds(event.headers);
+                    const expiresInTimestamp = buildTimestampFromSeconds(expiresInSeconds);
+                    expiresIn.set(expiresInTimestamp);
+                }
+                break;
+            case HttpEventType.UploadProgress:
+            case HttpEventType.DownloadProgress:
+                {
+                    updateLoadingState(event);
+                }
+                break;
+            case HttpEventType.Sent:
+            case HttpEventType.ResponseHeader:
+            case HttpEventType.User:
+                {
+                    // we don't care about these events
+                }
+                break;
+        }
+    };
+    const updateErrorState = (errorResponse) => {
+        let err = errorResponse instanceof HttpErrorResponse ? errorResponse : null;
+        if (!err) {
+            err = new HttpErrorResponse({
+                error: errorResponse,
+                status: 0,
+                statusText: 'Unknown Error',
+            });
+        }
+        error.set(err);
+        loading.set(null);
+        currentEvent.set({ type: 'error', error: err });
+    };
+    const updateLoadingState = (event) => {
+        if (event.total === undefined) {
+            return;
+        }
+        const progress = {
+            total: event.total,
+            loaded: event.loaded,
+            percentage: (event.loaded / event.total) * 100,
+            speed: null,
+            remainingTime: null,
+        };
+        const state = {
+            executeTime: lastExecuteTime(),
+            progress,
+        };
+        const currentTime = Date.now();
+        const elapsedTimeSinceLastEvent = currentTime - lastLoadEventTime();
+        const elapsedTimeSinceLastExecute = currentTime - lastExecuteTime();
+        const loadedAmount = event.loaded - lastLoadEventAmount();
+        // We only want to calculate speed and remaining time after 2 seconds of the execution
+        // This is to avoid showing incorrect speed and remaining time when the request is very fast
+        if (elapsedTimeSinceLastExecute > SPEED_BUFFER_TIME_IN_MS) {
+            const speed = (loadedAmount / elapsedTimeSinceLastEvent) * 1000;
+            progress.speed = speed * 1000;
+            progress.remainingTime = Math.round((event.total - event.loaded) / speed) * 1000;
+        }
+        lastLoadEventTime.set(currentTime);
+        lastLoadEventAmount.set(event.loaded);
+        loading.set(state);
+    };
+    const httpRequest = {
+        execute,
+        destroy,
+        loading: loading.asReadonly(),
+        error: error.asReadonly(),
+        response: response.asReadonly(),
+        currentEvent: currentEvent.asReadonly(),
+        isStale,
+    };
+    return httpRequest;
+};
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const setupQueryDependencies = (options) => {
+    const destroyRef = inject(DestroyRef);
+    const client = inject(options.clientConfig.token);
+    const injector = inject(Injector);
+    const dependencies = {
+        destroyRef,
+        client,
+        injector,
+    };
+    return dependencies;
+};
+
+const resetExecuteState = (options) => {
+    const { executeState, executeOptions: opts } = options;
+    const { deps, state } = opts;
+    const { effectRefs, previousKey } = executeState;
+    deps.client.repository.unbind(previousKey, deps.destroyRef);
+    effectRefs.forEach((ref) => ref.destroy());
+    effectRefs.length = 0;
+    state.args.set(null);
+    state.error.set(null);
+    state.latestHttpEvent.set(null);
+    state.loading.set(null);
+    state.response.set(null);
+    state.lastTimeExecutedAt.set(null);
+};
+const setupQueryExecuteState = () => {
+    return {
+        effectRefs: [],
+        previousKey: false,
+    };
+};
+const queryExecute = (options) => {
+    const { executeOptions, args, executeState } = options;
+    const { deps, state, creator, creatorInternals, queryConfig } = executeOptions;
+    const { key, request } = deps.client.repository.request({
+        method: creatorInternals.method,
+        route: creator.route,
+        reportProgress: creator.reportProgress,
+        withCredentials: creator.withCredentials,
+        transferCache: creator.transferCache,
+        responseType: creator.responseType || 'json',
+        pathParams: args?.pathParams,
+        queryParams: args?.queryParams,
+        body: args?.body,
+        destroyRef: deps.destroyRef,
+        key: queryConfig.key,
+        headers: args?.headers,
+    });
+    executeState.previousKey = key;
+    runInInjectionContext(deps.injector, () => {
+        const responseRef = syncSignal(request.response, state.response);
+        const loadingRef = syncSignal(request.loading, state.loading);
+        const errorRef = syncSignal(request.error, state.error);
+        const latestHttpEventRef = syncSignal(request.currentEvent, state.latestHttpEvent);
+        executeState.effectRefs.push(responseRef, loadingRef, errorRef, latestHttpEventRef);
+    });
+    state.lastTimeExecutedAt.set(Date.now());
+};
+const cleanupPreviousExecute = (options) => {
+    const { executeOptions, executeState } = options;
+    const { deps } = executeOptions;
+    deps.client.repository.unbind(executeState.previousKey, deps.destroyRef);
+    executeState.effectRefs.forEach((ref) => ref.destroy());
+    executeState.effectRefs.length = 0;
+};
+
+const createExecuteFn = (options) => {
+    const executeState = setupQueryExecuteState();
+    const reset = () => resetExecuteState({ executeState, executeOptions: options });
+    const exec = (args = options.state.args()) => {
+        cleanupPreviousExecute({ executeOptions: options, executeState, args });
+        queryExecute({ executeOptions: options, executeState, args });
+    };
+    exec['reset'] = reset;
+    return exec;
+};
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const setupQueryState = (options) => {
+    const response = signal(null);
+    const args = signal(null);
+    const latestHttpEvent = signal(null);
+    const error = signal(null);
+    const loading = signal(null);
+    const lastTimeExecutedAt = signal(null);
+    const state = {
+        response,
+        args,
+        latestHttpEvent,
+        loading,
+        error,
+        lastTimeExecutedAt,
+    };
+    return state;
+};
+
+const createQuerySnapshotFn = (options) => {
+    const { state, deps } = options;
+    const snapshotFn = () => {
+        const snapshotState = setupQueryState({});
+        const isAlive = signal(true);
+        const killEffectRef = effect(() => {
+            const currentLoading = state.loading();
+            const currentError = state.error();
+            const currentResponse = state.response();
+            const currentArgs = state.args();
+            const currentLatestHttpEvent = state.latestHttpEvent();
+            const currentLastTimeExecutedAt = state.lastTimeExecutedAt();
+            untracked(() => {
+                snapshotState.args.set(currentArgs);
+                snapshotState.error.set(currentError);
+                snapshotState.lastTimeExecutedAt.set(currentLastTimeExecutedAt);
+                snapshotState.latestHttpEvent.set(currentLatestHttpEvent);
+                snapshotState.loading.set(currentLoading);
+                snapshotState.response.set(currentResponse);
+                if (currentLoading)
+                    return;
+                if (!currentResponse && !currentError)
+                    return;
+                // kill the effect once loading is done and we either have a response or an error
+                killEffectRef.destroy();
+                isAlive.set(false);
+            });
+        }, { injector: deps.injector });
+        const snapshot = {
+            args: snapshotState.args.asReadonly(),
+            response: snapshotState.response.asReadonly(),
+            latestHttpEvent: snapshotState.latestHttpEvent.asReadonly(),
+            loading: snapshotState.loading.asReadonly(),
+            error: snapshotState.error.asReadonly(),
+            lastTimeExecutedAt: snapshotState.lastTimeExecutedAt.asReadonly(),
+            isAlive: isAlive.asReadonly(),
+        };
+        return snapshot;
+    };
+    return snapshotFn;
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-empty-function */
+const createQuery = (options) => {
+    const deps = setupQueryDependencies({ clientConfig: options.creatorInternals.client });
+    const state = setupQueryState({});
+    const { creator, creatorInternals, queryConfig } = options;
+    const flags = getQueryFeatureUsage(options);
+    const execute = createExecuteFn({ deps, state, creator, creatorInternals, queryConfig: options.queryConfig });
+    const createSnapshot = createQuerySnapshotFn({ state, deps });
+    const featureFnContext = {
+        state,
+        queryConfig,
+        creatorConfig: creator,
+        creatorInternals,
+        execute,
+        flags,
+    };
+    applyQueryFeatures(options, featureFnContext);
+    maybeExecute({ execute, flags });
+    const query = {
+        execute,
+        args: state.args.asReadonly(),
+        response: state.response.asReadonly(),
+        latestHttpEvent: state.latestHttpEvent.asReadonly(),
+        loading: state.loading.asReadonly(),
+        error: state.error.asReadonly(),
+        lastTimeExecutedAt: state.lastTimeExecutedAt.asReadonly(),
+        createSnapshot,
+    };
+    return query;
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-empty-function */
+const createQueryRepository = (config) => {
+    const httpClient = inject(HttpClient);
+    const cache = new Map();
+    const request = (options) => {
+        const shouldCache = shouldCacheQuery(options.method);
+        const route = buildRoute({
+            base: config.baseUrl,
+            route: options.route,
+            pathParams: options.pathParams,
+            queryParams: options.queryParams,
+            queryParamConfig: config.queryString,
+        });
+        const key = shouldCache &&
+            buildQueryCacheKey(`${options.key ? options.key + '_' : ''}${route}`, {
+                body: options.body,
+                queryParams: options.queryParams,
+                pathParams: options.pathParams,
+                // TODO: remaining props
+            });
+        if (shouldCache && key) {
+            const cacheEntry = cache.get(key);
+            if (cacheEntry) {
+                bind(key, options.destroyRef, cacheEntry.request);
+                if (!options.skipExecution)
+                    cacheEntry.request.execute();
+                return { key, request: cacheEntry.request };
+            }
+        }
+        const request = createHttpRequest({
+            fullPath: route,
+            body: options.body,
+            reportProgress: options.reportProgress,
+            withCredentials: options.withCredentials,
+            transferCache: options.transferCache,
+            responseType: options.responseType || 'json',
+            method: options.method,
+            headers: options.headers,
+            httpClient,
+            cacheAdapter: config.cacheAdapter,
+            retryFn: config.retryFn,
+        });
+        if (!options.skipExecution)
+            request.execute();
+        if (shouldCache && key) {
+            bind(key, options.destroyRef, request);
+        }
+        return { key, request };
+    };
+    const unbind = (key, destroyRef) => {
+        if (!key)
+            return;
+        const cacheEntry = cache.get(key);
+        if (!cacheEntry)
+            return;
+        cacheEntry.consumers.delete(destroyRef);
+        if (cacheEntry.consumers.size === 0) {
+            cacheEntry.request.destroy();
+            cache.delete(key);
+        }
+    };
+    const bind = (key, destroyRef, request) => {
+        if (!key)
+            return;
+        const destroyListener = destroyRef.onDestroy(() => unbind(key, destroyRef));
+        const cacheEntry = cache.get(key);
+        if (cacheEntry) {
+            cacheEntry.consumers.set(destroyRef, destroyListener);
+        }
+        else {
+            const consumers = new Map([]);
+            consumers.set(destroyRef, destroyListener);
+            cache.set(key, {
+                consumers,
+                request,
+            });
+        }
+    };
+    const repository = {
+        request,
+        unbind,
+    };
+    return repository;
+};
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const createQueryClient = (config) => {
+    const repository = createQueryRepository(config);
+    const client = {
+        repository,
+    };
+    return client;
+};
+const provideQueryClient = (config) => {
+    return {
+        provide: config.token,
+        useFactory: () => createQueryClient(config),
+    };
+};
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const createQueryClientConfig = (options) => {
+    const token = new InjectionToken(`QueryClient_${options.name}`);
+    const clientConfig = {
+        baseUrl: options.baseUrl,
+        token,
+        name: options.name,
+        queryString: options.queryString,
+    };
+    return clientConfig;
+};
+
+const splitQueryConfig = (args) => {
+    let queryConfig = {};
+    let features = [];
+    const first = args[0];
+    if (first) {
+        if ('type' in first) {
+            features = args;
+        }
+        else {
+            [queryConfig, ...features] = args;
+        }
+    }
+    return { features, queryConfig };
+};
+const createQueryCreator = (options, internals) => {
+    function queryCreator(...args) {
+        const { features, queryConfig } = splitQueryConfig(args);
+        return createQuery({
+            creator: options,
+            creatorInternals: internals,
+            features,
+            queryConfig,
+        });
+    }
+    return queryCreator;
+};
+
+const AUTH_HEADER = 'Authorization';
+const createSecureExecuteFn = (options) => {
+    const executeState = setupQueryExecuteState();
+    const authProvider = inject(options.creatorInternals.authProvider.token);
+    let authQuerySubscription = Subscription.EMPTY;
+    const reset = () => {
+        authQuerySubscription.unsubscribe();
+        authQuerySubscription = Subscription.EMPTY;
+        resetExecuteState({ executeState, executeOptions: options });
+    };
+    const error = (query) => {
+        const state = options.state;
+        state.error.set(query.error());
+        state.loading.set(null);
+        state.response.set(null);
+        state.latestHttpEvent.set(null);
+        state.args.set(null);
+    };
+    const authAndExec = (args) => {
+        const tokens = authProvider.tokens();
+        let headers = args?.headers || new HttpHeaders();
+        if (!tokens) {
+            throw new Error('Tokens are not available inside authAndExec');
+        }
+        if (!headers.has(AUTH_HEADER)) {
+            headers = headers.set(AUTH_HEADER, `Bearer ${tokens.accessToken}`);
+        }
+        const updatedArgs = { ...(args ?? {}), headers };
+        queryExecute({
+            executeOptions: options,
+            executeState,
+            args: updatedArgs,
+        });
+    };
+    const exec = (args = options.state.args()) => {
+        authQuerySubscription.unsubscribe();
+        authQuerySubscription = Subscription.EMPTY;
+        cleanupPreviousExecute({ executeOptions: options, executeState, args });
+        const authQuery = authProvider.latestExecutedQuery();
+        if (!authQuery || authQuery.loading()) {
+            options.state.loading.set({ executeTime: Date.now(), progress: null });
+            authQuerySubscription = toObservable(authProvider.latestExecutedQuery, { injector: options.deps.injector })
+                .pipe(switchMap((query) => {
+                if (!query)
+                    return of(null);
+                return toObservable(query.isAlive, { injector: options.deps.injector }).pipe(tap((isAlive) => {
+                    if (isAlive)
+                        return;
+                    if (query.error()) {
+                        error(query);
+                    }
+                    else if (query.response()) {
+                        authAndExec(args);
+                    }
+                }));
+            }))
+                .subscribe();
+        }
+        else if (authQuery.response()) {
+            authAndExec(args);
+        }
+        else if (authQuery.error()) {
+            error(authQuery);
+        }
+        else {
+            throw new Error('Invalid state ocurred inside createSecureExecuteFn');
+        }
+    };
+    exec['reset'] = reset;
+    return exec;
+};
+
+const createSecureQuery = (options) => {
+    const deps = setupQueryDependencies({ clientConfig: options.creatorInternals.client });
+    const state = setupQueryState({});
+    const { creator, creatorInternals, queryConfig } = options;
+    const flags = getQueryFeatureUsage(options);
+    const execute = createSecureExecuteFn({
+        deps,
+        state,
+        creator,
+        creatorInternals,
+        queryConfig: options.queryConfig,
+    });
+    const createSnapshot = createQuerySnapshotFn({ state, deps });
+    const featureFnContext = {
+        state,
+        queryConfig,
+        creatorConfig: creator,
+        creatorInternals,
+        execute,
+        flags,
+    };
+    applyQueryFeatures(options, featureFnContext);
+    maybeExecute({ execute, flags });
+    const query = {
+        execute,
+        args: state.args.asReadonly(),
+        response: state.response.asReadonly(),
+        latestHttpEvent: state.latestHttpEvent.asReadonly(),
+        loading: state.loading.asReadonly(),
+        error: state.error.asReadonly(),
+        lastTimeExecutedAt: state.lastTimeExecutedAt.asReadonly(),
+        createSnapshot,
+    };
+    return query;
+};
+
+const createSecureQueryCreator = (options, internals) => {
+    function queryCreator(...args) {
+        const { features, queryConfig } = splitQueryConfig(args);
+        return createSecureQuery({
+            creator: options,
+            creatorInternals: internals,
+            features,
+            queryConfig,
+        });
+    }
+    return queryCreator;
+};
+
+const createGetQuery = (client) => {
+    return (creatorOptions) => createQueryCreator(creatorOptions, { method: 'GET', client });
+};
+const createSecureGetQuery = (client, authProvider) => {
+    return (creatorOptions) => createSecureQueryCreator(creatorOptions, { method: 'GET', client, authProvider });
+};
+const createPostQuery = (client) => {
+    return (creatorOptions) => createQueryCreator(creatorOptions, { method: 'POST', client });
+};
+const createSecurePostQuery = (client, authProvider) => {
+    return (creatorOptions) => createSecureQueryCreator(creatorOptions, { method: 'POST', client, authProvider });
+};
+const createPutQuery = (client) => {
+    return (creatorOptions) => createQueryCreator(creatorOptions, { method: 'PUT', client });
+};
+const createSecurePutQuery = (client, authProvider) => {
+    return (creatorOptions) => createSecureQueryCreator(creatorOptions, { method: 'PUT', client, authProvider });
+};
+const createDeleteQuery = (client) => {
+    return (creatorOptions) => createQueryCreator(creatorOptions, { method: 'DELETE', client });
+};
+const createSecureDeleteQuery = (client, authProvider) => {
+    return (creatorOptions) => createSecureQueryCreator(creatorOptions, { method: 'DELETE', client, authProvider });
+};
+const createPatchQuery = (client) => {
+    return (creatorOptions) => createQueryCreator(creatorOptions, { method: 'PATCH', client });
+};
+const createSecurePatchQuery = (client, authProvider) => {
+    return (creatorOptions) => createSecureQueryCreator(creatorOptions, { method: 'PATCH', client, authProvider });
+};
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const createQueryFeature = (config) => {
+    return config;
+};
+const withArgs = (args) => {
+    return createQueryFeature({
+        type: "withArgs" /* QueryFeatureType.WithArgs */,
+        fn: (context) => {
+            const currArgs = computed(() => args());
+            queryEffect(() => {
+                const currArgsNow = currArgs();
+                if (currArgsNow === null)
+                    return;
+                untracked(() => {
+                    if (currArgsNow === QUERY_ARGS_RESET) {
+                        context.state.args.set(null);
+                        return;
+                    }
+                    context.state.args.set(currArgsNow);
+                    if (context.flags.shouldAutoExecute)
+                        context.execute(currArgsNow);
+                });
+            }, QUERY_EFFECT_ERROR_MESSAGE);
+        },
+    });
+};
+const withPolling = (options) => {
+    return createQueryFeature({
+        type: "withPolling" /* QueryFeatureType.WithPolling */,
+        fn: (context) => {
+            if (!context.flags.shouldAutoExecuteMethod) {
+                throw withPollingUsedOnUnsupportedHttpMethod(context.creatorInternals.method);
+            }
+            let intervalId = null;
+            queryEffect(() => {
+                const args = context.state.args();
+                untracked(() => {
+                    if (intervalId !== null)
+                        clearInterval(intervalId);
+                    if (args === null)
+                        return;
+                    if (options.executeInitially) {
+                        context.execute(args);
+                    }
+                    intervalId = window.setInterval(() => {
+                        context.execute(args);
+                    }, options.interval);
+                });
+            }, QUERY_EFFECT_ERROR_MESSAGE);
+            inject(DestroyRef).onDestroy(() => intervalId !== null && clearInterval(intervalId));
+        },
+    });
+};
+const withLogging = (options) => {
+    return createQueryFeature({
+        type: "withLogging" /* QueryFeatureType.WithLogging */,
+        fn: (context) => {
+            effect(() => {
+                const event = context.state.latestHttpEvent();
+                if (event === null)
+                    return;
+                untracked(() => {
+                    options.logFn(event);
+                });
+            });
+        },
+    });
+};
+const withErrorHandling = (options) => {
+    return createQueryFeature({
+        type: "withErrorHandling" /* QueryFeatureType.WithErrorHandling */,
+        fn: (context) => {
+            effect(() => {
+                const error = context.state.error();
+                if (error === null)
+                    return;
+                untracked(() => {
+                    options.handler(error);
+                });
+            });
+        },
+    });
+};
+const withSuccessHandling = (options) => {
+    return createQueryFeature({
+        type: "withSuccessHandling" /* QueryFeatureType.WithSuccessHandling */,
+        fn: (context) => {
+            effect(() => {
+                const response = context.state.response();
+                if (response === null)
+                    return;
+                untracked(() => {
+                    options.handler(response);
+                });
+            });
+        },
+    });
+};
+const withAutoRefresh = (options) => {
+    return createQueryFeature({
+        type: "withAutoRefresh" /* QueryFeatureType.WithAutoRefresh */,
+        fn: (context) => {
+            if (!context.flags.shouldAutoExecuteMethod) {
+                throw withAutoRefreshUsedOnUnsupportedHttpMethod(context.creatorInternals.method);
+            }
+            if (context.queryConfig.onlyManualExecution && !options.ignoreOnlyManualExecution) {
+                throw withAutoRefreshUsedOnUnsupportedHttpMethod(context.creatorInternals.method);
+            }
+            queryEffect(() => {
+                for (const signal of options.signalChanges) {
+                    signal();
+                }
+                untracked(() => {
+                    const args = context.state.args();
+                    if (args === null)
+                        return;
+                    context.execute(args);
+                });
+            }, QUERY_EFFECT_ERROR_MESSAGE);
+        },
+    });
+};
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    QUERY_ARGS_RESET: QUERY_ARGS_RESET,
+    QUERY_EFFECT_ERROR_MESSAGE: QUERY_EFFECT_ERROR_MESSAGE,
+    SPEED_BUFFER_TIME_IN_MS: SPEED_BUFFER_TIME_IN_MS,
+    applyQueryFeatures: applyQueryFeatures,
+    bearerExpiresInPropertyNotNumber: bearerExpiresInPropertyNotNumber,
+    cleanupPreviousExecute: cleanupPreviousExecute,
+    cookieLoginTriedButCookieDisabled: cookieLoginTriedButCookieDisabled,
+    createBearerAuthProvider: createBearerAuthProvider,
+    createBearerAuthProviderConfig: createBearerAuthProviderConfig,
+    createDeleteQuery: createDeleteQuery,
+    createExecuteFn: createExecuteFn,
+    createGetQuery: createGetQuery,
+    createHttpRequest: createHttpRequest,
+    createPatchQuery: createPatchQuery,
+    createPostQuery: createPostQuery,
+    createPutQuery: createPutQuery,
+    createQuery: createQuery,
+    createQueryClient: createQueryClient,
+    createQueryClientConfig: createQueryClientConfig,
+    createQueryCreator: createQueryCreator,
+    createQueryRepository: createQueryRepository,
+    createQuerySnapshotFn: createQuerySnapshotFn,
+    createSecureDeleteQuery: createSecureDeleteQuery,
+    createSecureExecuteFn: createSecureExecuteFn,
+    createSecureGetQuery: createSecureGetQuery,
+    createSecurePatchQuery: createSecurePatchQuery,
+    createSecurePostQuery: createSecurePostQuery,
+    createSecurePutQuery: createSecurePutQuery,
+    createSecureQuery: createSecureQuery,
+    createSecureQueryCreator: createSecureQueryCreator,
+    defaultResponseTransformerResponseNotContainingAccessToken: defaultResponseTransformerResponseNotContainingAccessToken,
+    defaultResponseTransformerResponseNotContainingRefreshToken: defaultResponseTransformerResponseNotContainingRefreshToken,
+    defaultResponseTransformerResponseNotObject: defaultResponseTransformerResponseNotObject,
+    disableCookieCalledWithoutCookieConfig: disableCookieCalledWithoutCookieConfig,
+    enableCookieCalledWithoutCookieConfig: enableCookieCalledWithoutCookieConfig,
+    extractExpiresInSeconds: extractExpiresInSeconds,
+    getQueryFeatureUsage: getQueryFeatureUsage,
+    loginCalledWithoutConfig: loginCalledWithoutConfig,
+    loginWithTokenCalledWithoutConfig: loginWithTokenCalledWithoutConfig,
+    maybeExecute: maybeExecute,
+    provideBearerAuthProvider: provideBearerAuthProvider,
+    provideQueryClient: provideQueryClient,
+    queryEffect: queryEffect,
+    queryExecute: queryExecute,
+    queryFeatureUsedMultipleTimes: queryFeatureUsedMultipleTimes,
+    refreshTokenCalledWithoutConfig: refreshTokenCalledWithoutConfig,
+    resetExecuteState: resetExecuteState,
+    selectRoleCalledWithoutConfig: selectRoleCalledWithoutConfig,
+    setupQueryDependencies: setupQueryDependencies,
+    setupQueryExecuteState: setupQueryExecuteState,
+    setupQueryState: setupQueryState,
+    shouldAutoExecuteQuery: shouldAutoExecuteQuery,
+    shouldRetryRequest: shouldRetryRequest,
+    splitQueryConfig: splitQueryConfig,
+    unableToDecryptBearerToken: unableToDecryptBearerToken,
+    withArgs: withArgs,
+    withArgsQueryFeatureMissingButRouteIsFunction: withArgsQueryFeatureMissingButRouteIsFunction,
+    withAutoRefresh: withAutoRefresh,
+    withAutoRefreshUsedInManualQuery: withAutoRefreshUsedInManualQuery,
+    withAutoRefreshUsedOnUnsupportedHttpMethod: withAutoRefreshUsedOnUnsupportedHttpMethod,
+    withErrorHandling: withErrorHandling,
+    withLogging: withLogging,
+    withPolling: withPolling,
+    withPollingUsedOnUnsupportedHttpMethod: withPollingUsedOnUnsupportedHttpMethod,
+    withSuccessHandling: withSuccessHandling
+});
+
 const transformToString = (value) => {
     if (typeof value === 'string') {
         return value;
@@ -2946,11 +4207,12 @@ class QueryForm {
         this._router = inject(Router);
         this._activatedRoute = inject(ActivatedRoute);
         this._defaultValues = this._extractDefaultValues();
-        this._routerStateService = inject(RouterStateService);
         this._zone = inject(NgZone);
         this._didValueChanges$ = new Subject();
         this._isObserving = false;
         this._skipNextResets = false;
+        this._queryParamChanges$ = toObservable(injectQueryParamChanges());
+        this._queryParams = injectQueryParams();
         /**
          * The angular form group that contains all the fields.
          *
@@ -2997,6 +4259,7 @@ class QueryForm {
         })
             .filter((v) => v === false).length));
         assertInInjectionContext(QueryForm);
+        inject(DestroyRef).onDestroy(() => this._cleanup());
     }
     observe(options) {
         if (this._isObserving) {
@@ -3008,7 +4271,7 @@ class QueryForm {
         this._isObserving = true;
         if (options?.syncOnNavigation !== false) {
             const didChanges = this.setFormValueFromUrlQueryParams({
-                queryParams: this._routerStateService.queryParams,
+                queryParams: this._queryParams(),
             });
             if (didChanges) {
                 this._handleFormChange(true);
@@ -3073,7 +4336,7 @@ class QueryForm {
         }), takeUntil(this._destroy$), takeUntil(this._unobserveTrigger$))
             .subscribe();
         if (options?.syncOnNavigation !== false) {
-            this._routerStateService.queryParamChanges$
+            this._queryParamChanges$
                 .pipe(takeUntil(this._destroy$), takeUntil(this._unobserveTrigger$), tap((changes) => {
                 const didValueChanges = this.setFormValueFromUrlQueryParams({ queryParams: changes });
                 if (didValueChanges) {
@@ -3119,6 +4382,7 @@ class QueryForm {
     }
     unobserve() {
         this._unobserveTrigger$.next(true);
+        this._cleanup();
     }
     setFormValueFromUrlQueryParams(options) {
         let didValueChanges = false;
@@ -3256,10 +4520,12 @@ class QueryForm {
             }
         }
         this._zone.run(() => {
-            this._router.navigate([], {
-                queryParams,
-                replaceUrl,
-                queryParamsHandling: 'merge',
+            queueMicrotask(() => {
+                this._router.navigate([], {
+                    queryParams,
+                    replaceUrl,
+                    queryParamsHandling: 'merge',
+                });
             });
         });
     }
@@ -3277,6 +4543,22 @@ class QueryForm {
         }
         this._currentFormValue$.next(newVal);
     }
+    _cleanup() {
+        const queryParamKeys = Object.keys(this._fields);
+        const queryParams = queryParamKeys.reduce((acc, key) => {
+            acc[this._transformKeyToQueryParam(key)] = undefined;
+            return acc;
+        }, {});
+        this._zone.run(() => {
+            queueMicrotask(() => {
+                this._router.navigate([], {
+                    queryParams,
+                    replaceUrl: true,
+                    queryParamsHandling: 'merge',
+                });
+            });
+        });
+    }
 }
 
 // Burst cache
@@ -3285,5 +4567,5 @@ class QueryForm {
  * Generated bundle index. Do not edit.
  */
 
-export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, QUERY_CLIENT_DEVTOOLS_TOKEN, Query, QueryClient, QueryCreator, QueryDevtoolsComponent, QueryDirective, QueryError, QueryField, QueryForm, QueryShortNamePipe, QueryStore, addQueryContainerHandling, buildErrorMessage, buildQueryCacheKey, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, createQueryCollectionSignal, createQueryCollectionSubject, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, insertFrom, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isClassValidatorError, isCustomHeaderAuthProvider, isEmptyString, isGqlQueryConfig, isNaN$1 as isNaN, isQuery, isQueryCollection, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, isSymfonyFormViolationListError, isSymfonyListError, isSymfonyPagerfantaOutOfRangeError, mapToPaginated, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, provideQueryClientForDevtools, queryArrayComputed, queryComputed, queryComputedTillTruthy, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, queryStateErrorSignal, queryStateLoadingSignal, queryStateResponseSignal, queryStateSignal, removeFrom, request, resetPageOnError, serializeBody, shouldCacheQuery, shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, toQuerySignal, toQuerySubject, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
+export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, index as ExperimentalQuery, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, QUERY_CLIENT_DEVTOOLS_TOKEN, Query, QueryClient, QueryCreator, QueryDevtoolsComponent, QueryDirective, QueryError, QueryField, QueryForm, QueryShortNamePipe, QueryStore, addQueryContainerHandling, buildErrorMessage, buildQueryCacheKey, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, createQueryCollectionSignal, createQueryCollectionSubject, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds$1 as extractExpiresInSeconds, extractQuery, filterFailure, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, insertFrom, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isClassValidatorError, isCustomHeaderAuthProvider, isEmptyString, isGqlQueryConfig, isNaN$1 as isNaN, isQuery, isQueryCollection, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, isSymfonyFormViolationListError, isSymfonyListError, isSymfonyPagerfantaOutOfRangeError, mapToPaginated, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, provideQueryClientForDevtools, queryArrayComputed, queryComputed, queryComputedTillTruthy, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, queryStateErrorSignal, queryStateLoadingSignal, queryStateResponseSignal, queryStateSignal, removeFrom, request, resetPageOnError, serializeBody, shouldCacheQuery, shouldRetryRequest$1 as shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, toQuerySignal, toQuerySubject, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
 //# sourceMappingURL=ethlete-query.mjs.map