@ethlete/query 4.3.0 → 4.3.2

package/fesm2022/ethlete-query.mjs

@@ -1,8 +1,8 @@
 import * as i1 from '@ethlete/core';
-import { BehaviorSubjectWithSubscriberCount, getCookie, setCookie, deleteCookie, createDestroy, DelayableDirective, equal, clone } 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, distinctUntilChanged, pairwise } from 'rxjs';
+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 * as i0 from '@angular/core';
-import { isDevMode, Directive, Input, InjectionToken, inject, ChangeDetectorRef, ViewContainerRef, TemplateRef, ErrorHandler, ElementRef, assertInInjectionContext } from '@angular/core';
+import { isDevMode, Directive, Input, InjectionToken, inject, ChangeDetectorRef, ViewContainerRef, TemplateRef, ErrorHandler, ElementRef, NgZone, assertInInjectionContext } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -1107,8 +1107,9 @@ class BearerAuthProvider {
      * @internal
      */
     _refreshQuery() {
-        if (isQueryStateLoading(this._currentRefreshQuery$.getValue()?.rawState)) {
-            return;
+        const currentQuery = this._currentRefreshQuery$.getValue();
+        if (isQueryStateLoading(currentQuery?.rawState)) {
+            return currentQuery;
         }
         const currentRefreshToken = this.tokens.refreshToken;
         if (!currentRefreshToken || !this._config.refreshConfig) {
@@ -1243,10 +1244,10 @@ class QueryDirective {
             this._viewContainerRef.createEmbeddedView(this._mainTemplateRef, this._viewContext);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: QueryDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ErrorHandler }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", 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.0.1", ngImport: i0, type: QueryDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ErrorHandler }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.1", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: QueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: QueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1572,10 +1573,10 @@ class InfinityQueryDirective {
         this._viewContext.currentQuery = null;
         this._data$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", 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.0.1", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: InfinityQueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1626,10 +1627,10 @@ class InfinityQueryTriggerDirective {
         });
         this._observer.observe(this._elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", 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.0.1", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.1", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1992,6 +1993,14 @@ const buildGqlCacheKey = (config, args) => {
     return `${queryFirst50Chars}...${queryMiddle25Chars}...${queryLast50Chars}...${vars}`;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+class QueryFormGroup extends FormGroup {
+    patchValue(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value, options) {
+        super.patchValue(value, options);
+    }
+}
 class QueryField {
     get control() {
         return this.data.control;
@@ -2046,13 +2055,25 @@ class QueryForm {
         this._router = inject(Router);
         this._activatedRoute = inject(ActivatedRoute);
         this._defaultValues = this._extractDefaultValues();
+        this._routerStateService = inject(RouterStateService);
+        this._zone = inject(NgZone);
         this._isObserving = false;
         this.form = this._setupFormGroup();
+        this._lastFormValue$ = new BehaviorSubject(null);
+        this._currentFormValue$ = new BehaviorSubject({
+            id: 0,
+            data: this._formValue,
+        });
         this._changes$ = new BehaviorSubject({
             previousValue: null,
             currentValue: this.form.getRawValue(),
         });
-        this.changes$ = this._changes$.asObservable();
+        this.changes$ = this._currentFormValue$.pipe(withLatestFrom(this._lastFormValue$)).pipe(map(([currentValueEvent, previousValueEvent]) => {
+            return {
+                previousValue: previousValueEvent?.data ?? null,
+                currentValue: currentValueEvent.data,
+            };
+        }));
         assertInInjectionContext(QueryForm);
     }
     observe(options) {
@@ -2063,73 +2084,90 @@ class QueryForm {
             return;
         }
         this._isObserving = true;
-        this.setFormValueFromUrlQueryParams();
-        combineLatest(Object.values(this._fields).map((field) => field.changes$))
-            .pipe(takeUntil(this._destroy$), takeUntil(this._unobserveTrigger$), map(() => this._formValue), distinctUntilChanged((a, b) => equal(a, b)), tap((values) => {
+        this.setFormValueFromUrlQueryParams({
+            queryParams: this._routerStateService.queryParams,
+        });
+        this.form.valueChanges
+            .pipe(startWith(null), tap(() => {
+            this._lastFormValue$.next(clone(this._currentFormValue$.value));
+            this._currentFormValue$.next({ id: this._currentFormValue$.value.id + 1, data: clone(this._formValue) });
+        }), takeUntil(this._destroy$), takeUntil(this._unobserveTrigger$))
+            .subscribe();
+        this._currentFormValue$
+            .pipe(tap((currentValueEvent) => {
+            const previousValueEvent = this._lastFormValue$.value;
+            const currentValue = currentValueEvent.data;
             if (options?.writeToQueryParams !== false) {
-                this._syncViaUrlQueryParams(values, options?.replaceUrl);
+                this._syncViaUrlQueryParams(currentValueEvent.data, options?.replaceUrl);
             }
-        }), pairwise(), startWith([null, this._formValue]), map(([previousValue, currentValue]) => ({ previousValue, currentValue })), tap(({ previousValue, currentValue }) => {
-            let didResetValues = false;
-            for (const formFieldKey in this._fields) {
-                const resets = this._fields[formFieldKey].data.isResetBy;
-                if (!resets)
-                    continue;
-                const resetConditionKeys = Array.isArray(resets) ? resets : [resets];
-                for (const resetConditionKey of resetConditionKeys) {
-                    if (!(resetConditionKey in this._fields)) {
-                        if (isDevMode()) {
-                            console.warn(`The field "${resetConditionKey}" is not defined in the QueryForm. Is it a typo?`, this);
-                        }
-                        continue;
-                    }
-                    if (previousValue &&
-                        currentValue &&
-                        !equal(previousValue[resetConditionKey], currentValue[resetConditionKey])) {
-                        const defaultValueForKeyToReset = this._defaultValues[formFieldKey];
-                        const currentValueForKeyToReset = currentValue[formFieldKey];
-                        if (equal(defaultValueForKeyToReset, currentValueForKeyToReset)) {
-                            continue;
-                        }
-                        this.form.controls[formFieldKey].setValue(defaultValueForKeyToReset);
-                        didResetValues = true;
-                        break;
-                    }
-                }
+            const didResetValues = this._handleQueryFormResets(previousValueEvent?.data ?? null, currentValue);
+            if (didResetValues) {
+                return;
             }
-            if (!didResetValues) {
-                this._changes$.next({
-                    previousValue,
-                    currentValue,
-                });
+            if (this._currentFormValue$.value.id !== currentValueEvent.id) {
+                return;
             }
-        }))
+            this._changes$.next({
+                previousValue: previousValueEvent?.data ?? null,
+                currentValue: currentValueEvent.data,
+            });
+        }), takeUntil(this._destroy$), takeUntil(this._unobserveTrigger$))
             .subscribe();
         if (options?.syncOnNavigation !== false) {
-            this._activatedRoute.queryParams
-                .pipe(takeUntil(this._destroy$), takeUntil(this._unobserveTrigger$), tap(() => this.setFormValueFromUrlQueryParams()))
+            this._routerStateService.queryParamChanges$
+                .pipe(takeUntil(this._destroy$), takeUntil(this._unobserveTrigger$), tap((changes) => this.setFormValueFromUrlQueryParams({ queryParams: changes })))
                 .subscribe();
         }
     }
+    _handleQueryFormResets(previousValue, currentValue) {
+        let didResetValues = false;
+        for (const formFieldKey in this._fields) {
+            const resets = this._fields[formFieldKey].data.isResetBy;
+            if (!resets)
+                continue;
+            const resetConditionKeys = Array.isArray(resets) ? resets : [resets];
+            for (const resetConditionKey of resetConditionKeys) {
+                if (!(resetConditionKey in this._fields)) {
+                    if (isDevMode()) {
+                        console.warn(`The field "${resetConditionKey}" is not defined in the QueryForm. Is it a typo?`, this);
+                    }
+                    continue;
+                }
+                if (previousValue &&
+                    currentValue &&
+                    !equal(previousValue[resetConditionKey], currentValue[resetConditionKey])) {
+                    const defaultValueForKeyToReset = this._defaultValues[formFieldKey];
+                    const currentValueForKeyToReset = currentValue[formFieldKey];
+                    if (equal(defaultValueForKeyToReset, currentValueForKeyToReset)) {
+                        continue;
+                    }
+                    this.form.controls[formFieldKey].setValue(defaultValueForKeyToReset);
+                    didResetValues = true;
+                    break;
+                }
+            }
+        }
+        return didResetValues;
+    }
     unobserve() {
         this._unobserveTrigger$.next(true);
     }
     setFormValueFromUrlQueryParams(options) {
-        const queryParams = this._activatedRoute.snapshot.queryParams;
         for (const [key, field] of Object.entries(this._fields)) {
-            const value = queryParams[key];
-            // We only check using == because the value types can be different (e.g. "1" and 1)
-            if (value == field.control.value) {
+            const value = options.queryParams[key];
+            const valueDoesNotExist = value === undefined;
+            if (valueDoesNotExist)
                 continue;
-            }
-            else if (value === undefined) {
-                // The value might have been removed from the URL query params due to a back navigation or something
+            const valueGotRemoved = value === ET_PROPERTY_REMOVED;
+            if (valueGotRemoved) {
                 field.setValue(this._getDefaultValue(key), { skipDebounce: options?.skipDebounce ?? true });
+                continue;
             }
-            else {
-                const deserializedValue = field.data.queryParamToValueTransformFn?.(value) ?? value;
-                field.setValue(deserializedValue, { skipDebounce: options?.skipDebounce ?? true });
-            }
+            const deserializedValue = field.data.queryParamToValueTransformFn?.(value) ?? value;
+            const valueIsEqualToCurrent = equal(deserializedValue, field.control.value);
+            if (valueIsEqualToCurrent)
+                continue;
+            field.setValue(deserializedValue, { skipDebounce: options?.skipDebounce ?? true });
         }
     }
     _getDefaultValue(key) {
@@ -2140,7 +2178,7 @@ class QueryForm {
         return this._getDefaultValue(key) === normalizedValue;
     }
     _setupFormGroup() {
-        const group = new FormGroup({});
+        const group = new QueryFormGroup({});
         for (const [key, field] of Object.entries(this._fields)) {
             group.addControl(key, field.control);
         }
@@ -2165,6 +2203,10 @@ class QueryForm {
     _syncViaUrlQueryParams(values, replaceUrl) {
         const queryParams = { ...clone(this._activatedRoute.snapshot.queryParams) };
         for (const [key, value] of Object.entries(values)) {
+            if (!this._fields[key]) {
+                console.warn(`The field "${key}" is not defined in the QueryForm. Is it a typo?`, this);
+                continue;
+            }
             if (this._isDefaultValue(key, value) || this._fields[key].data.appendToUrl === false) {
                 delete queryParams[key];
             }
@@ -2174,9 +2216,11 @@ class QueryForm {
                     : value;
             }
         }
-        this._router.navigate([], {
-            queryParams,
-            replaceUrl,
+        this._zone.run(() => {
+            this._router.navigate([], {
+                queryParams,
+                replaceUrl,
+            });
         });
     }
 }
@@ -2304,5 +2348,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, QueryStore, buildErrorMessage, buildGqlCacheKey, buildQueryArrayString, buildQueryObjectString, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterInvalidParams, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isCustomHeaderAuthProvider, isGqlQueryConfig, isParamValid, isQuery, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, 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, QueryClient, QueryCreator, QueryDirective, QueryError, QueryField, QueryForm, QueryFormGroup, QueryStore, buildErrorMessage, buildGqlCacheKey, buildQueryArrayString, buildQueryObjectString, buildQueryString, buildRoute, buildTimestampFromSeconds, castQueryCreatorTypes, computeQueryAuthHeader, computeQueryBody, computeQueryHeaders, computeQueryMethod, computeQueryQueryParams, createInfinityQueryConfig, createQueryCollection, decryptBearer, deepFreeze, def, detectContentTypeHeader, extractExpiresInSeconds, extractQuery, filterFailure, filterInvalidParams, filterNull, filterQueryStates, filterSuccess, forEachHeader, getDefaultHeaders, getResponseUrl, gql, hasHeader, ignoreAutoRefresh, invalidBaseRouteError, invalidBodyError, invalidRouteError, isAutoRefresh, isBasicAuthProvider, isBearerAuthProvider, isCustomHeaderAuthProvider, isGqlQueryConfig, isParamValid, isQuery, isQueryStateCancelled, isQueryStateFailure, isQueryStateLoading, isQueryStatePrepared, isQueryStateSuccess, isRequestError, isSymfonyError, 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 };
 //# sourceMappingURL=ethlete-query.mjs.map