@quadrel-enterprise-ui/framework 20.5.0 → 20.6.1-beta.127.1

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

@@ -3,8 +3,8 @@ import { inject, ElementRef, Directive, InjectionToken, HostBinding, Input, View
 import { Dialog, DialogRef, DialogModule } from '@angular/cdk/dialog';
 import * as i1 from '@angular/common';
 import { CommonModule, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
-import { BehaviorSubject, pairwise, from, switchMap, map as map$1, Subject, throwError, of, ReplaySubject, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, firstValueFrom, combineLatest, concat, take as take$1, delay, tap as tap$1, first, scan, combineLatestWith, forkJoin, delayWhen, withLatestFrom, async, filter as filter$1 } from 'rxjs';
-import { map, takeUntil, take, filter, catchError, debounceTime, startWith, distinctUntilChanged, concatMap, tap, skip, pairwise as pairwise$1, switchMap as switchMap$1, mergeMap, delay as delay$1 } from 'rxjs/operators';
+import { BehaviorSubject, pairwise, from, switchMap, map as map$1, Subject, throwError, of, ReplaySubject, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, firstValueFrom, combineLatest, concat, take as take$1, delay, tap as tap$1, first, scan, queueScheduler, combineLatestWith, forkJoin, delayWhen, withLatestFrom, async, filter as filter$1 } from 'rxjs';
+import { map, takeUntil, take, filter, catchError, debounceTime, startWith, distinctUntilChanged, concatMap, tap, skip, observeOn, switchMap as switchMap$1, pairwise as pairwise$1, mergeMap, delay as delay$1 } from 'rxjs/operators';
 import { v4 } from 'uuid';
 import * as i3 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
@@ -2162,15 +2162,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
-// @ts-strict-ignore
 class QdMockFileCollectorItemComponent {
     progress;
-    newlyUploaded;
+    newlyUploaded = false;
     collectedFile;
     error;
-    readonly;
-    viewonly;
-    downloadFilesWithHttpClient;
+    readonly = false;
+    viewonly = false;
+    downloadFilesWithHttpClient = false;
     uploadTimestamp;
     testId;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFileCollectorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2204,11 +2203,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['data-test-id']
             }] } });
 
-// @ts-strict-ignore
 class QdMockFileCollectorItemNameComponent {
     name;
+    testId;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFileCollectorItemNameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockFileCollectorItemNameComponent, isStandalone: false, selector: "qd-file-collector-item-name", inputs: { name: "name" }, ngImport: i0, template: 'name: {{ name }}', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockFileCollectorItemNameComponent, isStandalone: false, selector: "qd-file-collector-item-name", inputs: { name: "name", testId: ["data-test-id", "testId"] }, ngImport: i0, template: 'name: {{ name }}', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFileCollectorItemNameComponent, decorators: [{
             type: Component,
@@ -2219,13 +2218,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], propDecorators: { name: [{
                 type: Input
+            }], testId: [{
+                type: Input,
+                args: ['data-test-id']
             }] } });
 
-// @ts-strict-ignore
 class QdMockFileCollectorItemSizeComponent {
     size;
+    testId;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFileCollectorItemSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockFileCollectorItemSizeComponent, isStandalone: false, selector: "qd-file-collector-item-size", inputs: { size: "size" }, ngImport: i0, template: 'size: {{ size }}', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockFileCollectorItemSizeComponent, isStandalone: false, selector: "qd-file-collector-item-size", inputs: { size: "size", testId: ["data-test-id", "testId"] }, ngImport: i0, template: 'size: {{ size }}', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFileCollectorItemSizeComponent, decorators: [{
             type: Component,
@@ -2236,18 +2238,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], propDecorators: { size: [{
                 type: Input
+            }], testId: [{
+                type: Input,
+                args: ['data-test-id']
             }] } });
 
