@ethlete/query 4.6.0 → 4.7.0

package/fesm2022/ethlete-query.mjs

@@ -1,8 +1,10 @@
 import * as i1 from '@ethlete/core';
 import { BehaviorSubjectWithSubscriberCount, getCookie, setCookie, deleteCookie, createDestroy, DelayableDirective, RouterStateService, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
-import { Observable, filter, takeWhile, switchMap, of, tap, BehaviorSubject, shareReplay, Subject, takeUntil, interval, skip, map, timer, combineLatest, withLatestFrom, fromEvent, startWith, debounceTime, take, concat } from 'rxjs';
+import { Observable, filter, takeWhile, switchMap, of, tap, BehaviorSubject, shareReplay, Subject, takeUntil, interval, skip, map, timer, startWith, combineLatest, withLatestFrom, fromEvent, debounceTime, take, concat } from 'rxjs';
 import * as i0 from '@angular/core';
-import { isDevMode, inject, TemplateRef, ViewContainerRef, ErrorHandler, ChangeDetectorRef, Directive, Input, InjectionToken, ElementRef, NgZone, assertInInjectionContext } from '@angular/core';
+import { isDevMode, InjectionToken, inject, signal, computed, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, ViewContainerRef, ErrorHandler, ChangeDetectorRef, Directive, Input, ElementRef, NgZone, assertInInjectionContext } from '@angular/core';
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { FormGroup } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -201,6 +203,7 @@ const serializeBody = (body) => {
     if (typeof body === 'object' || typeof body === 'boolean' || Array.isArray(body)) {
         return JSON.stringify(body);
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return body.toString();
 };
 const transformMethod = (config) => {
@@ -744,7 +747,13 @@ class Query {
         return ++this._currentId;
     }
     get state$() {
-        return this._state$.pipe(switchMap((s) => this._transformState(s)), shareReplay({ bufferSize: 1, refCount: true }));
+        return this._state$.pipe(tap((s) => {
+            if (!this._client.config.logging?.preparedQuerySubscriptions)
+                return;
+            if (isQueryStatePrepared(s)) {
+                console.warn(`Query ${this._routeWithParams} was subscribed to in the prepared state. Did you forget to call .execute()?`);
+            }
+        }), switchMap((s) => this._transformState(s)), shareReplay({ bufferSize: 1, refCount: true }));
     }
     /**
      * The current state of the query.
@@ -768,6 +777,9 @@ class Query {
     get isInUse() {
         return this._state$.subscriberCount > 0;
     }
+    get _subscriberCount() {
+        return this._state$.subscriberCount;
+    }
     get isPolling() {
         return !!this._pollingSubscription;
     }
@@ -794,7 +806,11 @@ class Query {
     get store() {
         return this._queryConfig.entity?.store ?? null;
     }
-    constructor(_client, _queryConfig, _routeWithParams, _args) {
+    constructor(_client, _queryConfig, 
+    /**
+     * @internal
+     */
+    _routeWithParams, _args) {
         this._client = _client;
         this._queryConfig = _queryConfig;
         this._routeWithParams = _routeWithParams;
@@ -1158,6 +1174,83 @@ const isClassValidatorError = (error) => {
     return typeof error === 'object' && error !== null && 'statusCode' in error && 'message' in error && 'error' in error;
 };
 
+const QUERY_CLIENT_DEVTOOLS_TOKEN = new InjectionToken('QUERY_CLIENT_DEVTOOLS_TOKEN');
+const provideQueryClientForDevtools = (queryClient) => {
+    if (!isDevMode()) {
+        console.warn('You are using the Query Devtools in production mode. This increases the size of your bundle and should only be used for development purposes.');
+    }
+    return {
+        provide: QUERY_CLIENT_DEVTOOLS_TOKEN,
+        useValue: queryClient,
+        multi: true,
+    };
+};
+
+class QueryDevtoolsComponent {
+    constructor() {
+        this._destroy$ = createDestroy();
+        this.queryClientConfigs = inject(QUERY_CLIENT_DEVTOOLS_TOKEN);
+        this.isOpen = signal(false);
+        this.showResponse = signal(false);
+        this.showRawResponse = signal(false);
+        this.selectedClientId = signal(0);
+        this.selectedQueryPath = signal(null);
+        this.selectedClientConfig = computed(() => {
+            if (this.queryClientConfigs.length === 1) {
+                return this.queryClientConfigs[0];
+            }
+            const index = this.selectedClientId();
+            return this.queryClientConfigs[index];
+        });
+        this.queryStore = computed(() => {
+            const config = this.selectedClientConfig();
+            return config.client._store;
+        });
+        this._queries$ = new BehaviorSubject([]);
+        this.queries = toSignal(this._queries$);
+        this.selectedQuery = computed(() => {
+            const path = this.selectedQueryPath();
+            if (!path) {
+                return null;
+            }
+            return this.queries()?.find((q) => q._routeWithParams === path) ?? null;
+        });
+        this.trackByClient = (_, { client }) => client.config.baseRoute;
+        this.trackByQuery = (_, { _routeWithParams }) => _routeWithParams;
+        const change$ = new Subject();
+        effect(() => {
+            change$.next(true);
+            const store = this.queryStore();
+            store.storeChange$
+                .pipe(startWith(''), map(() => store._store), tap((s) => this._queries$.next(Array.from(s.values()))), takeUntil(change$), takeUntil(this._destroy$))
+                .subscribe();
+        }, { allowSignalWrites: true });
+    }
+    toggleOpen() {
+        this.isOpen.set(!this.isOpen());
+    }
+    toggleShowResponse() {
+        this.showResponse.set(!this.showResponse());
+    }
+    toggleShowRawResponse() {
+        this.showRawResponse.set(!this.showRawResponse());
+    }
+    selectClient(clientId) {
+        this.selectedClientId.set(clientId);
+    }
+    selectQuery(query) {
+        this.selectedQueryPath.set(query._routeWithParams);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "<button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn\">Open Devtools</button>\n\n<div *ngIf=\"isOpen()\" class=\"et-query-devtools-container\">\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close-btn\">Close Devtools</button>\n\n  <ng-container *ngIf=\"queryClientConfigs.length > 1\">\n    <p>Client instance:</p>\n    <ul>\n      <li *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\">\n        <button (click)=\"selectClient(i)\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedClientConfig() as cfg\">\n    <p>{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n    <button (click)=\"cfg.client._store.refreshQueriesInUse()\">Force Refresh of in use queries</button> <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\">HARD Force Refresh</button>\n    <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\">\n      PURGE & HARD Force Refresh\n    </button>\n\n    <ul>\n      <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n        <button (click)=\"selectQuery(query)\">\n          {{ query._routeWithParams }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedQuery() as query\">\n    <p>{{ query._routeWithParams }}</p>\n\n    <button (click)=\"query.execute()\">Execute</button> <br />\n    <button (click)=\"query.execute({ skipCache: true })\">FORCE Execute</button> <br />\n    <button (click)=\"query.abort()\">Abort</button> <br />\n    <button (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\">Poll</button> <br />\n    <button (click)=\"query.stopPolling()\">Stop polling</button> <br />\n    <button (click)=\"query.pausePolling()\">Pause polling</button> <br />\n    <button (click)=\"query.resumePolling()\">Resume polling</button> <br />\n\n    <div>\n      <p>state type</p>\n      <pre>{{ (query.state$ | async)?.type }}</pre>\n    </div>\n\n    <div>\n      <p>_enableSmartPolling:</p>\n      <pre>{{ query._enableSmartPolling }}</pre>\n    </div>\n\n    <div>\n      <p>isExpired:</p>\n      <pre>{{ query.isExpired }}</pre>\n    </div>\n\n    <div>\n      <p>isInUse:</p>\n      <pre>{{ query.isInUse }}</pre>\n    </div>\n\n    <div>\n      <p>_subscriberCount:</p>\n      <pre>{{ query._subscriberCount }}</pre>\n    </div>\n\n    <div>\n      <p>isPolling:</p>\n      <pre>{{ query.isPolling }}</pre>\n    </div>\n\n    <div>\n      <p>_arguments:</p>\n      <pre>{{ query._arguments | json }}</pre>\n    </div>\n\n    <div>\n      <p>state$:</p>\n      <button (click)=\"toggleShowResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n    </div>\n\n    <div>\n      <p>rawState:</p>\n      <button (click)=\"toggleShowRawResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n    </div>\n  </ng-container>\n</div>\n", styles: [".et-query-devtools-container{position:fixed;inset:0;background-color:#000;z-index:10000}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-query-devtools', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
+                        class: 'et-query-devtools',
+                    }, imports: [NgIf, NgFor, AsyncPipe, JsonPipe], hostDirectives: [], template: "<button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn\">Open Devtools</button>\n\n<div *ngIf=\"isOpen()\" class=\"et-query-devtools-container\">\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close-btn\">Close Devtools</button>\n\n  <ng-container *ngIf=\"queryClientConfigs.length > 1\">\n    <p>Client instance:</p>\n    <ul>\n      <li *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\">\n        <button (click)=\"selectClient(i)\">\n          {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedClientConfig() as cfg\">\n    <p>{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n    <button (click)=\"cfg.client._store.refreshQueriesInUse()\">Force Refresh of in use queries</button> <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\">HARD Force Refresh</button>\n    <br />\n    <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\">\n      PURGE & HARD Force Refresh\n    </button>\n\n    <ul>\n      <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n        <button (click)=\"selectQuery(query)\">\n          {{ query._routeWithParams }}\n        </button>\n      </li>\n    </ul>\n  </ng-container>\n\n  <ng-container *ngIf=\"selectedQuery() as query\">\n    <p>{{ query._routeWithParams }}</p>\n\n    <button (click)=\"query.execute()\">Execute</button> <br />\n    <button (click)=\"query.execute({ skipCache: true })\">FORCE Execute</button> <br />\n    <button (click)=\"query.abort()\">Abort</button> <br />\n    <button (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\">Poll</button> <br />\n    <button (click)=\"query.stopPolling()\">Stop polling</button> <br />\n    <button (click)=\"query.pausePolling()\">Pause polling</button> <br />\n    <button (click)=\"query.resumePolling()\">Resume polling</button> <br />\n\n    <div>\n      <p>state type</p>\n      <pre>{{ (query.state$ | async)?.type }}</pre>\n    </div>\n\n    <div>\n      <p>_enableSmartPolling:</p>\n      <pre>{{ query._enableSmartPolling }}</pre>\n    </div>\n\n    <div>\n      <p>isExpired:</p>\n      <pre>{{ query.isExpired }}</pre>\n    </div>\n\n    <div>\n      <p>isInUse:</p>\n      <pre>{{ query.isInUse }}</pre>\n    </div>\n\n    <div>\n      <p>_subscriberCount:</p>\n      <pre>{{ query._subscriberCount }}</pre>\n    </div>\n\n    <div>\n      <p>isPolling:</p>\n      <pre>{{ query.isPolling }}</pre>\n    </div>\n\n    <div>\n      <p>_arguments:</p>\n      <pre>{{ query._arguments | json }}</pre>\n    </div>\n\n    <div>\n      <p>state$:</p>\n      <button (click)=\"toggleShowResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n    </div>\n\n    <div>\n      <p>rawState:</p>\n      <button (click)=\"toggleShowRawResponse()\">Show/Hide</button>\n      <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n    </div>\n  </ng-container>\n</div>\n", styles: [".et-query-devtools-container{position:fixed;inset:0;background-color:#000;z-index:10000}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
 class QueryDirective {
     constructor() {
         this._mainTemplateRef = inject(TemplateRef);
@@ -1253,10 +1346,10 @@ class QueryDirective {
             this._viewContainerRef.createEmbeddedView(this._mainTemplateRef, this._viewContext);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.3", 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: "16.1.5", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: QueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: QueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1584,10 +1677,10 @@ class InfinityQueryDirective {
         this._viewContext.currentQuery = null;
         this._data$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.3", 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: "16.1.5", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", 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: "16.1.3", ngImport: i0, type: InfinityQueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1638,10 +1731,10 @@ class InfinityQueryTriggerDirective {
         });
         this._observer.observe(this._elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.3", 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: "16.1.5", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.3", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1659,6 +1752,9 @@ class EntityStoreError extends Error {
         this.name = 'EntityStoreError';
     }
 }
+function flatten(arr) {
+    return arr.reduce((acc, val) => acc.concat(val), []);
+}
 class EntityStore {
     constructor(_config) {
         this._config = _config;
@@ -1667,7 +1763,8 @@ class EntityStore {
     }
     select(keyOrKeys) {
         if (Array.isArray(keyOrKeys)) {
-            return this._selectMany(keyOrKeys);
+            const _keys = this._normalizeKeys(keyOrKeys);
+            return this._selectMany(_keys);
         }
         return this._select(keyOrKeys);
     }
@@ -1678,32 +1775,35 @@ class EntityStore {
         return this._change$.pipe(startWith(null), debounceTime(0), map(() => Array.from(this._dictionary.values()).filter(predicate)), shareReplay({ bufferSize: 1, refCount: true }));
     }
     set(keyOrKeys, valueOrValues) {
-        if (Array.isArray(keyOrKeys)) {
+        const _keys = this._normalizeKeys(keyOrKeys);
+        if (Array.isArray(_keys)) {
             if (!Array.isArray(valueOrValues)) {
                 throw new EntityStoreError('When setting multiple keys, values must be an array', {
-                    keyOrValues: keyOrKeys,
+                    keyOrValues: _keys,
                     valueOrValues,
                 });
             }
-            for (let i = 0; i < keyOrKeys.length; i++) {
-                this._set(keyOrKeys[i], valueOrValues[i]);
+            const _values = (Array.isArray(valueOrValues[0]) ? flatten(valueOrValues) : valueOrValues);
+            for (let i = 0; i < _keys.length; i++) {
+                this._set(_keys[i], _values[i]);
             }
         }
         else {
-            this._set(keyOrKeys, valueOrValues);
+            this._set(_keys, valueOrValues);
         }
-        this._change$.next(keyOrKeys);
+        this._change$.next(_keys);
     }
     remove(keyOrKeys) {
-        if (Array.isArray(keyOrKeys)) {
-            for (const key of keyOrKeys) {
+        const _keys = this._normalizeKeys(keyOrKeys);
+        if (Array.isArray(_keys)) {
+            for (const key of _keys) {
                 this._remove(key);
             }
         }
         else {
-            this._remove(keyOrKeys);
+            this._remove(_keys);
         }
-        this._change$.next(keyOrKeys);
+        this._change$.next(_keys);
     }
     logState() {
         console.log('EntityStore:', this._config.name, {
@@ -1750,11 +1850,44 @@ class EntityStore {
         }
         this._dictionary.delete(key);
     }
+    _normalizeKeys(keys) {
+        if (Array.isArray(keys)) {
+            if (Array.isArray(keys[0])) {
+                return flatten(keys);
+            }
+            return keys;
+        }
+        return keys;
+    }
 }
 
 function mapToPaginated(response) {
     return map((items) => ({ ...response, items }));
 }
+// FIXME: This breaks if SubStoreType is an array
+/**
+ * Use an other store to represent a property of the current entity.
+ */
+const insertFrom = (store, { for: key, id }) => switchMap((value) => {
+    if (!value)
+        return of(null);
+    const ids = id(value);
+    if (Array.isArray(ids)) {
+        return store.select(ids).pipe(map((data) => ({ ...value, [key]: data })));
+    }
+    else {
+        return store.select(ids).pipe(map((data) => ({ ...value, [key]: data })));
+    }
+});
+/**
+ * Remove entities from a store based on a where function.
+ */
+const removeFrom = (store, { where, id }) => {
+    store
+        .selectWhere(where)
+        .pipe(tap((entities) => store.remove(entities.map(id))), take(1))
+        .subscribe();
+};
 
 class QueryCreator {
     constructor(_queryConfig, _client, _store) {
@@ -1791,16 +1924,22 @@ class QueryCreator {
 class QueryStore {
     constructor(_config) {
         this._config = _config;
+        /**
+         * @internal
+         */
         this._store = new Map();
         this._garbageCollector = null;
         this._isInLowResourceMode = false;
         this._lastBlurTimestamp = Date.now();
+        this._storeChange$ = new Subject();
+        this.storeChange$ = this._storeChange$.asObservable();
         this._initSmartQueryHandling();
     }
     add(id, query) {
         this._store.set(id, query);
         this._initGarbageCollector();
         this._logState(id, query, 'SET');
+        this._storeChange$.next(id);
     }
     get(id) {
         return this._store.get(id) ?? null;
@@ -1809,6 +1948,7 @@ class QueryStore {
         this.get(id)?._destroy();
         this._store.delete(id);
         this._logState(id, null, 'REMOVE');
+        this._storeChange$.next(id);
     }
     forEach(callback) {
         for (const [key, query] of this._store) {
@@ -2005,6 +2145,7 @@ const buildGqlCacheKey = (config, args) => {
     return `${queryFirst50Chars}...${queryMiddle25Chars}...${queryLast50Chars}...${vars}`;
 };
 
+const ET_ARR_PREFIX = 'ET_ARR__';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 class QueryFormGroup extends FormGroup {
     patchValue(
@@ -2148,7 +2289,7 @@ class QueryForm {
                 if (previousValue &&
                     currentValue &&
                     !equal(previousValue[resetConditionKey], currentValue[resetConditionKey])) {
-                    const defaultValueForKeyToReset = this._defaultValues[formFieldKey];
+                    const defaultValueForKeyToReset = this._getDefaultValue(formFieldKey);
                     const currentValueForKeyToReset = currentValue[formFieldKey];
                     if (equal(defaultValueForKeyToReset, currentValueForKeyToReset)) {
                         continue;
@@ -2183,10 +2324,14 @@ class QueryForm {
         }
     }
     _getDefaultValue(key) {
-        return this._defaultValues[key] ?? null;
+        const val = this._defaultValues[key];
+        if (typeof val === 'string' && val.startsWith(ET_ARR_PREFIX)) {
+            return JSON.parse(val.slice(ET_ARR_PREFIX.length));
+        }
+        return val ?? null;
     }
     _isDefaultValue(key, value) {
-        const normalizedValue = Array.isArray(value) ? JSON.stringify(value) : value;
+        const normalizedValue = Array.isArray(value) ? `${ET_ARR_PREFIX}${JSON.stringify(value)}` : value;
         return this._getDefaultValue(key) === normalizedValue;
     }
     _setupFormGroup() {
@@ -2204,7 +2349,7 @@ class QueryForm {
                 continue;
             }
             if (Array.isArray(value)) {
-                defaultValues[key] = JSON.stringify(value);
+                defaultValues[key] = `${ET_ARR_PREFIX}${JSON.stringify(value)}`;
             }
             else {
                 defaultValues[key] = value;
@@ -2360,5 +2505,5 @@ const def = () => null;
  * Generated bundle index. Do not edit.
  */
 
-export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, Query, QueryClient, QueryCreator, QueryDirective, QueryError, QueryField, QueryForm, QueryFormGroup, QueryStore, buildErrorMessage, buildGqlCacheKey, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isClassValidatorError, isCustomHeaderAuthProvider, isEmptyString, isGqlQueryConfig, isNaN$1 as isNaN, isQuery, isQueryCollection, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, isSymfonyFormViolationListError, isSymfonyPagerfantaOutOfRangeError, mapToPaginated, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, request, resetPageOnError, serializeBody, shouldCacheQuery, shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
+export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, QUERY_CLIENT_DEVTOOLS_TOKEN, Query, QueryClient, QueryCreator, QueryDevtoolsComponent, QueryDirective, QueryError, QueryField, QueryForm, QueryFormGroup, QueryStore, buildErrorMessage, buildGqlCacheKey, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, insertFrom, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isClassValidatorError, isCustomHeaderAuthProvider, isEmptyString, isGqlQueryConfig, isNaN$1 as isNaN, isQuery, isQueryCollection, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, isSymfonyFormViolationListError, isSymfonyPagerfantaOutOfRangeError, mapToPaginated, mergeHeaders, paginatedEntityValueUpdater, parseAllXhrResponseHeaders, pathParamsMissingInRouteFunctionError, provideQueryClientForDevtools, queryStateAlreadyHasKeyError, queryStateCannotTransformError, queryStateDoesNotContainKeyError, removeFrom, request, resetPageOnError, serializeBody, shouldCacheQuery, shouldRetryRequest, skipPaginationPageParamCalculator, switchQueryCollectionState, switchQueryState, takeUntilResponse, transformGql, transformMethod, transformToBoolean, transformToBooleanArray, transformToDate, transformToDateArray, transformToNumber, transformToNumberArray, transformToSort, transformToSortQueryParam, transformToString, transformToStringArray };
 //# sourceMappingURL=ethlete-query.mjs.map