@quadrel-enterprise-ui/framework 20.14.0 → 20.15.1

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

@@ -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 { EventSourcePolyfill } from 'event-source-polyfill';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { EventSourcePolyfill } from 'event-source-polyfill';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i3$1 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
@@ -35,6 +35,8 @@ import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import * as i1$1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createSelector, createFeatureSelector, Store, StoreModule } from '@ngrx/store';
 import { diff } from 'deep-object-diff';
+import * as i1$2 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import isObject from 'lodash/isObject';
 import omit from 'lodash/omit';
 import { Directionality } from '@angular/cdk/bidi';
@@ -973,6 +975,8 @@ class QdButtonAdditionalInfoComponent {
                 return 'warningHexFilled';
             case 'info':
                 return 'exclamationCircle';
+            default:
+                return '';
         }
     }
     get infoType() {
@@ -1604,6 +1608,24 @@ 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, '_');
 
@@ -2058,8 +2080,6 @@ class QdMockPopoverOnClickDirective {
     closed = new EventEmitter();
     _open = false;
     _embeddedView;
-    ngOnInit() { }
-    ngOnDestroy() { }
     show(event) {
         if (this.qdPopoverStopPropagation)
             event.stopPropagation();
@@ -6636,6 +6656,8 @@ 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) {
@@ -6687,6 +6709,8 @@ 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;
@@ -6715,406 +6739,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }] } });
 
