@quadrel-enterprise-ui/framework 20.6.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**
- *
- * File interactions are managed through several key functions:
- *
- * - **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.
+ * - **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
  *
- * #### **Standalone Mode**
+ * #### **Quick start**
  *
- * 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.
+ * **1. Add the collector to the template**
  *
- * #### **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: [{
@@ -26999,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);
@@ -27010,6 +27121,7 @@ class QdFormGroupManagerService {
     }
     tryRemoveFormGroup(key) {
         this._formGroups.delete(key);
+        this._formGroupsChanged$.next();
     }
     hasFormGroups() {
         return this._formGroups.size > 0;
@@ -27023,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()));
@@ -27055,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))
@@ -27179,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();
@@ -27309,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();
         };
@@ -27345,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() {
@@ -27364,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;
+        }
+        // 2. Setup Inspect-specific logic
+        const config = this.config.pageTypeConfig;
+        if (config?.operationMode) {
+            this.pageStoreService.toggleViewonly(config.operationMode === 'view');
         }
-        if (this.config.pageType !== 'inspect')
-            this._customActionsSubject.next({ actions: this.config.pageTypeConfig?.customActions ?? [] });
+        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
@@ -28373,6 +28547,7 @@ class QdPageSubmitActionService {
     _submitHandler;
     _isVisible = true;
     _destroyed$ = new Subject();
+    _cancelTrackFormValidity$ = new Subject();
     ngOnDestroy() {
         this._destroyed$.next(null);
         this._destroyed$.complete();
@@ -28411,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) {
@@ -28851,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;
     }
@@ -28965,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);
@@ -28992,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([
                 {