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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, ViewEncapsulation, Component, Injectable, Injector, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Renderer2, Pipe, ViewContainerRef, NO_ERRORS_SCHEMA, SecurityContext, NgZone, ViewChildren, forwardRef, DestroyRef, ContentChildren, ContentChild, QueryList, CUSTOM_ELEMENTS_SCHEMA, provideAppInitializer, TemplateRef } from '@angular/core';
+import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, ViewEncapsulation, Component, Injectable, Injector, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, NgModule, EventEmitter, Output, Renderer2, Pipe, ViewContainerRef, NO_ERRORS_SCHEMA, DestroyRef, SecurityContext, NgZone, ViewChildren, forwardRef, ContentChildren, ContentChild, isDevMode, QueryList, CUSTOM_ELEMENTS_SCHEMA, provideAppInitializer, TemplateRef } from '@angular/core';
 import { Dialog, DialogRef, DialogModule } from '@angular/cdk/dialog';
 import * as i1 from '@angular/common';
 import { CommonModule, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
@@ -18,6 +18,7 @@ import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, UntypedFormArray, U
 import { ComponentPortal } from '@angular/cdk/portal';
 import { OverlayPositionBuilder, Overlay } from '@angular/cdk/overlay';
 import isNumber from 'lodash/isNumber';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { EventSourcePolyfill } from 'event-source-polyfill';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i3$1 from 'ngx-editor';
@@ -31,7 +32,6 @@ import 'moment/locale/fr';
 import 'moment/locale/it';
 import moment$1 from 'moment/moment';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 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';
@@ -52,7 +52,7 @@ class QdButtonLinkDirective {
     ngOnInit() {
         // TODO: Delete directive "qd-button-link" in Version 21
         if (this._elementRef.nativeElement.attributes.hasOwnProperty('qd-button-link')) {
-            console.warn('QD-UI | QdButtonLinkDirective - The directive "qd-button-link" is deprecated. Please use "qdButtonLink" instead.');
+            console.warn('Quadrel Framework | QdButtonLink - The directive "qd-button-link" is deprecated. Please use "qdButtonLink" instead.');
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdButtonLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -649,7 +649,7 @@ class QdIconComponent {
             this.iconCode = icon.htmlEntity;
         }
         if (!icon) {
-            console.error(`QD-UI | QdIconComponent - ${this.icon} seems not be a valid Quadrel Icon. Please check documentation for available icons.`);
+            console.error(`Quadrel Framework | QdIcon - "${this.icon}" does not appear to be a valid Quadrel Icon. Please check documentation for available icons.`);
         }
     }
     insertIconSvgOnce() {
@@ -698,7 +698,7 @@ class QdSnackbarService {
         if (this.isPausing)
             return;
         if (!this._overlayRef) {
-            console.error('QdUi | QdNotifications: You are trying to open a notification as snackbar but there is no Snackbar Listener initialized.');
+            console.error('Quadrel Framework | QdNotifications - You are trying to open a notification as snackbar but there is no Snackbar Listener initialized.');
             return;
         }
         this._notificationsSubject.next([...this._notificationsSubject.value, notification]);
@@ -916,7 +916,7 @@ class QdNotificationsService {
             return;
         if (this.zeroToInfinity(snackbarNotificationLifeTime) >
             this.zeroToInfinity(this.getNotificationLifeTime(notification))) {
-            console.warn('The life time of the snackbar notification must be shorter than the life time of the main notification.');
+            console.warn('Quadrel Framework | QdNotifications - The life time of the snackbar notification must be shorter than the life time of the main notification.');
             return;
         }
         setTimeout(() => this.snackbarService.close(notification.uuid), snackbarNotificationLifeTime * 1000);
@@ -926,7 +926,7 @@ class QdNotificationsService {
         if (osNotificationLifeTime === undefined)
             return;
         if (this.zeroToInfinity(osNotificationLifeTime) > this.zeroToInfinity(this.getNotificationLifeTime(notification))) {
-            console.warn('The life time of the OS notification must be shorter than the life time of the main notification.');
+            console.warn('Quadrel Framework | QdNotifications - The life time of the OS notification must be shorter than the life time of the main notification.');
             return;
         }
         setTimeout(() => this.osNotificationsService.close(notification.uuid), osNotificationLifeTime * 1000);
@@ -1046,7 +1046,7 @@ class QdButtonComponent {
     ngOnInit() {
         // TODO: Delete directive "qd-button" in Version 20
         if (this._elementRef.nativeElement.attributes.hasOwnProperty('qd-button')) {
-            console.warn('QD-UI | QdButtonComponent - The directive "qd-button" is deprecated. Please use "qdButton" instead.');
+            console.warn('Quadrel Framework | QdButton - The directive "qd-button" is deprecated. Please use "qdButton" instead.');
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1265,7 +1265,7 @@ class QdDialogService {
         this.clearPageDialogCanCloseForce();
         this.updateDialogData(data);
         if (!this.pageDialogHost)
-            throw new Error('QdDialogService | Page dialog host component is not provided.');
+            throw new Error('Quadrel Framework | QdDialog - Page dialog host component is not provided.');
         this.open(this.pageDialogHost, { dialogSize: QdDialogSize.FullWidth });
         this.navigateInsideDialog(routePath || this.getFirstDialogOutletRoutePathOrThrow());
     }
@@ -1326,7 +1326,7 @@ class QdDialogService {
     getFirstDialogOutletRoutePathOrThrow() {
         const firstDialogOutletRoutePath = this.router.config.find(route => route.outlet === 'dialog')?.path;
         if (!firstDialogOutletRoutePath || this.hasRoutePathParameters(firstDialogOutletRoutePath)) {
-            throw new Error('QdDialogService | Please provide a route for the openPageDialogWithBreadcrumbs method. ' +
+            throw new Error('Quadrel Framework | QdDialog - Please provide a route for the openPageDialogWithBreadcrumbs method. ' +
                 'The main dialog route could not be determined automatically.');
         }
         return firstDialogOutletRoutePath;
@@ -1368,7 +1368,7 @@ class QdIconButtonComponent {
     ngOnInit() {
         // TODO: Delete directive "qd-icon-button" in Version 15
         if (this._elementRef.nativeElement.attributes.hasOwnProperty('qd-icon-button')) {
-            console.warn('QD-UI | QdIconButtonComponent - The directive "qd-icon-button" is deprecated. Please use "qdIconButton" instead.');
+            console.warn('Quadrel Framework | QdIconButton - The directive "qd-icon-button" is deprecated. Please use "qdIconButton" instead.');
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1604,6 +1604,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, '_');
 
@@ -6636,6 +6654,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,10 +6707,12 @@ 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;
-    warningMessage = 'QD-UI | QdProjectionGuard - This content is not supported and cannot be displayed:';
+    warningMessage = 'Quadrel Framework | QdProjectionGuard - This content is not supported and cannot be displayed:';
     wildcardSlot;
     ngAfterContentInit() {
         if (this.isDisabled)
@@ -6728,156 +6750,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
-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"] }] });
+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: 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
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdLocaleService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-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();
+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;
     }
-    ngOnDestroy() {
-        this._observer$.unobserve(this._target);
-        this._destroyed$.next();
-        this._destroyed$.complete();
+    get decimalSeparator() {
+        return this._decimalSeparator;
     }
-    setTarget() {
-        this._target = this._host.nativeElement.querySelector(TARGET_SELECTOR);
+    get groupSeparator() {
+        return this._groupSeparator;
     }
-    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);
+    constructor() {
+        if (this.localeService) {
+            this.localeService.locale$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(locale => {
+                this.detectSeparatorsForLocale(locale);
+            });
+        }
+        else {
+            this.detectSeparators();
+        }
     }
-    _setStyles() {
-        this._target.style.overflow = 'hidden';
-        this._target.style.textOverflow = 'ellipsis';
-        this._target.style.cursor = 'help';
+    detectSeparators() {
+        const locale = navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language;
+        this.detectSeparatorsForLocale(locale);
     }
-    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)
-        });
+    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;
     }
-    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;
-        });
+    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;
     }
-    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());
+    isAmbiguous(value) {
+        if (typeof value !== 'string' || !value)
+            return false;
+        return /^-?[1-9]\d*[.,]\d{3}$/.test(value);
     }
-    getContent() {
-        return {
-            headline: this._target.getAttribute('data-tooltip-headline') || undefined,
-            paragraphs: [this._target.textContent?.trim() || '']
-        };
+    getAmbiguityHintKey(value) {
+        if (typeof value === 'string' && value.includes('.'))
+            return this.ambiguityHintKeyDot;
+        return this.ambiguityHintKeyComma;
     }
-    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 });
+    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: QdVisuallyHiddenDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[qdVisuallyHidden]',
-                    host: { class: 'qd-visually-hidden' },
-                    standalone: false
-                }]
-        }] });
+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.
@@ -7100,10 +7089,10 @@ class QdPushEventsService {
         this._listeners = [];
     }
     logWarn(message) {
-        console.warn(`QD-UI | QdPushEvents - ${message}`);
+        console.warn(`Quadrel Framework | QdPushEvents - ${message}`);
     }
     logError(message, err) {
-        console.error(`QD-UI | QdPushEvents - ${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' });
@@ -7115,6 +7104,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+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
+                }]
+        }] });
+
 const MAX_TOOLTIP_CHARACTER = 512;
 const TOOLTIP_POSITIONS = [
     { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom' },
@@ -7180,7 +7307,7 @@ class QdTooltipOnClickDirective {
     truncateText(text) {
         if (text.length <= MAX_TOOLTIP_CHARACTER)
             return text.trim();
-        console.warn(`QdUi | QdTooltip - Tooltip content exceeds ${MAX_TOOLTIP_CHARACTER} characters. It will be truncated.`);
+        console.warn(`Quadrel Framework | QdTooltip - Tooltip content exceeds ${MAX_TOOLTIP_CHARACTER} characters. It will be truncated.`);
         return `${text.substring(0, MAX_TOOLTIP_CHARACTER).trim()}...`;
     }
     translate(key) {
@@ -7220,9 +7347,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 });
@@ -7871,7 +8007,7 @@ class QdAutofocusDirective {
         if (!this.qdAutofocus)
             return;
         if (this.autofocusService.isAutofocusActivated) {
-            console.warn('QD-UI | QdAutofocus - "hasAutofocus" can be used only once!');
+            console.warn('Quadrel Framework | QdAutofocus - "hasAutofocus" can be used only once.');
             return;
         }
         this.autofocusService.isAutofocusActivated = true;
@@ -8194,7 +8330,7 @@ class QdEventBrokerService {
     }
     consume(topic) {
         if (!this._topics.has(topic)) {
-            console.warn(`QD-UI | QdEventBrokerService - Topic "${topic}" does not exist.`);
+            console.warn(`Quadrel Framework | QdEventBroker - Topic "${topic}" does not exist.`);
             return EMPTY;
         }
         return this._topics.get(topic).pipe(filter(event => event.payload != null), distinctUntilChanged((prev, curr) => isEqual(prev, curr)), shareReplay(1));
@@ -8300,11 +8436,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: [{
@@ -8558,11 +8694,11 @@ class QdCheckboxChipsComponent {
             if (this.formControlName) {
                 this.control = this.controlContainer.control.get(this.formControlName);
                 if (!(this.control instanceof QdFormControl)) {
-                    console.warn('QD-UI | QdCheckboxChipsComponent - Please use the QdFormControl instead of the Angular FormControl');
+                    console.warn('Quadrel Framework | QdCheckboxChips - Please use the QdFormControl instead of the Angular FormControl.');
                 }
             }
             else {
-                console.warn('QD-UI | QdCheckboxChipsComponent - Missing FormControlName directive from host element of the component');
+                console.warn('Quadrel Framework | QdCheckboxChips - Missing FormControlName directive from host element of the component.');
             }
         }
         this._subs.add(this.actionEmitterService.hintEventEmitter$.subscribe(() => this.clickHint.emit()));
@@ -9010,7 +9146,7 @@ class QdCheckboxesComponent {
                 this.control = this.controlContainer.control.get(this.formControlName);
             }
             else {
-                console.warn('QD-UI | QdCheckboxGroupComponent - Missing FormControlName directive from host element of the component');
+                console.warn('Quadrel Framework | QdCheckboxGroup - Missing FormControlName directive from host element of the component.');
             }
         }
         this.setInitialValues();
@@ -9604,7 +9740,7 @@ class QdFormOptionsResolverRegistry {
             return null;
         const matches = this.resolvers.filter(r => r?.name === this.resolverName);
         if (matches.length > 1)
-            throw new Error(`QD-UI | QdForms - Multiple QdFormOptionsResolvers with the name "${this.resolverName}" found. Resolver names must be unique.`);
+            throw new Error(`Quadrel Framework | QdForms - Multiple QdFormOptionsResolvers with the name "${this.resolverName}" found. Resolver names must be unique.`);
         return matches[0] ?? null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFormOptionsResolverRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -9704,9 +9840,9 @@ class QdFormOptionsService {
     }
     validateOptionsSetup(componentName) {
         if (!this.hasOptions())
-            console.warn(`QD-UI | ${componentName} - No options defined. Either provide 'options' or configure a resolver via 'optionsResolverName'.`);
+            console.warn(`Quadrel Framework | ${componentName} - No options defined. Either provide "options" or configure a resolver via "optionsResolverName".`);
         if (this._config?.options?.length && this._resolver)
-            console.warn(`QD-UI | ${componentName} - Config key 'options' ignored because QD_FORM_OPTIONS_RESOLVER is configured.`);
+            console.warn(`Quadrel Framework | ${componentName} - Config key "options" ignored because QD_FORM_OPTIONS_RESOLVER is configured.`);
     }
     load(value) {
         if (value === this._lastLoadedValue)
@@ -10203,7 +10339,7 @@ class QdDropdownComponent {
             this.control = directive.control;
             return;
         }
-        console.warn('QD-UI | QdDropdownComponent - Missing FormControlName directive from host element of the component');
+        console.warn('Quadrel Framework | QdDropdown - Missing FormControlName directive from host element of the component.');
     }
     updateConfiguration() {
         this.label = getLabel(this.config);
@@ -10612,8 +10748,8 @@ class QdInputOptionsDirective extends QdPopoverOnClickDirective {
     }
     logWarningIfBothOptionsAndResolverAreUsed() {
         if (this.config?.options && this.config.options.length > 0 && !!this._optionsResolver) {
-            console.warn('QD-UI | QdInputComponent - If both options and QD_FORM_OPTIONS_RESOLVER are used, ' +
-                'the options will be ignored!');
+            console.warn('Quadrel Framework | QdInput - If both options and QD_FORM_OPTIONS_RESOLVER are used, ' +
+                'the options will be ignored.');
         }
     }
     closePopover() {
@@ -10929,6 +11065,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.
      */
@@ -11003,9 +11140,13 @@ class QdInputComponent {
     get isErrorFromOutside() {
         return this.isError;
     }
+    get isAmbiguousState() {
+        return this.isAmbiguousInput;
+    }
     inputElement;
     inputType;
     inputMode;
+    htmlInputType;
     placeholder;
     label;
     hint;
@@ -11017,6 +11158,7 @@ class QdInputComponent {
     control;
     _optionsResolver;
     _subs = new Subscription();
+    _isUserTyped = false;
     _onChange = () => { };
     _onTouch = () => { };
     get hasOnlyUnitsError() {
@@ -11025,6 +11167,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;
@@ -11041,7 +11192,10 @@ class QdInputComponent {
         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();
@@ -11051,9 +11205,14 @@ class QdInputComponent {
                 this.control = this.controlContainer.control.get(this.formControlName);
                 // TODO remove logic for support of angular FormControl with angular 20 update
                 if (!(this.control instanceof QdFormControl))
-                    console.warn('QD-UI | QdInputComponent - Please use the QdFormControl instead of the Angular FormControl');
+                    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()));
@@ -11084,6 +11243,10 @@ class QdInputComponent {
     writeValue(value) {
         this._value = getValueWithUnit(value, this.config);
         this._displayValue = String(this._value.value ?? '');
+        this._isUserTyped = false;
+        if (this.inputType === 'number') {
+            this._value = { ...this._value, value: this.numberInputService.formatValueForDisplay(this._value.value) };
+        }
     }
     setDisabledState(disabled) {
         this.disabled = disabled;
@@ -11095,6 +11258,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();
@@ -11151,6 +11344,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);
@@ -11169,13 +11371,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() {
@@ -11198,9 +11402,12 @@ class QdInputComponent {
         if (!isEqual(modelValue, target))
             this.control.setValue(target, { emitEvent: false });
         this._value = normalized;
+        if (this.inputType === 'number') {
+            this._value = { ...this._value, value: this.numberInputService.formatValueForDisplay(this._value.value) };
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdInputComponent, isStandalone: false, selector: "qd-input", inputs: { formControlName: "formControlName", value: "value", config: "config", isError: "isError", testId: ["data-test-id", "testId"] }, outputs: { valueChange: "valueChange", enterClick: "enterClick", clickClear: "clickClear", clickHint: "clickHint", clickReadonly: "clickReadonly", clickViewonly: "clickViewonly" }, host: { properties: { "class.qd-input-readonly": "this.readonly", "class.qd-input--readonly-action": "this.readonlyAction", "class.qd-input-viewonly": "this.viewonly", "class.qd-input--viewonly-action": "this.viewonlyAction", "class.qd-form-hint-action": "this.hintAction", "class.qd-input-hint-action": "this.hintAction", "class.qd-form-disabled": "this.disabled", "class.qd-input-disabled": "this.disabled", "class.qd-input-focus": "this.isInputFocused", "class.qd-form-error": "this.hasError", "class.qd-input-error": "this.hasError", "class.qd-input-error-from-outside": "this.isErrorFromOutside" } }, 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,
@@ -11208,13 +11415,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,
@@ -11226,13 +11434,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: [{
@@ -11292,6 +11501,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']
@@ -11418,6 +11630,8 @@ class QdDatepickerComponent {
     timePicker;
     _disabledDatesValidator;
     _disabledTimesValidator;
+    _boundDisabledDates;
+    _boundDisabledTimes;
     _subs = new Subscription();
     _onChange = () => { };
     _onTouched = () => { };
@@ -11429,17 +11643,17 @@ class QdDatepickerComponent {
         this.updateConfiguration();
         this.updateDisplayedDate();
         this.updateDisplayedDateTime();
-        this.validateDisabledDates();
-        this.validateDisabledTimes();
         this._subs.add(this.initOpModeSubscription());
     }
     ngOnChanges(changes) {
         if (changes.config) {
             this.updateConfiguration();
-            this.validateDisabledDates();
-            this.validateDisabledTimes();
         }
     }
+    ngDoCheck() {
+        this.rebindDisabledDatesValidatorIfChanged();
+        this.rebindDisabledTimesValidatorIfChanged();
+    }
     ngOnDestroy() {
         this._subs.unsubscribe();
     }
@@ -11576,7 +11790,7 @@ class QdDatepickerComponent {
             this.control = this.controlContainer.control.get(this.formControlName);
         }
         else {
-            console.warn('QD-UI | QdDatepickerComponent - Missing FormControlName directive from host element of the component');
+            console.warn('Quadrel Framework | QdDatepicker - Missing FormControlName directive from host element of the component.');
         }
     }
     initInnerControl() {
@@ -11610,6 +11824,20 @@ class QdDatepickerComponent {
         this.displayedDateTime = QdDateAdapter.formatToDateTimeLocaleString(currentValue, this.config?.enableSeconds);
         this.displayedTime = QdDateAdapter.formatToTimeLocaleString(currentValue, this.config?.enableSeconds);
     }
+    rebindDisabledDatesValidatorIfChanged() {
+        const current = this.config?.disabledDates;
+        if (current === this._boundDisabledDates)
+            return;
+        this._boundDisabledDates = current;
+        this.validateDisabledDates();
+    }
+    rebindDisabledTimesValidatorIfChanged() {
+        const current = this.config?.timePicker?.disabledTimes;
+        if (current === this._boundDisabledTimes)
+            return;
+        this._boundDisabledTimes = current;
+        this.validateDisabledTimes();
+    }
     validateDisabledDates() {
         if (!this.control)
             return;
@@ -12147,7 +12375,7 @@ class QdTranslateService {
         else if (translatable.translation) {
             translation = translatable.translation[this.translateService.currentLang || 'de'];
             if (translation === undefined) {
-                console.error(`Language "${this.translateService.currentLang}" is not implemented!`);
+                console.error(`Quadrel Framework | QdTranslate - Language "${this.translateService.currentLang}" is not implemented.`);
             }
         }
         return translation || '';
@@ -12732,21 +12960,7 @@ function removeListItem(list, el) {
     if (index > -1)
         list.splice(index, 1);
 }
-const validatorsDroppedWithOptsWarning = `
-  It looks like you're constructing using a QdFormControl with both an options argument and an
-  validators argument. Mixing these arguments will cause your validators in the argument to be dropped.
-  You should either put all your validators in the options object, or in separate validators
-  arguments. For example:
-
-  // Using validators arguments
-  fc = new QdFormControl(42, Validators.required, myAsyncValidator);
-
-  // Using AbstractControlOptions
-  fc = new QdFormControl(42, {validators: Validators.required, asyncValidators: myAV});
-
-  // Do NOT mix them: validators in additional argument will be dropped!
-  fc = new QdFormControl(42, {validators: Validators.required}, /* Oops! */ myAsyncValidator);
-`;
+const validatorsDroppedWithOptsWarning = 'Quadrel Framework | QdForms - QdFormControl received both an options object and a separate validators argument. The standalone validators argument is dropped. Pass all validators inside the options object or via the separate arguments, not both.';
 
 function hasUnit(control) {
     return control.value?.value != null && control.value?.unit != null;
@@ -13113,7 +13327,7 @@ class QdMultiInputComponent {
      * TODO remove logic for support of [formControlName] directive and FormControl with angular 14 update
      */
     set formControlName(formControlName) {
-        console.warn('QD-UI | QdMultiInputComponent - Please use the MultiInput with the QdFormArray form control and the [formArrayName] directive!');
+        console.warn('Quadrel Framework | QdMultiInput - Please use <qd-multi-input> with the QdFormArray form control and the [formArrayName] directive.');
         this._formControlName = formControlName;
     }
     get formControlName() {
@@ -13223,7 +13437,7 @@ class QdMultiInputComponent {
         if (this.formArrayName) {
             const formArray = this.controlContainer.control.get(this.formArrayName);
             if (!formArray) {
-                console.warn('QD-UI | QdMultiInputComponent - No form control found for the provided [formArrayName]', this.formArrayName);
+                console.warn('Quadrel Framework | QdMultiInput - No form control found for the provided [formArrayName]', this.formArrayName);
                 return;
             }
             // Updating form array programmatically from outside
@@ -13242,7 +13456,7 @@ class QdMultiInputComponent {
             else {
                 // TODO remove logic for support of Angular FormControl with angular 19 update
                 this.formArray = this.qdFormArrayFactoryService.createQdFormArrayFromFormControl(formArray);
-                console.warn('QD-UI | QdMultiInputComponent - Please use the MultiInput with the QdFormArray form control!');
+                console.warn('Quadrel Framework | QdMultiInput - Please use <qd-multi-input> with the QdFormArray form control.');
             }
             this.disabled = formArray.disabled;
             this._onDisabledChange = (disabled) => {
@@ -13251,7 +13465,7 @@ class QdMultiInputComponent {
             this.formArray.registerOnDisabledChange(this._onDisabledChange);
         }
         else {
-            console.warn('QD-UI | QdMultiInputComponent - Missing [formArrayName] directive from host element of the component');
+            console.warn('Quadrel Framework | QdMultiInput - Missing [formArrayName] directive from host element of the component.');
         }
     }
     ngOnChanges(changes) {
@@ -13777,7 +13991,7 @@ class QdPinCodeComponent {
                 this.control = this.controlContainer.control.get(this.formControlName);
             }
             else {
-                console.warn('QD-UI | QdPinCodeComponent - Missing FormControlName directive from host element of the component');
+                console.warn('Quadrel Framework | QdPinCode - Missing FormControlName directive from host element of the component.');
             }
         }
         this._subs.add(this.actionEmitterService.hintEventEmitter$.subscribe(() => this.clickHint.emit()));
@@ -14237,7 +14451,7 @@ class QdRadioButtonsComponent {
                 this.control = this.controlContainer.control.get(this.formControlName);
             }
             else {
-                console.warn('QD-UI | QdRadioButtonsComponent - Missing FormControlName directive from host element of the component');
+                console.warn('Quadrel Framework | QdRadioButtons - Missing FormControlName directive from host element of the component.');
             }
         }
         this.initRadioButtonList();
@@ -14642,7 +14856,7 @@ class QdRichtextComponent {
                 this.control = this.controlContainer.control?.get(this.formControlName) ?? undefined;
             }
             else {
-                console.warn('QD-UI | QdSwitchesComponent - Missing FormControlName directive from host element of the component');
+                console.warn('Quadrel Framework | QdSwitches - Missing FormControlName directive from host element of the component.');
             }
         }
         this._subs.add(this.actionEmitterService.hintEventEmitter$.subscribe(() => this.clickHint.emit()));
@@ -14967,7 +15181,7 @@ class QdSwitchesComponent {
                 this.control = this.controlContainer.control.get(this.formControlName);
             }
             else {
-                console.warn('QD-UI | QdSwitchesComponent - Missing FormControlName directive from host element of the component');
+                console.warn('Quadrel Framework | QdSwitches - Missing FormControlName directive from host element of the component.');
             }
         }
         this.switchesService.setList(this.options);
@@ -15235,11 +15449,11 @@ class QdTextareaComponent {
                 this.control = this.controlContainer.control.get(this.formControlName);
                 // TODO remove logic for support of angular FormControl with angular 18 update
                 if (!(this.control instanceof QdFormControl)) {
-                    console.warn('QD-UI | QdTextareaComponent - Please use the QdFormControl instead of the Angular FormControl');
+                    console.warn('Quadrel Framework | QdTextarea - Please use the QdFormControl instead of the Angular FormControl.');
                 }
             }
             else {
-                console.warn('QD-UI | QdTextareaComponent - Missing FormControlName directive from host element of the component');
+                console.warn('Quadrel Framework | QdTextarea - Missing FormControlName directive from host element of the component.');
             }
         }
         this.valueForView = this.value || getValue(this.config);
@@ -16296,7 +16510,7 @@ class QdButtonStackButtonComponent {
     ngOnInit() {
         // TODO: Delete directive "qd-button-stack" in Version 15
         if (this._elementRef.nativeElement.attributes.hasOwnProperty('qd-button-stack')) {
-            console.warn('QD-UI | QdButtonStack - The directive "qd-button-stack" is deprecated. Please use "qdButtonStack" instead.');
+            console.warn('Quadrel Framework | QdButtonStack - The directive "qd-button-stack" is deprecated. Please use "qdButtonStack" instead.');
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdButtonStackButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -16389,7 +16603,7 @@ class QdMenuButtonComponent {
     }
     ngOnInit() {
         if (!this.config)
-            console.error('QD-UI | QdMenuButtonComponent - Please provide a valid config.');
+            console.error('Quadrel Framework | QdMenuButton - Please provide a valid config.');
     }
     hasUnhiddenActions() {
         return this.config?.actions?.some(action => !action.isHidden) ?? false;
@@ -16648,7 +16862,7 @@ class QdColumnAutoFillDirective {
         }
     }
     logErrorMessage(message) {
-        console.error(`${QdColumnAutoFillDirective.name} | ${message}`);
+        console.error(`Quadrel Framework | QdColumnAutoFill - ${message}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdColumnAutoFillDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdColumnAutoFillDirective, isStandalone: false, selector: "[qdColumnAutoFill]", ngImport: i0 });
@@ -16697,7 +16911,7 @@ class QdColumnsDisableAutoFillDirective {
         }
     }
     logErrorMessage(message) {
-        console.error(`${QdColumnsDisableAutoFillDirective.name} | ${message}`);
+        console.error(`Quadrel Framework | QdColumnsDisableAutoFill - ${message}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdColumnsDisableAutoFillDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdColumnsDisableAutoFillDirective, isStandalone: false, selector: "[qdColumnsDisableAutoFill]", ngImport: i0 });
@@ -16971,7 +17185,7 @@ class QdColumnDisableResponsiveColspansDirective {
         }
     }
     logErrorMessage(message) {
-        console.error(`${QdColumnDisableResponsiveColspansDirective.name} | ${message}`);
+        console.error(`Quadrel Framework | QdColumnDisableResponsiveColspans - ${message}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdColumnDisableResponsiveColspansDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdColumnDisableResponsiveColspansDirective, isStandalone: false, selector: "[qdColumnDisableResponsiveColspans]", ngImport: i0 });
@@ -17030,7 +17244,7 @@ class QdColumnsMaxDirective {
         }
     }
     logErrorMessage(message) {
-        console.error(`${QdColumnsMaxDirective.name} | ${message}`);
+        console.error(`Quadrel Framework | QdColumnsMax - ${message}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdColumnsMaxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdColumnsMaxDirective, isStandalone: false, selector: "[qdColumnsMax]", inputs: { qdColumnsMax: "qdColumnsMax" }, ngImport: i0 });
@@ -17197,7 +17411,7 @@ class QdColumnBreakBeforeDirective {
         }
     }
     logErrorMessage(message) {
-        console.error(`${QdColumnBreakBeforeDirective.name} | ${message}`);
+        console.error(`Quadrel Framework | QdColumnBreakBefore - ${message}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdColumnBreakBeforeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdColumnBreakBeforeDirective, isStandalone: false, selector: "[qdColumnBreakBefore]", ngImport: i0 });
@@ -17248,7 +17462,7 @@ class QdColumnNextInSameRowDirective {
         }
         if (!nextSiblingColspan) {
             this.logErrorMessage('The next sibling of the element marked with qdColumnNextInSameRow ' +
-                'has to be an element with a qdColumn directive!');
+                'has to be an element with a qdColumn directive.');
         }
         if (nextSiblingColspan) {
             this._renderer.addClass(this.element, QdColumnNextInSameRowDirective.className);
@@ -17270,7 +17484,7 @@ class QdColumnNextInSameRowDirective {
         return QdColumnDirective.getQdColumnColspan(nextSibling);
     }
     logErrorMessage(message) {
-        console.error(`${QdColumnNextInSameRowDirective.name} | ${message}`);
+        console.error(`Quadrel Framework | QdColumnNextInSameRow - ${message}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdColumnNextInSameRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdColumnNextInSameRowDirective, isStandalone: false, selector: "[qdColumnNextInSameRow]", ngImport: i0 });
@@ -17320,7 +17534,7 @@ class QdColumnFullGridWidthDirective {
         }
     }
     logErrorMessage(message) {
-        console.error(`${QdColumnFullGridWidthDirective.name} | ${message}`);
+        console.error(`Quadrel Framework | QdColumnFullGridWidth - ${message}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdColumnFullGridWidthDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdColumnFullGridWidthDirective, isStandalone: false, selector: "[qdColumnFullGridWidth]", ngImport: i0 });
@@ -17368,7 +17582,7 @@ class QdColumnsDisableResponsiveColspansDirective {
         }
     }
     logErrorMessage(message) {
-        console.error(`${QdColumnsDisableResponsiveColspansDirective.name} | ${message}`);
+        console.error(`Quadrel Framework | QdColumnsDisableResponsiveColspans - ${message}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdColumnsDisableResponsiveColspansDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: QdColumnsDisableResponsiveColspansDirective, isStandalone: false, selector: "[qdColumnsDisableResponsiveColspans]", ngImport: i0 });
@@ -18166,7 +18380,7 @@ class QdPendingChangesGuardDirective {
     formGroup;
     constructor() {
         if (!this.ngForm && !this.formGroupDirective) {
-            console.error('QD-UI | QdPendingChangesGuardDirective - requires NgForm or FormGroupDirective to be present on the host element.');
+            console.error('Quadrel Framework | QdPendingChangesGuard - requires NgForm or FormGroupDirective to be present on the host element.');
         }
     }
     ngOnInit() {
@@ -19341,7 +19555,7 @@ class QdFileCollectorComponent {
             isEqual$1(config.allowedFileNamePattern, this.fileTypeService.getFileNamePattern(config.allowedFileTypes)));
     }
     logError(message) {
-        console.error(`QD-UI | QdFileCollector - ${message}`);
+        console.error(`Quadrel Framework | QdFileCollector - ${message}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorComponent, isStandalone: false, selector: "qd-file-collector", inputs: { config: "config", testId: ["data-test-id", "testId"] }, providers: [QdFileCollectorService, QdFileCollectorValidationService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<button\n  qdButton\n  qdButtonGhost\n  icon=\"plus\"\n  *ngIf=\"canShowAddButton\"\n  (click)=\"clickFileInput()\"\n  [data-test-id]=\"testId + '-button-add-new'\"\n>\n  {{ config?.standaloneAddNewLabel?.i18n || \"i18n.qd.fileCollector.standalone.addNew\" | translate }}\n</button>\n\n<input\n  [disabled]=\"config?.readonly || config?.viewonly\"\n  type=\"file\"\n  (change)=\"handleFiles($event)\"\n  #fileInput\n  hidden\n  multiple=\"multiple\"\n/>\n\n<qd-file-collector-allowed-files-description\n  *ngIf=\"!config?.readonly && !config?.viewonly\"\n  [attr.data-test-id]=\"testId + '-allowed-files-description'\"\n></qd-file-collector-allowed-files-description>\n\n<ng-container *ngFor=\"let fileUpload of this.fileUploads; let i = index\">\n  <qd-file-collector-item\n    *ngIf=\"!fileUpload.error && fileUpload.progress === 100\"\n    [progress]=\"fileUpload.progress\"\n    [newlyUploaded]=\"fileUpload.newlyUploaded\"\n    [collectedFile]=\"fileUpload.collectedFile\"\n    [error]=\"fileUpload.error\"\n    [readonly]=\"config?.readonly\"\n    [viewonly]=\"config?.viewonly\"\n    [downloadFilesWithHttpClient]=\"config?.downloadFilesWithHttpClient\"\n    [data-test-id]=\"testId + '-item-' + i\"\n  ></qd-file-collector-item>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column}:host>.qd-button{align-self:end;margin-bottom:1.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdFileCollectorAllowedFilesDescriptionComponent, selector: "qd-file-collector-allowed-files-description" }, { kind: "component", type: QdFileCollectorItemComponent, selector: "qd-file-collector-item", inputs: ["progress", "newlyUploaded", "collectedFile", "error", "readonly", "viewonly", "downloadFilesWithHttpClient", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
@@ -19582,7 +19796,7 @@ function resetCategoryFilter$1(state, categoryIndex) {
 const isIsoTimestampValid = (isoTimestamp) => {
     const valid = new RegExp(/\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d((:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z))|(:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))|([+-][0-2]\d:[0-5]\d|Z))/).test(isoTimestamp);
     if (!valid && isoTimestamp !== '') {
-        console.warn('QD-UI | QdFilterService - The given ISO 8601 date string is not valid.');
+        console.warn('Quadrel Framework | QdFilter - The given ISO 8601 date string is not valid.');
     }
     return valid;
 };
@@ -19694,7 +19908,7 @@ function validateFilterSelection(filterSelection, filterCategories, selectionSou
     Object.keys(filterSelection).forEach(selectionCategory => {
         const categoryInFilter = filterCategories.find(category => category.category === selectionCategory);
         if (!categoryInFilter) {
-            console.warn(`The category "${selectionCategory}" that is given in the ${selectionSource} is not part of the filter!`);
+            console.warn(`Quadrel Framework | QdFilter - The category "${selectionCategory}" that is given in the ${selectionSource} is not part of the filter.`);
             return;
         }
         switch (categoryInFilter.type) {
@@ -19704,8 +19918,8 @@ function validateFilterSelection(filterSelection, filterCategories, selectionSou
                 const items = categoryInFilter.items;
                 filterSelection[selectionCategory].forEach(selectionItem => {
                     if (!items.some(item => item.item === selectionItem)) {
-                        console.warn(`The item "${selectionItem}" that is given in the ${selectionSource} ` +
-                            `is not contained in the filter category "${selectionCategory}"!`);
+                        console.warn(`Quadrel Framework | QdFilter - The item "${selectionItem}" that is given in the ${selectionSource} ` +
+                            `is not contained in the filter category "${selectionCategory}".`);
                     }
                 });
                 break;
@@ -19715,7 +19929,7 @@ function validateFilterSelection(filterSelection, filterCategories, selectionSou
             case 'dateTimeRange':
                 filterSelection[selectionCategory].forEach((selectionItem, itemIndex) => {
                     if (selectionItem !== '' && isNaN(Date.parse(selectionItem))) {
-                        console.error(`The given ${selectionSource} contains an invalid date for the category "${selectionCategory}"!`);
+                        console.error(`Quadrel Framework | QdFilter - The given ${selectionSource} contains an invalid date for the category "${selectionCategory}".`);
                         filterSelection[selectionCategory][itemIndex] = '';
                     }
                 });
@@ -19727,7 +19941,7 @@ function validateFilterSelection(filterSelection, filterCategories, selectionSou
 const initialState$2 = {};
 const _filterReducer = createReducer(initialState$2, on(QdFilterActions.initFilterState, (state, { filterId, filterData }) => {
     if (filterData === undefined || filterData.categories.length === 0) {
-        console.warn('QD-UI | QdFilterService - The filterData input is invalid. To use this input, please read the documentation.');
+        console.warn('Quadrel Framework | QdFilter - The "filterData" input is invalid. To use this input, please read the documentation.');
         return state;
     }
     return updateStateWithNewFilter(state, filterId, createFilterState(filterData));
@@ -19767,7 +19981,7 @@ const _filterReducer = createReducer(initialState$2, on(QdFilterActions.initFilt
 }), on(QdFilterActions.updateCategoryTranslation, (state, { filterId, filterData }) => {
     const newFilter = getNewFilter(state, filterId);
     if (filterData === undefined || filterData.categories.length === 0) {
-        console.warn('QD-UI | QdFilterService - The filterData input is invalid. To use this input, please read the documentation.');
+        console.warn('Quadrel Framework | QdFilter - The "filterData" input is invalid. To use this input, please read the documentation.');
         return state;
     }
     newFilter.categories.forEach((_category, i) => {
@@ -20963,7 +21177,7 @@ class QdFilterRouterConnectorService {
             return of(false);
         }
         if (this._connectedFilter) {
-            console.error('QdUi | QdFilterComponent | More than one filter with enabled connectWithRouter config is not allowed! ' +
+            console.error('Quadrel Framework | QdFilter - More than one filter with enabled "connectWithRouter" config is not allowed. ' +
                 'Please set connectWithRouter to false except for one filter.');
             return of(false);
         }
@@ -21251,7 +21465,7 @@ class QdFilterComponent {
     }
     validateConfig() {
         if (this.filterData?.outputLegacyQueryStringFormat !== false && this.queryStringOutput.observers.length > 0) {
-            console.warn('QdFilter | You use the queryStringOutput with the legacy format. To use the new format please set outputLegacyQueryStringFormat to false. The legacy format will be removed in future releases.');
+            console.warn('Quadrel Framework | QdFilter - You use the "queryStringOutput" with the legacy format. To use the new format please set "outputLegacyQueryStringFormat" to false. The legacy format will be removed in future releases.');
         }
     }
     init() {
@@ -21938,9 +22152,9 @@ class NavigationTileComponent {
     }
     validate() {
         if (!this.title)
-            console.error('QdUi | Navigation Tiles | You should provide a title.');
+            console.error('Quadrel Framework | QdNavigationTile - You should provide a title.');
         if (!this.icon)
-            console.error('QdUi | Navigation Tiles | You should provide an icon.');
+            console.error('Quadrel Framework | QdNavigationTile - You should provide an icon.');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavigationTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: NavigationTileComponent, isStandalone: false, selector: "a[qd-navigation-tile]", inputs: { title: "title", icon: "icon" }, ngImport: i0, template: "<qd-icon *ngIf=\"icon\" [icon]=\"icon\"></qd-icon>\n<small>{{ title | translate }}</small>\n", styles: [":host{display:block;height:10rem;align-items:unset;padding:.75rem;border:1px solid rgb(213,213,213);background-color:#fff;color:unset;line-height:unset;text-align:unset;text-decoration:unset}qd-icon{display:block;margin-bottom:2.8125rem;font-size:2rem}small{color:#171717;font-size:14px;font-weight:500;line-height:20px;text-wrap:normal}@media (min-width: 1280px){small{font-size:1rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
@@ -22038,7 +22252,7 @@ class QdSearchRouterConnectorService {
             return of(false);
         }
         if (this._connectedSearch) {
-            console.error('QdUi | QdSearchComponent | More than one search with enabled connectWithRouter config is not allowed! ' +
+            console.error('Quadrel Framework | QdSearch - More than one search with enabled "connectWithRouter" config is not allowed. ' +
                 'Please set connectWithRouter to false except for one search.');
             return of(false);
         }
@@ -22493,7 +22707,7 @@ class QdContextService {
     setValue(contextId, selection) {
         const index = this._configuredContexts.value.findIndex(context => context.id === contextId);
         if (index < 0)
-            throw new Error(`QdUi | QdContextService - Cannot set value of unconfigured context ${contextId}`);
+            throw new Error(`Quadrel Framework | QdContext - Cannot set value of unconfigured context ${contextId}`);
         this._values.next([
             ...this._values.value.filter(value => value.contextId !== contextId),
             { contextId, value: selection }
@@ -23131,7 +23345,7 @@ class QdTableResolverService {
     refresh(resolverOptions = {}) {
         const resolver = this.tableDataResolver;
         if (!resolver)
-            return console.warn('QD-UI | QdTable - Refresh skipped: resolver not provided.');
+            return console.warn('Quadrel Framework | QdTable - Refresh skipped: resolver not provided.');
         const { pageIndex } = resolverOptions;
         if (this._refreshSubscription)
             this._refreshSubscription.unsubscribe();
@@ -23255,7 +23469,7 @@ class QdTableResponsiveRowService {
         const maxCurrentColumns = this.columnMapping[this._currentBreakpoint];
         let columnsDefinitions = this._config.columns.map(column => column.column);
         if (this.mainColumnIndex >= maxCurrentColumns) {
-            console.warn('QD-UI | QdTableComponent - The index of the "mainColumn" cannot be equal or greater than maximum columns for this breakpoint.');
+            console.warn('Quadrel Framework | QdTable - The index of the "mainColumn" cannot be equal or greater than maximum columns for this breakpoint.');
             return columnsDefinitions;
         }
         if (maxCurrentColumns >= columnsLength)
@@ -23655,10 +23869,10 @@ class QdTablePaginatorComponent {
     }
     isConfigValid() {
         if (this.config?.hasPagination) {
-            console.warn('QD-UI | QdTable Pagination - The config "hasPagination" is deprecated. Please use "pagination" instead.');
+            console.warn('Quadrel Framework | QdTable Pagination - The config "hasPagination" is deprecated. Please use "pagination" instead.');
         }
         if (!this.tableDataResolver) {
-            console.error('QD-UI | QdTable Pagination - Provide a resolver for pagination. Please use the "QD_TABLE_DATA_RESOLVER_TOKEN" injection token.');
+            console.error('Quadrel Framework | QdTable Pagination - Provide a resolver for pagination. Please use the "QD_TABLE_DATA_RESOLVER_TOKEN" injection token.');
             return false;
         }
         return true;
@@ -23952,7 +24166,7 @@ class QdTableBodyComponent {
     }
     primaryAction(rowData, index) {
         if (!this.config.primaryAction?.handler)
-            return console.warn('QD-UI | QdTable - No handler defined for primary action.');
+            return console.warn('Quadrel Framework | QdTable - No handler defined for primary action.');
         if (this.config.primaryAction?.highlightOnRevisit) {
             this.tableStoreService.setLastVisitedRow(resolveRowIdentifier(rowData, index, this.config.trackRowBy));
         }
@@ -24014,7 +24228,7 @@ class QdTableEmptyStateComponent {
     }
     getI18n() {
         if (!this.emptyStateService.i18ns)
-            console.warn('QD-UI | QdTable - No translations available.');
+            console.warn('Quadrel Framework | QdTable - No translations available.');
         return this.emptyStateService.i18ns;
     }
     handleClick() {
@@ -24473,7 +24687,7 @@ class QdTableComponent {
     }
     registerConnector(connectorName) {
         if (!this.tableDataResolver) {
-            console.warn('QD-UI | QdTable - qdConnectToFilter only works with a resolver. Please inject the resolver using QD_TABLE_DATA_RESOLVER_TOKEN.');
+            console.warn('Quadrel Framework | QdTable - qdConnectToFilter only works with a resolver. Please inject the resolver using QD_TABLE_DATA_RESOLVER_TOKEN.');
             return;
         }
         this._connectors.push({ connectorName, connectorState: QdTableConnectorState.AWAITING });
@@ -24522,7 +24736,7 @@ class QdTableComponent {
             this.secondaryActionOutput.emit(recentAction);
             const action = this.config.secondaryActions?.find(a => a.type === recentAction.type);
             if (!action?.handler)
-                return console.warn('QD-UI | QdTable - No handler defined for secondary action:', recentAction.type);
+                return console.warn('Quadrel Framework | QdTable - No handler defined for secondary action:', recentAction.type);
             if (action.highlightOnRevisit) {
                 this.tableStoreService.setLastVisitedRow(resolveRowIdentifier(recentAction.rowData, recentAction.index, this.config.trackRowBy));
             }
@@ -24546,13 +24760,13 @@ class QdTableComponent {
         if (!this.config.refreshOnPushEvent)
             return;
         if (!this.config.uid) {
-            console.error('QD-UI | QdTable - A uid has to be defined when refreshOnPushEvent is enabled. ' +
-                'The table uid has to match the path of the server side event.');
+            console.error('Quadrel Framework | QdTable - A "uid" has to be defined when "refreshOnPushEvent" is enabled. ' +
+                'The table "uid" has to match the path of the server side event.');
             return;
         }
         if (!this.pushEventsService || !this.pushEventsService.isConnectedOrConnecting()) {
-            console.error('QD-UI | QdTable - You have to connect the QdPushEventsService on your own ' +
-                'if you enable the refreshOnPushEvent flag in the table.');
+            console.error('Quadrel Framework | QdTable - You have to connect the QdPushEventsService on your own ' +
+                'if you enable the "refreshOnPushEvent" flag in the table.');
             return;
         }
         const pushEventsService = this.pushEventsService;
@@ -24565,11 +24779,11 @@ class QdTableComponent {
                 return data.path.includes(this.config.uid);
             }
             catch (error) {
-                console.warn('Failed to process messageEvent:', error);
+                console.warn('Quadrel Framework | QdTable - Failed to process messageEvent:', error);
                 return false;
             }
         }), catchError(error => {
-            console.error('Error in event stream:', error);
+            console.error('Quadrel Framework | QdTable - Error in event stream:', error);
             return NEVER;
         }))
             .subscribe(() => this.triggerRefresh());
@@ -24589,14 +24803,14 @@ class QdTableComponent {
     }
     validateConfig() {
         if (!this.config.i18ns) {
-            console.warn('QD-UI | QdTable - No translations available for the secondaryActions.');
+            console.warn('Quadrel Framework | QdTable - No translations available for the secondaryActions.');
         }
         if (this.hasHighlightOnRevisit() && !this.config.uid) {
-            console.warn('QD-UI | QdTable - A uid has to be defined when highlightOnRevisit is enabled. ' +
+            console.warn('Quadrel Framework | QdTable - A "uid" has to be defined when "highlightOnRevisit" is enabled. ' +
                 'Without a uid, the table state does not persist across navigation.');
         }
         if (this.config.selection?.type === 'multiSelect' && this.hasPagination && !this.config.trackRowBy) {
-            throw new Error('QD-UI | QdTable - "trackRowBy" is required when combining "selection: multiSelect" with pagination. ' +
+            throw new Error('Quadrel Framework | QdTable - "trackRowBy" is required when combining "selection: multiSelect" with pagination. ' +
                 'Provide a trackRowBy function (e.g. `trackRowBy: row => row.uid`) that returns a unique identifier ' +
                 'per row, otherwise selections cannot be persisted across pages, page-size or sort changes.');
         }
@@ -24612,7 +24826,7 @@ class QdTableComponent {
     mapColumnFillsWidth() {
         if (!this.config.mainColumnNotFillingWidth)
             return;
-        console.warn('QD-UI | QdTable - The config key "mainColumnNotFillingWidth" is deprecated. Please use "whichColumnFillsWidth" instead.');
+        console.warn('Quadrel Framework | QdTable - The config key "mainColumnNotFillingWidth" is deprecated. Please use "whichColumnFillsWidth" instead.');
         if (this.config.whichColumnFillsWidth)
             return;
         this.config.whichColumnFillsWidth = 'none';
@@ -24865,7 +25079,7 @@ class QdConnectorTableFilterDirective {
     constructor() {
         const toolbarComponentsService = this.toolbarComponentsService;
         if (!toolbarComponentsService)
-            throw new Error('QD-UI | QdConnectorTableFilterDirective - Please use this directive only within a QdSection!');
+            throw new Error('Quadrel Framework | QdConnectorTableFilter - Please use this directive only within <qd-section>.');
         this.tableComponent.registerConnector('filter');
     }
     ngAfterViewInit() {
@@ -24887,7 +25101,7 @@ class QdConnectorTableFilterDirective {
     }
     validateAndApplyConfig() {
         if (this.filterComponent.hasFilterData())
-            console.error('QD-UI | QdConnectorTableFilterDirective - Please remove the redundant filterConfig in the sectionConfig. Will be overridden by this directive.');
+            console.error('Quadrel Framework | QdConnectorTableFilter - Please remove the redundant "filterConfig" in the "sectionConfig". Will be overridden by this directive.');
         this.filterComponent.setFilterConfig({ ...this.qdConnectToFilter, emitOutputsInitially: true });
     }
     subscribeToFilterChanges() {
@@ -24951,7 +25165,7 @@ class QdConnectorTableSearchDirective {
     constructor() {
         const toolbarComponentsService = this.toolbarComponentsService;
         if (!toolbarComponentsService)
-            throw new Error('QD-UI | QdConnectorTableSearchDirective - Please use this directive only within a QdSection!');
+            throw new Error('Quadrel Framework | QdConnectorTableSearch - Please use this directive only within <qd-section>.');
         this.tableComponent.registerConnector('search');
     }
     ngAfterViewInit() {
@@ -24969,7 +25183,7 @@ class QdConnectorTableSearchDirective {
     }
     validateAndApplyConfig() {
         if (this.searchComponent.hasConfigData())
-            console.warn('QD-UI | QdConnectorTableSearchDirective - Please remove the redundant searchConfig in the sectionConfig. Will overridden by this directive.');
+            console.warn('Quadrel Framework | QdConnectorTableSearch - Please remove the redundant "searchConfig" in the "sectionConfig". Will be overridden by this directive.');
         this.searchComponent.configData = { emitEmptySearch: true, ...this.qdConnectToSearch };
     }
     subscribeToSearchChanges() {
@@ -25038,7 +25252,7 @@ class QdSectionAdapterDirective {
         const toRemove = Array.from(host.children).filter(child => child.tagName !== 'QD-SECTION');
         toRemove.forEach(el => {
             this.renderer.removeChild(host, el);
-            console.warn('QD-UI | QdSectionAdapterDirective – Only "qd-section" is supported. The following content is not rendered:', el);
+            console.warn('Quadrel Framework | QdSectionAdapter - Only "qd-section" is supported. The following content is not rendered:', el);
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdSectionAdapterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -25158,13 +25372,13 @@ class QdSectionToolbarActionComponent {
     }
     validateConfig() {
         if (this._config.action) {
-            console.warn('QD-UI | QdSectionComponent - The `action` key is deprecated and will be removed in v18. Use `actions` instead.');
+            console.warn('Quadrel Framework | QdSection - The "action" key is deprecated and will be removed in v18. Use "actions" instead.');
         }
         if (this._config.action && this._config.actions) {
-            console.error('QD-UI | QdSectionComponent - Both `action` and `actions` are defined in the configuration. Please use only `actions`.');
+            console.error('Quadrel Framework | QdSection - Both "action" and "actions" are defined in the configuration. Please use only "actions".');
         }
         if (this._config.actions && this._config.actions.filter(action => action.type === 'addNew').length > 1) {
-            console.error('QD-UI | QdSectionComponent - The action type `addNew` is used multiple times in `actions`. Please use `addNew` only once.');
+            console.error('Quadrel Framework | QdSection - The action type "addNew" is used multiple times in "actions". Please use "addNew" only once.');
         }
     }
     // TODO: Remove in v19
@@ -26182,7 +26396,7 @@ class QdTreeEmptyStateComponent {
     config;
     getI18n() {
         if (!this.emptyStateService.i18ns)
-            console.warn('QD-UI | QdTree - No translations available.');
+            console.warn('Quadrel Framework | QdTree - No translations available.');
         return this.emptyStateService.i18ns;
     }
     handleClick() {
@@ -26371,7 +26585,7 @@ class QdTreeComponent {
     }
     validateConfig() {
         if (!this.config.i18ns) {
-            console.warn('QD-UI | QdTree - No translations available for the secondaryActions.');
+            console.warn('Quadrel Framework | QdTree - No translations available for the secondaryActions.');
         }
     }
     initializeGroupService() {
@@ -26380,7 +26594,7 @@ class QdTreeComponent {
         }
         catch (err) {
             if (err instanceof QdGroupedIndicesNotConsecutiveError) {
-                console.error('QD-UI | QdTree - Non-sequential "tree" content types are not allowed.');
+                console.error('Quadrel Framework | QdTree - Non-sequential "tree" content types are not allowed.');
             }
         }
     }
@@ -26414,7 +26628,7 @@ class QdTreeComponent {
             this.secondaryActionOutput.emit(recentAction);
             const action = this.config.secondaryActions?.find(a => a.type === recentAction.type);
             if (!action?.handler)
-                return console.warn('QD-UI | QdTree - No handler defined for secondary action:', recentAction.type);
+                return console.warn('Quadrel Framework | QdTree - No handler defined for secondary action:', recentAction.type);
             action.handler(recentAction);
         });
     }
@@ -26665,7 +26879,7 @@ class QdPageFooterService {
         updates.forEach(({ actionKey, partialAction }) => {
             const action = currentActionsMap.get(actionKey);
             if (!action)
-                return console.warn(`QdUi | QdPageFooterService - Action with key "${actionKey}" not found.`);
+                return console.warn(`Quadrel Framework | QdPageFooter - Action with key "${actionKey}" not found.`);
             updatedActionsMap.set(actionKey, { ...action, ...partialAction });
         });
         this._pageFooterActions.next(updatedActionsMap);
@@ -26856,6 +27070,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['attr.class']
             }] } });
 
+/**
+ * @description Creates a replay-backed stream for pushing partial header-facet
+ * updates into `QdPageConfig.metadata$`.
+ *
+ * The returned `ReplaySubject<Partial<T>>(1)` buffers the most recent emission
+ * so late subscribers still receive the latest value. The page-header component
+ * subscribes to `metadata$` inside its own `ngOnInit`, which runs AFTER the
+ * consuming page component's `ngOnInit`. Consumers that emit synchronously
+ * during their `ngOnInit` (e.g. from a `combineLatest` over already-populated
+ * store selectors) would otherwise lose that first emission if `metadata$` were
+ * a plain `Subject`.
+ *
+ * @example
+ * ```ts
+ * class MyPageComponent {
+ *   private metadataUpdates$ = createMetadataStream<MyObject>();
+ *
+ *   pageConfig: QdPageConfig<MyObject> = {
+ *     // ...
+ *     metadata$: this.metadataUpdates$
+ *   };
+ *
+ *   ngOnInit(): void {
+ *     combineLatest([this.state$, this.data$])
+ *       .pipe(map(([state, data]) => this.mapHeader(state, data)))
+ *       .subscribe(header => this.metadataUpdates$.next(header));
+ *   }
+ * }
+ * ```
+ */
+function createMetadataStream() {
+    return new ReplaySubject(1);
+}
+
 /**
  * Token for resolving page object data
  */
@@ -27151,7 +27399,7 @@ class QdDynamicFacetComponent {
     ngOnInit() {
         const facet = this.dynamicFacetsService.getFacet(this.facet.options.type);
         if (!facet) {
-            console.error('QdUi | QdPage | Facet could not be found.');
+            console.error('Quadrel Framework | QdPage - Facet could not be found.');
             return;
         }
         const viewContainerRef = this.dynamicFacet.viewContainerRef;
@@ -27200,13 +27448,13 @@ class QdPageCommitActionExecutor {
                     onAfterSnapshot?.();
                 }
                 catch (err) {
-                    console.error('QD-UI | QdPage - internal onAfterSnapshot hook threw after form was marked as saved.', err);
+                    console.error('Quadrel Framework | QdPage - internal onAfterSnapshot hook threw after form was marked as saved.', err);
                 }
                 try {
                     action.onSuccess?.();
                 }
                 catch (err) {
-                    console.error('QD-UI | QdPage - onSuccess callback threw after form was marked as saved.', err);
+                    console.error('Quadrel Framework | QdPage - onSuccess callback threw after form was marked as saved.', err);
                 }
             });
         };
@@ -27225,14 +27473,14 @@ class QdPageCommitActionExecutor {
     }
     static handleError(action, err) {
         if (!action.onError) {
-            console.error('QD-UI | QdPage - Commit action observable errored — form was not marked as saved. Provide an `onError` hook on the action, or handle errors in the handler.', err);
+            console.error('Quadrel Framework | QdPage - Commit action observable errored — form was not marked as saved. Provide an `onError` hook on the action, or handle errors in the handler.', err);
             return;
         }
         try {
             action.onError(err);
         }
         catch (callbackErr) {
-            console.error('QD-UI | QdPage - onError callback threw.', callbackErr);
+            console.error('Quadrel Framework | QdPage - onError callback threw.', callbackErr);
         }
     }
 }
@@ -27367,7 +27615,7 @@ class QdFormGroupManagerService {
                 captured.set(key, structuredClone(fg.getRawValue()));
             }
             catch (err) {
-                throw new Error(`QD-UI | QdFormGroupManager - captureFormValues() failed for group "${key}". ` +
+                throw new Error(`Quadrel Framework | QdFormGroupManager - captureFormValues() failed for group "${key}". ` +
                     `Form values must be structured-cloneable. Non-cloneable values like functions, ` +
                     `symbols, or DOM nodes are not supported. Original error: ${String(err)}`);
             }
@@ -27461,7 +27709,7 @@ class QdFormGroupManagerService {
     initFormArrayFromValues(array, values) {
         const protoValue = values[0];
         if (!protoValue || typeof protoValue !== 'object') {
-            console.warn('QD-UI | QdFormGroupManager - Cannot restore FormArray: no prototype and value is not object-like.');
+            console.warn('Quadrel Framework | QdFormGroupManager - Cannot restore FormArray: no prototype and value is not object-like.');
             return;
         }
         for (let i = 0; i < values.length; i++) {
@@ -27483,7 +27731,7 @@ class QdFormGroupManagerService {
             const arrControls = control.controls.map(c => this.deepCloneControl(c));
             return new FormArray(arrControls, control.validator, control.asyncValidator);
         }
-        throw new Error('QD-UI | QdFormGroupManager - Unsupported control type');
+        throw new Error('Quadrel Framework | QdFormGroupManager - Unsupported control type.');
     }
     areFormGroupsValid(fg) {
         return Object.values(fg.controls).every(c => (c.disabled && !c.validator && !c.asyncValidator ? true : c.valid));
@@ -27685,6 +27933,9 @@ class QdPageObjectHeaderComponent {
     _isLoadingSubject = new BehaviorSubject(false);
     _customActionsSubject = new BehaviorSubject({ actions: [] });
     _customActionsSub;
+    _metadataSub;
+    _pendingMetadata = {};
+    _metadataStreamTypeWarned = false;
     _destroyed$ = new Subject();
     _availableContexts = 0;
     pageObjectData$ = this._pageObjectDataSubject.asObservable();
@@ -27775,19 +28026,21 @@ class QdPageObjectHeaderComponent {
                 if (originalUpdateMetadata)
                     originalUpdateMetadata(props);
             };
-            this.setupResolverTrigger();
         }
     }
     ngOnInit() {
         if (this.pageObjectResolver)
             this.setupResolverTrigger();
         this.updateCustomActions();
+        this.subscribeToMetadataStream();
         this.formGroupManagerService.takeFormGroupsSnapshot();
         this.initContexts();
     }
     ngOnChanges(changes) {
-        if (changes['config'] && !changes['config'].firstChange)
+        if (changes['config'] && !changes['config'].firstChange) {
             this.updateCustomActions();
+            this.subscribeToMetadataStream();
+        }
     }
     ngOnDestroy() {
         this.pageStoreService.toggleViewonly(false);
@@ -27795,8 +28048,8 @@ class QdPageObjectHeaderComponent {
         this._destroyed$.complete();
     }
     updateMetadata(metadata) {
-        const updatedMetadata = { ...this._pageObjectDataSubject.value, ...metadata };
-        this._pageObjectDataSubject.next(updatedMetadata);
+        this._pendingMetadata = { ...this._pendingMetadata, ...metadata };
+        this._pageObjectDataSubject.next({ ...this._pageObjectDataSubject.value, ...metadata });
     }
     handleAction(facet) {
         facet?.action?.handler();
@@ -27860,7 +28113,10 @@ class QdPageObjectHeaderComponent {
     setupResolverTrigger() {
         this.resolverTriggerService
             .shouldTriggerResolver(this.pageObjectResolver.config?.triggerOn ?? 'pathParamsChange')
-            .pipe(takeUntil(this._destroyed$), filter(shouldTrigger => shouldTrigger), tap(() => this._isLoadingSubject.next(true)), switchMap(() => this.pageObjectResolver.resolve()), tap(objectData => this._pageObjectDataSubject.next(objectData)), tap(() => this._isLoadingSubject.next(false)), tap(() => this.formGroupManagerService.takeFormGroupsSnapshot()))
+            .pipe(takeUntil(this._destroyed$), filter(shouldTrigger => shouldTrigger), tap(() => this._isLoadingSubject.next(true)), switchMap(() => this.pageObjectResolver.resolve()), tap(objectData => {
+            this._pageObjectDataSubject.next({ ...objectData, ...this._pendingMetadata });
+            this._pendingMetadata = {};
+        }), tap(() => this._isLoadingSubject.next(false)), tap(() => this.formGroupManagerService.takeFormGroupsSnapshot()))
             .subscribe();
     }
     initContexts() {
@@ -27892,6 +28148,26 @@ class QdPageObjectHeaderComponent {
         }
         this.subscribeToViewOnlyMode();
     }
+    subscribeToMetadataStream() {
+        this._metadataSub?.unsubscribe();
+        const metadata$ = this.config.metadata$;
+        if (!metadata$)
+            return;
+        this.warnOnNonReplayMetadataStream(metadata$);
+        this._metadataSub = metadata$.pipe(takeUntil(this._destroyed$)).subscribe(partial => this.updateMetadata(partial));
+    }
+    warnOnNonReplayMetadataStream(metadata$) {
+        if (!isDevMode() || this._metadataStreamTypeWarned)
+            return;
+        if (metadata$ instanceof Subject &&
+            !(metadata$ instanceof ReplaySubject) &&
+            !(metadata$ instanceof BehaviorSubject)) {
+            this._metadataStreamTypeWarned = true;
+            console.warn('Quadrel Framework | QdPageObjectHeader - metadata$ is a plain Subject. Emissions fired before the ' +
+                "header subscribes (e.g. during the consuming component's ngOnInit) will be lost. " +
+                'Use createMetadataStream() or pass a ReplaySubject(1)/BehaviorSubject instead.');
+        }
+    }
     subscribeToViewOnlyMode() {
         this._customActionsSub?.unsubscribe();
         this._customActionsSub = this.pageStoreService.isViewonly$
@@ -27999,7 +28275,7 @@ class QdPageStepperAdapterDirective {
         const toRemove = Array.from(host.children).filter(child => child.tagName !== 'QD-PAGE-STEPPER');
         toRemove.forEach(el => {
             this.renderer.removeChild(host, el);
-            console.warn('QD-UI | QdPageStepperAdapterDirective – Only "qd-page-stepper" is supported. The following content is not rendered:', el);
+            console.warn('Quadrel Framework | QdPageStepperAdapter - Only "qd-page-stepper" is supported. The following content is not rendered:', el);
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageStepperAdapterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -28149,7 +28425,7 @@ class QdPageStepperComponent extends CdkStepper {
     ngOnInit() {
         this.linear = true;
         if (this.footerService && (this.config?.submit || this.config?.cancel)) {
-            throw new Error('QD-UI | QdPageStepperComponent - When using the Page Stepper in QdPage, don\'t use the "submit" and "cancel" attributes. Instead, use the QdPage configuration.');
+            throw new Error('Quadrel Framework | QdPageStepper - When using <qd-page-stepper> inside <qd-page>, don\'t use the "submit" and "cancel" attributes. Instead, use the QdPageConfig.');
         }
         if (this.footerService) {
             this.selectedIndexChange.pipe(takeUntil(this._destroyed$)).subscribe(() => this.updateFooterActionsVisibility());
@@ -28355,7 +28631,7 @@ class QdPageStepperComponent extends CdkStepper {
             .subscribe(isValid => this.footerService.updateActions([{ actionKey: 'submit', partialAction: { isDisabled: !isValid } }]));
     }
     blockCdkInput(inputName) {
-        throw new Error(`QD-UI | QdPageStepperComponent - The ${inputName} attribute is not allowed. Please use QdPageStepperConfig instead.`);
+        throw new Error(`Quadrel Framework | QdPageStepper - The "${inputName}" attribute is not allowed. Please use QdPageStepperConfig instead.`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageStepperComponent, isStandalone: true, selector: "qd-page-stepper", inputs: { config: "config", testId: ["data-test-id", "testId"] }, outputs: { submitted: "submitted" }, host: { properties: { "class.standalone": "!footerService" }, classAttribute: "qd-stepper" }, providers: [{ provide: CdkStepper, useExisting: QdPageStepperComponent }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"qd-stepper-items-container\" *ngIf=\"steps.length > 1\">\n  <qd-page-step-header\n    *ngFor=\"let step of steps; let i = index\"\n    (click)=\"handleClickHeader(step, i)\"\n    [id]=\"_getStepLabelId(i)\"\n    [ngClass]=\"'qd-step'\"\n    [index]=\"i\"\n    [state]=\"_getIndicatorType(i, step.state)\"\n    [label]=\"step.config.label.i18n | translate\"\n    [selected]=\"selectedIndex === i\"\n    [active]=\"step.completed || selectedIndex === i || !linear\"\n    [optional]=\"step.optional\"\n    [locked]=\"!step.editable && i < selectedIndex\"\n  >\n  </qd-page-step-header>\n</div>\n\n<div class=\"stepper-content\">\n  <ng-container [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n\n<div class=\"qd-stepper-action-area\" *ngIf=\"!footerService\">\n  <button qdButton qdButtonGhost (click)=\"cancel()\" [data-test-id]=\"testId + '-cancel'\">\n    {{ config?.cancel?.i18n || \"i18n.qd.stepper.cancel\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showPreviousButton(selectedIndex)\"\n    qdButton\n    qdButtonGhost\n    (click)=\"previousStep()\"\n    [data-test-id]=\"testId + '-previous'\"\n  >\n    {{ config?.previous?.i18n || \"i18n.qd.stepper.previous\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showNextButton(selectedIndex)\"\n    qdButton\n    [disabled]=\"(selectedStepValid$ | async) === false\"\n    (click)=\"nextStep()\"\n    [data-test-id]=\"testId + '-next'\"\n  >\n    {{ config?.next?.i18n || \"i18n.qd.stepper.next\" | translate }}\n  </button>\n\n  <button\n    *ngIf=\"showSubmitButton(selectedIndex)\"\n    qdButton\n    (click)=\"submit()\"\n    [disabled]=\"(allStepsValid$ | async) === false\"\n    [data-test-id]=\"testId + '-submit'\"\n  >\n    {{ config?.submit?.i18n || \"i18n.qd.stepper.submit\" | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column}:host.standalone{height:calc(100% - 50px)}:host .qd-stepper-items-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:0 1.25rem;border-bottom:.125rem solid rgb(213,213,213);background-color:#fff;gap:0 .625rem}@media (max-width: 599.98px){:host .qd-stepper-items-container{padding:0 .9375rem}}:host .stepper-content{flex:1 1 auto}:host .qd-stepper-action-area{display:flex;width:100%;height:3.125rem;justify-content:flex-end}:host .qd-stepper-action-area button{margin-right:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdPageStepHeaderComponent, selector: "qd-page-step-header", inputs: ["state", "label", "index", "selected", "active", "optional", "locked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: QdButtonModule }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -28430,7 +28706,7 @@ class QdPageTabsAdapterDirective {
         const toRemove = Array.from(host.children).filter(child => child.tagName !== 'QD-PAGE-TABS');
         toRemove.forEach(el => {
             this.renderer.removeChild(host, el);
-            console.warn('QD-UI | QdPageTabsAdapterDirective – Only "qd-page-tabs" is supported. The following content is not rendered:', el);
+            console.warn('Quadrel Framework | QdPageTabsAdapter - Only "qd-page-tabs" is supported. The following content is not rendered:', el);
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabsAdapterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -28779,7 +29055,7 @@ class QdPageTabsComponent extends CdkStepper {
                 pageTab.select();
             }
             else {
-                console.warn('QD-UI | QdPageTabsComponent - No tab found with name ' + tabNameFromParams);
+                console.warn('Quadrel Framework | QdPageTabs - No tab found with name "' + tabNameFromParams + '".');
                 this.selectFirstNotDisabledTab(true);
             }
         });
@@ -28803,7 +29079,7 @@ class QdPageTabsComponent extends CdkStepper {
                     });
                 }
                 else {
-                    console.warn('QD-UI | QdPageTabsComponent - connectedWithRouter is active, however QdPageTab has no name attribute.');
+                    console.warn('Quadrel Framework | QdPageTabs - "connectedWithRouter" is active, however <qd-page-tab> has no "name" attribute.');
                 }
             }
         });
@@ -28867,7 +29143,7 @@ class QdPageTabsComponent extends CdkStepper {
         return this._getStepLabelId(i);
     }
     blockCdkInput(inputName) {
-        throw new Error(`QD-UI | QdPageTabsComponent - The use of the ${inputName} attribute is not permitted. Please use QdPageTabsConfig instead.`);
+        throw new Error(`Quadrel Framework | QdPageTabs - The use of the "${inputName}" attribute is not permitted. Please use QdPageTabsConfig instead.`);
     }
     mapSelectionChangeToTabSelectionOutput() {
         this.selectionChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(selectionEvent => {
@@ -29114,19 +29390,44 @@ const SAFE_BOTTOM_OFFSET_PX = 64;
  *
  * #### **Updating Facets**
  *
- * Typically, the values of the facets on a create or inspect page are set to read-only. However, there may be cases where, for example, a status change is needed, such as through a dialog. For this purpose, we have provided an update method. In the resolver service, define an empty method called `updateMetadata`. Inject this service using its type, and then call the `updateMetadata` method with the required parameter.
+ * Typically, the values of the facets on a create or inspect page are set to read-only. If a facet value needs to change at runtime — for instance after a status update from a dialog — push the partial update through `QdPageConfig.metadata$`. The header subscribes to this observable and shallow-merges every emission into the current object data.
+ *
+ * Create the stream with `createMetadataStream<T>()`. The factory returns a `ReplaySubject<Partial<T>>(1)` that buffers the latest emission, so a value pushed during your component's `ngOnInit` still reaches the header, which subscribes a lifecycle step later. Plain `Subject` silently drops that first emission; dev mode warns when it detects one.
  *
  * **Please note: These values should not be modified directly within a QdPage.**
  *
  * ```ts
- * @Injectable()
- * class MyObjectModelResolver implements QdPageObjectResolver<MyObjectModel> {
- *   config: QdPageObjectResolverConfig = {
- *     // your configuration options here
+ * @Component({
+ *   // ...
+ *   providers: [
+ *     {
+ *       provide: QD_PAGE_OBJECT_RESOLVER_TOKEN,
+ *       useClass: MyObjectModelResolver
+ *     }
+ *   ]
+ * })
+ * class MyPageComponent {
+ *   private metadataUpdates$ = createMetadataStream<MyObjectModel>();
+ *
+ *   pageConfig: QdPageConfig<MyObjectModel> = {
+ *     title: { i18n: 'i18n.page.title' },
+ *     pageType: 'inspect',
+ *     headerFacets: [ /* ... *\/ ],
+ *     metadata$: this.metadataUpdates$,
+ *     pageTypeConfig: { /* ... *\/ }
+ *   };
+ *
+ *   updateStatus() {
+ *     this.metadataUpdates$.next({ state: 'Updated' });
  *   }
+ * }
+ * ```
  *
- *   constructor(private http: HttpClient) {}
+ * Legacy approach (`@deprecated`): the resolver-level `updateMetadata` method is still wired up for backward compatibility, but prefer `metadata$` on the config for new code.
  *
+ * ```ts
+ * @Injectable()
+ * class MyObjectModelResolver implements QdPageObjectResolver<MyObjectModel> {
  *   resolve(): Observable<MyObjectModel> {
  *     // your implementation here
  *   }
@@ -29136,15 +29437,6 @@ const SAFE_BOTTOM_OFFSET_PX = 64;
  *   }
  * }
  *
- * @Component({
- *   // ...
- *   providers: [
- *     {
- *       provide: QD_PAGE_OBJECT_RESOLVER_TOKEN,
- *       useClass: MyObjectModelResolver
- *     }
- *   ]
- * })
  * class MyPageComponent {
  *   constructor(@Inject(QD_PAGE_OBJECT_RESOLVER_TOKEN) private objectResolver: MyObjectModelResolver) {}
  *
@@ -29417,7 +29709,7 @@ class QdPageComponent {
     infoBanners;
     footerHasContent$;
     isFooterVisible;
-    projectionGuardMessage = 'QD-UI | QdPage - This content is not supported. Please use QdSectionAdapterDirective for custom content projection.';
+    projectionGuardMessage = 'Quadrel Framework | QdPage - This content is not supported. Please use the [qdSectionAdapter] directive for custom content projection.';
     _isInitialized = false;
     _destroyed$ = new Subject();
     _cancelSubmitValidation$ = new Subject();
@@ -29512,7 +29804,7 @@ class QdPageComponent {
     }
     checkConfigValidity() {
         if (!this.config)
-            console.warn('QdUi | QdPageComponent - To configure the page you should provide a valid config.');
+            console.warn('Quadrel Framework | QdPage - To configure the page you should provide a valid config.');
     }
     setupCreatePageFooterActions() {
         const pageTypeConfig = this.config?.pageTypeConfig;
@@ -29758,15 +30050,15 @@ class QdConnectFormStateToPageDirective {
     isValid() {
         const hasFormGroup = this.formGroupDirective?.control;
         if (!hasFormGroup) {
-            console.error('QD-UI | QdConnectFormStateToPageDirective - Either FormGroupDirective or QdQuickEditComponent with a FormGroup is required.');
+            console.error('Quadrel Framework | QdConnectFormStateToPage - Either a [formGroup] binding or <qd-quick-edit> with a FormGroup is required.');
             return false;
         }
         if (!this.formGroupManagerService) {
-            console.error('QD-UI | QdConnectFormStateToPageDirective - The Connector must be used within a QdPage component.');
+            console.error('Quadrel Framework | QdConnectFormStateToPage - The connector must be used within <qd-page>.');
             return false;
         }
         if (!this.formGroupManagerService.isFormGroupKeyUnique(this.qdConnectFormStateToPage)) {
-            console.error(`QD-UI | QdConnectFormStateToPageDirective - The FormGroup key "${this.qdConnectFormStateToPage}" is not unique.`);
+            console.error(`Quadrel Framework | QdConnectFormStateToPage - The FormGroup key "${this.qdConnectFormStateToPage}" is not unique.`);
             return false;
         }
         return true;
@@ -30766,6 +31058,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: '',
@@ -30780,9 +31073,7 @@ class QdShellServiceNavigationComponent {
             this.logPamsEnvironmentMissingError();
     }
     logPamsEnvironmentMissingError() {
-        console.error('QdShellServiceNavigationComponent - The service navigation could not be rendered because the ' +
-            'pamsEnvrionment is missing. The pamsEnvironment has to be given in the shell service navigation config or ' +
-            'has to be provided in the backend auth config!');
+        console.error('Quadrel Framework | QdShell - Config key "pamsEnvironment" is required to render <qd-shell-service-navigation>. Provide it in the service-navigation config or via the backend auth config.');
     }
     setLanguageFromUrlAfterNavigation() {
         this.languageFromUrlService
@@ -30810,6 +31101,7 @@ class QdShellServiceNavigationComponent {
         this._destroyed$.complete();
     }
     handleLanguageChange($event) {
+        this.localeService.setServiceNavigationLanguage($event.detail);
         this.useLanguage($event.detail);
     }
     handleLoginStatusChange($event) {
@@ -31328,7 +31620,7 @@ class QdShellHeaderComponent {
     }
     validateTitle() {
         if (this.config.title && typeof this.config.title === 'string') {
-            console.warn('QdUi | QdShellComponent - Title of type string is deprecated and will be removed in the next major release. Please Use the i18n key instead!');
+            console.warn('Quadrel Framework | QdShell - "title" as a plain string is deprecated and will be removed in the next major release. Please use an i18n key instead.');
         }
     }
     async = async;
@@ -31364,7 +31656,7 @@ class QdShellNavigationLinkComponent {
     config;
     handleClick() {
         if (!this.config.handler) {
-            console.error('QD-UI | QdShell - Please provide a handler function for the navigation element!');
+            console.error('Quadrel Framework | QdShell - Please provide a handler function for the navigation element.');
             return;
         }
         if (this.config.handler && !this.config.isCurrent)
@@ -31877,7 +32169,7 @@ class QdShellComponent {
     ngAfterViewInit() {
         // TODO: Remove in v17! The comments will be integrated in the QdPage.
         if (this.commentsComponent.length > 0)
-            console.warn('QD-UI | QdShell - Comments in the QdShell is deprecated and will be removed in v17. Will be part of QdPage.');
+            console.warn('Quadrel Framework | QdShell - Using comments inside <qd-shell> is deprecated and will be removed in v17. Use <qd-page> instead.');
         this.closeShellRightIfCommentsDisappear();
     }
     closeShellRightIfCommentsDisappear() {
@@ -32386,11 +32678,11 @@ class QdPageStepComponent extends CdkStep {
         this._destroyed$.complete();
     }
     blockCdkInput(inputName) {
-        throw new Error(`QD-UI | QdPageStepComponent - The use of the ${inputName} attribute is not permitted. Please use QdPageStepConfig instead.`);
+        throw new Error(`Quadrel Framework | QdPageStep - The use of the "${inputName}" attribute is not permitted. Please use QdPageStepConfig instead.`);
     }
     validateLabel() {
         if (!this.config?.label?.i18n)
-            console.error('QD-UI | QdPageStepComponent - Please provide a label for the step.');
+            console.error('Quadrel Framework | QdPageStep - Please provide a label for the step.');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageStepComponent, isStandalone: true, selector: "qd-page-step", inputs: { config: "config", control: "control" }, host: { classAttribute: "qd-stepper" }, providers: [
@@ -32496,11 +32788,11 @@ class QdPageTabComponent extends CdkStep {
         this._destroyed$.complete();
     }
     blockCdkInput(inputName) {
-        throw new Error(`QD-UI | QdPageTabComponent - The use of the ${inputName} attribute is not permitted. Please use QdPageTabConfig instead.`);
+        throw new Error(`Quadrel Framework | QdPageTab - The use of the "${inputName}" attribute is not permitted. Please use QdPageTabConfig instead.`);
     }
     validateLabel() {
         if (!this.config?.label?.i18n)
-            console.error('QD-UI | QdPageTabComponent - Please provide a label for the tab.');
+            console.error('Quadrel Framework | QdPageTab - Please provide a label for the tab.');
     }
     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: [
@@ -32948,11 +33240,11 @@ class QdQuickEditComponent {
     }
     validateSetup() {
         if (this.data != null && this.controlContainer != null)
-            console.warn('QdQuickEdit | Data is being ignored when used as FormArray');
+            console.warn('Quadrel Framework | QdQuickEdit - Data is being ignored when used as FormArray.');
         if (!this.data && !this.controlContainer)
-            console.warn('QdQuickEdit | Either use QuickEdit as FormControl with formArrayName binding or provide data via input.');
+            console.warn('Quadrel Framework | QdQuickEdit - Either use <qd-quick-edit> as a FormControl with formArrayName binding or provide data via input.');
         if (this.controlContainer && this.config.columns.some(column => column.validators != null))
-            console.warn('QdQuickEdit | Please provide validators in the specific FormControls directly for default validators to be added.');
+            console.warn('Quadrel Framework | QdQuickEdit - Please provide validators in the specific FormControls directly for default validators to be added.');
     }
     redrawOnNextChange() {
         this.togglerDrawing = !this.togglerDrawing;
@@ -33205,5 +33497,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, 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, 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, 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