-class QdRwdDisabledDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdRwdDisabledDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdRwdDisabledDirective, isStandalone: false, selector: "[qdRwdDisabled]", host: { classAttribute: "qd-rwd-disabled" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdRwdDisabledDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[qdRwdDisabled]',
-                    host: { class: 'qd-rwd-disabled' },
-                    standalone: false
-                }]
-        }] });
-
-var breakpoints$1 = {
-	xs: 320,
-	sm: 600,
-	md: 960,
-	lg: 1280,
-	xl: 1600,
-	xxl: 1800
-};
-var panel = {
-	sm: 432,
-	md: 588,
-	lg: 720
-};
-var base = {
-	fontsize: 16
-};
-var globalVars = {
-	breakpoints: breakpoints$1,
-	panel: panel,
-	base: base
-};
-
-const convertPxToRem = (pixel) => `${parseFloat((pixel / globalVars.base.fontsize).toFixed(3))}rem`;
-
-class QdTooltipComponent {
-    content;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTooltipComponent, isStandalone: false, selector: "qd-tooltip", inputs: { content: "content" }, ngImport: i0, template: "<ng-container *ngIf=\"content?.headline\">\n  <strong>{{ content.headline }}</strong>\n</ng-container>\n\n<ng-container *ngFor=\"let paragraph of content.paragraphs\">\n  <p>{{ paragraph }}</p>\n</ng-container>\n", styles: [":host{box-shadow:0 0 .625rem #979797;display:block;width:100%;max-width:16rem;padding:.5rem;border-radius:.5rem;background-color:#000;color:#fff;font-size:.75rem;line-height:1rem}:host strong,:host p{display:block}:host p{margin:0 0 .5rem}:host p:last-child{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'qd-tooltip', standalone: false, template: "<ng-container *ngIf=\"content?.headline\">\n  <strong>{{ content.headline }}</strong>\n</ng-container>\n\n<ng-container *ngFor=\"let paragraph of content.paragraphs\">\n  <p>{{ paragraph }}</p>\n</ng-container>\n", styles: [":host{box-shadow:0 0 .625rem #979797;display:block;width:100%;max-width:16rem;padding:.5rem;border-radius:.5rem;background-color:#000;color:#fff;font-size:.75rem;line-height:1rem}:host strong,:host p{display:block}:host p{margin:0 0 .5rem}:host p:last-child{margin-bottom:0}\n"] }]
-        }], propDecorators: { content: [{
-                type: Input
-            }] } });
-
-const TARGET_SELECTOR = '.qd-intersection-target';
-const SHOW_EVENTS = ['mouseenter', 'mousemove'];
-const HIDE_EVENTS = ['mouseleave', 'click'];
-const HIDE_DELAY = 300;
-const OVERLAY_WIDTH = 280;
-const UNSUBSCRIBE_IMMEDIATELY = true;
-const THRESHOLD = 1;
-/**
- * QdTooltipAtIntersectionDirective provides a tooltip. This will be triggered if the content is intersected.
- *
- * * Selector: [qdTooltipAtIntersection]
- * * Target Selector: .qd-intersection-target
- *
- * The IntersectionObserver API is used for the implementation.
- * * @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
- *
- * * Note: The intersection of the target is calculated by the IntersectionObserver only once, initially (can be extended later if required). After that it will be unsubscribed immediately.
- * */
-class QdTooltipAtIntersectionDirective {
-    _host = inject(ElementRef);
-    _positionBuilder = inject(OverlayPositionBuilder);
-    _overlay = inject(Overlay);
-    _overlayRef;
-    _target;
-    _observer$;
-    _isIntersected = false;
-    _destroyed$ = new Subject();
-    ngAfterViewInit() {
-        this.setTarget();
-        this.observeTarget();
-        this.createOverlay();
-        this.subscribeShow();
-        this.subscribeHide();
-    }
-    ngOnDestroy() {
-        this._observer$.unobserve(this._target);
-        this._destroyed$.next();
-        this._destroyed$.complete();
-    }
-    setTarget() {
-        this._target = this._host.nativeElement.querySelector(TARGET_SELECTOR);
-    }
-    observeTarget() {
-        const options = {
-            root: this._host.nativeElement,
-            threshold: THRESHOLD
-        };
-        this._observer$ = new IntersectionObserver(entries => {
-            this._isIntersected = entries[0].intersectionRatio < 1;
-            if (this._isIntersected) {
-                this._setStyles();
-                if (UNSUBSCRIBE_IMMEDIATELY)
-                    this._observer$.unobserve(this._target);
-            }
-        }, options);
-        this._observer$.observe(this._target);
-    }
-    _setStyles() {
-        this._target.style.overflow = 'hidden';
-        this._target.style.textOverflow = 'ellipsis';
-        this._target.style.cursor = 'help';
-    }
-    createOverlay() {
-        this._overlayRef = this._overlay.create({
-            positionStrategy: this._positionBuilder
-                .flexibleConnectedTo(this._host)
-                .withPositions([{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' }]),
-            width: convertPxToRem(OVERLAY_WIDTH)
-        });
-    }
-    subscribeShow() {
-        merge(...SHOW_EVENTS.map(event => fromEvent(this._host.nativeElement, event)))
-            .pipe(takeUntil(this._destroyed$), filter(() => !this._overlayRef.hasAttached() && this._isIntersected))
-            .subscribe(() => {
-            const content = this.getContent();
-            const tooltipPortal = new ComponentPortal(QdTooltipComponent);
-            const tooltipRef = this._overlayRef.attach(tooltipPortal);
-            tooltipRef.instance.content = content;
-        });
-    }
-    subscribeHide() {
-        merge(...HIDE_EVENTS.map(event => fromEvent(this._host.nativeElement, event)))
-            .pipe(takeUntil(this._destroyed$), filter(() => this._overlayRef.hasAttached()), debounceTime(HIDE_DELAY))
-            .subscribe(() => this._overlayRef.detach());
-    }
-    getContent() {
-        return {
-            headline: this._target.getAttribute('data-tooltip-headline') || undefined,
-            paragraphs: [this._target.textContent?.trim() || '']
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipAtIntersectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdTooltipAtIntersectionDirective, isStandalone: false, selector: "[qdTooltipAtIntersection]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipAtIntersectionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[qdTooltipAtIntersection]',
-                    standalone: false
-                }]
-        }] });
-
-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.
  *
