@ethlete/query 4.10.0 → 4.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/auth/auth-provider.types.mjs +1 -1
- package/esm2022/lib/auth/bearer-auth-provider.mjs +17 -7
- package/esm2022/lib/devtools/components/query-devtools/query-devtools.component.mjs +3 -3
- package/esm2022/lib/devtools/pipes/query-short-name.pipe.mjs +3 -3
- package/esm2022/lib/directives/infinity-query-trigger.directive.mjs +3 -3
- package/esm2022/lib/directives/infinity-query.directive.mjs +3 -3
- package/esm2022/lib/directives/query.directive.mjs +3 -3
- package/esm2022/lib/query-creator/query-creator.mjs +8 -3
- package/esm2022/lib/query-form/query-form.mjs +93 -76
- package/esm2022/lib/utils/data.utils.mjs +39 -0
- package/esm2022/lib/utils/index.mjs +2 -1
- package/fesm2022/ethlete-query.mjs +285 -217
- package/fesm2022/ethlete-query.mjs.map +1 -1
- package/lib/auth/auth-provider.types.d.ts +18 -0
- package/lib/auth/bearer-auth-provider.d.ts +2 -0
- package/lib/query-creator/query-creator.d.ts +7 -2
- package/lib/query-form/query-form.d.ts +8 -28
- package/lib/utils/data.utils.d.ts +15 -0
- package/lib/utils/index.d.ts +1 -0
- package/package.json +2 -2
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i1$1 from '@ethlete/core';
|
|
2
2
|
import { getCookie, setCookie, deleteCookie, createDestroy, nextFrame, DelayableDirective, RouterStateService, clone, equal, ET_PROPERTY_REMOVED } from '@ethlete/core';
|
|
3
|
-
import { Observable, BehaviorSubject, Subject, fromEvent, timer, takeUntil, take, filter, takeWhile, switchMap, of, tap, shareReplay, interval, skip, map, startWith, combineLatest, withLatestFrom, debounceTime,
|
|
3
|
+
import { Observable, BehaviorSubject, Subject, fromEvent, timer, takeUntil, take, filter, takeWhile, switchMap, of, tap, shareReplay, interval, skip, map, startWith, combineLatest, withLatestFrom, debounceTime, merge } from 'rxjs';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { isDevMode, Pipe, InjectionToken, inject, ChangeDetectorRef,
|
|
5
|
+
import { signal, isDevMode, Pipe, InjectionToken, inject, ChangeDetectorRef, computed, effect, Component, ChangeDetectionStrategy, ViewEncapsulation, TemplateRef, ViewContainerRef, ErrorHandler, Directive, Input, ElementRef, NgZone, assertInInjectionContext } from '@angular/core';
|
|
6
6
|
import { NgIf, NgFor, AsyncPipe, JsonPipe, NgClass } from '@angular/common';
|
|
7
7
|
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
8
8
|
import * as i1 from '@angular/forms';
|
|
@@ -512,6 +512,68 @@ const request = (config) => {
|
|
|
512
512
|
});
|
|
513
513
|
};
|
|
514
514
|
|
|
515
|
+
class QuerySubject extends BehaviorSubject {
|
|
516
|
+
constructor(initialValue = null, _config) {
|
|
517
|
+
super(initialValue);
|
|
518
|
+
this._config = _config;
|
|
519
|
+
}
|
|
520
|
+
next(value) {
|
|
521
|
+
if (this._config?.abortPrevious) {
|
|
522
|
+
this.value?.abort();
|
|
523
|
+
}
|
|
524
|
+
super.next(value);
|
|
525
|
+
}
|
|
526
|
+
}
|
|
527
|
+
const querySignal = (initialValue = null, config) => {
|
|
528
|
+
const _signal = signal(initialValue);
|
|
529
|
+
const origMutate = _signal.mutate;
|
|
530
|
+
const origUpdate = _signal.update;
|
|
531
|
+
const origSet = _signal.set;
|
|
532
|
+
_signal.mutate = (mutatorFn) => {
|
|
533
|
+
if (config?.abortPrevious) {
|
|
534
|
+
_signal()?.abort();
|
|
535
|
+
}
|
|
536
|
+
origMutate(mutatorFn);
|
|
537
|
+
};
|
|
538
|
+
_signal.update = (updateFn) => {
|
|
539
|
+
if (config?.abortPrevious) {
|
|
540
|
+
_signal()?.abort();
|
|
541
|
+
}
|
|
542
|
+
origUpdate(updateFn);
|
|
543
|
+
};
|
|
544
|
+
_signal.set = (value) => {
|
|
545
|
+
if (config?.abortPrevious) {
|
|
546
|
+
_signal()?.abort();
|
|
547
|
+
}
|
|
548
|
+
origSet(value);
|
|
549
|
+
};
|
|
550
|
+
};
|
|
551
|
+
|
|
552
|
+
const deepFreeze = (object) => {
|
|
553
|
+
// check if object is actually an object or frozen
|
|
554
|
+
if (!object || typeof object !== 'object' || Object.isFrozen(object)) {
|
|
555
|
+
return object;
|
|
556
|
+
}
|
|
557
|
+
// Retrieve the property names defined on object
|
|
558
|
+
const propNames = Object.getOwnPropertyNames(object);
|
|
559
|
+
// Freeze properties before freezing self
|
|
560
|
+
for (const name of propNames) {
|
|
561
|
+
const value = object[name];
|
|
562
|
+
if (value && typeof value === 'object') {
|
|
563
|
+
deepFreeze(value);
|
|
564
|
+
}
|
|
565
|
+
}
|
|
566
|
+
return Object.freeze(object);
|
|
567
|
+
};
|
|
568
|
+
|
|
569
|
+
/**
|
|
570
|
+
* Dummy function for providing types while not breaking inference.
|
|
571
|
+
* **This function always returns null.**
|
|
572
|
+
* @see https://github.com/microsoft/TypeScript/issues/26242
|
|
573
|
+
* @returns null
|
|
574
|
+
*/
|
|
575
|
+
const def = () => null;
|
|
576
|
+
|
|
515
577
|
class QueryCreator {
|
|
516
578
|
constructor(_queryConfig, _client, _store) {
|
|
517
579
|
this._queryConfig = _queryConfig;
|
|
@@ -541,7 +603,12 @@ class QueryCreator {
|
|
|
541
603
|
this._store._dispatchQueryCreated(query);
|
|
542
604
|
return query;
|
|
543
605
|
};
|
|
544
|
-
this.
|
|
606
|
+
this.createSubject = (initialValue, config) => new QuerySubject(initialValue ?? null, config);
|
|
607
|
+
this.createSignal = (initialValue, config) => querySignal(initialValue ?? null, config);
|
|
608
|
+
/**
|
|
609
|
+
* @deprecated Use `myQuery.createSubject()` or `myQuery.createSignal()` instead. Will be removed in v5.
|
|
610
|
+
*/
|
|
611
|
+
this.behaviorSubject = (initialValue, config) => new QuerySubject(initialValue ?? null, config);
|
|
545
612
|
}
|
|
546
613
|
}
|
|
547
614
|
|
|
@@ -1349,7 +1416,7 @@ class BearerAuthProvider {
|
|
|
1349
1416
|
if (this.tokens.token) {
|
|
1350
1417
|
this._prepareForRefresh();
|
|
1351
1418
|
if (this.tokens.refreshToken && this._config.refreshConfig?.cookieName && cookieEnabled) {
|
|
1352
|
-
|
|
1419
|
+
this._setCookie();
|
|
1353
1420
|
}
|
|
1354
1421
|
}
|
|
1355
1422
|
else if (this.tokens.refreshToken) {
|
|
@@ -1361,7 +1428,7 @@ class BearerAuthProvider {
|
|
|
1361
1428
|
this._destroy$.unsubscribe();
|
|
1362
1429
|
this._currentRefreshQuery$.next(null);
|
|
1363
1430
|
if (this._config.refreshConfig?.cookieName) {
|
|
1364
|
-
|
|
1431
|
+
this._deleteCookie();
|
|
1365
1432
|
}
|
|
1366
1433
|
}
|
|
1367
1434
|
enableCookie() {
|
|
@@ -1372,14 +1439,24 @@ class BearerAuthProvider {
|
|
|
1372
1439
|
throw new Error('No refresh token was provided');
|
|
1373
1440
|
}
|
|
1374
1441
|
this._config.refreshConfig.cookieEnabled = true;
|
|
1375
|
-
|
|
1442
|
+
this._setCookie();
|
|
1376
1443
|
}
|
|
1377
1444
|
disableCookie() {
|
|
1378
1445
|
if (!this._config.refreshConfig?.cookieName) {
|
|
1379
1446
|
throw new Error('No cookie name was provided');
|
|
1380
1447
|
}
|
|
1381
1448
|
this._config.refreshConfig.cookieEnabled = false;
|
|
1382
|
-
|
|
1449
|
+
this._deleteCookie();
|
|
1450
|
+
}
|
|
1451
|
+
_setCookie() {
|
|
1452
|
+
if (!this._config.refreshConfig?.cookieName || !this.tokens.refreshToken)
|
|
1453
|
+
return;
|
|
1454
|
+
setCookie(this._config.refreshConfig.cookieName, this.tokens.refreshToken, this._config.refreshConfig.cookieExpiresInDays, this._config.refreshConfig.cookieDomain, this._config.refreshConfig.cookiePath);
|
|
1455
|
+
}
|
|
1456
|
+
_deleteCookie() {
|
|
1457
|
+
if (!this._config.refreshConfig?.cookieName)
|
|
1458
|
+
return;
|
|
1459
|
+
deleteCookie(this._config.refreshConfig.cookieName, this._config.refreshConfig.cookiePath, this._config.refreshConfig.cookieDomain);
|
|
1383
1460
|
}
|
|
1384
1461
|
_prepareForRefresh() {
|
|
1385
1462
|
if (!this.tokens.token || !this._config.refreshConfig) {
|
|
@@ -1443,14 +1520,14 @@ class BearerAuthProvider {
|
|
|
1443
1520
|
}
|
|
1444
1521
|
const cookieEnabled = this._config.refreshConfig?.cookieEnabled ?? true;
|
|
1445
1522
|
if (this._config.refreshConfig?.cookieName && this.tokens.refreshToken && cookieEnabled) {
|
|
1446
|
-
|
|
1523
|
+
this._setCookie();
|
|
1447
1524
|
}
|
|
1448
1525
|
this._prepareForRefresh();
|
|
1449
1526
|
}
|
|
1450
1527
|
else if (isQueryStateFailure(state)) {
|
|
1451
1528
|
this._tokens$.next({ token: null, refreshToken: null });
|
|
1452
1529
|
if (this._config.refreshConfig?.cookieName) {
|
|
1453
|
-
|
|
1530
|
+
this._deleteCookie();
|
|
1454
1531
|
}
|
|
1455
1532
|
}
|
|
1456
1533
|
}), takeUntilResponse(), takeUntil(this._destroy$))
|
|
@@ -1478,10 +1555,10 @@ class QueryShortNamePipe {
|
|
|
1478
1555
|
console.log(route);
|
|
1479
1556
|
return route;
|
|
1480
1557
|
}
|
|
1481
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
1482
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.
|
|
1558
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1559
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.3", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
|
|
1483
1560
|
}
|
|
1484
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
1561
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: QueryShortNamePipe, decorators: [{
|
|
1485
1562
|
type: Pipe,
|
|
1486
1563
|
args: [{ name: 'queryShortName', standalone: true }]
|
|
1487
1564
|
}] });
|
|
@@ -1688,10 +1765,10 @@ class QueryDevtoolsComponent {
|
|
|
1688
1765
|
clearQueryHistory() {
|
|
1689
1766
|
this.queryHistory.set([]);
|
|
1690
1767
|
}
|
|
1691
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
1692
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Open Devtools</button>\n\n<div\n *ngIf=\"isOpen()\"\n [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n <header class=\"et-qd-header\">\n <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n <div class=\"et-qd-header__select\">\n <label for=\"et-query-client-instance\">Client instance</label>\n <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n <option *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\" [value]=\"i\">\n {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n </option>\n </select>\n </div>\n\n <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n </header>\n\n <div class=\"et-qd-sub-header\">\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n (click)=\"toggleTranslucent()\"\n class=\"et-qd-chip et-qd-translucent-clickable\"\n >\n Translucent\n </button>\n <div class=\"et-qd-sub-header__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n (click)=\"selectSnapLayout('full')\"\n class=\"et-qd-chip\"\n >\n Fullscreen\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n (click)=\"selectSnapLayout('top')\"\n class=\"et-qd-chip\"\n >\n Top\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n (click)=\"selectSnapLayout('bottom')\"\n class=\"et-qd-chip\"\n >\n Bottom\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n (click)=\"selectSnapLayout('left')\"\n class=\"et-qd-chip\"\n >\n Left\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n (click)=\"selectSnapLayout('right')\"\n class=\"et-qd-chip\"\n >\n Right\n </button>\n </div>\n\n <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-client\">\n <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n <div class=\"et-qd-client__actions\">\n <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n Refresh all (ignore caches)\n </button>\n <button\n (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n class=\"et-qd-chip\"\n >\n Refresh all (ignore caches & purge unused)\n </button>\n </div>\n </div>\n\n <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-queries\">\n <p class=\"et-qd-queries__title\">Query browser</p>\n <div class=\"et-qd-queries__actions\">\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' }\"\n (click)=\"selectQueryListMode('live')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Live ({{ queries()?.length ?? 0 }})\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' }\"\n (click)=\"selectQueryListMode('history')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n History ({{ queryHistory().length }}/50)\n </button>\n <ng-container *ngIf=\"queryListMode() === 'history'\">\n <div class=\"et-qd-queries__divider\"></div>\n <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n </ng-container>\n </div>\n\n <div class=\"et-qd-queries__browser\">\n <ul *ngIf=\"queryListMode() === 'live'\" class=\"et-qd-queries__browser-list\">\n <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n <span> {{ query._queryConfig.method }}</span>\n <span> {{ query | queryShortName }}</span>\n </button>\n </li>\n </ul>\n <ul *ngIf=\"queryListMode() === 'history'\" class=\"et-qd-queries__browser-list\">\n <li *ngFor=\"let query of queryHistory(); trackBy: trackByQuery\">\n <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n <span> {{ query._queryConfig.method }}</span>\n <span> {{ query | queryShortName }}</span>\n </button>\n </li>\n </ul>\n <div class=\"et-qd-queries__browser-detail\">\n <ng-container *ngIf=\"selectedQuery() as query\">\n <p class=\"et-qd-queries__browser-detail__title\">\n {{ query._queryConfig.method }} {{ query._routeWithParams }}\n </p>\n\n <div class=\"et-qd-queries__actions\">\n <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n Execute (ignore cache)\n </button>\n\n <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n <div class=\"et-qd-queries__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Poll\n </button>\n\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n (click)=\"query.stopPolling()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Stop polling\n </button>\n <ng-container *ngIf=\"query.isPolling || query._isPollingPaused\">\n <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n Pause polling\n </button>\n <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n Resume polling\n </button>\n </ng-container>\n </div>\n\n <div class=\"et-qd-list\">\n <div class=\"et-qd-list-item\">\n <p>State type</p>\n <pre>{{ query.rawState.type }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is expired</p>\n <pre>{{ query.isExpired }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is in use</p>\n <pre>{{ query.isInUse }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Subscriber count</p>\n <pre>{{ query._subscriberCount }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is polling</p>\n <pre>{{ query.isPolling }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is polling paused</p>\n <pre>{{ query._isPollingPaused }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Enable smart polling</p>\n <pre>{{ query._enableSmartPolling }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Arguments</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n (click)=\"toggleShowArguments()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n <pre *ngIf=\"showArguments()\">{{ query._arguments | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>State</p>\n <p><i> Warning, this will cause a subscription if shown!</i></p>\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n (click)=\"toggleShowResponse()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Raw state</p>\n <p><i> The query state unaffected by entity stores</i></p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n (click)=\"toggleShowRawResponse()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Query config</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n (click)=\"toggleShowQueryConfig()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n <pre *ngIf=\"showQueryConfig()\">{{ stringifiedQueryConfig() | json }}</pre>\n </div>\n\n <div *ngIf=\"!!query._queryConfig.entity\" class=\"et-qd-list-item\">\n <p>Entity store value</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n (click)=\"toggleShowEntityStoreValue()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n <pre *ngIf=\"showEntityStoreValue()\">{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%;border-right:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%;border-top:1px solid rgb(37,41,46)}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999;all:unset;font-family:monospace}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid #3c424a;padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid #3c424a;margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid #3c424a;list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid #3c424a;background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;gap:2px}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
1768
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1769
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "<button *ngIf=\"!isOpen()\" (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Open Devtools</button>\n\n<div\n *ngIf=\"isOpen()\"\n [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n>\n <header class=\"et-qd-header\">\n <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n <div class=\"et-qd-header__select\">\n <label for=\"et-query-client-instance\">Client instance</label>\n <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n <option *ngFor=\"let clientConfig of queryClientConfigs; index as i; trackBy: trackByClient\" [value]=\"i\">\n {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n </option>\n </select>\n </div>\n\n <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n </header>\n\n <div class=\"et-qd-sub-header\">\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n (click)=\"toggleTranslucent()\"\n class=\"et-qd-chip et-qd-translucent-clickable\"\n >\n Translucent\n </button>\n <div class=\"et-qd-sub-header__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n (click)=\"selectSnapLayout('full')\"\n class=\"et-qd-chip\"\n >\n Fullscreen\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n (click)=\"selectSnapLayout('top')\"\n class=\"et-qd-chip\"\n >\n Top\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n (click)=\"selectSnapLayout('bottom')\"\n class=\"et-qd-chip\"\n >\n Bottom\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n (click)=\"selectSnapLayout('left')\"\n class=\"et-qd-chip\"\n >\n Left\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n (click)=\"selectSnapLayout('right')\"\n class=\"et-qd-chip\"\n >\n Right\n </button>\n </div>\n\n <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-client\">\n <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n <div class=\"et-qd-client__actions\">\n <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n Refresh all (ignore caches)\n </button>\n <button\n (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n class=\"et-qd-chip\"\n >\n Refresh all (ignore caches & purge unused)\n </button>\n </div>\n </div>\n\n <div *ngIf=\"selectedClientConfig() as cfg\" class=\"et-qd-queries\">\n <p class=\"et-qd-queries__title\">Query browser</p>\n <div class=\"et-qd-queries__actions\">\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' }\"\n (click)=\"selectQueryListMode('live')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Live ({{ queries()?.length ?? 0 }})\n </button>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' }\"\n (click)=\"selectQueryListMode('history')\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n History ({{ queryHistory().length }}/50)\n </button>\n <ng-container *ngIf=\"queryListMode() === 'history'\">\n <div class=\"et-qd-queries__divider\"></div>\n <button (click)=\"clearQueryHistory()\" class=\"et-qd-chip et-qd-chip-bordered\">Clear history</button>\n </ng-container>\n </div>\n\n <div class=\"et-qd-queries__browser\">\n <ul *ngIf=\"queryListMode() === 'live'\" class=\"et-qd-queries__browser-list\">\n <li *ngFor=\"let query of queries(); trackBy: trackByQuery\">\n <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n <span> {{ query._queryConfig.method }}</span>\n <span> {{ query | queryShortName }}</span>\n </button>\n </li>\n </ul>\n <ul *ngIf=\"queryListMode() === 'history'\" class=\"et-qd-queries__browser-list\">\n <li *ngFor=\"let query of queryHistory(); trackBy: trackByQuery\">\n <button [class.et-qd-query--active]=\"selectedQuery()?._id === query._id\" (click)=\"selectQuery(query)\">\n <span> {{ query._queryConfig.method }}</span>\n <span> {{ query | queryShortName }}</span>\n </button>\n </li>\n </ul>\n <div class=\"et-qd-queries__browser-detail\">\n <ng-container *ngIf=\"selectedQuery() as query\">\n <p class=\"et-qd-queries__browser-detail__title\">\n {{ query._queryConfig.method }} {{ query._routeWithParams }}\n </p>\n\n <div class=\"et-qd-queries__actions\">\n <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n Execute (ignore cache)\n </button>\n\n <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n <div class=\"et-qd-queries__divider\"></div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Poll\n </button>\n\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n (click)=\"query.stopPolling()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Stop polling\n </button>\n <ng-container *ngIf=\"query.isPolling || query._isPollingPaused\">\n <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n Pause polling\n </button>\n <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n Resume polling\n </button>\n </ng-container>\n </div>\n\n <div class=\"et-qd-list\">\n <div class=\"et-qd-list-item\">\n <p>State type</p>\n <pre>{{ query.rawState.type }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is expired</p>\n <pre>{{ query.isExpired }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is in use</p>\n <pre>{{ query.isInUse }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Subscriber count</p>\n <pre>{{ query._subscriberCount }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is polling</p>\n <pre>{{ query.isPolling }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Is polling paused</p>\n <pre>{{ query._isPollingPaused }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Enable smart polling</p>\n <pre>{{ query._enableSmartPolling }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Arguments</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n (click)=\"toggleShowArguments()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n <pre *ngIf=\"showArguments()\">{{ query._arguments | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>State</p>\n <p><i> Warning, this will cause a subscription if shown!</i></p>\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n (click)=\"toggleShowResponse()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n <pre *ngIf=\"showResponse()\">{{ query.state$ | async | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Raw state</p>\n <p><i> The query state unaffected by entity stores</i></p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n (click)=\"toggleShowRawResponse()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n <pre *ngIf=\"showRawResponse()\">{{ query.rawState | json }}</pre>\n </div>\n\n <div class=\"et-qd-list-item\">\n <p>Query config</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n (click)=\"toggleShowQueryConfig()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n <pre *ngIf=\"showQueryConfig()\">{{ stringifiedQueryConfig() | json }}</pre>\n </div>\n\n <div *ngIf=\"!!query._queryConfig.entity\" class=\"et-qd-list-item\">\n <p>Entity store value</p>\n\n <div>\n <button\n [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n (click)=\"toggleShowEntityStoreValue()\"\n class=\"et-qd-chip et-qd-chip-bordered\"\n >\n Toggle\n </button>\n </div>\n <pre *ngIf=\"showEntityStoreValue()\">{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%;border-right:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%;border-top:1px solid rgb(37,41,46)}.et-query-devtools-open-btn{position:fixed;inset-inline-start:0;inset-block-start:0;z-index:9999;all:unset;font-family:monospace}.et-qd-header{background-color:#00ffa1;padding:12px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.et-qd-header__title{color:#25292e;margin:0;font-size:22px}.et-qd-header__select{display:grid;background-color:#25292e;border-radius:10px;overflow:hidden}.et-qd-header__select select{width:250px;color:#fff;padding:3px 10px 2px;border:none;background-color:#25292e;font-family:monospace}.et-qd-header__select label{padding:3px 10px;color:#25292e;font-size:12px;font-weight:700;color:#fff;border-bottom:1px solid gray}.et-qd-sub-header{background-color:#00b371;padding:12px;display:flex;gap:12px;flex-wrap:wrap}.et-qd-sub-header__divider{width:1px;background-color:#25292e}.et-qd-btn{background-color:#00ffa1;color:#25292e;border:none;padding:12px;cursor:pointer;font-size:14px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;width:100%;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-btn:hover{background-color:#00cc81}.et-qd-btn.et-qd-btn-secondary{background-color:#25292e;color:#00ffa1}.et-qd-btn.et-qd-btn-secondary:hover{background-color:#3c424a}.et-qd-chip{background-color:#00ffa1;color:#25292e;border:none;padding:4px 9px;cursor:pointer;font-size:12px;font-weight:700;text-align:center;text-decoration:none;display:inline-block;transition:all .3s ease-in-out;font-family:monospace;border-radius:10px}.et-qd-chip:hover{background-color:#00cc81}.et-qd-chip.et-qd-chip-secondary{background-color:#25292e;color:#00ffa1}.et-qd-chip.et-qd-chip-secondary:hover{background-color:#3c424a}.et-qd-chip.et-qd-chip-bordered{border:1px solid rgb(0,255,161)}.et-qd-translucent-clickable{pointer-events:all}.et-qd-client{border-bottom:1px solid #3c424a;padding:12px}.et-qd-client__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-client__actions{display:flex;gap:12px;margin-top:12px}.et-qd-queries{padding:12px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}.et-qd-queries__actions{display:flex;gap:12px;margin-top:12px;margin-bottom:16px}.et-qd-queries__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-queries__divider{width:1px;background-color:#3c424a}.et-qd-queries__browser{display:grid;grid-template-columns:1fr minmax(0,3fr);margin-left:-12px;margin-right:-12px;border-top:1px solid #3c424a;margin-bottom:-12px}.et-qd-queries__browser-list{border-right:1px solid #3c424a;list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:row;grid-auto-rows:55px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-list li{margin:0}.et-qd-queries__browser-list li button{all:unset;font-family:monospace;box-sizing:border-box;width:100%;border:none;border-bottom:1px solid #3c424a;background-color:#25292e;color:#fff;text-align:left;padding:12px;height:100%;transition:all .3s ease-in-out;cursor:pointer;display:grid;gap:2px}.et-qd-queries__browser-list li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.et-qd-queries__browser-list li button span:first-of-type{font-weight:700}.et-qd-queries__browser-list li button:hover,.et-qd-queries__browser-list li button.et-qd-query--active{background-color:#30363c}.et-qd-queries__browser-detail{padding:12px;overflow-y:auto;overflow-x:hidden}.et-qd-queries__browser-detail__title{margin:0;font-size:14px;color:#fff;font-weight:700}.et-qd-list{display:grid;gap:12px}.et-qd-list-item{display:grid}.et-qd-list-item p{font-weight:700;margin:0;padding-bottom:8px}.et-qd-list-item p+p{margin-top:-8px}.et-qd-list-item div+pre{margin-top:8px}.et-qd-list-item pre{margin:0;padding:4px;background-color:#0e1012;border-radius:4px;max-height:450px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
1693
1770
|
}
|
|
1694
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
1771
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
|
|
1695
1772
|
type: Component,
|
|
1696
1773
|
args: [{ selector: 'et-query-devtools', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, host: {
|
|
1697
1774
|
class: 'et-query-devtools',
|
|
@@ -1796,10 +1873,10 @@ class QueryDirective {
|
|
|
1796
1873
|
this._viewContainerRef.createEmbeddedView(this._mainTemplateRef, this._viewContext);
|
|
1797
1874
|
}
|
|
1798
1875
|
}
|
|
1799
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
1800
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.
|
|
1876
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1877
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 }); }
|
|
1801
1878
|
}
|
|
1802
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
1879
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: QueryDirective, decorators: [{
|
|
1803
1880
|
type: Directive,
|
|
1804
1881
|
args: [{
|
|
1805
1882
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -2128,10 +2205,10 @@ class InfinityQueryDirective {
|
|
|
2128
2205
|
this._viewContext.currentQuery = null;
|
|
2129
2206
|
this._data$.next([]);
|
|
2130
2207
|
}
|
|
2131
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
2132
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.
|
|
2208
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2209
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: InfinityQueryDirective, isStandalone: true, selector: "[etInfinityQuery]", inputs: { infinityQuery: ["etInfinityQuery", "infinityQuery"] }, providers: [{ provide: INFINITY_QUERY_TOKEN, useExisting: InfinityQueryDirective }], exportAs: ["etInfinityQuery"], hostDirectives: [{ directive: i1$1.DelayableDirective }], ngImport: i0 }); }
|
|
2133
2210
|
}
|
|
2134
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
2211
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: InfinityQueryDirective, decorators: [{
|
|
2135
2212
|
type: Directive,
|
|
2136
2213
|
args: [{
|
|
2137
2214
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -2182,10 +2259,10 @@ class InfinityQueryTriggerDirective {
|
|
|
2182
2259
|
});
|
|
2183
2260
|
this._observer.observe(this._elementRef.nativeElement);
|
|
2184
2261
|
}
|
|
2185
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.
|
|
2186
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.
|
|
2262
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2263
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 }); }
|
|
2187
2264
|
}
|
|
2188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.
|
|
2265
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
|
|
2189
2266
|
type: Directive,
|
|
2190
2267
|
args: [{
|
|
2191
2268
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -2346,54 +2423,107 @@ const removeFrom = (store, { where, id }) => {
|
|
|
2346
2423
|
.subscribe();
|
|
2347
2424
|
};
|
|
2348
2425
|
|
|
2349
|
-
const
|
|
2350
|
-
|
|
2351
|
-
|
|
2352
|
-
patchValue(
|
|
2353
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2354
|
-
value, options) {
|
|
2355
|
-
super.patchValue(value, options);
|
|
2426
|
+
const transformToString = (value) => {
|
|
2427
|
+
if (typeof value === 'string') {
|
|
2428
|
+
return value;
|
|
2356
2429
|
}
|
|
2357
|
-
|
|
2430
|
+
return null;
|
|
2431
|
+
};
|
|
2432
|
+
const transformToStringArray = (value) => {
|
|
2433
|
+
if (Array.isArray(value)) {
|
|
2434
|
+
return value.map(transformToString).filter(Boolean);
|
|
2435
|
+
}
|
|
2436
|
+
else if (typeof value === 'string') {
|
|
2437
|
+
return [transformToString(value)];
|
|
2438
|
+
}
|
|
2439
|
+
return null;
|
|
2440
|
+
};
|
|
2441
|
+
const transformToNumber = (value) => {
|
|
2442
|
+
if (typeof value === 'number') {
|
|
2443
|
+
return value;
|
|
2444
|
+
}
|
|
2445
|
+
if (typeof value === 'string') {
|
|
2446
|
+
return Number(value);
|
|
2447
|
+
}
|
|
2448
|
+
return null;
|
|
2449
|
+
};
|
|
2450
|
+
const transformToNumberArray = (value) => {
|
|
2451
|
+
if (Array.isArray(value)) {
|
|
2452
|
+
return value.map(transformToNumber).filter((item) => item !== null);
|
|
2453
|
+
}
|
|
2454
|
+
else if (typeof value === 'number') {
|
|
2455
|
+
return [value];
|
|
2456
|
+
}
|
|
2457
|
+
return null;
|
|
2458
|
+
};
|
|
2459
|
+
const transformToBoolean = (value) => {
|
|
2460
|
+
if (typeof value === 'boolean') {
|
|
2461
|
+
return value;
|
|
2462
|
+
}
|
|
2463
|
+
if (typeof value === 'string') {
|
|
2464
|
+
return value === 'true' || value === '1';
|
|
2465
|
+
}
|
|
2466
|
+
return null;
|
|
2467
|
+
};
|
|
2468
|
+
const transformToBooleanArray = (value) => {
|
|
2469
|
+
if (Array.isArray(value)) {
|
|
2470
|
+
return value.map(transformToBoolean).filter((item) => item !== null);
|
|
2471
|
+
}
|
|
2472
|
+
else if (typeof value === 'string' || typeof value === 'boolean') {
|
|
2473
|
+
return [transformToBoolean(value)];
|
|
2474
|
+
}
|
|
2475
|
+
return null;
|
|
2476
|
+
};
|
|
2477
|
+
const transformToDate = (value) => {
|
|
2478
|
+
if (value instanceof Date) {
|
|
2479
|
+
return value;
|
|
2480
|
+
}
|
|
2481
|
+
if (typeof value === 'string') {
|
|
2482
|
+
const date = new Date(value);
|
|
2483
|
+
if (isNaN(date.getTime())) {
|
|
2484
|
+
return null;
|
|
2485
|
+
}
|
|
2486
|
+
return date;
|
|
2487
|
+
}
|
|
2488
|
+
return null;
|
|
2489
|
+
};
|
|
2490
|
+
const transformToDateArray = (value) => {
|
|
2491
|
+
if (Array.isArray(value)) {
|
|
2492
|
+
return value.map(transformToDate).filter((item) => item !== null);
|
|
2493
|
+
}
|
|
2494
|
+
else if (typeof value === 'string' || value instanceof Date) {
|
|
2495
|
+
return [transformToDate(value)];
|
|
2496
|
+
}
|
|
2497
|
+
return null;
|
|
2498
|
+
};
|
|
2499
|
+
const transformToSort = (value) => {
|
|
2500
|
+
if (typeof value === 'string') {
|
|
2501
|
+
const [active, direction] = value.split(':');
|
|
2502
|
+
return {
|
|
2503
|
+
active,
|
|
2504
|
+
direction: direction,
|
|
2505
|
+
};
|
|
2506
|
+
}
|
|
2507
|
+
return null;
|
|
2508
|
+
};
|
|
2509
|
+
const transformToSortQueryParam = (value) => {
|
|
2510
|
+
if (typeof value === 'string') {
|
|
2511
|
+
return value;
|
|
2512
|
+
}
|
|
2513
|
+
if (value && typeof value === 'object' && 'active' in value && 'direction' in value) {
|
|
2514
|
+
const valAsSort = value;
|
|
2515
|
+
return valAsSort.direction ? `${valAsSort.active}:${valAsSort.direction}` : null;
|
|
2516
|
+
}
|
|
2517
|
+
return null;
|
|
2518
|
+
};
|
|
2519
|
+
|
|
2520
|
+
const ET_ARR_PREFIX = 'ET_ARR__';
|
|
2358
2521
|
class QueryField {
|
|
2359
2522
|
get control() {
|
|
2360
2523
|
return this.data.control;
|
|
2361
2524
|
}
|
|
2362
2525
|
constructor(data) {
|
|
2363
2526
|
this.data = data;
|
|
2364
|
-
this.changes$ = this._setupChangesObservable();
|
|
2365
|
-
this._currentDebounceTimeout = null;
|
|
2366
|
-
}
|
|
2367
|
-
setValue(value, options) {
|
|
2368
|
-
if (this._currentDebounceTimeout !== null) {
|
|
2369
|
-
clearTimeout(this._currentDebounceTimeout);
|
|
2370
|
-
this._currentDebounceTimeout = null;
|
|
2371
|
-
}
|
|
2372
|
-
if (value === this.control.value) {
|
|
2373
|
-
return;
|
|
2374
|
-
}
|
|
2375
|
-
if (this.data.debounce && !options?.skipDebounce) {
|
|
2376
|
-
this._currentDebounceTimeout = window.setTimeout(() => {
|
|
2377
|
-
this.control.setValue(value);
|
|
2378
|
-
}, this.data.debounce);
|
|
2379
|
-
}
|
|
2380
|
-
else {
|
|
2381
|
-
this.control.setValue(value);
|
|
2382
|
-
}
|
|
2383
|
-
}
|
|
2384
|
-
_setupChangesObservable() {
|
|
2385
|
-
const obs = this.control.valueChanges.pipe(startWith(this.control.value));
|
|
2386
|
-
if (!this.data.debounce) {
|
|
2387
|
-
return obs;
|
|
2388
|
-
}
|
|
2389
|
-
// The initial value should get emitted immediately
|
|
2390
|
-
// concat switches to the debounced observable after the first observable is completed
|
|
2391
|
-
return concat(obs.pipe(take(1)), this.control.valueChanges.pipe(debounce((v) => {
|
|
2392
|
-
if ((this.data.disableDebounceIfFalsy && !v) || !this.data.debounce) {
|
|
2393
|
-
return of(0);
|
|
2394
|
-
}
|
|
2395
|
-
return timer(this.data.debounce);
|
|
2396
|
-
})));
|
|
2397
2527
|
}
|
|
2398
2528
|
}
|
|
2399
2529
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -2416,23 +2546,16 @@ class QueryForm {
|
|
|
2416
2546
|
this._defaultValues = this._extractDefaultValues();
|
|
2417
2547
|
this._routerStateService = inject(RouterStateService);
|
|
2418
2548
|
this._zone = inject(NgZone);
|
|
2549
|
+
this._didValueChanges$ = new Subject();
|
|
2419
2550
|
this._isObserving = false;
|
|
2420
2551
|
this.form = this._setupFormGroup();
|
|
2421
2552
|
this._lastFormValue$ = new BehaviorSubject(null);
|
|
2422
|
-
this._currentFormValue$ = new BehaviorSubject(
|
|
2423
|
-
id: 0,
|
|
2424
|
-
data: this._formValue,
|
|
2425
|
-
});
|
|
2553
|
+
this._currentFormValue$ = new BehaviorSubject(this._formValue);
|
|
2426
2554
|
this._changes$ = new BehaviorSubject({
|
|
2427
2555
|
previousValue: null,
|
|
2428
2556
|
currentValue: this.form.getRawValue(),
|
|
2429
2557
|
});
|
|
2430
|
-
this.changes$ = this.
|
|
2431
|
-
return {
|
|
2432
|
-
previousValue: previousValueEvent?.data ?? null,
|
|
2433
|
-
currentValue: currentValueEvent.data,
|
|
2434
|
-
};
|
|
2435
|
-
}));
|
|
2558
|
+
this.changes$ = this._changes$.asObservable();
|
|
2436
2559
|
assertInInjectionContext(QueryForm);
|
|
2437
2560
|
}
|
|
2438
2561
|
observe(options) {
|
|
@@ -2443,38 +2566,75 @@ class QueryForm {
|
|
|
2443
2566
|
return;
|
|
2444
2567
|
}
|
|
2445
2568
|
this._isObserving = true;
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
|
|
2569
|
+
if (options?.syncOnNavigation !== false) {
|
|
2570
|
+
const didChanges = this.setFormValueFromUrlQueryParams({
|
|
2571
|
+
queryParams: this._routerStateService.queryParams,
|
|
2572
|
+
});
|
|
2573
|
+
if (didChanges) {
|
|
2574
|
+
this._handleFormChange(true);
|
|
2575
|
+
}
|
|
2576
|
+
}
|
|
2577
|
+
merge(...Object.values(this._fields).map((field) => field.control.valueChanges), this._didValueChanges$)
|
|
2578
|
+
.pipe(debounceTime(0), tap(() => {
|
|
2579
|
+
this._handleFormChange();
|
|
2453
2580
|
}), takeUntil(this._destroy$), takeUntil(this._unobserveTrigger$))
|
|
2454
2581
|
.subscribe();
|
|
2582
|
+
let changedFieldsInLastResetLoop = [];
|
|
2583
|
+
let currentUniqueChangedFields = [];
|
|
2455
2584
|
this._currentFormValue$
|
|
2456
|
-
.pipe(
|
|
2457
|
-
|
|
2458
|
-
|
|
2585
|
+
.pipe(map((currentValue) => {
|
|
2586
|
+
return {
|
|
2587
|
+
previousValue: clone(this._lastFormValue$.value),
|
|
2588
|
+
currentValue: clone(currentValue),
|
|
2589
|
+
};
|
|
2590
|
+
}), tap(({ currentValue, previousValue }) => {
|
|
2459
2591
|
if (options?.writeToQueryParams !== false) {
|
|
2460
|
-
this._syncViaUrlQueryParams(
|
|
2592
|
+
this._syncViaUrlQueryParams(currentValue, options?.replaceUrl);
|
|
2461
2593
|
}
|
|
2462
|
-
const didResetValues = this._handleQueryFormResets(
|
|
2463
|
-
|
|
2464
|
-
|
|
2594
|
+
const didResetValues = this._handleQueryFormResets(previousValue ?? null, currentValue);
|
|
2595
|
+
const changedFields = Object.keys(currentValue).filter((key) => !equal(previousValue?.[key], currentValue[key]));
|
|
2596
|
+
if (changedFieldsInLastResetLoop.length) {
|
|
2597
|
+
changedFields.push(...changedFieldsInLastResetLoop);
|
|
2598
|
+
changedFieldsInLastResetLoop = [];
|
|
2465
2599
|
}
|
|
2466
|
-
if (
|
|
2600
|
+
if (didResetValues) {
|
|
2601
|
+
this._didValueChanges$.next(true);
|
|
2602
|
+
changedFieldsInLastResetLoop = changedFields;
|
|
2603
|
+
}
|
|
2604
|
+
currentUniqueChangedFields = [...new Set(changedFields)];
|
|
2605
|
+
}), switchMap(({ currentValue, previousValue }) => {
|
|
2606
|
+
if (changedFieldsInLastResetLoop.length)
|
|
2607
|
+
return of(null).pipe(map(() => ({ currentValue, previousValue })));
|
|
2608
|
+
const debounceValues = currentUniqueChangedFields.map((key) => {
|
|
2609
|
+
const fieldData = this._fields[key].data;
|
|
2610
|
+
if (fieldData.disableDebounceIfFalsy === true && !currentValue[key]) {
|
|
2611
|
+
return null;
|
|
2612
|
+
}
|
|
2613
|
+
return fieldData.debounce ?? null;
|
|
2614
|
+
});
|
|
2615
|
+
currentUniqueChangedFields = [];
|
|
2616
|
+
if (debounceValues.some((v) => v === null) || !debounceValues.length) {
|
|
2617
|
+
return of(null).pipe(map(() => ({ currentValue, previousValue })));
|
|
2618
|
+
}
|
|
2619
|
+
const shortestDebounceTime = Math.min(...debounceValues.filter((v) => v !== null));
|
|
2620
|
+
return timer(shortestDebounceTime).pipe(map(() => ({ currentValue, previousValue })));
|
|
2621
|
+
}), tap(({ currentValue, previousValue }) => {
|
|
2622
|
+
if (changedFieldsInLastResetLoop.length)
|
|
2467
2623
|
return;
|
|
2468
|
-
}
|
|
2469
2624
|
this._changes$.next({
|
|
2470
|
-
previousValue:
|
|
2471
|
-
currentValue:
|
|
2625
|
+
previousValue: previousValue ?? null,
|
|
2626
|
+
currentValue: currentValue,
|
|
2472
2627
|
});
|
|
2473
2628
|
}), takeUntil(this._destroy$), takeUntil(this._unobserveTrigger$))
|
|
2474
2629
|
.subscribe();
|
|
2475
2630
|
if (options?.syncOnNavigation !== false) {
|
|
2476
2631
|
this._routerStateService.queryParamChanges$
|
|
2477
|
-
.pipe(takeUntil(this._destroy$), takeUntil(this._unobserveTrigger$), tap((changes) =>
|
|
2632
|
+
.pipe(takeUntil(this._destroy$), takeUntil(this._unobserveTrigger$), tap((changes) => {
|
|
2633
|
+
const didValueChanges = this.setFormValueFromUrlQueryParams({ queryParams: changes });
|
|
2634
|
+
if (didValueChanges) {
|
|
2635
|
+
this._didValueChanges$.next(true);
|
|
2636
|
+
}
|
|
2637
|
+
}))
|
|
2478
2638
|
.subscribe();
|
|
2479
2639
|
}
|
|
2480
2640
|
}
|
|
@@ -2500,7 +2660,7 @@ class QueryForm {
|
|
|
2500
2660
|
if (equal(defaultValueForKeyToReset, currentValueForKeyToReset)) {
|
|
2501
2661
|
continue;
|
|
2502
2662
|
}
|
|
2503
|
-
this.form.controls[formFieldKey].setValue(defaultValueForKeyToReset);
|
|
2663
|
+
this.form.controls[formFieldKey].setValue(defaultValueForKeyToReset, { emitEvent: false });
|
|
2504
2664
|
didResetValues = true;
|
|
2505
2665
|
break;
|
|
2506
2666
|
}
|
|
@@ -2512,6 +2672,7 @@ class QueryForm {
|
|
|
2512
2672
|
this._unobserveTrigger$.next(true);
|
|
2513
2673
|
}
|
|
2514
2674
|
setFormValueFromUrlQueryParams(options) {
|
|
2675
|
+
let didValueChanges = false;
|
|
2515
2676
|
for (const [key, field] of Object.entries(this._fields)) {
|
|
2516
2677
|
const value = options.queryParams[key];
|
|
2517
2678
|
const valueDoesNotExist = value === undefined;
|
|
@@ -2519,15 +2680,27 @@ class QueryForm {
|
|
|
2519
2680
|
continue;
|
|
2520
2681
|
const valueGotRemoved = value === ET_PROPERTY_REMOVED;
|
|
2521
2682
|
if (valueGotRemoved) {
|
|
2522
|
-
field.setValue(this._getDefaultValue(key), {
|
|
2683
|
+
field.control.setValue(this._getDefaultValue(key), { emitEvent: false });
|
|
2684
|
+
didValueChanges = true;
|
|
2523
2685
|
continue;
|
|
2524
2686
|
}
|
|
2525
|
-
|
|
2687
|
+
let deserializedValue = value;
|
|
2688
|
+
if (field.data.queryParamToValueTransformFn) {
|
|
2689
|
+
deserializedValue = field.data.queryParamToValueTransformFn(value);
|
|
2690
|
+
}
|
|
2691
|
+
else if (typeof this._getDefaultValue(key) === 'number') {
|
|
2692
|
+
deserializedValue = transformToNumber(value);
|
|
2693
|
+
}
|
|
2694
|
+
else if (typeof this._getDefaultValue(key) === 'boolean') {
|
|
2695
|
+
deserializedValue = transformToBoolean(value);
|
|
2696
|
+
}
|
|
2526
2697
|
const valueIsEqualToCurrent = equal(deserializedValue, field.control.value);
|
|
2527
2698
|
if (valueIsEqualToCurrent)
|
|
2528
2699
|
continue;
|
|
2529
|
-
field.setValue(deserializedValue, {
|
|
2700
|
+
field.control.setValue(deserializedValue, { emitEvent: false });
|
|
2701
|
+
didValueChanges = true;
|
|
2530
2702
|
}
|
|
2703
|
+
return didValueChanges;
|
|
2531
2704
|
}
|
|
2532
2705
|
_getDefaultValue(key) {
|
|
2533
2706
|
const val = this._defaultValues[key];
|
|
@@ -2541,7 +2714,7 @@ class QueryForm {
|
|
|
2541
2714
|
return this._getDefaultValue(key) === normalizedValue;
|
|
2542
2715
|
}
|
|
2543
2716
|
_setupFormGroup() {
|
|
2544
|
-
const group = new
|
|
2717
|
+
const group = new FormGroup({});
|
|
2545
2718
|
for (const [key, field] of Object.entries(this._fields)) {
|
|
2546
2719
|
group.addControl(key, field.control);
|
|
2547
2720
|
}
|
|
@@ -2586,130 +2759,25 @@ class QueryForm {
|
|
|
2586
2759
|
});
|
|
2587
2760
|
});
|
|
2588
2761
|
}
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
const
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
}
|
|
2595
|
-
return null;
|
|
2596
|
-
};
|
|
2597
|
-
const transformToStringArray = (value) => {
|
|
2598
|
-
if (Array.isArray(value)) {
|
|
2599
|
-
return value.map(transformToString).filter(Boolean);
|
|
2600
|
-
}
|
|
2601
|
-
else if (typeof value === 'string') {
|
|
2602
|
-
return [transformToString(value)];
|
|
2603
|
-
}
|
|
2604
|
-
return null;
|
|
2605
|
-
};
|
|
2606
|
-
const transformToNumber = (value) => {
|
|
2607
|
-
if (typeof value === 'number') {
|
|
2608
|
-
return value;
|
|
2609
|
-
}
|
|
2610
|
-
if (typeof value === 'string') {
|
|
2611
|
-
return Number(value);
|
|
2612
|
-
}
|
|
2613
|
-
return null;
|
|
2614
|
-
};
|
|
2615
|
-
const transformToNumberArray = (value) => {
|
|
2616
|
-
if (Array.isArray(value)) {
|
|
2617
|
-
return value.map(transformToNumber).filter((item) => item !== null);
|
|
2618
|
-
}
|
|
2619
|
-
else if (typeof value === 'number') {
|
|
2620
|
-
return [value];
|
|
2621
|
-
}
|
|
2622
|
-
return null;
|
|
2623
|
-
};
|
|
2624
|
-
const transformToBoolean = (value) => {
|
|
2625
|
-
if (typeof value === 'boolean') {
|
|
2626
|
-
return value;
|
|
2627
|
-
}
|
|
2628
|
-
if (typeof value === 'string') {
|
|
2629
|
-
return value === 'true' || value === '1';
|
|
2630
|
-
}
|
|
2631
|
-
return null;
|
|
2632
|
-
};
|
|
2633
|
-
const transformToBooleanArray = (value) => {
|
|
2634
|
-
if (Array.isArray(value)) {
|
|
2635
|
-
return value.map(transformToBoolean).filter((item) => item !== null);
|
|
2636
|
-
}
|
|
2637
|
-
else if (typeof value === 'string' || typeof value === 'boolean') {
|
|
2638
|
-
return [transformToBoolean(value)];
|
|
2639
|
-
}
|
|
2640
|
-
return null;
|
|
2641
|
-
};
|
|
2642
|
-
const transformToDate = (value) => {
|
|
2643
|
-
if (value instanceof Date) {
|
|
2644
|
-
return value;
|
|
2645
|
-
}
|
|
2646
|
-
if (typeof value === 'string') {
|
|
2647
|
-
const date = new Date(value);
|
|
2648
|
-
if (isNaN(date.getTime())) {
|
|
2649
|
-
return null;
|
|
2762
|
+
_handleFormChange(forceOverwrite = false) {
|
|
2763
|
+
const currentVal = clone(this._currentFormValue$.value);
|
|
2764
|
+
const newVal = clone(this._formValue);
|
|
2765
|
+
if (equal(currentVal, newVal)) {
|
|
2766
|
+
return;
|
|
2650
2767
|
}
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
return null;
|
|
2654
|
-
};
|
|
2655
|
-
const transformToDateArray = (value) => {
|
|
2656
|
-
if (Array.isArray(value)) {
|
|
2657
|
-
return value.map(transformToDate).filter((item) => item !== null);
|
|
2658
|
-
}
|
|
2659
|
-
else if (typeof value === 'string' || value instanceof Date) {
|
|
2660
|
-
return [transformToDate(value)];
|
|
2661
|
-
}
|
|
2662
|
-
return null;
|
|
2663
|
-
};
|
|
2664
|
-
const transformToSort = (value) => {
|
|
2665
|
-
if (typeof value === 'string') {
|
|
2666
|
-
const [active, direction] = value.split(':');
|
|
2667
|
-
return {
|
|
2668
|
-
active,
|
|
2669
|
-
direction: direction,
|
|
2670
|
-
};
|
|
2671
|
-
}
|
|
2672
|
-
return null;
|
|
2673
|
-
};
|
|
2674
|
-
const transformToSortQueryParam = (value) => {
|
|
2675
|
-
if (typeof value === 'string') {
|
|
2676
|
-
return value;
|
|
2677
|
-
}
|
|
2678
|
-
if (value && typeof value === 'object' && 'active' in value && 'direction' in value) {
|
|
2679
|
-
const valAsSort = value;
|
|
2680
|
-
return valAsSort.direction ? `${valAsSort.active}:${valAsSort.direction}` : null;
|
|
2681
|
-
}
|
|
2682
|
-
return null;
|
|
2683
|
-
};
|
|
2684
|
-
|
|
2685
|
-
const deepFreeze = (object) => {
|
|
2686
|
-
// check if object is actually an object or frozen
|
|
2687
|
-
if (!object || typeof object !== 'object' || Object.isFrozen(object)) {
|
|
2688
|
-
return object;
|
|
2689
|
-
}
|
|
2690
|
-
// Retrieve the property names defined on object
|
|
2691
|
-
const propNames = Object.getOwnPropertyNames(object);
|
|
2692
|
-
// Freeze properties before freezing self
|
|
2693
|
-
for (const name of propNames) {
|
|
2694
|
-
const value = object[name];
|
|
2695
|
-
if (value && typeof value === 'object') {
|
|
2696
|
-
deepFreeze(value);
|
|
2768
|
+
if (forceOverwrite) {
|
|
2769
|
+
this._lastFormValue$.next(newVal);
|
|
2697
2770
|
}
|
|
2771
|
+
else {
|
|
2772
|
+
this._lastFormValue$.next(currentVal);
|
|
2773
|
+
}
|
|
2774
|
+
this._currentFormValue$.next(newVal);
|
|
2698
2775
|
}
|
|
2699
|
-
|
|
2700
|
-
};
|
|
2701
|
-
|
|
2702
|
-
/**
|
|
2703
|
-
* Dummy function for providing types while not breaking inference.
|
|
2704
|
-
* **This function always returns null.**
|
|
2705
|
-
* @see https://github.com/microsoft/TypeScript/issues/26242
|
|
2706
|
-
* @returns null
|
|
2707
|
-
*/
|
|
2708
|
-
const def = () => null;
|
|
2776
|
+
}
|
|
2709
2777
|
|
|
2710
2778
|
/**
|
|
2711
2779
|
* Generated bundle index. Do not edit.
|
|
2712
2780
|
*/
|
|
2713
2781
|
|
|
2714
|
-
export { BasicAuthProvider, BearerAuthProvider, CustomHeaderAuthProvider, EntityStore, INFINITY_QUERY_TOKEN, InfinityQuery, InfinityQueryDirective, InfinityQueryTriggerDirective, QUERY_CLIENT_DEVTOOLS_TOKEN, Query, QueryClient, QueryCreator, QueryDevtoolsComponent, QueryDirective, QueryError, QueryField, QueryForm,
|
|
2782
|
+
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, QuerySubject, 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, querySignal, 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 };
|
|
2715
2783
|
//# sourceMappingURL=ethlete-query.mjs.map
|