-// @ts-strict-ignore
 class QdMockFileCollectorItemToolsComponent {
     progress;
     collectedFile;
     error;
-    readonly;
-    viewonly;
-    downloadFilesWithHttpClient;
+    readonly = false;
+    viewonly = false;
+    downloadFilesWithHttpClient = false;
+    testId;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFileCollectorItemToolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockFileCollectorItemToolsComponent, isStandalone: false, selector: "qd-file-collector-item-tools", inputs: { progress: "progress", collectedFile: "collectedFile", error: "error", readonly: "readonly", viewonly: "viewonly", downloadFilesWithHttpClient: "downloadFilesWithHttpClient" }, ngImport: i0, template: 'progress: {{ progress }}, collectedFile: {{ collectedFile | json }}, error: {{ error | json }}, readonly: {{ readonly ? "true" : "false" }}, viewonly: {{ viewonly ? "true" : "false" }}, downloadFilesWithHttpClient: {{ downloadFilesWithHttpClient ? "true" : "false" }}', isInline: true, dependencies: [{ kind: "pipe", type: i1.JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockFileCollectorItemToolsComponent, isStandalone: false, selector: "qd-file-collector-item-tools", inputs: { progress: "progress", collectedFile: "collectedFile", error: "error", readonly: "readonly", viewonly: "viewonly", downloadFilesWithHttpClient: "downloadFilesWithHttpClient", testId: ["data-test-id", "testId"] }, ngImport: i0, template: 'progress: {{ progress }}, collectedFile: {{ collectedFile | json }}, error: {{ error | json }}, readonly: {{ readonly ? "true" : "false" }}, viewonly: {{ viewonly ? "true" : "false" }}, downloadFilesWithHttpClient: {{ downloadFilesWithHttpClient ? "true" : "false" }}', isInline: true, dependencies: [{ kind: "pipe", type: i1.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFileCollectorItemToolsComponent, decorators: [{
             type: Component,
@@ -2268,15 +2273,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], downloadFilesWithHttpClient: [{
                 type: Input
+            }], testId: [{
+                type: Input,
+                args: ['data-test-id']
             }] } });
 
-// @ts-strict-ignore
 class QdMockFileCollectorDialogItemComponent {
     progress;
     collectedFile;
     error;
+    testId;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFileCollectorDialogItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockFileCollectorDialogItemComponent, isStandalone: false, selector: "qd-file-collector-dialog-item", inputs: { progress: "progress", collectedFile: "collectedFile", error: "error" }, ngImport: i0, template: 'progress: {{ progress }}, collectedFile: {{ collectedFile | json }}, error: {{ error | json }}', isInline: true, dependencies: [{ kind: "pipe", type: i1.JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockFileCollectorDialogItemComponent, isStandalone: false, selector: "qd-file-collector-dialog-item", inputs: { progress: "progress", collectedFile: "collectedFile", error: "error", testId: ["data-test-id", "testId"] }, ngImport: i0, template: 'progress: {{ progress }}, collectedFile: {{ collectedFile | json }}, error: {{ error | json }}', isInline: true, dependencies: [{ kind: "pipe", type: i1.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFileCollectorDialogItemComponent, decorators: [{
             type: Component,
@@ -2291,13 +2299,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], error: [{
                 type: Input
+            }], testId: [{
+                type: Input,
+                args: ['data-test-id']
             }] } });
 
-// @ts-strict-ignore
 class QdMockFileCollectorDialogItemErrorComponent {
     error;
+    testId;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFileCollectorDialogItemErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockFileCollectorDialogItemErrorComponent, isStandalone: false, selector: "qd-file-collector-dialog-item-error", inputs: { error: "error" }, ngImport: i0, template: 'error: {{ error | json }}', isInline: true, dependencies: [{ kind: "pipe", type: i1.JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockFileCollectorDialogItemErrorComponent, isStandalone: false, selector: "qd-file-collector-dialog-item-error", inputs: { error: "error", testId: ["data-test-id", "testId"] }, ngImport: i0, template: 'error: {{ error | json }}', isInline: true, dependencies: [{ kind: "pipe", type: i1.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFileCollectorDialogItemErrorComponent, decorators: [{
             type: Component,
@@ -2308,14 +2319,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], propDecorators: { error: [{
                 type: Input
+            }], testId: [{
+                type: Input,
+                args: ['data-test-id']
             }] } });
 
-// @ts-strict-ignore
 class QdMockFileCollectorDialogItemProgressComponent {
-    progress;
+    progress = 0;
     error;
+    testId;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFileCollectorDialogItemProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockFileCollectorDialogItemProgressComponent, isStandalone: false, selector: "qd-file-collector-dialog-item-progress", inputs: { progress: "progress", error: "error" }, ngImport: i0, template: 'progress: {{ progress }}', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockFileCollectorDialogItemProgressComponent, isStandalone: false, selector: "qd-file-collector-dialog-item-progress", inputs: { progress: "progress", error: "error", testId: ["data-test-id", "testId"] }, ngImport: i0, template: 'progress: {{ progress }}', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockFileCollectorDialogItemProgressComponent, decorators: [{
             type: Component,
@@ -2328,6 +2342,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], error: [{
                 type: Input
+            }], testId: [{
+                type: Input,
+                args: ['data-test-id']
             }] } });
 
 class QdMockFileCollectorModule {
@@ -6029,16 +6046,20 @@ class QdDataFacetsCurrencyComponent {
             return '';
         // Swiss speciality with a period instead of a comma
         const localeWithSuffix = ['de', 'fr', 'it'].includes(lang) ? `${lang}-CH` : lang;
+        // Normalize U+0027 (apostrophe) to U+2019 (right single quotation mark), which is the
+        // correct Swiss thousands separator. Older ICU versions (used in some CI environments)
+        // incorrectly emit U+0027 instead.
+        const normalize = (s) => s.replace(/\u0027/g, '\u2019');
         if (this.config?.showCurrencyUnit) {
-            return new Intl.NumberFormat(localeWithSuffix, {
+            return normalize(new Intl.NumberFormat(localeWithSuffix, {
                 style: 'currency',
                 currency: this.config?.currency ?? 'chf'
-            }).format(this.data);
+            }).format(this.data));
         }
-        return new Intl.NumberFormat(localeWithSuffix, {
+        return normalize(new Intl.NumberFormat(localeWithSuffix, {
             minimumFractionDigits: 2,
             maximumFractionDigits: 2
-        }).format(this.data);
+        }).format(this.data));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDataFacetsCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdDataFacetsCurrencyComponent, isStandalone: false, selector: "qd-data-facets-currency", inputs: { config: "config", data: "data", testId: "testId" }, host: { properties: { "attr.data-test-id": "testId" }, classAttribute: "qd-data-facets" }, usesOnChanges: true, ngImport: i0, template: "{{ currency$ | async }}\n", styles: [":host{text-align:right}\n"], dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -17345,7 +17366,13 @@ class QdPageStoreService {
     }
     initPageState(config) {
         this.config = config;
-        this.config?.pageType === 'inspect' ? this.toggleViewonly(true) : this.toggleViewonly(false);
+        if (this.config?.pageType === 'inspect') {
+            const operationMode = this.config.pageTypeConfig?.operationMode;
+            this.toggleViewonly(operationMode !== 'edit');
+        }
+        else {
+            this.toggleViewonly(false);
+        }
     }
     getConfig() {
         return this.config;
@@ -18305,7 +18332,6 @@ var QdUploadErrorType;
     QdUploadErrorType["UNKNOWN_ERROR"] = "UNKNOWN_ERROR";
 })(QdUploadErrorType || (QdUploadErrorType = {}));
 
-// @ts-strict-ignore
 class QdFileCollectorValidationService {
     _config;
     get allowedMimeTypes() {
@@ -18342,7 +18368,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             type: Injectable
         }] });
 
-// @ts-strict-ignore
 class QdFileCollectorService {
     fileManager = inject(QD_FILE_MANAGER_TOKEN);
     fileCollectorValidationService = inject(QdFileCollectorValidationService);
@@ -18386,8 +18411,8 @@ class QdFileCollectorService {
                 }
                 if (uploadProgress?.error) {
                     fileUpload.error = {
-                        type: QdUploadErrorType.UNKNOWN_SERVER_ERROR,
-                        ...uploadProgress.error
+                        ...uploadProgress.error,
+                        type: uploadProgress.error.type ?? QdUploadErrorType.UNKNOWN_SERVER_ERROR
                     };
                 }
                 this.changeDetectorRef.detectChanges();
@@ -18403,7 +18428,10 @@ class QdFileCollectorService {
         this.fileManager.delete(collectedFile).subscribe(deleted => {
             if (!deleted)
                 return;
-            this.fileUploads.splice(this.fileUploads.findIndex(fileUpload => fileUpload.collectedFile === collectedFile), 1);
+            const index = this.fileUploads.findIndex(fileUpload => fileUpload.collectedFile === collectedFile);
+            if (index === -1)
+                return;
+            this.fileUploads.splice(index, 1);
             this.changeDetectorRef.detectChanges();
         });
     }
@@ -18452,7 +18480,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
-// @ts-strict-ignore
 class QdFileCollectorAllowedFilesDescriptionComponent {
     fileCollectorService = inject(QdFileCollectorService);
     get allowedFileTypes() {
@@ -18487,10 +18514,13 @@ var QdUploadProgressState;
     QdUploadProgressState["ERROR"] = "error";
 })(QdUploadProgressState || (QdUploadProgressState = {}));
 
-// @ts-strict-ignore
 class QdFileCollectorDialogItemProgressComponent {
     progress = 0;
     error;
+    testId;
+    get hostTestId() {
+        return this.testId;
+    }
     _uploadStateSubject = new BehaviorSubject(QdUploadProgressState.STARTING);
     _destroyed$ = new Subject();
     uploadState$ = this._uploadStateSubject.asObservable();
@@ -18533,7 +18563,7 @@ class QdFileCollectorDialogItemProgressComponent {
     }
     QdUploadState = QdUploadProgressState;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorDialogItemProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorDialogItemProgressComponent, isStandalone: false, selector: "qd-file-collector-dialog-item-progress", inputs: { progress: "progress", error: "error" }, host: { classAttribute: "qd-file-collector-dialog-item-progress" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"uploadState$ | async as uploadState\">\n  <span\n    [class]=\"'upload-progress-bar-container'\"\n    *ngIf=\"\n      [QdUploadState.STARTING, QdUploadState.IN_PROGRESS, QdUploadState.FINISHING].includes(uploadState);\n      else completed\n    \"\n  >\n    <span\n      [ngClass]=\"{\n        'upload-progress-bar-progress': true,\n        filled: [QdUploadState.IN_PROGRESS, QdUploadState.FINISHING].includes(uploadState),\n        success: QdUploadState.FINISHING === uploadState\n      }\"\n      [class]=\"'upload-progress-bar-progress'\"\n      [ngStyle]=\"{ minWidth: progress + '%' }\"\n    >\n      {{ progress ? progress : 0 }}%\n    </span>\n  </span>\n  <ng-template #completed>\n    <span [class]=\"'upload-state-chip ' + uploadState\">\n      {{ \"i18n.qd.fileCollector.uploadState.\" + uploadState | translate }}\n    </span>\n  </ng-template>\n</ng-container>\n", styles: [":host{position:relative;display:flex;margin-top:.0625rem}:host .upload-progress-bar-container{width:12.5rem}:host .upload-progress-bar-progress,:host .upload-state-chip{color:#e97e00;font-size:.625rem;font-weight:500;line-height:1rem;display:inline-block;padding-right:.375rem;padding-left:.5rem;border:solid .0625rem rgb(233,126,0);border-radius:.5rem;background:#fff;transition:min-width 1s}:host .upload-progress-bar-progress.filled,:host .upload-state-chip.filled{border-color:#e97e00;background:#e97e00;color:#fff}:host .upload-progress-bar-progress.success,:host .upload-state-chip.success{border-color:#00813a;background:#fff;color:#00813a}:host .upload-progress-bar-progress.success.filled,:host .upload-state-chip.success.filled{border-color:#00813a;background:#00813a;color:#fff}:host .upload-progress-bar-progress.error,:host .upload-state-chip.error{border-color:#c70023;background:#fff;color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorDialogItemProgressComponent, isStandalone: false, selector: "qd-file-collector-dialog-item-progress", inputs: { progress: "progress", error: "error", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.hostTestId" }, classAttribute: "qd-file-collector-dialog-item-progress" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"uploadState$ | async as uploadState\">\n  <span\n    [class]=\"'upload-progress-bar-container'\"\n    *ngIf=\"\n      [QdUploadState.STARTING, QdUploadState.IN_PROGRESS, QdUploadState.FINISHING].includes(uploadState);\n      else completed\n    \"\n  >\n    <span\n      [ngClass]=\"{\n        'upload-progress-bar-progress': true,\n        filled: [QdUploadState.IN_PROGRESS, QdUploadState.FINISHING].includes(uploadState),\n        success: QdUploadState.FINISHING === uploadState\n      }\"\n      [class]=\"'upload-progress-bar-progress'\"\n      [ngStyle]=\"{ minWidth: progress + '%' }\"\n    >\n      {{ progress ? progress : 0 }}%\n    </span>\n  </span>\n  <ng-template #completed>\n    <span [class]=\"'upload-state-chip ' + uploadState\">\n      {{ \"i18n.qd.fileCollector.uploadState.\" + uploadState | translate }}\n    </span>\n  </ng-template>\n</ng-container>\n", styles: [":host{position:relative;display:flex;margin-top:.0625rem}:host .upload-progress-bar-container{width:12.5rem}:host .upload-progress-bar-progress,:host .upload-state-chip{color:#e97e00;font-size:.625rem;font-weight:500;line-height:1rem;display:inline-block;padding-right:.375rem;padding-left:.5rem;border:solid .0625rem rgb(233,126,0);border-radius:.5rem;background:#fff;transition:min-width 1s}:host .upload-progress-bar-progress.filled,:host .upload-state-chip.filled{border-color:#e97e00;background:#e97e00;color:#fff}:host .upload-progress-bar-progress.success,:host .upload-state-chip.success{border-color:#00813a;background:#fff;color:#00813a}:host .upload-progress-bar-progress.success.filled,:host .upload-state-chip.success.filled{border-color:#00813a;background:#00813a;color:#fff}:host .upload-progress-bar-progress.error,:host .upload-state-chip.error{border-color:#c70023;background:#fff;color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorDialogItemProgressComponent, decorators: [{
             type: Component,
@@ -18542,12 +18572,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], error: [{
                 type: Input
+            }], testId: [{
+                type: Input,
+                args: [{ required: true, alias: 'data-test-id' }]
+            }], hostTestId: [{
+                type: HostBinding,
+                args: ['attr.data-test-id']
             }] } });
 
-// @ts-strict-ignore
 class QdFileCollectorDialogItemErrorComponent {
     fileCollectorService = inject(QdFileCollectorService);
     error;
+    testId;
+    get hostTestId() {
+        return this.testId;
+    }
     QdUploadErrorType = QdUploadErrorType;
     get maxFileSizeInBytes() {
         return this.config?.maxFileSizeInBytes;
@@ -18562,41 +18601,53 @@ class QdFileCollectorDialogItemErrorComponent {
         return this.fileCollectorService.config;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorDialogItemErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorDialogItemErrorComponent, isStandalone: false, selector: "qd-file-collector-dialog-item-error", inputs: { error: "error" }, ngImport: i0, template: "<span *ngIf=\"error.message; else errorMessageNotGiven\">{{ error.message }}</span>\n<ng-template #errorMessageNotGiven [ngSwitch]=\"error.type\">\n  <span *ngSwitchCase=\"QdUploadErrorType.INVALID_MIME_TYPE\">{{\n    invalidMimeTypeErrorMessageI18n || \"i18n.qd.fileCollector.invalid.fileType\" | translate\n  }}</span>\n  <span *ngSwitchCase=\"QdUploadErrorType.INVALID_FILE_SIZE\">{{\n    \"i18n.qd.fileCollector.invalid.fileSize\"\n      | translate\n      | placeholder : \"maxFileSize\" : (maxFileSizeInBytes | filesize | async)\n  }}</span>\n  <span *ngSwitchCase=\"QdUploadErrorType.INVALID_FILE_NAME\">{{\n    invalidFileNameErrorMessageI18n || \"i18n.qd.fileCollector.invalid.fileName\" | translate\n  }}</span>\n  <span *ngSwitchCase=\"QdUploadErrorType.UNKNOWN_ERROR\">{{ \"i18n.qd.fileCollector.invalid.unknown\" | translate }}</span>\n</ng-template>\n", styles: [":host{display:flex;width:100%;align-items:center}:host span{color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: QdPlaceholderPipe, name: "placeholder" }, { kind: "pipe", type: QdFileSizePipe, name: "filesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorDialogItemErrorComponent, isStandalone: false, selector: "qd-file-collector-dialog-item-error", inputs: { error: "error", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.hostTestId" } }, ngImport: i0, template: "<span *ngIf=\"error.message; else errorMessageNotGiven\">{{ error.message }}</span>\n<ng-template #errorMessageNotGiven [ngSwitch]=\"error.type\">\n  <span *ngSwitchCase=\"QdUploadErrorType.INVALID_MIME_TYPE\">{{\n    invalidMimeTypeErrorMessageI18n || \"i18n.qd.fileCollector.invalid.fileType\" | translate\n  }}</span>\n  <span *ngSwitchCase=\"QdUploadErrorType.INVALID_FILE_SIZE\">{{\n    \"i18n.qd.fileCollector.invalid.fileSize\"\n      | translate\n      | placeholder : \"maxFileSize\" : (maxFileSizeInBytes | filesize | async)\n  }}</span>\n  <span *ngSwitchCase=\"QdUploadErrorType.INVALID_FILE_NAME\">{{\n    invalidFileNameErrorMessageI18n || \"i18n.qd.fileCollector.invalid.fileName\" | translate\n  }}</span>\n  <span *ngSwitchCase=\"QdUploadErrorType.UNKNOWN_ERROR\">{{ \"i18n.qd.fileCollector.invalid.unknown\" | translate }}</span>\n</ng-template>\n", styles: [":host{display:flex;width:100%;align-items:center}:host span{color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: QdPlaceholderPipe, name: "placeholder" }, { kind: "pipe", type: QdFileSizePipe, name: "filesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorDialogItemErrorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'qd-file-collector-dialog-item-error', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span *ngIf=\"error.message; else errorMessageNotGiven\">{{ error.message }}</span>\n<ng-template #errorMessageNotGiven [ngSwitch]=\"error.type\">\n  <span *ngSwitchCase=\"QdUploadErrorType.INVALID_MIME_TYPE\">{{\n    invalidMimeTypeErrorMessageI18n || \"i18n.qd.fileCollector.invalid.fileType\" | translate\n  }}</span>\n  <span *ngSwitchCase=\"QdUploadErrorType.INVALID_FILE_SIZE\">{{\n    \"i18n.qd.fileCollector.invalid.fileSize\"\n      | translate\n      | placeholder : \"maxFileSize\" : (maxFileSizeInBytes | filesize | async)\n  }}</span>\n  <span *ngSwitchCase=\"QdUploadErrorType.INVALID_FILE_NAME\">{{\n    invalidFileNameErrorMessageI18n || \"i18n.qd.fileCollector.invalid.fileName\" | translate\n  }}</span>\n  <span *ngSwitchCase=\"QdUploadErrorType.UNKNOWN_ERROR\">{{ \"i18n.qd.fileCollector.invalid.unknown\" | translate }}</span>\n</ng-template>\n", styles: [":host{display:flex;width:100%;align-items:center}:host span{color:#c70023}\n"] }]
         }], propDecorators: { error: [{
                 type: Input
+            }], testId: [{
+                type: Input,
+                args: [{ required: true, alias: 'data-test-id' }]
+            }], hostTestId: [{
+                type: HostBinding,
+                args: ['attr.data-test-id']
             }] } });
 
-// @ts-strict-ignore
 class QdFileCollectorDialogItemComponent {
     progress;
     collectedFile;
     error;
+    testId;
+    get hostTestId() {
+        return this.testId;
+    }
     get isSuccessful() {
         return !this.error && this.progress === 100;
     }
     get hasError() {
         return !!this.error;
     }
-    canUpload() {
-        return false; // TODO discuss whether we want this feature; return !!this.error;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorDialogItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorDialogItemComponent, isStandalone: false, selector: "qd-file-collector-dialog-item", inputs: { progress: "progress", collectedFile: "collectedFile", error: "error" }, host: { properties: { "class.success": "this.isSuccessful", "class.error": "this.hasError" } }, ngImport: i0, template: "<span class=\"name\">{{ this.collectedFile.name }}</span>\n<qd-file-collector-dialog-item-progress\n  [progress]=\"this.progress\"\n  [error]=\"this.error\"\n></qd-file-collector-dialog-item-progress>\n<span class=\"filesize\">{{ this.collectedFile.size | filesize | async }}</span>\n<qd-icon class=\"upload\" icon=\"dataUpload\" *ngIf=\"canUpload()\"></qd-icon>\n<qd-file-collector-dialog-item-error [error]=\"this.error\" *ngIf=\"!!this.error\"></qd-file-collector-dialog-item-error>\n", styles: [":host{color:#333;font-size:.875rem;font-weight:400;line-height:1.3125rem;position:relative;display:grid;align-items:self-start;padding:.625rem 1rem .625rem 2.875rem;border-left:transparent .1875rem solid;margin-bottom:.75rem;background:#fff;gap:.25rem 1rem;grid-template-columns:30rem auto max-content;outline:rgb(151,151,151) .0625rem solid}:host qd-file-collector-dialog-item-error{grid-column:span 2}:host .filesize{text-align:right}@media (max-width: 959.98px){:host{grid-template-columns:18.75rem auto max-content}:host .name{overflow:auto;overflow-wrap:break-word}}@media (max-width: 599.98px){:host{grid-template-columns:auto auto auto}:host .name,:host qd-file-collector-dialog-item-progress{grid-column:span 2}:host qd-file-collector-dialog-item-progress,:host .filesize{order:-1}}:host:last-child{margin-bottom:0}:host.error{border-left-color:#c70023}:host.success{border-left-color:#00813a}:host:before{position:absolute;top:.5625rem;left:.875rem;content:\"\\e964\";font-family:Quadrel-Icon,sans-serif;font-size:1.25rem}:host .upload{color:#454545;cursor:pointer;font-size:1rem}:host .upload:hover,:host .upload:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdFileCollectorDialogItemProgressComponent, selector: "qd-file-collector-dialog-item-progress", inputs: ["progress", "error"] }, { kind: "component", type: QdFileCollectorDialogItemErrorComponent, selector: "qd-file-collector-dialog-item-error", inputs: ["error"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: QdFileSizePipe, name: "filesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorDialogItemComponent, isStandalone: false, selector: "qd-file-collector-dialog-item", inputs: { progress: "progress", collectedFile: "collectedFile", error: "error", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.hostTestId", "class.success": "this.isSuccessful", "class.error": "this.hasError" } }, ngImport: i0, template: "<span class=\"name\" [attr.data-test-id]=\"testId + '-name'\">{{ this.collectedFile.name }}</span>\n<qd-file-collector-dialog-item-progress\n  [progress]=\"this.progress\"\n  [error]=\"this.error\"\n  [data-test-id]=\"testId + '-progress'\"\n></qd-file-collector-dialog-item-progress>\n<span class=\"filesize\" [attr.data-test-id]=\"testId + '-size'\">{{ this.collectedFile.size | filesize | async }}</span>\n<qd-file-collector-dialog-item-error\n  [error]=\"this.error\"\n  *ngIf=\"!!this.error\"\n  [data-test-id]=\"testId + '-error'\"\n></qd-file-collector-dialog-item-error>\n", styles: [":host{color:#333;font-size:.875rem;font-weight:400;line-height:1.3125rem;position:relative;display:grid;align-items:self-start;padding:.625rem 1rem .625rem 2.875rem;border-left:transparent .1875rem solid;margin-bottom:.75rem;background:#fff;gap:.25rem 1rem;grid-template-columns:30rem auto max-content;outline:rgb(151,151,151) .0625rem solid}:host qd-file-collector-dialog-item-error{grid-column:span 2}:host .filesize{text-align:right}@media (max-width: 959.98px){:host{grid-template-columns:18.75rem auto max-content}:host .name{overflow:auto;overflow-wrap:break-word}}@media (max-width: 599.98px){:host{grid-template-columns:auto auto auto}:host .name,:host qd-file-collector-dialog-item-progress{grid-column:span 2}:host qd-file-collector-dialog-item-progress,:host .filesize{order:-1}}:host:last-child{margin-bottom:0}:host.error{border-left-color:#c70023}:host.success{border-left-color:#00813a}:host:before{position:absolute;top:.5625rem;left:.875rem;content:\"\\e964\";font-family:Quadrel-Icon,sans-serif;font-size:1.25rem}:host .upload{color:#454545;cursor:pointer;font-size:1rem}:host .upload:hover,:host .upload:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdFileCollectorDialogItemProgressComponent, selector: "qd-file-collector-dialog-item-progress", inputs: ["progress", "error", "data-test-id"] }, { kind: "component", type: QdFileCollectorDialogItemErrorComponent, selector: "qd-file-collector-dialog-item-error", inputs: ["error", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: QdFileSizePipe, name: "filesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorDialogItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-file-collector-dialog-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span class=\"name\">{{ this.collectedFile.name }}</span>\n<qd-file-collector-dialog-item-progress\n  [progress]=\"this.progress\"\n  [error]=\"this.error\"\n></qd-file-collector-dialog-item-progress>\n<span class=\"filesize\">{{ this.collectedFile.size | filesize | async }}</span>\n<qd-icon class=\"upload\" icon=\"dataUpload\" *ngIf=\"canUpload()\"></qd-icon>\n<qd-file-collector-dialog-item-error [error]=\"this.error\" *ngIf=\"!!this.error\"></qd-file-collector-dialog-item-error>\n", styles: [":host{color:#333;font-size:.875rem;font-weight:400;line-height:1.3125rem;position:relative;display:grid;align-items:self-start;padding:.625rem 1rem .625rem 2.875rem;border-left:transparent .1875rem solid;margin-bottom:.75rem;background:#fff;gap:.25rem 1rem;grid-template-columns:30rem auto max-content;outline:rgb(151,151,151) .0625rem solid}:host qd-file-collector-dialog-item-error{grid-column:span 2}:host .filesize{text-align:right}@media (max-width: 959.98px){:host{grid-template-columns:18.75rem auto max-content}:host .name{overflow:auto;overflow-wrap:break-word}}@media (max-width: 599.98px){:host{grid-template-columns:auto auto auto}:host .name,:host qd-file-collector-dialog-item-progress{grid-column:span 2}:host qd-file-collector-dialog-item-progress,:host .filesize{order:-1}}:host:last-child{margin-bottom:0}:host.error{border-left-color:#c70023}:host.success{border-left-color:#00813a}:host:before{position:absolute;top:.5625rem;left:.875rem;content:\"\\e964\";font-family:Quadrel-Icon,sans-serif;font-size:1.25rem}:host .upload{color:#454545;cursor:pointer;font-size:1rem}:host .upload:hover,:host .upload:focus{color:#171717}\n"] }]
+            args: [{ selector: 'qd-file-collector-dialog-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span class=\"name\" [attr.data-test-id]=\"testId + '-name'\">{{ this.collectedFile.name }}</span>\n<qd-file-collector-dialog-item-progress\n  [progress]=\"this.progress\"\n  [error]=\"this.error\"\n  [data-test-id]=\"testId + '-progress'\"\n></qd-file-collector-dialog-item-progress>\n<span class=\"filesize\" [attr.data-test-id]=\"testId + '-size'\">{{ this.collectedFile.size | filesize | async }}</span>\n<qd-file-collector-dialog-item-error\n  [error]=\"this.error\"\n  *ngIf=\"!!this.error\"\n  [data-test-id]=\"testId + '-error'\"\n></qd-file-collector-dialog-item-error>\n", styles: [":host{color:#333;font-size:.875rem;font-weight:400;line-height:1.3125rem;position:relative;display:grid;align-items:self-start;padding:.625rem 1rem .625rem 2.875rem;border-left:transparent .1875rem solid;margin-bottom:.75rem;background:#fff;gap:.25rem 1rem;grid-template-columns:30rem auto max-content;outline:rgb(151,151,151) .0625rem solid}:host qd-file-collector-dialog-item-error{grid-column:span 2}:host .filesize{text-align:right}@media (max-width: 959.98px){:host{grid-template-columns:18.75rem auto max-content}:host .name{overflow:auto;overflow-wrap:break-word}}@media (max-width: 599.98px){:host{grid-template-columns:auto auto auto}:host .name,:host qd-file-collector-dialog-item-progress{grid-column:span 2}:host qd-file-collector-dialog-item-progress,:host .filesize{order:-1}}:host:last-child{margin-bottom:0}:host.error{border-left-color:#c70023}:host.success{border-left-color:#00813a}:host:before{position:absolute;top:.5625rem;left:.875rem;content:\"\\e964\";font-family:Quadrel-Icon,sans-serif;font-size:1.25rem}:host .upload{color:#454545;cursor:pointer;font-size:1rem}:host .upload:hover,:host .upload:focus{color:#171717}\n"] }]
         }], propDecorators: { progress: [{
                 type: Input
             }], collectedFile: [{
                 type: Input
             }], error: [{
                 type: Input
+            }], testId: [{
+                type: Input,
+                args: [{ required: true, alias: 'data-test-id' }]
+            }], hostTestId: [{
+                type: HostBinding,
+                args: ['attr.data-test-id']
             }], isSuccessful: [{
                 type: HostBinding,
                 args: ['class.success']
@@ -18622,17 +18673,17 @@ class QdFileCollectorDialogComponent {
         this.dialogRef.close(this.fileUploads);
     }
     isCloseButtonDisabled() {
-        return !this.fileUploads.every(this._isFileUploadCompleted);
+        return !this.fileUploads.every(this.isFileUploadCompleted);
     }
-    _isFileUploadCompleted(fileUpload) {
+    isFileUploadCompleted(fileUpload) {
         return !!fileUpload.error || fileUpload.progress === 100;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorDialogComponent, isStandalone: false, selector: "qd-file-collector-dialog", providers: [QdFileCollectorService], ngImport: i0, template: "<qd-dialog>\n  <qd-file-collector-dialog-item\n    *ngFor=\"let fileUpload of this.fileUploads\"\n    [progress]=\"fileUpload.progress\"\n    [collectedFile]=\"fileUpload.collectedFile\"\n    [error]=\"fileUpload.error\"\n  ></qd-file-collector-dialog-item>\n  <qd-dialog-action>\n    <button qdButton (click)=\"close()\" [disabled]=\"isCloseButtonDisabled()\">\n      {{ \"i18n.qd.fileCollector.button.finish\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "component", type: QdFileCollectorDialogItemComponent, selector: "qd-file-collector-dialog-item", inputs: ["progress", "collectedFile", "error"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorDialogComponent, isStandalone: false, selector: "qd-file-collector-dialog", providers: [QdFileCollectorService], ngImport: i0, template: "<qd-dialog>\n  <qd-file-collector-dialog-item\n    *ngFor=\"let fileUpload of this.fileUploads; let i = index\"\n    [progress]=\"fileUpload.progress\"\n    [collectedFile]=\"fileUpload.collectedFile\"\n    [error]=\"fileUpload.error\"\n    [data-test-id]=\"'file-collector-dialog-item-' + i\"\n  ></qd-file-collector-dialog-item>\n  <qd-dialog-action>\n    <button\n      qdButton\n      (click)=\"close()\"\n      [disabled]=\"isCloseButtonDisabled()\"\n      data-test-id=\"file-collector-dialog-button-finish\"\n    >\n      {{ \"i18n.qd.fileCollector.button.finish\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "component", type: QdFileCollectorDialogItemComponent, selector: "qd-file-collector-dialog-item", inputs: ["progress", "collectedFile", "error", "data-test-id"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-file-collector-dialog', providers: [QdFileCollectorService], standalone: false, template: "<qd-dialog>\n  <qd-file-collector-dialog-item\n    *ngFor=\"let fileUpload of this.fileUploads\"\n    [progress]=\"fileUpload.progress\"\n    [collectedFile]=\"fileUpload.collectedFile\"\n    [error]=\"fileUpload.error\"\n  ></qd-file-collector-dialog-item>\n  <qd-dialog-action>\n    <button qdButton (click)=\"close()\" [disabled]=\"isCloseButtonDisabled()\">\n      {{ \"i18n.qd.fileCollector.button.finish\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n" }]
+            args: [{ selector: 'qd-file-collector-dialog', providers: [QdFileCollectorService], standalone: false, template: "<qd-dialog>\n  <qd-file-collector-dialog-item\n    *ngFor=\"let fileUpload of this.fileUploads; let i = index\"\n    [progress]=\"fileUpload.progress\"\n    [collectedFile]=\"fileUpload.collectedFile\"\n    [error]=\"fileUpload.error\"\n    [data-test-id]=\"'file-collector-dialog-item-' + i\"\n  ></qd-file-collector-dialog-item>\n  <qd-dialog-action>\n    <button\n      qdButton\n      (click)=\"close()\"\n      [disabled]=\"isCloseButtonDisabled()\"\n      data-test-id=\"file-collector-dialog-button-finish\"\n    >\n      {{ \"i18n.qd.fileCollector.button.finish\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n" }]
         }], ctorParameters: () => [] });
 
 class QdSectionToolbarActionService {
@@ -18768,7 +18819,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
-// @ts-strict-ignore
 class QdFileCollectorItemNameComponent {
     name;
     testId;
@@ -18791,7 +18841,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['attr.data-test-id']
             }] } });
 
-// @ts-strict-ignore
 class QdFileCollectorItemSizeComponent {
     size;
     testId;
@@ -18828,14 +18877,13 @@ class QdFileDeleteDialogComponent {
         this.dialogRef.close(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileDeleteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileDeleteDialogComponent, isStandalone: false, selector: "qd-file-delete-dialog", ngImport: i0, template: "<qd-dialog>\n  {{ deleteHint }}\n\n  <qd-dialog-action>\n    <button (click)=\"cancel()\" qdButton qdButtonGhost color=\"secondary\">\n      {{ \"i18n.qd.fileCollector.deleteConfirmation.button.cancel\" | translate }}\n    </button>\n\n    <button (click)=\"delete()\" qdButton color=\"error\">\n      {{ \"i18n.qd.fileCollector.deleteConfirmation.button.delete\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [":host{overflow-wrap:break-word}\n"], dependencies: [{ 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: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileDeleteDialogComponent, isStandalone: false, selector: "qd-file-delete-dialog", ngImport: i0, template: "<qd-dialog>\n  {{ deleteHint }}\n\n  <qd-dialog-action>\n    <button (click)=\"cancel()\" qdButton qdButtonGhost color=\"secondary\" data-test-id=\"file-delete-dialog-button-cancel\">\n      {{ \"i18n.qd.fileCollector.deleteConfirmation.button.cancel\" | translate }}\n    </button>\n\n    <button (click)=\"delete()\" qdButton color=\"error\" data-test-id=\"file-delete-dialog-button-delete\">\n      {{ \"i18n.qd.fileCollector.deleteConfirmation.button.delete\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [":host{overflow-wrap:break-word}\n"], dependencies: [{ 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: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileDeleteDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-file-delete-dialog', standalone: false, template: "<qd-dialog>\n  {{ deleteHint }}\n\n  <qd-dialog-action>\n    <button (click)=\"cancel()\" qdButton qdButtonGhost color=\"secondary\">\n      {{ \"i18n.qd.fileCollector.deleteConfirmation.button.cancel\" | translate }}\n    </button>\n\n    <button (click)=\"delete()\" qdButton color=\"error\">\n      {{ \"i18n.qd.fileCollector.deleteConfirmation.button.delete\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [":host{overflow-wrap:break-word}\n"] }]
+            args: [{ selector: 'qd-file-delete-dialog', standalone: false, template: "<qd-dialog>\n  {{ deleteHint }}\n\n  <qd-dialog-action>\n    <button (click)=\"cancel()\" qdButton qdButtonGhost color=\"secondary\" data-test-id=\"file-delete-dialog-button-cancel\">\n      {{ \"i18n.qd.fileCollector.deleteConfirmation.button.cancel\" | translate }}\n    </button>\n\n    <button (click)=\"delete()\" qdButton color=\"error\" data-test-id=\"file-delete-dialog-button-delete\">\n      {{ \"i18n.qd.fileCollector.deleteConfirmation.button.delete\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [":host{overflow-wrap:break-word}\n"] }]
         }] });
 
-// @ts-strict-ignore
 class QdFileCollectorItemToolsComponent {
     fileCollectorService = inject(QdFileCollectorService);
     dialogService = inject(QdDialogService);
@@ -18843,16 +18891,13 @@ class QdFileCollectorItemToolsComponent {
     progress;
     collectedFile;
     error;
-    readonly;
-    viewonly;
-    downloadFilesWithHttpClient;
+    readonly = false;
+    viewonly = false;
+    downloadFilesWithHttpClient = false;
     testId;
     get dataTestId() {
         return this.testId;
     }
-    canDownload() {
-        return !!this.collectedFile.downloadUrl;
-    }
     downloadFile(event) {
         if (!this.downloadFilesWithHttpClient)
             return;
@@ -18880,11 +18925,11 @@ class QdFileCollectorItemToolsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorItemToolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorItemToolsComponent, isStandalone: false, selector: "qd-file-collector-item-tools", inputs: { progress: "progress", collectedFile: "collectedFile", error: "error", readonly: "readonly", viewonly: "viewonly", downloadFilesWithHttpClient: "downloadFilesWithHttpClient", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<a\n  (click)=\"downloadFile($event)\"\n  [href]=\"collectedFile.downloadUrl\"\n  target=\"_blank\"\n  [ngClass]=\"{ hidden: !canDownload() }\"\n  [attr.data-test-id]=\"testId + '-download'\"\n>\n  <qd-icon icon=\"dataDownload\"></qd-icon>\n</a>\n\n<qd-icon\n  icon=\"trash\"\n  (click)=\"deleteFile()\"\n  *ngIf=\"!readonly && !viewonly\"\n  [attr.data-test-id]=\"testId + '-delete'\"\n></qd-icon>\n", styles: [":host qd-icon{color:#454545;cursor:pointer;font-size:1rem}:host qd-icon:hover,:host qd-icon:focus{color:#171717}:host *+*{margin-left:.5rem}:host .hidden{cursor:none;pointer-events:none;visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFileCollectorItemToolsComponent, isStandalone: false, selector: "qd-file-collector-item-tools", inputs: { progress: "progress", collectedFile: "collectedFile", error: "error", readonly: "readonly", viewonly: "viewonly", downloadFilesWithHttpClient: "downloadFilesWithHttpClient", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<a\n  (click)=\"downloadFile($event)\"\n  [href]=\"collectedFile.downloadUrl\"\n  target=\"_blank\"\n  [ngClass]=\"{ hidden: !collectedFile.downloadUrl }\"\n  [attr.data-test-id]=\"testId + '-download'\"\n>\n  <qd-icon icon=\"dataDownload\"></qd-icon>\n</a>\n\n<qd-icon\n  icon=\"trash\"\n  (click)=\"deleteFile()\"\n  *ngIf=\"!readonly && !viewonly\"\n  [attr.data-test-id]=\"testId + '-delete'\"\n></qd-icon>\n", styles: [":host qd-icon{color:#454545;cursor:pointer;font-size:1rem}:host qd-icon:hover,:host qd-icon:focus{color:#171717}:host *+*{margin-left:.5rem}:host .hidden{cursor:none;pointer-events:none;visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorItemToolsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-file-collector-item-tools', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<a\n  (click)=\"downloadFile($event)\"\n  [href]=\"collectedFile.downloadUrl\"\n  target=\"_blank\"\n  [ngClass]=\"{ hidden: !canDownload() }\"\n  [attr.data-test-id]=\"testId + '-download'\"\n>\n  <qd-icon icon=\"dataDownload\"></qd-icon>\n</a>\n\n<qd-icon\n  icon=\"trash\"\n  (click)=\"deleteFile()\"\n  *ngIf=\"!readonly && !viewonly\"\n  [attr.data-test-id]=\"testId + '-delete'\"\n></qd-icon>\n", styles: [":host qd-icon{color:#454545;cursor:pointer;font-size:1rem}:host qd-icon:hover,:host qd-icon:focus{color:#171717}:host *+*{margin-left:.5rem}:host .hidden{cursor:none;pointer-events:none;visibility:hidden}\n"] }]
+            args: [{ selector: 'qd-file-collector-item-tools', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<a\n  (click)=\"downloadFile($event)\"\n  [href]=\"collectedFile.downloadUrl\"\n  target=\"_blank\"\n  [ngClass]=\"{ hidden: !collectedFile.downloadUrl }\"\n  [attr.data-test-id]=\"testId + '-download'\"\n>\n  <qd-icon icon=\"dataDownload\"></qd-icon>\n</a>\n\n<qd-icon\n  icon=\"trash\"\n  (click)=\"deleteFile()\"\n  *ngIf=\"!readonly && !viewonly\"\n  [attr.data-test-id]=\"testId + '-delete'\"\n></qd-icon>\n", styles: [":host qd-icon{color:#454545;cursor:pointer;font-size:1rem}:host qd-icon:hover,:host qd-icon:focus{color:#171717}:host *+*{margin-left:.5rem}:host .hidden{cursor:none;pointer-events:none;visibility:hidden}\n"] }]
         }], propDecorators: { progress: [{
                 type: Input
             }], collectedFile: [{
@@ -18927,7 +18972,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
-// @ts-strict-ignore
 class QdFileCollectorUploadTimestampComponent {
     value;
     testId;
@@ -18950,15 +18994,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['attr.data-test-id']
             }] } });
 
-// @ts-strict-ignore
 class QdFileCollectorItemComponent {
     progress;
-    newlyUploaded;
+    newlyUploaded = false;
     collectedFile;
     error;
-    readonly;
-    viewonly;
-    downloadFilesWithHttpClient;
+    readonly = false;
+    viewonly = false;
+    downloadFilesWithHttpClient = false;
     testId;
     get hostTestId() {
         return this.testId;
@@ -18997,88 +19040,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['class.newly-uploaded']
             }] } });
 
-// @ts-strict-ignore
 /**
- * **QdFileCollectorComponent** is a flexible component for managing files within an application.
- * It supports uploading, downloading, and displaying files, offering various options for customization and configuration.
+ * **QdFileCollectorComponent** lets users view, upload, download, and remove files.
  *
  * #### **Features**
  *
- * - **Upload**: Allows users to add new files with restrictions on file type and size.
- * - **Download**: Enables downloads directly via URL or, if needed, through Angular’s `HttpClient`, for example, to support authorization.
- * - **Customizable Error Handling**: Validates file size, type, and name pattern, with customizable error messages for user guidance.
- * - **Read-only Mode**: Disables interactions in read-only mode, allowing only viewing or downloading of files.
- * - **Standalone Enabled**: Detects if used within or outside a QLS section structure and, if outside, enables file uploads in standalone mode.
- *
- * #### **Interactions**
+ * - **Upload**: select files, validate them, and upload with progress tracking via a custom file manager
+ * - **Download**: directly via URL or through `HttpClient` (e.g. for authorization)
+ * - **Delete**: with confirmation dialog
+ * - **Upload Timestamp**: shows the upload date next to the file name when `uploadTimestamp` is set
+ * - **Validation**: restricts file type, size, and name pattern with customizable error messages
+ * - **Readonly / Viewonly**: disables upload and delete, allows only viewing and downloading
+ * - **Standalone / Section**: works independently with its own add button, or inside a `QdSection` via the toolbar action
  *
- * File interactions are managed through several key functions:
+ * #### **Quick start**
  *
- * - **upload**: Adds a file to the files list if validation is successful.
- * - **delete**: Opens a confirmation dialog that, if confirmed, removes the file from the list.
- * - **readonly/viewonly**: In read-only or view-only mode, upload and delete functions are disabled, limiting user actions.
+ * **1. Add the collector to the template**
  *
- * #### **Standalone Mode**
- *
- * Following Quadrel’s design principles, QdFileCollector includes a standalone mode, allowing it to work independently.
- * It automatically detects when used outside a QLS section structure and, in standalone mode, displays an "Add New" button to support file uploads.
- *
- * #### **File Restrictions**
- *
- * - **allowedFileTypes** and **allowedMimeTypes** should not be used together; using both will trigger an error log.
- * - **maxFileSizeInBytes** sets a maximum file size allowed for uploads.
- * - **allowedFileNamePattern** defines a regex pattern for file names; files that don’t match the pattern are rejected.
+ * ```html
+ * <qd-file-collector [config]="myFileCollectorConfig"></qd-file-collector>
+ * ```
  *
- * #### **Error Handling**
+ * **2. Define the config in your component**
  *
- * Upload errors can occur in the following cases:
- * - **Invalid MIME Type**: When the file type is not in `allowedMimeTypes`.
- * - **Invalid File Size**: When the file size exceeds `maxFileSizeInBytes`.
- * - **Invalid File Name Pattern**: When the file name does not match `allowedFileNamePattern`.
+ * ```typescript
+ * @Component({
+ *   template: `<qd-file-collector [config]="myFileCollectorConfig"></qd-file-collector>`
+ * })
+ * export class MyComponent {
+ *   myFiles: QdCollectedFile[] = [
+ *     {
+ *       name: 'report.pdf',
+ *       size: 9432,
+ *       type: 'application/pdf',
+ *       downloadUrl: '/api/files/report.pdf',
+ *       uploadTimestamp: new Date()
+ *     }
+ *   ];
  *
- * Error messages can be customized:
- * - **invalidMimeTypeErrorMessageI18n**: Custom message for unsupported MIME types.
- * - **invalidFileNameErrorMessageI18n**: Custom message for unsupported file names.
+ *   myFileCollectorConfig: QdFileCollectorConfig = {
+ *     files: this.myFiles
+ *   };
+ * }
+ * ```
  *
- * #### **File Manager**
+ * This is enough to show already existing files.
  *
- * QdFileManager is an interface that provides methods for uploading and deleting files.
- * To use it with QdFileCollectorComponent, implement this interface in a custom service and provide it via the `QD_FILE_MANAGER_TOKEN` token.
- * This service enables you to create custom file-handling logic.
+ * **3. Connect a file manager**
  *
- * #### **Usage**
+ * To enable upload and delete, provide a `QdFileManager` via `QD_FILE_MANAGER_TOKEN`.
  *
  * ```typescript
  * @Injectable()
  * export class MyFileManager implements QdFileManager {
+ *   private http = inject(HttpClient);
+ *
  *   upload(file: File): Observable<QdUploadProgress> {
- *     // custom implementation here
+ *     // Emit progress values from 0 to 100.
+ *     // When done, return the final QdCollectedFile from your backend response.
+ *     return this.http.post('/api/files', file).pipe(
+ *       map(response => {
+ *
+ *         const myCollectedFile: QdCollectedFile = {
+ *           name: response.fileName,
+ *           size: response.fileSize,
+ *           type: response.mimeType,
+ *           downloadUrl: response.downloadUrl,
+ *           uploadTimestamp: new Date(response.storedAt)
+ *         };
+ *
+ *         return { progress: 100, collectedFile: myCollectedFile };
+ *       })
+ *     );
  *   }
  *
  *   delete(collectedFile: QdCollectedFile): Observable<boolean> {
- *     // custom implementation here
+ *     return this.http.delete('/api/files/' + collectedFile.name).pipe(map(() => true));
  *   }
  * }
+ * ```
  *
+ * Register the file manager in your component:
+ *
+ * ```typescript
  * @Component({
- *   selector: 'my-file-collector',
- *   providers: [
- *     {
- *       provide: QD_FILE_MANAGER_TOKEN,
- *       useClass: MyFileManager
- *     }
- *   ]
+ *   template: `<qd-file-collector [config]="myFileCollectorConfig"></qd-file-collector>`,
+ *   // Add the file manager here to connect the collector to your backend.
+ *   providers: [{ provide: QD_FILE_MANAGER_TOKEN, useClass: MyFileManager }]
  * })
- * class MyFileCollectorComponent {
- *   fileCollectorConfig: QdFileCollectorConfig = {
- *     // configuration options here
- *   };
+ * export class MyComponent {
+ *   // ...
  * }
  * ```
  *
- * ```html
- * <qd-file-collector [config]="fileCollectorConfig"></qd-file-collector>
- * ```
+ * #### **How the file manager works**
+ *
+ * The file manager connects the collector to your backend.
+ *
+ * It must support these two actions:
+ *
+ * - `upload(file)`: uploads a file and emits upload progress
+ * - `delete(collectedFile)`: deletes a file and emits `true` if the deletion was successful
+ *
+ * For uploads:
+ *
+ * - emit `{ progress }` values from `0` to `100`
+ * - when the upload is complete, return the final `collectedFile`
+ *
+ * > The example above uses a simple POST and returns one final result with `progress: 100`.
+ * If you need a progress bar, use `HttpClient` with `reportProgress: true` to emit intermediate progress values.
+ *
+ * #### **Validation and file type rules**
+ *
+ * A file is rejected if:
+ *
+ * - its type is not allowed
+ * - it is too large
+ * - its name does not match the expected pattern
+ *
+ * You can provide custom error messages in the config.
+ *
+ * For file type validation, use one of these approaches:
+ *
+ * - `allowedFileTypes`
+ * - `allowedMimeTypes` together with `allowedFileNamePattern`
+ *
+ * > Do not mix both approaches unless they describe the same rules.
+ * > If the settings do not match, the component logs an error and does not use the config.
+ *
+ * #### **Upload behavior**
+ *
+ * Upload is triggered differently depending on where the component is used:
+ *
+ * - **outside a `QdSection`**: the component shows its own add button
+ * - **inside a `QdSection`**: the component listens to the section action and opens the file picker when `addNew` is triggered
+ *
+ * In `readonly` or `viewonly` mode, upload and delete are disabled.
+ *
+ * If the component is connected to operation mode changes through the event broker,
+ * `viewonly` can also change dynamically.
+ *
+ * #### **Download**
+ *
+ * Files can be downloaded directly from their `downloadUrl`.
+ *
+ * If your application needs authorization or custom download logic,
+ * handle the download through your backend or file manager.
  */
 class QdFileCollectorComponent {
     sectionActionService = inject(QdSectionToolbarActionService, { optional: true });
@@ -19128,14 +19235,16 @@ class QdFileCollectorComponent {
             title: { i18n: 'i18n.qd.fileCollector.title' },
             viewContainerRef: this.viewContainerRef
         });
-        dialogRef.closed.subscribe((fileUploads = []) => {
-            fileUploads
+        dialogRef.closed.subscribe((result) => {
+            const fileUploads = result;
+            (fileUploads ?? [])
                 .filter(fileUpload => !fileUpload.error && fileUpload.progress === 100)
                 .forEach(fileUpload => this.fileUploads.push({ ...fileUpload, newlyUploaded: true }));
         });
         const fileCollectorDialog = dialogRef.componentInstance;
-        fileCollectorDialog.uploadFiles(event.target.files);
-        event.target.value = '';
+        const inputElement = event.target;
+        fileCollectorDialog.uploadFiles(Array.from(inputElement.files ?? []));
+        inputElement.value = '';
     }
     clickFileInput() {
         if (this.fileInput.nativeElement.disabled) {
@@ -19184,11 +19293,11 @@ class QdFileCollectorComponent {
         console.error(`QD-UI | 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></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" }] });
+    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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFileCollectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-file-collector', providers: [QdFileCollectorService, QdFileCollectorValidationService], standalone: false, 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></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"] }]
+            args: [{ selector: 'qd-file-collector', providers: [QdFileCollectorService, QdFileCollectorValidationService], standalone: false, 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"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], testId: [{
@@ -22401,6 +22510,8 @@ const updateSort$1 = createAction('[QdUi Table] Update Sort', props());
 const setRequestState$1 = createAction('[QdUi Table] Set Loading State', props());
 const connect$1 = createAction('[QdUi Table]', props());
 const resetConnectorStates$1 = createAction('[QdUi Table] Reset Connector States', props());
+const setLastVisitedRow$1 = createAction('[QdUi Table] Set Last Visited Row', props());
+const clearLastVisitedRow$1 = createAction('[QdUi Table] Clear Last Visited Row', props());
 const deleteTableState = createAction('[QdUi Table] Delete Table State', props());
 const QdTableActions = {
     initTableState,
@@ -22420,6 +22531,8 @@ const QdTableActions = {
     setRequestState: setRequestState$1,
     connect: connect$1,
     resetConnectorStates: resetConnectorStates$1,
+    setLastVisitedRow: setLastVisitedRow$1,
+    clearLastVisitedRow: clearLastVisitedRow$1,
     deleteTableState
 };
 
@@ -22447,6 +22560,15 @@ var QdTableRequestState;
     QdTableRequestState[QdTableRequestState["SUCCESS"] = 1] = "SUCCESS";
 })(QdTableRequestState || (QdTableRequestState = {}));
 
+function resolveRowIdentifier(row, rowIndex, trackRowBy) {
+    if (trackRowBy) {
+        const value = trackRowBy(row);
+        if (value !== undefined && value !== null && (typeof value === 'string' || typeof value === 'number'))
+            return value;
+    }
+    return row.uid ?? rowIndex;
+}
+
 class QdTableStoreSelectorService {
     _tableId;
     set tableId(tableId) {
@@ -22476,13 +22598,16 @@ class QdTableStoreSelectorService {
     selectedRows() {
         return createSelector(this.selectTables, tables => this.getTable(tables)?.selectedRows ?? []);
     }
-    isTableRowSelected(rowIndex) {
+    isTableRowSelected(rowIndex, trackRowBy) {
         return createSelector(this.selectTables, tables => {
             const table = this.getTable(tables);
             if (!table)
                 return false;
-            const tableUid = table.data[rowIndex]?.uid;
-            return table.selectedRows?.includes(rowIndex) || (tableUid && table.selectedRows?.includes(tableUid)) || false;
+            const row = table.data[rowIndex];
+            if (!row)
+                return false;
+            const identifier = resolveRowIdentifier(row, rowIndex, trackRowBy);
+            return table.selectedRows?.includes(identifier) || false;
         });
     }
     recentSecondaryAction() {
@@ -22572,6 +22697,9 @@ class QdTableStoreSelectorService {
             };
         });
     }
+    lastVisitedRowIdentifier() {
+        return createSelector(this.selectTables, tables => this.getTable(tables)?.lastVisitedRowIdentifier);
+    }
     selectTables(state) {
         return state.qdUiTable;
     }
@@ -22610,14 +22738,14 @@ class QdTableStoreService {
     updateTableStateData(data) {
         this.store.dispatch(QdTableActions.updateTableStateData({ tableId: this.tableId, data }));
     }
-    updateTableStateRowToSelected(rowIndex) {
-        this.store.dispatch(QdTableActions.updateTableStateRowToSelected({ tableId: this.tableId, rowIndex }));
+    updateTableStateRowToSelected(rowIdentifier) {
+        this.store.dispatch(QdTableActions.updateTableStateRowToSelected({ tableId: this.tableId, rowIdentifier }));
     }
-    updateTableStateSingleRowToSelected(rowIndex) {
-        this.store.dispatch(QdTableActions.updateTableStateSingleRowToSelected({ tableId: this.tableId, rowIndex }));
+    updateTableStateSingleRowToSelected(rowIdentifier) {
+        this.store.dispatch(QdTableActions.updateTableStateSingleRowToSelected({ tableId: this.tableId, rowIdentifier }));
     }
-    updateTableStateRowToUnselected(rowIndex) {
-        this.store.dispatch(QdTableActions.updateTableStateRowToUnselected({ tableId: this.tableId, rowIndex }));
+    updateTableStateRowToUnselected(rowIdentifier) {
+        this.store.dispatch(QdTableActions.updateTableStateRowToUnselected({ tableId: this.tableId, rowIdentifier }));
     }
     updateTableStateRecentSecondaryAction(action) {
         this.store.dispatch(QdTableActions.updateTableStateRecentSecondaryAction({ tableId: this.tableId, recentSecondaryAction: action }));
@@ -22649,6 +22777,12 @@ class QdTableStoreService {
     connect(connectorName, connectorState, connectorCriteria) {
         this.store.dispatch(QdTableActions.connect({ tableId: this.tableId, connectorCriteria, connectorName, connectorState }));
     }
+    setLastVisitedRow(rowIdentifier) {
+        this.store.dispatch(QdTableActions.setLastVisitedRow({ tableId: this.tableId, rowIdentifier }));
+    }
+    clearLastVisitedRow() {
+        this.store.dispatch(QdTableActions.clearLastVisitedRow({ tableId: this.tableId }));
+    }
     resetConnectorStates() {
         this.store.dispatch(QdTableActions.resetConnectorStates({ tableId: this.tableId }));
     }
@@ -22669,8 +22803,8 @@ class QdTableStoreService {
             .select(this.tableStoreSelectorService.selectedRows())
             .pipe(filter(selectedRows => selectedRows !== undefined));
     }
-    isTableRowSelected$(rowIndex) {
-        return this.store.select(this.tableStoreSelectorService.isTableRowSelected(rowIndex));
+    isTableRowSelected$(rowIndex, trackRowBy) {
+        return this.store.select(this.tableStoreSelectorService.isTableRowSelected(rowIndex, trackRowBy));
     }
     recentSecondaryAction$() {
         return this.store
@@ -22707,6 +22841,9 @@ class QdTableStoreService {
     selectDataResolutionCriteria$() {
         return this.store.select(this.tableStoreSelectorService.selectDataResolutionCriteria());
     }
+    lastVisitedRowIdentifier$() {
+        return this.store.select(this.tableStoreSelectorService.lastVisitedRowIdentifier());
+    }
     selectConnectorState$(connectorName) {
         return this.store.select(this.tableStoreSelectorService.selectConnectorState(connectorName));
     }
@@ -23106,24 +23243,27 @@ class QdTableRowSelectionService {
         ]).pipe(skip(this._config.selection?.emitOutputInitially ? 0 : 1), map(([tableData]) => (tableData || []).map(this.getIndexedRows).filter(isRowSelected)));
     }
     isRowSelected(row, index) {
-        return this._selectedRows.includes(row.uid) || this._selectedRows.includes(index);
+        const identifier = resolveRowIdentifier(row, index, this._config.trackRowBy);
+        return this._selectedRows.includes(identifier);
     }
     getIndexedRows(row, index) {
         return { ...row, index };
     }
     isRowSelected$(rowIndex) {
-        return this.tableStoreService.isTableRowSelected$(rowIndex);
+        return this.tableStoreService.isTableRowSelected$(rowIndex, this._config.trackRowBy);
     }
-    setRowSelected(rowIndex) {
+    setRowSelected(rowIndex, rowData) {
+        const identifier = resolveRowIdentifier(rowData, rowIndex, this._config.trackRowBy);
         if (this._config.selection.type === 'singleSelect') {
-            this.tableStoreService.updateTableStateSingleRowToSelected(rowIndex);
+            this.tableStoreService.updateTableStateSingleRowToSelected(identifier);
         }
         else {
-            this.tableStoreService.updateTableStateRowToSelected(rowIndex);
+            this.tableStoreService.updateTableStateRowToSelected(identifier);
         }
     }
-    setRowUnselected(rowIndex) {
-        this.tableStoreService.updateTableStateRowToUnselected(rowIndex);
+    setRowUnselected(rowIndex, rowData) {
+        const identifier = resolveRowIdentifier(rowData, rowIndex, this._config.trackRowBy);
+        this.tableStoreService.updateTableStateRowToUnselected(identifier);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowSelectionService });
@@ -23562,6 +23702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class QdTableRowSelectionComponent {
     rowSelectionService = inject(QdTableRowSelectionService);
     rowIndex;
+    rowData;
     testId;
     get dataTestId() {
         return this.testId;
@@ -23580,20 +23721,22 @@ class QdTableRowSelectionComponent {
     }
     handleChange(event) {
         if (event.target.checked) {
-            this.rowSelectionService.setRowSelected(this.rowIndex);
+            this.rowSelectionService.setRowSelected(this.rowIndex, this.rowData);
         }
         else {
-            this.rowSelectionService.setRowUnselected(this.rowIndex);
+            this.rowSelectionService.setRowUnselected(this.rowIndex, this.rowData);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowSelectionComponent, isStandalone: false, selector: "[qd-table-row-selection]", inputs: { rowIndex: "rowIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"selectionType\">\n  <ng-container *ngSwitchCase=\"'singleSelect'\">\n    <input\n      type=\"radio\"\n      [name]=\"'qd-table-selection__' + tableId\"\n      [checked]=\"isRowSelected$() | async\"\n      (click)=\"stopPropagation($event)\"\n      (change)=\"handleChange($event)\"\n      [attr.data-test-id]=\"testId + '-radio'\"\n    />\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'multiSelect'\">\n    <input\n      type=\"checkbox\"\n      [name]=\"'qd-table-selection__' + tableId\"\n      [checked]=\"isRowSelected$() | async\"\n      (click)=\"stopPropagation($event)\"\n      (change)=\"handleChange($event)\"\n      [attr.data-test-id]=\"testId + '-checkbox'\"\n    />\n  </ng-container>\n</ng-container>\n", styles: ["input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowSelectionComponent, isStandalone: false, selector: "[qd-table-row-selection]", inputs: { rowIndex: "rowIndex", rowData: "rowData", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"selectionType\">\n  <ng-container *ngSwitchCase=\"'singleSelect'\">\n    <input\n      type=\"radio\"\n      [name]=\"'qd-table-selection__' + tableId\"\n      [checked]=\"isRowSelected$() | async\"\n      (click)=\"stopPropagation($event)\"\n      (change)=\"handleChange($event)\"\n      [attr.data-test-id]=\"testId + '-radio'\"\n    />\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'multiSelect'\">\n    <input\n      type=\"checkbox\"\n      [name]=\"'qd-table-selection__' + tableId\"\n      [checked]=\"isRowSelected$() | async\"\n      (click)=\"stopPropagation($event)\"\n      (change)=\"handleChange($event)\"\n      [attr.data-test-id]=\"testId + '-checkbox'\"\n    />\n  </ng-container>\n</ng-container>\n", styles: ["input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowSelectionComponent, decorators: [{
             type: Component,
             args: [{ selector: '[qd-table-row-selection]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container [ngSwitch]=\"selectionType\">\n  <ng-container *ngSwitchCase=\"'singleSelect'\">\n    <input\n      type=\"radio\"\n      [name]=\"'qd-table-selection__' + tableId\"\n      [checked]=\"isRowSelected$() | async\"\n      (click)=\"stopPropagation($event)\"\n      (change)=\"handleChange($event)\"\n      [attr.data-test-id]=\"testId + '-radio'\"\n    />\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'multiSelect'\">\n    <input\n      type=\"checkbox\"\n      [name]=\"'qd-table-selection__' + tableId\"\n      [checked]=\"isRowSelected$() | async\"\n      (click)=\"stopPropagation($event)\"\n      (change)=\"handleChange($event)\"\n      [attr.data-test-id]=\"testId + '-checkbox'\"\n    />\n  </ng-container>\n</ng-container>\n", styles: ["input{cursor:pointer}\n"] }]
         }], propDecorators: { rowIndex: [{
                 type: Input
+            }], rowData: [{
+                type: Input
             }], testId: [{
                 type: Input,
                 args: ['data-test-id']
@@ -23676,11 +23819,11 @@ class QdTableRowComponent {
         return this.config.columns.find(column => column.column === item)?.type || 'blank';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowComponent, isStandalone: false, selector: "[qd-table-row]", inputs: { config: "config", rowData: "rowData", rowIndex: "rowIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.hostTestId" } }, providers: [QdDataFacetsContextService], ngImport: i0, template: "<td\n  qd-table-row-selection\n  *ngIf=\"config.selection\"\n  class=\"qd-table__body-cell--selection\"\n  [rowIndex]=\"rowIndex\"\n  [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n  <td\n    *ngIf=\"hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-merged'\"\n  >\n    <div *ngFor=\"let item of item; let first = first\">\n      <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n      <span class=\"qd-table__body-cell\">\n        <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n      </span>\n    </div>\n  </td>\n\n  <td\n    *ngIf=\"!hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-' + item\"\n  >\n    <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n  </td>\n</ng-container>\n\n<td\n  *ngIf=\"config.secondaryActions?.length > 0\"\n  qd-table-row-actions-secondary-menu\n  class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [i18ns]=\"config.i18ns\"\n  [testId]=\"testId + '-secondary-actions'\"\n  [viewonly]=\"config.viewonly\"\n  [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n  <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n    <span class=\"qd-table__body-cell--merged-headings\">\n      {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n    </span>\n  </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: QdTableRowActionsSecondaryMenuComponent, selector: "[qd-table-row-actions-secondary-menu]", inputs: ["rowIndex", "rowData", "i18ns", "testId", "viewonly"] }, { kind: "component", type: QdTableRowSelectionComponent, selector: "[qd-table-row-selection]", inputs: ["rowIndex", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableRowComponent, isStandalone: false, selector: "[qd-table-row]", inputs: { config: "config", rowData: "rowData", rowIndex: "rowIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.hostTestId" } }, providers: [QdDataFacetsContextService], ngImport: i0, template: "<td\n  qd-table-row-selection\n  *ngIf=\"config.selection\"\n  class=\"qd-table__body-cell--selection\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n  <td\n    *ngIf=\"hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-merged'\"\n  >\n    <div *ngFor=\"let item of item; let first = first\">\n      <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n      <span class=\"qd-table__body-cell\">\n        <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n      </span>\n    </div>\n  </td>\n\n  <td\n    *ngIf=\"!hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-' + item\"\n  >\n    <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n  </td>\n</ng-container>\n\n<td\n  *ngIf=\"config.secondaryActions?.length > 0\"\n  qd-table-row-actions-secondary-menu\n  class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [i18ns]=\"config.i18ns\"\n  [testId]=\"testId + '-secondary-actions'\"\n  [viewonly]=\"config.viewonly\"\n  [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n  <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n    <span class=\"qd-table__body-cell--merged-headings\">\n      {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n    </span>\n  </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: QdTableRowActionsSecondaryMenuComponent, selector: "[qd-table-row-actions-secondary-menu]", inputs: ["rowIndex", "rowData", "i18ns", "testId", "viewonly"] }, { kind: "component", type: QdTableRowSelectionComponent, selector: "[qd-table-row-selection]", inputs: ["rowIndex", "rowData", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[qd-table-row]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [QdDataFacetsContextService], standalone: false, template: "<td\n  qd-table-row-selection\n  *ngIf=\"config.selection\"\n  class=\"qd-table__body-cell--selection\"\n  [rowIndex]=\"rowIndex\"\n  [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n  <td\n    *ngIf=\"hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-merged'\"\n  >\n    <div *ngFor=\"let item of item; let first = first\">\n      <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n      <span class=\"qd-table__body-cell\">\n        <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n      </span>\n    </div>\n  </td>\n\n  <td\n    *ngIf=\"!hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-' + item\"\n  >\n    <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n  </td>\n</ng-container>\n\n<td\n  *ngIf=\"config.secondaryActions?.length > 0\"\n  qd-table-row-actions-secondary-menu\n  class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [i18ns]=\"config.i18ns\"\n  [testId]=\"testId + '-secondary-actions'\"\n  [viewonly]=\"config.viewonly\"\n  [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n  <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n    <span class=\"qd-table__body-cell--merged-headings\">\n      {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n    </span>\n  </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"] }]
+            args: [{ selector: '[qd-table-row]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [QdDataFacetsContextService], standalone: false, template: "<td\n  qd-table-row-selection\n  *ngIf=\"config.selection\"\n  class=\"qd-table__body-cell--selection\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [data-test-id]=\"testId + '-cell-selection'\"\n></td>\n\n<ng-container *ngFor=\"let item of columnsDefinitions$ | async\">\n  <td\n    *ngIf=\"hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell--merged ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-merged'\"\n  >\n    <div *ngFor=\"let item of item; let first = first\">\n      <ng-container *ngTemplateOutlet=\"headings; context: { item, translations, first }\"></ng-container>\n      <span class=\"qd-table__body-cell\">\n        <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n      </span>\n    </div>\n  </td>\n\n  <td\n    *ngIf=\"!hasMergedColumns(item)\"\n    [class]=\"'qd-table__body-cell ' + getCellClass(item)\"\n    [attr.data-test-id]=\"testId + '-cell-' + item\"\n  >\n    <ng-container *ngComponentOutlet=\"getComponentType(item); inputs: getComponentInputs(item)\"></ng-container>\n  </td>\n</ng-container>\n\n<td\n  *ngIf=\"config.secondaryActions?.length > 0\"\n  qd-table-row-actions-secondary-menu\n  class=\"qd-table__body-cell--actions-secondary-actions-menu\"\n  [rowIndex]=\"rowIndex\"\n  [rowData]=\"rowData\"\n  [i18ns]=\"config.i18ns\"\n  [testId]=\"testId + '-secondary-actions'\"\n  [viewonly]=\"config.viewonly\"\n  [attr.data-test-id]=\"testId + '-cell-secondary-actions'\"\n></td>\n\n<ng-template #headings let-item=\"item\" let-translations=\"translations\" let-first=\"first\">\n  <ng-container *ngIf=\"!first && findColumnType(item) !== 'blank'\">\n    <span class=\"qd-table__body-cell--merged-headings\">\n      {{ translations ? (getI18n(item) | translate) : capitalize(item) }}\n    </span>\n  </ng-container>\n</ng-template>\n", styles: ["[qd-table-row] .qd-table__body-cell--actions-secondary-actions-menu{vertical-align:top}[qd-table-row] .qd-data-facets{display:block}[qd-table-row] qd-data-facets-progress.qd-data-facets{transform:translateY(.1875rem)}[qd-table-row] qd-data-facets-chip.qd-data-facets{display:contents}[qd-table-row] .qd-table__body-cell--merged qd-data-facets-text{padding-top:0}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], rowData: [{
@@ -23698,20 +23841,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class QdTableBodyComponent {
     tableStoreService = inject(QdTableStoreService);
     resolverService = inject(QdTableResolverService);
+    cdr = inject(ChangeDetectorRef);
     config;
     data;
     testId;
     isLoading$;
+    highlightedRowIdentifier;
     _primaryActionRefreshSubscription;
     constructor() {
         this.isLoading$ = this.tableStoreService.selectIsLoading$().pipe(debounceTime$1(400));
     }
+    ngOnInit() {
+        this.initHighlight();
+    }
     ngOnDestroy() {
         this._primaryActionRefreshSubscription?.unsubscribe();
     }
+    isLastVisitedRow(rowData, rowIndex) {
+        if (this.highlightedRowIdentifier === undefined)
+            return false;
+        return resolveRowIdentifier(rowData, rowIndex, this.config.trackRowBy) === this.highlightedRowIdentifier;
+    }
     primaryAction(rowData, index) {
         if (!this.config.primaryAction?.handler)
             return console.warn('QD-UI | QdTable - No handler defined for primary action.');
+        if (this.config.primaryAction?.highlightOnRevisit) {
+            this.tableStoreService.setLastVisitedRow(resolveRowIdentifier(rowData, index, this.config.trackRowBy));
+        }
         const result = this.config.primaryAction?.handler({ rowData, index });
         if (!this.config.primaryAction?.refresh?.isEnabled)
             return;
@@ -23721,16 +23877,28 @@ class QdTableBodyComponent {
         }
         this.triggerRefresh();
     }
+    initHighlight() {
+        this.tableStoreService
+            .lastVisitedRowIdentifier$()
+            .pipe(take(1))
+            .subscribe(id => {
+            if (id === undefined)
+                return;
+            this.highlightedRowIdentifier = id;
+            this.tableStoreService.clearLastVisitedRow();
+            this.cdr.markForCheck();
+        });
+    }
     triggerRefresh() {
         const pageIndex = this.config.primaryAction?.refresh?.page;
         this.resolverService.refresh(pageIndex !== undefined ? { pageIndex } : undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableBodyComponent, isStandalone: false, selector: "[qd-table-body]", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-table__body qd-table__body--plain" }, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n  <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex\">\n  <tr\n    qd-table-row\n    [rowData]=\"rowData\"\n    [rowIndex]=\"rowIndex\"\n    [config]=\"config\"\n    [class]=\"'qd-table__body-row'\"\n    [data-test-id]=\"testId + '-row-' + rowIndex\"\n    (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n    [class.hasAction]=\"config.primaryAction\"\n  ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\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: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "component", type: QdTableRowComponent, selector: "[qd-table-row]", inputs: ["config", "rowData", "rowIndex", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdTableBodyComponent, isStandalone: false, selector: "[qd-table-body]", inputs: { config: "config", data: "data", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-table__body qd-table__body--plain" }, ngImport: i0, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n  <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex\">\n  <tr\n    qd-table-row\n    [rowData]=\"rowData\"\n    [rowIndex]=\"rowIndex\"\n    [config]=\"config\"\n    [class]=\"'qd-table__body-row'\"\n    [data-test-id]=\"testId + '-row-' + rowIndex\"\n    (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n    [class.hasAction]=\"config.primaryAction\"\n    [class.qd-table__body-row--last-visited]=\"isLastVisitedRow(rowData, rowIndex)\"\n  ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.qd-table__body--plain tr.qd-table__body-row--last-visited{animation:last-visited-fade 1.5s linear forwards}@keyframes last-visited-fade{0%,33%{background-color:#c3e8cd}to{background-color:transparent}}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\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: QdSpinnerComponent, selector: "qd-spinner" }, { kind: "component", type: QdTableRowComponent, selector: "[qd-table-row]", inputs: ["config", "rowData", "rowIndex", "data-test-id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdTableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[qd-table-body]', host: { class: 'qd-table__body qd-table__body--plain' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n  <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex\">\n  <tr\n    qd-table-row\n    [rowData]=\"rowData\"\n    [rowIndex]=\"rowIndex\"\n    [config]=\"config\"\n    [class]=\"'qd-table__body-row'\"\n    [data-test-id]=\"testId + '-row-' + rowIndex\"\n    (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n    [class.hasAction]=\"config.primaryAction\"\n  ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"] }]
+            args: [{ selector: '[qd-table-body]', host: { class: 'qd-table__body qd-table__body--plain' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"loading-overlay\" *ngIf=\"isLoading$ | async\">\n  <qd-spinner></qd-spinner>\n</div>\n<ng-container *ngFor=\"let rowData of data; index as rowIndex\">\n  <tr\n    qd-table-row\n    [rowData]=\"rowData\"\n    [rowIndex]=\"rowIndex\"\n    [config]=\"config\"\n    [class]=\"'qd-table__body-row'\"\n    [data-test-id]=\"testId + '-row-' + rowIndex\"\n    (click)=\"config.primaryAction && primaryAction(rowData, rowIndex)\"\n    [class.hasAction]=\"config.primaryAction\"\n    [class.qd-table__body-row--last-visited]=\"isLastVisitedRow(rowData, rowIndex)\"\n  ></tr>\n</ng-container>\n", styles: [".qd-table__body--plain{position:relative}.qd-table__body--plain td{border-bottom:.0625rem solid rgb(213,213,213)}.qd-table__body--plain td.qd-table__body-cell--selection{padding-left:1rem;vertical-align:top}.qd-table__body--plain td>div{display:flex;align-items:stretch;line-height:1.5rem}.qd-table__body--plain td>div:first-child{font-weight:500;line-height:1.5rem}.qd-table__body--plain td>div:not(:first-child) .qd-table__body-cell{padding:0 .5rem}.qd-table__body--plain td.qd-table__body-cell--merged{padding:.5rem 0;vertical-align:top}.qd-table__body--plain td .qd-table__body-cell--merged-headings{width:33%;padding-left:1rem;color:#757575;overflow-wrap:break-word}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell{width:66%}.qd-table__body--plain td .qd-table__body-cell--merged-headings+.qd-table__body-cell>*{overflow-wrap:break-word;text-align:left}@media (max-width: 959.98px){.qd-table__body--plain td.qd-table__body-cell--merged{display:grid;max-width:100%;grid-template-columns:fit-content(66%) 1fr}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child{display:block;font-weight:500;grid-column:1/-1;line-height:1.5rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:first-child>span.qd-table__body-cell{display:block;width:auto;padding-left:1rem}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child){display:grid;grid-column:1/-1;grid-template-columns:subgrid}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell--merged-headings{display:block;overflow:hidden;width:auto;min-width:0;padding-right:0;padding-left:1rem;color:#757575;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell{display:block;overflow:hidden;width:auto;min-width:0;padding:0 .5rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5rem;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}.qd-table__body--plain td.qd-table__body-cell--merged>div:not(:first-child)>span.qd-table__body-cell>*{display:block;overflow:hidden;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-align:left;text-overflow:ellipsis}}.qd-table__body--plain td span.qd-table__body-cell--boolean{display:flex;align-items:center}.qd-table__body--plain td span.qd-table__body-cell--progress{flex-grow:1;align-self:center;padding-top:0}.qd-table__body--plain td span.qd-table__body-cell--status{margin-top:-.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text{min-height:auto;padding-top:0;line-height:1.5rem}.qd-table__body--plain td span.qd-table__body-cell--text .text+.text{margin-top:.1875rem}.qd-table__body--plain tr.hasAction{cursor:pointer}.qd-table__body--plain tr.hasAction:hover{background-color:#f2f7fa}.qd-table__body--plain tr.qd-table__body-row--last-visited{animation:last-visited-fade 1.5s linear forwards}@keyframes last-visited-fade{0%,33%{background-color:#c3e8cd}to{background-color:transparent}}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#0003}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], data: [{
@@ -24260,6 +24428,9 @@ class QdTableComponent {
             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);
+            if (action.highlightOnRevisit) {
+                this.tableStoreService.setLastVisitedRow(resolveRowIdentifier(recentAction.rowData, recentAction.index, this.config.trackRowBy));
+            }
             const result = action.handler(recentAction);
             if (action.refresh?.isEnabled)
                 this.processSecondaryActionRefresh(result, action.refresh);
@@ -24273,13 +24444,14 @@ class QdTableComponent {
                 'The table uid has to match the path of the server side event.');
             return;
         }
-        if (!this.pushEventsService.isConnectedOrConnecting()) {
+        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.');
             return;
         }
+        const pushEventsService = this.pushEventsService;
         const events = [...(this.config?.refreshingEvents || []), 'RESOURCE_UPDATED'];
-        const combinedEvents$ = merge(...events.map(eventName => this.pushEventsService.observe(eventName)));
+        const combinedEvents$ = merge(...events.map(eventName => pushEventsService.observe(eventName)));
         this._pushEventsSubscription = combinedEvents$
             .pipe(filter(messageEvent => {
             try {
@@ -24313,6 +24485,13 @@ class QdTableComponent {
         if (!this.config.i18ns) {
             console.warn('QD-UI | 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. ' +
+                'Without a uid, the table state does not persist across navigation.');
+        }
+    }
+    hasHighlightOnRevisit() {
+        return (!!this.config.primaryAction?.highlightOnRevisit || !!this.config.secondaryActions?.some(a => a.highlightOnRevisit));
     }
     /**
      * @description Can be deleted when the property "mainColumnNotFillingWidth" is dropped.
@@ -25268,6 +25447,8 @@ const connect = (state, tableId, newConnectorCriteria, connectorName, connectorS
         connectors: updatedConnectors
     });
 };
+const setLastVisitedRow = (state, tableId, rowIdentifier) => updateStateWithNewTable(state, tableId, { ...state[tableId], lastVisitedRowIdentifier: rowIdentifier });
+const clearLastVisitedRow = (state, tableId) => updateStateWithNewTable(state, tableId, { ...state[tableId], lastVisitedRowIdentifier: undefined });
 const resetConnectorStates = (state, tableId) => {
     const { connectors } = state[tableId];
     return updateStateWithNewTable(state, tableId, {
@@ -25295,10 +25476,9 @@ const _tableReducer = createReducer(initialState, on(QdTableActions.initTableSta
     if (state[tableId].selectedRows)
         return state;
     return updateTableStateSelectedRows(state, tableId, selectedRows);
-}), on(QdTableActions.updateTableStateData, (state, { tableId, data }) => updateTableStateData(state, tableId, data)), on(QdTableActions.updateTableStateRowToSelected, (state, { tableId, rowIndex }) => updateTableStateSelectedRows(state, tableId, [
-    ...(state[tableId].selectedRows ?? []),
-    state[tableId].data[rowIndex].uid || rowIndex
-])), on(QdTableActions.updateTableStateSingleRowToSelected, (state, { tableId, rowIndex }) => updateTableStateSelectedRows(state, tableId, [state[tableId].data[rowIndex].uid || rowIndex])), on(QdTableActions.updateTableStateRowToUnselected, (state, { tableId, rowIndex }) => updateTableStateSelectedRows(state, tableId, (state[tableId].selectedRows ?? []).filter(rowIdentifier => rowIdentifier !== rowIndex && rowIdentifier !== state[tableId].data[rowIndex].uid))), on(QdTableActions.updateTableStateRecentSecondaryAction, (state, { tableId, recentSecondaryAction: recentSecondaryAction }) => updateTableStateRecentSecondaryAction(state, tableId, recentSecondaryAction)), on(QdTableActions.setupPagination, (state, { tableId, pageSize }) => setupPagination(state, tableId, pageSize)), on(QdTableActions.setPage, (state, { tableId, pageIndex, pageSize, totalCount, data }) => setPage(state, tableId, pageIndex, pageSize, totalCount, data)), on(QdTableActions.setPageSize, (state, { tableId, pageSize }) => setPageSize(state, tableId, pageSize)), on(QdTableActions.setPageParams, (state, { tableId, pageIndex, pageSize, totalCount }) => setPageParams(state, tableId, pageIndex, pageSize, totalCount)), on(QdTableActions.setupSort, (state, { tableId, columns }) => setupSort(state, tableId, columns)), on(QdTableActions.setSort, (state, { tableId, column, direction }) => setSort(state, tableId, column, direction)), on(QdTableActions.updateSort, (state, { tableId, column, direction }) => updateSort(state, tableId, column, direction)), on(QdTableActions.setRequestState, (state, { tableId, requestState }) => setRequestState(state, tableId, requestState)), on(QdTableActions.connect, (state, { tableId, connectorName, connectorCriteria, connectorState }) => connect(state, tableId, connectorCriteria, connectorName, connectorState)), on(QdTableActions.resetConnectorStates, (state, { tableId }) => resetConnectorStates(state, tableId)), on(QdTableActions.deleteTableState, (state, { tableId }) => omit({ ...state }, tableId)));
+}), 
+// TODO: Remove QdTreeData references from table — Tree has been extracted into its own component
+on(QdTableActions.updateTableStateData, (state, { tableId, data }) => updateTableStateData(state, tableId, data)), on(QdTableActions.updateTableStateRowToSelected, (state, { tableId, rowIdentifier }) => updateTableStateSelectedRows(state, tableId, [...(state[tableId].selectedRows ?? []), rowIdentifier])), on(QdTableActions.updateTableStateSingleRowToSelected, (state, { tableId, rowIdentifier }) => updateTableStateSelectedRows(state, tableId, [rowIdentifier])), on(QdTableActions.updateTableStateRowToUnselected, (state, { tableId, rowIdentifier }) => updateTableStateSelectedRows(state, tableId, (state[tableId].selectedRows ?? []).filter(id => id !== rowIdentifier))), on(QdTableActions.updateTableStateRecentSecondaryAction, (state, { tableId, recentSecondaryAction: recentSecondaryAction }) => updateTableStateRecentSecondaryAction(state, tableId, recentSecondaryAction)), on(QdTableActions.setupPagination, (state, { tableId, pageSize }) => setupPagination(state, tableId, pageSize)), on(QdTableActions.setPage, (state, { tableId, pageIndex, pageSize, totalCount, data }) => setPage(state, tableId, pageIndex, pageSize, totalCount, data)), on(QdTableActions.setPageSize, (state, { tableId, pageSize }) => setPageSize(state, tableId, pageSize)), on(QdTableActions.setPageParams, (state, { tableId, pageIndex, pageSize, totalCount }) => setPageParams(state, tableId, pageIndex, pageSize, totalCount)), on(QdTableActions.setupSort, (state, { tableId, columns }) => setupSort(state, tableId, columns)), on(QdTableActions.setSort, (state, { tableId, column, direction }) => setSort(state, tableId, column, direction)), on(QdTableActions.updateSort, (state, { tableId, column, direction }) => updateSort(state, tableId, column, direction)), on(QdTableActions.setRequestState, (state, { tableId, requestState }) => setRequestState(state, tableId, requestState)), on(QdTableActions.connect, (state, { tableId, connectorName, connectorCriteria, connectorState }) => connect(state, tableId, connectorCriteria, connectorName, connectorState)), on(QdTableActions.resetConnectorStates, (state, { tableId }) => resetConnectorStates(state, tableId)), on(QdTableActions.setLastVisitedRow, (state, { tableId, rowIdentifier }) => setLastVisitedRow(state, tableId, rowIdentifier)), on(QdTableActions.clearLastVisitedRow, (state, { tableId }) => clearLastVisitedRow(state, tableId)), on(QdTableActions.deleteTableState, (state, { tableId }) => omit({ ...state }, tableId)));
 function tableReducer(state, action) {
     return _tableReducer(state, action);
 }
@@ -26928,8 +27108,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class QdFormGroupManagerService {
     _formGroups = new Map();
     _formGroupsSnapshot = new Map();
+    _formGroupsChanged$ = new BehaviorSubject(undefined);
     setFormGroup(key, formGroup) {
         this._formGroups.set(key, formGroup);
+        this._formGroupsChanged$.next();
     }
     getFormGroup(key) {
         return this._formGroups.get(key);
@@ -26939,6 +27121,7 @@ class QdFormGroupManagerService {
     }
     tryRemoveFormGroup(key) {
         this._formGroups.delete(key);
+        this._formGroupsChanged$.next();
     }
     hasFormGroups() {
         return this._formGroups.size > 0;
@@ -26952,19 +27135,24 @@ class QdFormGroupManagerService {
         return !this._formGroups.has(key);
     }
     $areFormGroupsValid() {
-        if (!this.hasFormGroups())
-            return of(false);
-        const obs = Array.from(this._formGroups.values()).map(fg => fg.statusChanges.pipe(startWith(fg.status), map(() => this.areFormGroupsValid(fg))));
-        return combineLatest(obs).pipe(map(valids => valids.every(Boolean)));
+        return this._formGroupsChanged$.pipe(observeOn(queueScheduler), switchMap$1(() => {
+            if (!this.hasFormGroups())
+                return of(false);
+            const obs = Array.from(this._formGroups.values()).map(fg => fg.statusChanges.pipe(startWith(fg.status), map(() => this.areFormGroupsValid(fg))));
+            return combineLatest(obs).pipe(map(valids => valids.every(Boolean)));
+        }));
     }
     $hasValuesChanged() {
-        if (!this.hasFormGroups())
-            return of(false);
-        const obs = Array.from(this._formGroups.entries()).map(([key, fg]) => fg.valueChanges.pipe(startWith(fg.getRawValue()), map(currentValues => {
-            const snapshot = this._formGroupsSnapshot.get(key);
-            return snapshot ? !isEqual$1(currentValues, snapshot) : true;
-        })));
-        return combineLatest(obs).pipe(map(changes => changes.some(Boolean)));
+        return this._formGroupsChanged$.pipe(observeOn(queueScheduler), switchMap$1(() => {
+            if (!this.hasFormGroups())
+                return of(false);
+            const obs = Array.from(this._formGroups.entries()).map(([key, fg]) => fg.valueChanges.pipe(startWith(fg.getRawValue()), map(() => {
+                const currentValues = fg.getRawValue();
+                const snapshot = this._formGroupsSnapshot.get(key);
+                return snapshot ? !isEqual$1(currentValues, snapshot) : true;
+            })));
+            return combineLatest(obs).pipe(map(changes => changes.some(Boolean)));
+        }));
     }
     takeFormGroupsSnapshot() {
         this._formGroups.forEach((fg, key) => this._formGroupsSnapshot.set(key, fg.getRawValue()));
@@ -26984,6 +27172,43 @@ class QdFormGroupManagerService {
                 }
             });
         });
+        this.cancelPendingAsyncValidation();
+    }
+    /**
+     * Cancels any in-flight async validators on all registered form groups.
+     *
+     * 1. Collect all PENDING controls and their async validators
+     * 2. Clear all async validators, then update validity (sync-only, no cascade)
+     * 3. Re-attach async validators for future use
+     */
+    cancelPendingAsyncValidation() {
+        this._formGroups.forEach(fg => {
+            const pendingControls = this.collectPendingControls(fg);
+            if (pendingControls.length === 0)
+                return;
+            for (const { control } of pendingControls) {
+                control.clearAsyncValidators();
+            }
+            for (const { control } of pendingControls) {
+                control.updateValueAndValidity({ onlySelf: true });
+            }
+            for (const { control, asyncValidator } of pendingControls) {
+                control.setAsyncValidators(asyncValidator);
+            }
+        });
+    }
+    collectPendingControls(control) {
+        const result = [];
+        if (control instanceof FormGroup) {
+            Object.values(control.controls).forEach(c => result.push(...this.collectPendingControls(c)));
+        }
+        else if (control instanceof FormArray) {
+            control.controls.forEach(c => result.push(...this.collectPendingControls(c)));
+        }
+        if (control.status === 'PENDING') {
+            result.push({ control, asyncValidator: control.asyncValidator });
+        }
+        return result;
     }
     resetFormArrayToValues(array, newValues) {
         if (!Array.isArray(newValues))
@@ -27108,6 +27333,7 @@ class QdPageObjectHeaderComponent {
     _pageObjectDataSubject = new BehaviorSubject({});
     _isLoadingSubject = new BehaviorSubject(false);
     _customActionsSubject = new BehaviorSubject({ actions: [] });
+    _customActionsSub;
     _destroyed$ = new Subject();
     _availableContexts = 0;
     pageObjectData$ = this._pageObjectDataSubject.asObservable();
@@ -27238,14 +27464,18 @@ class QdPageObjectHeaderComponent {
             .$hasValuesChanged()
             .pipe(take(1))
             .subscribe(hasChanged => {
-            if (hasChanged)
+            if (hasChanged) {
                 this.openCancelDialog();
-            else
+            }
+            else {
+                this.formGroupManagerService.cancelPendingAsyncValidation();
                 this.pageStoreService.toggleViewonly(true);
+            }
         });
     }
     save() {
         const handleSuccess = () => {
+            this.formGroupManagerService.cancelPendingAsyncValidation();
             this.pageStoreService.toggleViewonly(true);
             this.formGroupManagerService.takeFormGroupsSnapshot();
         };
@@ -27274,7 +27504,7 @@ 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)))
+            .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()))
             .subscribe();
     }
     initContexts() {
@@ -27293,17 +27523,32 @@ class QdPageObjectHeaderComponent {
             .subscribe();
     }
     updateCustomActions() {
-        if (this.config.pageType === 'inspect') {
-            const operationMode = this.config.pageTypeConfig?.operationMode;
-            if (operationMode)
-                this.pageStoreService.toggleViewonly(operationMode === 'view');
-            this.pageStoreService.isViewonly$.pipe(takeUntil(this._destroyed$)).subscribe(isViewonly => {
-                const customActions = this.config.pageTypeConfig?.customActions ?? [];
-                this._customActionsSubject.next(this.getCustomActionsByMode(customActions, isViewonly ? 'view' : 'edit'));
-            });
+        // 1. Handle non-inspect pages early
+        if (this.config.pageType !== 'inspect') {
+            const actions = this.config.pageTypeConfig?.customActions ?? [];
+            this._customActionsSubject.next({ actions });
+            return;
         }
-        if (this.config.pageType !== 'inspect')
-            this._customActionsSubject.next({ actions: this.config.pageTypeConfig?.customActions ?? [] });
+        // 2. Setup Inspect-specific logic
+        const config = this.config.pageTypeConfig;
+        if (config?.operationMode) {
+            this.pageStoreService.toggleViewonly(config.operationMode === 'view');
+        }
+        this.subscribeToViewOnlyMode();
+    }
+    subscribeToViewOnlyMode() {
+        this._customActionsSub?.unsubscribe();
+        this._customActionsSub = this.pageStoreService.isViewonly$
+            .pipe(takeUntil(this._destroyed$))
+            .subscribe(isViewonly => {
+            const mode = isViewonly ? 'view' : 'edit';
+            const config = this.config.pageTypeConfig;
+            if (config) {
+                config.operationMode = mode;
+            }
+            const actions = config?.customActions ?? [];
+            this._customActionsSubject.next(this.getCustomActionsByMode(actions, mode));
+        });
     }
     getCustomActionsByMode(customActions, mode) {
         const actions = customActions
@@ -28302,6 +28547,7 @@ class QdPageSubmitActionService {
     _submitHandler;
     _isVisible = true;
     _destroyed$ = new Subject();
+    _cancelTrackFormValidity$ = new Subject();
     ngOnDestroy() {
         this._destroyed$.next(null);
         this._destroyed$.complete();
@@ -28340,9 +28586,10 @@ class QdPageSubmitActionService {
         };
     }
     trackFormValidity() {
+        this._cancelTrackFormValidity$.next();
         this.formGroupManagerService
             .$areFormGroupsValid()
-            .pipe(takeUntil(this._destroyed$), distinctUntilChanged())
+            .pipe(takeUntil(this._cancelTrackFormValidity$), takeUntil(this._destroyed$), distinctUntilChanged())
             .subscribe(isValid => this.updateSubmitButtonState(isValid));
     }
     updateSubmitButtonState(isValid) {
@@ -28780,6 +29027,7 @@ class QdPageComponent {
     projectionGuardMessage = 'QD-UI | QdPage - This content is not supported. Please use QdSectionAdapterDirective for custom content projection.';
     _isInitialized = false;
     _destroyed$ = new Subject();
+    _cancelSubmitValidation$ = new Subject();
     get isControlPanelVisible() {
         return this.controlPanel !== undefined && this.controlPanel.config?.isHidden !== true;
     }
@@ -28894,6 +29142,10 @@ class QdPageComponent {
         ]);
     }
     updateInspectPageOperationMode(pageTypeConfig, mode) {
+        if (mode === 'view') {
+            this.formGroupManagerService.cancelPendingAsyncValidation();
+            setTimeout(() => this.formGroupManagerService.cancelPendingAsyncValidation());
+        }
         if (pageTypeConfig?.submit) {
             const isVisible = mode === 'view' && !pageTypeConfig.submit.isHidden;
             this.submitActionService.setSubmitActionForInspect(pageTypeConfig, isVisible);
@@ -28921,9 +29173,10 @@ class QdPageComponent {
             .subscribe();
     }
     initSubmitValidation() {
+        this._cancelSubmitValidation$.next();
         this.formGroupManagerService
             .$areFormGroupsValid()
-            .pipe(takeUntil(this._destroyed$), tap(isValid => {
+            .pipe(takeUntil(this._cancelSubmitValidation$), takeUntil(this._destroyed$), tap(isValid => {
             const submitDisabledInfoText = this.config.pageType === 'inspect' ? this.config.pageTypeConfig?.submit?.disabledInfo : undefined;
             this.footerService.updateActions([
                 {