@@ -7404,6 +7028,515 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+class QdRwdDisabledDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdRwdDisabledDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdRwdDisabledDirective, isStandalone: false, selector: "[qdRwdDisabled]", host: { classAttribute: "qd-rwd-disabled" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdRwdDisabledDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[qdRwdDisabled]',
+                    host: { class: 'qd-rwd-disabled' },
+                    standalone: false
+                }]
+        }] });
+
+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,
+	md: 960,
+	lg: 1280,
+	xl: 1600,
+	xxl: 1800
+};
+var panel = {
+	sm: 432,
+	md: 588,
+	lg: 720
+};
+var base = {
+	fontsize: 16
+};
+var globalVars = {
+	breakpoints: breakpoints$1,
+	panel: panel,
+	base: base
+};
+
+const convertPxToRem = (pixel) => `${parseFloat((pixel / globalVars.base.fontsize).toFixed(3))}rem`;
+
+class QdTooltipComponent {
+    content;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTooltipComponent, isStandalone: false, selector: "qd-tooltip", inputs: { content: "content" }, ngImport: i0, template: "<ng-container *ngIf=\"content?.headline\">\n  <strong>{{ content.headline }}</strong>\n</ng-container>\n\n<ng-container *ngFor=\"let paragraph of content.paragraphs\">\n  <p>{{ paragraph }}</p>\n</ng-container>\n", styles: [":host{box-shadow:0 0 .625rem #979797;display:block;width:100%;max-width:16rem;padding:.5rem;border-radius:.5rem;background-color:#000;color:#fff;font-size:.75rem;line-height:1rem}:host strong,:host p{display:block}:host p{margin:0 0 .5rem}:host p:last-child{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'qd-tooltip', standalone: false, template: "<ng-container *ngIf=\"content?.headline\">\n  <strong>{{ content.headline }}</strong>\n</ng-container>\n\n<ng-container *ngFor=\"let paragraph of content.paragraphs\">\n  <p>{{ paragraph }}</p>\n</ng-container>\n", styles: [":host{box-shadow:0 0 .625rem #979797;display:block;width:100%;max-width:16rem;padding:.5rem;border-radius:.5rem;background-color:#000;color:#fff;font-size:.75rem;line-height:1rem}:host strong,:host p{display:block}:host p{margin:0 0 .5rem}:host p:last-child{margin-bottom:0}\n"] }]
+        }], propDecorators: { content: [{
+                type: Input
+            }] } });
+
+const TARGET_SELECTOR = '.qd-intersection-target';
+const SHOW_EVENTS = ['mouseenter', 'mousemove'];
+const HIDE_EVENTS = ['mouseleave', 'click'];
+const HIDE_DELAY = 300;
+const OVERLAY_WIDTH = 280;
+const UNSUBSCRIBE_IMMEDIATELY = true;
+const THRESHOLD = 1;
+/**
+ * @deprecated Will be removed in v21. This directive is no longer used inside
+ * the framework. Use `QdTooltipOnClickDirective` (`[qdTooltipOnClick]`) instead.
+ *
+ * QdTooltipAtIntersectionDirective provides a tooltip. This will be triggered if the content is intersected.
+ *
+ * * Selector: [qdTooltipAtIntersection]
+ * * Target Selector: .qd-intersection-target
+ *
+ * The IntersectionObserver API is used for the implementation.
+ * * @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
+ *
+ * * Note: The intersection of the target is calculated by the IntersectionObserver only once, initially (can be extended later if required). After that it will be unsubscribed immediately.
+ * */
+class QdTooltipAtIntersectionDirective {
+    _host = inject(ElementRef);
+    _positionBuilder = inject(OverlayPositionBuilder);
+    _overlay = inject(Overlay);
+    _overlayRef;
+    _target;
+    _observer$;
+    _isIntersected = false;
+    _destroyed$ = new Subject();
+    ngAfterViewInit() {
+        this.setTarget();
+        this.observeTarget();
+        this.createOverlay();
+        this.subscribeShow();
+        this.subscribeHide();
+    }
+    ngOnDestroy() {
+        this._observer$.unobserve(this._target);
+        this._destroyed$.next();
+        this._destroyed$.complete();
+    }
+    setTarget() {
+        this._target = this._host.nativeElement.querySelector(TARGET_SELECTOR);
+    }
+    observeTarget() {
+        const options = {
+            root: this._host.nativeElement,
+            threshold: THRESHOLD
+        };
+        this._observer$ = new IntersectionObserver(entries => {
+            this._isIntersected = entries[0].intersectionRatio < 1;
+            if (this._isIntersected) {
+                this._setStyles();
+                if (UNSUBSCRIBE_IMMEDIATELY)
+                    this._observer$.unobserve(this._target);
+            }
+        }, options);
+        this._observer$.observe(this._target);
+    }
+    _setStyles() {
+        this._target.style.overflow = 'hidden';
+        this._target.style.textOverflow = 'ellipsis';
+        this._target.style.cursor = 'help';
+    }
+    createOverlay() {
+        this._overlayRef = this._overlay.create({
+            positionStrategy: this._positionBuilder
+                .flexibleConnectedTo(this._host)
+                .withPositions([{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' }]),
+            width: convertPxToRem(OVERLAY_WIDTH),
+            scrollStrategy: this._overlay.scrollStrategies.reposition()
+        });
+    }
+    subscribeShow() {
+        merge(...SHOW_EVENTS.map(event => fromEvent(this._host.nativeElement, event)))
+            .pipe(takeUntil(this._destroyed$), filter(() => !this._overlayRef.hasAttached() && this._isIntersected))
+            .subscribe(() => {
+            const content = this.getContent();
+            const tooltipPortal = new ComponentPortal(QdTooltipComponent);
+            const tooltipRef = this._overlayRef.attach(tooltipPortal);
+            tooltipRef.instance.content = content;
+        });
+    }
+    subscribeHide() {
+        merge(...HIDE_EVENTS.map(event => fromEvent(this._host.nativeElement, event)))
+            .pipe(takeUntil(this._destroyed$), filter(() => this._overlayRef.hasAttached()), debounceTime(HIDE_DELAY))
+            .subscribe(() => this._overlayRef.detach());
+    }
+    getContent() {
+        return {
+            headline: this._target.getAttribute('data-tooltip-headline') || undefined,
+            paragraphs: [this._target.textContent?.trim() || '']
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipAtIntersectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdTooltipAtIntersectionDirective, isStandalone: false, selector: "[qdTooltipAtIntersection]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTooltipAtIntersectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[qdTooltipAtIntersection]',
+                    standalone: false
+                }]
+        }] });
+
 const MAX_TOOLTIP_CHARACTER = 512;
 const TOOLTIP_POSITIONS = [
     { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
@@ -7435,7 +7568,10 @@ class QdTooltipOnClickDirective {
             .withFlexibleDimensions(false)
             .withPush(false)
             .withPositions(TOOLTIP_POSITIONS);
-        this._overlayRef = this.overlay.create({ positionStrategy });
+        this._overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
         const tooltipRef = this._overlayRef.attach(new ComponentPortal(QdTooltipComponent));
         tooltipRef.instance.content = this.getContent();
     }
@@ -7509,9 +7645,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }] } });
 
