@quadrel-enterprise-ui/framework 20.11.2-beta.150.1 → 20.12.0

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

@@ -3,13 +3,13 @@ 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, combineLatestWith, forkJoin, delayWhen, withLatestFrom, async } from 'rxjs';
+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 { v4 } from 'uuid';
 import * as i3 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import * as i2$1 from '@angular/router';
-import { Router, ActivationEnd, RouterModule, ActivatedRoute, NavigationError, NavigationCancel, NavigationEnd, NavigationStart } from '@angular/router';
+import { Router, ActivationEnd, RouterModule, ActivatedRoute, NavigationEnd, NavigationCancel, NavigationError, NavigationStart } from '@angular/router';
 import { HttpStatusCode, HttpEventType, HttpClient, HttpParams, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as _ from 'lodash';
 import { upperCase, lowerFirst, isEqual, range, get as get$1, cloneDeep, union, isNumber as isNumber$1 } from 'lodash';
@@ -18,8 +18,8 @@ import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, UntypedFormArray, U
 import { ComponentPortal } from '@angular/cdk/portal';
 import { OverlayPositionBuilder, Overlay } from '@angular/cdk/overlay';
 import isNumber from 'lodash/isNumber';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { EventSourcePolyfill } from 'event-source-polyfill';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i3$1 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
@@ -1604,24 +1604,6 @@ const updateHtmlLang = (lang) => {
     const htmlNode = document.documentElement;
     htmlNode.setAttribute('lang', lang);
 };
-const SERVICE_NAV_LOCALE_DEFAULTS = {
-    DE: 'de-CH',
-    IT: 'it-CH',
-    FR: 'fr-CH',
-    EN: 'en-GB'
-};
-const determineLocale = (serviceNavLanguage, browserLocales) => {
-    const browserLocale = browserLocales?.[0] ?? navigator.language;
-    if (!serviceNavLanguage) {
-        const browserLocaleUpper = browserLocale.toUpperCase();
-        return SERVICE_NAV_LOCALE_DEFAULTS[browserLocaleUpper] ?? browserLocale;
-    }
-    const serviceNavLangUpper = serviceNavLanguage.toUpperCase();
-    const browserLanguage = browserLocale.split('-')[0].toUpperCase();
-    if (browserLanguage === serviceNavLangUpper)
-        return browserLocale;
-    return SERVICE_NAV_LOCALE_DEFAULTS[serviceNavLangUpper] ?? browserLocale;
-};
 
 const constantCase = (str) => upperCase(str).replace(/ /g, '_');
 
@@ -6654,8 +6636,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
-const QD_SAFE_BOTTOM_OFFSET = new InjectionToken('QD_SAFE_BOTTOM_OFFSET');
-
 let QdFileSizePipe$1 = class QdFileSizePipe {
     translate = inject(TranslateService, { optional: true });
     transform(bytes) {
@@ -6707,8 +6687,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
-const QD_POPOVER_TOP_FIRST = new InjectionToken('QD_POPOVER_TOP_FIRST');
-
 class QdProjectionGuardComponent {
     elementRef = inject(ElementRef);
     isDisabled = false;
@@ -6750,360 +6728,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
-class QdLocaleService {
-    _serviceNavLanguage$ = new BehaviorSubject(null);
-    locale$ = this._serviceNavLanguage$.pipe(map(serviceNavLanguage => determineLocale(serviceNavLanguage, navigator.languages)));
-    setServiceNavigationLanguage(language) {
-        this._serviceNavLanguage$.next(language);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdLocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdLocaleService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdLocaleService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class QdNumberInputService {
-    _locale;
-    _decimalSeparator;
-    _groupSeparator;
-    localeService = inject(QdLocaleService, { optional: true });
-    destroyRef = inject(DestroyRef);
-    ambiguityHintKeyDot = 'i18n.qd.input.number.ambiguousHint.dot';
-    ambiguityHintKeyComma = 'i18n.qd.input.number.ambiguousHint.comma';
-    invalidCharactersErrorKeyComma = 'i18n.qd.input.number.invalidCharacters.comma';
-    invalidCharactersErrorKeyDot = 'i18n.qd.input.number.invalidCharacters.dot';
-    get invalidCharactersErrorKey() {
-        return this._decimalSeparator === ',' ? this.invalidCharactersErrorKeyComma : this.invalidCharactersErrorKeyDot;
-    }
-    get decimalSeparator() {
-        return this._decimalSeparator;
-    }
-    get groupSeparator() {
-        return this._groupSeparator;
-    }
-    constructor() {
-        if (this.localeService) {
-            this.localeService.locale$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(locale => {
-                this.detectSeparatorsForLocale(locale);
-            });
-        }
-        else {
-            this.detectSeparators();
-        }
-    }
-    detectSeparators() {
-        const locale = navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;
-        this.detectSeparatorsForLocale(locale);
-    }
-    isValidNumber(value) {
-        if (!value)
-            return false;
-        const escaped = this._decimalSeparator.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        return new RegExp(`^-?\\d+(${escaped}\\d+)?$`).test(value);
-    }
-    detectSeparatorsForLocale(locale) {
-        this._locale = locale;
-        const parts = new Intl.NumberFormat(locale).formatToParts(1234567.89);
-        this._decimalSeparator = parts.find(p => p.type === 'decimal')?.value ?? '.';
-        this._groupSeparator = parts.find(p => p.type === 'group')?.value ?? ',';
-    }
-    filterValue(value) {
-        let result = '';
-        let hasDecimal = false;
-        for (let i = 0; i < value.length; i++) {
-            const char = value[i];
-            if (char >= '0' && char <= '9') {
-                result += char;
-            }
-            else if (char === this._decimalSeparator && !hasDecimal) {
-                result += char;
-                hasDecimal = true;
-            }
-            else if (char === '-' && i === 0) {
-                result += char;
-            }
-        }
-        return result;
-    }
-    parseValue(value) {
-        if (!value)
-            return value;
-        const normalized = value.split(this._groupSeparator).join('').replace(this._decimalSeparator, '.');
-        const parsed = parseFloat(normalized);
-        return isNaN(parsed) ? value : parsed;
-    }
-    isAmbiguous(value) {
-        if (typeof value !== 'string' || !value)
-            return false;
-        return /^-?[1-9]\d*[.,]\d{3}$/.test(value);
-    }
-    getAmbiguityHintKey(value) {
-        if (typeof value === 'string' && value.includes('.'))
-            return this.ambiguityHintKeyDot;
-        return this.ambiguityHintKeyComma;
-    }
-    formatNumberForViewonly(value) {
-        if (value == null || value === '')
-            return '';
-        const str = String(value);
-        const parsed = typeof value === 'number' ? value : this.parseValue(str);
-        if (typeof parsed !== 'number')
-            return str;
-        return new Intl.NumberFormat(this._locale).format(parsed);
-    }
-    formatValueForDisplay(value) {
-        if (value == null || value === '')
-            return '';
-        const str = String(value);
-        if (this._decimalSeparator === '.')
-            return str;
-        return str.replace('.', this._decimalSeparator);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNumberInputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNumberInputService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNumberInputService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-/**
- * Manages a server-sent event (SSE) connection with automatic reconnection and heartbeat monitoring.
- *
- * All service endpoints — including SSE — must be protected. The connection is therefore secured
- * via Quadrel Auth (Bearer token) by default. When the access token refreshes, the connection is
- * transparently rebuilt. Only disable authentication for endpoints that are explicitly public.
- *
- * ### Reconnection behavior
- *
- * - **Heartbeat timeout**: If no HEARTBEAT event arrives within the expected interval, the service reconnects.
- * - **401 Unauthorized**: Triggers exponential-backoff reconnection (max 5 attempts, capped at 30 s).
- * - **Other errors**: Reconnects immediately when the EventSource transitions to CLOSED.
- *
- * Existing `observe()` subscriptions are preserved across reconnections.
- *
- * ### Usage
- *
- * ```ts
- * pushEventsService.connect('https://api.example.com/events');
- *
- * const sub = pushEventsService.observe('RESOURCE_UPDATED').subscribe(event => handleEvent(event));
- *
- * sub.unsubscribe();
- * pushEventsService.disconnect();
- * ```
- */
-class QdPushEventsService {
-    authenticationService = inject('QdAuthenticationService', { optional: true });
-    _eventSource;
-    _subjects = new Map();
-    _listeners = [];
-    _accessTokenSub;
-    _options;
-    _heartbeatTimeout;
-    _heartbeatGracePeriod = 100;
-    _initialHeartbeatTimeout = 10000;
-    _isUnauthorized = false;
-    _reconnectAttempts = 0;
-    _maxReconnectAttempts = 5;
-    _backoffTimer;
-    /**
-     * Opens an SSE connection to the given URL.
-     *
-     * With authentication enabled (default), the service subscribes to the `accessToken$` observable
-     * provided by Quadrel Auth and rebuilds the connection whenever the token changes.
-     * No-op if already connected.
-     *
-     * @param url The SSE endpoint URL.
-     * @param options Set `{ disableAuthentication: true }` only for explicitly public endpoints.
-     *
-     * @example
-     * ```ts
-     * // Authenticated (default — requires Quadrel Auth)
-     * pushEventsService.connect('https://api.example.com/events');
-     *
-     * // Without authentication (only for public endpoints)
-     * pushEventsService.connect('https://api.example.com/public-events', { disableAuthentication: true });
-     * ```
-     */
-    connect(url, options) {
-        if (this.isConnectedOrConnecting())
-            return;
-        this._options = { url, options };
-        if (options?.disableAuthentication) {
-            this.openEventSource(url);
-        }
-        else {
-            this.connectWithAuth(url);
-        }
-    }
-    /**
-     * Closes the EventSource connection, clears all event listeners, and cancels pending backoff timers.
-     * Subscription subjects are preserved so that a subsequent `connect()` re-attaches them.
-     *
-     * @example
-     * ```ts
-     * pushEventsService.disconnect();
-     * // Subjects survive — a new connect() will re-attach existing observe() subscriptions.
-     * ```
-     */
-    disconnect() {
-        if (!this._eventSource) {
-            this.logWarn('No active connection to disconnect.');
-            return;
-        }
-        if (this._accessTokenSub) {
-            this._accessTokenSub.unsubscribe();
-            this._accessTokenSub = undefined;
-        }
-        if (this._heartbeatTimeout)
-            clearTimeout(this._heartbeatTimeout);
-        if (this._backoffTimer) {
-            clearTimeout(this._backoffTimer);
-            this._backoffTimer = undefined;
-        }
-        this.removeAllListeners();
-        this._eventSource.close();
-    }
-    /**
-     * Returns an Observable that emits whenever the server sends an event of the given type.
-     *
-     * Lazily registers an EventSource listener on first call per event name.
-     * Returns `NEVER` and logs an error if no connection exists.
-     *
-     * @param eventName The SSE event type to listen for.
-     *
-     * @example
-     * ```ts
-     * pushEventsService.observe('RESOURCE_UPDATED').subscribe(event => handleUpdate(event));
-     * ```
-     */
-    observe(eventName) {
-        if (!this._eventSource) {
-            this.logWarn('Cannot observe events without a connection. Call connect() first.');
-            return NEVER;
-        }
-        if (!this._subjects.has(eventName)) {
-            this._subjects.set(eventName, new Subject());
-            this.addListener(eventName, (event) => this._subjects.get(eventName).next(event));
-        }
-        return this._subjects.get(eventName).asObservable();
-    }
-    /**
-     * Removes all event listeners and clears all subscription subjects. The connection stays open.
-     * Use this to reset all subscriptions without disconnecting the SSE stream.
-     *
-     * @example
-     * ```ts
-     * pushEventsService.unobserveAll();
-     * // Connection remains open, but no events are forwarded until observe() is called again.
-     * ```
-     */
-    unobserveAll() {
-        this.removeAllListeners();
-        this._subjects.clear();
-    }
-    /** Returns `true` when the EventSource is in state OPEN or CONNECTING. */
-    isConnectedOrConnecting() {
-        return (this._eventSource &&
-            (this._eventSource.readyState === EventSource.OPEN || this._eventSource.readyState === EventSource.CONNECTING));
-    }
-    connectWithAuth(url) {
-        if (!this.authenticationService) {
-            this.logError("Can't connect to SSE without Quadrel Auth as the connection has to be secured. Please install Quadrel Auth or disable authentication when connecting.");
-            return;
-        }
-        this._accessTokenSub = this.authenticationService.accessToken$.subscribe((token) => {
-            this.openEventSource(url, { headers: { Authorization: `Bearer ${token}` } });
-        });
-    }
-    openEventSource(url, options = {}) {
-        this._isUnauthorized = false;
-        if (this._eventSource && this._eventSource.readyState !== EventSource.CLOSED)
-            this._eventSource.close();
-        this._eventSource = new EventSourcePolyfill(url, options);
-        this._eventSource.onerror = (err) => this.handleError(err);
-        this._eventSource.addEventListener('HEARTBEAT', (message) => this.handleHeartbeat(message));
-        if (this._heartbeatTimeout)
-            clearTimeout(this._heartbeatTimeout);
-        this._heartbeatTimeout = setTimeout(() => this.reconnect(), this._initialHeartbeatTimeout);
-        if (this._backoffTimer) {
-            clearTimeout(this._backoffTimer);
-            this._backoffTimer = undefined;
-        }
-        this._listeners = [];
-        this.reattachListeners();
-    }
-    reconnect() {
-        if (this.isConnectedOrConnecting() || this._isUnauthorized)
-            return;
-        this.disconnect();
-        this.connect(this._options.url, this._options.options);
-    }
-    handleError(err) {
-        const status = err?.status || err?.target?.status;
-        if (status === 401) {
-            this._isUnauthorized = true;
-            this.logError('SSE connection unauthorized (401):', err);
-            this._eventSource.close();
-            this.scheduleRetry();
-            return;
-        }
-        if (this._eventSource.readyState === EventSource.CLOSED)
-            this.reconnect();
-        this.logError('SSE connection error:', err);
-    }
-    scheduleRetry() {
-        if (this._reconnectAttempts >= this._maxReconnectAttempts) {
-            this.logError(`SSE reconnect aborted after ${this._maxReconnectAttempts} failed attempts.`);
-            return;
-        }
-        const delay = Math.min(1000 * Math.pow(2, this._reconnectAttempts), 30000);
-        this._reconnectAttempts++;
-        this._backoffTimer = setTimeout(() => {
-            this._isUnauthorized = false;
-            this.reconnect();
-        }, delay);
-    }
-    handleHeartbeat(message) {
-        if (this._isUnauthorized)
-            return;
-        if (this._heartbeatTimeout)
-            clearTimeout(this._heartbeatTimeout);
-        this._reconnectAttempts = 0;
-        const interval = JSON.parse(message.data).interval;
-        this._heartbeatTimeout = setTimeout(() => this.reconnect(), interval + this._heartbeatGracePeriod);
-    }
-    addListener(eventName, callback) {
-        this._eventSource.addEventListener(eventName, callback);
-        this._listeners.push([eventName, callback]);
-    }
-    reattachListeners() {
-        this._subjects.forEach((subject, eventName) => this.addListener(eventName, (event) => subject.next(event)));
-    }
-    removeAllListeners() {
-        if (!this._eventSource)
-            return;
-        this._listeners.forEach(([eventName, callback]) => this._eventSource.removeEventListener(eventName, callback));
-        this._listeners = [];
-    }
-    logWarn(message) {
-        console.warn(`Quadrel Framework | QdPushEvents - ${message}`);
-    }
-    logError(message, err) {
-        console.error(`Quadrel Framework | QdPushEvents - ${message}`, err);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPushEventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPushEventsService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPushEventsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 var breakpoints$1 = {
 	xs: 320,
 	sm: 600,
@@ -7242,6 +6866,526 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+class QdVisuallyHiddenDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdVisuallyHiddenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdVisuallyHiddenDirective, isStandalone: false, selector: "[qdVisuallyHidden]", host: { classAttribute: "qd-visually-hidden" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdVisuallyHiddenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[qdVisuallyHidden]',
+                    host: { class: 'qd-visually-hidden' },
+                    standalone: false
+                }]
+        }] });
+
+/**
+ * Manages a server-sent event (SSE) connection with automatic reconnection and heartbeat monitoring.
+ *
+ * All service endpoints — including SSE — must be protected. The connection is therefore secured
+ * via Quadrel Auth (Bearer token) by default. When the access token refreshes, the connection is
+ * transparently rebuilt. Only disable authentication for endpoints that are explicitly public.
+ *
+ * ### Reconnection behavior
+ *
+ * - **Heartbeat timeout**: If no HEARTBEAT event arrives within the expected interval, the service reconnects.
+ * - **401 Unauthorized**: Triggers exponential-backoff reconnection (max 5 attempts, capped at 30 s).
+ * - **Other errors**: Reconnects immediately when the EventSource transitions to CLOSED.
+ *
+ * Existing `observe()` subscriptions are preserved across reconnections.
+ *
+ * ### Usage
+ *
+ * ```ts
+ * pushEventsService.connect('https://api.example.com/events');
+ *
+ * const sub = pushEventsService.observe('RESOURCE_UPDATED').subscribe(event => handleEvent(event));
+ *
+ * sub.unsubscribe();
+ * pushEventsService.disconnect();
+ * ```
+ */
+class QdPushEventsService {
+    authenticationService = inject('QdAuthenticationService', { optional: true });
+    _eventSource;
+    _subjects = new Map();
+    _listeners = [];
+    _accessTokenSub;
+    _options;
+    _heartbeatTimeout;
+    _heartbeatGracePeriod = 100;
+    _initialHeartbeatTimeout = 10000;
+    _isUnauthorized = false;
+    _reconnectAttempts = 0;
+    _maxReconnectAttempts = 5;
+    _backoffTimer;
+    /**
+     * Opens an SSE connection to the given URL.
+     *
+     * With authentication enabled (default), the service subscribes to the `accessToken$` observable
+     * provided by Quadrel Auth and rebuilds the connection whenever the token changes.
+     * No-op if already connected.
+     *
+     * @param url The SSE endpoint URL.
+     * @param options Set `{ disableAuthentication: true }` only for explicitly public endpoints.
+     *
+     * @example
+     * ```ts
+     * // Authenticated (default — requires Quadrel Auth)
+     * pushEventsService.connect('https://api.example.com/events');
+     *
+     * // Without authentication (only for public endpoints)
+     * pushEventsService.connect('https://api.example.com/public-events', { disableAuthentication: true });
+     * ```
+     */
+    connect(url, options) {
+        if (this.isConnectedOrConnecting())
+            return;
+        this._options = { url, options };
+        if (options?.disableAuthentication) {
+            this.openEventSource(url);
+        }
+        else {
+            this.connectWithAuth(url);
+        }
+    }
+    /**
+     * Closes the EventSource connection, clears all event listeners, and cancels pending backoff timers.
+     * Subscription subjects are preserved so that a subsequent `connect()` re-attaches them.
+     *
+     * @example
+     * ```ts
+     * pushEventsService.disconnect();
+     * // Subjects survive — a new connect() will re-attach existing observe() subscriptions.
+     * ```
+     */
+    disconnect() {
+        if (!this._eventSource) {
+            this.logWarn('No active connection to disconnect.');
+            return;
+        }
+        if (this._accessTokenSub) {
+            this._accessTokenSub.unsubscribe();
+            this._accessTokenSub = undefined;
+        }
+        if (this._heartbeatTimeout)
+            clearTimeout(this._heartbeatTimeout);
+        if (this._backoffTimer) {
+            clearTimeout(this._backoffTimer);
+            this._backoffTimer = undefined;
+        }
+        this.removeAllListeners();
+        this._eventSource.close();
+    }
+    /**
+     * Returns an Observable that emits whenever the server sends an event of the given type.
+     *
+     * Lazily registers an EventSource listener on first call per event name.
+     * Returns `NEVER` and logs an error if no connection exists.
+     *
+     * @param eventName The SSE event type to listen for.
+     *
+     * @example
+     * ```ts
+     * pushEventsService.observe('RESOURCE_UPDATED').subscribe(event => handleUpdate(event));
+     * ```
+     */
+    observe(eventName) {
+        if (!this._eventSource) {
+            this.logWarn('Cannot observe events without a connection. Call connect() first.');
+            return NEVER;
+        }
+        if (!this._subjects.has(eventName)) {
+            this._subjects.set(eventName, new Subject());
+            this.addListener(eventName, (event) => this._subjects.get(eventName).next(event));
+        }
+        return this._subjects.get(eventName).asObservable();
+    }
+    /**
+     * Removes all event listeners and clears all subscription subjects. The connection stays open.
+     * Use this to reset all subscriptions without disconnecting the SSE stream.
+     *
+     * @example
+     * ```ts
+     * pushEventsService.unobserveAll();
+     * // Connection remains open, but no events are forwarded until observe() is called again.
+     * ```
+     */
+    unobserveAll() {
+        this.removeAllListeners();
+        this._subjects.clear();
+    }
+    /** Returns `true` when the EventSource is in state OPEN or CONNECTING. */
+    isConnectedOrConnecting() {
+        return (this._eventSource &&
+            (this._eventSource.readyState === EventSource.OPEN || this._eventSource.readyState === EventSource.CONNECTING));
+    }
+    connectWithAuth(url) {
+        if (!this.authenticationService) {
+            this.logError("Can't connect to SSE without Quadrel Auth as the connection has to be secured. Please install Quadrel Auth or disable authentication when connecting.");
+            return;
+        }
+        this._accessTokenSub = this.authenticationService.accessToken$.subscribe((token) => {
+            this.openEventSource(url, { headers: { Authorization: `Bearer ${token}` } });
+        });
+    }
+    openEventSource(url, options = {}) {
+        this._isUnauthorized = false;
+        if (this._eventSource && this._eventSource.readyState !== EventSource.CLOSED)
+            this._eventSource.close();
+        this._eventSource = new EventSourcePolyfill(url, options);
+        this._eventSource.onerror = (err) => this.handleError(err);
+        this._eventSource.addEventListener('HEARTBEAT', (message) => this.handleHeartbeat(message));
+        if (this._heartbeatTimeout)
+            clearTimeout(this._heartbeatTimeout);
+        this._heartbeatTimeout = setTimeout(() => this.reconnect(), this._initialHeartbeatTimeout);
+        if (this._backoffTimer) {
+            clearTimeout(this._backoffTimer);
+            this._backoffTimer = undefined;
+        }
+        this._listeners = [];
+        this.reattachListeners();
+    }
+    reconnect() {
+        if (this.isConnectedOrConnecting() || this._isUnauthorized)
+            return;
+        this.disconnect();
+        this.connect(this._options.url, this._options.options);
+    }
+    handleError(err) {
+        const status = err?.status || err?.target?.status;
+        if (status === 401) {
+            this._isUnauthorized = true;
+            this.logError('SSE connection unauthorized (401):', err);
+            this._eventSource.close();
+            this.scheduleRetry();
+            return;
+        }
+        if (this._eventSource.readyState === EventSource.CLOSED)
+            this.reconnect();
+        this.logError('SSE connection error:', err);
+    }
+    scheduleRetry() {
+        if (this._reconnectAttempts >= this._maxReconnectAttempts) {
+            this.logError(`SSE reconnect aborted after ${this._maxReconnectAttempts} failed attempts.`);
+            return;
+        }
+        const delay = Math.min(1000 * Math.pow(2, this._reconnectAttempts), 30000);
+        this._reconnectAttempts++;
+        this._backoffTimer = setTimeout(() => {
+            this._isUnauthorized = false;
+            this.reconnect();
+        }, delay);
+    }
+    handleHeartbeat(message) {
+        if (this._isUnauthorized)
+            return;
+        if (this._heartbeatTimeout)
+            clearTimeout(this._heartbeatTimeout);
+        this._reconnectAttempts = 0;
+        const interval = JSON.parse(message.data).interval;
+        this._heartbeatTimeout = setTimeout(() => this.reconnect(), interval + this._heartbeatGracePeriod);
+    }
+    addListener(eventName, callback) {
+        this._eventSource.addEventListener(eventName, callback);
+        this._listeners.push([eventName, callback]);
+    }
+    reattachListeners() {
+        this._subjects.forEach((subject, eventName) => this.addListener(eventName, (event) => subject.next(event)));
+    }
+    removeAllListeners() {
+        if (!this._eventSource)
+            return;
+        this._listeners.forEach(([eventName, callback]) => this._eventSource.removeEventListener(eventName, callback));
+        this._listeners = [];
+    }
+    logWarn(message) {
+        console.warn(`Quadrel Framework | QdPushEvents - ${message}`);
+    }
+    logError(message, err) {
+        console.error(`Quadrel Framework | QdPushEvents - ${message}`, err);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPushEventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPushEventsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPushEventsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * 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:
+ *
+ * 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.
+ * 2. **History pollution**: a single user action that changes two features (e.g. clicking a sort
+ *    header resets the page index) ends up as two history entries. Browser-back only undoes one.
+ *
+ * `QdRouterQueryParamHubService` is the single funnel through which features run their query-param
+ * reads and writes. It does three jobs:
+ *
+ * - **Ownership** — `claim()` / `release()` enforce one writer per param key, app-wide.
+ * - **Shared reads** — `queryParams()` and `snapshotQueryParam()` expose the route state without
+ *   each feature needing its own `ActivatedRoute` subscription.
+ * - **Coordinated writes** — `write()` buffers param updates within a microtask and serializes
+ *   navigations via a Promise chain, so two writes in the same JS turn become one history entry
+ *   and concurrent writes never race.
+ *
+ * The hub is feature-agnostic. Per-feature adapters (e.g. `QdTableSortRouterConnectorService`)
+ * own their parsing/serialization and delegate the URL plumbing to the hub.
+ *
+ * ### Usage
+ *
+ * ```ts
+ * @Injectable()
+ * export class FilterRouterAdapterService {
+ *   private readonly _hub = inject(QdRouterQueryParamHubService);
+ *   private readonly _destroyRef = inject(DestroyRef);
+ *
+ *   connect(state$: Observable<FilterState>, dispatch: (state: FilterState) => void): void {
+ *     if (!this._hub.isAvailable()) return;
+ *     if (!this._hub.claim(['filter'], this, this._destroyRef)) return;
+ *
+ *     this._hub
+ *       .queryParams()
+ *       .pipe(takeUntilDestroyed(this._destroyRef))
+ *       .subscribe(params => dispatch(parseFilter(params['filter'])));
+ *
+ *     state$
+ *       .pipe(takeUntilDestroyed(this._destroyRef))
+ *       .subscribe(state => this._hub.write({ filter: serializeFilter(state) }, false));
+ *   }
+ * }
+ * ```
+ */
+class QdRouterQueryParamHubService {
+    /**
+     * Replays whenever the router has finished a navigation (`NavigationEnd`, `NavigationCancel`
+     * or `NavigationError` — every event that ends a navigation, regardless of outcome).
+     * Adapters that want to delay a write until any in-flight navigation has settled can take(1)
+     * on this stream before calling `write()`.
+     *
+     * Late subscribers receive the most recent settling event immediately, so an adapter that
+     * mounts after the initial route navigation can observe the route as already-settled. The
+     * first replayed tick may represent that initial route navigation rather than a user-driven
+     * settling event — adapters that need to distinguish "the route just changed" should compare
+     * `ActivatedRoute.snapshot` themselves.
+     *
+     * **When the hub is unavailable** (no `Router` / `ActivatedRoute` in the injector — see
+     * `isAvailable()`) this observable never emits. Adapters that compose `navigationSettled$`
+     * via operators like `switchMap` or `concat` must guard with `isAvailable()` first, otherwise
+     * their pipelines hang silently.
+     */
+    navigationSettled$;
+    _router = inject(Router, { optional: true });
+    _activatedRoute = inject(ActivatedRoute, { optional: true });
+    _destroyRef = inject(DestroyRef);
+    _ownership = new Map();
+    _destroyClaims = new WeakMap();
+    _navigationSettledSubject = new ReplaySubject(1);
+    _pendingParams = {};
+    _pendingReplaceUrl = false;
+    _flushScheduled = false;
+    _navigationChain = Promise.resolve();
+    constructor() {
+        this.navigationSettled$ = this._navigationSettledSubject.asObservable();
+        if (!this._router || !this._activatedRoute)
+            return;
+        this.replayCurrentRouterStateForLateSubscribers(this._router);
+        this.forwardSettlingRouterEventsToNavigationSettled(this._router);
+    }
+    /**
+     * Returns whether the hub can sync at all. False when the consuming injector has neither a
+     * `Router` nor an `ActivatedRoute` available — for example in unit tests that omit
+     * `RouterTestingModule`. Adapters should bail out early when this returns false.
+     */
+    isAvailable() {
+        return !!this._router && !!this._activatedRoute;
+    }
+    /**
+     * Reserves exclusive write access to the given query-param keys for `owner`.
+     *
+     * The same `owner` may claim the same keys repeatedly without conflict — claims are idempotent
+     * per owner. A different owner attempting to claim an already-claimed key fails: the hub logs
+     * a `console.error` listing every contested key and returns `false`. The original owner keeps
+     * the keys until it calls `release()` (or until its `DestroyRef` fires, if a `destroyRef` is
+     * passed here).
+     *
+     * Atomicity: when the call fails, no keys are claimed, even partially. The hub checks every
+     * requested key against the registry before mutating anything.
+     *
+     * **Pass `destroyRef` to opt into auto-release.** Without it, the hub keeps a strong reference
+     * to `owner` until `release()` is called manually — a destroyed adapter that forgets to release
+     * pins itself in the registry. Passing the adapter's `DestroyRef` registers an `onDestroy`
+     * callback that releases exactly the keys claimed via this call (and any later claims that
+     * reuse the same `destroyRef`), which is the recommended path.
+     *
+     * Each `destroyRef` releases only the keys it owns. If the same owner uses two different
+     * `DestroyRef`s in two `claim()` calls, each fires independently and only releases its own
+     * keys — keys claimed via the still-alive `destroyRef` stay reserved.
+     *
+     * Re-claiming with the same `destroyRef` appends to the same destroy listener — no duplicate
+     * listeners are registered, even when the second claim names a different owner. Each appended
+     * entry carries its own owner, so when the `destroyRef` fires the hub releases each entry's
+     * keys against that entry's owner. An empty `keys` array is a no-op even when `destroyRef`
+     * is provided: no listener is attached, so the hub does not pin a destroy hook that would
+     * release nothing.
+     *
+     * @param keys The query-param keys this adapter wants to own (e.g. `['sort']`, `['page', 'size']`).
+     * @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.
+     * @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) {
+        const conflicts = [];
+        for (const key of keys) {
+            const existing = this._ownership.get(key);
+            if (existing && existing !== owner)
+                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.`);
+            return false;
+        }
+        keys.forEach(key => this._ownership.set(key, owner));
+        if (destroyRef && keys.length > 0)
+            this.registerAutoRelease(owner, keys, destroyRef);
+        return true;
+    }
+    /**
+     * 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.
+     *
+     * Adapters typically release in their `DestroyRef.onDestroy` callback so a destroyed component
+     * frees its keys for the next adapter that mounts.
+     */
+    release(keys, owner) {
+        keys.forEach(key => {
+            if (this._ownership.get(key) === owner)
+                this._ownership.delete(key);
+        });
+    }
+    /**
+     * Reactive view of `ActivatedRoute.queryParams`. Returns the empty observable if the hub is
+     * not available (no Router/ActivatedRoute). Adapters subscribe here instead of injecting
+     * `ActivatedRoute` themselves so the hub stays the single read funnel.
+     *
+     * The observable is hot — late subscribers receive the current params immediately.
+     */
+    queryParams() {
+        return this._activatedRoute?.queryParams ?? of({});
+    }
+    /**
+     * Synchronous read of a single query param from the latest `ActivatedRoute` snapshot.
+     * Adapters use this to detect "URL already matches the desired state" and skip a redundant
+     * `write()`.
+     *
+     * @returns The param value, or `undefined` if the param is missing or the hub is unavailable.
+     */
+    snapshotQueryParam(key) {
+        return this._activatedRoute?.snapshot.queryParamMap.get(key) ?? undefined;
+    }
+    /**
+     * Schedules a query-param update.
+     *
+     * Two coordination guarantees:
+     *
+     * - **Microtask batching** — every `write()` issued in the same JavaScript turn is merged into
+     *   a single `router.navigate(...)` call. A user action that changes two features at once
+     *   (e.g. sort change resets the page) becomes one history entry, not two. Note: batching is
+     *   per JS turn, not per logical user action — writes that fall into the next microtask after
+     *   a settled navigation produce a separate history entry, even when they belong to the same
+     *   conceptual gesture.
+     * - **Serialized navigations** — flushes are chained on a Promise so a second flush only fires
+     *   after the previous `router.navigate` has settled. Concurrent navigates can therefore not
+     *   cancel each other. A rejected `router.navigate` (cancelled by a guard, redirected, or
+     *   failed) does not stop the chain — the next pending flush still runs. Rejections are not
+     *   logged here; consumers that need routing diagnostics should subscribe to `router.events`.
+     *
+     * Adapters are still responsible for skipping no-op writes (compare the desired value against
+     * `snapshotQueryParam()` first), since the hub does not deduplicate identical values.
+     *
+     * Setting a param value to `undefined` removes the param from the URL via Angular Router's
+     * `merge` behavior. Other params not mentioned in the call are preserved.
+     *
+     * @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.
+     */
+    write(params, replaceUrl) {
+        const router = this._router;
+        const activatedRoute = this._activatedRoute;
+        if (!router || !activatedRoute)
+            return;
+        if (Object.keys(params).length === 0)
+            return;
+        Object.assign(this._pendingParams, params);
+        this._pendingReplaceUrl = this._pendingReplaceUrl || replaceUrl;
+        if (this._flushScheduled)
+            return;
+        this._flushScheduled = true;
+        Promise.resolve().then(() => this.flush(router, activatedRoute));
+    }
+    replayCurrentRouterStateForLateSubscribers(router) {
+        if (router.navigated)
+            this._navigationSettledSubject.next();
+    }
+    forwardSettlingRouterEventsToNavigationSettled(router) {
+        router.events
+            .pipe(filter(event => event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => this._navigationSettledSubject.next());
+    }
+    registerAutoRelease(owner, keys, destroyRef) {
+        const existingClaims = this._destroyClaims.get(destroyRef);
+        if (existingClaims) {
+            existingClaims.push({ owner, keys });
+            return;
+        }
+        const claims = [{ owner, keys }];
+        this._destroyClaims.set(destroyRef, claims);
+        destroyRef.onDestroy(() => {
+            for (const claim of claims)
+                this.release(claim.keys, claim.owner);
+        });
+    }
+    flush(router, activatedRoute) {
+        const params = this._pendingParams;
+        const replaceUrl = this._pendingReplaceUrl;
+        this._pendingParams = {};
+        this._pendingReplaceUrl = false;
+        this._flushScheduled = false;
+        const exec = () => router.navigate([], {
+            relativeTo: activatedRoute,
+            queryParams: params,
+            queryParamsHandling: 'merge',
+            replaceUrl
+        });
+        this._navigationChain = this._navigationChain.catch(() => undefined).then(exec);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdRouterQueryParamHubService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdRouterQueryParamHubService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdRouterQueryParamHubService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 const MAX_TOOLTIP_CHARACTER = 512;
 const TOOLTIP_POSITIONS = [
     { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
@@ -7347,18 +7491,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }] } });
 
-class QdVisuallyHiddenDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdVisuallyHiddenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdVisuallyHiddenDirective, isStandalone: false, selector: "[qdVisuallyHidden]", host: { classAttribute: "qd-visually-hidden" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdVisuallyHiddenDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[qdVisuallyHidden]',
-                    host: { class: 'qd-visually-hidden' },
-                    standalone: false
-                }]
-        }] });
+const QD_SAFE_BOTTOM_OFFSET = new InjectionToken('QD_SAFE_BOTTOM_OFFSET');
+
+const QD_POPOVER_TOP_FIRST = new InjectionToken('QD_POPOVER_TOP_FIRST');
 
 class QdCoreModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -8436,11 +8571,11 @@ class QdFormHintComponent {
         this.actionEmitterService.hintEventEmitterSubject.next(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFormHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFormHintComponent, isStandalone: false, selector: "qd-form-hint", inputs: { hint: "hint", control: "control", hasError: "hasError", hintAction: "hintAction", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-form-hint" }, ngImport: i0, template: "<div class=\"qd-form-hint\" [attr.data-test-id]=\"testId + '-hint'\">\n  <ng-container *ngIf=\"!hasError && !hintAction\">\n    {{ hint | translate }}\n  </ng-container>\n  <ng-container *ngIf=\"!hasError && hintAction\">\n    <div class=\"qd-form-hint--hint-action\" (click)=\"handleClick()\">\n      {{ hint | translate }}\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"qd-form-hint--error\" [attr.data-test-id]=\"testId + '-error'\">\n  <ng-container *ngIf=\"hasError\">\n    <qd-form-error [control]=\"control\"></qd-form-error>\n  </ng-container>\n</div>\n", styles: [":host{display:block;min-height:.75rem;color:#757575;font-size:.75rem;font-weight:300;line-height:.75rem}:host .qd-form-hint--error{color:#c70023}.qd-form-disabled :host{color:#979797}.qd-input-ambiguous :host{color:#069}:host .qd-form-hint--hint-action{color:#069;cursor:pointer}:host .qd-form-hint--hint-action:hover,:host .qd-form-hint--hint-action:active,:host .qd-form-hint--hint-action:focus{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdFormErrorComponent, selector: "qd-form-error", inputs: ["control"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFormHintComponent, isStandalone: false, selector: "qd-form-hint", inputs: { hint: "hint", control: "control", hasError: "hasError", hintAction: "hintAction", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-form-hint" }, ngImport: i0, template: "<div class=\"qd-form-hint\" [attr.data-test-id]=\"testId + '-hint'\">\n  <ng-container *ngIf=\"!hasError && !hintAction\">\n    {{ hint | translate }}\n  </ng-container>\n  <ng-container *ngIf=\"!hasError && hintAction\">\n    <div class=\"qd-form-hint--hint-action\" (click)=\"handleClick()\">\n      {{ hint | translate }}\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"qd-form-hint--error\" [attr.data-test-id]=\"testId + '-error'\">\n  <ng-container *ngIf=\"hasError\">\n    <qd-form-error [control]=\"control\"></qd-form-error>\n  </ng-container>\n</div>\n", styles: [":host{display:block;min-height:.75rem;color:#757575;font-size:.75rem;font-weight:300;line-height:.75rem}:host .qd-form-hint--error{color:#c70023}.qd-form-disabled :host{color:#979797}:host .qd-form-hint--hint-action{color:#069;cursor:pointer}:host .qd-form-hint--hint-action:hover,:host .qd-form-hint--hint-action:active,:host .qd-form-hint--hint-action:focus{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdFormErrorComponent, selector: "qd-form-error", inputs: ["control"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFormHintComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-form-hint', host: { class: 'qd-form-hint' }, standalone: false, template: "<div class=\"qd-form-hint\" [attr.data-test-id]=\"testId + '-hint'\">\n  <ng-container *ngIf=\"!hasError && !hintAction\">\n    {{ hint | translate }}\n  </ng-container>\n  <ng-container *ngIf=\"!hasError && hintAction\">\n    <div class=\"qd-form-hint--hint-action\" (click)=\"handleClick()\">\n      {{ hint | translate }}\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"qd-form-hint--error\" [attr.data-test-id]=\"testId + '-error'\">\n  <ng-container *ngIf=\"hasError\">\n    <qd-form-error [control]=\"control\"></qd-form-error>\n  </ng-container>\n</div>\n", styles: [":host{display:block;min-height:.75rem;color:#757575;font-size:.75rem;font-weight:300;line-height:.75rem}:host .qd-form-hint--error{color:#c70023}.qd-form-disabled :host{color:#979797}.qd-input-ambiguous :host{color:#069}:host .qd-form-hint--hint-action{color:#069;cursor:pointer}:host .qd-form-hint--hint-action:hover,:host .qd-form-hint--hint-action:active,:host .qd-form-hint--hint-action:focus{text-decoration:underline}\n"] }]
+            args: [{ selector: 'qd-form-hint', host: { class: 'qd-form-hint' }, standalone: false, template: "<div class=\"qd-form-hint\" [attr.data-test-id]=\"testId + '-hint'\">\n  <ng-container *ngIf=\"!hasError && !hintAction\">\n    {{ hint | translate }}\n  </ng-container>\n  <ng-container *ngIf=\"!hasError && hintAction\">\n    <div class=\"qd-form-hint--hint-action\" (click)=\"handleClick()\">\n      {{ hint | translate }}\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"qd-form-hint--error\" [attr.data-test-id]=\"testId + '-error'\">\n  <ng-container *ngIf=\"hasError\">\n    <qd-form-error [control]=\"control\"></qd-form-error>\n  </ng-container>\n</div>\n", styles: [":host{display:block;min-height:.75rem;color:#757575;font-size:.75rem;font-weight:300;line-height:.75rem}:host .qd-form-hint--error{color:#c70023}.qd-form-disabled :host{color:#979797}:host .qd-form-hint--hint-action{color:#069;cursor:pointer}:host .qd-form-hint--hint-action:hover,:host .qd-form-hint--hint-action:active,:host .qd-form-hint--hint-action:focus{text-decoration:underline}\n"] }]
         }], propDecorators: { hint: [{
                 type: Input
             }], control: [{
@@ -11065,7 +11200,6 @@ class QdInputComponent {
     resolverRegistry = inject(QdFormOptionsResolverRegistry);
     controlContainer = inject(ControlContainer, { optional: true, host: true, skipSelf: true });
     eventBrokerService = inject(QdEventBrokerService, { optional: true });
-    numberInputService = inject(QdNumberInputService);
     /**
      * The form control name can be assigned here if you want to use Reactive Forms.
      */
@@ -11140,13 +11274,9 @@ class QdInputComponent {
     get isErrorFromOutside() {
         return this.isError;
     }
-    get isAmbiguousState() {
-        return this.isAmbiguousInput;
-    }
     inputElement;
     inputType;
     inputMode;
-    htmlInputType;
     placeholder;
     label;
     hint;
@@ -11158,7 +11288,6 @@ class QdInputComponent {
     control;
     _optionsResolver;
     _subs = new Subscription();
-    _isUserTyped = false;
     _onChange = () => { };
     _onTouch = () => { };
     get hasOnlyUnitsError() {
@@ -11167,15 +11296,6 @@ class QdInputComponent {
     get hasUnits() {
         return this.config?.units?.length > 0;
     }
-    get ambiguityHintKey() {
-        return this.numberInputService.getAmbiguityHintKey(this._value.value);
-    }
-    get isAmbiguousInput() {
-        return (this.inputType === 'number' &&
-            !this.hasError &&
-            this._isUserTyped &&
-            this.numberInputService.isAmbiguous(this._value.value));
-    }
     get numberOfCharacters() {
         if (!this._value.value)
             return 0;
@@ -11192,10 +11312,7 @@ class QdInputComponent {
         return this.control.getMaxLengthOrUndefined();
     }
     get valueAsList() {
-        const displayValue = this.inputType === 'number'
-            ? this.numberInputService.formatNumberForViewonly(this._value.value)
-            : this._value.value;
-        return [`${displayValue}${this._value.unit ? ' ' + this._value.unit : ''}`];
+        return [`${this._value.value}${this._value.unit ? ' ' + this._value.unit : ''}`];
     }
     ngOnInit() {
         this.initializeOptionsResolver();
@@ -11208,11 +11325,6 @@ class QdInputComponent {
                     console.warn('Quadrel Framework | QdInput - Please use the QdFormControl instead of the Angular FormControl.');
             }
         }
-        if (this.config.inputType === 'number' &&
-            this.config.inputMode !== 'numeric' &&
-            this.config.inputMode !== 'decimal' &&
-            this.config.inputMode != null)
-            console.error('QD-UI | QdInputComponent - Please use either decimal or numeric when using QdInputType number');
         this.writeValue(this.value ?? getValue(this.config));
         this.normalizeInitialControlValueIfNeeded();
         this._subs.add(this.actionEmitterService.hintEventEmitter$.subscribe(() => this.clickHint.emit()));
@@ -11243,10 +11355,6 @@ class QdInputComponent {
     writeValue(value) {
         this._value = getValueWithUnit(value, this.config);
         this._displayValue = String(this._value.value ?? '');
-        this._isUserTyped = false;
-        if (this.inputType === 'number') {
-            this._value = { ...this._value, value: this.numberInputService.formatValueForDisplay(this._value.value) };
-        }
     }
     setDisabledState(disabled) {
         this.disabled = disabled;
@@ -11258,36 +11366,6 @@ class QdInputComponent {
         if (input?.validity?.badInput)
             return;
         const value = event.target.value;
-        if (this.inputType === 'number' && value && !this.numberInputService.isValidNumber(value)) {
-            this.control?.setErrors({
-                ...this.control.errors,
-                invalidCharacters: this.numberInputService.invalidCharactersErrorKey
-            });
-            return;
-        }
-        if (this.inputType === 'number' && value) {
-            const valueWithoutGroups = value.split(this.numberInputService.groupSeparator).join('');
-            const filtered = this.numberInputService.filterValue(valueWithoutGroups);
-            const hasInvalidChars = filtered !== valueWithoutGroups;
-            if (hasInvalidChars) {
-                this._value = { ...this._value, value: filtered };
-                if (this.control) {
-                    this.control.setErrors({
-                        ...this.control.errors,
-                        invalidCharacters: this.numberInputService.invalidCharactersErrorKey
-                    });
-                }
-                this._isUserTyped = true;
-                this._onTouch();
-                this.emitValue();
-                return;
-            }
-            if (this.control?.errors?.['invalidCharacters']) {
-                const remainingErrors = Object.fromEntries(Object.entries(this.control.errors).filter(([key]) => key !== 'invalidCharacters'));
-                this.control.setErrors(Object.keys(remainingErrors).length ? remainingErrors : null);
-            }
-        }
-        this._isUserTyped = true;
         this._value = { ...this._value, value };
         this.emitValue();
         this._onTouch();
@@ -11344,15 +11422,6 @@ class QdInputComponent {
     updateConfig() {
         this.inputType = getInputType(this.config);
         this.inputMode = getInputMode(this.config);
-        if (this.inputType === 'number') {
-            this.htmlInputType = 'text';
-            if (!this.inputMode) {
-                this.inputMode = this.inputMode ?? 'decimal';
-            }
-        }
-        else {
-            this.htmlInputType = this.inputType;
-        }
         this.placeholder = getPlaceholder(this.config);
         this.label = getLabel(this.config);
         this.hint = getHint(this.config);
@@ -11371,15 +11440,13 @@ class QdInputComponent {
         this._optionsResolver = this.resolverRegistry.findResolver();
     }
     emitValue() {
-        const emittable = this.inputType === 'number' ? this.numberInputService.parseValue(this._value.value) : this._value.value;
         if (this.hasUnits) {
-            const emittableWithUnit = { ...this._value, value: emittable };
-            this.valueChange.emit(emittableWithUnit);
-            this._onChange(emittableWithUnit);
+            this.valueChange.emit(this._value);
+            this._onChange(this._value);
         }
         else {
-            this.valueChange.emit(emittable);
-            this._onChange(emittable);
+            this.valueChange.emit(this._value.value);
+            this._onChange(this._value.value);
         }
     }
     initOpModeSubscription() {
@@ -11402,12 +11469,9 @@ class QdInputComponent {
         if (!isEqual(modelValue, target))
             this.control.setValue(target, { emitEvent: false });
         this._value = normalized;
-        if (this.inputType === 'number') {
-            this._value = { ...this._value, value: this.numberInputService.formatValueForDisplay(this._value.value) };
-        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputComponent, isStandalone: false, selector: "qd-input", inputs: { formControlName: "formControlName", value: "value", config: "config", isError: "isError", testId: ["data-test-id", "testId"] }, outputs: { valueChange: "valueChange", enterClick: "enterClick", clickClear: "clickClear", clickHint: "clickHint", clickReadonly: "clickReadonly", clickViewonly: "clickViewonly" }, host: { properties: { "class.qd-input-readonly": "this.readonly", "class.qd-input--readonly-action": "this.readonlyAction", "class.qd-input-viewonly": "this.viewonly", "class.qd-input--viewonly-action": "this.viewonlyAction", "class.qd-form-hint-action": "this.hintAction", "class.qd-input-hint-action": "this.hintAction", "class.qd-form-disabled": "this.disabled", "class.qd-input-disabled": "this.disabled", "class.qd-input-focus": "this.isInputFocused", "class.qd-form-error": "this.hasError", "class.qd-input-error": "this.hasError", "class.qd-input-error-from-outside": "this.isErrorFromOutside", "class.qd-input-ambiguous": "this.isAmbiguousState" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputComponent, isStandalone: false, selector: "qd-input", inputs: { formControlName: "formControlName", value: "value", config: "config", isError: "isError", testId: ["data-test-id", "testId"] }, outputs: { valueChange: "valueChange", enterClick: "enterClick", clickClear: "clickClear", clickHint: "clickHint", clickReadonly: "clickReadonly", clickViewonly: "clickViewonly" }, host: { properties: { "class.qd-input-readonly": "this.readonly", "class.qd-input--readonly-action": "this.readonlyAction", "class.qd-input-viewonly": "this.viewonly", "class.qd-input--viewonly-action": "this.viewonlyAction", "class.qd-form-hint-action": "this.hintAction", "class.qd-input-hint-action": "this.hintAction", "class.qd-form-disabled": "this.disabled", "class.qd-input-disabled": "this.disabled", "class.qd-input-focus": "this.isInputFocused", "class.qd-form-error": "this.hasError", "class.qd-input-error": "this.hasError", "class.qd-input-error-from-outside": "this.isErrorFromOutside" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: QdInputComponent,
@@ -11415,14 +11479,13 @@ class QdInputComponent {
             },
             QdFormsActionEmitterService,
             QdFormOptionsResolverRegistry,
-            QdNumberInputService,
             // TODO: Remove when removing derived directive
             QdPopoverSizingService,
             {
                 provide: QD_FOCUSABLE_TOKEN,
                 useExisting: QdInputComponent
             }
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"htmlInputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"isAmbiguousInput\" class=\"qd-input-ambiguous-icon\" icon=\"circleInfoSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-ambiguous .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(0,102,153)}:host.qd-input-ambiguous .qd-input-input:hover,:host.qd-input-ambiguous .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153)}:host.qd-input-ambiguous.qd-input-focus .qd-input-input{border-color:#069}:host.qd-input-ambiguous .qd-input-suffix ::ng-deep .qd-input-ambiguous-icon{padding-right:.5rem;color:#069}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputUnitsComponent, selector: "qd-input-units", inputs: ["config", "unit"], outputs: ["unitChange", "opened", "closed"] }, { kind: "directive", type: QdInputOptionsDirective, selector: "[qdInputOptions]", inputs: ["value", "config"], outputs: ["enterClick", "optionSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"inputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputUnitsComponent, selector: "qd-input-units", inputs: ["config", "unit"], outputs: ["unitChange", "opened", "closed"] }, { kind: "directive", type: QdInputOptionsDirective, selector: "[qdInputOptions]", inputs: ["value", "config"], outputs: ["enterClick", "optionSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputComponent, decorators: [{
             type: Component,
@@ -11434,14 +11497,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         },
                         QdFormsActionEmitterService,
                         QdFormOptionsResolverRegistry,
-                        QdNumberInputService,
                         // TODO: Remove when removing derived directive
                         QdPopoverSizingService,
                         {
                             provide: QD_FOCUSABLE_TOKEN,
                             useExisting: QdInputComponent
                         }
-                    ], standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n  <qd-form-hint *ngIf=\"isAmbiguousInput\" [hint]=\"ambiguityHintKey\" [data-test-id]=\"testId\"></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"htmlInputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"isAmbiguousInput\" class=\"qd-input-ambiguous-icon\" icon=\"circleInfoSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-ambiguous .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(0,102,153)}:host.qd-input-ambiguous .qd-input-input:hover,:host.qd-input-ambiguous .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153)}:host.qd-input-ambiguous.qd-input-focus .qd-input-input{border-color:#069}:host.qd-input-ambiguous .qd-input-suffix ::ng-deep .qd-input-ambiguous-icon{padding-right:.5rem;color:#069}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"] }]
+                    ], standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"inputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"] }]
         }], propDecorators: { formControlName: [{
                 type: Input
             }], value: [{
@@ -11501,9 +11563,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }], isErrorFromOutside: [{
                 type: HostBinding,
                 args: ['class.qd-input-error-from-outside']
-            }], isAmbiguousState: [{
-                type: HostBinding,
-                args: ['class.qd-input-ambiguous']
             }], inputElement: [{
                 type: ViewChild,
                 args: ['input']
@@ -22932,6 +22991,9 @@ class QdTableStoreSelectorService {
             return sort.find(entry => entry.column === column)?.direction ?? QdSortDirection.NONE;
         });
     }
+    tableSort() {
+        return createSelector(this.selectTables, tables => this.getTable(tables)?.sort);
+    }
     selectIsLoading() {
         return createSelector(this.selectTables, tables => {
             const { requestState } = this.getTable(tables) || {};
@@ -23118,6 +23180,9 @@ class QdTableStoreService {
     columnSortDirection$(column) {
         return this.store.select(this.tableStoreSelectorService.columnSortDirection(column));
     }
+    tableSort$() {
+        return this.store.select(this.tableStoreSelectorService.tableSort());
+    }
     selectIsLoading$() {
         return this.store.select(this.tableStoreSelectorService.selectIsLoading());
     }
@@ -23588,6 +23653,130 @@ var QdPaginatorDirection;
     QdPaginatorDirection[QdPaginatorDirection["LastPage"] = 3] = "LastPage";
 })(QdPaginatorDirection || (QdPaginatorDirection = {}));
 
+const PAGE_PARAM_NAME = 'page';
+const SIZE_PARAM_NAME = 'size';
+const OWNED_PARAMS$1 = [PAGE_PARAM_NAME, SIZE_PARAM_NAME];
+const SIZE_SANITY_MAX = 1000;
+class QdTablePaginationRouterConnectorService {
+    hub = inject(QdRouterQueryParamHubService);
+    destroyRef = inject(DestroyRef);
+    _connection;
+    _readSubscription;
+    _writeSubscription;
+    _activatedRouteCheckedSubject = new ReplaySubject(1);
+    _activatedRouteChecked$ = this._activatedRouteCheckedSubject.asObservable();
+    _hasInitialUrlBeenSet = false;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.tearDownConnection();
+            this.hub.release(OWNED_PARAMS$1, this);
+        });
+    }
+    connectPaginationWithRouter(paginator, tableStoreService) {
+        if (!paginator.shouldConnectWithRouter() || !this.hub.isAvailable())
+            return of(false);
+        if (!this.hub.claim(OWNED_PARAMS$1, this))
+            return of(false);
+        this._connection = {
+            paginator: paginator,
+            tableStoreService: tableStoreService
+        };
+        this._hasInitialUrlBeenSet = false;
+        this._activatedRouteCheckedSubject = new ReplaySubject(1);
+        this._activatedRouteChecked$ = this._activatedRouteCheckedSubject.asObservable();
+        this.subscribeToUrlChanges();
+        this.subscribeToStoreChanges();
+        return this._activatedRouteChecked$;
+    }
+    disconnectPaginationFromRouter(paginator) {
+        if (this._connection?.paginator !== paginator)
+            return;
+        this.tearDownConnection();
+        this.hub.release(OWNED_PARAMS$1, this);
+    }
+    tearDownConnection() {
+        this._connection = undefined;
+        this._hasInitialUrlBeenSet = false;
+        this._readSubscription?.unsubscribe();
+        this._writeSubscription?.unsubscribe();
+    }
+    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 })))))
+            .subscribe(({ params, currentInfo, totalCount }) => {
+            const target = this.toStoreState(params);
+            const isChanged = !currentInfo || currentInfo.pageIndex !== target.pageIndex || currentInfo.pageSize !== target.pageSize;
+            if (isChanged) {
+                tableStoreService.setPageParams(target.pageIndex, target.pageSize, totalCount);
+            }
+            if (isFirstEmit) {
+                this._activatedRouteCheckedSubject.next(true);
+                isFirstEmit = false;
+            }
+        });
+    }
+    subscribeToStoreChanges() {
+        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))))
+            .subscribe(info => this.writeUrl(info.pageIndex, info.pageSize));
+    }
+    writeUrl(pageIndex, pageSize) {
+        const replaceUrl = !this._hasInitialUrlBeenSet;
+        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;
+        if (urlAlreadyMatches)
+            return;
+        this.hub.write({ [PAGE_PARAM_NAME]: targetPage, [SIZE_PARAM_NAME]: targetSize }, replaceUrl);
+    }
+    parseUrlParams(queryParams) {
+        const result = {};
+        const rawPage = queryParams[PAGE_PARAM_NAME];
+        if (typeof rawPage === 'string' && this.isValidPositiveIntegerString(rawPage)) {
+            result.page = Number(rawPage);
+        }
+        const rawSize = queryParams[SIZE_PARAM_NAME];
+        if (typeof rawSize === 'string' &&
+            this.isValidPositiveIntegerString(rawSize) &&
+            this.isValidSize(Number(rawSize))) {
+            result.size = Number(rawSize);
+        }
+        return result;
+    }
+    isValidPositiveIntegerString(raw) {
+        return /^[1-9]\d*$/.test(raw);
+    }
+    isValidSize(value) {
+        const pageSizes = this.getConfiguredPageSizes();
+        if (pageSizes && pageSizes.length > 0) {
+            return pageSizes.includes(value);
+        }
+        return value <= SIZE_SANITY_MAX;
+    }
+    getConfiguredPageSizes() {
+        const pagination = this._connection?.paginator.config?.pagination;
+        return typeof pagination === 'object' ? pagination.pageSizes : undefined;
+    }
+    toStoreState(params) {
+        const { paginator } = this._connection;
+        return {
+            pageIndex: params.page !== undefined ? params.page - 1 : 0,
+            pageSize: params.size ?? paginator.getPageSizeDefault()
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTablePaginationRouterConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTablePaginationRouterConnectorService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTablePaginationRouterConnectorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 class QdScrollingService {
     scrollIntoViewIfNeeded(element, borderDirection = 'top', targetBorderDistance = 0) {
         this.scrollIntoView(element, borderDirection, targetBorderDistance, true);
@@ -23816,6 +24005,7 @@ const PAGE_SIZE_DEFAULT = 25;
 class QdTablePaginatorComponent {
     tableDataResolver = inject(QD_TABLE_DATA_RESOLVER_TOKEN, { optional: true });
     tableStoreService = inject(QdTableStoreService);
+    routerConnector = inject(QdTablePaginationRouterConnectorService);
     /**
      * @description Configuration Model for Qd-Table.
      */
@@ -23852,11 +24042,39 @@ class QdTablePaginatorComponent {
         this.totalCount$ = this.tableStoreService.totalCount$();
         this.selectedRowsCount$ = this.tableStoreService.selectedRows$().pipe(map(ids => ids?.length ?? 0));
         if (this.isConfigValid())
-            this.initPagination();
+            this.startPagination();
     }
     ngOnDestroy() {
+        this.routerConnector.disconnectPaginationFromRouter(this);
+        this._destroyed$.next(null);
         this._destroyed$.complete();
     }
+    /**
+     * @description Whether this paginator should sync its state with the URL. Reads
+     * `pagination.connectWithRouter` (default `false` — URL sync is opt-in and
+     * requires an explicit `pagination: { connectWithRouter: true }`).
+     *
+     * Used by `QdTablePaginationRouterConnectorService` to decide whether to claim
+     * the router-singleton for this paginator.
+     */
+    shouldConnectWithRouter() {
+        const pagination = this.config?.pagination;
+        if (typeof pagination !== 'object')
+            return false;
+        return pagination.connectWithRouter === true;
+    }
+    /**
+     * @description The effective default page size for this paginator. Resolves
+     * `pagination.pageSizeDefault` first, then falls back to the first entry of
+     * `pagination.pageSizes`, finally to the framework constant `PAGE_SIZE_DEFAULT`.
+     */
+    getPageSizeDefault() {
+        if (typeof this.config?.pagination !== 'object')
+            return PAGE_SIZE_DEFAULT;
+        const { pageSizeDefault, pageSizes } = this.config.pagination;
+        const pageSize = pageSizes && pageSizes.length ? pageSizes[0] : PAGE_SIZE_DEFAULT;
+        return pageSizeDefault || pageSize;
+    }
     navigateToPage(direction) {
         if (!this.paginatorButtons)
             return;
@@ -23877,16 +24095,22 @@ class QdTablePaginatorComponent {
         }
         return true;
     }
+    startPagination() {
+        if (!this.shouldConnectWithRouter()) {
+            this.initPagination();
+            return;
+        }
+        this.routerConnector
+            .connectPaginationWithRouter(this, this.tableStoreService)
+            .pipe(takeUntil(this._destroyed$), first())
+            .subscribe(connected => {
+            if (!connected)
+                this.initPagination();
+        });
+    }
     initPagination() {
         this.tableStoreService.setupPagination(this.getPageSizeDefault());
     }
-    getPageSizeDefault() {
-        if (typeof this.config?.pagination !== 'object')
-            return PAGE_SIZE_DEFAULT;
-        const { pageSizeDefault, pageSizes } = this.config.pagination;
-        const pageSize = pageSizes && pageSizes.length ? pageSizes[0] : PAGE_SIZE_DEFAULT;
-        return pageSizeDefault || pageSize;
-    }
     calculatePageNumber(direction, totalCount, pageSize, currentPage) {
         switch (direction) {
             case QdPaginatorDirection.NextPage: {
@@ -23905,11 +24129,11 @@ class QdTablePaginatorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTablePaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTablePaginatorComponent, isStandalone: false, selector: "qd-table-paginator", inputs: { config: "config", testId: ["data-test-id", "testId"] }, viewQueries: [{ propertyName: "paginatorButtons", first: true, predicate: ["paginatorButtons"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"hasData$ | async\">\n  <qd-table-paginator-page-size [pageSizes]=\"pageSizes\" *ngIf=\"pageSizes.length > 0\"></qd-table-paginator-page-size>\n  <span class=\"paginator-current-page\" *ngIf=\"currentPage$ | async as page\">\n    {{ page.start }}\u2014{{ page.end }}\n    {{ \"i18n.qd.table.pagination.of\" | translate }}\n    {{ page.totalCount }}\n    {{\n      page.totalCount === 1\n        ? (\"i18n.qd.table.pagination.entry\" | translate)\n        : (\"i18n.qd.table.pagination.entries\" | translate)\n    }}\n  </span>\n  <span\n    *ngIf=\"{ count: (selectedRowsCount$ | async) ?? 0 } as ctx\"\n    [hidden]=\"ctx.count === 0 || config?.selection?.type !== 'multiSelect'\"\n    class=\"paginator-selection-count\"\n    [attr.data-test-id]=\"testId + '-paginator-selection-count'\"\n  >\n    {{\n      ctx.count === 1\n        ? (\"i18n.qd.table.pagination.selectedSingular\" | translate)\n        : (\"i18n.qd.table.pagination.selectedPlural\" | translate : { count: ctx.count })\n    }}\n  </span>\n  <span class=\"paginator-buttons\" data-test=\"paginator-buttons\" #paginatorButtons qdScrollToPagination>\n    <button\n      *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-first-page'\"\n      (click)=\"navigateToPage(pageNav.FirstPage)\"\n      [disabled]=\"(canPageBackward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'pageFirst1'\"></qd-icon>\n    </button>\n    <button\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-backward'\"\n      (click)=\"navigateToPage(pageNav.PreviousPage)\"\n      [disabled]=\"(canPageBackward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'triangleLeftSolid'\"></qd-icon>\n    </button>\n    <button\n      class=\"paginator-button forward\"\n      [attr.data-test-id]=\"testId + '-paginator-forward'\"\n      (click)=\"navigateToPage(pageNav.NextPage)\"\n      [disabled]=\"(canPageForward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'triangleRightSolid'\"></qd-icon>\n    </button>\n    <button\n      *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-last-page'\"\n      (click)=\"navigateToPage(pageNav.LastPage)\"\n      [disabled]=\"(canPageForward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'pageLast'\"></qd-icon>\n    </button>\n  </span>\n</ng-container>\n", styles: [":host{color:#454545;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:#fff}.paginator-current-page{margin-left:1rem}.paginator-selection-count{margin-right:1rem;margin-left:1rem}.paginator-buttons{margin-left:auto;text-align:right;white-space:nowrap}button.paginator-button{width:2.75rem;height:2.75rem;border-left:.0625rem solid rgb(229,229,229);background-color:unset;color:#454545;font-size:1.5rem}button.paginator-button:disabled{color:#b4b4b4;cursor:default}button.paginator-button:not(:disabled):hover{background-color:#e5e5e5;color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdScrollToPaginationDirective, selector: "[qdScrollToPagination]" }, { kind: "component", type: QdTablePaginatorPageSizeComponent, selector: "qd-table-paginator-page-size", inputs: ["pageSizes"] }, { 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: QdTablePaginatorComponent, isStandalone: false, selector: "qd-table-paginator", inputs: { config: "config", testId: ["data-test-id", "testId"] }, providers: [QdTablePaginationRouterConnectorService], viewQueries: [{ propertyName: "paginatorButtons", first: true, predicate: ["paginatorButtons"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"hasData$ | async\">\n  <qd-table-paginator-page-size [pageSizes]=\"pageSizes\" *ngIf=\"pageSizes.length > 0\"></qd-table-paginator-page-size>\n  <span class=\"paginator-current-page\" *ngIf=\"currentPage$ | async as page\">\n    {{ page.start }}\u2014{{ page.end }}\n    {{ \"i18n.qd.table.pagination.of\" | translate }}\n    {{ page.totalCount }}\n    {{\n      page.totalCount === 1\n        ? (\"i18n.qd.table.pagination.entry\" | translate)\n        : (\"i18n.qd.table.pagination.entries\" | translate)\n    }}\n  </span>\n  <span\n    *ngIf=\"{ count: (selectedRowsCount$ | async) ?? 0 } as ctx\"\n    [hidden]=\"ctx.count === 0 || config?.selection?.type !== 'multiSelect'\"\n    class=\"paginator-selection-count\"\n    [attr.data-test-id]=\"testId + '-paginator-selection-count'\"\n  >\n    {{\n      ctx.count === 1\n        ? (\"i18n.qd.table.pagination.selectedSingular\" | translate)\n        : (\"i18n.qd.table.pagination.selectedPlural\" | translate : { count: ctx.count })\n    }}\n  </span>\n  <span class=\"paginator-buttons\" data-test=\"paginator-buttons\" #paginatorButtons qdScrollToPagination>\n    <button\n      *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-first-page'\"\n      (click)=\"navigateToPage(pageNav.FirstPage)\"\n      [disabled]=\"(canPageBackward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'pageFirst1'\"></qd-icon>\n    </button>\n    <button\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-backward'\"\n      (click)=\"navigateToPage(pageNav.PreviousPage)\"\n      [disabled]=\"(canPageBackward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'triangleLeftSolid'\"></qd-icon>\n    </button>\n    <button\n      class=\"paginator-button forward\"\n      [attr.data-test-id]=\"testId + '-paginator-forward'\"\n      (click)=\"navigateToPage(pageNav.NextPage)\"\n      [disabled]=\"(canPageForward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'triangleRightSolid'\"></qd-icon>\n    </button>\n    <button\n      *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-last-page'\"\n      (click)=\"navigateToPage(pageNav.LastPage)\"\n      [disabled]=\"(canPageForward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'pageLast'\"></qd-icon>\n    </button>\n  </span>\n</ng-container>\n", styles: [":host{color:#454545;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:#fff}.paginator-current-page{margin-left:1rem}.paginator-selection-count{margin-right:1rem;margin-left:1rem}.paginator-buttons{margin-left:auto;text-align:right;white-space:nowrap}button.paginator-button{width:2.75rem;height:2.75rem;border-left:.0625rem solid rgb(229,229,229);background-color:unset;color:#454545;font-size:1.5rem}button.paginator-button:disabled{color:#b4b4b4;cursor:default}button.paginator-button:not(:disabled):hover{background-color:#e5e5e5;color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdScrollToPaginationDirective, selector: "[qdScrollToPagination]" }, { kind: "component", type: QdTablePaginatorPageSizeComponent, selector: "qd-table-paginator-page-size", inputs: ["pageSizes"] }, { 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: QdTablePaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-table-paginator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"hasData$ | async\">\n  <qd-table-paginator-page-size [pageSizes]=\"pageSizes\" *ngIf=\"pageSizes.length > 0\"></qd-table-paginator-page-size>\n  <span class=\"paginator-current-page\" *ngIf=\"currentPage$ | async as page\">\n    {{ page.start }}\u2014{{ page.end }}\n    {{ \"i18n.qd.table.pagination.of\" | translate }}\n    {{ page.totalCount }}\n    {{\n      page.totalCount === 1\n        ? (\"i18n.qd.table.pagination.entry\" | translate)\n        : (\"i18n.qd.table.pagination.entries\" | translate)\n    }}\n  </span>\n  <span\n    *ngIf=\"{ count: (selectedRowsCount$ | async) ?? 0 } as ctx\"\n    [hidden]=\"ctx.count === 0 || config?.selection?.type !== 'multiSelect'\"\n    class=\"paginator-selection-count\"\n    [attr.data-test-id]=\"testId + '-paginator-selection-count'\"\n  >\n    {{\n      ctx.count === 1\n        ? (\"i18n.qd.table.pagination.selectedSingular\" | translate)\n        : (\"i18n.qd.table.pagination.selectedPlural\" | translate : { count: ctx.count })\n    }}\n  </span>\n  <span class=\"paginator-buttons\" data-test=\"paginator-buttons\" #paginatorButtons qdScrollToPagination>\n    <button\n      *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-first-page'\"\n      (click)=\"navigateToPage(pageNav.FirstPage)\"\n      [disabled]=\"(canPageBackward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'pageFirst1'\"></qd-icon>\n    </button>\n    <button\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-backward'\"\n      (click)=\"navigateToPage(pageNav.PreviousPage)\"\n      [disabled]=\"(canPageBackward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'triangleLeftSolid'\"></qd-icon>\n    </button>\n    <button\n      class=\"paginator-button forward\"\n      [attr.data-test-id]=\"testId + '-paginator-forward'\"\n      (click)=\"navigateToPage(pageNav.NextPage)\"\n      [disabled]=\"(canPageForward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'triangleRightSolid'\"></qd-icon>\n    </button>\n    <button\n      *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-last-page'\"\n      (click)=\"navigateToPage(pageNav.LastPage)\"\n      [disabled]=\"(canPageForward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'pageLast'\"></qd-icon>\n    </button>\n  </span>\n</ng-container>\n", styles: [":host{color:#454545;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:#fff}.paginator-current-page{margin-left:1rem}.paginator-selection-count{margin-right:1rem;margin-left:1rem}.paginator-buttons{margin-left:auto;text-align:right;white-space:nowrap}button.paginator-button{width:2.75rem;height:2.75rem;border-left:.0625rem solid rgb(229,229,229);background-color:unset;color:#454545;font-size:1.5rem}button.paginator-button:disabled{color:#b4b4b4;cursor:default}button.paginator-button:not(:disabled):hover{background-color:#e5e5e5;color:#171717}\n"] }]
+            args: [{ selector: 'qd-table-paginator', providers: [QdTablePaginationRouterConnectorService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container *ngIf=\"hasData$ | async\">\n  <qd-table-paginator-page-size [pageSizes]=\"pageSizes\" *ngIf=\"pageSizes.length > 0\"></qd-table-paginator-page-size>\n  <span class=\"paginator-current-page\" *ngIf=\"currentPage$ | async as page\">\n    {{ page.start }}\u2014{{ page.end }}\n    {{ \"i18n.qd.table.pagination.of\" | translate }}\n    {{ page.totalCount }}\n    {{\n      page.totalCount === 1\n        ? (\"i18n.qd.table.pagination.entry\" | translate)\n        : (\"i18n.qd.table.pagination.entries\" | translate)\n    }}\n  </span>\n  <span\n    *ngIf=\"{ count: (selectedRowsCount$ | async) ?? 0 } as ctx\"\n    [hidden]=\"ctx.count === 0 || config?.selection?.type !== 'multiSelect'\"\n    class=\"paginator-selection-count\"\n    [attr.data-test-id]=\"testId + '-paginator-selection-count'\"\n  >\n    {{\n      ctx.count === 1\n        ? (\"i18n.qd.table.pagination.selectedSingular\" | translate)\n        : (\"i18n.qd.table.pagination.selectedPlural\" | translate : { count: ctx.count })\n    }}\n  </span>\n  <span class=\"paginator-buttons\" data-test=\"paginator-buttons\" #paginatorButtons qdScrollToPagination>\n    <button\n      *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-first-page'\"\n      (click)=\"navigateToPage(pageNav.FirstPage)\"\n      [disabled]=\"(canPageBackward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'pageFirst1'\"></qd-icon>\n    </button>\n    <button\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-backward'\"\n      (click)=\"navigateToPage(pageNav.PreviousPage)\"\n      [disabled]=\"(canPageBackward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'triangleLeftSolid'\"></qd-icon>\n    </button>\n    <button\n      class=\"paginator-button forward\"\n      [attr.data-test-id]=\"testId + '-paginator-forward'\"\n      (click)=\"navigateToPage(pageNav.NextPage)\"\n      [disabled]=\"(canPageForward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'triangleRightSolid'\"></qd-icon>\n    </button>\n    <button\n      *ngIf=\"config?.pagination['hasFirstLastPageNavigation']\"\n      class=\"paginator-button\"\n      [attr.data-test-id]=\"testId + '-paginator-last-page'\"\n      (click)=\"navigateToPage(pageNav.LastPage)\"\n      [disabled]=\"(canPageForward$ | async) === false\"\n    >\n      <qd-icon [icon]=\"'pageLast'\"></qd-icon>\n    </button>\n  </span>\n</ng-container>\n", styles: [":host{color:#454545;font-size:.875rem;font-weight:400;line-height:1.3125rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:#fff}.paginator-current-page{margin-left:1rem}.paginator-selection-count{margin-right:1rem;margin-left:1rem}.paginator-buttons{margin-left:auto;text-align:right;white-space:nowrap}button.paginator-button{width:2.75rem;height:2.75rem;border-left:.0625rem solid rgb(229,229,229);background-color:unset;color:#454545;font-size:1.5rem}button.paginator-button:disabled{color:#b4b4b4;cursor:default}button.paginator-button:not(:disabled):hover{background-color:#e5e5e5;color:#171717}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], testId: [{
@@ -23920,6 +24144,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['paginatorButtons']
             }] } });
 
+const SORT_PARAM_NAME = 'sort';
+const OWNED_PARAMS = [SORT_PARAM_NAME];
+const SEGMENT_SEPARATOR = ',';
+const COLUMN_DIRECTION_SEPARATOR = '.';
+class QdTableSortRouterConnectorService {
+    hub = inject(QdRouterQueryParamHubService);
+    destroyRef = inject(DestroyRef);
+    _connection;
+    _readSubscription;
+    _writeSubscription;
+    _activatedRouteCheckedSubject = new ReplaySubject(1);
+    _activatedRouteChecked$ = this._activatedRouteCheckedSubject.asObservable();
+    _hasInitialUrlBeenSet = false;
+    _hasWarnedMultiSegment = false;
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.tearDownConnection();
+            this.hub.release(OWNED_PARAMS, this);
+        });
+    }
+    connectSortWithRouter(table, tableStoreService) {
+        if (!this.shouldConnect(table) || !this.hub.isAvailable())
+            return of(false);
+        if (!this.hub.claim(OWNED_PARAMS, this))
+            return of(false);
+        this._connection = {
+            table: table,
+            tableStoreService: tableStoreService,
+            configuredColumns: table.config.columns
+        };
+        this._hasInitialUrlBeenSet = false;
+        this._hasWarnedMultiSegment = false;
+        this._activatedRouteCheckedSubject = new ReplaySubject(1);
+        this._activatedRouteChecked$ = this._activatedRouteCheckedSubject.asObservable();
+        this.subscribeToUrlChanges();
+        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;
+        this._hasWarnedMultiSegment = false;
+        this._readSubscription?.unsubscribe();
+        this._writeSubscription?.unsubscribe();
+    }
+    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 => {
+            if (segments.length === 1) {
+                const [{ column, direction }] = segments;
+                tableStoreService.setSort(column, direction);
+            }
+            if (isFirstEmit) {
+                this._activatedRouteCheckedSubject.next(true);
+                isFirstEmit = false;
+            }
+        });
+    }
+    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))))
+            .subscribe(serialized => this.writeUrl(serialized));
+    }
+    writeUrl(serialized) {
+        const replaceUrl = !this._hasInitialUrlBeenSet;
+        this._hasInitialUrlBeenSet = true;
+        if (this.hub.snapshotQueryParam(SORT_PARAM_NAME) === serialized)
+            return;
+        this.hub.write({ [SORT_PARAM_NAME]: serialized }, replaceUrl);
+    }
+    shouldConnect(table) {
+        const sortConfig = table.config.sort;
+        if (sortConfig === true || sortConfig === undefined)
+            return false;
+        return sortConfig.connectWithRouter === true;
+    }
+    parseRawSortValue(raw) {
+        if (raw.length === 0)
+            return [];
+        const rawSegments = raw.split(SEGMENT_SEPARATOR);
+        const validSegments = rawSegments
+            .map(segment => this.parseSegment(segment))
+            .filter((segment) => segment !== undefined);
+        if (validSegments.length > 1) {
+            if (!this._hasWarnedMultiSegment) {
+                console.warn('Quadrel Framework | QdTable - Multi-column sort URL is not yet supported. Using first valid segment only.');
+                this._hasWarnedMultiSegment = true;
+            }
+            return [validSegments[0]];
+        }
+        return validSegments;
+    }
+    parseSegment(segment) {
+        if (segment.length === 0)
+            return undefined;
+        const separatorIndex = segment.indexOf(COLUMN_DIRECTION_SEPARATOR);
+        if (separatorIndex <= 0 || separatorIndex === segment.length - 1)
+            return undefined;
+        const column = segment.slice(0, separatorIndex);
+        const directionRaw = segment.slice(separatorIndex + 1).toLowerCase();
+        if (!this.isValidColumn(column))
+            return undefined;
+        if (directionRaw === 'asc')
+            return { column, direction: QdSortDirection.ASC };
+        if (directionRaw === 'desc')
+            return { column, direction: QdSortDirection.DESC };
+        return undefined;
+    }
+    isValidColumn(column) {
+        const config = this._connection?.configuredColumns.find(c => c.column === column);
+        return !!config && config.sort !== undefined && config.sort.isDisabled !== true;
+    }
+    serializeSort(sort) {
+        const active = sort.filter((entry) => entry.direction === QdSortDirection.ASC || entry.direction === QdSortDirection.DESC);
+        if (active.length === 0)
+            return undefined;
+        return active
+            .map(entry => `${entry.column}${COLUMN_DIRECTION_SEPARATOR}${this.directionToString(entry.direction)}`)
+            .join(SEGMENT_SEPARATOR);
+    }
+    directionToString(direction) {
+        return direction === QdSortDirection.ASC ? 'asc' : 'desc';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableSortRouterConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableSortRouterConnectorService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableSortRouterConnectorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 class QdTableRowActionsSecondaryMenuComponent {
     actionsService = inject(QdTableSecondaryActionsService);
     tableStore = inject(QdTableStoreService);
@@ -24535,6 +24900,7 @@ class QdTableComponent {
     breakpointService = inject(QdBreakpointService);
     resolverService = inject(QdTableResolverService);
     confirmationDialogService = inject(QdConfirmationDialogOpenerService);
+    sortRouterConnector = inject(QdTableSortRouterConnectorService);
     /**
      * Configuration of the table. The generic type specifies the column definition. <br />
      *
@@ -24642,6 +25008,7 @@ class QdTableComponent {
         this.tableStoreService.initTableState(this._data, this.hasResolver, this._connectors, this.hasPagination);
         this.tableStoreService.updateTableStateRecentSecondaryAction(undefined);
         this.tableStoreService.setupSort(this.config.columns);
+        this.sortRouterConnector.connectSortWithRouter(this, this.tableStoreService).pipe(take(1)).subscribe();
         this.resolverService.init(this.config.refreshOnLanguageChange, this.hasPagination);
         this.data$ = this.tableStoreService.tableDataEntries$();
         this.initializeResponsiveRowService();
@@ -24672,6 +25039,7 @@ class QdTableComponent {
         }
     }
     ngOnDestroy() {
+        this.sortRouterConnector.disconnectSortFromRouter(this);
         this.tableStoreService.updateTableStateRecentSecondaryAction(undefined);
         this.tableStoreService.resetConnectorStates();
         this.fillingWidthService.destroy();
@@ -24841,7 +25209,8 @@ class QdTableComponent {
             QdTableRowSelectionService,
             QdTableFillingWidthService,
             QdTableResolverService,
-            QdTableExternalActionResultService
+            QdTableExternalActionResultService,
+            QdTableSortRouterConnectorService
         ], viewQueries: [{ propertyName: "paginator", first: true, predicate: QdTablePaginatorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<table [class]=\"'qd-table__table'\">\n  <tr qd-table-head [config]=\"config\" [data-test-id]=\"testId\"></tr>\n  <tbody qd-table-body [config]=\"config\" [data]=\"(data$ | async) ?? []\" [data-test-id]=\"testId\"></tbody>\n</table>\n\n<qd-table-paginator [config]=\"config\" [data-test-id]=\"testId\" *ngIf=\"hasPagination\"></qd-table-paginator>\n<qd-table-empty-state *ngIf=\"hasEmptyStateView$ | async\" [config]=\"config.emptyStateView\"></qd-table-empty-state>\n", styles: [":host{display:inline-flex;flex-direction:column}:host .qd-table__table{background:#fff;border-spacing:0;color:#171717;font-size:.875rem;font-weight:400;line-height:2.5rem}:host .qd-table__head,:host .qd-table__body{vertical-align:center}:host .qd-table__head{background:#e5e5e5;text-align:left}:host .qd-table__head ::ng-deep .qd-table__head-cell{font-weight:600}:host .qd-table__body{color:#171717}:host ::ng-deep .qd-table__head-cell,:host ::ng-deep .qd-table__body-cell{padding:.125rem 1rem 0;vertical-align:top}:host ::ng-deep .qd-table__head-cell--selection,:host ::ng-deep .qd-table__body-cell--selection{width:1.875rem;padding-top:.1875rem;text-align:center}:host ::ng-deep .qd-table__head-cell--actions-inline-menu,:host ::ng-deep .qd-table__body-cell--actions-inline-menu{padding-top:.125rem;vertical-align:top}:host.main-column-fills-width.table-has-remaining-width:not(.table-has-right-aligned-filling-column) ::ng-deep th.main-column,:host.main-column-fills-width.table-has-remaining-width:not(.table-has-right-aligned-filling-column) ::ng-deep td.main-column{width:100%}:host.main-column-fills-width.table-has-remaining-width ::ng-deep th:not(.main-column),:host.main-column-fills-width.table-has-remaining-width ::ng-deep td:not(.main-column){white-space:nowrap}:host.last-column-fills-width.table-has-remaining-width:not(.table-has-right-aligned-filling-column) ::ng-deep th.last-column,:host.last-column-fills-width.table-has-remaining-width:not(.table-has-right-aligned-filling-column) ::ng-deep td.last-column{width:100%}:host.last-column-fills-width.table-has-remaining-width ::ng-deep th:not(.last-column),:host.last-column-fills-width.table-has-remaining-width ::ng-deep td:not(.last-column){white-space:nowrap}:host.harmonized{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdTableBodyComponent, selector: "[qd-table-body]", inputs: ["config", "data", "data-test-id"] }, { kind: "component", type: QdTableEmptyStateComponent, selector: "qd-table-empty-state", inputs: ["config"] }, { kind: "component", type: QdTableHeadComponent, selector: "[qd-table-head]", inputs: ["config", "data-test-id"] }, { kind: "component", type: QdTablePaginatorComponent, selector: "qd-table-paginator", inputs: ["config", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableComponent, decorators: [{
@@ -24855,7 +25224,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdTableRowSelectionService,
                         QdTableFillingWidthService,
                         QdTableResolverService,
-                        QdTableExternalActionResultService
+                        QdTableExternalActionResultService,
+                        QdTableSortRouterConnectorService
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.qd-table]': 'true',
                         '[class.main-column-fills-width]': 'whichColumnFillsWidth === "main"',
@@ -30550,147 +30920,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{ selector: 'qd-shell-header-search', standalone: false, template: "<qd-search [configData]=\"config\"> </qd-search>\n", styles: [":host{display:none}:host:not(:last-child){margin-right:1rem}:host ::ng-deep .qd-input-input{border-color:#fff0!important;background:#efefef!important}:host ::ng-deep input{background:#fff0!important}:host ::ng-deep input::placeholder{color:#979797!important}:host ::ng-deep input:hover::placeholder,:host ::ng-deep input:focus::placeholder{color:#171717!important}@media (min-width: 1280px){:host{display:block}}\n"] }]
         }] });
 
-// @ts-strict-ignore
-class QdNavigationService {
-    router = inject(Router);
-    activatedRoute = inject(ActivatedRoute);
-    routeLeafSnapshot$;
-    routeData$;
-    routeComponentInstanceSubject = new ReplaySubject(1);
-    constructor() {
-        this.routeLeafSnapshot$ = this.router.events.pipe(filter(event => event instanceof NavigationEnd), map(() => this.activatedRoute), map(route => this.getLeafRoute(route).snapshot), filter(snapshot => snapshot.outlet === 'primary'));
-        this.routeData$ = this.routeLeafSnapshot$.pipe(map((snapshot) => snapshot.routeConfig?.data || {}), shareReplay(1));
-    }
-    getLeafRoute(route) {
-        if (!route.firstChild)
-            return route;
-        return this.getLeafRoute(route.firstChild);
-    }
-    isHome$() {
-        return this.routeData$.pipe(map(({ isHome }) => isHome ?? false));
-    }
-    getRouteParams$() {
-        return this.routeLeafSnapshot$.pipe(map(this.getMergedRouteParams.bind(this)));
-    }
-    getMergedRouteParams(snapshot) {
-        if (!snapshot)
-            return {};
-        return {
-            ...this.getMergedRouteParams(snapshot.parent),
-            ...(snapshot.params || {})
-        };
-    }
-    getPreviousHref$() {
-        return this.routeData$.pipe(map(({ previousHref }) => previousHref));
-    }
-    navigate(commands, extras) {
-        return this.router.navigate(commands, extras);
-    }
-    navigateByUrl(url, extras) {
-        return this.router.navigateByUrl(url, extras);
-    }
-    updateRouteComponentInstance(routeComponentInstance) {
-        this.routeComponentInstanceSubject.next(routeComponentInstance);
-    }
-    getRouteComponentInstance$() {
-        return this.routeComponentInstanceSubject.asObservable();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNavigationService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNavigationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-// @ts-strict-ignore
-class QdShellLeftService {
-    _hasNavigation = new BehaviorSubject(false);
-    _isNavigationPinned = new BehaviorSubject(false);
-    _isNavigationRolledOver = new BehaviorSubject(false);
-    hasNavigation$ = this._hasNavigation.asObservable();
-    isNavigationPinned$ = this._isNavigationPinned.asObservable();
-    isNavigationRolledOver$ = this._isNavigationRolledOver.asObservable();
-    set config(config) {
-        this._hasNavigation.next(config.navigation?.length > 0);
-    }
-    set isNavigationRolledOver(value) {
-        this._isNavigationRolledOver.next(value);
-    }
-    togglePinnedNavigation() {
-        this._isNavigationPinned.next(!this._isNavigationPinned.value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellLeftService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellLeftService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellLeftService, decorators: [{
-            type: Injectable
-        }] });
-
-class QdShellRightService {
-    notificationsService = inject(QdNotificationsService);
-    _open = new BehaviorSubject(false);
-    _pinned = new BehaviorSubject(false);
-    _hasNotificationsToggle = new BehaviorSubject(false);
-    open$ = this._open.asObservable();
-    pinned$ = this._pinned.asObservable();
-    notifications$;
-    set open(open) {
-        this._open.next(open);
-    }
-    get hasNotificationsToggle$() {
-        return combineLatest([this._hasNotificationsToggle, this.hasNotifications$]).pipe(map(([hasNotificationsToggle, hasNotifications]) => hasNotificationsToggle || hasNotifications));
-    }
-    get hasNotifications$() {
-        return this.notifications$.pipe(map(notifications => notifications.length > 0));
-    }
-    set config(config) {
-        this._hasNotificationsToggle.next(config.hasNotificationsToggle ?? false);
-    }
-    constructor() {
-        const notificationsService = this.notificationsService;
-        this.notifications$ = notificationsService.getNotificationsForContext('shell');
-        this._open.pipe(filter(open => open)).subscribe(() => {
-            this._pinned.next(false);
-        });
-    }
-    toggleOpen() {
-        this._open.next(!this._open.value);
-    }
-    togglePinned() {
-        this._pinned.next(!this._pinned.value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellRightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellRightService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellRightService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
-// @ts-strict-ignore
-class QdShellHeaderMinimizationService {
-    navigationService = inject(QdNavigationService);
-    breakpointService = inject(QdBreakpointService);
-    _headerMinimizedBreakpoints = ['sm', 'xs'];
-    _config;
-    _isInternal$ = new BehaviorSubject(false);
-    set config(config) {
-        this._config = config;
-        this._isInternal$.next(config.isInternal);
-    }
-    isHeaderMinimized$() {
-        const isMinimizedForAllBreakpoints$ = this._isInternal$.pipe(combineLatestWith(this.navigationService.isHome$()), map(([isInternal, isHomePage]) => isInternal ?? !isHomePage));
-        return isMinimizedForAllBreakpoints$.pipe(combineLatestWith(this.breakpointService.getMatchingBreakpoint()), map(([isMinimizedForAllBreakpoints, breakpoint]) => isMinimizedForAllBreakpoints || this._isMinimizedBreakpoint(breakpoint)));
-    }
-    _isMinimizedBreakpoint(breakpoint) {
-        return this._headerMinimizedBreakpoints.includes(breakpoint);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellHeaderMinimizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellHeaderMinimizationService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellHeaderMinimizationService, decorators: [{
-            type: Injectable
-        }] });
-
 // @ts-strict-ignore
 const loadJavascriptAsset = (path, scriptElementAttributes = {}) => {
     const scriptElement = document.createElement('script');
@@ -31058,7 +31287,6 @@ class QdShellServiceNavigationComponent {
     _config;
     _destroyed$ = new Subject();
     _attributesHaveBeenSet$ = new ReplaySubject(1);
-    localeService = inject(QdLocaleService);
     ngOnInit() {
         loadJavascriptAsset(this.config?.javascriptAssetPath ?? DEFAULT_JAVASCRIPT_ASSET_PATH$1, {
             defer: '',
@@ -31101,7 +31329,6 @@ class QdShellServiceNavigationComponent {
         this._destroyed$.complete();
     }
     handleLanguageChange($event) {
-        this.localeService.setServiceNavigationLanguage($event.detail);
         this.useLanguage($event.detail);
     }
     handleLoginStatusChange($event) {
@@ -31148,6 +31375,162 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['serviceNavigation']
             }] } });
 
+class QdShellServiceNavigationModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellServiceNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: QdShellServiceNavigationModule, declarations: [QdShellServiceNavigationComponent], imports: [CommonModule], exports: [QdShellServiceNavigationComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellServiceNavigationModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellServiceNavigationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [QdShellServiceNavigationComponent],
+                    exports: [QdShellServiceNavigationComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                }]
+        }] });
+
+// @ts-strict-ignore
+class QdNavigationService {
+    router = inject(Router);
+    activatedRoute = inject(ActivatedRoute);
+    routeLeafSnapshot$;
+    routeData$;
+    routeComponentInstanceSubject = new ReplaySubject(1);
+    constructor() {
+        this.routeLeafSnapshot$ = this.router.events.pipe(filter(event => event instanceof NavigationEnd), map(() => this.activatedRoute), map(route => this.getLeafRoute(route).snapshot), filter(snapshot => snapshot.outlet === 'primary'));
+        this.routeData$ = this.routeLeafSnapshot$.pipe(map((snapshot) => snapshot.routeConfig?.data || {}), shareReplay(1));
+    }
+    getLeafRoute(route) {
+        if (!route.firstChild)
+            return route;
+        return this.getLeafRoute(route.firstChild);
+    }
+    isHome$() {
+        return this.routeData$.pipe(map(({ isHome }) => isHome ?? false));
+    }
+    getRouteParams$() {
+        return this.routeLeafSnapshot$.pipe(map(this.getMergedRouteParams.bind(this)));
+    }
+    getMergedRouteParams(snapshot) {
+        if (!snapshot)
+            return {};
+        return {
+            ...this.getMergedRouteParams(snapshot.parent),
+            ...(snapshot.params || {})
+        };
+    }
+    getPreviousHref$() {
+        return this.routeData$.pipe(map(({ previousHref }) => previousHref));
+    }
+    navigate(commands, extras) {
+        return this.router.navigate(commands, extras);
+    }
+    navigateByUrl(url, extras) {
+        return this.router.navigateByUrl(url, extras);
+    }
+    updateRouteComponentInstance(routeComponentInstance) {
+        this.routeComponentInstanceSubject.next(routeComponentInstance);
+    }
+    getRouteComponentInstance$() {
+        return this.routeComponentInstanceSubject.asObservable();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNavigationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+// @ts-strict-ignore
+class QdShellLeftService {
+    _hasNavigation = new BehaviorSubject(false);
+    _isNavigationPinned = new BehaviorSubject(false);
+    _isNavigationRolledOver = new BehaviorSubject(false);
+    hasNavigation$ = this._hasNavigation.asObservable();
+    isNavigationPinned$ = this._isNavigationPinned.asObservable();
+    isNavigationRolledOver$ = this._isNavigationRolledOver.asObservable();
+    set config(config) {
+        this._hasNavigation.next(config.navigation?.length > 0);
+    }
+    set isNavigationRolledOver(value) {
+        this._isNavigationRolledOver.next(value);
+    }
+    togglePinnedNavigation() {
+        this._isNavigationPinned.next(!this._isNavigationPinned.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellLeftService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellLeftService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellLeftService, decorators: [{
+            type: Injectable
+        }] });
+
+class QdShellRightService {
+    notificationsService = inject(QdNotificationsService);
+    _open = new BehaviorSubject(false);
+    _pinned = new BehaviorSubject(false);
+    _hasNotificationsToggle = new BehaviorSubject(false);
+    open$ = this._open.asObservable();
+    pinned$ = this._pinned.asObservable();
+    notifications$;
+    set open(open) {
+        this._open.next(open);
+    }
+    get hasNotificationsToggle$() {
+        return combineLatest([this._hasNotificationsToggle, this.hasNotifications$]).pipe(map(([hasNotificationsToggle, hasNotifications]) => hasNotificationsToggle || hasNotifications));
+    }
+    get hasNotifications$() {
+        return this.notifications$.pipe(map(notifications => notifications.length > 0));
+    }
+    set config(config) {
+        this._hasNotificationsToggle.next(config.hasNotificationsToggle ?? false);
+    }
+    constructor() {
+        const notificationsService = this.notificationsService;
+        this.notifications$ = notificationsService.getNotificationsForContext('shell');
+        this._open.pipe(filter(open => open)).subscribe(() => {
+            this._pinned.next(false);
+        });
+    }
+    toggleOpen() {
+        this._open.next(!this._open.value);
+    }
+    togglePinned() {
+        this._pinned.next(!this._pinned.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellRightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellRightService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellRightService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+// @ts-strict-ignore
+class QdShellHeaderMinimizationService {
+    navigationService = inject(QdNavigationService);
+    breakpointService = inject(QdBreakpointService);
+    _headerMinimizedBreakpoints = ['sm', 'xs'];
+    _config;
+    _isInternal$ = new BehaviorSubject(false);
+    set config(config) {
+        this._config = config;
+        this._isInternal$.next(config.isInternal);
+    }
+    isHeaderMinimized$() {
+        const isMinimizedForAllBreakpoints$ = this._isInternal$.pipe(combineLatestWith(this.navigationService.isHome$()), map(([isInternal, isHomePage]) => isInternal ?? !isHomePage));
+        return isMinimizedForAllBreakpoints$.pipe(combineLatestWith(this.breakpointService.getMatchingBreakpoint()), map(([isMinimizedForAllBreakpoints, breakpoint]) => isMinimizedForAllBreakpoints || this._isMinimizedBreakpoint(breakpoint)));
+    }
+    _isMinimizedBreakpoint(breakpoint) {
+        return this._headerMinimizedBreakpoints.includes(breakpoint);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellHeaderMinimizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellHeaderMinimizationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellHeaderMinimizationService, decorators: [{
+            type: Injectable
+        }] });
+
 // @ts-strict-ignore
 const DEFAULT_LANGUAGE_LIST$1 = ['de', 'fr', 'it', 'en'];
 class QdShellHeaderWidgetService {
@@ -32230,21 +32613,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: [QdCommentsComponent]
             }] } });
 
-class QdShellServiceNavigationModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellServiceNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: QdShellServiceNavigationModule, declarations: [QdShellServiceNavigationComponent], imports: [CommonModule], exports: [QdShellServiceNavigationComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellServiceNavigationModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdShellServiceNavigationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [QdShellServiceNavigationComponent],
-                    exports: [QdShellServiceNavigationComponent],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
-                }]
-        }] });
-
 function initializeBreadcrumbServices(breadcrumbsService, dialogBreadcrumbsService) {
     return () => {
         breadcrumbsService.initialize();
@@ -33497,5 +33865,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ENVIRONMENT, AVAILABLE_ICONS, BACKEND_ERROR_CODES, MockLocaleDatePipe, NavigationTileComponent, NavigationTilesComponent, QD_DIALOG_CONFIRMATION_RESOLVER_TOKEN, QD_FILE_MANAGER_TOKEN, QD_FILE_UPLOAD_MANAGER_TOKEN, QD_FORM_OPTIONS_RESOLVER, QD_PAGE_OBJECT_RESOLVER_TOKEN, QD_PAGE_STEP_RESOLVER_TOKEN, QD_POPOVER_TOP_FIRST, QD_SAFE_BOTTOM_OFFSET, QD_TABLE_DATA_RESOLVER_TOKEN, QD_UPLOAD_HTTP_OPTIONS, QdButtonComponent, QdButtonGhostDirective, QdButtonGridComponent, QdButtonLinkDirective, QdButtonModule, QdButtonStackButtonComponent, QdButtonStackComponent, QdCheckboxChipsComponent, QdCheckboxComponent, QdCheckboxesComponent, QdChipComponent, QdChipModule, QdColumnAutoFillDirective, QdColumnBreakBeforeDirective, QdColumnDirective, QdColumnDisableResponsiveColspansDirective, QdColumnFullGridWidthDirective, QdColumnNextInSameRowDirective, QdColumnsDirective, QdColumnsDisableAutoFillDirective, QdColumnsDisableResponsiveColspansDirective, QdColumnsMaxDirective, QdCommentsComponent, QdCommentsModule, QdConnectFormStateToPageDirective, QdConnectorTableContextDirective, QdConnectorTableFilterDirective, QdConnectorTableSearchDirective, QdContactCardComponent, QdContactCardModule, QdContainerPairsCaptionComponent, QdContainerPairsContainerComponent, QdContainerPairsHeaderComponent, QdContainerPairsItemComponent, QdContainerPairsValueComponent, QdContextService, QdCoreModule, QdDatepickerComponent, QdDialogActionComponent, QdDialogAuthSessionEndComponent, QdDialogAuthSessionEndService, QdDialogComponent, QdDialogConfirmationComponent, QdDialogConfirmationErrorDirective, QdDialogConfirmationInfoDirective, QdDialogConfirmationSuccessDirective, QdDialogModule, QdDialogRecordStepperComponent, QdDialogService, QdDialogSize, QdDisabledDirective, QdDropdownComponent, QdFileCollectorComponent, QdFileCollectorModule, QdFileSizePipe$1 as QdFileSizePipe, QdFileUploadComponent, QdFileUploadService, QdFilterComponent, QdFilterFormItemsComponent, QdFilterModule, QdFilterRestParamBuilder, QdFilterService, QdFormArray, QdFormBuilder, QdFormControl, QdFormGroup, QdFormModule, QdGridComponent, QdGridModule, QdHorizontalPairsCaptionComponent, QdHorizontalPairsComponent, QdHorizontalPairsItemComponent, QdHorizontalPairsValueComponent, QdIconButtonComponent, QdIconComponent, QdIconModule, QdImageComponent, QdImageModule, QdIndeterminateProgressBarComponent, QdInputComponent, QdListModule, QdMenuButtonComponent, QdMockBreakpointService, QdMockButtonComponent, QdMockButtonGhostDirective, QdMockButtonGridComponent, QdMockButtonLinkDirective, QdMockButtonModule, QdMockButtonStackButtonComponent, QdMockButtonStackComponent, QdMockCalendarComponent, QdMockCheckboxChipsComponent, QdMockCheckboxComponent, QdMockCheckboxesComponent, QdMockChipComponent, QdMockChipModule, QdMockColumnDirective, QdMockColumnsDirective, QdMockContactCardComponent, QdMockContactCardModule, QdMockContainerPairsCaptionComponent, QdMockContainerPairsContainerComponent, QdMockContainerPairsHeaderComponent, QdMockContainerPairsItemComponent, QdMockContainerPairsValueComponent, QdMockCoreModule, QdMockCounterBadgeComponent, QdMockDatepickerComponent, QdMockDisabledDirective, QdMockDropdownComponent, QdMockFileCollectorComponent, QdMockFileCollectorModule, QdMockFilterCategoryBooleanComponent, QdMockFilterCategoryComponent, QdMockFilterCategoryDateComponent, QdMockFilterCategoryDateRangeComponent, QdMockFilterCategoryFreeTextComponent, QdMockFilterCategorySelectComponent, QdMockFilterComponent, QdMockFilterFormItemsComponent, QdMockFilterItemBooleanComponent, QdMockFilterItemDateComponent, QdMockFilterItemDateRangeComponent, QdMockFilterItemFreeTextComponent, QdMockFilterItemMultiSelectComponent, QdMockFilterItemSingleSelectComponent, QdMockFilterModule, QdMockFilterService, QdMockFormErrorComponent, QdMockFormGroupErrorComponent, QdMockFormHintComponent, QdMockFormLabelComponent, QdMockFormReadonlyComponent, QdMockFormViewonlyComponent, QdMockFormsModule, QdMockGridModule, QdMockIconButtonComponent, QdMockIconComponent, QdMockIconModule, QdMockImageComponent, QdMockImageModule, QdMockIndeterminateProgressBarComponent, QdMockInputComponent, QdMockListModule, QdMockNavigationTileComponent, QdMockNavigationTilesComponent, QdMockNavigationTilesModule, QdMockNotificationComponent, QdMockNotificationContentComponent, QdMockNotificationsComponent, QdMockNotificationsModule, QdMockNotificationsService, QdMockPageComponent, QdMockPageModule, QdMockPercentageProgressBarComponent, QdMockPinCodeComponent, QdMockPlaceHolderModule, QdMockPopoverOnClickDirective, QdMockProgressBarModule, QdMockQdPlaceHolderComponent, QdMockRadioButtonsComponent, QdMockRwdDisabledDirective, QdMockSearchComponent, QdMockSearchModule, QdMockSectionComponent, QdMockSectionModule, QdMockShellComponent, QdMockShellFooterComponent, QdMockShellHeaderBannerComponent, QdMockShellHeaderComponent, QdMockShellHeaderSearchComponent, QdMockShellHeaderWidgetComponent, QdMockShellModule, QdMockShellToolbarComponent, QdMockShellToolbarItemComponent, QdMockStatusIndicatorCaptionComponent, QdMockStatusIndicatorComponent, QdMockStatusIndicatorItemComponent, QdMockStatusIndicatorModule, QdMockStatusPairsCaptionComponent, QdMockStatusPairsComponent, QdMockStatusPairsErrorComponent, QdMockStatusPairsItemComponent, QdMockStatusPairsValueComponent, QdMockSwitchComponent, QdMockSwitchesComponent, QdMockTableComponent, QdMockTableModule, QdMockTextSectionComponent, QdMockTextSectionHeadlineComponent, QdMockTextSectionModule, QdMockTextSectionParagraphComponent, QdMockTextareaComponent, QdMockTileButtonListComponent, QdMockTileComponent, QdMockTileTextListComponent, QdMockTileTextListItemComponent, QdMockTileTitleComponent, QdMockTilesContainerComponent, QdMockTilesContainerTitleComponent, QdMockTilesModule, QdMockTranslatePipe, QdMockVisuallyHiddenDirective, QdMultiInputComponent, QdNavigationTilesModule, QdNotificationComponent, QdNotificationContentComponent, QdNotificationsComponent, QdNotificationsHttpInterceptorService, QdNotificationsModule, QdNotificationsService, QdNotificationsSnackbarListenerDirective, QdNumberInputService, QdPageComponent, QdPageControlPanelComponent, QdPageFooterComponent, QdPageFooterCustomContentDirective, QdPageInfoBannerComponent, QdPageModule, QdPageStepComponent, QdPageStepperAdapterDirective, QdPageStepperComponent, QdPageStepperModule, QdPageStoreService, QdPageTabComponent, QdPageTabsAdapterDirective, QdPageTabsComponent, QdPageTabsModule, QdPanelSectionActionsComponent, QdPanelSectionComponent, QdPanelSectionModule, QdPanelSectionStatusComponent, QdPanelSectionTextParagraphComponent, QdPendingChangesGuardDirective, QdPercentageProgressBarComponent, QdPinCodeComponent, QdPlaceHolderComponent, QdPlaceHolderModule, QdPlaceholderPipe, QdProgressBarModule, QdProjectionGuardComponent, QdPushEventsService, QdQuickEditComponent, QdQuickEditModule, QdRadioButtonsComponent, QdRichtextComponent, QdRwdDisabledDirective, QdSearchComponent, QdSearchModule, QdSectionAdapterDirective, QdSectionComponent, QdSectionModule, QdSectionToolbarComponent, QdShellComponent, QdShellModule, QdSortDirection, QdSpinnerComponent, QdSpinnerModule, QdStatusIndicatorComponent, QdStatusIndicatorModule, QdStatusPairsCaptionComponent, QdStatusPairsComponent, QdStatusPairsErrorComponent, QdStatusPairsItemComponent, QdStatusPairsValueComponent, QdSubgridComponent, QdSwitchComponent, QdSwitchesComponent, QdTableComponent, QdTableModule, QdTableSpringTools, QdTextSectionComponent, QdTextSectionHeadlineComponent, QdTextSectionModule, QdTextSectionParagraphComponent, QdTextareaComponent, QdTileButtonListComponent, QdTileComponent, QdTileTextListComponent, QdTileTextListItemComponent, QdTileTitleComponent, QdTilesComponent, QdTilesModule, QdTilesTitleComponent, QdTooltipAtIntersectionDirective, QdTooltipIconComponent, QdTreeComponent, QdTreeModule, QdTreeRowExpanderService, QdUiMockModule, QdUiModule, QdUploadErrorType, QdValidators, QdViewportAdaptiveDirective, QdVisuallyHiddenDirective, chipColorDefault, createMetadataStream, updateHtmlLang };
+export { APP_ENVIRONMENT, AVAILABLE_ICONS, BACKEND_ERROR_CODES, MockLocaleDatePipe, NavigationTileComponent, NavigationTilesComponent, QD_DIALOG_CONFIRMATION_RESOLVER_TOKEN, QD_FILE_MANAGER_TOKEN, QD_FILE_UPLOAD_MANAGER_TOKEN, QD_FORM_OPTIONS_RESOLVER, QD_PAGE_OBJECT_RESOLVER_TOKEN, QD_PAGE_STEP_RESOLVER_TOKEN, QD_POPOVER_TOP_FIRST, QD_SAFE_BOTTOM_OFFSET, QD_TABLE_DATA_RESOLVER_TOKEN, QD_UPLOAD_HTTP_OPTIONS, QdButtonComponent, QdButtonGhostDirective, QdButtonGridComponent, QdButtonLinkDirective, QdButtonModule, QdButtonStackButtonComponent, QdButtonStackComponent, QdCheckboxChipsComponent, QdCheckboxComponent, QdCheckboxesComponent, QdChipComponent, QdChipModule, QdColumnAutoFillDirective, QdColumnBreakBeforeDirective, QdColumnDirective, QdColumnDisableResponsiveColspansDirective, QdColumnFullGridWidthDirective, QdColumnNextInSameRowDirective, QdColumnsDirective, QdColumnsDisableAutoFillDirective, QdColumnsDisableResponsiveColspansDirective, QdColumnsMaxDirective, QdCommentsComponent, QdCommentsModule, QdConnectFormStateToPageDirective, QdConnectorTableContextDirective, QdConnectorTableFilterDirective, QdConnectorTableSearchDirective, QdContactCardComponent, QdContactCardModule, QdContainerPairsCaptionComponent, QdContainerPairsContainerComponent, QdContainerPairsHeaderComponent, QdContainerPairsItemComponent, QdContainerPairsValueComponent, QdContextService, QdCoreModule, QdDatepickerComponent, QdDialogActionComponent, QdDialogAuthSessionEndComponent, QdDialogAuthSessionEndService, QdDialogComponent, QdDialogConfirmationComponent, QdDialogConfirmationErrorDirective, QdDialogConfirmationInfoDirective, QdDialogConfirmationSuccessDirective, QdDialogModule, QdDialogRecordStepperComponent, QdDialogService, QdDialogSize, QdDisabledDirective, QdDropdownComponent, QdFileCollectorComponent, QdFileCollectorModule, QdFileSizePipe$1 as QdFileSizePipe, QdFileUploadComponent, QdFileUploadService, QdFilterComponent, QdFilterFormItemsComponent, QdFilterModule, QdFilterRestParamBuilder, QdFilterService, QdFormArray, QdFormBuilder, QdFormControl, QdFormGroup, QdFormModule, QdGridComponent, QdGridModule, QdHorizontalPairsCaptionComponent, QdHorizontalPairsComponent, QdHorizontalPairsItemComponent, QdHorizontalPairsValueComponent, QdIconButtonComponent, QdIconComponent, QdIconModule, QdImageComponent, QdImageModule, QdIndeterminateProgressBarComponent, QdInputComponent, QdListModule, QdMenuButtonComponent, QdMockBreakpointService, QdMockButtonComponent, QdMockButtonGhostDirective, QdMockButtonGridComponent, QdMockButtonLinkDirective, QdMockButtonModule, QdMockButtonStackButtonComponent, QdMockButtonStackComponent, QdMockCalendarComponent, QdMockCheckboxChipsComponent, QdMockCheckboxComponent, QdMockCheckboxesComponent, QdMockChipComponent, QdMockChipModule, QdMockColumnDirective, QdMockColumnsDirective, QdMockContactCardComponent, QdMockContactCardModule, QdMockContainerPairsCaptionComponent, QdMockContainerPairsContainerComponent, QdMockContainerPairsHeaderComponent, QdMockContainerPairsItemComponent, QdMockContainerPairsValueComponent, QdMockCoreModule, QdMockCounterBadgeComponent, QdMockDatepickerComponent, QdMockDisabledDirective, QdMockDropdownComponent, QdMockFileCollectorComponent, QdMockFileCollectorModule, QdMockFilterCategoryBooleanComponent, QdMockFilterCategoryComponent, QdMockFilterCategoryDateComponent, QdMockFilterCategoryDateRangeComponent, QdMockFilterCategoryFreeTextComponent, QdMockFilterCategorySelectComponent, QdMockFilterComponent, QdMockFilterFormItemsComponent, QdMockFilterItemBooleanComponent, QdMockFilterItemDateComponent, QdMockFilterItemDateRangeComponent, QdMockFilterItemFreeTextComponent, QdMockFilterItemMultiSelectComponent, QdMockFilterItemSingleSelectComponent, QdMockFilterModule, QdMockFilterService, QdMockFormErrorComponent, QdMockFormGroupErrorComponent, QdMockFormHintComponent, QdMockFormLabelComponent, QdMockFormReadonlyComponent, QdMockFormViewonlyComponent, QdMockFormsModule, QdMockGridModule, QdMockIconButtonComponent, QdMockIconComponent, QdMockIconModule, QdMockImageComponent, QdMockImageModule, QdMockIndeterminateProgressBarComponent, QdMockInputComponent, QdMockListModule, QdMockNavigationTileComponent, QdMockNavigationTilesComponent, QdMockNavigationTilesModule, QdMockNotificationComponent, QdMockNotificationContentComponent, QdMockNotificationsComponent, QdMockNotificationsModule, QdMockNotificationsService, QdMockPageComponent, QdMockPageModule, QdMockPercentageProgressBarComponent, QdMockPinCodeComponent, QdMockPlaceHolderModule, QdMockPopoverOnClickDirective, QdMockProgressBarModule, QdMockQdPlaceHolderComponent, QdMockRadioButtonsComponent, QdMockRwdDisabledDirective, QdMockSearchComponent, QdMockSearchModule, QdMockSectionComponent, QdMockSectionModule, QdMockShellComponent, QdMockShellFooterComponent, QdMockShellHeaderBannerComponent, QdMockShellHeaderComponent, QdMockShellHeaderSearchComponent, QdMockShellHeaderWidgetComponent, QdMockShellModule, QdMockShellToolbarComponent, QdMockShellToolbarItemComponent, QdMockStatusIndicatorCaptionComponent, QdMockStatusIndicatorComponent, QdMockStatusIndicatorItemComponent, QdMockStatusIndicatorModule, QdMockStatusPairsCaptionComponent, QdMockStatusPairsComponent, QdMockStatusPairsErrorComponent, QdMockStatusPairsItemComponent, QdMockStatusPairsValueComponent, QdMockSwitchComponent, QdMockSwitchesComponent, QdMockTableComponent, QdMockTableModule, QdMockTextSectionComponent, QdMockTextSectionHeadlineComponent, QdMockTextSectionModule, QdMockTextSectionParagraphComponent, QdMockTextareaComponent, QdMockTileButtonListComponent, QdMockTileComponent, QdMockTileTextListComponent, QdMockTileTextListItemComponent, QdMockTileTitleComponent, QdMockTilesContainerComponent, QdMockTilesContainerTitleComponent, QdMockTilesModule, QdMockTranslatePipe, QdMockVisuallyHiddenDirective, QdMultiInputComponent, QdNavigationTilesModule, QdNotificationComponent, QdNotificationContentComponent, QdNotificationsComponent, QdNotificationsHttpInterceptorService, QdNotificationsModule, QdNotificationsService, QdNotificationsSnackbarListenerDirective, QdPageComponent, QdPageControlPanelComponent, QdPageFooterComponent, QdPageFooterCustomContentDirective, QdPageInfoBannerComponent, QdPageModule, QdPageStepComponent, QdPageStepperAdapterDirective, QdPageStepperComponent, QdPageStepperModule, QdPageStoreService, QdPageTabComponent, QdPageTabsAdapterDirective, QdPageTabsComponent, QdPageTabsModule, QdPanelSectionActionsComponent, QdPanelSectionComponent, QdPanelSectionModule, QdPanelSectionStatusComponent, QdPanelSectionTextParagraphComponent, QdPendingChangesGuardDirective, QdPercentageProgressBarComponent, QdPinCodeComponent, QdPlaceHolderComponent, QdPlaceHolderModule, QdPlaceholderPipe, QdProgressBarModule, QdProjectionGuardComponent, QdPushEventsService, QdQuickEditComponent, QdQuickEditModule, QdRadioButtonsComponent, QdRichtextComponent, QdRouterQueryParamHubService, QdRwdDisabledDirective, QdSearchComponent, QdSearchModule, QdSectionAdapterDirective, QdSectionComponent, QdSectionModule, QdSectionToolbarComponent, QdShellComponent, QdShellModule, QdSortDirection, QdSpinnerComponent, QdSpinnerModule, QdStatusIndicatorComponent, QdStatusIndicatorModule, QdStatusPairsCaptionComponent, QdStatusPairsComponent, QdStatusPairsErrorComponent, QdStatusPairsItemComponent, QdStatusPairsValueComponent, QdSubgridComponent, QdSwitchComponent, QdSwitchesComponent, QdTableComponent, QdTableModule, QdTableSpringTools, QdTextSectionComponent, QdTextSectionHeadlineComponent, QdTextSectionModule, QdTextSectionParagraphComponent, QdTextareaComponent, QdTileButtonListComponent, QdTileComponent, QdTileTextListComponent, QdTileTextListItemComponent, QdTileTitleComponent, QdTilesComponent, QdTilesModule, QdTilesTitleComponent, QdTooltipAtIntersectionDirective, QdTooltipIconComponent, QdTreeComponent, QdTreeModule, QdTreeRowExpanderService, QdUiMockModule, QdUiModule, QdUploadErrorType, QdValidators, QdViewportAdaptiveDirective, QdVisuallyHiddenDirective, chipColorDefault, createMetadataStream, updateHtmlLang };
 //# sourceMappingURL=quadrel-enterprise-ui-framework.mjs.map