@quadrel-enterprise-ui/framework 20.15.0 → 20.15.1

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

@@ -35,6 +35,8 @@ import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import * as i1$1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createSelector, createFeatureSelector, Store, StoreModule } from '@ngrx/store';
 import { diff } from 'deep-object-diff';
+import * as i1$2 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import isObject from 'lodash/isObject';
 import omit from 'lodash/omit';
 import { Directionality } from '@angular/cdk/bidi';
@@ -973,6 +975,8 @@ class QdButtonAdditionalInfoComponent {
                 return 'warningHexFilled';
             case 'info':
                 return 'exclamationCircle';
+            default:
+                return '';
         }
     }
     get infoType() {
@@ -2076,8 +2080,6 @@ class QdMockPopoverOnClickDirective {
     closed = new EventEmitter();
     _open = false;
     _embeddedView;
-    ngOnInit() { }
-    ngOnDestroy() { }
     show(event) {
         if (this.qdPopoverStopPropagation)
             event.stopPropagation();
@@ -7437,6 +7439,9 @@ const OVERLAY_WIDTH = 280;
 const UNSUBSCRIBE_IMMEDIATELY = true;
 const THRESHOLD = 1;
 /**
+ * @deprecated Will be removed in v21. This directive is no longer used inside
+ * the framework. Use `QdTooltipOnClickDirective` (`[qdTooltipOnClick]`) instead.
+ *
  * QdTooltipAtIntersectionDirective provides a tooltip. This will be triggered if the content is intersected.
  *
  * * Selector: [qdTooltipAtIntersection]
@@ -7496,7 +7501,8 @@ class QdTooltipAtIntersectionDirective {
             positionStrategy: this._positionBuilder
                 .flexibleConnectedTo(this._host)
                 .withPositions([{ originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' }]),
-            width: convertPxToRem(OVERLAY_WIDTH)
+            width: convertPxToRem(OVERLAY_WIDTH),
+            scrollStrategy: this._overlay.scrollStrategies.reposition()
         });
     }
     subscribeShow() {
@@ -7562,7 +7568,10 @@ class QdTooltipOnClickDirective {
             .withFlexibleDimensions(false)
             .withPush(false)
             .withPositions(TOOLTIP_POSITIONS);
-        this._overlayRef = this.overlay.create({ positionStrategy });
+        this._overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
         const tooltipRef = this._overlayRef.attach(new ComponentPortal(QdTooltipComponent));
         tooltipRef.instance.content = this.getContent();
     }
@@ -8177,6 +8186,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 
 // @ts-strict-ignore
+/**
+ * @deprecated Will be removed in v21. This directive is no longer used inside
+ * the framework. Use `QdPopoverOnClickDirective` (`[qdPopoverOnClick]`) instead.
+ */
 class QdPopoverOnHoverDirective {
     hostRef = inject(ElementRef);
     overlayPositionBuilder = inject(OverlayPositionBuilder);
@@ -8203,7 +8216,12 @@ class QdPopoverOnHoverDirective {
                 overlayY: 'top'
             }
         ]);
-        this.overlayRef = this.overlay.create({ positionStrategy, width: this.qdPopoverWidth, disposeOnNavigation: true });
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            width: this.qdPopoverWidth,
+            disposeOnNavigation: true,
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
     }
     ngOnDestroy() {
         this.close();
@@ -11477,7 +11495,7 @@ class QdInputComponent {
     }
     get maxLength() {
         if (!(this.control instanceof QdFormControl))
-            return;
+            return undefined;
         return this.control.getMaxLengthOrUndefined();
     }
     get valueAsList() {
@@ -11682,8 +11700,10 @@ class QdInputComponent {
         if (!this.control)
             return;
         const modelValue = this.control.value;
-        if (modelValue == null)
-            return void (this._value = getValueWithUnit(modelValue, this.config));
+        if (modelValue == null) {
+            this._value = getValueWithUnit(modelValue, this.config);
+            return;
+        }
         const normalized = getValueWithUnit(modelValue, this.config);
         const target = this.hasUnits ? normalized : normalized.value;
         if (!isEqual(modelValue, target))
@@ -15730,7 +15750,7 @@ class QdTextareaComponent {
     }
     get maxLength() {
         if (!(this.control instanceof QdFormControl))
-            return;
+            return undefined;
         return this.control.getMaxLengthOrUndefined();
     }
     ngOnInit() {
@@ -26034,7 +26054,7 @@ class QdSectionToolbarComponent {
     toolbarComponents;
     get searchConfigData() {
         if (this.config.search === false)
-            return;
+            return undefined;
         return this.config.search;
     }
     get filterData() {
@@ -27470,11 +27490,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class QdPageControlPanelComponent {
     config;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageControlPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageControlPanelComponent, isStandalone: false, selector: "qd-page-control-panel", inputs: { config: "config" }, ngImport: i0, template: "<header>\n  {{ config.title.i18n | translate }}\n</header>\n\n<main>\n  <ng-content select=\"qd-text-section\"></ng-content>\n  <ng-content select=\"qd-panel-section\"></ng-content>\n  <ng-content select=\"qd-section\"></ng-content>\n</main>\n", styles: ["qd-page-control-panel{position:relative;display:flex;height:100%;flex-direction:column;background:#fff}qd-page-control-panel header{padding:.75rem 1rem .5rem;border-bottom:.125rem solid rgb(213,213,213);color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}qd-page-control-panel main{flex-grow:99;overflow-y:auto}qd-page-control-panel qd-panel-section:last-child{margin-bottom:.75rem}qd-page-control-panel qd-section{margin:0 1rem}qd-page-control-panel qd-section:first-child{margin-top:1rem}qd-page-control-panel qd-section:last-child{margin-bottom:1rem}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageControlPanelComponent, isStandalone: false, selector: "qd-page-control-panel", inputs: { config: "config" }, ngImport: i0, template: "<header>\n  {{ config.title.i18n | translate }}\n</header>\n\n<main cdkScrollable>\n  <ng-content select=\"qd-text-section\"></ng-content>\n  <ng-content select=\"qd-panel-section\"></ng-content>\n  <ng-content select=\"qd-section\"></ng-content>\n</main>\n", styles: ["qd-page-control-panel{position:relative;display:flex;height:100%;flex-direction:column;background:#fff}qd-page-control-panel header{padding:.75rem 1rem .5rem;border-bottom:.125rem solid rgb(213,213,213);color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}qd-page-control-panel main{flex-grow:99;overflow-y:auto}qd-page-control-panel qd-panel-section:last-child{margin-bottom:.75rem}qd-page-control-panel qd-section{margin:0 1rem}qd-page-control-panel qd-section:first-child{margin-top:1rem}qd-page-control-panel qd-section:last-child{margin-bottom:1rem}\n"], dependencies: [{ kind: "directive", type: i1$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageControlPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-page-control-panel', encapsulation: ViewEncapsulation.None, standalone: false, template: "<header>\n  {{ config.title.i18n | translate }}\n</header>\n\n<main>\n  <ng-content select=\"qd-text-section\"></ng-content>\n  <ng-content select=\"qd-panel-section\"></ng-content>\n  <ng-content select=\"qd-section\"></ng-content>\n</main>\n", styles: ["qd-page-control-panel{position:relative;display:flex;height:100%;flex-direction:column;background:#fff}qd-page-control-panel header{padding:.75rem 1rem .5rem;border-bottom:.125rem solid rgb(213,213,213);color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}qd-page-control-panel main{flex-grow:99;overflow-y:auto}qd-page-control-panel qd-panel-section:last-child{margin-bottom:.75rem}qd-page-control-panel qd-section{margin:0 1rem}qd-page-control-panel qd-section:first-child{margin-top:1rem}qd-page-control-panel qd-section:last-child{margin-bottom:1rem}\n"] }]
+            args: [{ selector: 'qd-page-control-panel', encapsulation: ViewEncapsulation.None, standalone: false, template: "<header>\n  {{ config.title.i18n | translate }}\n</header>\n\n<main cdkScrollable>\n  <ng-content select=\"qd-text-section\"></ng-content>\n  <ng-content select=\"qd-panel-section\"></ng-content>\n  <ng-content select=\"qd-section\"></ng-content>\n</main>\n", styles: ["qd-page-control-panel{position:relative;display:flex;height:100%;flex-direction:column;background:#fff}qd-page-control-panel header{padding:.75rem 1rem .5rem;border-bottom:.125rem solid rgb(213,213,213);color:#171717;font-size:.875rem;font-weight:700;line-height:1.25rem}qd-page-control-panel main{flex-grow:99;overflow-y:auto}qd-page-control-panel qd-panel-section:last-child{margin-bottom:.75rem}qd-page-control-panel qd-section{margin:0 1rem}qd-page-control-panel qd-section:first-child{margin-top:1rem}qd-page-control-panel qd-section:last-child{margin-bottom:1rem}\n"] }]
         }], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -28596,6 +28616,7 @@ class QdPageObjectHeaderComponent {
     get headerFacets() {
         if (this.hasHeaderFacets(this.config))
             return this.config.headerFacets;
+        return undefined;
     }
     get isInspectAndViewMode$() {
         return this.pageStoreService.isViewonly$.pipe(takeUntil(this._destroyed$), map(isView => this.config.pageType === 'inspect' && isView));
@@ -29401,7 +29422,7 @@ class QdPageTabHeaderComponent extends CdkStepHeader {
         super(elementRef);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabHeaderComponent, isStandalone: true, selector: "qd-page-tab-header", inputs: { state: "state", label: "label", counters: "counters", index: "index", isSelected: "isSelected", isDisabled: "isDisabled", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "testId", "class.qd-tab-current": "isSelected && !isDisabled", "class.qd-tab-disabled": "isDisabled", "class.qd-tab-done": "state === STEP_STATE.DONE", "class.qd-tab-edit": "state === STEP_STATE.EDIT", "class.qd-tab-error": "state === STEP_STATE.ERROR" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"], dependencies: [{ kind: "component", type: QdPageTabHeaderCountersComponent, selector: "qd-page-tab-header-counters", inputs: ["counters", "data-test-id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabHeaderComponent, isStandalone: true, selector: "qd-page-tab-header", inputs: { state: "state", label: "label", counters: "counters", index: "index", isSelected: "isSelected", isDisabled: "isDisabled", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "testId", "class.qd-tab-current": "isSelected && !isDisabled", "class.qd-tab-disabled": "isDisabled", "class.qd-tab-done": "state === STEP_STATE.DONE", "class.qd-tab-edit": "state === STEP_STATE.EDIT", "class.qd-tab-error": "state === STEP_STATE.ERROR" } }, usesInheritance: true, ngImport: i0, template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500;white-space:nowrap}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"], dependencies: [{ kind: "component", type: QdPageTabHeaderCountersComponent, selector: "qd-page-tab-header-counters", inputs: ["counters", "data-test-id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabHeaderComponent, decorators: [{
             type: Component,
@@ -29412,7 +29433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         '[class.qd-tab-done]': 'state === STEP_STATE.DONE',
                         '[class.qd-tab-edit]': 'state === STEP_STATE.EDIT',
                         '[class.qd-tab-error]': 'state === STEP_STATE.ERROR'
-                    }, standalone: true, imports: [QdPageTabHeaderCountersComponent], template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"] }]
+                    }, standalone: true, imports: [QdPageTabHeaderCountersComponent], template: "<span class=\"qd-tab-caption\">\n  {{ label }}\n  <qd-page-tab-header-counters [counters]=\"counters\" [data-test-id]=\"testId + '-counters'\" />\n</span>\n", styles: [":host{position:relative;display:inline-flex;height:2.5rem;padding:.625rem 0;cursor:pointer;color:#757575;font-size:14px;font-weight:400;line-height:18px}:host .qd-tab-caption{font-weight:500;white-space:nowrap}:host:hover,:host.qd-tab-current{color:#069}:host.qd-tab-current .qd-tab-caption{position:relative}:host.qd-tab-current .qd-tab-caption:after{position:absolute;bottom:-.6875rem;left:0;display:inline-block;width:100%;height:.25rem;background-color:#069;content:\"\"}:host.qd-tab-done,:host.qd-tab-edit{color:#171717}:host.qd-tab-error{color:#c70023}:host.qd-tab-disabled{color:#b4b4b4;cursor:default}:host.qd-tab-disabled:hover{color:#b4b4b4}\n"] }]
         }], ctorParameters: () => [], propDecorators: { state: [{
                 type: Input
             }], label: [{
@@ -30651,7 +30672,7 @@ class QdPageComponent {
             QdPageSubmitActionService,
             QdResolverTriggerService,
             QdPageNavigationInterceptorService
-        ], queries: [{ propertyName: "controlPanel", first: true, predicate: QdPageControlPanelComponent, descendants: true }, { propertyName: "stepperComponent", first: true, predicate: QdPageStepperComponent, descendants: true }, { propertyName: "tabsComponent", first: true, predicate: QdPageTabsComponent, descendants: true }, { propertyName: "stepperAdapterDirective", first: true, predicate: QdPageStepperAdapterDirective, descendants: true }, { propertyName: "tabsAdapterDirective", first: true, predicate: QdPageTabsAdapterDirective, descendants: true }, { propertyName: "sections", predicate: QdSectionComponent }, { propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesOnChanges: true, ngImport: i0, template: "<main qdSnackbarListener>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QdProjectionGuardComponent, selector: "qd-projection-guard", inputs: ["isDisabled", "warningMessage"] }, { kind: "component", type: QdPageFooterComponent, selector: "qd-page-footer" }, { kind: "component", type: QdPageObjectHeaderComponent, selector: "qd-page-object-header", inputs: ["config", "hasNavigation", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+        ], queries: [{ propertyName: "controlPanel", first: true, predicate: QdPageControlPanelComponent, descendants: true }, { propertyName: "stepperComponent", first: true, predicate: QdPageStepperComponent, descendants: true }, { propertyName: "tabsComponent", first: true, predicate: QdPageTabsComponent, descendants: true }, { propertyName: "stepperAdapterDirective", first: true, predicate: QdPageStepperAdapterDirective, descendants: true }, { propertyName: "tabsAdapterDirective", first: true, predicate: QdPageTabsAdapterDirective, descendants: true }, { propertyName: "sections", predicate: QdSectionComponent }, { propertyName: "infoBanners", predicate: QdPageInfoBannerComponent }], usesOnChanges: true, ngImport: i0, template: "<main qdSnackbarListener cdkScrollable>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: QdProjectionGuardComponent, selector: "qd-projection-guard", inputs: ["isDisabled", "warningMessage"] }, { kind: "component", type: QdPageFooterComponent, selector: "qd-page-footer" }, { kind: "component", type: QdPageObjectHeaderComponent, selector: "qd-page-object-header", inputs: ["config", "hasNavigation", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageComponent, decorators: [{
             type: Component,
@@ -30661,7 +30682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdPageSubmitActionService,
                         QdResolverTriggerService,
                         QdPageNavigationInterceptorService
-                    ], host: { '[class.has-control-panel]': 'isControlPanelVisible', '[class.control-panel-broad]': 'isControlPanelBroad' }, standalone: false, template: "<main qdSnackbarListener>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\n"] }]
+                    ], host: { '[class.has-control-panel]': 'isControlPanelVisible', '[class.control-panel-broad]': 'isControlPanelBroad' }, standalone: false, template: "<main qdSnackbarListener cdkScrollable>\n  <qd-page-object-header\n    [data-test-id]=\"testId\"\n    [attr.data-test-id]=\"testId + 'object-header'\"\n    [config]=\"config\"\n    [hasNavigation]=\"hasNavigation\"\n  ></qd-page-object-header>\n\n  <div class=\"page-info-banners\">\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n\n  <ng-container *ngIf=\"config.pageType === 'create' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-stepper\"></ng-content>\n    <ng-content select=\"[qdPageStepperAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'overview' || config.pageType === 'inspect' || config.pageType === 'custom'\">\n    <ng-content select=\"qd-page-tabs\"></ng-content>\n    <ng-content select=\"[qdPageTabsAdapter]\"></ng-content>\n    <ng-content select=\"qd-section\"></ng-content>\n    <ng-content select=\"[qdSectionAdapter]\"></ng-content>\n  </ng-container>\n\n  <ng-container *ngIf=\"config.pageType === 'custom'\">\n    <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n  </ng-container>\n</main>\n\n<footer *ngIf=\"footerHasContent$ | async\">\n  <qd-page-footer [attr.data-test-id]=\"testId + '-footer'\">\n    <ng-content select=\"[qdPageFooter]\"></ng-content>\n  </qd-page-footer>\n</footer>\n\n<aside *ngIf=\"isControlPanelVisible\">\n  <ng-content select=\"qd-page-control-panel\"></ng-content>\n</aside>\n\n<qd-projection-guard *ngIf=\"config.pageType !== 'custom'\" [warningMessage]=\"projectionGuardMessage\">\n  <ng-container *ngTemplateOutlet=\"projectedContent\"></ng-container>\n</qd-projection-guard>\n\n<ng-template #projectedContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host{position:absolute;display:grid;overflow:hidden;width:100%;height:100%;background:#efefef;grid-template-areas:\"main\";grid-template-columns:1fr;grid-template-rows:1fr}:host.has-control-panel{grid-template-areas:\"main aside\";grid-template-columns:1fr 18.75rem}:host.control-panel-broad{grid-template-columns:1fr 27rem}:host.has-info-banners .page-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}@media (max-width: 599.98px){:host.has-info-banners .page-info-banners{padding-right:.9375rem;padding-left:.9375rem}}:host.has-info-banners qd-page-info-banner:last-child{margin-bottom:0}:host.has-footer{grid-template-areas:\"main\" \"footer\";grid-template-rows:calc(100% - 4rem) 4rem}:host.has-control-panel.has-footer{grid-template-areas:\"main aside\" \"footer aside\"}:host main{position:relative;grid-area:main;overflow-y:auto}:host aside{border-left:rgb(213,213,213) solid .0625rem;background:#fff;grid-area:aside}:host footer{grid-area:footer}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success{position:relative;top:-.5rem;padding-top:0rem;padding-bottom:0rem;border-top-width:0;margin-bottom:0rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .icon,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .icon,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .icon,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .icon{display:none}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .title,:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info .message,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .title,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning .message,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .title,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical .message,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .title,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success .message{position:relative;top:-.625rem}:host ::ng-deep .qd-page-info-banner-info+.qd-page-info-banner-info:before,:host ::ng-deep .qd-page-info-banner-warning+.qd-page-info-banner-warning:before,:host ::ng-deep .qd-page-info-banner-critical+.qd-page-info-banner-critical:before,:host ::ng-deep .qd-page-info-banner-success+.qd-page-info-banner-success:before{position:relative;top:-.625rem;left:-2.75rem;display:block;width:calc(100% + 4.75rem);height:.625rem;background-color:#fff;content:\"\"}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input,
                 args: [{ required: true }]
@@ -30808,6 +30829,7 @@ class QdPageModule {
             QdPageFooterCustomContentDirective,
             QdContextSelectDialogComponent,
             QdPageInfoBannerComponent], imports: [CommonModule,
+            ScrollingModule,
             TranslateModule,
             QdButtonModule,
             QdButtonModule,
@@ -30836,6 +30858,7 @@ class QdPageModule {
                 useValue: DynamicFacetsServiceInstance
             }
         ], imports: [CommonModule,
+            ScrollingModule,
             TranslateModule,
             QdButtonModule,
             QdButtonModule,
@@ -30857,6 +30880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{
                     imports: [
                         CommonModule,
+                        ScrollingModule,
                         TranslateModule,
                         QdButtonModule,
                         QdButtonModule,
@@ -31213,7 +31237,7 @@ class QdShellHeaderBannerComponent {
     bannerService = inject(QdShellBannerService);
     get colorClassName() {
         if (this.bannerService.isProduction || this.bannerService.bannerText === '')
-            return;
+            return '';
         return 'qd-shell__banner qd-shell__banner--' + this.bannerService.bannerText.toLowerCase();
     }
     get shouldRender() {
@@ -33489,6 +33513,8 @@ class QdPageTabComponent extends CdkStep {
     }
     ngOnInit() {
         this.validateLabel();
+        if (this.tabControl)
+            this.initErrorCheck();
     }
     ngOnChanges(changes) {
         super.ngOnChanges();
@@ -33506,6 +33532,24 @@ class QdPageTabComponent extends CdkStep {
         if (!this.config?.label?.i18n)
             console.error('Quadrel Framework | QdPageTab - Please provide a label for the tab.');
     }
+    initErrorCheck() {
+        this.tabControl.statusChanges.pipe(takeUntil$1(this._destroyed$)).subscribe(() => {
+            if (this.hasAnyError(this.tabControl)) {
+                this.interacted = true;
+            }
+        });
+    }
+    hasAnyError(control) {
+        if (control.errors && control.touched)
+            return true;
+        if (control instanceof FormGroup) {
+            return Object.values(control.controls).some(this.hasAnyError);
+        }
+        if (control instanceof FormArray) {
+            return control.controls.some(this.hasAnyError);
+        }
+        return false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageTabComponent, isStandalone: true, selector: "qd-page-tab", inputs: { config: "config", tabControl: "tabControl" }, providers: [
             { provide: CdkStep, useExisting: QdPageTabComponent },