@ethlete/query 5.4.1 → 5.6.0

package/fesm2022/ethlete-query.mjs

@@ -1754,10 +1754,10 @@ class QueryShortNamePipe {
         console.log(route);
         return route;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.1", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: QueryShortNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: QueryShortNamePipe, isStandalone: true, name: "queryShortName" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: QueryShortNamePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: QueryShortNamePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'queryShortName', standalone: true }]
         }] });
@@ -1976,10 +1976,10 @@ class QueryDevtoolsComponent {
     clearQueryHistory() {
         this.queryHistory$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.1", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "@if (!isOpen()) {\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Open Devtools</button>\n}\n\n@if (isOpen()) {\n  <div\n    [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n    class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n  >\n    <header class=\"et-qd-header\">\n      <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n      <div class=\"et-qd-header__select\">\n        <label for=\"et-query-client-instance\">Client instance</label>\n        <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n          @for (clientConfig of queryClientConfigs; track trackByClient(i, clientConfig); let i = $index) {\n            <option [value]=\"i\">\n              {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n            </option>\n          }\n        </select>\n      </div>\n\n      <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n    </header>\n\n    <div class=\"et-qd-sub-header\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n        (click)=\"toggleTranslucent()\"\n        class=\"et-qd-chip et-qd-translucent-clickable\"\n      >\n        Translucent\n      </button>\n      <div class=\"et-qd-sub-header__divider\"></div>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n        (click)=\"selectSnapLayout('full')\"\n        class=\"et-qd-chip\"\n      >\n        Fullscreen\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n        (click)=\"selectSnapLayout('top')\"\n        class=\"et-qd-chip\"\n      >\n        Top\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n        (click)=\"selectSnapLayout('bottom')\"\n        class=\"et-qd-chip\"\n      >\n        Bottom\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n        (click)=\"selectSnapLayout('left')\"\n        class=\"et-qd-chip\"\n      >\n        Left\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n        (click)=\"selectSnapLayout('right')\"\n        class=\"et-qd-chip\"\n      >\n        Right\n      </button>\n    </div>\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-client\">\n        <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n        <div class=\"et-qd-client__actions\">\n          <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n          <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n            Refresh all (ignore caches)\n          </button>\n          <button\n            (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n            class=\"et-qd-chip\"\n          >\n            Refresh all (ignore caches & purge unused)\n          </button>\n        </div>\n      </div>\n    }\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-queries\">\n        <p class=\"et-qd-queries__title\">Query browser</p>\n        <div class=\"et-qd-queries__actions\">\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' }\"\n            (click)=\"selectQueryListMode('live')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Live ({{ queries()?.length ?? 0 }})\n          </button>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' }\"\n            (click)=\"selectQueryListMode('history')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n          </button>\n          @if (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          }\n        </div>\n\n        <div class=\"et-qd-queries__browser\">\n          @if (queryListMode() === 'live') {\n            <ul class=\"et-qd-queries__browser-list\">\n              @for (query of queries(); track trackByQuery($index, query)) {\n                <li>\n                  <button [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              }\n            </ul>\n          }\n          @if (queryListMode() === 'history') {\n            <ul class=\"et-qd-queries__browser-list\">\n              @for (query of queryHistory$ | async; track trackByQuery($index, query)) {\n                <li>\n                  <button [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              }\n            </ul>\n          }\n          <div class=\"et-qd-queries__browser-detail\">\n            @if (selectedQuery(); as query) {\n              <p class=\"et-qd-queries__browser-detail__title\">\n                {{ query._queryConfig.method }} {{ query._routeWithParams }}\n              </p>\n\n              <div class=\"et-qd-queries__actions\">\n                <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n                <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n                  Execute (ignore cache)\n                </button>\n\n                <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n                <div class=\"et-qd-queries__divider\"></div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n                  (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Poll\n                </button>\n\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n                  (click)=\"query.stopPolling()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Stop polling\n                </button>\n                @if (query.isPolling || query._isPollingPaused) {\n                  <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                    Pause polling\n                  </button>\n                  <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                    Resume polling\n                  </button>\n                }\n              </div>\n\n              <div class=\"et-qd-list\">\n                <div class=\"et-qd-list-item\">\n                  <p>State type</p>\n                  <pre>{{ query.rawState.type }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Dependents</p>\n                  <pre>{{ query._dependents | json }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Is expired</p>\n                  <pre>{{ query.isExpired }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Is in use</p>\n                  <pre>{{ query.isInUse }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Subscriber count</p>\n                  <pre>{{ query._subscriberCount }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Is polling</p>\n                  <pre>{{ query.isPolling }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Is polling paused</p>\n                  <pre>{{ query._isPollingPaused }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Enable smart polling</p>\n                  <pre>{{ query._enableSmartPolling }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Query store key</p>\n                  <pre>{{ query._queryStoreKey }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Arguments</p>\n\n                  <div>\n                    <button\n                      [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                      (click)=\"toggleShowArguments()\"\n                      class=\"et-qd-chip et-qd-chip-bordered\"\n                    >\n                      Toggle\n                    </button>\n                  </div>\n                  @if (showArguments()) {\n                    <pre>{{ query._arguments | json }}</pre>\n                  }\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>State</p>\n                  <p><i> Warning, this will cause a subscription if shown!</i></p>\n                  <div>\n                    <button\n                      [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n                      (click)=\"toggleShowResponse()\"\n                      class=\"et-qd-chip et-qd-chip-bordered\"\n                    >\n                      Toggle\n                    </button>\n                  </div>\n                  @if (showResponse()) {\n                    <pre>{{ query.state$ | async | json }}</pre>\n                  }\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Raw state</p>\n                  <p><i> The query state unaffected by entity stores</i></p>\n\n                  <div>\n                    <button\n                      [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n                      (click)=\"toggleShowRawResponse()\"\n                      class=\"et-qd-chip et-qd-chip-bordered\"\n                    >\n                      Toggle\n                    </button>\n                  </div>\n                  @if (showRawResponse()) {\n                    <pre>{{ query.rawState | json }}</pre>\n                  }\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Query config</p>\n\n                  <div>\n                    <button\n                      [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n                      (click)=\"toggleShowQueryConfig()\"\n                      class=\"et-qd-chip et-qd-chip-bordered\"\n                    >\n                      Toggle\n                    </button>\n                  </div>\n                  @if (showQueryConfig()) {\n                    <pre>{{ stringifiedQueryConfig() | json }}</pre>\n                  }\n                </div>\n\n                @if (!!query._queryConfig.entity) {\n                  <div class=\"et-qd-list-item\">\n                    <p>Entity store value</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n                        (click)=\"toggleShowEntityStoreValue()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showEntityStoreValue()) {\n                      <pre>{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%;border-right:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%;border-top:1px solid rgb(37,41,46)}.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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools" }, ngImport: i0, template: "@if (!isOpen()) {\n  <button (click)=\"toggleOpen()\" class=\"et-query-devtools-open-btn et-qd-chip\">Open Devtools</button>\n}\n\n@if (isOpen()) {\n  <div\n    [class.et-query-devtools-container--transparent]=\"isTranslucent()\"\n    class=\"et-query-devtools-container et-query-devtools-container--snap-{{ snapLayout() }}\"\n  >\n    <header class=\"et-qd-header\">\n      <h3 class=\"et-qd-header__title\">Query Devtools</h3>\n\n      <div class=\"et-qd-header__select\">\n        <label for=\"et-query-client-instance\">Client instance</label>\n        <select [formControl]=\"selectedClientIdCtrl\" id=\"et-query-client-instance\">\n          @for (clientConfig of queryClientConfigs; track trackByClient(i, clientConfig); let i = $index) {\n            <option [value]=\"i\">\n              {{ clientConfig.displayName ?? clientConfig.client.config.baseRoute }}\n            </option>\n          }\n        </select>\n      </div>\n\n      <button (click)=\"toggleOpen()\" class=\"et-qd-btn et-qd-btn-secondary\">Close</button>\n    </header>\n\n    <div class=\"et-qd-sub-header\">\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': !isTranslucent() }\"\n        (click)=\"toggleTranslucent()\"\n        class=\"et-qd-chip et-qd-translucent-clickable\"\n      >\n        Translucent\n      </button>\n      <div class=\"et-qd-sub-header__divider\"></div>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'full' }\"\n        (click)=\"selectSnapLayout('full')\"\n        class=\"et-qd-chip\"\n      >\n        Fullscreen\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'top' }\"\n        (click)=\"selectSnapLayout('top')\"\n        class=\"et-qd-chip\"\n      >\n        Top\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'bottom' }\"\n        (click)=\"selectSnapLayout('bottom')\"\n        class=\"et-qd-chip\"\n      >\n        Bottom\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'left' }\"\n        (click)=\"selectSnapLayout('left')\"\n        class=\"et-qd-chip\"\n      >\n        Left\n      </button>\n      <button\n        [ngClass]=\"{ 'et-qd-chip-secondary': snapLayout() !== 'right' }\"\n        (click)=\"selectSnapLayout('right')\"\n        class=\"et-qd-chip\"\n      >\n        Right\n      </button>\n    </div>\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-client\">\n        <p class=\"et-qd-client__title\">{{ cfg.displayName ?? cfg.client.config.baseRoute }}</p>\n\n        <div class=\"et-qd-client__actions\">\n          <button (click)=\"cfg.client._store.refreshQueriesInUse()\" class=\"et-qd-chip\">Refresh all</button>\n          <button (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true })\" class=\"et-qd-chip\">\n            Refresh all (ignore caches)\n          </button>\n          <button\n            (click)=\"cfg.client._store.refreshQueriesInUse({ ignoreCacheValidity: true, purgeUnused: true })\"\n            class=\"et-qd-chip\"\n          >\n            Refresh all (ignore caches & purge unused)\n          </button>\n        </div>\n      </div>\n    }\n\n    @if (selectedClientConfig(); as cfg) {\n      <div class=\"et-qd-queries\">\n        <p class=\"et-qd-queries__title\">Query browser</p>\n        <div class=\"et-qd-queries__actions\">\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'live' }\"\n            (click)=\"selectQueryListMode('live')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            Live ({{ queries()?.length ?? 0 }})\n          </button>\n          <button\n            [ngClass]=\"{ 'et-qd-chip-secondary': queryListMode() !== 'history' }\"\n            (click)=\"selectQueryListMode('history')\"\n            class=\"et-qd-chip et-qd-chip-bordered\"\n          >\n            History ({{ (queryHistory$ | async)?.length ?? 0 }}/50)\n          </button>\n          @if (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          }\n        </div>\n\n        <div class=\"et-qd-queries__browser\">\n          @if (queryListMode() === 'live') {\n            <ul class=\"et-qd-queries__browser-list\">\n              @for (query of queries(); track trackByQuery($index, query)) {\n                <li>\n                  <button [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              }\n            </ul>\n          }\n          @if (queryListMode() === 'history') {\n            <ul class=\"et-qd-queries__browser-list\">\n              @for (query of queryHistory$ | async; track trackByQuery($index, query)) {\n                <li>\n                  <button [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              }\n            </ul>\n          }\n          <div class=\"et-qd-queries__browser-detail\">\n            @if (selectedQuery(); as query) {\n              <p class=\"et-qd-queries__browser-detail__title\">\n                {{ query._queryConfig.method }} {{ query._routeWithParams }}\n              </p>\n\n              <div class=\"et-qd-queries__actions\">\n                <button (click)=\"query.execute()\" class=\"et-qd-chip et-qd-chip-bordered\">Execute</button>\n                <button (click)=\"query.execute({ skipCache: true })\" class=\"et-qd-chip et-qd-chip-bordered\">\n                  Execute (ignore cache)\n                </button>\n\n                <button (click)=\"query.abort()\" class=\"et-qd-chip et-qd-chip-bordered\">Abort</button>\n                <div class=\"et-qd-queries__divider\"></div>\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': !query.isPolling }\"\n                  (click)=\"query.poll({ interval: 5000, takeUntil: _destroy$ })\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Poll\n                </button>\n\n                <button\n                  [ngClass]=\"{ 'et-qd-chip-secondary': query.isPolling }\"\n                  (click)=\"query.stopPolling()\"\n                  class=\"et-qd-chip et-qd-chip-bordered\"\n                >\n                  Stop polling\n                </button>\n                @if (query.isPolling || query._isPollingPaused) {\n                  <button (click)=\"query.pausePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                    Pause polling\n                  </button>\n                  <button (click)=\"query.resumePolling()\" class=\"et-qd-chip et-qd-chip-secondary et-qd-chip-bordered\">\n                    Resume polling\n                  </button>\n                }\n              </div>\n\n              <div class=\"et-qd-list\">\n                <div class=\"et-qd-list-item\">\n                  <p>State type</p>\n                  <pre>{{ query.rawState.type }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Dependents</p>\n                  <pre>{{ query._dependents | json }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Is expired</p>\n                  <pre>{{ query.isExpired }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Is in use</p>\n                  <pre>{{ query.isInUse }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Subscriber count</p>\n                  <pre>{{ query._subscriberCount }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Is polling</p>\n                  <pre>{{ query.isPolling }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Is polling paused</p>\n                  <pre>{{ query._isPollingPaused }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Enable smart polling</p>\n                  <pre>{{ query._enableSmartPolling }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Query store key</p>\n                  <pre>{{ query._queryStoreKey }}</pre>\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Arguments</p>\n\n                  <div>\n                    <button\n                      [ngClass]=\"{ 'et-qd-chip-secondary': !showArguments() }\"\n                      (click)=\"toggleShowArguments()\"\n                      class=\"et-qd-chip et-qd-chip-bordered\"\n                    >\n                      Toggle\n                    </button>\n                  </div>\n                  @if (showArguments()) {\n                    <pre>{{ query._arguments | json }}</pre>\n                  }\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>State</p>\n                  <p><i> Warning, this will cause a subscription if shown!</i></p>\n                  <div>\n                    <button\n                      [ngClass]=\"{ 'et-qd-chip-secondary': !showResponse() }\"\n                      (click)=\"toggleShowResponse()\"\n                      class=\"et-qd-chip et-qd-chip-bordered\"\n                    >\n                      Toggle\n                    </button>\n                  </div>\n                  @if (showResponse()) {\n                    <pre>{{ query.state$ | async | json }}</pre>\n                  }\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Raw state</p>\n                  <p><i> The query state unaffected by entity stores</i></p>\n\n                  <div>\n                    <button\n                      [ngClass]=\"{ 'et-qd-chip-secondary': !showRawResponse() }\"\n                      (click)=\"toggleShowRawResponse()\"\n                      class=\"et-qd-chip et-qd-chip-bordered\"\n                    >\n                      Toggle\n                    </button>\n                  </div>\n                  @if (showRawResponse()) {\n                    <pre>{{ query.rawState | json }}</pre>\n                  }\n                </div>\n\n                <div class=\"et-qd-list-item\">\n                  <p>Query config</p>\n\n                  <div>\n                    <button\n                      [ngClass]=\"{ 'et-qd-chip-secondary': !showQueryConfig() }\"\n                      (click)=\"toggleShowQueryConfig()\"\n                      class=\"et-qd-chip et-qd-chip-bordered\"\n                    >\n                      Toggle\n                    </button>\n                  </div>\n                  @if (showQueryConfig()) {\n                    <pre>{{ stringifiedQueryConfig() | json }}</pre>\n                  }\n                </div>\n\n                @if (!!query._queryConfig.entity) {\n                  <div class=\"et-qd-list-item\">\n                    <p>Entity store value</p>\n\n                    <div>\n                      <button\n                        [ngClass]=\"{ 'et-qd-chip-secondary': !showEntityStoreValue() }\"\n                        (click)=\"toggleShowEntityStoreValue()\"\n                        class=\"et-qd-chip et-qd-chip-bordered\"\n                      >\n                        Toggle\n                      </button>\n                    </div>\n                    @if (showEntityStoreValue()) {\n                      <pre>{{ selectedQueryEntityStoreValue$ | async | json }}</pre>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{position:fixed;top:0;z-index:1000000;font-size:14px;color:#fff}.et-query-devtools-container{position:fixed;inset:0;background-color:#25292e;z-index:10000;overflow:auto;font-family:monospace;display:grid;grid-template-rows:auto auto auto minmax(0,1fr)}.et-query-devtools-container.et-query-devtools-container--transparent{opacity:.25;pointer-events:none}.et-query-devtools-container.et-query-devtools-container--transparent .et-query-devtools-translucent-btn{pointer-events:all}.et-query-devtools-container.et-query-devtools-container--snap-left{inset-inline-start:0;inset-block-start:0;inset-block-end:0;width:50%;border-right:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-right{inset-inline-start:unset;inset-inline-end:0;inset-block-start:0;inset-block-end:0;width:50%;border-left:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-top{inset-inline-start:0;inset-block-start:0;inset-inline-end:0;height:50%;border-bottom:1px solid rgb(37,41,46)}.et-query-devtools-container.et-query-devtools-container--snap-bottom{inset-inline-start:0;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;height:50%;border-top:1px solid rgb(37,41,46)}.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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: QueryShortNamePipe, name: "queryShortName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", 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',
@@ -2087,10 +2087,10 @@ class QueryDirective {
             this._viewContainerRef.createEmbeddedView(this._mainTemplateRef, this._viewContext);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: QueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: QueryDirective, isStandalone: true, selector: "[etQuery]", inputs: { query: ["etQuery", "query"], cache: ["etQueryCache", "cache"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: QueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: QueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2422,10 +2422,10 @@ class InfinityQueryDirective {
         this._viewContext.currentQuery = null;
         this._data$.next([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InfinityQueryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: InfinityQueryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InfinityQueryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2478,10 +2478,10 @@ class InfinityQueryTriggerDirective {
         });
         this._observer.observe(this._elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.1", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InfinityQueryTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: InfinityQueryTriggerDirective, isStandalone: true, selector: "[etInfinityQueryTrigger], et-infinity-query-trigger", inputs: { scrollContainerSelector: "scrollContainerSelector" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: InfinityQueryTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2758,6 +2758,9 @@ class QueryForm {
     get _formValue() {
         return this.form.getRawValue();
     }
+    get _form() {
+        return this.form;
+    }
     get controls() {
         return this.form.controls;
     }
@@ -2770,8 +2773,10 @@ class QueryForm {
             return acc;
         }, {});
     }
-    constructor(_fields) {
+    // with prefix eg. page should become ${prefix}-page
+    constructor(_fields, _options) {
         this._fields = _fields;
+        this._options = _options;
         this._destroy$ = createDestroy();
         this._unobserveTrigger$ = new Subject();
         this._router = inject(Router);
@@ -2834,7 +2839,7 @@ class QueryForm {
             if (isDevMode()) {
                 console.warn('QueryForm.observe() was called multiple times. This is not supported.');
             }
-            return;
+            return this;
         }
         this._isObserving = true;
         if (options?.syncOnNavigation !== false) {
@@ -2913,6 +2918,7 @@ class QueryForm {
             }))
                 .subscribe();
         }
+        return this;
     }
     _handleQueryFormResets(previousValue, currentValue) {
         let didResetValues = false;
@@ -2953,7 +2959,7 @@ class QueryForm {
     setFormValueFromUrlQueryParams(options) {
         let didValueChanges = false;
         for (const [key, field] of Object.entries(this._fields)) {
-            const value = options.queryParams[key];
+            const value = options.queryParams[this._transformKeyToQueryParam(key)];
             const valueDoesNotExist = value === undefined;
             if (valueDoesNotExist)
                 continue;
@@ -2982,13 +2988,13 @@ class QueryForm {
         return didValueChanges;
     }
     setValue(value, options) {
-        this.form.setValue(value, options);
+        this._form._setValue(value, options);
         if (options?.skipResets) {
             this._skipNextResets = true;
         }
     }
     patchValue(value, options) {
-        this.form.patchValue(value, options);
+        this._form._patchValue(value, options);
         if (options?.skipResets) {
             this._skipNextResets = true;
         }
@@ -3000,6 +3006,9 @@ class QueryForm {
         }
         return val ?? null;
     }
+    _transformKeyToQueryParam(key) {
+        return this._options?.queryParamPrefix ? `${this._options.queryParamPrefix}-${key}` : key;
+    }
     _isDefaultValue(key, value) {
         const normalizedValue = Array.isArray(value) ? `${ET_ARR_PREFIX}${JSON.stringify(value)}` : value;
         return this._getDefaultValue(key) === normalizedValue;
@@ -3009,6 +3018,10 @@ class QueryForm {
         for (const [key, field] of Object.entries(this._fields)) {
             group.addControl(key, field.control);
         }
+        group._patchValue = group.patchValue;
+        group._setValue = group.setValue;
+        group.patchValue = this.patchValue.bind(this);
+        group.setValue = this.setValue.bind(this);
         return group;
     }
     _extractDefaultValues() {
@@ -3027,16 +3040,16 @@ class QueryForm {
     _syncViaUrlQueryParams(values, replaceUrl) {
         const queryParams = { ...clone(this._activatedRoute.snapshot.queryParams) };
         for (const [key, value] of Object.entries(values)) {
+            const queryParamKey = this._transformKeyToQueryParam(key);
             const field = this._fields[key];
             if (!field) {
-                console.warn(`The field "${key}" is not defined in the QueryForm. Is it a typo?`, this);
                 continue;
             }
             if (this._isDefaultValue(key, value) || field.data.appendToUrl === false) {
-                delete queryParams[key];
+                queryParams[queryParamKey] = undefined;
             }
             else {
-                queryParams[key] = field.data.valueToQueryParamTransformFn
+                queryParams[queryParamKey] = field.data.valueToQueryParamTransformFn
                     ? field.data.valueToQueryParamTransformFn?.(value)
                     : value;
             }
@@ -3045,6 +3058,7 @@ class QueryForm {
             this._router.navigate([], {
                 queryParams,
                 replaceUrl,
+                queryParamsHandling: 'merge',
             });
         });
     }