-const QD_SAFE_BOTTOM_OFFSET = new InjectionToken('QD_SAFE_BOTTOM_OFFSET');
-
-const QD_POPOVER_TOP_FIRST = new InjectionToken('QD_POPOVER_TOP_FIRST');
+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
+                }]
+        }] });
 
 class QdCoreModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -8041,6 +8186,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 
 // @ts-strict-ignore
+/**
+ * @deprecated Will be removed in v21. This directive is no longer used inside
+ * the framework. Use `QdPopoverOnClickDirective` (`[qdPopoverOnClick]`) instead.
+ */
 class QdPopoverOnHoverDirective {
     hostRef = inject(ElementRef);
     overlayPositionBuilder = inject(OverlayPositionBuilder);
@@ -8067,7 +8216,12 @@ class QdPopoverOnHoverDirective {
                 overlayY: 'top'
             }
         ]);
-        this.overlayRef = this.overlay.create({ positionStrategy, width: this.qdPopoverWidth, disposeOnNavigation: true });
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            width: this.qdPopoverWidth,
+            disposeOnNavigation: true,
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
     }
     ngOnDestroy() {
         this.close();
@@ -8589,11 +8743,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}: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}.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" }] });
 }
 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}: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}.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"] }]
         }], propDecorators: { hint: [{
                 type: Input
             }], control: [{
@@ -11218,6 +11372,7 @@ 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.
      */
@@ -11292,9 +11447,13 @@ class QdInputComponent {
     get isErrorFromOutside() {
         return this.isError;
     }
+    get isAmbiguousState() {
+        return this.isAmbiguousInput;
+    }
     inputElement;
     inputType;
     inputMode;
+    htmlInputType;
     placeholder;
     label;
     hint;
@@ -11306,6 +11465,7 @@ class QdInputComponent {
     control;
     _optionsResolver;
     _subs = new Subscription();
+    _isUserTyped = false;
     _onChange = () => { };
     _onTouch = () => { };
     get hasOnlyUnitsError() {
@@ -11314,6 +11474,15 @@ 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;
@@ -11326,11 +11495,14 @@ class QdInputComponent {
     }
     get maxLength() {
         if (!(this.control instanceof QdFormControl))
-            return;
+            return undefined;
         return this.control.getMaxLengthOrUndefined();
     }
     get valueAsList() {
-        return [`${this._value.value}${this._value.unit ? ' ' + this._value.unit : ''}`];
+        const displayValue = this.inputType === 'number'
+            ? this.numberInputService.formatNumberForViewonly(this._value.value)
+            : this._value.value;
+        return [`${displayValue}${this._value.unit ? ' ' + this._value.unit : ''}`];
     }
     ngOnInit() {
         this.initializeOptionsResolver();
@@ -11343,6 +11515,11 @@ 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()));
@@ -11373,6 +11550,8 @@ class QdInputComponent {
     writeValue(value) {
         this._value = getValueWithUnit(value, this.config);
         this._displayValue = String(this._value.value ?? '');
+        this._isUserTyped = false;
+        this.applyDisplayFormat();
     }
     setDisabledState(disabled) {
         this.disabled = disabled;
@@ -11384,6 +11563,36 @@ 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();
@@ -11440,6 +11649,15 @@ 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);
@@ -11458,13 +11676,15 @@ 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) {
-            this.valueChange.emit(this._value);
-            this._onChange(this._value);
+            const emittableWithUnit = { ...this._value, value: emittable };
+            this.valueChange.emit(emittableWithUnit);
+            this._onChange(emittableWithUnit);
         }
         else {
-            this.valueChange.emit(this._value.value);
-            this._onChange(this._value.value);
+            this.valueChange.emit(emittable);
+            this._onChange(emittable);
         }
     }
     initOpModeSubscription() {
@@ -11480,16 +11700,25 @@ class QdInputComponent {
         if (!this.control)
             return;
         const modelValue = this.control.value;
-        if (modelValue == null)
-            return void (this._value = getValueWithUnit(modelValue, this.config));
+        if (modelValue == null) {
+            this._value = getValueWithUnit(modelValue, this.config);
+            return;
+        }
         const normalized = getValueWithUnit(modelValue, this.config);
         const target = this.hasUnits ? normalized : normalized.value;
         if (!isEqual(modelValue, target))
             this.control.setValue(target, { emitEvent: false });
         this._value = normalized;
+        this.applyDisplayFormat();
+    }
+    applyDisplayFormat() {
+        if (this.inputType === 'number') {
+            this._value = { ...this._value, value: this.numberInputService.formatValueForDisplay(this._value.value) };
+            this._displayValue = String(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" } }, 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", "class.qd-input-ambiguous": "this.isAmbiguousState" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: QdInputComponent,
@@ -11497,13 +11726,14 @@ 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</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" }] });
+        ], 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputComponent, decorators: [{
             type: Component,
@@ -11515,13 +11745,14 @@ 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</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"] }]
+                    ], 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"] }]
         }], propDecorators: { formControlName: [{
                 type: Input
             }], value: [{
@@ -11581,6 +11812,9 @@ 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']
@@ -15516,7 +15750,7 @@ class QdTextareaComponent {
     }
     get maxLength() {
         if (!(this.control instanceof QdFormControl))
-            return;
+            return undefined;
         return this.control.getMaxLengthOrUndefined();
     }
     ngOnInit() {
@@ -25820,7 +26054,7 @@ class QdSectionToolbarComponent {
     toolbarComponents;
     get searchConfigData() {
         if (this.config.search === false)
-            return;
+            return undefined;
         return this.config.search;
     }
     get filterData() {
@@ -27256,11 +27490,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class QdPageControlPanelComponent {
     config;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageControlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageControlPanelComponent, isStandalone: false, selector: "qd-page-control-panel", inputs: { config: "config" }, ngImport: i0, template: "<header>\n  {{ config.title.i18n | translate }}\n</header>\n\n<main>\n  <ng-content select=\"qd-text-section\"></ng-content>\n  <ng-content select=\"qd-panel-section\"></ng-content>\n  <ng-content select=\"qd-section\"></ng-content>\n</main>\n", styles: ["qd-page-control-panel{position:relative;display:flex;height:100%;flex-direction:column;background:#fff}qd-page-control-panel header{padding:.75rem 1rem .5rem;border-bottom:.125rem solid rgb(213,213,213);color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}qd-page-control-panel main{flex-grow:99;overflow-y:auto}qd-page-control-panel qd-panel-section:last-child{margin-bottom:.75rem}qd-page-control-panel qd-section{margin:0 1rem}qd-page-control-panel qd-section:first-child{margin-top:1rem}qd-page-control-panel qd-section:last-child{margin-bottom:1rem}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageControlPanelComponent, isStandalone: false, selector: "qd-page-control-panel", inputs: { config: "config" }, ngImport: i0, template: "<header>\n  {{ config.title.i18n | translate }}\n</header>\n\n<main cdkScrollable>\n  <ng-content select=\"qd-text-section\"></ng-content>\n  <ng-content select=\"qd-panel-section\"></ng-content>\n  <ng-content select=\"qd-section\"></ng-content>\n</main>\n", styles: ["qd-page-control-panel{position:relative;display:flex;height:100%;flex-direction:column;background:#fff}qd-page-control-panel header{padding:.75rem 1rem .5rem;border-bottom:.125rem solid rgb(213,213,213);color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}qd-page-control-panel main{flex-grow:99;overflow-y:auto}qd-page-control-panel qd-panel-section:last-child{margin-bottom:.75rem}qd-page-control-panel qd-section{margin:0 1rem}qd-page-control-panel qd-section:first-child{margin-top:1rem}qd-page-control-panel qd-section:last-child{margin-bottom:1rem}\n"], dependencies: [{ kind: "directive", type: i1$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageControlPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-page-control-panel', encapsulation: ViewEncapsulation.None, standalone: false, template: "<header>\n  {{ config.title.i18n | translate }}\n</header>\n\n<main>\n  <ng-content select=\"qd-text-section\"></ng-content>\n  <ng-content select=\"qd-panel-section\"></ng-content>\n  <ng-content select=\"qd-section\"></ng-content>\n</main>\n", styles: ["qd-page-control-panel{position:relative;display:flex;height:100%;flex-direction:column;background:#fff}qd-page-control-panel header{padding:.75rem 1rem .5rem;border-bottom:.125rem solid rgb(213,213,213);color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}qd-page-control-panel main{flex-grow:99;overflow-y:auto}qd-page-control-panel qd-panel-section:last-child{margin-bottom:.75rem}qd-page-control-panel qd-section{margin:0 1rem}qd-page-control-panel qd-section:first-child{margin-top:1rem}qd-page-control-panel qd-section:last-child{margin-bottom:1rem}\n"] }]
+            args: [{ selector: 'qd-page-control-panel', encapsulation: ViewEncapsulation.None, standalone: false, template: "<header>\n  {{ config.title.i18n | translate }}\n</header>\n\n<main cdkScrollable>\n  <ng-content select=\"qd-text-section\"></ng-content>\n  <ng-content select=\"qd-panel-section\"></ng-content>\n  <ng-content select=\"qd-section\"></ng-content>\n</main>\n", styles: ["qd-page-control-panel{position:relative;display:flex;height:100%;flex-direction:column;background:#fff}qd-page-control-panel header{padding:.75rem 1rem .5rem;border-bottom:.125rem solid rgb(213,213,213);color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}qd-page-control-panel main{flex-grow:99;overflow-y:auto}qd-page-control-panel qd-panel-section:last-child{margin-bottom:.75rem}qd-page-control-panel qd-section{margin:0 1rem}qd-page-control-panel qd-section:first-child{margin-top:1rem}qd-page-control-panel qd-section:last-child{margin-bottom:1rem}\n"] }]
         }], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -28382,6 +28616,7 @@ class QdPageObjectHeaderComponent {
     get headerFacets() {
         if (this.hasHeaderFacets(this.config))
             return this.config.headerFacets;
+        return undefined;
     }
     get isInspectAndViewMode$() {
         return this.pageStoreService.isViewonly$.pipe(takeUntil(this._destroyed$), map(isView => this.config.pageType === 'inspect' && isView));
@@ -29187,7 +29422,7 @@ class QdPageTabHeaderComponent extends CdkStepHeader {
         super(elementRef);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabHeaderComponent, isStandalone: true, selector: "qd-page-tab-header", inputs: { state: "state", label: "label", counters: "counters", index: "index", isSelected: "isSelected", isDisabled: "isDisabled", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "testId", "class.qd-tab-current": "isSelected && !isDisabled", "class.qd-tab-disabled": "isDisabled", "class.qd-tab-done": "state === STEP_STATE.DONE", "class.qd-tab-edit": "state === STEP_STATE.EDIT", "class.qd-tab-error": "state === STEP_STATE.ERROR" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"], dependencies: [{ kind: "component", type: QdPageTabHeaderCountersComponent, selector: "qd-page-tab-header-counters", inputs: ["counters", "data-test-id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabHeaderComponent, isStandalone: true, selector: "qd-page-tab-header", inputs: { state: "state", label: "label", counters: "counters", index: "index", isSelected: "isSelected", isDisabled: "isDisabled", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "testId", "class.qd-tab-current": "isSelected && !isDisabled", "class.qd-tab-disabled": "isDisabled", "class.qd-tab-done": "state === STEP_STATE.DONE", "class.qd-tab-edit": "state === STEP_STATE.EDIT", "class.qd-tab-error": "state === STEP_STATE.ERROR" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500;white-space:nowrap}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"], dependencies: [{ kind: "component", type: QdPageTabHeaderCountersComponent, selector: "qd-page-tab-header-counters", inputs: ["counters", "data-test-id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabHeaderComponent, decorators: [{
             type: Component,
@@ -29198,7 +29433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         '[class.qd-tab-done]': 'state === STEP_STATE.DONE',
                         '[class.qd-tab-edit]': 'state === STEP_STATE.EDIT',
                         '[class.qd-tab-error]': 'state === STEP_STATE.ERROR'
-                    }, standalone: true, imports: [QdPageTabHeaderCountersComponent], template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"] }]
+                    }, standalone: true, imports: [QdPageTabHeaderCountersComponent], template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500;white-space:nowrap}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"] }]
         }], ctorParameters: () => [], propDecorators: { state: [{
                 type: Input
             }], label: [{
@@ -30437,7 +30672,7 @@ class QdPageComponent {
             QdPageSubmitActionService,
             QdResolverTriggerService,
             QdPageNavigationInterceptorService
-        ], queries: [{ propertyName: "controlPanel", first: true, predicate: QdPageControlPanelComponent, descendants: true }, { propertyName: "stepperComponent", first: true, predicate: QdPageStepperComponent, descendants: true }, { propertyName: "tabsComponent", first: true, predicate: QdPageTabsComponent, descendants: true }, { propertyName: "stepperAdapterDirective", first: true, predicate: QdPageStepperAdapterDirective, descendants: true }, { propertyName: "tabsAdapterDirective", first: true, predicate: QdPageTabsAdapterDirective, descendants: true }, { propertyName: "sections", predicate: QdSectionComponent }, { propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesOnChanges: true, ngImport: i0, template: "<main qdSnackbarListener>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\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: "component", type: QdProjectionGuardComponent, selector: "qd-projection-guard", inputs: ["isDisabled", "warningMessage"] }, { kind: "component", type: QdPageFooterComponent, selector: "qd-page-footer" }, { kind: "component", type: QdPageObjectHeaderComponent, selector: "qd-page-object-header", inputs: ["config", "hasNavigation", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+        ], queries: [{ propertyName: "controlPanel", first: true, predicate: QdPageControlPanelComponent, descendants: true }, { propertyName: "stepperComponent", first: true, predicate: QdPageStepperComponent, descendants: true }, { propertyName: "tabsComponent", first: true, predicate: QdPageTabsComponent, descendants: true }, { propertyName: "stepperAdapterDirective", first: true, predicate: QdPageStepperAdapterDirective, descendants: true }, { propertyName: "tabsAdapterDirective", first: true, predicate: QdPageTabsAdapterDirective, descendants: true }, { propertyName: "sections", predicate: QdSectionComponent }, { propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesOnChanges: true, ngImport: i0, template: "<main qdSnackbarListener cdkScrollable>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\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: i1$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: QdProjectionGuardComponent, selector: "qd-projection-guard", inputs: ["isDisabled", "warningMessage"] }, { kind: "component", type: QdPageFooterComponent, selector: "qd-page-footer" }, { kind: "component", type: QdPageObjectHeaderComponent, selector: "qd-page-object-header", inputs: ["config", "hasNavigation", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageComponent, decorators: [{
             type: Component,
@@ -30447,7 +30682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdPageSubmitActionService,
                         QdResolverTriggerService,
                         QdPageNavigationInterceptorService
-                    ], host: { '[class.has-control-panel]': 'isControlPanelVisible', '[class.control-panel-broad]': 'isControlPanelBroad' }, standalone: false, template: "<main qdSnackbarListener>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\n"] }]
+                    ], host: { '[class.has-control-panel]': 'isControlPanelVisible', '[class.control-panel-broad]': 'isControlPanelBroad' }, standalone: false, template: "<main qdSnackbarListener cdkScrollable>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -30594,6 +30829,7 @@ class QdPageModule {
             QdPageFooterCustomContentDirective,
             QdContextSelectDialogComponent,
             QdPageInfoBannerComponent], imports: [CommonModule,
+            ScrollingModule,
             TranslateModule,
             QdButtonModule,
             QdButtonModule,
@@ -30622,6 +30858,7 @@ class QdPageModule {
                 useValue: DynamicFacetsServiceInstance
             }
         ], imports: [CommonModule,
+            ScrollingModule,
             TranslateModule,
             QdButtonModule,
             QdButtonModule,
@@ -30643,6 +30880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{
                     imports: [
                         CommonModule,
+                        ScrollingModule,
                         TranslateModule,
                         QdButtonModule,
                         QdButtonModule,
@@ -30999,7 +31237,7 @@ class QdShellHeaderBannerComponent {
     bannerService = inject(QdShellBannerService);
     get colorClassName() {
         if (this.bannerService.isProduction || this.bannerService.bannerText === '')
-            return;
+            return '';
         return 'qd-shell__banner qd-shell__banner--' + this.bannerService.bannerText.toLowerCase();
     }
     get shouldRender() {
@@ -31415,6 +31653,7 @@ class QdShellServiceNavigationComponent {
     _config;
     _destroyed$ = new Subject();
     _attributesHaveBeenSet$ = new ReplaySubject(1);
+    localeService = inject(QdLocaleService);
     ngOnInit() {
         loadJavascriptAsset(this.config?.javascriptAssetPath ?? DEFAULT_JAVASCRIPT_ASSET_PATH$1, {
             defer: '',
@@ -31457,6 +31696,7 @@ class QdShellServiceNavigationComponent {
         this._destroyed$.complete();
     }
     handleLanguageChange($event) {
+        this.localeService.setServiceNavigationLanguage($event.detail);
         this.useLanguage($event.detail);
     }
     handleLoginStatusChange($event) {
@@ -33273,6 +33513,8 @@ class QdPageTabComponent extends CdkStep {
     }
     ngOnInit() {
         this.validateLabel();
+        if (this.tabControl)
+            this.initErrorCheck();
     }
     ngOnChanges(changes) {
         super.ngOnChanges();
@@ -33290,6 +33532,24 @@ class QdPageTabComponent extends CdkStep {
         if (!this.config?.label?.i18n)
             console.error('Quadrel Framework | QdPageTab - Please provide a label for the tab.');
     }
+    initErrorCheck() {
+        this.tabControl.statusChanges.pipe(takeUntil$1(this._destroyed$)).subscribe(() => {
+            if (this.hasAnyError(this.tabControl)) {
+                this.interacted = true;
+            }
+        });
+    }
+    hasAnyError(control) {
+        if (control.errors && control.touched)
+            return true;
+        if (control instanceof FormGroup) {
+            return Object.values(control.controls).some(this.hasAnyError);
+        }
+        if (control instanceof FormArray) {
+            return control.controls.some(this.hasAnyError);
+        }
+        return false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabComponent, isStandalone: true, selector: "qd-page-tab", inputs: { config: "config", tabControl: "tabControl" }, providers: [
             { provide: CdkStep, useExisting: QdPageTabComponent },
@@ -33993,5 +34253,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, 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 };
+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, 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