@quadrel-enterprise-ui/framework 20.12.0 → 20.13.0

package/fesm2022/quadrel-enterprise-ui-framework.mjs

@@ -3,8 +3,8 @@ import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, View
 import { Dialog, DialogRef, DialogModule } from '@angular/cdk/dialog';
 import * as i1 from '@angular/common';
 import { CommonModule, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
-import { BehaviorSubject, pairwise, from, switchMap, map as map$1, Subject, throwError, of, ReplaySubject, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, firstValueFrom, combineLatest, concat, take as take$1, delay, tap as tap$1, first, scan, queueScheduler, filter as filter$1, concatMap as concatMap$1, exhaustMap, finalize, forkJoin, delayWhen, combineLatestWith, withLatestFrom, async } from 'rxjs';
-import { map, takeUntil, take, filter, catchError, debounceTime, startWith, distinctUntilChanged, concatMap, tap, skip, auditTime, observeOn, switchMap as switchMap$1, pairwise as pairwise$1, mergeMap, delay as delay$1 } from 'rxjs/operators';
+import { BehaviorSubject, pairwise, from, switchMap, map as map$1, Subject, throwError, of, ReplaySubject, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, firstValueFrom, combineLatest, concat, take as take$1, delay, tap as tap$1, first, scan, queueScheduler, filter as filter$1, concatMap as concatMap$1, exhaustMap, finalize, forkJoin, delayWhen, combineLatestWith, withLatestFrom as withLatestFrom$1, async } from 'rxjs';
+import { map, takeUntil, take, filter, catchError, debounceTime, startWith, distinctUntilChanged, concatMap, tap, skip, auditTime, withLatestFrom, observeOn, switchMap as switchMap$1, pairwise as pairwise$1, mergeMap, delay as delay$1 } from 'rxjs/operators';
 import { v4 } from 'uuid';
 import * as i3 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
@@ -7118,9 +7118,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 /**
  * Framework-wide funnel for syncing application state with the URL `?key=value` query string.
  *
- * Several Quadrel features mirror their state to the URL — the table's sort and pagination today,
- * filter, search, and `qd-page-tabs` over time. Without coordination they each call
- * `router.navigate(...)` directly, which produces two failure modes:
+ * Several Quadrel features mirror their state to the URL via per-feature adapters. Without
+ * coordination they each call `router.navigate(...)` directly, which produces two failure modes:
  *
  * 1. **Race**: two navigates issued in the same JS turn cancel each other. Only the last writer
  *    wins; the URL silently loses the cancelled feature's params.
@@ -7150,7 +7149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  *
  *   connect(state$: Observable<FilterState>, dispatch: (state: FilterState) => void): void {
  *     if (!this._hub.isAvailable()) return;
- *     if (!this._hub.claim(['filter'], this, this._destroyRef)) return;
+ *     if (!this._hub.claim(['filter'], this, this._destroyRef, { name: 'Filter', plural: 'filters' })) return;
  *
  *     this._hub
  *       .queryParams()
@@ -7159,7 +7158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  *
  *     state$
  *       .pipe(takeUntilDestroyed(this._destroyRef))
- *       .subscribe(state => this._hub.write({ filter: serializeFilter(state) }, false));
+ *       .subscribe(state => this._hub.write({ filter: serializeFilter(state) }, { replaceUrl: false }));
  *   }
  * }
  * ```
@@ -7187,6 +7186,7 @@ class QdRouterQueryParamHubService {
     _activatedRoute = inject(ActivatedRoute, { optional: true });
     _destroyRef = inject(DestroyRef);
     _ownership = new Map();
+    _ownerLabels = new WeakMap();
     _destroyClaims = new WeakMap();
     _navigationSettledSubject = new ReplaySubject(1);
     _pendingParams = {};
@@ -7241,11 +7241,15 @@ class QdRouterQueryParamHubService {
      * @param owner Stable identity of the caller — usually `this`. Used as the registry key.
      * @param destroyRef Optional. If provided, the hub releases the keys automatically when the
      *   `DestroyRef` fires. Pass the adapter's `inject(DestroyRef)` to make leaks impossible.
+     * @param featureLabel Optional. User-facing display label for the adapter's owning feature. The
+     *   hub uses it to format ownership-conflict error messages so application developers see the
+     *   feature names they configured (e.g. `Filter`, `Page Tabs`, `Table`) instead of internal
+     *   adapter class names. When omitted, the hub falls back to a generic `another adapter` phrase.
      * @returns `true` if every requested key is now owned by `owner`. `false` if at least one key
      *   was already owned by a different adapter; the registry is left untouched and `destroyRef`
      *   is not registered.
      */
-    claim(keys, owner, destroyRef) {
+    claim(keys, owner, destroyRef, featureLabel) {
         const conflicts = [];
         for (const key of keys) {
             const existing = this._ownership.get(key);
@@ -7253,17 +7257,34 @@ class QdRouterQueryParamHubService {
                 conflicts.push(key);
         }
         if (conflicts.length > 0) {
-            const list = conflicts.map(k => `"${k}"`).join(', ');
-            console.error(`Quadrel Framework | QdRouterQueryParamHub - Query param ${list} ${conflicts.length === 1 ? 'is' : 'are'} ` +
-                `already owned by another adapter. Disable the conflicting feature's URL sync or move it to a ` +
-                `different param key.`);
+            const existingOwner = this._ownership.get(conflicts[0]);
+            const existingLabel = this._ownerLabels.get(existingOwner);
+            console.error(this.formatOwnershipConflictMessage(conflicts, existingLabel));
             return false;
         }
         keys.forEach(key => this._ownership.set(key, owner));
+        if (featureLabel)
+            this._ownerLabels.set(owner, featureLabel);
         if (destroyRef && keys.length > 0)
             this.registerAutoRelease(owner, keys, destroyRef);
         return true;
     }
+    formatOwnershipConflictMessage(conflicts, existingLabel) {
+        const keysList = conflicts.map(key => `"${key}"`).join(', ');
+        const paramHeader = conflicts.length === 1 ? 'Query param' : 'Query params';
+        const verb = conflicts.length === 1 ? 'is' : 'are';
+        const ownerPhrase = existingLabel?.name ?? 'another adapter';
+        const lines = [
+            `Quadrel Framework | Router Query Param Hub - ${paramHeader} ${keysList} ${verb} already owned by ${ownerPhrase}.`
+        ];
+        if (existingLabel) {
+            lines.push(`Only one router-connected ${existingLabel.name} is allowed per view.`, `Please set connectWithRouter: false on all additional ${existingLabel.plural}.`);
+        }
+        else {
+            lines.push("Disable the conflicting feature's URL sync or move it to a different param key.");
+        }
+        return lines.join('\n');
+    }
     /**
      * Drops `owner`'s claim on the given keys. Keys not owned by `owner` are left untouched —
      * a foreign release call cannot steal another adapter's ownership.
@@ -7322,13 +7343,10 @@ class QdRouterQueryParamHubService {
      *
      * @param params Partial map of query-param keys to their new values. Missing keys are not touched.
      *   An empty object short-circuits and is a no-op.
-     * @param replaceUrl `true` replaces the current history entry; `false` pushes a new entry.
-     *   When several `write()` calls in the same microtask disagree, `true` wins (so an initial
-     *   replace is preserved when a follow-up write would otherwise push). The escalation is
-     *   per-batch — after each flush the pending flag resets to `false`, so writes that arrive
-     *   in the next microtask start a fresh batch with their own `replaceUrl` argument.
+     * @param options Write options — see `QdRouterQueryParamWriteOptions` for the `replaceUrl`
+     *   semantics and per-batch escalation rules.
      */
-    write(params, replaceUrl) {
+    write(params, options) {
         const router = this._router;
         const activatedRoute = this._activatedRoute;
         if (!router || !activatedRoute)
@@ -7336,7 +7354,7 @@ class QdRouterQueryParamHubService {
         if (Object.keys(params).length === 0)
             return;
         Object.assign(this._pendingParams, params);
-        this._pendingReplaceUrl = this._pendingReplaceUrl || replaceUrl;
+        this._pendingReplaceUrl = this._pendingReplaceUrl || options.replaceUrl;
         if (this._flushScheduled)
             return;
         this._flushScheduled = true;
@@ -21200,99 +21218,86 @@ function unescape(escapedString) {
     return escapedString.replace(new RegExp(`\\\\(${SERIALIZATION_SYMBOLS.map(s => '\\' + s).join('|')})`, 'g'), '$1');
 }
 
-// @ts-strict-ignore
+const FILTER_PARAM_NAME = 'filter';
+const OWNED_PARAMS$4 = [FILTER_PARAM_NAME];
+const FEATURE_LABEL$4 = { name: 'Filter', plural: 'filters' };
+/**
+ * Per-view adapter that syncs `QdFilterComponent` selection with the URL `?filter=` query
+ * param via `QdRouterQueryParamHubService`. Reads/parses on activation, writes on selection
+ * change. Coordination, ownership, and write batching are delegated to the hub — see its
+ * JSDoc for details. Behavior contracts live in `filter-router-connector.service.spec.ts`
+ * and `router-query-param-hub.integration.cy.ts`.
+ */
 class QdFilterRouterConnectorService {
-    filterService = inject(QdFilterService);
-    router = inject(Router, { optional: true });
-    activatedRoute = inject(ActivatedRoute, { optional: true });
+    _filterService = inject(QdFilterService);
+    _hub = inject(QdRouterQueryParamHubService);
+    _destroyRef = inject(DestroyRef);
     _connectedFilter;
-    _activatedRouteSubscription;
-    _filterUrlParameterSubscription;
-    _navigationEnded$;
+    _readSubscription;
+    _writeSubscription;
     _activatedRouteCheckedSubject = new ReplaySubject(1);
     _activatedRouteChecked$ = this._activatedRouteCheckedSubject.asObservable();
     constructor() {
-        if (!this.router || !this.activatedRoute)
-            return;
-        const navigationPending$ = new ReplaySubject(1);
-        this._navigationEnded$ = navigationPending$.pipe(filter(navigationPending => !navigationPending));
-        if (this.router.navigated)
-            navigationPending$.next(false);
-        this.router.events.subscribe(event => {
-            switch (event.constructor) {
-                case NavigationStart:
-                    navigationPending$.next(true);
-                    break;
-                case NavigationEnd:
-                case NavigationCancel:
-                case NavigationError:
-                    navigationPending$.next(false);
-                    break;
-            }
-        });
+        this._destroyRef.onDestroy(() => this.tearDownConnection());
     }
     connectFilterWithRouter(filterComponent) {
-        if (filterComponent.filterData?.connectWithRouter === false || !this.router || !this.activatedRoute) {
+        if (filterComponent.filterData?.connectWithRouter === false || !this._hub.isAvailable())
             return of(false);
-        }
-        if (this._connectedFilter) {
-            console.error('Quadrel Framework | QdFilter - More than one filter with enabled "connectWithRouter" config is not allowed. ' +
-                'Please set connectWithRouter to false except for one filter.');
+        if (this._connectedFilter === filterComponent)
+            return this._activatedRouteChecked$;
+        if (!this._hub.claim(OWNED_PARAMS$4, this, this._destroyRef, FEATURE_LABEL$4))
             return of(false);
-        }
         this._connectedFilter = filterComponent;
-        this.setFilterSelectionFromUrl();
-        this.setUrlOnFilterSelection();
+        this._activatedRouteCheckedSubject = new ReplaySubject(1);
+        this._activatedRouteChecked$ = this._activatedRouteCheckedSubject.asObservable();
+        this.subscribeToUrlChanges();
+        this.subscribeToFilterChanges();
         return this._activatedRouteChecked$;
     }
-    setFilterSelectionFromUrl() {
-        this._activatedRouteSubscription = this._navigationEnded$
-            .pipe(switchMap(() => combineLatest([
-            this.activatedRoute.queryParams,
-            this.filterService.selectFilterDataById$(this._connectedFilter.filterId)
-        ])), take$1(1))
-            .subscribe(([queryParams, filterData]) => {
-            if (typeof queryParams.filter === 'string') {
-                this.filterService.setFilterSelection(this._connectedFilter.filterId, {
-                    ...filterData
-                        .map(category => ({ [category.category]: [] }))
-                        .reduce((accumulator, emptyCategory) => ({ ...accumulator, ...emptyCategory }), {}),
-                    ...parseFilterUrlParameter(queryParams.filter)
+    tearDownConnection() {
+        this._connectedFilter = undefined;
+        this._readSubscription?.unsubscribe();
+        this._writeSubscription?.unsubscribe();
+    }
+    subscribeToUrlChanges() {
+        let isFirstEmit = true;
+        this._readSubscription = this._hub.navigationSettled$
+            .pipe(switchMap(() => this._hub.queryParams()), map(queryParams => queryParams[FILTER_PARAM_NAME]), distinctUntilChanged(), switchMap(rawFilter => this._filterService.selectFilterDataById$(this._connectedFilter.filterId).pipe(take(1), map(filterData => ({ rawFilter, filterData })))), takeUntilDestroyed(this._destroyRef))
+            .subscribe(({ rawFilter, filterData }) => {
+            const emptySelection = filterData
+                .map(category => ({ [category.category]: [] }))
+                .reduce((accumulator, emptyCategory) => ({ ...accumulator, ...emptyCategory }), {});
+            if (typeof rawFilter === 'string') {
+                this._filterService.setFilterSelection(this._connectedFilter.filterId, {
+                    ...emptySelection,
+                    ...parseFilterUrlParameter(rawFilter)
                 });
             }
-            this._activatedRouteCheckedSubject.next(true);
+            else if (!isFirstEmit) {
+                this._filterService.setFilterSelection(this._connectedFilter.filterId, emptySelection);
+            }
+            if (isFirstEmit) {
+                this._activatedRouteCheckedSubject.next(true);
+                isFirstEmit = false;
+            }
         });
     }
-    setUrlOnFilterSelection() {
-        this._filterUrlParameterSubscription = this.filterService
+    subscribeToFilterChanges() {
+        this._writeSubscription = this._filterService
             .getFilterUrlParameter$(this._connectedFilter.filterId)
-            .pipe(switchMap(filterUrlParameter => this._navigationEnded$.pipe(take$1(1), map(() => filterUrlParameter))))
+            .pipe(distinctUntilChanged(), switchMap(filterUrlParameter => this._hub.navigationSettled$.pipe(take(1), map(() => filterUrlParameter))), takeUntilDestroyed(this._destroyRef))
             .subscribe(filterUrlParameter => {
-            this.router.navigate([], {
-                relativeTo: this.activatedRoute,
-                queryParams: {
-                    filter: filterUrlParameter
-                },
-                queryParamsHandling: 'merge',
-                replaceUrl: true
-            });
+            const target = filterUrlParameter || undefined;
+            if (this._hub.snapshotQueryParam(FILTER_PARAM_NAME) === target)
+                return;
+            this._hub.write({ [FILTER_PARAM_NAME]: target }, { replaceUrl: false });
         });
     }
-    disconnectFilterFromRouter(filterComponent) {
-        if (this._connectedFilter !== filterComponent)
-            return;
-        this._connectedFilter = null;
-        this._activatedRouteSubscription?.unsubscribe();
-        this._filterUrlParameterSubscription?.unsubscribe();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterRouterConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterRouterConnectorService, providedIn: 'root' });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterRouterConnectorService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterRouterConnectorService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }], ctorParameters: () => [] });
 
 class QdDependentFiltersService {
@@ -21432,7 +21437,7 @@ class QdFilterComponent {
     _filterDataSubject = new BehaviorSubject(undefined);
     _hasPreselectionSubject = new ReplaySubject(1);
     _categoriesSubject = new ReplaySubject(1);
-    _filterConnectedWithRouterSubject = new ReplaySubject();
+    _filterConnectedWithRouterSubject = new ReplaySubject(1);
     _filterConnectedWithRouter$ = this._filterConnectedWithRouterSubject.asObservable();
     set hasPreselection(hasPreselection) {
         this._hasPreselectionSubject.next(hasPreselection);
@@ -21470,7 +21475,6 @@ class QdFilterComponent {
         }
     }
     ngOnDestroy() {
-        this.filterRouterConnectorService.disconnectFilterFromRouter(this);
         this.dependentFiltersService.destroy();
         this._queryStringSubscription?.unsubscribe();
         this._postBodySubscription?.unsubscribe();
@@ -21605,11 +21609,11 @@ class QdFilterComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterComponent, isStandalone: false, selector: "qd-filter", inputs: { filterData: "filterData", testId: ["data-test-id", "testId"] }, outputs: { queryStringOutput: "queryStringOutput", postBodyOutput: "postBodyOutput", valueChange: "valueChange" }, host: { properties: { "attr.data-test-id": "this.dataTestId" }, classAttribute: "qd-filter" }, providers: [QdDependentFiltersService], viewQueries: [{ propertyName: "filterCategory", predicate: i0.forwardRef(() => QdFilterCategoryComponent), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"(categories$ | async)?.length > 0\">\n  <ng-container\n    *ngFor=\"let category of categories$ | async; let last = last; let length = count; let categoryIndex = index\"\n  >\n    <qd-filter-category\n      [filterId]=\"filterId\"\n      [isInstantFiltering]=\"isInstantFiltering\"\n      [categoryIndex]=\"categoryIndex\"\n      [lastCategory]=\"last\"\n      [data-test-id]=\"testId + '-category-' + categoryIndex + '-' + category\"\n    ></qd-filter-category>\n  </ng-container>\n\n  <div [class]=\"'qd-filter__action-buttons'\" *ngIf=\"!isInstantFiltering\">\n    <button\n      qdButton\n      qdButtonLink\n      [disabled]=\"disableFilterButton$ | async\"\n      (click)=\"clickFilter()\"\n      [color]=\"'primary'\"\n      [data-test-id]=\"testId + '-submit-button'\"\n    >\n      {{ \"i18n.qd.container.toolbar.filter.filter\" | translate }}\n    </button>\n\n    <button\n      qdButton\n      qdButtonLink\n      [disabled]=\"disableResetButton$ | async\"\n      (click)=\"resetFilter()\"\n      [color]=\"'secondary'\"\n      [data-test-id]=\"testId + '-reset-button'\"\n    >\n      {{\n        ((hasPreselection$ | async)\n          ? \"i18n.qd.container.toolbar.filter.backToPreSelect\"\n          : \"i18n.qd.container.toolbar.filter.reset\"\n        ) | translate\n      }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap}:host .qd-filter__action-buttons{display:flex;flex-wrap:wrap-reverse}:host ::ng-deep .qd-button{position:relative;margin-bottom:1rem}:host ::ng-deep .qd-button:last-child{margin-left:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonLinkDirective, selector: "button[qdButtonLink], a[qdButtonLink], button[qd-button-link]" }, { kind: "component", type: QdFilterCategoryComponent, selector: "qd-filter-category", inputs: ["filterId", "isInstantFiltering", "categoryIndex", "lastCategory", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterComponent, isStandalone: false, selector: "qd-filter", inputs: { filterData: "filterData", testId: ["data-test-id", "testId"] }, outputs: { queryStringOutput: "queryStringOutput", postBodyOutput: "postBodyOutput", valueChange: "valueChange" }, host: { properties: { "attr.data-test-id": "this.dataTestId" }, classAttribute: "qd-filter" }, providers: [QdDependentFiltersService, QdFilterRouterConnectorService], viewQueries: [{ propertyName: "filterCategory", predicate: i0.forwardRef(() => QdFilterCategoryComponent), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"(categories$ | async)?.length > 0\">\n  <ng-container\n    *ngFor=\"let category of categories$ | async; let last = last; let length = count; let categoryIndex = index\"\n  >\n    <qd-filter-category\n      [filterId]=\"filterId\"\n      [isInstantFiltering]=\"isInstantFiltering\"\n      [categoryIndex]=\"categoryIndex\"\n      [lastCategory]=\"last\"\n      [data-test-id]=\"testId + '-category-' + categoryIndex + '-' + category\"\n    ></qd-filter-category>\n  </ng-container>\n\n  <div [class]=\"'qd-filter__action-buttons'\" *ngIf=\"!isInstantFiltering\">\n    <button\n      qdButton\n      qdButtonLink\n      [disabled]=\"disableFilterButton$ | async\"\n      (click)=\"clickFilter()\"\n      [color]=\"'primary'\"\n      [data-test-id]=\"testId + '-submit-button'\"\n    >\n      {{ \"i18n.qd.container.toolbar.filter.filter\" | translate }}\n    </button>\n\n    <button\n      qdButton\n      qdButtonLink\n      [disabled]=\"disableResetButton$ | async\"\n      (click)=\"resetFilter()\"\n      [color]=\"'secondary'\"\n      [data-test-id]=\"testId + '-reset-button'\"\n    >\n      {{\n        ((hasPreselection$ | async)\n          ? \"i18n.qd.container.toolbar.filter.backToPreSelect\"\n          : \"i18n.qd.container.toolbar.filter.reset\"\n        ) | translate\n      }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap}:host .qd-filter__action-buttons{display:flex;flex-wrap:wrap-reverse}:host ::ng-deep .qd-button{position:relative;margin-bottom:1rem}:host ::ng-deep .qd-button:last-child{margin-left:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonLinkDirective, selector: "button[qdButtonLink], a[qdButtonLink], button[qd-button-link]" }, { kind: "component", type: QdFilterCategoryComponent, selector: "qd-filter-category", inputs: ["filterId", "isInstantFiltering", "categoryIndex", "lastCategory", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-filter', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'qd-filter' }, providers: [QdDependentFiltersService], standalone: false, template: "<ng-container *ngIf=\"(categories$ | async)?.length > 0\">\n  <ng-container\n    *ngFor=\"let category of categories$ | async; let last = last; let length = count; let categoryIndex = index\"\n  >\n    <qd-filter-category\n      [filterId]=\"filterId\"\n      [isInstantFiltering]=\"isInstantFiltering\"\n      [categoryIndex]=\"categoryIndex\"\n      [lastCategory]=\"last\"\n      [data-test-id]=\"testId + '-category-' + categoryIndex + '-' + category\"\n    ></qd-filter-category>\n  </ng-container>\n\n  <div [class]=\"'qd-filter__action-buttons'\" *ngIf=\"!isInstantFiltering\">\n    <button\n      qdButton\n      qdButtonLink\n      [disabled]=\"disableFilterButton$ | async\"\n      (click)=\"clickFilter()\"\n      [color]=\"'primary'\"\n      [data-test-id]=\"testId + '-submit-button'\"\n    >\n      {{ \"i18n.qd.container.toolbar.filter.filter\" | translate }}\n    </button>\n\n    <button\n      qdButton\n      qdButtonLink\n      [disabled]=\"disableResetButton$ | async\"\n      (click)=\"resetFilter()\"\n      [color]=\"'secondary'\"\n      [data-test-id]=\"testId + '-reset-button'\"\n    >\n      {{\n        ((hasPreselection$ | async)\n          ? \"i18n.qd.container.toolbar.filter.backToPreSelect\"\n          : \"i18n.qd.container.toolbar.filter.reset\"\n        ) | translate\n      }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap}:host .qd-filter__action-buttons{display:flex;flex-wrap:wrap-reverse}:host ::ng-deep .qd-button{position:relative;margin-bottom:1rem}:host ::ng-deep .qd-button:last-child{margin-left:1rem}\n"] }]
+            args: [{ selector: 'qd-filter', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'qd-filter' }, providers: [QdDependentFiltersService, QdFilterRouterConnectorService], standalone: false, template: "<ng-container *ngIf=\"(categories$ | async)?.length > 0\">\n  <ng-container\n    *ngFor=\"let category of categories$ | async; let last = last; let length = count; let categoryIndex = index\"\n  >\n    <qd-filter-category\n      [filterId]=\"filterId\"\n      [isInstantFiltering]=\"isInstantFiltering\"\n      [categoryIndex]=\"categoryIndex\"\n      [lastCategory]=\"last\"\n      [data-test-id]=\"testId + '-category-' + categoryIndex + '-' + category\"\n    ></qd-filter-category>\n  </ng-container>\n\n  <div [class]=\"'qd-filter__action-buttons'\" *ngIf=\"!isInstantFiltering\">\n    <button\n      qdButton\n      qdButtonLink\n      [disabled]=\"disableFilterButton$ | async\"\n      (click)=\"clickFilter()\"\n      [color]=\"'primary'\"\n      [data-test-id]=\"testId + '-submit-button'\"\n    >\n      {{ \"i18n.qd.container.toolbar.filter.filter\" | translate }}\n    </button>\n\n    <button\n      qdButton\n      qdButtonLink\n      [disabled]=\"disableResetButton$ | async\"\n      (click)=\"resetFilter()\"\n      [color]=\"'secondary'\"\n      [data-test-id]=\"testId + '-reset-button'\"\n    >\n      {{\n        ((hasPreselection$ | async)\n          ? \"i18n.qd.container.toolbar.filter.backToPreSelect\"\n          : \"i18n.qd.container.toolbar.filter.reset\"\n        ) | translate\n      }}\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap}:host .qd-filter__action-buttons{display:flex;flex-wrap:wrap-reverse}:host ::ng-deep .qd-button{position:relative;margin-bottom:1rem}:host ::ng-deep .qd-button:last-child{margin-left:1rem}\n"] }]
         }], propDecorators: { filterData: [{
                 type: Input
             }], testId: [{
@@ -22277,94 +22281,88 @@ function searchReducer(state, action) {
 }
 
 const PHRASE_PRESELECT_SEPARATOR = '|';
+const SEARCH_PARAM_NAME = 'search';
+const OWNED_PARAMS$3 = [SEARCH_PARAM_NAME];
+const FEATURE_LABEL$3 = { name: 'Search', plural: 'searches' };
+/**
+ * Per-view adapter that syncs `QdSearchComponent` phrase and preselection with the URL
+ * `?search=` query param via `QdRouterQueryParamHubService`. Reads/parses on activation,
+ * writes when the search service emits a submit. Coordination, ownership, and write
+ * batching are delegated to the hub — see its JSDoc for details. Behavior contracts live
+ * in `search-router-connector.service.spec.ts` and
+ * `router-query-param-hub.integration.cy.ts`.
+ */
 class QdSearchRouterConnectorService {
-    router = inject(Router, { optional: true });
-    activatedRoute = inject(ActivatedRoute, { optional: true });
+    _hub = inject(QdRouterQueryParamHubService);
+    _destroyRef = inject(DestroyRef);
     _connectedSearch;
-    _activatedRouteSubscription;
-    _searchUrlParameterSubscription;
-    _navigationEnded$;
+    _readSubscription;
+    _writeSubscription;
     _activatedRouteCheckedSubject = new ReplaySubject(1);
     _activatedRouteChecked$ = this._activatedRouteCheckedSubject.asObservable();
     constructor() {
-        if (!this.router || !this.activatedRoute)
-            return;
-        const navigationPending$ = new ReplaySubject(1);
-        this._navigationEnded$ = navigationPending$.pipe(filter(navigationPending => !navigationPending));
-        if (this.router.navigated)
-            navigationPending$.next(false);
-        this.router.events.subscribe(event => {
-            switch (event.constructor) {
-                case NavigationStart:
-                    navigationPending$.next(true);
-                    break;
-                case NavigationEnd:
-                case NavigationCancel:
-                case NavigationError:
-                    navigationPending$.next(false);
-                    break;
-            }
-        });
+        this._destroyRef.onDestroy(() => this.tearDownConnection());
     }
     connectSearchWithRouter(searchComponent) {
-        if (searchComponent.configData?.connectWithRouter !== true || !this.router || !this.activatedRoute) {
+        if (searchComponent.configData?.connectWithRouter !== true || !this._hub.isAvailable())
             return of(false);
-        }
-        if (this._connectedSearch) {
-            console.error('Quadrel Framework | QdSearch - More than one search with enabled "connectWithRouter" config is not allowed. ' +
-                'Please set connectWithRouter to false except for one search.');
+        if (this._connectedSearch === searchComponent)
+            return this._activatedRouteChecked$;
+        if (!this._hub.claim(OWNED_PARAMS$3, this, this._destroyRef, FEATURE_LABEL$3))
             return of(false);
-        }
         this._connectedSearch = searchComponent;
-        this.setSearchPhraseFromUrl();
-        this.setUrlOnSearch();
+        this._activatedRouteCheckedSubject = new ReplaySubject(1);
+        this._activatedRouteChecked$ = this._activatedRouteCheckedSubject.asObservable();
+        this.subscribeToUrlChanges();
+        this.subscribeToSearchChanges();
         return this._activatedRouteChecked$;
     }
-    setSearchPhraseFromUrl() {
-        this._activatedRouteSubscription = this._navigationEnded$
-            .pipe(switchMap(() => this.activatedRoute.queryParams), take$1(1))
-            .subscribe((queryParams) => {
-            if (typeof queryParams.search === 'string') {
-                const [phrase, preSelect] = queryParams.search.split(this.getNotEscapedSplitRegExp()).map(this.unescape);
-                if (this._connectedSearch) {
-                    this._connectedSearch.search = phrase;
-                    this._connectedSearch.preSelect = preSelect || '';
-                }
+    tearDownConnection() {
+        this._connectedSearch = undefined;
+        this._readSubscription?.unsubscribe();
+        this._writeSubscription?.unsubscribe();
+    }
+    subscribeToUrlChanges() {
+        let isFirstEmit = true;
+        this._readSubscription = this._hub.navigationSettled$
+            .pipe(switchMap(() => this._hub.queryParams()), map(queryParams => queryParams[SEARCH_PARAM_NAME]), distinctUntilChanged(), takeUntilDestroyed(this._destroyRef))
+            .subscribe(rawSearch => {
+            if (typeof rawSearch === 'string' && this._connectedSearch) {
+                const [phrase, preSelect] = rawSearch
+                    .split(this.getNotEscapedSplitRegExp())
+                    .map(value => this.unescape(value));
+                this._connectedSearch.search = phrase;
+                this._connectedSearch.preSelect = preSelect || '';
+            }
+            else if (!isFirstEmit && this._connectedSearch) {
+                this._connectedSearch.search = '';
+                this._connectedSearch.preSelect = '';
+            }
+            if (isFirstEmit) {
+                this._activatedRouteCheckedSubject.next(true);
+                isFirstEmit = false;
             }
-            this._activatedRouteCheckedSubject.next(true);
+        });
+    }
+    subscribeToSearchChanges() {
+        this._writeSubscription = this._connectedSearch.searchService.searchPostBody$.pipe(switchMap(searchData => this._hub.navigationSettled$.pipe(take(1), map(() => searchData))), takeUntilDestroyed(this._destroyRef)).subscribe(({ phrase, preSelect }) => {
+            const serialized = this.escape(phrase) + (preSelect ? PHRASE_PRESELECT_SEPARATOR + this.escape(preSelect) : '');
+            const target = serialized || undefined;
+            if (this._hub.snapshotQueryParam(SEARCH_PARAM_NAME) === target)
+                return;
+            this._hub.write({ [SEARCH_PARAM_NAME]: target }, { replaceUrl: false });
         });
     }
     getNotEscapedSplitRegExp() {
         return new RegExp('(?<!\\\\)\\' + PHRASE_PRESELECT_SEPARATOR);
     }
-    setUrlOnSearch() {
-        this._searchUrlParameterSubscription = this._connectedSearch?.searchService.searchPostBody$
-            .pipe(switchMap(searchData => this._navigationEnded$.pipe(take$1(1), map(() => searchData))))
-            .subscribe(({ phrase, preSelect }) => {
-            this.router.navigate([], {
-                relativeTo: this.activatedRoute,
-                queryParams: {
-                    search: this.escape(phrase) + (preSelect ? PHRASE_PRESELECT_SEPARATOR + this.escape(preSelect) : '')
-                },
-                queryParamsHandling: 'merge',
-                replaceUrl: true
-            });
-        });
-    }
-    escape(string) {
-        if (!string)
+    escape(value) {
+        if (!value)
             return '';
-        return string.replace(new RegExp(`(\\${PHRASE_PRESELECT_SEPARATOR})`, 'g'), '\\$1');
-    }
-    unescape(escapedString) {
-        return escapedString.replace(new RegExp(`\\\\(${PHRASE_PRESELECT_SEPARATOR})`, 'g'), '$1');
+        return value.replace(new RegExp(`(\\${PHRASE_PRESELECT_SEPARATOR})`, 'g'), '\\$1');
     }
-    disconnectSearchFromRouter(searchComponent) {
-        if (this._connectedSearch !== searchComponent)
-            return;
-        this._connectedSearch = null;
-        this._activatedRouteSubscription?.unsubscribe();
-        this._searchUrlParameterSubscription?.unsubscribe();
+    unescape(escapedValue) {
+        return escapedValue.replace(new RegExp(`\\\\(${PHRASE_PRESELECT_SEPARATOR})`, 'g'), '$1');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSearchRouterConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSearchRouterConnectorService });
@@ -22561,7 +22559,7 @@ class QdSearchComponent {
     _search = '';
     _preSelect = '';
     _destroyed$ = new Subject();
-    _searchConnectedWithRouterSubject = new ReplaySubject();
+    _searchConnectedWithRouterSubject = new ReplaySubject(1);
     _searchConnectedWithRouter$ = this._searchConnectedWithRouterSubject.asObservable();
     get inputConfig() {
         return {
@@ -22644,7 +22642,6 @@ class QdSearchComponent {
         }
     }
     ngOnDestroy() {
-        this.searchRouterConnectorService.disconnectSearchFromRouter(this);
         this._destroyed$.next();
         this._destroyed$.complete();
     }
@@ -23655,11 +23652,26 @@ var QdPaginatorDirection;
 
 const PAGE_PARAM_NAME = 'page';
 const SIZE_PARAM_NAME = 'size';
-const OWNED_PARAMS$1 = [PAGE_PARAM_NAME, SIZE_PARAM_NAME];
+const OWNED_PARAMS$2 = [PAGE_PARAM_NAME, SIZE_PARAM_NAME];
+const FEATURE_LABEL$2 = { name: 'Table', plural: 'tables' };
 const SIZE_SANITY_MAX = 1000;
+/**
+ * Per-view adapter that syncs `QdTablePaginatorComponent` page and size with the URL
+ * `?page=` and `?size=` query params via `QdRouterQueryParamHubService`. Applies the URL
+ * synchronously on connect (so cross-adapter store reducers cannot stomp on the deep-linked
+ * page), then keeps store and URL in sync. Coordination, ownership, and write batching are
+ * delegated to the hub — see its JSDoc for details. Behavior contracts live in
+ * `pagination-router-connector.service.spec.ts` and `router-query-param-hub.integration.cy.ts`.
+ *
+ * Internal invariant: relies on `pageChangeInfo$()` and `totalCount$()` being
+ * BehaviorSubject-backed selectors that emit their current value on subscribe. If either
+ * becomes async (delay/debounce), the synchronous snapshot in `applyInitialUrlSynchronously`
+ * stays at its initial default silently — the dispatch would always fire and the table would
+ * flicker to "0 elements" on disconnect/reconnect cycles.
+ */
 class QdTablePaginationRouterConnectorService {
-    hub = inject(QdRouterQueryParamHubService);
-    destroyRef = inject(DestroyRef);
+    _hub = inject(QdRouterQueryParamHubService);
+    _destroyRef = inject(DestroyRef);
     _connection;
     _readSubscription;
     _writeSubscription;
@@ -23667,15 +23679,12 @@ class QdTablePaginationRouterConnectorService {
     _activatedRouteChecked$ = this._activatedRouteCheckedSubject.asObservable();
     _hasInitialUrlBeenSet = false;
     constructor() {
-        this.destroyRef.onDestroy(() => {
-            this.tearDownConnection();
-            this.hub.release(OWNED_PARAMS$1, this);
-        });
+        this._destroyRef.onDestroy(() => this.tearDownConnection());
     }
     connectPaginationWithRouter(paginator, tableStoreService) {
-        if (!paginator.shouldConnectWithRouter() || !this.hub.isAvailable())
+        if (!paginator.shouldConnectWithRouter() || !this._hub.isAvailable())
             return of(false);
-        if (!this.hub.claim(OWNED_PARAMS$1, this))
+        if (!this._hub.claim(OWNED_PARAMS$2, this, this._destroyRef, FEATURE_LABEL$2))
             return of(false);
         this._connection = {
             paginator: paginator,
@@ -23684,15 +23693,32 @@ class QdTablePaginationRouterConnectorService {
         this._hasInitialUrlBeenSet = false;
         this._activatedRouteCheckedSubject = new ReplaySubject(1);
         this._activatedRouteChecked$ = this._activatedRouteCheckedSubject.asObservable();
+        this.applyInitialUrlSynchronously();
         this.subscribeToUrlChanges();
         this.subscribeToStoreChanges();
         return this._activatedRouteChecked$;
     }
-    disconnectPaginationFromRouter(paginator) {
-        if (this._connection?.paginator !== paginator)
+    applyInitialUrlSynchronously() {
+        const { tableStoreService, paginator } = this._connection;
+        const params = this.parseUrlParams({
+            [PAGE_PARAM_NAME]: this._hub.snapshotQueryParam(PAGE_PARAM_NAME),
+            [SIZE_PARAM_NAME]: this._hub.snapshotQueryParam(SIZE_PARAM_NAME)
+        });
+        const pageSize = params.size ?? paginator.getPageSizeDefault();
+        const pageIndex = params.page !== undefined ? params.page - 1 : 0;
+        let currentInfo;
+        let currentTotalCount = 0;
+        tableStoreService
+            .pageChangeInfo$()
+            .pipe(take(1))
+            .subscribe(info => (currentInfo = info));
+        tableStoreService
+            .totalCount$()
+            .pipe(take(1))
+            .subscribe(value => (currentTotalCount = value));
+        if (currentInfo && currentInfo.pageIndex === pageIndex && currentInfo.pageSize === pageSize)
             return;
-        this.tearDownConnection();
-        this.hub.release(OWNED_PARAMS$1, this);
+        tableStoreService.setPageParams(pageIndex, pageSize, currentTotalCount);
     }
     tearDownConnection() {
         this._connection = undefined;
@@ -23703,8 +23729,8 @@ class QdTablePaginationRouterConnectorService {
     subscribeToUrlChanges() {
         const { tableStoreService } = this._connection;
         let isFirstEmit = true;
-        this._readSubscription = this.hub.navigationSettled$
-            .pipe(switchMap(() => this.hub.queryParams()), map(queryParams => this.parseUrlParams(queryParams)), distinctUntilChanged((a, b) => a.page === b.page && a.size === b.size), switchMap(params => combineLatest([tableStoreService.pageChangeInfo$(), tableStoreService.totalCount$()]).pipe(take(1), map(([currentInfo, totalCount]) => ({ params, currentInfo, totalCount })))))
+        this._readSubscription = this._hub.navigationSettled$
+            .pipe(switchMap(() => this._hub.queryParams()), map(queryParams => this.parseUrlParams(queryParams)), distinctUntilChanged((a, b) => a.page === b.page && a.size === b.size), switchMap(params => combineLatest([tableStoreService.pageChangeInfo$(), tableStoreService.totalCount$()]).pipe(take(1), map(([currentInfo, totalCount]) => ({ params, currentInfo, totalCount })))))
             .subscribe(({ params, currentInfo, totalCount }) => {
             const target = this.toStoreState(params);
             const isChanged = !currentInfo || currentInfo.pageIndex !== target.pageIndex || currentInfo.pageSize !== target.pageSize;
@@ -23721,7 +23747,7 @@ class QdTablePaginationRouterConnectorService {
         const { tableStoreService } = this._connection;
         this._writeSubscription = tableStoreService
             .pageChangeInfo$()
-            .pipe(filter((info) => info !== undefined), distinctUntilChanged((a, b) => a.pageIndex === b.pageIndex && a.pageSize === b.pageSize), switchMap(info => this.hub.navigationSettled$.pipe(take(1), map(() => info))))
+            .pipe(filter((info) => info !== undefined), distinctUntilChanged((a, b) => a.pageIndex === b.pageIndex && a.pageSize === b.pageSize), switchMap(info => this._hub.navigationSettled$.pipe(take(1), map(() => info))))
             .subscribe(info => this.writeUrl(info.pageIndex, info.pageSize));
     }
     writeUrl(pageIndex, pageSize) {
@@ -23729,11 +23755,11 @@ class QdTablePaginationRouterConnectorService {
         this._hasInitialUrlBeenSet = true;
         const targetPage = String(pageIndex + 1);
         const targetSize = String(pageSize);
-        const urlAlreadyMatches = this.hub.snapshotQueryParam(PAGE_PARAM_NAME) === targetPage &&
-            this.hub.snapshotQueryParam(SIZE_PARAM_NAME) === targetSize;
+        const urlAlreadyMatches = this._hub.snapshotQueryParam(PAGE_PARAM_NAME) === targetPage &&
+            this._hub.snapshotQueryParam(SIZE_PARAM_NAME) === targetSize;
         if (urlAlreadyMatches)
             return;
-        this.hub.write({ [PAGE_PARAM_NAME]: targetPage, [SIZE_PARAM_NAME]: targetSize }, replaceUrl);
+        this._hub.write({ [PAGE_PARAM_NAME]: targetPage, [SIZE_PARAM_NAME]: targetSize }, { replaceUrl });
     }
     parseUrlParams(queryParams) {
         const result = {};
@@ -23754,9 +23780,8 @@ class QdTablePaginationRouterConnectorService {
     }
     isValidSize(value) {
         const pageSizes = this.getConfiguredPageSizes();
-        if (pageSizes && pageSizes.length > 0) {
+        if (pageSizes && pageSizes.length > 0)
             return pageSizes.includes(value);
-        }
         return value <= SIZE_SANITY_MAX;
     }
     getConfiguredPageSizes() {
@@ -24045,7 +24070,6 @@ class QdTablePaginatorComponent {
             this.startPagination();
     }
     ngOnDestroy() {
-        this.routerConnector.disconnectPaginationFromRouter(this);
         this._destroyed$.next(null);
         this._destroyed$.complete();
     }
@@ -24145,12 +24169,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 
 const SORT_PARAM_NAME = 'sort';
-const OWNED_PARAMS = [SORT_PARAM_NAME];
+const OWNED_PARAMS$1 = [SORT_PARAM_NAME];
+const FEATURE_LABEL$1 = { name: 'Table', plural: 'tables' };
 const SEGMENT_SEPARATOR = ',';
 const COLUMN_DIRECTION_SEPARATOR = '.';
+/**
+ * Per-view adapter that syncs `QdTableComponent` sort state with the URL `?sort=` query
+ * param via `QdRouterQueryParamHubService`. Reads/parses on activation (single segment
+ * only; multi-segment URLs use the first valid entry and warn), writes when the store's
+ * `tableSort$` selector emits. Coordination, ownership, and write batching are delegated
+ * to the hub — see its JSDoc for details. Behavior contracts live in
+ * `sort-router-connector.service.spec.ts` and `router-query-param-hub.integration.cy.ts`.
+ *
+ * Internal invariant: relies on `tableSort$()` being a BehaviorSubject-backed selector that
+ * emits its current value on subscribe. The URL-read pipeline pairs each segments emission
+ * with the latest sort snapshot via `withLatestFrom`; if the selector ever becomes async
+ * (delay/debounce), `withLatestFrom` drops the outer emission until the snapshot arrives
+ * and URL-driven sort changes are silently lost.
+ */
 class QdTableSortRouterConnectorService {
-    hub = inject(QdRouterQueryParamHubService);
-    destroyRef = inject(DestroyRef);
+    _hub = inject(QdRouterQueryParamHubService);
+    _destroyRef = inject(DestroyRef);
     _connection;
     _readSubscription;
     _writeSubscription;
@@ -24159,15 +24198,12 @@ class QdTableSortRouterConnectorService {
     _hasInitialUrlBeenSet = false;
     _hasWarnedMultiSegment = false;
     constructor() {
-        this.destroyRef.onDestroy(() => {
-            this.tearDownConnection();
-            this.hub.release(OWNED_PARAMS, this);
-        });
+        this._destroyRef.onDestroy(() => this.tearDownConnection());
     }
     connectSortWithRouter(table, tableStoreService) {
-        if (!this.shouldConnect(table) || !this.hub.isAvailable())
+        if (!this.shouldConnect(table) || !this._hub.isAvailable())
             return of(false);
-        if (!this.hub.claim(OWNED_PARAMS, this))
+        if (!this._hub.claim(OWNED_PARAMS$1, this, this._destroyRef, FEATURE_LABEL$1))
             return of(false);
         this._connection = {
             table: table,
@@ -24182,12 +24218,6 @@ class QdTableSortRouterConnectorService {
         this.subscribeToStoreChanges();
         return this._activatedRouteChecked$;
     }
-    disconnectSortFromRouter(table) {
-        if (this._connection?.table !== table)
-            return;
-        this.tearDownConnection();
-        this.hub.release(OWNED_PARAMS, this);
-    }
     tearDownConnection() {
         this._connection = undefined;
         this._hasInitialUrlBeenSet = false;
@@ -24198,12 +24228,14 @@ class QdTableSortRouterConnectorService {
     subscribeToUrlChanges() {
         const { tableStoreService } = this._connection;
         let isFirstEmit = true;
-        this._readSubscription = this.hub.navigationSettled$
-            .pipe(switchMap(() => this.hub.queryParams()), map(queryParams => (typeof queryParams[SORT_PARAM_NAME] === 'string' ? queryParams[SORT_PARAM_NAME] : '')), distinctUntilChanged(), map(raw => this.parseRawSortValue(raw)))
-            .subscribe(segments => {
+        this._readSubscription = this._hub.navigationSettled$
+            .pipe(switchMap(() => this._hub.queryParams()), map(queryParams => (typeof queryParams[SORT_PARAM_NAME] === 'string' ? queryParams[SORT_PARAM_NAME] : '')), distinctUntilChanged(), map(raw => this.parseRawSortValue(raw)), withLatestFrom(tableStoreService.tableSort$()))
+            .subscribe(([segments, currentSort]) => {
             if (segments.length === 1) {
                 const [{ column, direction }] = segments;
-                tableStoreService.setSort(column, direction);
+                if (!this.isSameAsCurrentSort(currentSort, column, direction)) {
+                    tableStoreService.setSort(column, direction);
+                }
             }
             if (isFirstEmit) {
                 this._activatedRouteCheckedSubject.next(true);
@@ -24211,19 +24243,25 @@ class QdTableSortRouterConnectorService {
             }
         });
     }
+    isSameAsCurrentSort(currentSort, column, direction) {
+        if (!currentSort)
+            return false;
+        const active = currentSort.filter(entry => entry.direction !== QdSortDirection.NONE);
+        return active.length === 1 && active[0].column === column && active[0].direction === direction;
+    }
     subscribeToStoreChanges() {
         const { tableStoreService } = this._connection;
         this._writeSubscription = tableStoreService
             .tableSort$()
-            .pipe(filter((sort) => Array.isArray(sort)), map(sort => this.serializeSort(sort)), distinctUntilChanged(), switchMap(serialized => this.hub.navigationSettled$.pipe(take(1), map(() => serialized))))
+            .pipe(filter((sort) => Array.isArray(sort)), map(sort => this.serializeSort(sort)), distinctUntilChanged(), switchMap(serialized => this._hub.navigationSettled$.pipe(take(1), map(() => serialized))))
             .subscribe(serialized => this.writeUrl(serialized));
     }
     writeUrl(serialized) {
         const replaceUrl = !this._hasInitialUrlBeenSet;
         this._hasInitialUrlBeenSet = true;
-        if (this.hub.snapshotQueryParam(SORT_PARAM_NAME) === serialized)
+        if (this._hub.snapshotQueryParam(SORT_PARAM_NAME) === serialized)
             return;
-        this.hub.write({ [SORT_PARAM_NAME]: serialized }, replaceUrl);
+        this._hub.write({ [SORT_PARAM_NAME]: serialized }, { replaceUrl });
     }
     shouldConnect(table) {
         const sortConfig = table.config.sort;
@@ -25039,7 +25077,6 @@ class QdTableComponent {
         }
     }
     ngOnDestroy() {
-        this.sortRouterConnector.disconnectSortFromRouter(this);
         this.tableStoreService.updateTableStateRecentSecondaryAction(undefined);
         this.tableStoreService.resetConnectorStates();
         this.fillingWidthService.destroy();
@@ -29174,6 +29211,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['data-test-id']
             }] } });
 
+const TAB_PARAM_NAME = 'tab';
+const OWNED_PARAMS = [TAB_PARAM_NAME];
+const FEATURE_LABEL = { name: 'Page Tabs', plural: 'page tabs' };
+/**
+ * Per-view adapter that syncs `QdPageTabsComponent` selection with the URL `?tab=` query
+ * param via `QdRouterQueryParamHubService`. Reads on activation and selects the matching
+ * tab (with fallback for unknown/disabled names), writes on `selectionChange`. Coordination,
+ * ownership, and write batching are delegated to the hub — see its JSDoc for details.
+ * Behavior contracts live in `page-tabs-router-connector.service.spec.ts` and
+ * `router-query-param-hub.integration.cy.ts`.
+ *
+ * Note: this is the only connector that writes synchronously without gating on
+ * `navigationSettled$`. Required for the deep-link case where `ngAfterViewInit` fires
+ * before the initial NavigationEnd is replayed — gating there would hang the click-driven
+ * write pipeline (see commit 57f0a271a).
+ *
+ * Internal invariant: when the requested tab is unknown or disabled, `selectFallbackTab()`
+ * writes the URL explicitly. CdkStepper does not emit `selectionChange` if the fallback is
+ * already the selected step, so without the explicit write deep-links like `?tab=phantom`
+ * would leave a stale param in the URL.
+ */
+class QdPageTabsRouterConnectorService {
+    _hub = inject(QdRouterQueryParamHubService);
+    _destroyRef = inject(DestroyRef);
+    _connectedComponent;
+    _readSubscription;
+    _writeSubscription;
+    _activatedRouteCheckedSubject = new ReplaySubject(1);
+    _activatedRouteChecked$ = this._activatedRouteCheckedSubject.asObservable();
+    _hasInitialUrlBeenSet = false;
+    constructor() {
+        this._destroyRef.onDestroy(() => this.tearDownConnection());
+    }
+    connectTabsWithRouter(component) {
+        if (component.config?.connectWithRouter !== true || !this._hub.isAvailable())
+            return of(false);
+        if (this._connectedComponent === component)
+            return this._activatedRouteChecked$;
+        if (!this._hub.claim(OWNED_PARAMS, this, this._destroyRef, FEATURE_LABEL))
+            return of(false);
+        this._connectedComponent = component;
+        this._hasInitialUrlBeenSet = false;
+        this._activatedRouteCheckedSubject = new ReplaySubject(1);
+        this._activatedRouteChecked$ = this._activatedRouteCheckedSubject.asObservable();
+        this.subscribeToTabChanges();
+        this.subscribeToUrlChanges();
+        return this._activatedRouteChecked$;
+    }
+    tearDownConnection() {
+        this._connectedComponent = undefined;
+        this._hasInitialUrlBeenSet = false;
+        this._readSubscription?.unsubscribe();
+        this._writeSubscription?.unsubscribe();
+    }
+    subscribeToUrlChanges() {
+        let isFirstEmit = true;
+        this._readSubscription = this._hub.navigationSettled$
+            .pipe(switchMap(() => this._hub.queryParams()), map(queryParams => queryParams[TAB_PARAM_NAME]), distinctUntilChanged(), takeUntilDestroyed(this._destroyRef))
+            .subscribe(rawTabName => {
+            this.applyTabFromUrl(rawTabName);
+            if (isFirstEmit) {
+                this._activatedRouteCheckedSubject.next(true);
+                isFirstEmit = false;
+            }
+        });
+    }
+    subscribeToTabChanges() {
+        const component = this._connectedComponent;
+        this._writeSubscription = component.selectionChange
+            .pipe(map(event => event.selectedStep?.config?.name), takeUntilDestroyed(this._destroyRef))
+            .subscribe(name => this.writeUrl(name));
+    }
+    writeUrl(name) {
+        if (!name) {
+            console.warn('Quadrel Framework | QdPageTabs - "connectWithRouter" is active, however the selected <qd-page-tab> has no "name" attribute.');
+            return;
+        }
+        const replaceUrl = !this._hasInitialUrlBeenSet;
+        this._hasInitialUrlBeenSet = true;
+        if (this._hub.snapshotQueryParam(TAB_PARAM_NAME) === name)
+            return;
+        this._hub.write({ [TAB_PARAM_NAME]: name }, { replaceUrl });
+    }
+    applyTabFromUrl(rawTabName) {
+        const component = this._connectedComponent;
+        if (!component)
+            return;
+        if (typeof rawTabName !== 'string' || rawTabName.length === 0) {
+            this.selectFallbackTab();
+            return;
+        }
+        const matchingTab = this.findTabByName(rawTabName);
+        if (matchingTab && !matchingTab.config?.isDisabled) {
+            matchingTab.select();
+            return;
+        }
+        if (matchingTab) {
+            console.warn('Quadrel Framework | QdPageTabs - Tab "' + rawTabName + '" is disabled and cannot be deep-linked.');
+        }
+        else {
+            console.warn('Quadrel Framework | QdPageTabs - No tab found with name "' + rawTabName + '".');
+        }
+        this.selectFallbackTab();
+    }
+    selectFallbackTab() {
+        const component = this._connectedComponent;
+        if (!component)
+            return;
+        const fallbackIndex = this.findFallbackTabIndex();
+        if (fallbackIndex === undefined)
+            return;
+        const fallback = component.tabs.get(fallbackIndex);
+        if (!fallback)
+            return;
+        fallback.select();
+        if (component.config)
+            component.config.selectedIndex = fallbackIndex;
+        this.writeUrl(fallback.config?.name);
+    }
+    findTabByName(name) {
+        return this._connectedComponent?.tabs.find(tab => tab.config?.name === name);
+    }
+    findFallbackTabIndex() {
+        const component = this._connectedComponent;
+        if (!component)
+            return undefined;
+        const configuredIndex = component.config?.selectedIndex;
+        if (typeof configuredIndex === 'number') {
+            const candidate = component.tabs.get(configuredIndex);
+            if (candidate && !candidate.config.isDisabled)
+                return configuredIndex;
+        }
+        const tabsArray = component.tabs.toArray();
+        const firstNonDisabledIndex = tabsArray.findIndex(tab => !tab.config.isDisabled);
+        return firstNonDisabledIndex >= 0 ? firstNonDisabledIndex : undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsRouterConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsRouterConnectorService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsRouterConnectorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 /**
  * **QdPageTabsComponent** provides a non-linear tabbed navigation system within a **QdPage**.
  * It enables switching between different sections while maintaining form validation and controlled navigation.
@@ -29211,13 +29391,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  *
  * #### **Submit Button Configuration**
  *
- * The submit button at the bottom of the tab system can be configured via `QdPageTabsConfig`:
+ * The submit button at the bottom of the tab system can be configured via `QdPageTabsConfig.submitButton`:
  *
  * - **i18n**: The translated label for the submit button.
  * - **handler**: A callback function that receives form data upon submission.
  * - **isDisabled**: Controls whether the button should be active or not.
  * - **isHidden**: Determines whether the button is visible.
- * - **connectWithRouter**: If set to true, the tab will be connected to the URL and will be bookmarked. It is obligatory to set the `name` attribute for each tab.
+ *
+ * #### **Router Integration**
+ *
+ * - **connectWithRouter**: If set to true, the active tab is synced with the URL via the `?tab=<name>` query param and becomes bookmarkable. Each `<qd-page-tab>` then needs a unique `name`.
  *
  * #### **Usage**
  *
@@ -29336,8 +29519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class QdPageTabsComponent extends CdkStepper {
     footerService = inject(QdPageFooterService, { optional: true });
     pageStoreService = inject(QdPageStoreService);
-    router = inject(Router);
-    route = inject(ActivatedRoute, { optional: true });
+    routerConnector = inject(QdPageTabsRouterConnectorService);
     /**
      * Configuration of QdPageTabs.
      */
@@ -29396,8 +29578,11 @@ class QdPageTabsComponent extends CdkStepper {
     ngAfterViewInit() {
         super.ngAfterViewInit();
         setTimeout(() => {
+            if (this.config?.connectWithRouter) {
+                this.configureBookmarkableTabs();
+                return;
+            }
             this.initializeTabSelection();
-            this.configureBookmarkableTabs();
         });
     }
     initializeTabSelection() {
@@ -29408,54 +29593,7 @@ class QdPageTabsComponent extends CdkStepper {
         this.selectFirstNotDisabledTab();
     }
     configureBookmarkableTabs() {
-        if (this.config?.connectWithRouter) {
-            this.initializeTabFromUrl();
-            this.initializeFirstTabSelection();
-        }
-    }
-    /**
-     * Initializes the tab selection based on the URL parameter 'tab'.
-     * @private
-     */
-    initializeTabFromUrl() {
-        this.route.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(params => {
-            const tabNameFromParams = params['tab'];
-            const pageTab = this.tabs.find(tab => tab.config?.name === tabNameFromParams);
-            if (pageTab) {
-                pageTab.select();
-            }
-            else {
-                console.warn('Quadrel Framework | QdPageTabs - No tab found with name "' + tabNameFromParams + '".');
-                this.selectFirstNotDisabledTab(true);
-            }
-        });
-    }
-    /**
-     * If the user navigates to a page with a tab selected, the tab will be selected automatically in {@link initializeTabFromUrl()} method.
-     * If the user navigates to a page without a tab selected, the first active tab will be selected.
-     * @private
-     */
-    initializeFirstTabSelection() {
-        this.route.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(params => {
-            const tabNameFromParams = params['tab'];
-            if (!tabNameFromParams) {
-                const selectedIndex = this.config.selectedIndex;
-                const pageTab = this.tabs.find((tab, tabIndex) => tabIndex === selectedIndex);
-                if (pageTab && pageTab?.config.name) {
-                    this.router.navigate([], {
-                        relativeTo: this.route,
-                        queryParams: { tab: pageTab.config.name },
-                        queryParamsHandling: 'merge'
-                    });
-                }
-                else {
-                    console.warn('Quadrel Framework | QdPageTabs - "connectedWithRouter" is active, however <qd-page-tab> has no "name" attribute.');
-                }
-            }
-        });
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
+        this.routerConnector.connectTabsWithRouter(this).pipe(takeUntilDestroyed(this.destroyRef)).subscribe();
     }
     isTabSelectable(index) {
         const tab = this.tabs.get(index);
@@ -29463,22 +29601,14 @@ class QdPageTabsComponent extends CdkStepper {
     }
     /**
      * Selects the first tab that is not disabled.
-     * @param updateUrl if true, the URL will be updated to reflect the selected tab.
      */
-    selectFirstNotDisabledTab(updateUrl = false) {
+    selectFirstNotDisabledTab() {
         this.tabs.some((tab, tabIndex) => {
             if (!tab.config.isDisabled) {
                 if (this.config) {
                     this.config.selectedIndex = tabIndex;
                 }
                 this.selectedIndex = tabIndex;
-                if (updateUrl && this.config?.connectWithRouter && tab.config?.name) {
-                    this.router.navigate([], {
-                        relativeTo: this.route,
-                        queryParams: { tab: tab.config.name },
-                        queryParamsHandling: 'merge'
-                    });
-                }
                 return true;
             }
             else {
@@ -29495,13 +29625,6 @@ class QdPageTabsComponent extends CdkStepper {
         if (tab.config?.isDisabled)
             return;
         tab.select();
-        if (this.config?.connectWithRouter && tab.config?.name) {
-            this.router.navigate([], {
-                relativeTo: this.route,
-                queryParams: { tab: tab.config.name },
-                queryParamsHandling: 'merge'
-            });
-        }
     }
     isSubmitButtonShown() {
         return this.config?.submitButton?.isHidden !== true && !this.footerService;
@@ -29526,11 +29649,11 @@ class QdPageTabsComponent extends CdkStepper {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabsComponent, isStandalone: true, selector: "qd-page-tabs", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { tabSelection: "tabSelection" }, host: { properties: { "class.standalone": "!footerService" }, classAttribute: "qd-tabs" }, providers: [{ provide: CdkStepper, useExisting: QdPageTabsComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"qd-tabs-items-container\" [ngClass]=\"{ scrollable: config?.scrollabe }\">\n  <qd-page-tab-header\n    *ngFor=\"let tab of tabs; let i = index\"\n    (click)=\"selectTab(tab)\"\n    [id]=\"_getTabLabelId(i)\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, tab.state)\"\n    [label]=\"tab.config.label.i18n | translate\"\n    [counters]=\"tab.config.counters\"\n    [isSelected]=\"selectedIndex === i\"\n    [isDisabled]=\"tab.config?.isDisabled\"\n    [data-test-id]=\"testId + '-header' + '-' + i\"\n  >\n  </qd-page-tab-header>\n</div>\n\n<div class=\"tabs-content\">\n  <ng-container *ngIf=\"!selected?.config?.isDisabled\" [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-tabs-action-area\" *ngIf=\"isSubmitButtonShown()\">\n  <button qdButton (click)=\"save()\" [disabled]=\"isSubmitButtonDisabled()\" [data-test-id]=\"testId + '-submit'\">\n    {{ config?.submitButton?.i18n || \"i18n.qd.tabs.button.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-tabs-items-container{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .9375rem}@media (max-width: 599.98px){:host .qd-tabs-items-container{padding:0 .9375rem}}@media (max-width: 1279.98px){:host .qd-tabs-items-container.scrollable{flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}}:host .tabs-content{flex:1 1 auto}:host .qd-tabs-action-area{display:flex;width:100%;height:50px;justify-content:flex-end}:host .qd-tabs-action-area button{margin-right:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdPageTabHeaderComponent, selector: "qd-page-tab-header", inputs: ["state", "label", "counters", "index", "isSelected", "isDisabled", "data-test-id"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: QdButtonModule }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabsComponent, isStandalone: true, selector: "qd-page-tabs", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { tabSelection: "tabSelection" }, host: { properties: { "class.standalone": "!footerService" }, classAttribute: "qd-tabs" }, providers: [{ provide: CdkStepper, useExisting: QdPageTabsComponent }, QdPageTabsRouterConnectorService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"qd-tabs-items-container\" [ngClass]=\"{ scrollable: config?.scrollabe }\">\n  <qd-page-tab-header\n    *ngFor=\"let tab of tabs; let i = index\"\n    (click)=\"selectTab(tab)\"\n    [id]=\"_getTabLabelId(i)\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, tab.state)\"\n    [label]=\"tab.config.label.i18n | translate\"\n    [counters]=\"tab.config.counters\"\n    [isSelected]=\"selectedIndex === i\"\n    [isDisabled]=\"tab.config?.isDisabled\"\n    [data-test-id]=\"testId + '-header' + '-' + i\"\n  >\n  </qd-page-tab-header>\n</div>\n\n<div class=\"tabs-content\">\n  <ng-container *ngIf=\"!selected?.config?.isDisabled\" [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-tabs-action-area\" *ngIf=\"isSubmitButtonShown()\">\n  <button qdButton (click)=\"save()\" [disabled]=\"isSubmitButtonDisabled()\" [data-test-id]=\"testId + '-submit'\">\n    {{ config?.submitButton?.i18n || \"i18n.qd.tabs.button.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-tabs-items-container{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .9375rem}@media (max-width: 599.98px){:host .qd-tabs-items-container{padding:0 .9375rem}}@media (max-width: 1279.98px){:host .qd-tabs-items-container.scrollable{flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}}:host .tabs-content{flex:1 1 auto}:host .qd-tabs-action-area{display:flex;width:100%;height:50px;justify-content:flex-end}:host .qd-tabs-action-area button{margin-right:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdPageTabHeaderComponent, selector: "qd-page-tab-header", inputs: ["state", "label", "counters", "index", "isSelected", "isDisabled", "data-test-id"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: QdButtonModule }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-page-tabs', providers: [{ provide: CdkStepper, useExisting: QdPageTabsComponent }], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'qd-tabs', '[class.standalone]': '!footerService' }, standalone: true, imports: [NgFor, NgIf, NgTemplateOutlet, QdPageTabHeaderComponent, TranslateModule, QdButtonModule, CommonModule], template: "<div class=\"qd-tabs-items-container\" [ngClass]=\"{ scrollable: config?.scrollabe }\">\n  <qd-page-tab-header\n    *ngFor=\"let tab of tabs; let i = index\"\n    (click)=\"selectTab(tab)\"\n    [id]=\"_getTabLabelId(i)\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, tab.state)\"\n    [label]=\"tab.config.label.i18n | translate\"\n    [counters]=\"tab.config.counters\"\n    [isSelected]=\"selectedIndex === i\"\n    [isDisabled]=\"tab.config?.isDisabled\"\n    [data-test-id]=\"testId + '-header' + '-' + i\"\n  >\n  </qd-page-tab-header>\n</div>\n\n<div class=\"tabs-content\">\n  <ng-container *ngIf=\"!selected?.config?.isDisabled\" [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-tabs-action-area\" *ngIf=\"isSubmitButtonShown()\">\n  <button qdButton (click)=\"save()\" [disabled]=\"isSubmitButtonDisabled()\" [data-test-id]=\"testId + '-submit'\">\n    {{ config?.submitButton?.i18n || \"i18n.qd.tabs.button.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-tabs-items-container{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .9375rem}@media (max-width: 599.98px){:host .qd-tabs-items-container{padding:0 .9375rem}}@media (max-width: 1279.98px){:host .qd-tabs-items-container.scrollable{flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}}:host .tabs-content{flex:1 1 auto}:host .qd-tabs-action-area{display:flex;width:100%;height:50px;justify-content:flex-end}:host .qd-tabs-action-area button{margin-right:1.25rem}\n"] }]
+            args: [{ selector: 'qd-page-tabs', providers: [{ provide: CdkStepper, useExisting: QdPageTabsComponent }, QdPageTabsRouterConnectorService], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'qd-tabs', '[class.standalone]': '!footerService' }, standalone: true, imports: [NgFor, NgIf, NgTemplateOutlet, QdPageTabHeaderComponent, TranslateModule, QdButtonModule, CommonModule], template: "<div class=\"qd-tabs-items-container\" [ngClass]=\"{ scrollable: config?.scrollabe }\">\n  <qd-page-tab-header\n    *ngFor=\"let tab of tabs; let i = index\"\n    (click)=\"selectTab(tab)\"\n    [id]=\"_getTabLabelId(i)\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, tab.state)\"\n    [label]=\"tab.config.label.i18n | translate\"\n    [counters]=\"tab.config.counters\"\n    [isSelected]=\"selectedIndex === i\"\n    [isDisabled]=\"tab.config?.isDisabled\"\n    [data-test-id]=\"testId + '-header' + '-' + i\"\n  >\n  </qd-page-tab-header>\n</div>\n\n<div class=\"tabs-content\">\n  <ng-container *ngIf=\"!selected?.config?.isDisabled\" [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-tabs-action-area\" *ngIf=\"isSubmitButtonShown()\">\n  <button qdButton (click)=\"save()\" [disabled]=\"isSubmitButtonDisabled()\" [data-test-id]=\"testId + '-submit'\">\n    {{ config?.submitButton?.i18n || \"i18n.qd.tabs.button.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-tabs-items-container{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .9375rem}@media (max-width: 599.98px){:host .qd-tabs-items-container{padding:0 .9375rem}}@media (max-width: 1279.98px){:host .qd-tabs-items-container.scrollable{flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}}:host .tabs-content{flex:1 1 auto}:host .qd-tabs-action-area{display:flex;width:100%;height:50px;justify-content:flex-end}:host .qd-tabs-action-area button{margin-right:1.25rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], testId: [{
@@ -31925,7 +32048,7 @@ class QdShellHeaderComponent {
         const navigationService = this.navigationService;
         const shellLeftService = this.shellLeftService;
         const shellRightService = this.shellRightService;
-        this.backLinkDisplayed$ = navigationService.getPreviousHref$().pipe(withLatestFrom(navigationService.getRouteComponentInstance$()), switchMap(([previousHref, routeComponentInstance]) => {
+        this.backLinkDisplayed$ = navigationService.getPreviousHref$().pipe(withLatestFrom$1(navigationService.getRouteComponentInstance$()), switchMap(([previousHref, routeComponentInstance]) => {
             if (typeof previousHref === 'function')
                 previousHref = previousHref(routeComponentInstance);
             return isObservable(previousHref) ? previousHref.pipe(take(1)) : of(previousHref);