@smartbit4all/ng-client 7.3.40 → 7.3.42

package/fesm2022/smartbit4all-ng-client.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, reflectComponentType, Injectable, inject, DOCUMENT, PLATFORM_ID, Optional, Inject, SkipSelf, NgModule, RendererStyleFlags2, input, computed, Component, HostListener, HostBinding, Directive, ViewContainerRef, ElementRef, Renderer2, ChangeDetectorRef, Input, output, Injector, signal, afterNextRender, CSP_NONCE, ViewChild, ViewChildren, effect, untracked, NgZone, forwardRef, createComponent, EnvironmentInjector, ApplicationRef, DestroyRef, ChangeDetectionStrategy, ViewEncapsulation, Pipe, viewChild, runInInjectionContext, EventEmitter, Output, makeEnvironmentProviders, importProvidersFrom, provideEnvironmentInitializer } from '@angular/core';
+import { InjectionToken, reflectComponentType, Injectable, inject, DOCUMENT, PLATFORM_ID, Optional, Inject, SkipSelf, NgModule, RendererStyleFlags2, input, computed, Component, HostListener, HostBinding, Directive, ViewContainerRef, ElementRef, Renderer2, ChangeDetectorRef, Input, output, Injector, signal, afterNextRender, CSP_NONCE, ViewChild, ViewChildren, effect, untracked, viewChild, NgZone, DestroyRef, forwardRef, createComponent, EnvironmentInjector, ApplicationRef, ChangeDetectionStrategy, ViewEncapsulation, Pipe, runInInjectionContext, EventEmitter, Output, makeEnvironmentProviders, importProvidersFrom, provideEnvironmentInitializer } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpErrorResponse, HttpParams, provideHttpClient, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
@@ -3481,7 +3481,13 @@ class SmartTooltipDirective {
         ...(ngDevMode ? [undefined, { debugName: "smartTooltipClass" }] : /* istanbul ignore next */ []));
         this.cursor = 'pointer';
     }
-    // A keyboard user reaches the element by focus, never by hover.
+    // A keyboard user reaches the element by focus, never by hover; a focus a script gives
+    // (a dialog restoring it, the focus restore after a push) is no reason to show.
+    focusin(event) {
+        if (event.target.matches(':focus-visible')) {
+            this.mouseover();
+        }
+    }
     mouseover() {
         const smartTooltip = this.smartTooltip();
         if (!smartTooltip)
@@ -3515,7 +3521,7 @@ class SmartTooltipDirective {
         return delay ? delay : 2000;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SmartTooltipDirective, isStandalone: true, selector: "[smartTooltip]", inputs: { smartTooltip: { classPropertyName: "smartTooltip", publicName: "smartTooltip", isSignal: true, isRequired: false, transformFunction: null }, smartTooltipClass: { classPropertyName: "smartTooltipClass", publicName: "smartTooltipClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "mouseover()", "mouseover": "mouseover()", "focusout": "mouseleave()", "mouseleave": "mouseleave()" }, properties: { "style.cursor": "this.cursor" } }, providers: [MatTooltip], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SmartTooltipDirective, isStandalone: true, selector: "[smartTooltip]", inputs: { smartTooltip: { classPropertyName: "smartTooltip", publicName: "smartTooltip", isSignal: true, isRequired: false, transformFunction: null }, smartTooltipClass: { classPropertyName: "smartTooltipClass", publicName: "smartTooltipClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "focusin($event)", "mouseover": "mouseover()", "focusout": "mouseleave()", "mouseleave": "mouseleave()" }, properties: { "style.cursor": "this.cursor" } }, providers: [MatTooltip], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartTooltipDirective, decorators: [{
             type: Directive,
@@ -3526,10 +3532,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }], propDecorators: { smartTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartTooltip", required: false }] }], smartTooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartTooltipClass", required: false }] }], cursor: [{
                 type: HostBinding,
                 args: ['style.cursor']
-            }], mouseover: [{
+            }], focusin: [{
                 type: HostListener,
-                args: ['focusin']
-            }, {
+                args: ['focusin', ['$event']]
+            }], mouseover: [{
                 type: HostListener,
                 args: ['mouseover']
             }], mouseleave: [{
@@ -7341,8 +7347,8 @@ class SmartdialogService {
         });
         return this.dialogRef;
     }
-    createDialogRef(smartDialog, component) {
-        const dialogRef = this.dialog.open(component, { data: smartDialog });
+    createDialogRef(smartDialog, component, config) {
+        const dialogRef = this.dialog.open(component, { ...config, data: smartDialog });
         dialogRef.afterClosed().subscribe((result) => {
             this.handleAfterClosed(result);
             dialogRef.close();
@@ -7773,6 +7779,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 const APIS$3 = [DefaultService];
 
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ * When the camera or the microphone starts: AUTO the moment the capture UI opens (the recorder starts recording), MANUAL on a switch-on button.
+ */
+var CaptureDeviceStart;
+(function (CaptureDeviceStart) {
+    CaptureDeviceStart["AUTO"] = "AUTO";
+    CaptureDeviceStart["MANUAL"] = "MANUAL";
+})(CaptureDeviceStart || (CaptureDeviceStart = {}));
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ * What happens to a taken photo, a stopped video or a stopped recording: CONFIRM shows it for confirmation (retake / use, playback / save), IMMEDIATE hands it to the widget at once.
+ */
+var CaptureHandover;
+(function (CaptureHandover) {
+    CaptureHandover["CONFIRM"] = "CONFIRM";
+    CaptureHandover["IMMEDIATE"] = "IMMEDIATE";
+})(CaptureHandover || (CaptureHandover = {}));
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ * Where the capture UI of a file widget opens: INLINE under the capture buttons, DIALOG in a dialog of its own.
+ */
+var CaptureMode;
+(function (CaptureMode) {
+    CaptureMode["INLINE"] = "INLINE";
+    CaptureMode["DIALOG"] = "DIALOG";
+})(CaptureMode || (CaptureMode = {}));
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ * The side the inline recorder\'s waveform strip grows to from its microphone button: LEFT to the left with the button at the right edge, RIGHT to the right with the button at the left edge.
+ */
+var CaptureOpenDirection;
+(function (CaptureOpenDirection) {
+    CaptureOpenDirection["LEFT"] = "LEFT";
+    CaptureOpenDirection["RIGHT"] = "RIGHT";
+})(CaptureOpenDirection || (CaptureOpenDirection = {}));
+
 /**
  * Form layout definition
  * Contains form layout definition objects.
@@ -7805,6 +7891,48 @@ var CodeEditorLang;
  * Do not edit the class manually.
  */
 
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ * A place a file widget takes a file from: FILE the file picker, CAMERA_PHOTO the device camera for a photo, CAMERA_VIDEO the device camera for a video, MICROPHONE the microphone.
+ */
+var FileUploaderSource;
+(function (FileUploaderSource) {
+    FileUploaderSource["FILE"] = "FILE";
+    FileUploaderSource["CAMERA_PHOTO"] = "CAMERA_PHOTO";
+    FileUploaderSource["CAMERA_VIDEO"] = "CAMERA_VIDEO";
+    FileUploaderSource["MICROPHONE"] = "MICROPHONE";
+})(FileUploaderSource || (FileUploaderSource = {}));
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ * Whether the widget shows the stored file itself (image, video player, audio player) on the card: NONE shows the icon, the name and the size only, FULL shows the file above the name line.
+ */
+var FileUploaderThumbnail;
+(function (FileUploaderThumbnail) {
+    FileUploaderThumbnail["NONE"] = "NONE";
+    FileUploaderThumbnail["FULL"] = "FULL";
+})(FileUploaderThumbnail || (FileUploaderThumbnail = {}));
+
 /**
  * Form layout definition
  * Contains form layout definition objects.
@@ -9057,11 +9185,81 @@ class UploadWidgetUtils {
         const value = parseFloat((bytes / Math.pow(k, i)).toFixed(1));
         return `${value} ${sizes[i]}`;
     }
-}
+    /** The size of a capture with a decimal comma, as the Capture Dialog's captions show it. */
+    static formatCapturedSize(bytes) {
+        return UploadWidgetUtils.formatSize(bytes).replace('.', ',');
+    }
+    /** A length of time as mm:ss. */
+    static formatDuration(milliseconds) {
+        return [Math.floor((milliseconds % 3600000) / 60000), Math.floor((milliseconds % 60000) / 1000)]
+            .map((v) => (v < 10 ? '0' + v : v))
+            .join(':');
+    }
+    /** The recording mime of a media kind: webm where the browser records it, else mp4 (Safari). */
+    static chooseRecorderMimeType(kind) {
+        return MediaRecorder.isTypeSupported(`${kind}/webm`) ? `${kind}/webm` : `${kind}/mp4`;
+    }
+    /** A recording as a file named by the prefix and the local time, its extension by its mime. */
+    static createRecordingFile(blob, prefix, fallbackMimeType) {
+        const formattedDate = new Date().toLocaleString('sv-SE').replace(' ', '_').replace(/:/g, '-');
+        const mimeType = blob.type || fallbackMimeType;
+        const ext = mimeType.includes('webm') ? 'webm' : 'mp4';
+        return new File([blob], `${prefix}_${formattedDate}.${ext}`, { type: mimeType });
+    }
+    /** The zone's texts: a descriptor's text per key, the client's default for a missing one. */
+    static resolveTexts(texts) {
+        return { ...UPLOAD_ZONE_DEFAULT_TEXTS, ...texts };
+    }
+    /** Fills the `{name}` placeholders of a text, which the server sends raw. */
+    static fillPlaceholders(text, values) {
+        return text.replace(/\{(\w+)\}/g, (placeholder, name) => name in values ? String(values[name]) : placeholder);
+    }
+}
+/** The client's text of every key, shown where the descriptor's texts lack the key. */
+const UPLOAD_ZONE_DEFAULT_TEXTS = {
+    addFile: 'Dokumentum hozzáadása',
+    browseOrDrag: 'tallózás vagy behúzás',
+    maxSize: 'max. {size} MB',
+    upload: 'Feltöltés',
+    unsupportedFormat: '"{fileName}" - nem támogatott formátum',
+    fileTooLarge: '"{fileName}" - túl nagy fájl (max {size} MB)',
+    capturePhoto: 'Fotó készítése',
+    captureVideo: 'Videó készítése',
+    recordAudio: 'Hangfelvétel',
+    photo: 'fotó',
+    video: 'videó',
+    audio: 'hangfelvétel',
+    or: 'vagy',
+    captureOnlyHint: '{sources} készítése',
+    takePicture: 'Kép készítése',
+    cameraOn: 'Kamera bekapcsolása',
+    cameraOff: 'Kamera kikapcsolása',
+    switchOnCameraHint: 'Kapcsolja be a kamerát a kép készítéséhez!',
+    switchOnForVideo: 'Kapcsolja be a kamerát a videó felvételéhez!',
+    startRecording: 'Felvétel indítása',
+    stopRecording: 'Felvétel leállítása',
+    recording: 'Felvétel folyamatban…',
+    pickVideo: 'Videó kiválasztása',
+    cameraError: 'A kamera nem érhető el.',
+    microphoneError: 'A mikrofon nem érhető el.',
+    play: 'Lejátszás',
+    photoDialogTitle: 'Fénykép készítése',
+    videoDialogTitle: 'Videó felvétele',
+    audioDialogTitle: 'Hangfelvétel',
+    cancel: 'Mégse',
+    retake: 'Újra',
+    use: 'Használ',
+    save: 'Mentés',
+    capturedPhoto: 'Elkészült kép',
+    capturedVideo: 'Felvétel',
+    recordingHint: 'A lejátszás ikon visszajátssza, a mikrofon gomb új felvételt indít (felülírja ezt).',
+    microphoneRetryHint: 'A mikrofon gomb újra kéri az engedélyt.',
+};
 
 class SmartfileuploaderComponent {
     constructor() {
         this._snackBar = inject(MatSnackBar);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
         this.files = [];
         this.uploadCallback = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "uploadCallback" }] : /* istanbul ignore next */ []));
@@ -9077,6 +9275,10 @@ class SmartfileuploaderComponent {
         ...(ngDevMode ? [{ debugName: "autoUpload" }] : /* istanbul ignore next */ []));
         this.isDisabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        /** False in a capture-only zone: no picker and drop zone, the list and the checks stay. The
+         * upload button goes with the picker, so a host hiding it needs autoUpload. */
+        this.pickerShown = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerShown" }] : /* istanbul ignore next */ []));
         this.isDragOver = false;
         this.errors = [];
         this.previewUrls = new Map();
@@ -9084,13 +9286,14 @@ class SmartfileuploaderComponent {
     ngOnInit() {
         const defaultI18n = {
             addFile: 'dokumentum hozzáadása',
-            browseOrDrag: 'tallózás vagy behúzás',
+            browseOrDrag: UPLOAD_ZONE_DEFAULT_TEXTS.browseOrDrag,
             maxSize: `max. ${this.maxSizeMb()} MB`,
             formats: 'PDF, docx, xls formátum',
-            upload: 'Feltöltés',
+            upload: UPLOAD_ZONE_DEFAULT_TEXTS.upload,
         };
         this.i18n = { ...defaultI18n, ...this.i18n };
     }
+    /** Checks the formats and the size of picked, dropped and captured files alike. */
     processFiles(fileList) {
         this.errors = [];
         var validFiles = [];
@@ -9104,12 +9307,17 @@ class SmartfileuploaderComponent {
                     .map((f) => f.replace('.', '').trim().toLowerCase());
                 var isAllowed = trimmedFormats.includes(ext);
                 if (!isAllowed) {
-                    this.errors.push(`"${file.name}" - nem támogatott formátum`);
+                    const message = this.i18n?.unsupportedFormat ?? UPLOAD_ZONE_DEFAULT_TEXTS.unsupportedFormat;
+                    this.errors.push(UploadWidgetUtils.fillPlaceholders(message, { fileName: file.name }));
                     hasError = true;
                 }
             }
             if (file.size > this.maxSizeMb() * 1024 * 1024) {
-                this.errors.push(`"${file.name}" - túl nagy fájl (max ${this.maxSizeMb()} MB)`);
+                const message = this.i18n?.fileTooLarge ?? UPLOAD_ZONE_DEFAULT_TEXTS.fileTooLarge;
+                this.errors.push(UploadWidgetUtils.fillPlaceholders(message, {
+                    fileName: file.name,
+                    size: this.maxSizeMb(),
+                }));
                 hasError = true;
             }
             if (!hasError) {
@@ -9125,6 +9333,8 @@ class SmartfileuploaderComponent {
         if (this.autoUpload() && this.errors.length == 0) {
             this.uploadFile();
         }
+        // A Capture Dialog hands its file over outside any template event of this view.
+        this.changeDetectorRef.markForCheck();
     }
     getFile(event) {
         if (event.target.files && event.target.files.length) {
@@ -9134,6 +9344,9 @@ class SmartfileuploaderComponent {
         }
     }
     onDrop(event) {
+        if (!this.pickerShown()) {
+            return;
+        }
         event.preventDefault();
         this.isDragOver = false;
         if (!event.dataTransfer?.files)
@@ -9142,6 +9355,9 @@ class SmartfileuploaderComponent {
         this.processFiles(fileList);
     }
     onDragOver(event) {
+        if (!this.pickerShown()) {
+            return;
+        }
         event.preventDefault();
         this.isDragOver = true;
     }
@@ -9228,68 +9444,232 @@ class SmartfileuploaderComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartfileuploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartfileuploaderComponent, isStandalone: true, selector: "smartfileuploader", inputs: { uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: true, transformFunction: null }, fileFormats: { classPropertyName: "fileFormats", publicName: "fileFormats", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, useIconButton: { classPropertyName: "useIconButton", publicName: "useIconButton", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n>\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n    />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon fontSet=\"material-symbols-outlined\" color=\"primary\" class=\"addCircle\"\n              >add_circle</mat-icon\n            >\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button\n            (actionClick)=\"uploadFile($event)\"\n            [code]=\"'default-upload'\"\n            [descriptor]=\"uploadButton\"\n          >\n          </ui-action-button>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warn-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warn-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartfileuploaderComponent, isStandalone: true, selector: "smartfileuploader", inputs: { uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: true, transformFunction: null }, fileFormats: { classPropertyName: "fileFormats", publicName: "fileFormats", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, useIconButton: { classPropertyName: "useIconButton", publicName: "useIconButton", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, pickerShown: { classPropertyName: "pickerShown", publicName: "pickerShown", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n  [class.captureOnly]=\"!pickerShown()\"\n>\n  @if (pickerShown()) {\n    <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n      <input\n        #fileInput\n        id=\"addFile\"\n        placeholder=\"fileInput\"\n        type=\"file\"\n        (change)=\"getFile($event)\"\n        class=\"file\"\n        accept=\"{{ fileFormats()?.join(', ') }}\"\n        [size]=\"maxSizeMb()\"\n        [multiple]=\"isMultiple()\"\n        [disabled]=\"isDisabled()\"\n        style=\"display: none\"\n      />\n      <div class=\"fileUploadContentContainer\">\n        <div class=\"icon\">\n          @if (useIconButton()) {\n            <mat-label class=\"addFileButton\">\n              <mat-icon fontSet=\"material-symbols-outlined\" color=\"primary\" class=\"addCircle\"\n                >add_circle</mat-icon\n              >\n            </mat-label>\n          }\n          @if (!useIconButton()) {\n            <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n              {{ i18n!.addFile }}\n            </button>\n          }\n        </div>\n        <div class=\"labels\">\n          @if (useIconButton()) {\n            <mat-label class=\"label primary title\">\n              {{ i18n!.addFile }}\n            </mat-label>\n          }\n          <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n          <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n          <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n        </div>\n        @if (files.length) {\n          <div class=\"uploadButton\">\n            <ui-action-button\n              (actionClick)=\"uploadFile($event)\"\n              [code]=\"'default-upload'\"\n              [descriptor]=\"uploadButton\"\n            >\n            </ui-action-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.container.captureOnly{border:none}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon .addCircle{color:var(--primary-color)}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warn-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warn-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartfileuploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smartfileuploader', imports: [NgClass, MatLabel, MatIcon, MatButton, UiActionButtonComponent, SmartIconComponent], template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n>\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n    />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon fontSet=\"material-symbols-outlined\" color=\"primary\" class=\"addCircle\"\n              >add_circle</mat-icon\n            >\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button\n            (actionClick)=\"uploadFile($event)\"\n            [code]=\"'default-upload'\"\n            [descriptor]=\"uploadButton\"\n          >\n          </ui-action-button>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warn-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warn-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'smartfileuploader', imports: [NgClass, MatLabel, MatIcon, MatButton, UiActionButtonComponent, SmartIconComponent], template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n  [class.captureOnly]=\"!pickerShown()\"\n>\n  @if (pickerShown()) {\n    <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n      <input\n        #fileInput\n        id=\"addFile\"\n        placeholder=\"fileInput\"\n        type=\"file\"\n        (change)=\"getFile($event)\"\n        class=\"file\"\n        accept=\"{{ fileFormats()?.join(', ') }}\"\n        [size]=\"maxSizeMb()\"\n        [multiple]=\"isMultiple()\"\n        [disabled]=\"isDisabled()\"\n        style=\"display: none\"\n      />\n      <div class=\"fileUploadContentContainer\">\n        <div class=\"icon\">\n          @if (useIconButton()) {\n            <mat-label class=\"addFileButton\">\n              <mat-icon fontSet=\"material-symbols-outlined\" color=\"primary\" class=\"addCircle\"\n                >add_circle</mat-icon\n              >\n            </mat-label>\n          }\n          @if (!useIconButton()) {\n            <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n              {{ i18n!.addFile }}\n            </button>\n          }\n        </div>\n        <div class=\"labels\">\n          @if (useIconButton()) {\n            <mat-label class=\"label primary title\">\n              {{ i18n!.addFile }}\n            </mat-label>\n          }\n          <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n          <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n          <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n        </div>\n        @if (files.length) {\n          <div class=\"uploadButton\">\n            <ui-action-button\n              (actionClick)=\"uploadFile($event)\"\n              [code]=\"'default-upload'\"\n              [descriptor]=\"uploadButton\"\n            >\n            </ui-action-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.container.captureOnly{border:none}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon .addCircle{color:var(--primary-color)}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warn-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warn-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"] }]
         }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
             }], uploadCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadCallback", required: true }] }], fileFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileFormats", required: false }] }], maxSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMb", required: false }] }], i18n: [{
                 type: Input
-            }], useIconButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "useIconButton", required: false }] }], isMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiple", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }] } });
+            }], useIconButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "useIconButton", required: false }] }], isMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiple", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], pickerShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerShown", required: false }] }] } });
 
 class PhotoCaptureWidgetComponent {
-    get cameraActive() {
-        return this.cameraActiveState();
-    }
-    set cameraActive(active) {
-        this.cameraActiveState.set(active);
-    }
-    get isCaptured() {
-        return this.isCapturedState();
-    }
-    set isCaptured(captured) {
-        this.isCapturedState.set(captured);
-    }
     constructor() {
+        this.injector = inject(Injector);
+        /** The take, record, retake and use buttons, for a host that draws them itself. */
+        this.actionButtonsTemplate = viewChild('actionButtons', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionButtonsTemplate" }] : /* istanbul ignore next */ []));
         this.maxFileSize = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
+        /** PHOTO takes a picture; VIDEO records a video with the webcam or picks one on a desktop. */
+        this.mode = input('PHOTO', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** True when the zone's capture row carries the button: the widget then opens only by
+         * openCapture(). */
+        this.externalTrigger = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "externalTrigger" }] : /* istanbul ignore next */ []));
+        /** The zone's texts; the buttons follow them. */
+        this.texts = input(UPLOAD_ZONE_DEFAULT_TEXTS, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
+        /** AUTO asks for the camera when the widget opens, MANUAL at the switch-on button. */
+        this.deviceStart = input(CaptureDeviceStart.MANUAL, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deviceStart" }] : /* istanbul ignore next */ []));
+        /** CONFIRM keeps a capture for retake or use, IMMEDIATE hands it over at the take or the stop. */
+        this.handover = input(CaptureHandover.IMMEDIATE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handover" }] : /* istanbul ignore next */ []));
+        /** True in a host that draws actionButtonsTemplate: the widget then lays out as the Capture
+         * Dialog's camera view, with the switch inside the view. */
+        this.actionsInHost = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsInHost" }] : /* istanbul ignore next */ []));
         this.photoCaptured = output();
+        /** The desktop webcam panel of an externally triggered photo widget, opened by openCapture(). */
+        this.isPanelOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPanelOpen" }] : /* istanbul ignore next */ []));
         /**
          * Both are written after an `await` — the camera stream, the compression — so a signal
          * each: the click that started it has long been checked by then.
          */
         this.cameraActiveState = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "cameraActiveState" }] : /* istanbul ignore next */ []));
+        /** Set when the browser gives no camera, shown in place of the switch-on hint. */
+        this.cameraError = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cameraError" }] : /* istanbul ignore next */ []));
+        /** True while a camera request runs: AUTO then shows neither the switch nor its hint. */
+        this.isCameraStarting = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCameraStarting" }] : /* istanbul ignore next */ []));
+        this.isRecordingState = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRecordingState" }] : /* istanbul ignore next */ []));
         this.isCapturedState = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isCapturedState" }] : /* istanbul ignore next */ []));
-        this.captureButton = {
-            type: UiActionButtonType.RAISED,
-            title: 'Kép készítése',
-            icon: 'camera',
-            iconPosition: IconPosition.PRE,
-            color: 'primary',
-        };
-        this.updateToggleButton();
+        /** A capture kept for retake or use under the CONFIRM handover. */
+        this.keptFiles = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keptFiles" }] : /* istanbul ignore next */ []));
+        /** The playback address of a kept video. */
+        this.keptVideoUrl = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keptVideoUrl" }] : /* istanbul ignore next */ []));
+        /** The milliseconds of the running video, kept as the length of the stopped one. */
+        this.recordingTime = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recordingTime" }] : /* istanbul ignore next */ []));
+        /** The line on the stage of a running video: a timer in a host, the message on the panel. */
+        this.recordingCaption = computed(() => this.actionsInHost()
+            ? UploadWidgetUtils.formatDuration(this.recordingTime())
+            : this.texts().recording, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recordingCaption" }] : /* istanbul ignore next */ []));
+        /** The kept capture's line on the stage of a host; the panel has none. */
+        this.capturedCaption = computed(() => {
+            const files = this.keptFiles();
+            if (!files || !this.actionsInHost()) {
+                return undefined;
+            }
+            const size = UploadWidgetUtils.formatCapturedSize(files[0].size);
+            if (this.mode() === 'PHOTO') {
+                return `${this.texts().capturedPhoto} · ${size}`;
+            }
+            const duration = UploadWidgetUtils.formatDuration(this.recordingTime());
+            return `${this.texts().capturedVideo} · ${duration} · ${size}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "capturedCaption" }] : /* istanbul ignore next */ []));
+        /** True while a host may not lose the capture by accident: a device is asked for or runs, or
+         * a capture waits for confirmation. */
+        this.isCaptureUnderWay = computed(() => this.isCameraStarting() || this.cameraActive || this.isRecording || !!this.keptFiles(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCaptureUnderWay" }] : /* istanbul ignore next */ []));
+        /** Under AUTO and in a host the switch returns when the camera is off, so a second shot stays
+         * possible. */
+        this.isCameraSwitchShown = computed(() => !this.keptFiles() &&
+            ((this.deviceStart() === CaptureDeviceStart.MANUAL && !this.actionsInHost()) ||
+                !(this.cameraActive || this.isCameraStarting())), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCameraSwitchShown" }] : /* istanbul ignore next */ []));
+        this.isSwitchOnHintShown = computed(() => this.isCameraSwitchShown() && !this.cameraActive && !this.isCaptured, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSwitchOnHintShown" }] : /* istanbul ignore next */ []));
+        this.recordingStartTime = 0;
+        /** Advanced by stopCamera(), so a stream the browser gives after a close is stopped at once. */
+        this.cameraRequest = 0;
+        this.toggleCameraButton = computed(() => this.createButton(this.cameraActive ? this.texts().cameraOff : this.texts().cameraOn, 'power_settings_new', this.cameraActive ? 'red' : 'primary', this.getButtonType(UiActionButtonType.NORMAL)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleCameraButton" }] : /* istanbul ignore next */ []));
+        this.captureButton = computed(() => this.createButton(this.texts().takePicture, 'camera'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "captureButton" }] : /* istanbul ignore next */ []));
+        this.startRecordingButton = computed(() => this.createButton(this.texts().startRecording, 'fiber_manual_record'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startRecordingButton" }] : /* istanbul ignore next */ []));
+        this.stopRecordingButton = computed(() => this.createButton(this.texts().stopRecording, 'stop', this.actionsInHost() ? 'warn' : 'red'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stopRecordingButton" }] : /* istanbul ignore next */ []));
+        this.pickVideoButton = computed(() => this.createButton(this.texts().pickVideo, 'video_library'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickVideoButton" }] : /* istanbul ignore next */ []));
+        this.retakeButton = computed(() => this.createButton(this.texts().retake, 'replay', 'primary', this.getButtonType(UiActionButtonType.NORMAL)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "retakeButton" }] : /* istanbul ignore next */ []));
+        this.useButton = computed(() => this.createButton(this.texts().use, 'check'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "useButton" }] : /* istanbul ignore next */ []));
+    }
+    get cameraActive() {
+        return this.cameraActiveState();
+    }
+    set cameraActive(active) {
+        this.cameraActiveState.set(active);
+    }
+    get isRecording() {
+        return this.isRecordingState();
+    }
+    set isRecording(recording) {
+        this.isRecordingState.set(recording);
+    }
+    get isCaptured() {
+        return this.isCapturedState();
+    }
+    set isCaptured(captured) {
+        this.isCapturedState.set(captured);
     }
     isMobile() {
         return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
     }
+    /** A phone opens its own camera, a desktop the webcam panel. */
+    openCapture() {
+        if (this.isMobile()) {
+            this.fileInputRef.nativeElement.click();
+            return;
+        }
+        if (this.isPanelOpen()) {
+            this.stopCamera();
+            this.discardKeptCapture();
+        }
+        else {
+            this.startCameraAfterRender();
+        }
+        this.isPanelOpen.update((open) => !open);
+    }
+    ngAfterViewInit() {
+        if (!this.externalTrigger()) {
+            this.startCameraAfterRender();
+        }
+    }
+    ngOnDestroy() {
+        this.stopCamera();
+        this.discardKeptCapture();
+    }
+    /** AUTO waits for the render: the stream goes into the panel's video element. */
+    startCameraAfterRender() {
+        if (this.deviceStart() !== CaptureDeviceStart.AUTO || this.isMobile()) {
+            return;
+        }
+        afterNextRender(() => {
+            if (!this.externalTrigger() || this.isPanelOpen()) {
+                this.startCamera();
+            }
+        }, { injector: this.injector });
+    }
     async startCamera() {
-        this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
+        this.cameraError.set(false);
+        this.isCameraStarting.set(true);
+        const request = ++this.cameraRequest;
+        let stream;
+        try {
+            stream = await this.openCameraStream();
+        }
+        catch {
+            if (request === this.cameraRequest) {
+                this.isCameraStarting.set(false);
+                this.cameraError.set(true);
+            }
+            return;
+        }
+        if (request !== this.cameraRequest) {
+            stream.getTracks().forEach((track) => track.stop());
+            return;
+        }
+        this.stream = stream;
         this.videoRef.nativeElement.srcObject = this.stream;
         this.videoRef.nativeElement.play();
+        this.isCameraStarting.set(false);
         this.cameraActive = true;
         this.isCaptured = false;
-        this.updateToggleButton();
     }
+    /** A video asks for the sound too; a desktop without a microphone records a silent one. */
+    async openCameraStream() {
+        if (this.mode() === 'VIDEO') {
+            try {
+                return await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+            }
+            catch {
+                // No microphone answers: the camera alone is asked below.
+            }
+        }
+        return navigator.mediaDevices.getUserMedia({ video: true });
+    }
+    /** Closing the camera mid-recording discards the recording. */
     stopCamera() {
+        this.cameraRequest++;
+        this.isCameraStarting.set(false);
+        clearInterval(this.recordingClock);
+        if (this.recorder) {
+            this.recorder.onstop = null;
+            this.recorder.stop();
+            this.recorder = undefined;
+        }
+        this.isRecording = false;
         this.stream?.getTracks().forEach((track) => track.stop());
         this.stream = undefined;
         this.cameraActive = false;
-        this.updateToggleButton();
     }
     async capturePhoto() {
         const video = this.videoRef.nativeElement;
@@ -9308,10 +9688,74 @@ class PhotoCaptureWidgetComponent {
         if (maxFileSize && file.size > maxFileSize) {
             file = await this.compressImageFile(file, maxFileSize);
         }
-        this.photoCaptured.emit([file]);
+        this.handOverCapture([file]);
         this.isCaptured = true;
         this.stopCamera();
     }
+    /** A browser that records neither webm nor mp4 refuses the recorder: the camera error shows. */
+    startRecording() {
+        let recorder;
+        try {
+            recorder = new MediaRecorder(this.stream, {
+                mimeType: UploadWidgetUtils.chooseRecorderMimeType('video'),
+            });
+        }
+        catch {
+            this.cameraError.set(true);
+            return;
+        }
+        const chunks = [];
+        recorder.ondataavailable = (event) => chunks.push(event.data);
+        recorder.onstop = () => {
+            const blob = new Blob(chunks, { type: recorder.mimeType });
+            this.recorder = undefined;
+            this.updateRecordingTime();
+            this.handOverCapture([UploadWidgetUtils.createRecordingFile(blob, 'video', 'video/mp4')]);
+            this.stopCamera();
+        };
+        recorder.start();
+        this.recorder = recorder;
+        this.isRecording = true;
+        this.recordingStartTime = Date.now();
+        this.recordingTime.set(0);
+        this.recordingClock = setInterval(() => this.updateRecordingTime(), 1000);
+    }
+    updateRecordingTime() {
+        this.recordingTime.set(Date.now() - this.recordingStartTime);
+    }
+    /** The recording state holds until onstop hands the video over and stops the camera. */
+    stopRecording() {
+        this.recorder?.stop();
+    }
+    handOverCapture(files) {
+        if (this.handover() === CaptureHandover.IMMEDIATE) {
+            this.photoCaptured.emit(files);
+            return;
+        }
+        this.keptFiles.set(files);
+        if (this.mode() === 'VIDEO') {
+            this.keptVideoUrl.set(URL.createObjectURL(files[0]));
+        }
+    }
+    retakeCapture() {
+        this.discardKeptCapture();
+        if (this.deviceStart() === CaptureDeviceStart.AUTO) {
+            this.startCamera();
+        }
+    }
+    useCapture() {
+        this.photoCaptured.emit(this.keptFiles());
+        this.discardKeptCapture();
+    }
+    discardKeptCapture() {
+        const videoUrl = this.keptVideoUrl();
+        if (videoUrl) {
+            URL.revokeObjectURL(videoUrl);
+        }
+        this.keptVideoUrl.set(undefined);
+        this.keptFiles.set(undefined);
+        this.isCaptured = false;
+    }
     getPhotoDataURL() {
         return this.canvasRef.nativeElement.toDataURL('image/png');
     }
@@ -9346,26 +9790,6 @@ class PhotoCaptureWidgetComponent {
             this.startCamera();
         }
     }
-    updateToggleButton() {
-        let icon = 'power_settings_new';
-        let title;
-        let color;
-        if (this.cameraActive) {
-            title = 'Kamera kikapcsolása';
-            color = 'red';
-        }
-        else {
-            title = 'Kamera bekapcsolása';
-            color = 'primary';
-        }
-        this.toggleCameraButton = {
-            type: UiActionButtonType.RAISED,
-            title: title,
-            icon: icon,
-            color,
-            iconPosition: IconPosition.PRE,
-        };
-    }
     async compressImageFile(file, maxFileSize) {
         if (!file.type.startsWith('image/'))
             return file;
@@ -9423,13 +9847,20 @@ class PhotoCaptureWidgetComponent {
             return file;
         }
     }
+    /** The inline bar's buttons are all raised; a host's view tells them apart by type. */
+    getButtonType(typeInHost) {
+        return this.actionsInHost() ? typeInHost : UiActionButtonType.RAISED;
+    }
+    createButton(title, icon, color = 'primary', type = UiActionButtonType.RAISED) {
+        return { type, title, icon, iconPosition: IconPosition.PRE, color };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PhotoCaptureWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PhotoCaptureWidgetComponent, isStandalone: true, selector: "photo-capture-widget", inputs: { maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { photoCaptured: "photoCaptured" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"photoWidgetContainer\">\n  @if (!isMobile()) {\n    <video #video autoplay [hidden]=\"isCaptured || !cameraActive\"></video>\n    <canvas #canvas [hidden]=\"!isCaptured || cameraActive\"></canvas>\n    @if (!cameraActive && !isCaptured) {\n      <p class=\"message\">Kapcsolja be a kamer\u00E1t a k\u00E9p k\u00E9sz\u00EDt\u00E9s\u00E9hez!</p>\n    }\n    <div class=\"controls\">\n      <!-- START CAMERA -->\n      <ui-action-button [descriptor]=\"toggleCameraButton\" (actionClick)=\"toggleCamera()\">\n      </ui-action-button>\n      <!-- CAPTURE CAMERA -->\n      <ui-action-button\n        [disabled]=\"!cameraActive\"\n        [descriptor]=\"captureButton\"\n        (actionClick)=\"capturePhoto()\"\n        >\n      </ui-action-button>\n    </div>\n  }\n\n  @if (isMobile()) {\n    <div class=\"controls\">\n      <input\n        #fileInput\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none\"\n        />\n      <ui-action-button [descriptor]=\"captureButton\" (actionClick)=\"fileInput.click()\">\n      </ui-action-button>\n    </div>\n  }\n</div>\n", styles: [".photoWidgetContainer{border-radius:5px;width:100%;max-width:100%;display:flex;flex-direction:column;justify-content:center;border:1px solid #dee2e6}.message{text-align:center;color:#6b7280}video,canvas{border-top-right-radius:5px;border-top-left-radius:5px;width:100%}.controls{padding:.5rem;display:flex;gap:1rem;flex-direction:row;justify-content:center;background:#f8f9fa;border-top:1px solid #dee2e6;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.controls ::ng-deep button{border-radius:3px}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PhotoCaptureWidgetComponent, isStandalone: true, selector: "photo-capture-widget", inputs: { maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, externalTrigger: { classPropertyName: "externalTrigger", publicName: "externalTrigger", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, deviceStart: { classPropertyName: "deviceStart", publicName: "deviceStart", isSignal: true, isRequired: false, transformFunction: null }, handover: { classPropertyName: "handover", publicName: "handover", isSignal: true, isRequired: false, transformFunction: null }, actionsInHost: { classPropertyName: "actionsInHost", publicName: "actionsInHost", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { photoCaptured: "photoCaptured" }, viewQueries: [{ propertyName: "actionButtonsTemplate", first: true, predicate: ["actionButtons"], descendants: true, isSignal: true }, { propertyName: "videoRef", first: true, predicate: ["video"], descendants: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "@if (isMobile()) {\n  <input\n    #fileInput\n    type=\"file\"\n    [accept]=\"mode() === 'VIDEO' ? 'video/*' : 'image/*'\"\n    capture=\"environment\"\n    (change)=\"onFileSelected($event)\"\n    style=\"display: none\"\n    />\n  @if (!externalTrigger()) {\n    <div class=\"photoWidgetContainer\">\n      <div class=\"controls\">\n        <ui-action-button [descriptor]=\"captureButton()\" (actionClick)=\"fileInput.click()\">\n        </ui-action-button>\n      </div>\n    </div>\n  }\n} @else if (!externalTrigger() || isPanelOpen()) {\n  <div class=\"photoWidgetContainer\" [class.actionsInHost]=\"actionsInHost()\">\n    <div class=\"cameraStage\">\n      <video #video autoplay [muted]=\"true\" [hidden]=\"isCaptured || !cameraActive\"></video>\n      <canvas #canvas [hidden]=\"!isCaptured || cameraActive\"></canvas>\n      @if (keptVideoUrl(); as videoUrl) {\n        <video controls [src]=\"videoUrl\"></video>\n      }\n      @if (cameraError()) {\n        <p class=\"message cameraErrorMessage\">{{ texts().cameraError }}</p>\n      } @else if (capturedCaption(); as caption) {\n        <p class=\"message capturedCaption\">{{ caption }}</p>\n      } @else if (isRecording) {\n        <p class=\"message recordingMessage\">{{ recordingCaption() }}</p>\n      } @else if (isSwitchOnHintShown()) {\n        @if (mode() === 'VIDEO') {\n          <p class=\"message\">{{ texts().switchOnForVideo }}</p>\n        } @else {\n          <p class=\"message\">{{ texts().switchOnCameraHint }}</p>\n        }\n      }\n      @if (actionsInHost()) {\n        <ng-container [ngTemplateOutlet]=\"cameraSwitch\" />\n      }\n    </div>\n    @if (!actionsInHost()) {\n      <div class=\"controls\">\n        <ng-container [ngTemplateOutlet]=\"cameraSwitch\" />\n        <ng-container [ngTemplateOutlet]=\"actionButtons\" />\n        @if (mode() === 'VIDEO' && !keptFiles()) {\n          <!-- PICK VIDEO FILE -->\n          <input\n            #fileInput\n            type=\"file\"\n            accept=\"video/*\"\n            (change)=\"onFileSelected($event)\"\n            style=\"display: none\"\n            />\n          <ui-action-button\n            class=\"pickVideoButton\"\n            [disabled]=\"isRecording\"\n            [descriptor]=\"pickVideoButton()\"\n            (actionClick)=\"fileInput.click()\"\n            >\n          </ui-action-button>\n        }\n      </div>\n    }\n  </div>\n}\n\n<ng-template #cameraSwitch>\n  @if (isCameraSwitchShown()) {\n    <!-- START CAMERA -->\n    <ui-action-button\n      class=\"toggleCameraButton\"\n      [disabled]=\"isRecording\"\n      [descriptor]=\"toggleCameraButton()\"\n      (actionClick)=\"toggleCamera()\"\n      >\n    </ui-action-button>\n  }\n</ng-template>\n\n<ng-template #actionButtons>\n  @if (keptFiles()) {\n    <ui-action-button\n      class=\"retakeButton\"\n      [descriptor]=\"retakeButton()\"\n      (actionClick)=\"retakeCapture()\"\n      >\n    </ui-action-button>\n    <ui-action-button\n      class=\"useButton\"\n      [descriptor]=\"useButton()\"\n      (actionClick)=\"useCapture()\"\n      >\n    </ui-action-button>\n  } @else if (mode() === 'VIDEO') {\n    <!-- RECORD / STOP VIDEO -->\n    @if (isRecording) {\n      <ui-action-button\n        class=\"stopRecordingButton\"\n        [descriptor]=\"stopRecordingButton()\"\n        (actionClick)=\"stopRecording()\"\n        >\n      </ui-action-button>\n    } @else {\n      <ui-action-button\n        class=\"startRecordingButton\"\n        [disabled]=\"!cameraActive\"\n        [descriptor]=\"startRecordingButton()\"\n        (actionClick)=\"startRecording()\"\n        >\n      </ui-action-button>\n    }\n  } @else {\n    <!-- CAPTURE CAMERA -->\n    <ui-action-button\n      class=\"capturePhotoButton\"\n      [disabled]=\"!cameraActive\"\n      [descriptor]=\"captureButton()\"\n      (actionClick)=\"capturePhoto()\"\n      >\n    </ui-action-button>\n  }\n</ng-template>\n", styles: [".photoWidgetContainer{border-radius:5px;width:100%;max-width:100%;display:flex;flex-direction:column;justify-content:center;border:1px solid #dee2e6}.message{text-align:center;color:#6b7280}video,canvas{border-top-right-radius:5px;border-top-left-radius:5px;width:100%}.controls{padding:.5rem;display:flex;gap:1rem;flex-direction:row;justify-content:center;background:#f8f9fa;border-top:1px solid #dee2e6;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.controls ::ng-deep button{border-radius:3px}.cameraStage{display:contents}.actionsInHost{border:unset}.actionsInHost .cameraStage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;aspect-ratio:16 / 9;overflow:hidden;border-radius:4px;--stage-background: var( --capture-stage-background, color-mix(in srgb, var(--primary-color) 30%, black) );background:var(--stage-background);color:var(--capture-stage-text, color-mix(in srgb, var(--primary-color) 10%, white))}.actionsInHost .cameraStage video,.actionsInHost .cameraStage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:unset}.actionsInHost .toggleCameraButton ::ng-deep button{background:var(--color-surface)}.actionsInHost .message{margin:0;color:inherit}.actionsInHost .cameraErrorMessage{position:relative;color:color-mix(in srgb,var(--warn-color) 65%,white)}.actionsInHost .recordingMessage,.actionsInHost .capturedCaption{position:absolute;left:.5rem;top:.5rem;padding:.125rem .5rem;border-radius:.5rem;font-size:.75rem;font-weight:500}.actionsInHost .recordingMessage{background:color-mix(in srgb,var(--stage-background) 67%,transparent);font-family:monospace}.actionsInHost .capturedCaption{background:color-mix(in srgb,var(--success-color) 50%,black)}.actionsInHost .recordingMessage:before{content:\"\";display:inline-block;width:.5rem;height:.5rem;margin-right:.3125rem;border-radius:50%;background:var(--warn-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PhotoCaptureWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'photo-capture-widget', imports: [UiActionButtonComponent], template: "<div class=\"photoWidgetContainer\">\n  @if (!isMobile()) {\n    <video #video autoplay [hidden]=\"isCaptured || !cameraActive\"></video>\n    <canvas #canvas [hidden]=\"!isCaptured || cameraActive\"></canvas>\n    @if (!cameraActive && !isCaptured) {\n      <p class=\"message\">Kapcsolja be a kamer\u00E1t a k\u00E9p k\u00E9sz\u00EDt\u00E9s\u00E9hez!</p>\n    }\n    <div class=\"controls\">\n      <!-- START CAMERA -->\n      <ui-action-button [descriptor]=\"toggleCameraButton\" (actionClick)=\"toggleCamera()\">\n      </ui-action-button>\n      <!-- CAPTURE CAMERA -->\n      <ui-action-button\n        [disabled]=\"!cameraActive\"\n        [descriptor]=\"captureButton\"\n        (actionClick)=\"capturePhoto()\"\n        >\n      </ui-action-button>\n    </div>\n  }\n\n  @if (isMobile()) {\n    <div class=\"controls\">\n      <input\n        #fileInput\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none\"\n        />\n      <ui-action-button [descriptor]=\"captureButton\" (actionClick)=\"fileInput.click()\">\n      </ui-action-button>\n    </div>\n  }\n</div>\n", styles: [".photoWidgetContainer{border-radius:5px;width:100%;max-width:100%;display:flex;flex-direction:column;justify-content:center;border:1px solid #dee2e6}.message{text-align:center;color:#6b7280}video,canvas{border-top-right-radius:5px;border-top-left-radius:5px;width:100%}.controls{padding:.5rem;display:flex;gap:1rem;flex-direction:row;justify-content:center;background:#f8f9fa;border-top:1px solid #dee2e6;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.controls ::ng-deep button{border-radius:3px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { videoRef: [{
+            args: [{ selector: 'photo-capture-widget', imports: [NgTemplateOutlet, UiActionButtonComponent], template: "@if (isMobile()) {\n  <input\n    #fileInput\n    type=\"file\"\n    [accept]=\"mode() === 'VIDEO' ? 'video/*' : 'image/*'\"\n    capture=\"environment\"\n    (change)=\"onFileSelected($event)\"\n    style=\"display: none\"\n    />\n  @if (!externalTrigger()) {\n    <div class=\"photoWidgetContainer\">\n      <div class=\"controls\">\n        <ui-action-button [descriptor]=\"captureButton()\" (actionClick)=\"fileInput.click()\">\n        </ui-action-button>\n      </div>\n    </div>\n  }\n} @else if (!externalTrigger() || isPanelOpen()) {\n  <div class=\"photoWidgetContainer\" [class.actionsInHost]=\"actionsInHost()\">\n    <div class=\"cameraStage\">\n      <video #video autoplay [muted]=\"true\" [hidden]=\"isCaptured || !cameraActive\"></video>\n      <canvas #canvas [hidden]=\"!isCaptured || cameraActive\"></canvas>\n      @if (keptVideoUrl(); as videoUrl) {\n        <video controls [src]=\"videoUrl\"></video>\n      }\n      @if (cameraError()) {\n        <p class=\"message cameraErrorMessage\">{{ texts().cameraError }}</p>\n      } @else if (capturedCaption(); as caption) {\n        <p class=\"message capturedCaption\">{{ caption }}</p>\n      } @else if (isRecording) {\n        <p class=\"message recordingMessage\">{{ recordingCaption() }}</p>\n      } @else if (isSwitchOnHintShown()) {\n        @if (mode() === 'VIDEO') {\n          <p class=\"message\">{{ texts().switchOnForVideo }}</p>\n        } @else {\n          <p class=\"message\">{{ texts().switchOnCameraHint }}</p>\n        }\n      }\n      @if (actionsInHost()) {\n        <ng-container [ngTemplateOutlet]=\"cameraSwitch\" />\n      }\n    </div>\n    @if (!actionsInHost()) {\n      <div class=\"controls\">\n        <ng-container [ngTemplateOutlet]=\"cameraSwitch\" />\n        <ng-container [ngTemplateOutlet]=\"actionButtons\" />\n        @if (mode() === 'VIDEO' && !keptFiles()) {\n          <!-- PICK VIDEO FILE -->\n          <input\n            #fileInput\n            type=\"file\"\n            accept=\"video/*\"\n            (change)=\"onFileSelected($event)\"\n            style=\"display: none\"\n            />\n          <ui-action-button\n            class=\"pickVideoButton\"\n            [disabled]=\"isRecording\"\n            [descriptor]=\"pickVideoButton()\"\n            (actionClick)=\"fileInput.click()\"\n            >\n          </ui-action-button>\n        }\n      </div>\n    }\n  </div>\n}\n\n<ng-template #cameraSwitch>\n  @if (isCameraSwitchShown()) {\n    <!-- START CAMERA -->\n    <ui-action-button\n      class=\"toggleCameraButton\"\n      [disabled]=\"isRecording\"\n      [descriptor]=\"toggleCameraButton()\"\n      (actionClick)=\"toggleCamera()\"\n      >\n    </ui-action-button>\n  }\n</ng-template>\n\n<ng-template #actionButtons>\n  @if (keptFiles()) {\n    <ui-action-button\n      class=\"retakeButton\"\n      [descriptor]=\"retakeButton()\"\n      (actionClick)=\"retakeCapture()\"\n      >\n    </ui-action-button>\n    <ui-action-button\n      class=\"useButton\"\n      [descriptor]=\"useButton()\"\n      (actionClick)=\"useCapture()\"\n      >\n    </ui-action-button>\n  } @else if (mode() === 'VIDEO') {\n    <!-- RECORD / STOP VIDEO -->\n    @if (isRecording) {\n      <ui-action-button\n        class=\"stopRecordingButton\"\n        [descriptor]=\"stopRecordingButton()\"\n        (actionClick)=\"stopRecording()\"\n        >\n      </ui-action-button>\n    } @else {\n      <ui-action-button\n        class=\"startRecordingButton\"\n        [disabled]=\"!cameraActive\"\n        [descriptor]=\"startRecordingButton()\"\n        (actionClick)=\"startRecording()\"\n        >\n      </ui-action-button>\n    }\n  } @else {\n    <!-- CAPTURE CAMERA -->\n    <ui-action-button\n      class=\"capturePhotoButton\"\n      [disabled]=\"!cameraActive\"\n      [descriptor]=\"captureButton()\"\n      (actionClick)=\"capturePhoto()\"\n      >\n    </ui-action-button>\n  }\n</ng-template>\n", styles: [".photoWidgetContainer{border-radius:5px;width:100%;max-width:100%;display:flex;flex-direction:column;justify-content:center;border:1px solid #dee2e6}.message{text-align:center;color:#6b7280}video,canvas{border-top-right-radius:5px;border-top-left-radius:5px;width:100%}.controls{padding:.5rem;display:flex;gap:1rem;flex-direction:row;justify-content:center;background:#f8f9fa;border-top:1px solid #dee2e6;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.controls ::ng-deep button{border-radius:3px}.cameraStage{display:contents}.actionsInHost{border:unset}.actionsInHost .cameraStage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;aspect-ratio:16 / 9;overflow:hidden;border-radius:4px;--stage-background: var( --capture-stage-background, color-mix(in srgb, var(--primary-color) 30%, black) );background:var(--stage-background);color:var(--capture-stage-text, color-mix(in srgb, var(--primary-color) 10%, white))}.actionsInHost .cameraStage video,.actionsInHost .cameraStage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:unset}.actionsInHost .toggleCameraButton ::ng-deep button{background:var(--color-surface)}.actionsInHost .message{margin:0;color:inherit}.actionsInHost .cameraErrorMessage{position:relative;color:color-mix(in srgb,var(--warn-color) 65%,white)}.actionsInHost .recordingMessage,.actionsInHost .capturedCaption{position:absolute;left:.5rem;top:.5rem;padding:.125rem .5rem;border-radius:.5rem;font-size:.75rem;font-weight:500}.actionsInHost .recordingMessage{background:color-mix(in srgb,var(--stage-background) 67%,transparent);font-family:monospace}.actionsInHost .capturedCaption{background:color-mix(in srgb,var(--success-color) 50%,black)}.actionsInHost .recordingMessage:before{content:\"\";display:inline-block;width:.5rem;height:.5rem;margin-right:.3125rem;border-radius:50%;background:var(--warn-color)}\n"] }]
+        }], propDecorators: { videoRef: [{
                 type: ViewChild,
                 args: ['video']
             }], canvasRef: [{
@@ -9438,20 +9869,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }], fileInputRef: [{
                 type: ViewChild,
                 args: ['fileInput']
-            }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], photoCaptured: [{ type: i0.Output, args: ["photoCaptured"] }] } });
+            }], actionButtonsTemplate: [{ type: i0.ViewChild, args: ['actionButtons', { isSignal: true }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], externalTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalTrigger", required: false }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: false }] }], deviceStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "deviceStart", required: false }] }], handover: [{ type: i0.Input, args: [{ isSignal: true, alias: "handover", required: false }] }], actionsInHost: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsInHost", required: false }] }], photoCaptured: [{ type: i0.Output, args: ["photoCaptured"] }] } });
 
 class VoiceRecordWidgetComponent {
     constructor() {
         this.ngZone = inject(NgZone);
         this.changeDetectorRef = inject(ChangeDetectorRef);
+        /** The stop and save buttons, for a host that draws them itself. */
+        this.actionButtonsTemplate = viewChild('actionButtons', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionButtonsTemplate" }] : /* istanbul ignore next */ []));
         this.openDirection = input('RIGHT', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "openDirection" }] : /* istanbul ignore next */ []));
+        /** The zone's texts, the microphone error line's among them. */
+        this.texts = input(UPLOAD_ZONE_DEFAULT_TEXTS, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
+        /** True in the upload zone only; the deprecated recordingUploader shows no error line. */
+        this.showMicrophoneError = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showMicrophoneError" }] : /* istanbul ignore next */ []));
+        /** AUTO starts the recording when the widget opens, MANUAL at the microphone button. */
+        this.deviceStart = input(CaptureDeviceStart.MANUAL, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deviceStart" }] : /* istanbul ignore next */ []));
+        /** CONFIRM keeps a stopped recording for playback and save, IMMEDIATE hands it over. */
+        this.handover = input(CaptureHandover.CONFIRM, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handover" }] : /* istanbul ignore next */ []));
+        /** True under the zone's Capture Settings; everywhere else the save stays an icon. */
+        this.showSaveTitle = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSaveTitle" }] : /* istanbul ignore next */ []));
+        /** True in a host that draws actionButtonsTemplate: the strip keeps no save of its own. */
+        this.actionsInHost = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsInHost" }] : /* istanbul ignore next */ []));
         this.recordingSaved = output();
-        this.isRecording = false;
-        this.recordedBlob = null;
+        /** Signals, as the host reads them through isCaptureUnderWay and actionButtonsTemplate. */
+        this.isRecording = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRecording" }] : /* istanbul ignore next */ []));
+        this.recordedBlob = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recordedBlob" }] : /* istanbul ignore next */ []));
+        /** True while a host may not lose the capture by accident: the microphone is asked for, the
+         * recording runs or waits for the save. */
+        this.isCaptureUnderWay = computed(() => this.isRecording() || !!this.recordedBlob(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCaptureUnderWay" }] : /* istanbul ignore next */ []));
         this.time = '00:00';
         this.isPlaying = false;
         this.isWaveformOpen = false;
+        /** Set when the browser gives no microphone, until the next start. */
+        this.microphoneError = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "microphoneError" }] : /* istanbul ignore next */ []));
         this.micButton = {
             title: '',
             type: UiActionButtonType.ICON,
@@ -9467,6 +9929,9 @@ class VoiceRecordWidgetComponent {
             iconColor: 'red',
             color: 'primary',
         };
+        /** Only a theme colour's name paints the icon: the deprecated recorder keeps its look. */
+        this.effectiveStopButton = computed(() => this.actionsInHost() ? { ...this.stopButton, color: 'warn', iconColor: 'warn' } : this.stopButton, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveStopButton" }] : /* istanbul ignore next */ []));
         this.saveButton = {
             title: '',
             type: UiActionButtonType.ICON,
@@ -9474,6 +9939,18 @@ class VoiceRecordWidgetComponent {
             iconPosition: IconPosition.PRE,
             color: 'primary',
         };
+        this.effectiveSaveButton = computed(() => this.showSaveTitle()
+            ? { ...this.saveButton, title: this.texts().save, type: UiActionButtonType.RAISED }
+            : this.saveButton, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveSaveButton" }] : /* istanbul ignore next */ []));
+        this.stopRecordingButton = computed(() => ({
+            title: this.texts().stopRecording,
+            type: UiActionButtonType.RAISED,
+            icon: 'stop',
+            iconPosition: IconPosition.PRE,
+            color: 'warn',
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stopRecordingButton" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         this.playButton = {
@@ -9488,10 +9965,14 @@ class VoiceRecordWidgetComponent {
             type: UiActionButtonType.ICON,
             icon: 'stop_circle',
             iconPosition: IconPosition.PRE,
-            color: 'red',
+            color: this.actionsInHost() ? 'warn' : 'red',
         };
     }
-    ngAfterViewInit() { }
+    ngAfterViewInit() {
+        if (this.deviceStart() === CaptureDeviceStart.AUTO) {
+            this.requestRecording();
+        }
+    }
     get isLeftDirection() {
         return this.openDirection() === 'LEFT';
     }
@@ -9500,12 +9981,16 @@ class VoiceRecordWidgetComponent {
             return;
         }
         await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+        if (!this.pendingStart) {
+            return;
+        }
         this.waveformRef.nativeElement.style.padding = '0.1rem';
         this.initWaveSurfer();
     }
     initWaveSurfer() {
         let body = document.querySelector('body');
-        let primaryColor = getComputedStyle(document.documentElement)
+        // A host theme sets the token on the body, which the element inherits and html does not see.
+        let primaryColor = getComputedStyle(this.actionsInHost() ? this.waveformRef.nativeElement : document.documentElement)
             .getPropertyValue('--primary-color')
             .trim();
         let el = this.mainButton.nativeElement.querySelector('.sb4-primary');
@@ -9521,15 +10006,15 @@ class VoiceRecordWidgetComponent {
             barRadius: 5,
         });
         this.wavesurfer.setVolume(1);
-        //So we support Safari
-        const mimeType = MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : 'audio/mp4';
-        this.record = this.wavesurfer.registerPlugin(RecordPlugin.create({
+        const mimeType = UploadWidgetUtils.chooseRecorderMimeType('audio');
+        const record = this.wavesurfer.registerPlugin(RecordPlugin.create({
             renderRecordedAudio: true,
             scrollingWaveform: true,
             continuousWaveform: false,
             continuousWaveformDuration: 15,
             mimeType,
         }));
+        this.record = record;
         this.wavesurfer.on('dblclick', () => {
             this.updateViewState(() => {
                 this.wavesurfer?.play();
@@ -9537,10 +10022,16 @@ class VoiceRecordWidgetComponent {
             });
         });
         this.record.on('record-end', (blob) => {
+            if (record !== this.record) {
+                return;
+            }
             this.updateViewState(() => {
-                this.recordedBlob = blob;
-                this.isRecording = false;
+                this.recordedBlob.set(blob);
+                this.isRecording.set(false);
             });
+            if (this.handover() === CaptureHandover.IMMEDIATE) {
+                this.saveRecording();
+            }
         });
         this.record.on('record-progress', (time) => {
             this.updateViewState(() => {
@@ -9553,32 +10044,57 @@ class VoiceRecordWidgetComponent {
             });
         });
     }
+    /** Starts from a click or on open: a refused microphone shows its error line, no rejection. */
+    requestRecording() {
+        this.startRecording().catch(() => { });
+    }
     async startRecording() {
         const confirmed = this.checkHasRecorded();
-        if (!confirmed || this.isRecording)
+        if (!confirmed || this.isRecording())
             return;
+        const start = {};
+        this.pendingStart = start;
         // Initialize first (still within the gesture tick on most browsers)
         await this.initializeWaveSurferIfNeeded();
-        if (!this.record)
+        if (this.pendingStart !== start) {
+            return;
+        }
+        const record = this.record;
+        if (!record)
             throw new Error('Voice recorder plugin is not initialized.');
         this.updateViewState(() => {
+            this.microphoneError.set(false);
             this.isWaveformOpen = true;
-            this.isRecording = true;
+            this.isRecording.set(true);
             this.isPlaying = false;
-            this.recordedBlob = null;
+            this.recordedBlob.set(null);
             this.time = '00:00';
         });
         try {
             // Force native mic permission first so it works with WKWebView
             const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
             stream.getTracks().forEach((track) => track.stop());
-            await this.record.startRecording();
+            if (this.pendingStart !== start) {
+                return;
+            }
+            await record.startRecording();
+            if (this.pendingStart !== start) {
+                record.stopRecording();
+                record.stopMic();
+                return;
+            }
+            this.pendingStart = undefined;
         }
         catch (error) {
+            if (this.pendingStart !== start) {
+                return;
+            }
             console.error('Mic failed', error);
+            this.pendingStart = undefined;
             this.updateViewState(() => {
-                this.isRecording = false;
-                this.isWaveformOpen = !!this.recordedBlob;
+                this.isRecording.set(false);
+                this.isWaveformOpen = !!this.recordedBlob();
+                this.microphoneError.set(true);
             });
             throw error;
         }
@@ -9589,40 +10105,53 @@ class VoiceRecordWidgetComponent {
      * Kept, rather than inlined away, so the place stays visible; see A37.
      */
     checkHasRecorded() {
-        if (this.recordedBlob) {
+        if (this.recordedBlob()) {
         }
         return true;
     }
     updateProgress(time) {
-        let formattedTime = [Math.floor((time % 3600000) / 60000), Math.floor((time % 60000) / 1000)]
-            .map((v) => (v < 10 ? '0' + v : v))
-            .join(':');
-        this.time = formattedTime;
+        this.time = UploadWidgetUtils.formatDuration(time);
     }
     stopRecording() {
-        if (this.record && this.isRecording) {
+        if (this.pendingStart) {
+            this.cancelPendingStart();
+        }
+        else if (this.record && this.isRecording()) {
             this.record.stopRecording();
             this.updateViewState(() => {
-                this.isRecording = false;
+                this.isRecording.set(false);
             });
         }
     }
+    /** A stop before the recording runs has nothing to keep: the strip goes back to idle. */
+    cancelPendingStart() {
+        this.pendingStart = undefined;
+        this.destroyRecorder();
+        this.updateViewState(() => {
+            this.isRecording.set(false);
+            this.isWaveformOpen = false;
+        });
+    }
+    /** The plugin's destroy alone closes a running microphone's AudioContext twice, which rejects;
+     * after the stop and the stopMic it has nothing left to close. */
+    destroyRecorder() {
+        const wavesurfer = this.wavesurfer;
+        const record = this.record;
+        this.wavesurfer = undefined;
+        this.record = undefined;
+        record?.stopRecording();
+        record?.stopMic();
+        wavesurfer?.destroy();
+    }
     saveRecording() {
-        if (this.recordedBlob) {
-            let now = new Date();
-            let formattedDate = now.toLocaleString('sv-SE').replace(' ', '_').replace(/:/g, '-');
-            //Safari support
-            let mimeType = this.recordedBlob.type || 'audio/mp4';
-            let ext = mimeType.includes('webm') ? 'webm' : 'mp4';
-            let fileName = `recording_${formattedDate}.${ext}`;
-            let file = new File([this.recordedBlob], fileName, { type: mimeType });
+        const recordedBlob = this.recordedBlob();
+        if (recordedBlob) {
+            const file = UploadWidgetUtils.createRecordingFile(recordedBlob, 'recording', 'audio/mp4');
             this.recordingSaved.emit(file);
             // Destroy completely so next recording initializes fresh
-            this.wavesurfer?.destroy();
-            this.wavesurfer = undefined;
-            this.record = undefined;
+            this.destroyRecorder();
             this.updateViewState(() => {
-                this.recordedBlob = null;
+                this.recordedBlob.set(null);
                 this.time = '00:00';
                 this.isPlaying = false;
                 this.isWaveformOpen = false;
@@ -9630,7 +10159,7 @@ class VoiceRecordWidgetComponent {
         }
     }
     replayRecording() {
-        if (this.recordedBlob) {
+        if (this.recordedBlob()) {
             this.updateViewState(() => {
                 this.isPlaying = !this.isPlaying;
                 this.wavesurfer?.playPause();
@@ -9638,9 +10167,8 @@ class VoiceRecordWidgetComponent {
         }
     }
     ngOnDestroy() {
-        if (this.wavesurfer) {
-            this.wavesurfer.destroy();
-        }
+        this.pendingStart = undefined;
+        this.destroyRecorder();
     }
     addAlphaToColor(hexColor, alpha) {
         if (/^#([a-f\d])([a-f\d])([a-f\d])$/i.test(hexColor)) {
@@ -9670,29 +10198,136 @@ class VoiceRecordWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VoiceRecordWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: VoiceRecordWidgetComponent, isStandalone: true, selector: "voice-record-widget", inputs: { openDirection: { classPropertyName: "openDirection", publicName: "openDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordingSaved: "recordingSaved" }, viewQueries: [{ propertyName: "waveformRef", first: true, predicate: ["waveform"], descendants: true }, { propertyName: "mainButton", first: true, predicate: ["mainButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"recorderContainer\"\n  [class.direction-left]=\"isLeftDirection\"\n  [class.direction-right]=\"!isLeftDirection\"\n  [class.active]=\"isWaveformOpen || isRecording || !!recordedBlob\"\n  [class.isRecording]=\"isRecording\"\n  [class.hasRecording]=\"recordedBlob\"\n  >\n  <div class=\"recorderMain\">\n    <div class=\"recorderToolbar\">\n      <!-- Start Recording -->\n      @if (!isRecording) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"micButton\"\n          (actionClick)=\"startRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Stop Recording -->\n      @if (isRecording) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"stopButton\"\n          (actionClick)=\"stopRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Save Recording -->\n      @if (recordedBlob) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"saveButton\"\n          (actionClick)=\"saveRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Start Play  -->\n      @if (recordedBlob && !isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"playButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      <!-- Stop Play  -->\n      @if (recordedBlob && isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"stopPlaybackButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      @if (isRecording) {\n        <div class=\"progress\">{{ time }}</div>\n      }\n    </div>\n\n    <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording || !!recordedBlob\">\n      <div class=\"waveformGrid\"></div>\n      <div class=\"waveform\" #waveform></div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{background-color:transparent;display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: VoiceRecordWidgetComponent, isStandalone: true, selector: "voice-record-widget", inputs: { openDirection: { classPropertyName: "openDirection", publicName: "openDirection", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, showMicrophoneError: { classPropertyName: "showMicrophoneError", publicName: "showMicrophoneError", isSignal: true, isRequired: false, transformFunction: null }, deviceStart: { classPropertyName: "deviceStart", publicName: "deviceStart", isSignal: true, isRequired: false, transformFunction: null }, handover: { classPropertyName: "handover", publicName: "handover", isSignal: true, isRequired: false, transformFunction: null }, showSaveTitle: { classPropertyName: "showSaveTitle", publicName: "showSaveTitle", isSignal: true, isRequired: false, transformFunction: null }, actionsInHost: { classPropertyName: "actionsInHost", publicName: "actionsInHost", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordingSaved: "recordingSaved" }, host: { properties: { "class.actionsInHost": "actionsInHost()" } }, viewQueries: [{ propertyName: "actionButtonsTemplate", first: true, predicate: ["actionButtons"], descendants: true, isSignal: true }, { propertyName: "waveformRef", first: true, predicate: ["waveform"], descendants: true }, { propertyName: "mainButton", first: true, predicate: ["mainButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"recorderContainer\"\n  [class.direction-left]=\"isLeftDirection\"\n  [class.direction-right]=\"!isLeftDirection\"\n  [class.active]=\"isWaveformOpen || isRecording() || !!recordedBlob()\"\n  [class.isRecording]=\"isRecording()\"\n  [class.hasRecording]=\"recordedBlob()\"\n  >\n  <div class=\"recorderMain\">\n    <div class=\"recorderToolbar\">\n      <!-- Start Recording -->\n      @if (!isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"micButton\"\n          (actionClick)=\"requestRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Stop Recording -->\n      @if (isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"effectiveStopButton()\"\n          (actionClick)=\"stopRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Save Recording -->\n      @if (recordedBlob() && !actionsInHost()) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"effectiveSaveButton()\"\n          (actionClick)=\"saveRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Start Play  -->\n      @if (recordedBlob() && !isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"playButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      <!-- Stop Play  -->\n      @if (recordedBlob() && isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"stopPlaybackButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      @if (isRecording()) {\n        <div class=\"progress\">{{ time }}</div>\n      }\n    </div>\n\n    <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording() || !!recordedBlob()\">\n      <div class=\"waveformGrid\"></div>\n      <div class=\"waveform\" #waveform></div>\n    </div>\n  </div>\n</div>\n@if (showMicrophoneError() && microphoneError()) {\n  <p class=\"message\">{{ texts().microphoneError }}</p>\n  @if (actionsInHost()) {\n    <p class=\"hint\">{{ texts().microphoneRetryHint }}</p>\n  }\n}\n@if (actionsInHost() && recordedBlob()) {\n  <p class=\"hint\">{{ texts().recordingHint }}</p>\n}\n\n<ng-template #actionButtons>\n  @if (isRecording()) {\n    <ui-action-button\n      class=\"stopRecordingButton\"\n      [descriptor]=\"stopRecordingButton()\"\n      (actionClick)=\"stopRecording()\"\n      >\n    </ui-action-button>\n  }\n  @if (recordedBlob()) {\n    <ui-action-button\n      class=\"saveRecordingButton\"\n      [descriptor]=\"effectiveSaveButton()\"\n      (actionClick)=\"saveRecording()\"\n      >\n    </ui-action-button>\n  }\n</ng-template>\n", styles: [":host{display:block;width:100%;min-width:0}.message{text-align:center;color:#6b7280}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{background-color:transparent;display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}:host(.actionsInHost) .message{color:var(--warn-color)}:host(.actionsInHost) .hint{margin:.5rem 0 0;text-align:center;font-size:.75rem;color:var(--color-text-muted)}:host(.actionsInHost) .progress{color:var(--color-text-muted)}:host(.actionsInHost) .isRecording .progress:before{content:\"\";display:inline-block;width:.5rem;height:.5rem;margin-right:.3125rem;border-radius:50%;background:var(--warn-color)}:host(.actionsInHost) .active ::ng-deep .recorderToolbar{border-color:var(--color-border)}:host(.actionsInHost) .waveformGrid{border-color:var(--color-border);background:repeating-linear-gradient(to right,color-mix(in srgb,var(--color-text-muted) 35%,transparent) 0,color-mix(in srgb,var(--color-text-muted) 35%,transparent) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,color-mix(in srgb,var(--color-text-muted) 8%,transparent),color-mix(in srgb,var(--color-text-muted) 2%,transparent))}:host(.actionsInHost) .recorderToolbar ::ng-deep .sb4-warn,:host(.actionsInHost) .recorderToolbar ::ng-deep .sb4-primary,:host(.actionsInHost) .recorderToolbar ::ng-deep ui-action-button{border:unset}:host(.actionsInHost) .mainButton ::ng-deep .sb4-warn{padding:.5rem .75rem}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VoiceRecordWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'voice-record-widget', imports: [UiActionButtonComponent], template: "<div\n  class=\"recorderContainer\"\n  [class.direction-left]=\"isLeftDirection\"\n  [class.direction-right]=\"!isLeftDirection\"\n  [class.active]=\"isWaveformOpen || isRecording || !!recordedBlob\"\n  [class.isRecording]=\"isRecording\"\n  [class.hasRecording]=\"recordedBlob\"\n  >\n  <div class=\"recorderMain\">\n    <div class=\"recorderToolbar\">\n      <!-- Start Recording -->\n      @if (!isRecording) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"micButton\"\n          (actionClick)=\"startRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Stop Recording -->\n      @if (isRecording) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"stopButton\"\n          (actionClick)=\"stopRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Save Recording -->\n      @if (recordedBlob) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"saveButton\"\n          (actionClick)=\"saveRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Start Play  -->\n      @if (recordedBlob && !isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"playButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      <!-- Stop Play  -->\n      @if (recordedBlob && isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"stopPlaybackButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      @if (isRecording) {\n        <div class=\"progress\">{{ time }}</div>\n      }\n    </div>\n\n    <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording || !!recordedBlob\">\n      <div class=\"waveformGrid\"></div>\n      <div class=\"waveform\" #waveform></div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{background-color:transparent;display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}\n"] }]
+            args: [{ selector: 'voice-record-widget', imports: [UiActionButtonComponent], host: { '[class.actionsInHost]': 'actionsInHost()' }, template: "<div\n  class=\"recorderContainer\"\n  [class.direction-left]=\"isLeftDirection\"\n  [class.direction-right]=\"!isLeftDirection\"\n  [class.active]=\"isWaveformOpen || isRecording() || !!recordedBlob()\"\n  [class.isRecording]=\"isRecording()\"\n  [class.hasRecording]=\"recordedBlob()\"\n  >\n  <div class=\"recorderMain\">\n    <div class=\"recorderToolbar\">\n      <!-- Start Recording -->\n      @if (!isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"micButton\"\n          (actionClick)=\"requestRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Stop Recording -->\n      @if (isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"effectiveStopButton()\"\n          (actionClick)=\"stopRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Save Recording -->\n      @if (recordedBlob() && !actionsInHost()) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"effectiveSaveButton()\"\n          (actionClick)=\"saveRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Start Play  -->\n      @if (recordedBlob() && !isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"playButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      <!-- Stop Play  -->\n      @if (recordedBlob() && isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"stopPlaybackButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      @if (isRecording()) {\n        <div class=\"progress\">{{ time }}</div>\n      }\n    </div>\n\n    <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording() || !!recordedBlob()\">\n      <div class=\"waveformGrid\"></div>\n      <div class=\"waveform\" #waveform></div>\n    </div>\n  </div>\n</div>\n@if (showMicrophoneError() && microphoneError()) {\n  <p class=\"message\">{{ texts().microphoneError }}</p>\n  @if (actionsInHost()) {\n    <p class=\"hint\">{{ texts().microphoneRetryHint }}</p>\n  }\n}\n@if (actionsInHost() && recordedBlob()) {\n  <p class=\"hint\">{{ texts().recordingHint }}</p>\n}\n\n<ng-template #actionButtons>\n  @if (isRecording()) {\n    <ui-action-button\n      class=\"stopRecordingButton\"\n      [descriptor]=\"stopRecordingButton()\"\n      (actionClick)=\"stopRecording()\"\n      >\n    </ui-action-button>\n  }\n  @if (recordedBlob()) {\n    <ui-action-button\n      class=\"saveRecordingButton\"\n      [descriptor]=\"effectiveSaveButton()\"\n      (actionClick)=\"saveRecording()\"\n      >\n    </ui-action-button>\n  }\n</ng-template>\n", styles: [":host{display:block;width:100%;min-width:0}.message{text-align:center;color:#6b7280}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{background-color:transparent;display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}:host(.actionsInHost) .message{color:var(--warn-color)}:host(.actionsInHost) .hint{margin:.5rem 0 0;text-align:center;font-size:.75rem;color:var(--color-text-muted)}:host(.actionsInHost) .progress{color:var(--color-text-muted)}:host(.actionsInHost) .isRecording .progress:before{content:\"\";display:inline-block;width:.5rem;height:.5rem;margin-right:.3125rem;border-radius:50%;background:var(--warn-color)}:host(.actionsInHost) .active ::ng-deep .recorderToolbar{border-color:var(--color-border)}:host(.actionsInHost) .waveformGrid{border-color:var(--color-border);background:repeating-linear-gradient(to right,color-mix(in srgb,var(--color-text-muted) 35%,transparent) 0,color-mix(in srgb,var(--color-text-muted) 35%,transparent) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,color-mix(in srgb,var(--color-text-muted) 8%,transparent),color-mix(in srgb,var(--color-text-muted) 2%,transparent))}:host(.actionsInHost) .recorderToolbar ::ng-deep .sb4-warn,:host(.actionsInHost) .recorderToolbar ::ng-deep .sb4-primary,:host(.actionsInHost) .recorderToolbar ::ng-deep ui-action-button{border:unset}:host(.actionsInHost) .mainButton ::ng-deep .sb4-warn{padding:.5rem .75rem}\n"] }]
         }], propDecorators: { waveformRef: [{
                 type: ViewChild,
                 args: ['waveform']
             }], mainButton: [{
                 type: ViewChild,
                 args: ['mainButton', { read: ElementRef }]
-            }], openDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDirection", required: false }] }], recordingSaved: [{ type: i0.Output, args: ["recordingSaved"] }] } });
+            }], actionButtonsTemplate: [{ type: i0.ViewChild, args: ['actionButtons', { isSignal: true }] }], openDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDirection", required: false }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: false }] }], showMicrophoneError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMicrophoneError", required: false }] }], deviceStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "deviceStart", required: false }] }], handover: [{ type: i0.Input, args: [{ isSignal: true, alias: "handover", required: false }] }], showSaveTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSaveTitle", required: false }] }], actionsInHost: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsInHost", required: false }] }], recordingSaved: [{ type: i0.Output, args: ["recordingSaved"] }] } });
+
+/** The Capture Dialog of a File Field: closes with the files of a use or a save, else empty. */
+class CaptureDialogComponent {
+    constructor() {
+        this.dialogRef = inject(MatDialogRef);
+        this.data = inject(MAT_DIALOG_DATA);
+        this.isMicrophone = this.data.source === FileUploaderSource.MICROPHONE;
+        this.cameraMode = this.data.source === FileUploaderSource.CAMERA_VIDEO ? 'VIDEO' : 'PHOTO';
+        this.cameraWidget = viewChild(PhotoCaptureWidgetComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cameraWidget" }] : /* istanbul ignore next */ []));
+        this.recorderWidget = viewChild(VoiceRecordWidgetComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recorderWidget" }] : /* istanbul ignore next */ []));
+        this.captureWidget = computed(() => this.cameraWidget() ?? this.recorderWidget(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "captureWidget" }] : /* istanbul ignore next */ []));
+        /** The widget's buttons go to the footer of the dialog. */
+        this.actionButtons = computed(() => this.captureWidget()?.actionButtonsTemplate() ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionButtons" }] : /* istanbul ignore next */ []));
+        /** The recorder waits for the open: it reads the waveform's height from its rendered button. */
+        this.isOpened = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpened" }] : /* istanbul ignore next */ []));
+        this.closeButton = {
+            title: '',
+            type: UiActionButtonType.ICON,
+            icon: 'close',
+            iconPosition: IconPosition.PRE,
+            color: 'primary',
+        };
+        this.cancelButton = {
+            title: this.data.texts.cancel,
+            type: UiActionButtonType.FLAT,
+            color: 'primary',
+        };
+        effect(() => {
+            this.dialogRef.disableClose = this.captureWidget()?.isCaptureUnderWay() ?? false;
+        });
+        this.dialogRef.afterOpened().subscribe(() => this.isOpened.set(true));
+        // disableClose stops the keyboard too, but only the backdrop is meant to wait for the capture.
+        this.dialogRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape' && this.dialogRef.disableClose) {
+                this.discardCapture();
+            }
+        });
+    }
+    /** The close destroys the capture widget, which stops the device. */
+    discardCapture() {
+        this.dialogRef.close();
+    }
+    handOverCapture(files) {
+        this.dialogRef.close(files);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CaptureDialogComponent, isStandalone: true, selector: "smart-capture-dialog", viewQueries: [{ propertyName: "cameraWidget", first: true, predicate: PhotoCaptureWidgetComponent, descendants: true, isSignal: true }, { propertyName: "recorderWidget", first: true, predicate: VoiceRecordWidgetComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dialog-container captureDialog\">\n  <div class=\"dialog-header\">\n    <h2 class=\"dialog-title\">{{ data.content.title }}</h2>\n    <ui-action-button\n      class=\"closeCaptureButton\"\n      [descriptor]=\"closeButton\"\n      (actionClick)=\"discardCapture()\"\n    ></ui-action-button>\n  </div>\n\n  <mat-dialog-content class=\"dialog-content\">\n    @if (isMicrophone) {\n      <div class=\"recorderSlot\">\n        @if (isOpened()) {\n          <voice-record-widget\n            [deviceStart]=\"data.settings.deviceStart\"\n            [handover]=\"data.settings.handover\"\n            [actionsInHost]=\"true\"\n            [showSaveTitle]=\"true\"\n            [texts]=\"data.texts\"\n            [showMicrophoneError]=\"true\"\n            (recordingSaved)=\"handOverCapture([$event])\"\n          ></voice-record-widget>\n        }\n      </div>\n    } @else {\n      <photo-capture-widget\n        [mode]=\"cameraMode\"\n        [deviceStart]=\"data.settings.deviceStart\"\n        [handover]=\"data.settings.handover\"\n        [actionsInHost]=\"true\"\n        [texts]=\"data.texts\"\n        [maxFileSize]=\"data.maxFileSize\"\n        (photoCaptured)=\"handOverCapture($event)\"\n      ></photo-capture-widget>\n    }\n  </mat-dialog-content>\n\n  <div class=\"dialog-footer\">\n    <ui-action-button\n      class=\"cancelCaptureButton\"\n      [descriptor]=\"cancelButton\"\n      (actionClick)=\"discardCapture()\"\n    ></ui-action-button>\n    <ng-container [ngTemplateOutlet]=\"actionButtons()\" />\n  </div>\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".captureDialog{--sb4-dialog-default-padding: 1rem}.captureDialog .dialog-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem}.closeCaptureButton ::ng-deep button{width:40px;min-width:40px;height:40px;min-height:40px;padding:0}.captureDialog ::ng-deep .stopRecordingButton{--text-color: color-mix(in srgb, var(--warn-color) 5%, white)}photo-capture-widget{display:block;width:100%}.recorderSlot{min-height:3.25rem}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PhotoCaptureWidgetComponent, selector: "photo-capture-widget", inputs: ["maxFileSize", "mode", "externalTrigger", "texts", "deviceStart", "handover", "actionsInHost"], outputs: ["photoCaptured"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: ["openDirection", "texts", "showMicrophoneError", "deviceStart", "handover", "showSaveTitle", "actionsInHost"], outputs: ["recordingSaved"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-capture-dialog', imports: [
+                        MatDialogContent,
+                        NgTemplateOutlet,
+                        PhotoCaptureWidgetComponent,
+                        UiActionButtonComponent,
+                        VoiceRecordWidgetComponent,
+                    ], template: "<div class=\"dialog-container captureDialog\">\n  <div class=\"dialog-header\">\n    <h2 class=\"dialog-title\">{{ data.content.title }}</h2>\n    <ui-action-button\n      class=\"closeCaptureButton\"\n      [descriptor]=\"closeButton\"\n      (actionClick)=\"discardCapture()\"\n    ></ui-action-button>\n  </div>\n\n  <mat-dialog-content class=\"dialog-content\">\n    @if (isMicrophone) {\n      <div class=\"recorderSlot\">\n        @if (isOpened()) {\n          <voice-record-widget\n            [deviceStart]=\"data.settings.deviceStart\"\n            [handover]=\"data.settings.handover\"\n            [actionsInHost]=\"true\"\n            [showSaveTitle]=\"true\"\n            [texts]=\"data.texts\"\n            [showMicrophoneError]=\"true\"\n            (recordingSaved)=\"handOverCapture([$event])\"\n          ></voice-record-widget>\n        }\n      </div>\n    } @else {\n      <photo-capture-widget\n        [mode]=\"cameraMode\"\n        [deviceStart]=\"data.settings.deviceStart\"\n        [handover]=\"data.settings.handover\"\n        [actionsInHost]=\"true\"\n        [texts]=\"data.texts\"\n        [maxFileSize]=\"data.maxFileSize\"\n        (photoCaptured)=\"handOverCapture($event)\"\n      ></photo-capture-widget>\n    }\n  </mat-dialog-content>\n\n  <div class=\"dialog-footer\">\n    <ui-action-button\n      class=\"cancelCaptureButton\"\n      [descriptor]=\"cancelButton\"\n      (actionClick)=\"discardCapture()\"\n    ></ui-action-button>\n    <ng-container [ngTemplateOutlet]=\"actionButtons()\" />\n  </div>\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".captureDialog{--sb4-dialog-default-padding: 1rem}.captureDialog .dialog-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem}.closeCaptureButton ::ng-deep button{width:40px;min-width:40px;height:40px;min-height:40px;padding:0}.captureDialog ::ng-deep .stopRecordingButton{--text-color: color-mix(in srgb, var(--warn-color) 5%, white)}photo-capture-widget{display:block;width:100%}.recorderSlot{min-height:3.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { cameraWidget: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PhotoCaptureWidgetComponent), { isSignal: true }] }], recorderWidget: [{ type: i0.ViewChild, args: [i0.forwardRef(() => VoiceRecordWidgetComponent), { isSignal: true }] }] } });
+
+class CaptureDialogService extends SmartdialogService {
+    constructor() {
+        super(inject(MatDialog), inject(Injector));
+    }
+    /** The returned dialog closes with the handed over files, or empty at a discard. */
+    openCaptureDialog(data) {
+        return this.createDialogRef(data, CaptureDialogComponent, {
+            width: '560px',
+            maxWidth: '90vw',
+            autoFocus: 'dialog',
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureDialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
 class UploadWidgetComponent {
     constructor() {
+        this.captureDialogService = inject(CaptureDialogService);
         this.uploadDescriptor = input(this.defaultUploadDescriptor, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "uploadDescriptor" }] : /* istanbul ignore next */ []));
         this.isMultiple = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isMultiple" }] : /* istanbul ignore next */ []));
         this.isDisabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.sources = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sources" }] : /* istanbul ignore next */ []));
+        this.capture = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "capture" }] : /* istanbul ignore next */ []));
         this.uploadFilesEvent = output();
+        /** The Capture Settings in force: a missing bean or field takes its default here only. */
+        this.captureSettings = computed(() => {
+            const capture = this.capture();
+            return {
+                mode: capture?.mode ?? CaptureMode.DIALOG,
+                openDirection: capture?.openDirection ?? CaptureOpenDirection.RIGHT,
+                deviceStart: capture?.deviceStart ?? CaptureDeviceStart.AUTO,
+                handover: capture?.handover ?? CaptureHandover.CONFIRM,
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "captureSettings" }] : /* istanbul ignore next */ []));
         this.uploadWidgetType = UploadWidgetType;
+        this.fileUploaderSource = FileUploaderSource;
+        /** The recorder opens below the capture row at a click on the microphone button. */
+        this.isRecorderOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRecorderOpen" }] : /* istanbul ignore next */ []));
+        /** The descriptor's texts over the client's defaults, handed down to the capture widgets. */
+        this.texts = UPLOAD_ZONE_DEFAULT_TEXTS;
+        /** Cached per text set, so change detection hands each button the same descriptor. */
+        this.captureButtons = new Map();
         this.maxSizeMb = 25;
     }
     ngOnInit() {
@@ -9709,13 +10344,17 @@ class UploadWidgetComponent {
             this.fileFormats = [uploadDescriptor.formats];
         }
         // fileFormats = this.descriptor.upload?.formats;
+        this.texts = UploadWidgetUtils.resolveTexts(uploadDescriptor?.texts);
         this.i18n = {
-            addFile: uploadDescriptor?.title ?? 'Dokumentum hozzáadása',
-            browseOrDrag: uploadDescriptor?.description ?? 'tallózás vagy behúzás',
+            addFile: uploadDescriptor?.title ?? this.texts.addFile,
+            browseOrDrag: uploadDescriptor?.description ?? this.texts.browseOrDrag,
             formats: uploadDescriptor?.formats ?? '',
-            maxSize: `max. ${this.maxSizeMb} MB`,
-            upload: uploadDescriptor?.uploadButtonTitle ?? 'Feltöltés',
+            maxSize: UploadWidgetUtils.fillPlaceholders(this.texts.maxSize, { size: this.maxSizeMb }),
+            upload: uploadDescriptor?.uploadButtonTitle ?? this.texts.upload,
+            unsupportedFormat: this.texts.unsupportedFormat,
+            fileTooLarge: this.texts.fileTooLarge,
         };
+        this.captureButtons.clear();
     }
     upload(files) {
         this.uploadFilesEvent.emit({
@@ -9724,23 +10363,103 @@ class UploadWidgetComponent {
         });
         this.fileUploadMaterial.files = [];
     }
+    /** A captured file takes the picker's path: the same checks, the list or the upload. */
     uploadRecording(file) {
-        this.loadFilesIntoWidget([file]);
+        this.fileUploadMaterial.processFiles([file]);
     }
     uploadImage(files) {
-        this.loadFilesIntoWidget(files);
+        this.fileUploadMaterial.processFiles(files);
     }
-    loadFilesIntoWidget(files) {
-        if (this.autoUpload) {
-            this.uploadFilesEvent.emit({
-                files: files,
-                uploadDescriptor: this.uploadDescriptor(),
-            });
+    /** True when the sources decide the zone: they are set and not the default FILE alone beside
+     * uploadWidgets. */
+    hasSources() {
+        const sources = this.sources() ?? [];
+        const isDefaultOnly = sources.length === 1 && sources[0] === FileUploaderSource.FILE;
+        return !!sources.length && !(isDefaultOnly && !!this.uploadDescriptor()?.uploadWidgets?.length);
+    }
+    isSourceNeeded(source) {
+        return this.sources()?.includes(source) ?? false;
+    }
+    isPickerShown() {
+        return !this.hasSources() || this.isSourceNeeded(FileUploaderSource.FILE);
+    }
+    isCaptureOnly() {
+        return !this.isPickerShown();
+    }
+    /** Capture-only uploads at once whatever the descriptor says, as there is no upload button. */
+    isUploadImmediate() {
+        return !!this.autoUpload || this.isCaptureOnly();
+    }
+    getCaptureSources() {
+        return (this.sources() ?? []).filter((source) => source !== FileUploaderSource.FILE);
+    }
+    /** On a phone a camera button stays the device's own camera, whatever the Capture Mode says. */
+    startCapture(source) {
+        const camera = this.getCameraWidget(source);
+        if (this.captureSettings().mode === CaptureMode.DIALOG && !camera?.isMobile()) {
+            this.openCaptureDialog(source);
         }
-        else {
-            this.fileUploadMaterial.files.push(...files);
+        else if (camera) {
+            camera.openCapture();
+        }
+        else if (source === FileUploaderSource.MICROPHONE) {
+            this.isRecorderOpen.update((open) => !open);
         }
     }
+    getCameraWidget(source) {
+        if (source === FileUploaderSource.MICROPHONE) {
+            return undefined;
+        }
+        return source === FileUploaderSource.CAMERA_PHOTO ? this.photoCapture : this.videoCapture;
+    }
+    openCaptureDialog(source) {
+        this.captureDialogService
+            .openCaptureDialog({
+            size: {},
+            content: { title: this.texts[CAPTURE_BUTTONS[source].dialogTitle] },
+            source,
+            settings: this.captureSettings(),
+            texts: this.texts,
+            maxFileSize: source === FileUploaderSource.CAMERA_PHOTO ? this.getMaxFileSize() : undefined,
+        })
+            .afterClosed()
+            .subscribe((files) => {
+            if (files) {
+                this.uploadImage(files);
+            }
+        });
+    }
+    getMaxFileSize() {
+        return this.maxSizeMb * 1024 * 1024;
+    }
+    getCaptureButtonClass(source) {
+        return CAPTURE_BUTTONS[source].cssClass;
+    }
+    getCaptureButton(source) {
+        if (!this.captureButtons.has(source)) {
+            const button = CAPTURE_BUTTONS[source];
+            this.captureButtons.set(source, {
+                title: '',
+                type: UiActionButtonType.ICON,
+                icon: button.icon,
+                iconPosition: IconPosition.PRE,
+                color: 'primary',
+                tooltip: { tooltip: this.texts[button.tooltip] },
+            });
+        }
+        return this.captureButtons.get(source);
+    }
+    /** The hint of a capture-only zone names its sources, as the picker's lines name the files.
+     * Its grammar is owned by the captureOnlyHint and or texts. */
+    getCaptureOnlyHint() {
+        const nouns = this.getCaptureSources().map((source) => this.texts[CAPTURE_BUTTONS[source].noun]);
+        const last = nouns.pop();
+        const joined = nouns.length ? `${nouns.join(', ')} ${this.texts.or} ${last}` : last;
+        const hint = UploadWidgetUtils.fillPlaceholders(this.texts.captureOnlyHint, {
+            sources: joined,
+        });
+        return `${hint.charAt(0).toUpperCase()}${hint.slice(1)} · ${this.i18n?.maxSize}`;
+    }
     widgetNeeded(type) {
         return this.uploadDescriptor()?.uploadWidgets?.includes(type) ?? false;
     }
@@ -9749,26 +10468,175 @@ class UploadWidgetComponent {
     }
     get defaultUploadDescriptor() {
         return {
-            title: 'Dokumentum hozzáadása',
-            description: 'tallózás vagy behúzás',
+            title: UPLOAD_ZONE_DEFAULT_TEXTS.addFile,
+            description: UPLOAD_ZONE_DEFAULT_TEXTS.browseOrDrag,
             maxSize: '25',
             autoUpload: false,
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UploadWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UploadWidgetComponent, isStandalone: true, selector: "smart-upload-widget", inputs: { uploadDescriptor: { classPropertyName: "uploadDescriptor", publicName: "uploadDescriptor", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: true, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadFilesEvent: "uploadFilesEvent" }, viewQueries: [{ propertyName: "fileUploadMaterial", first: true, predicate: ["fileUploadMaterial"], descendants: true }], ngImport: i0, template: "<div class=\"sb4UploadWidget\">\n  <!-- IMAGE TYPE WIDGET -->\n  @if (widgetNeeded(uploadWidgetType.IMAGE) || widgetNeeded(uploadWidgetType.ALL)) {\n    <photo-capture-widget\n      [maxFileSize]=\"maxSizeMb * 1024 * 1024\"\n      (photoCaptured)=\"uploadImage($event)\"\n      >\n    </photo-capture-widget>\n  }\n\n  <!-- SOUND TYPE WIDGET -->\n  @if (widgetNeeded(uploadWidgetType.SOUND) || widgetNeeded(uploadWidgetType.ALL)) {\n    <voice-record-widget (recordingSaved)=\"uploadRecording($event)\"> </voice-record-widget>\n  }\n  <smartfileuploader\n    #fileUploadMaterial\n    [i18n]=\"i18n\"\n    [fileFormats]=\"fileFormats\"\n    [maxSizeMb]=\"maxSizeMb\"\n    [uploadCallback]=\"upload.bind(this)\"\n    [isMultiple]=\"isMultiple()\"\n    [autoUpload]=\"autoUpload\"\n    [isDisabled]=\"isDisabled()\"\n  ></smartfileuploader>\n</div>\n", styles: ["photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}voice-record-widget{padding:.5rem;border-bottom:1px solid #e5e7eb}voice-record-widget ::ng-deep .sb4-red,voice-record-widget ::ng-deep .sb4-primary,voice-record-widget ::ng-deep ui-action-button{border:unset!important}@media(max-width:900px){:host{width:100%}}\n"], dependencies: [{ kind: "component", type: PhotoCaptureWidgetComponent, selector: "photo-capture-widget", inputs: ["maxFileSize"], outputs: ["photoCaptured"] }, { kind: "component", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: ["openDirection"], outputs: ["recordingSaved"] }, { kind: "component", type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple", "autoUpload", "isDisabled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UploadWidgetComponent, isStandalone: true, selector: "smart-upload-widget", inputs: { uploadDescriptor: { classPropertyName: "uploadDescriptor", publicName: "uploadDescriptor", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: true, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, sources: { classPropertyName: "sources", publicName: "sources", isSignal: true, isRequired: false, transformFunction: null }, capture: { classPropertyName: "capture", publicName: "capture", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadFilesEvent: "uploadFilesEvent" }, viewQueries: [{ propertyName: "fileUploadMaterial", first: true, predicate: ["fileUploadMaterial"], descendants: true }, { propertyName: "photoCapture", first: true, predicate: ["photoCapture"], descendants: true }, { propertyName: "videoCapture", first: true, predicate: ["videoCapture"], descendants: true }], ngImport: i0, template: "<div class=\"sb4UploadWidget\">\n  @if (hasSources()) {\n    <!-- CAPTURE ROW OF THE SOURCES, hidden in view mode -->\n    @if (getCaptureSources().length && !isDisabled()) {\n      <div class=\"captureRow\" [class.captureOnly]=\"isCaptureOnly()\">\n        <div class=\"captureButtons\">\n          @for (source of getCaptureSources(); track source) {\n            <ui-action-button\n              class=\"{{ getCaptureButtonClass(source) }}\"\n              [descriptor]=\"getCaptureButton(source)\"\n              (actionClick)=\"startCapture(source)\"\n            ></ui-action-button>\n          }\n        </div>\n        @if (isCaptureOnly()) {\n          <div class=\"captureHint\">{{ getCaptureOnlyHint() }}</div>\n        }\n      </div>\n    }\n    @if (isSourceNeeded(fileUploaderSource.CAMERA_PHOTO)) {\n      <photo-capture-widget\n        #photoCapture\n        [mode]=\"'PHOTO'\"\n        [externalTrigger]=\"true\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [texts]=\"texts\"\n        [maxFileSize]=\"getMaxFileSize()\"\n        (photoCaptured)=\"uploadImage($event)\"\n      ></photo-capture-widget>\n    }\n    @if (isSourceNeeded(fileUploaderSource.CAMERA_VIDEO)) {\n      <photo-capture-widget\n        #videoCapture\n        [mode]=\"'VIDEO'\"\n        [externalTrigger]=\"true\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [texts]=\"texts\"\n        (photoCaptured)=\"uploadImage($event)\"\n      ></photo-capture-widget>\n    }\n    @if (isRecorderOpen()) {\n      <voice-record-widget\n        [openDirection]=\"captureSettings().openDirection\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [showSaveTitle]=\"true\"\n        [texts]=\"texts\"\n        [showMicrophoneError]=\"true\"\n        (recordingSaved)=\"uploadRecording($event)\"\n      ></voice-record-widget>\n    }\n  } @else {\n    <!-- IMAGE TYPE WIDGET -->\n    @if (widgetNeeded(uploadWidgetType.IMAGE) || widgetNeeded(uploadWidgetType.ALL)) {\n      <photo-capture-widget\n        [maxFileSize]=\"getMaxFileSize()\"\n        [texts]=\"texts\"\n        (photoCaptured)=\"uploadImage($event)\"\n        >\n      </photo-capture-widget>\n    }\n\n    <!-- SOUND TYPE WIDGET -->\n    @if (widgetNeeded(uploadWidgetType.SOUND) || widgetNeeded(uploadWidgetType.ALL)) {\n      <voice-record-widget\n        [texts]=\"texts\"\n        [showMicrophoneError]=\"true\"\n        (recordingSaved)=\"uploadRecording($event)\"\n      ></voice-record-widget>\n    }\n  }\n  <smartfileuploader\n    #fileUploadMaterial\n    [i18n]=\"i18n\"\n    [fileFormats]=\"fileFormats\"\n    [maxSizeMb]=\"maxSizeMb\"\n    [uploadCallback]=\"upload.bind(this)\"\n    [isMultiple]=\"isMultiple()\"\n    [autoUpload]=\"isUploadImmediate()\"\n    [isDisabled]=\"isDisabled()\"\n    [pickerShown]=\"isPickerShown()\"\n  ></smartfileuploader>\n</div>\n", styles: ["photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}voice-record-widget{box-sizing:border-box;padding:.5rem;border-bottom:1px solid #e5e7eb}voice-record-widget ::ng-deep .sb4-red,voice-record-widget ::ng-deep .sb4-primary,voice-record-widget ::ng-deep ui-action-button{border:unset!important}@media(max-width:900px){:host{width:100%}}.captureRow{display:flex;justify-content:center;padding:.5rem;border-bottom:1px solid #e5e7eb}.captureRow.captureOnly{border-bottom:unset;flex-direction:column;align-items:center;padding:.875rem .5rem;gap:.375rem}.captureButtons{display:flex;gap:.5rem}.captureButtons ::ng-deep button{border:unset}.captureHint{font-size:12px;color:#6b7280}\n"], dependencies: [{ kind: "component", type: PhotoCaptureWidgetComponent, selector: "photo-capture-widget", inputs: ["maxFileSize", "mode", "externalTrigger", "texts", "deviceStart", "handover", "actionsInHost"], outputs: ["photoCaptured"] }, { kind: "component", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: ["openDirection", "texts", "showMicrophoneError", "deviceStart", "handover", "showSaveTitle", "actionsInHost"], outputs: ["recordingSaved"] }, { kind: "component", type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple", "autoUpload", "isDisabled", "pickerShown"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UploadWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-upload-widget', imports: [PhotoCaptureWidgetComponent, VoiceRecordWidgetComponent, SmartfileuploaderComponent], template: "<div class=\"sb4UploadWidget\">\n  <!-- IMAGE TYPE WIDGET -->\n  @if (widgetNeeded(uploadWidgetType.IMAGE) || widgetNeeded(uploadWidgetType.ALL)) {\n    <photo-capture-widget\n      [maxFileSize]=\"maxSizeMb * 1024 * 1024\"\n      (photoCaptured)=\"uploadImage($event)\"\n      >\n    </photo-capture-widget>\n  }\n\n  <!-- SOUND TYPE WIDGET -->\n  @if (widgetNeeded(uploadWidgetType.SOUND) || widgetNeeded(uploadWidgetType.ALL)) {\n    <voice-record-widget (recordingSaved)=\"uploadRecording($event)\"> </voice-record-widget>\n  }\n  <smartfileuploader\n    #fileUploadMaterial\n    [i18n]=\"i18n\"\n    [fileFormats]=\"fileFormats\"\n    [maxSizeMb]=\"maxSizeMb\"\n    [uploadCallback]=\"upload.bind(this)\"\n    [isMultiple]=\"isMultiple()\"\n    [autoUpload]=\"autoUpload\"\n    [isDisabled]=\"isDisabled()\"\n  ></smartfileuploader>\n</div>\n", styles: ["photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}voice-record-widget{padding:.5rem;border-bottom:1px solid #e5e7eb}voice-record-widget ::ng-deep .sb4-red,voice-record-widget ::ng-deep .sb4-primary,voice-record-widget ::ng-deep ui-action-button{border:unset!important}@media(max-width:900px){:host{width:100%}}\n"] }]
+            args: [{ selector: 'smart-upload-widget', imports: [
+                        PhotoCaptureWidgetComponent,
+                        VoiceRecordWidgetComponent,
+                        SmartfileuploaderComponent,
+                        UiActionButtonComponent,
+                    ], template: "<div class=\"sb4UploadWidget\">\n  @if (hasSources()) {\n    <!-- CAPTURE ROW OF THE SOURCES, hidden in view mode -->\n    @if (getCaptureSources().length && !isDisabled()) {\n      <div class=\"captureRow\" [class.captureOnly]=\"isCaptureOnly()\">\n        <div class=\"captureButtons\">\n          @for (source of getCaptureSources(); track source) {\n            <ui-action-button\n              class=\"{{ getCaptureButtonClass(source) }}\"\n              [descriptor]=\"getCaptureButton(source)\"\n              (actionClick)=\"startCapture(source)\"\n            ></ui-action-button>\n          }\n        </div>\n        @if (isCaptureOnly()) {\n          <div class=\"captureHint\">{{ getCaptureOnlyHint() }}</div>\n        }\n      </div>\n    }\n    @if (isSourceNeeded(fileUploaderSource.CAMERA_PHOTO)) {\n      <photo-capture-widget\n        #photoCapture\n        [mode]=\"'PHOTO'\"\n        [externalTrigger]=\"true\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [texts]=\"texts\"\n        [maxFileSize]=\"getMaxFileSize()\"\n        (photoCaptured)=\"uploadImage($event)\"\n      ></photo-capture-widget>\n    }\n    @if (isSourceNeeded(fileUploaderSource.CAMERA_VIDEO)) {\n      <photo-capture-widget\n        #videoCapture\n        [mode]=\"'VIDEO'\"\n        [externalTrigger]=\"true\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [texts]=\"texts\"\n        (photoCaptured)=\"uploadImage($event)\"\n      ></photo-capture-widget>\n    }\n    @if (isRecorderOpen()) {\n      <voice-record-widget\n        [openDirection]=\"captureSettings().openDirection\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [showSaveTitle]=\"true\"\n        [texts]=\"texts\"\n        [showMicrophoneError]=\"true\"\n        (recordingSaved)=\"uploadRecording($event)\"\n      ></voice-record-widget>\n    }\n  } @else {\n    <!-- IMAGE TYPE WIDGET -->\n    @if (widgetNeeded(uploadWidgetType.IMAGE) || widgetNeeded(uploadWidgetType.ALL)) {\n      <photo-capture-widget\n        [maxFileSize]=\"getMaxFileSize()\"\n        [texts]=\"texts\"\n        (photoCaptured)=\"uploadImage($event)\"\n        >\n      </photo-capture-widget>\n    }\n\n    <!-- SOUND TYPE WIDGET -->\n    @if (widgetNeeded(uploadWidgetType.SOUND) || widgetNeeded(uploadWidgetType.ALL)) {\n      <voice-record-widget\n        [texts]=\"texts\"\n        [showMicrophoneError]=\"true\"\n        (recordingSaved)=\"uploadRecording($event)\"\n      ></voice-record-widget>\n    }\n  }\n  <smartfileuploader\n    #fileUploadMaterial\n    [i18n]=\"i18n\"\n    [fileFormats]=\"fileFormats\"\n    [maxSizeMb]=\"maxSizeMb\"\n    [uploadCallback]=\"upload.bind(this)\"\n    [isMultiple]=\"isMultiple()\"\n    [autoUpload]=\"isUploadImmediate()\"\n    [isDisabled]=\"isDisabled()\"\n    [pickerShown]=\"isPickerShown()\"\n  ></smartfileuploader>\n</div>\n", styles: ["photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}voice-record-widget{box-sizing:border-box;padding:.5rem;border-bottom:1px solid #e5e7eb}voice-record-widget ::ng-deep .sb4-red,voice-record-widget ::ng-deep .sb4-primary,voice-record-widget ::ng-deep ui-action-button{border:unset!important}@media(max-width:900px){:host{width:100%}}.captureRow{display:flex;justify-content:center;padding:.5rem;border-bottom:1px solid #e5e7eb}.captureRow.captureOnly{border-bottom:unset;flex-direction:column;align-items:center;padding:.875rem .5rem;gap:.375rem}.captureButtons{display:flex;gap:.5rem}.captureButtons ::ng-deep button{border:unset}.captureHint{font-size:12px;color:#6b7280}\n"] }]
         }], propDecorators: { fileUploadMaterial: [{
                 type: ViewChild,
                 args: ['fileUploadMaterial']
-            }], uploadDescriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadDescriptor", required: false }] }], isMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiple", required: true }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }] } });
+            }], photoCapture: [{
+                type: ViewChild,
+                args: ['photoCapture']
+            }], videoCapture: [{
+                type: ViewChild,
+                args: ['videoCapture']
+            }], uploadDescriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadDescriptor", required: false }] }], isMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiple", required: true }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], sources: [{ type: i0.Input, args: [{ isSignal: true, alias: "sources", required: false }] }], capture: [{ type: i0.Input, args: [{ isSignal: true, alias: "capture", required: false }] }], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }] } });
+const CAPTURE_BUTTONS = {
+    [FileUploaderSource.CAMERA_PHOTO]: {
+        icon: 'photo_camera',
+        cssClass: 'capturePhotoButton',
+        tooltip: 'capturePhoto',
+        noun: 'photo',
+        dialogTitle: 'photoDialogTitle',
+    },
+    [FileUploaderSource.CAMERA_VIDEO]: {
+        icon: 'videocam',
+        cssClass: 'captureVideoButton',
+        tooltip: 'captureVideo',
+        noun: 'video',
+        dialogTitle: 'videoDialogTitle',
+    },
+    [FileUploaderSource.MICROPHONE]: {
+        icon: 'mic',
+        cssClass: 'recordAudioButton',
+        tooltip: 'recordAudio',
+        noun: 'audio',
+        dialogTitle: 'audioDialogTitle',
+    },
+};
+
+const FILE_PREVIEW_KEY_PREFIX = 'filePreview.';
+/** The preview element of a mime type, or `undefined` when the file has no preview. */
+function getFilePreviewKind(mimeType) {
+    const type = mimeType?.split('/')[0];
+    return type === 'image' || type === 'video' || type === 'audio' ? type : undefined;
+}
+/** The server's preview key of a single-file widget (`FileWidgetHandlerApi.getPreviewItemKey`). */
+function createSingleFilePreviewKey(widgetKey) {
+    return FILE_PREVIEW_KEY_PREFIX + widgetKey;
+}
+/** The server's preview key of a list row: the widget key and the object id of the dataUri. */
+function createListFilePreviewKey(widgetKey, dataUri) {
+    const path = dataUri.split(/[?#]/)[0];
+    const objectId = path.substring(path.lastIndexOf('/') + 1).split('.')[0];
+    return `${FILE_PREVIEW_KEY_PREFIX}${widgetKey}.${objectId}`;
+}
+/**
+ * Loads the previews of a file editor through the view's authenticated download and owns their
+ * blob URLs: a URL is revoked when its file leaves the requests and when the editor is destroyed.
+ * Created in the editor's injection context; the view uuid is the editor's client's.
+ */
+class FilePreviewLoader {
+    constructor() {
+        this.viewContext = inject(SmartViewContextService);
+        this.smartComponent = injectSmartComponent();
+        this.requests = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requests" }] : /* istanbul ignore next */ []));
+        this.previewsState = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewsState" }] : /* istanbul ignore next */ []));
+        this.loadingDataUris = new Set();
+        /** Not fetched again while it stays in the requests, as every model write sets them anew. */
+        this.failedDataUris = new Set();
+        this.destroyed = false;
+        effect(() => this.loadPreviews(this.smartComponent?.widgetUuid(), this.requests()));
+        inject(DestroyRef).onDestroy(() => {
+            this.destroyed = true;
+            this.previewsState().forEach((preview) => URL.revokeObjectURL(preview.url));
+        });
+    }
+    /** Sets the files to preview; a file of no preview kind is ignored. */
+    setRequests(requests) {
+        this.requests.set(requests.filter((request) => getFilePreviewKind(request.mimeType)));
+    }
+    /** The loaded preview of a file, `undefined` while loading or without one. */
+    getPreview(dataUri) {
+        return dataUri ? this.previewsState().get(dataUri) : undefined;
+    }
+    /**
+     * Turns a video preview whose media reports no video track into an audio preview of the same
+     * blob URL, as a voice note may be stored with a video mime type; call it at `loadedmetadata`.
+     */
+    applyVideoMetadata(dataUri, video) {
+        const preview = this.previewsState().get(dataUri);
+        if (preview?.kind === 'video' && video.videoWidth === 0 && video.videoHeight === 0) {
+            const previews = new Map(this.previewsState());
+            previews.set(dataUri, { ...preview, kind: 'audio' });
+            this.previewsState.set(previews);
+        }
+    }
+    loadPreviews(viewUuid, requests) {
+        untracked(() => {
+            const previews = new Map(this.previewsState());
+            previews.forEach((preview, dataUri) => {
+                if (!this.isRequested(dataUri)) {
+                    URL.revokeObjectURL(preview.url);
+                    previews.delete(dataUri);
+                }
+            });
+            if (previews.size !== this.previewsState().size) {
+                this.previewsState.set(previews);
+            }
+            this.failedDataUris.forEach((dataUri) => {
+                if (!this.isRequested(dataUri)) {
+                    this.failedDataUris.delete(dataUri);
+                }
+            });
+            if (viewUuid) {
+                requests
+                    .filter((request) => !previews.has(request.dataUri))
+                    .filter((request) => !this.loadingDataUris.has(request.dataUri))
+                    .filter((request) => !this.failedDataUris.has(request.dataUri))
+                    .forEach((request) => this.loadPreview(viewUuid, request));
+            }
+        });
+    }
+    async loadPreview(viewUuid, request) {
+        this.loadingDataUris.add(request.dataUri);
+        let data;
+        try {
+            data = await this.viewContext.downloadResource(viewUuid, request.key);
+        }
+        catch {
+            // A file the server has not registered keeps the card without its preview.
+            if (this.isRequested(request.dataUri)) {
+                this.failedDataUris.add(request.dataUri);
+            }
+            return;
+        }
+        finally {
+            this.loadingDataUris.delete(request.dataUri);
+        }
+        if (this.destroyed || !this.isRequested(request.dataUri)) {
+            return;
+        }
+        const url = URL.createObjectURL(new Blob([data], { type: request.mimeType }));
+        const previews = new Map(this.previewsState());
+        previews.set(request.dataUri, { kind: getFilePreviewKind(request.mimeType), url });
+        this.previewsState.set(previews);
+    }
+    isRequested(dataUri) {
+        return this.requests().some((request) => request.dataUri === dataUri);
+    }
+}
 
 class SmartFileEditorComponent {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
+        this.previewLoader = new FilePreviewLoader();
         this.uploadFilesEvent = output();
         // ---- ControlValueAccessor implementation ----
         this.onChange = (value) => { };
@@ -9796,8 +10664,23 @@ class SmartFileEditorComponent {
                 undoIcon: { identifier: 'undo' },
             };
         }
+        this.requestPreview();
         this.cdr.markForCheck();
     }
+    /** With thumbnail FULL the current value is previewed; any other value drops the preview. */
+    requestPreview() {
+        const value = this._widgetInstance.value;
+        const isFull = this._widgetInstance.fileUploaderProperties?.thumbnail === FileUploaderThumbnail.FULL;
+        this.previewLoader.setRequests(isFull && this.isTypeSupported(value)
+            ? [
+                {
+                    key: createSingleFilePreviewKey(this._widgetInstance.key),
+                    dataUri: value.dataUri,
+                    mimeType: value.mimeType,
+                },
+            ]
+            : []);
+    }
     upload(event) {
         if (!event.files || event.files.length == 0) {
             return;
@@ -9818,10 +10701,12 @@ class SmartFileEditorComponent {
     clear() {
         this.clearedFile = this._widgetInstance.value;
         this._widgetInstance.value = null;
+        this.requestPreview();
         this.onChange(null);
     }
     undoClear() {
         this._widgetInstance.value = this.clearedFile;
+        this.requestPreview();
         this.onChange(this.clearedFile);
         this.clearedFile = undefined;
     }
@@ -9871,6 +10756,7 @@ class SmartFileEditorComponent {
             if (value) {
                 this.clearedFile = undefined;
             }
+            this.requestPreview();
             this.cdr.markForCheck();
         }
     }
@@ -9896,6 +10782,15 @@ class SmartFileEditorComponent {
     get fileIcon() {
         return 'insert_drive_file';
     }
+    get preview() {
+        return this.previewLoader.getPreview(this._widgetInstance.value?.dataUri);
+    }
+    onPreviewMetadata(event) {
+        const dataUri = this._widgetInstance.value?.dataUri;
+        if (dataUri) {
+            this.previewLoader.applyVideoMetadata(dataUri, event.target);
+        }
+    }
     get changeButton() {
         var props = this._widgetInstance.fileUploaderProperties;
         var baseAction = props.changeAction ?? props.uploadAction;
@@ -9940,7 +10835,7 @@ class SmartFileEditorComponent {
                 useExisting: forwardRef(() => SmartFileEditorComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else if (!widgetInstance.value || fileToChange) {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"false\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n      @if (clearedFile && !isDisabled) {\n        <div class=\"undoClearContainer\">\n          <ui-action-button\n            class=\"removeIcon undoClearButton\"\n            (actionClick)=\"undoClear()\"\n            [descriptor]=\"removeButton\"\n          ></ui-action-button>\n        </div>\n      }\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"uploadedFile\">\n        <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n\n        <div class=\"fileData\">\n          <div class=\"fileDataContainer\">\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n            <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n          </div>\n        </div>\n\n        <div class=\"fileActions\">\n          <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n          @if (!fileToChange) {\n            <ui-action-button\n              class=\"changeButton\"\n              (actionClick)=\"change(widgetInstance.value)\"\n              [disabled]=\"isDisabled\"\n              [descriptor]=\"changeButton\"\n              >\n            </ui-action-button>\n            @if (!isDisabled && isClearEnabled) {\n              <ui-action-button\n                class=\"deleteButton\"\n                (actionClick)=\"clear()\"\n                [descriptor]=\"deleteButton\"\n              ></ui-action-button>\n            }\n          } @else {\n            <ui-action-button\n              class=\"removeIcon\"\n              (actionClick)=\"cancelChange()\"\n              [descriptor]=\"removeButton\"\n            ></ui-action-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button,.undoClearContainer ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover,.undoClearContainer ::ng-deep button:hover{border:unset}.undoClearContainer{display:flex;justify-content:flex-end;padding:0 1rem .5rem}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+        ], ngImport: i0, template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else if (!widgetInstance.value || fileToChange) {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n        [sources]=\"widgetInstance.fileUploaderProperties.sources\"\n        [capture]=\"widgetInstance.fileUploaderProperties.capture\"\n        [isMultiple]=\"false\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n      @if (clearedFile && !isDisabled) {\n        <div class=\"undoClearContainer\">\n          <ui-action-button\n            class=\"removeIcon undoClearButton\"\n            (actionClick)=\"undoClear()\"\n            [descriptor]=\"removeButton\"\n          ></ui-action-button>\n        </div>\n      }\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      @if (preview; as filePreview) {\n        <div class=\"filePreview\">\n          @switch (filePreview.kind) {\n            @case ('image') {\n              <img [src]=\"filePreview.url\" [alt]=\"widgetInstance.value?.fileName\" />\n            }\n            @case ('video') {\n              <video\n                controls\n                [src]=\"filePreview.url\"\n                (loadedmetadata)=\"onPreviewMetadata($event)\"\n              ></video>\n            }\n            @case ('audio') {\n              <audio controls [src]=\"filePreview.url\"></audio>\n            }\n          }\n        </div>\n      }\n      <div class=\"uploadedFile\">\n        @if (!preview) {\n          <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n        }\n\n        <div class=\"fileData\">\n          <div class=\"fileDataContainer\">\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n            <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n          </div>\n        </div>\n\n        <div class=\"fileActions\">\n          <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n          @if (!fileToChange) {\n            <ui-action-button\n              class=\"changeButton\"\n              (actionClick)=\"change(widgetInstance.value)\"\n              [disabled]=\"isDisabled\"\n              [descriptor]=\"changeButton\"\n              >\n            </ui-action-button>\n            @if (!isDisabled && isClearEnabled) {\n              <ui-action-button\n                class=\"deleteButton\"\n                (actionClick)=\"clear()\"\n                [descriptor]=\"deleteButton\"\n              ></ui-action-button>\n            }\n          } @else {\n            <ui-action-button\n              class=\"removeIcon\"\n              (actionClick)=\"cancelChange()\"\n              [descriptor]=\"removeButton\"\n            ></ui-action-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button,.undoClearContainer ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover,.undoClearContainer ::ng-deep button:hover{border:unset}.undoClearContainer{display:flex;justify-content:flex-end;padding:0 1rem .5rem}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.filePreview{padding:.75rem 1rem 0}.filePreview img,.filePreview video{display:block;width:100%;max-height:200px;object-fit:contain;background:var(--color-surface-alt);border-radius:4px}.filePreview audio{display:block;width:100%}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled", "sources", "capture"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFileEditorComponent, decorators: [{
             type: Component,
@@ -9950,7 +10845,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             useExisting: forwardRef(() => SmartFileEditorComponent),
                             multi: true,
                         },
-                    ], imports: [NgClass, NgStyle, SmartIconComponent, UploadWidgetComponent, UiActionToolbarComponent, UiActionButtonComponent], template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else if (!widgetInstance.value || fileToChange) {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"false\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n      @if (clearedFile && !isDisabled) {\n        <div class=\"undoClearContainer\">\n          <ui-action-button\n            class=\"removeIcon undoClearButton\"\n            (actionClick)=\"undoClear()\"\n            [descriptor]=\"removeButton\"\n          ></ui-action-button>\n        </div>\n      }\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"uploadedFile\">\n        <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n\n        <div class=\"fileData\">\n          <div class=\"fileDataContainer\">\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n            <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n          </div>\n        </div>\n\n        <div class=\"fileActions\">\n          <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n          @if (!fileToChange) {\n            <ui-action-button\n              class=\"changeButton\"\n              (actionClick)=\"change(widgetInstance.value)\"\n              [disabled]=\"isDisabled\"\n              [descriptor]=\"changeButton\"\n              >\n            </ui-action-button>\n            @if (!isDisabled && isClearEnabled) {\n              <ui-action-button\n                class=\"deleteButton\"\n                (actionClick)=\"clear()\"\n                [descriptor]=\"deleteButton\"\n              ></ui-action-button>\n            }\n          } @else {\n            <ui-action-button\n              class=\"removeIcon\"\n              (actionClick)=\"cancelChange()\"\n              [descriptor]=\"removeButton\"\n            ></ui-action-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button,.undoClearContainer ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover,.undoClearContainer ::ng-deep button:hover{border:unset}.undoClearContainer{display:flex;justify-content:flex-end;padding:0 1rem .5rem}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"] }]
+                    ], imports: [NgClass, NgStyle, SmartIconComponent, UploadWidgetComponent, UiActionToolbarComponent, UiActionButtonComponent], template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else if (!widgetInstance.value || fileToChange) {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n        [sources]=\"widgetInstance.fileUploaderProperties.sources\"\n        [capture]=\"widgetInstance.fileUploaderProperties.capture\"\n        [isMultiple]=\"false\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n      @if (clearedFile && !isDisabled) {\n        <div class=\"undoClearContainer\">\n          <ui-action-button\n            class=\"removeIcon undoClearButton\"\n            (actionClick)=\"undoClear()\"\n            [descriptor]=\"removeButton\"\n          ></ui-action-button>\n        </div>\n      }\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      @if (preview; as filePreview) {\n        <div class=\"filePreview\">\n          @switch (filePreview.kind) {\n            @case ('image') {\n              <img [src]=\"filePreview.url\" [alt]=\"widgetInstance.value?.fileName\" />\n            }\n            @case ('video') {\n              <video\n                controls\n                [src]=\"filePreview.url\"\n                (loadedmetadata)=\"onPreviewMetadata($event)\"\n              ></video>\n            }\n            @case ('audio') {\n              <audio controls [src]=\"filePreview.url\"></audio>\n            }\n          }\n        </div>\n      }\n      <div class=\"uploadedFile\">\n        @if (!preview) {\n          <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n        }\n\n        <div class=\"fileData\">\n          <div class=\"fileDataContainer\">\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n            <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n          </div>\n        </div>\n\n        <div class=\"fileActions\">\n          <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n          @if (!fileToChange) {\n            <ui-action-button\n              class=\"changeButton\"\n              (actionClick)=\"change(widgetInstance.value)\"\n              [disabled]=\"isDisabled\"\n              [descriptor]=\"changeButton\"\n              >\n            </ui-action-button>\n            @if (!isDisabled && isClearEnabled) {\n              <ui-action-button\n                class=\"deleteButton\"\n                (actionClick)=\"clear()\"\n                [descriptor]=\"deleteButton\"\n              ></ui-action-button>\n            }\n          } @else {\n            <ui-action-button\n              class=\"removeIcon\"\n              (actionClick)=\"cancelChange()\"\n              [descriptor]=\"removeButton\"\n            ></ui-action-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button,.undoClearContainer ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover,.undoClearContainer ::ng-deep button:hover{border:unset}.undoClearContainer{display:flex;justify-content:flex-end;padding:0 1rem .5rem}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.filePreview{padding:.75rem 1rem 0}.filePreview img,.filePreview video{display:block;width:100%;max-height:200px;object-fit:contain;background:var(--color-surface-alt);border-radius:4px}.filePreview audio{display:block;width:100%}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"] }]
         }], propDecorators: { widgetInstance: [{
                 type: Input
             }], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }] } });
@@ -10859,6 +11754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 class SmartMultiFileEditorComponent {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
+        this.previewLoader = new FilePreviewLoader();
         this.uploadFilesEvent = output();
         this.fileEvent = output();
         // ---- ControlValueAccessor implementation ----
@@ -10881,8 +11777,28 @@ class SmartMultiFileEditorComponent {
                 ? structuredClone(value)
                 : JSON.parse(JSON.stringify(value));
         this.isDisabled = !!value.isDisabled;
+        const texts = value.multiFileUploaderProperties?.uploadDescriptor?.texts;
+        this.playTooltip = { tooltip: UploadWidgetUtils.resolveTexts(texts).play };
+        this.requestPreviews();
         this.cdr.markForCheck();
     }
+    /** With thumbnail FULL the image rows and the expanded player's row are previewed. */
+    requestPreviews() {
+        const files = this.isFullThumbnail && Array.isArray(this._widgetInstance.value)
+            ? this._widgetInstance.value
+            : [];
+        this.previewLoader.setRequests(files
+            .filter((file) => this.getPreviewKind(file) === 'image' || file.dataUri === this.expandedDataUri)
+            .map((file) => ({
+            key: createListFilePreviewKey(this._widgetInstance.key, file.dataUri),
+            dataUri: file.dataUri,
+            mimeType: file.mimeType,
+        })));
+    }
+    togglePlayer(dataUri) {
+        this.expandedDataUri = this.expandedDataUri === dataUri ? undefined : dataUri;
+        this.requestPreviews();
+    }
     upload(event) {
         if (!event.files || event.files.length == 0) {
             return;
@@ -10956,6 +11872,7 @@ class SmartMultiFileEditorComponent {
     writeValue(value) {
         if (value !== undefined && this._widgetInstance) {
             this._widgetInstance.value = value;
+            this.requestPreviews();
             this.cdr.markForCheck();
         }
     }
@@ -10976,6 +11893,19 @@ class SmartMultiFileEditorComponent {
     get fileIcon() {
         return 'insert_drive_file';
     }
+    get isFullThumbnail() {
+        return (this._widgetInstance.multiFileUploaderProperties?.thumbnail === FileUploaderThumbnail.FULL);
+    }
+    /** The preview kind of a row, `undefined` without thumbnail FULL or for another file type. */
+    getPreviewKind(file) {
+        return this.isFullThumbnail ? getFilePreviewKind(file?.mimeType) : undefined;
+    }
+    getPreview(dataUri) {
+        return this.previewLoader.getPreview(dataUri);
+    }
+    onPreviewMetadata(dataUri, event) {
+        this.previewLoader.applyVideoMetadata(dataUri, event.target);
+    }
     get errorIcon() {
         return 'error';
     }
@@ -10986,7 +11916,7 @@ class SmartMultiFileEditorComponent {
                 useExisting: forwardRef(() => SmartMultiFileEditorComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"true\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"scrollable\">\n        @for (file of widgetInstance.value; track file; let i = $index) {\n          <div class=\"uploadedFile\">\n            <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n            <div class=\"fileData\">\n              <div class=\"fileDataContainer\">\n                <span class=\"fileName\">{{ file?.fileName }}</span>\n                <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(file?.size)) }}</span>\n              </div>\n            </div>\n            <div class=\"fileActions\">\n              <!--\n                One toolbar per file, each resolving the widget's actions for itself and\n                carrying its own file. The hidden sibling whose list these used to read is\n                gone with the collection machinery (ADR-0006).\n              -->\n              <smart-ui-action-toolbar\n                [id]=\"widgetInstance.toolbarId\"\n                [actionParams]=\"{ _dataUri: file.dataUri }\"\n              ></smart-ui-action-toolbar>\n              <smart-icon\n                class=\"downloadIcon\"\n                icon=\"download\"\n                (click)=\"downloadFile(file.dataUri)\"\n              ></smart-icon>\n              @if (!file.readOnly && !isDisabled) {\n                <smart-icon\n                  class=\"removeIcon\"\n                  [icon]=\"removeIcon\"\n                  (click)=\"file.readOnly === false && deleteFile(file.dataUri)\"\n                ></smart-icon>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }] }); }
+        ], ngImport: i0, template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\n        [sources]=\"widgetInstance.multiFileUploaderProperties.sources\"\n        [capture]=\"widgetInstance.multiFileUploaderProperties.capture\"\n        [isMultiple]=\"true\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"scrollable\">\n        @for (file of widgetInstance.value; track file; let i = $index) {\n          <div class=\"uploadedFile\">\n            @let previewKind = getPreviewKind(file);\n            @let thumbnail = previewKind === 'image' ? getPreview(file.dataUri) : undefined;\n            @if (thumbnail) {\n              <img class=\"fileThumbnail\" [src]=\"thumbnail.url\" [alt]=\"file.fileName\" />\n            } @else if (previewKind === 'video' || previewKind === 'audio') {\n              <button\n                type=\"button\"\n                class=\"playTile\"\n                [class.audioTile]=\"previewKind === 'audio'\"\n                [class.open]=\"expandedDataUri === file.dataUri\"\n                [smartTooltip]=\"playTooltip\"\n                (click)=\"togglePlayer(file.dataUri)\"\n              >\n                <smart-icon\n                  [icon]=\"previewKind === 'audio' ? 'graphic_eq' : 'play_arrow'\"\n                ></smart-icon>\n              </button>\n            } @else {\n              <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n            }\n            <div class=\"fileData\">\n              <div class=\"fileDataContainer\">\n                <span class=\"fileName\">{{ file?.fileName }}</span>\n                <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(file?.size)) }}</span>\n              </div>\n            </div>\n            <div class=\"fileActions\">\n              <!--\n                One toolbar per file, each resolving the widget's actions for itself and\n                carrying its own file. The hidden sibling whose list these used to read is\n                gone with the collection machinery (ADR-0006).\n              -->\n              <smart-ui-action-toolbar\n                [id]=\"widgetInstance.toolbarId\"\n                [actionParams]=\"{ _dataUri: file.dataUri }\"\n              ></smart-ui-action-toolbar>\n              <smart-icon\n                class=\"downloadIcon\"\n                icon=\"download\"\n                (click)=\"downloadFile(file.dataUri)\"\n              ></smart-icon>\n              @if (!file.readOnly && !isDisabled) {\n                <smart-icon\n                  class=\"removeIcon\"\n                  [icon]=\"removeIcon\"\n                  (click)=\"file.readOnly === false && deleteFile(file.dataUri)\"\n                ></smart-icon>\n              }\n            </div>\n          </div>\n          @if (expandedDataUri === file.dataUri) {\n            @if (getPreview(file.dataUri); as player) {\n              <div class=\"filePlayer\">\n                @if (player.kind === 'audio') {\n                  <audio controls [src]=\"player.url\"></audio>\n                } @else {\n                  <video\n                    controls\n                    [src]=\"player.url\"\n                    (loadedmetadata)=\"onPreviewMetadata(file.dataUri, $event)\"\n                  ></video>\n                }\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileThumbnail,.playTile{width:3rem;height:3rem;flex:none;border-radius:4px}.fileThumbnail{object-fit:cover;background:var(--color-surface-alt)}.playTile{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:#2f3550;color:#fff;cursor:pointer}.playTile.audioTile{background:var(--color-surface-alt);color:var(--primary-color)}.playTile.open{outline:2px solid var(--primary-color);outline-offset:1px}.playTile smart-icon,.playTile smart-icon ::ng-deep mat-icon{font-size:2rem;color:inherit}.scrollable>.uploadedFile:has(+.filePlayer){border-bottom:none}.filePlayer{padding:0 1rem .75rem 5rem}.filePlayer video{display:block;width:100%;max-height:160px;background:#000;border-radius:4px}.filePlayer audio{display:block;width:100%}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled", "sources", "capture"], outputs: ["uploadFilesEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartMultiFileEditorComponent, decorators: [{
             type: Component,
@@ -10996,7 +11926,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             useExisting: forwardRef(() => SmartMultiFileEditorComponent),
                             multi: true,
                         },
-                    ], imports: [NgClass, NgStyle, UiActionToolbarComponent, SmartIconComponent, UploadWidgetComponent], template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"true\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"scrollable\">\n        @for (file of widgetInstance.value; track file; let i = $index) {\n          <div class=\"uploadedFile\">\n            <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n            <div class=\"fileData\">\n              <div class=\"fileDataContainer\">\n                <span class=\"fileName\">{{ file?.fileName }}</span>\n                <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(file?.size)) }}</span>\n              </div>\n            </div>\n            <div class=\"fileActions\">\n              <!--\n                One toolbar per file, each resolving the widget's actions for itself and\n                carrying its own file. The hidden sibling whose list these used to read is\n                gone with the collection machinery (ADR-0006).\n              -->\n              <smart-ui-action-toolbar\n                [id]=\"widgetInstance.toolbarId\"\n                [actionParams]=\"{ _dataUri: file.dataUri }\"\n              ></smart-ui-action-toolbar>\n              <smart-icon\n                class=\"downloadIcon\"\n                icon=\"download\"\n                (click)=\"downloadFile(file.dataUri)\"\n              ></smart-icon>\n              @if (!file.readOnly && !isDisabled) {\n                <smart-icon\n                  class=\"removeIcon\"\n                  [icon]=\"removeIcon\"\n                  (click)=\"file.readOnly === false && deleteFile(file.dataUri)\"\n                ></smart-icon>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"] }]
+                    ], imports: [
+                        NgClass,
+                        NgStyle,
+                        SmartTooltipDirective,
+                        UiActionToolbarComponent,
+                        SmartIconComponent,
+                        UploadWidgetComponent,
+                    ], template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\n        [sources]=\"widgetInstance.multiFileUploaderProperties.sources\"\n        [capture]=\"widgetInstance.multiFileUploaderProperties.capture\"\n        [isMultiple]=\"true\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"scrollable\">\n        @for (file of widgetInstance.value; track file; let i = $index) {\n          <div class=\"uploadedFile\">\n            @let previewKind = getPreviewKind(file);\n            @let thumbnail = previewKind === 'image' ? getPreview(file.dataUri) : undefined;\n            @if (thumbnail) {\n              <img class=\"fileThumbnail\" [src]=\"thumbnail.url\" [alt]=\"file.fileName\" />\n            } @else if (previewKind === 'video' || previewKind === 'audio') {\n              <button\n                type=\"button\"\n                class=\"playTile\"\n                [class.audioTile]=\"previewKind === 'audio'\"\n                [class.open]=\"expandedDataUri === file.dataUri\"\n                [smartTooltip]=\"playTooltip\"\n                (click)=\"togglePlayer(file.dataUri)\"\n              >\n                <smart-icon\n                  [icon]=\"previewKind === 'audio' ? 'graphic_eq' : 'play_arrow'\"\n                ></smart-icon>\n              </button>\n            } @else {\n              <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n            }\n            <div class=\"fileData\">\n              <div class=\"fileDataContainer\">\n                <span class=\"fileName\">{{ file?.fileName }}</span>\n                <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(file?.size)) }}</span>\n              </div>\n            </div>\n            <div class=\"fileActions\">\n              <!--\n                One toolbar per file, each resolving the widget's actions for itself and\n                carrying its own file. The hidden sibling whose list these used to read is\n                gone with the collection machinery (ADR-0006).\n              -->\n              <smart-ui-action-toolbar\n                [id]=\"widgetInstance.toolbarId\"\n                [actionParams]=\"{ _dataUri: file.dataUri }\"\n              ></smart-ui-action-toolbar>\n              <smart-icon\n                class=\"downloadIcon\"\n                icon=\"download\"\n                (click)=\"downloadFile(file.dataUri)\"\n              ></smart-icon>\n              @if (!file.readOnly && !isDisabled) {\n                <smart-icon\n                  class=\"removeIcon\"\n                  [icon]=\"removeIcon\"\n                  (click)=\"file.readOnly === false && deleteFile(file.dataUri)\"\n                ></smart-icon>\n              }\n            </div>\n          </div>\n          @if (expandedDataUri === file.dataUri) {\n            @if (getPreview(file.dataUri); as player) {\n              <div class=\"filePlayer\">\n                @if (player.kind === 'audio') {\n                  <audio controls [src]=\"player.url\"></audio>\n                } @else {\n                  <video\n                    controls\n                    [src]=\"player.url\"\n                    (loadedmetadata)=\"onPreviewMetadata(file.dataUri, $event)\"\n                  ></video>\n                }\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileThumbnail,.playTile{width:3rem;height:3rem;flex:none;border-radius:4px}.fileThumbnail{object-fit:cover;background:var(--color-surface-alt)}.playTile{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:#2f3550;color:#fff;cursor:pointer}.playTile.audioTile{background:var(--color-surface-alt);color:var(--primary-color)}.playTile.open{outline:2px solid var(--primary-color);outline-offset:1px}.playTile smart-icon,.playTile smart-icon ::ng-deep mat-icon{font-size:2rem;color:inherit}.scrollable>.uploadedFile:has(+.filePlayer){border-bottom:none}.filePlayer{padding:0 1rem .75rem 5rem}.filePlayer video{display:block;width:100%;max-height:160px;background:#000;border-radius:4px}.filePlayer audio{display:block;width:100%}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"] }]
         }], propDecorators: { widgetInstance: [{
                 type: Input
             }], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }], fileEvent: [{ type: i0.Output, args: ["fileEvent"] }] } });
@@ -11226,7 +12163,7 @@ class SmartVoiceRecorderComponent {
                 useExisting: forwardRef(() => SmartVoiceRecorderComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<voice-record-widget [openDirection]=\"openDirection\" (recordingSaved)=\"uploadRecording($event)\">\n</voice-record-widget>\n", styles: [":host{display:block;width:100%;min-width:0}\n"], dependencies: [{ kind: "component", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: ["openDirection"], outputs: ["recordingSaved"] }] }); }
+        ], ngImport: i0, template: "<voice-record-widget [openDirection]=\"openDirection\" (recordingSaved)=\"uploadRecording($event)\">\n</voice-record-widget>\n", styles: [":host{display:block;width:100%;min-width:0}\n"], dependencies: [{ kind: "component", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: ["openDirection", "texts", "showMicrophoneError", "deviceStart", "handover", "showSaveTitle", "actionsInHost"], outputs: ["recordingSaved"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartVoiceRecorderComponent, decorators: [{
             type: Component,
@@ -15947,7 +16884,8 @@ class Table {
     renderRows() {
         this.createCellToActionMap();
         this.rowMenuActionModelArrayCache.clear();
-        this.myTableChild.renderRows();
+        // The mobile template renders from its own loop and has no material table.
+        this.myTableChild?.renderRows();
     }
     createCellToActionMap() {
         this.cellToActionMap = SmartGridToolbarActionsUtil.calculateCellToActionMap(this.smartTable.tableRows);
@@ -16781,11 +17719,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 class MobileTableComponent extends Table {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MobileTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MobileTableComponent, isStandalone: true, selector: "lib-mobile-table", usesInheritance: true, ngImport: i0, template: "<div class=\"mobileTable\">\n  @for (row of smartTable.tableRows; track trackRow($index, row)) {\n    <div\n      class=\"mobileTableRow\"\n      [ngClass]=\"getRowClasses(row)\"\n      [ngStyle]=\"getRowStyles(row)\"\n      [attr.data-testid]=\"row?.id ?? null\"\n      >\n      @if (showRowStateColumn) {\n        <div class=\"mobileTableCell sm-grid-row-state-cell\" [attr.data-testid]=\"rowStateColumn\">\n          @if (rowStateIcon(row); as icon) {\n            <smart-icon\n              class=\"sm-grid-row-state-icon\"\n              [ngClass]=\"rowStateIconClass(row) ?? ''\"\n              [icon]=\"icon\"\n              color=\"\"\n              role=\"img\"\n              [attr.aria-label]=\"rowStateLabel(row)\"\n              [matTooltip]=\"rowStateLabel(row) ?? ''\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n        <div\n          class=\"mobileTableCell\"\n          (click)=\"handleOnRowClick($event, row)\"\n          (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n          >\n          <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n            {{ header.label }}\n          </div>\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].propertyName === 'select'\n            ) {\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n              [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n              >\n            </mat-checkbox>\n          }\n          @if (\n            smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n            !columnTemplate(i)\n            ) {\n            <div\n              >\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n                <div>\n                  <mat-checkbox\n                    [disabled]=\"true\"\n                    [checked]=\"getValue(row, header.propertyName)\"\n                  ></mat-checkbox>\n                </div>\n              }\n              @if (\n                smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n                smartTable.customSmartTableHeaders[i].properties?.icons?.length\n                ) {\n                <div\n                  >\n                  <smart-icon\n                    [smartTooltip]=\"getToolTip(row, i)\"\n                    [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n                    [color]=\"getColor(getValue(row, header.propertyName), i)\"\n                    >\n                  </smart-icon>\n                </div>\n              }\n            </div>\n          }\n          @if (isImageResource(row, header.propertyName)) {\n            <div>\n              <smart-icon\n                [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n                [color]=\"getImageResourceColor(row, header.propertyName)\"\n                >\n              </smart-icon>\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n            <div\n              class=\"smart-table-buttons-col\"\n              >\n              @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n                <div>\n                  @if (showButton(button, row)) {\n                    <div>\n                      @switch (button.type) {\n                        @case (smartTableButtonType.ICON) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-icon-button\n                            color=\"{{ button.color }}\"\n                            >\n                            <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                          </button>\n                        }\n                        @case (smartTableButtonType.NORMAL) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        @case (smartTableButtonType.RAISED) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-raised-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        <!------ MENU ------>\n                        @case (smartTableButtonType.MENU) {\n                          <div class=\"menu-button\">\n                            <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                              (actionFired)=\"onRowActionFired(element, $event)\"\n                            ></smart-ui-action-toolbar>\n                            <!------ GENERIC HAMBURGER ------>\n                            @if (shouldShowMenuButton(element)) {\n                              <smart-ui-action-toolbar\n                                [uiActionModels]=\"getMenuActions(element)\"\n                                [widgetId]=\"smartTable.getGridId()\"\n                                [nodeId]=\"element.id\"\n                                [actionParams]=\"{ model: element }\"\n                                (actionFired)=\"onRowActionFired(element, $event)\"\n                              ></smart-ui-action-toolbar>\n                            }\n                            <!------ MENU ------>\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n            <div>\n              @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n                <smart-icon\n                  [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                  [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                  [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                  >\n                </smart-icon>\n              }\n            </div>\n          }\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].translator !== undefined\n            ) {\n            <div\n              class=\"smart-table-cell-text\"\n              >\n              {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n            </div>\n          }\n          @if (\n            !smartTable.customSmartTableHeaders ||\n            (smartTable.customSmartTableHeaders &&\n            (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n            ) {\n            <div\n              >\n              @if (header.propertyName === 'icon') {\n                <smart-icon\n                  [icon]=\"getValue(row, header.propertyName)!\"\n                  >\n                </smart-icon>\n              }\n              @if (header.propertyName === 'img') {\n                <img\n                  [src]=\"getValue(row, header.propertyName)\"\n                  alt=\"\"\n                  class=\"smarttableImg\"\n                  />\n              }\n              @if (\n                header.propertyName !== 'icon' &&\n                header.propertyName !== 'img' &&\n                header.propertyName !== 'option' &&\n                header.propertyName !== 'button'\n                ) {\n                @if (columnTemplate(i); as template) {\n                  <smart-html-cell\n                    [row]=\"row\"\n                    [template]=\"template\"\n                    [gridIdentifier]=\"smartTable.getGridId()\"\n                  ></smart-html-cell>\n                } @else if (isTextContent(i)) {\n                  <div class=\"smart-table-cell-text\">{{ getValue(row, header.propertyName) }}</div>\n                } @else {\n                  <div\n                    class=\"smart-table-cell-text\"\n                    [innerHtml]=\"getValue(row, header.propertyName)\"\n                  ></div>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid var(--color-border, #e4eaf2);padding:.5rem;gap:.5rem}.mobileTableRow.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.mobileTableRow.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.mobileTableRow.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.mobileTableRow.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}.mobileTableRow.sm-grid-row-moved{font-style:italic}.mobileTableRow.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}.mobileTableRow.selected{color:inherit}.mobileTableRow.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) );background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint));box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color, #384372)}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartHtmlCellComponent, selector: "smart-html-cell", inputs: ["row", "template", "gridIdentifier"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MobileTableComponent, isStandalone: true, selector: "lib-mobile-table", usesInheritance: true, ngImport: i0, template: "<div class=\"mobileTable\">\n  @for (row of smartTable.tableRows; track trackRow($index, row)) {\n    <div\n      class=\"mobileTableRow\"\n      [ngClass]=\"getRowClasses(row)\"\n      [ngStyle]=\"getRowStyles(row)\"\n      [attr.data-testid]=\"row?.id ?? null\"\n      >\n      @if (showRowStateColumn) {\n        <div class=\"mobileTableCell sm-grid-row-state-cell\" [attr.data-testid]=\"rowStateColumn\">\n          @if (rowStateIcon(row); as icon) {\n            <smart-icon\n              class=\"sm-grid-row-state-icon\"\n              [ngClass]=\"rowStateIconClass(row) ?? ''\"\n              [icon]=\"icon\"\n              color=\"\"\n              role=\"img\"\n              [attr.aria-label]=\"rowStateLabel(row)\"\n              [matTooltip]=\"rowStateLabel(row) ?? ''\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n        <div\n          class=\"mobileTableCell\"\n          (click)=\"handleOnRowClick($event, row)\"\n          (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n          >\n          <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n            {{ header.label }}\n          </div>\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].propertyName === 'select'\n            ) {\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n              [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n              >\n            </mat-checkbox>\n          }\n          @if (\n            smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n            !columnTemplate(i)\n            ) {\n            <div\n              >\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n                <div>\n                  <mat-checkbox\n                    [disabled]=\"true\"\n                    [checked]=\"getValue(row, header.propertyName)\"\n                  ></mat-checkbox>\n                </div>\n              }\n              @if (\n                smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n                smartTable.customSmartTableHeaders[i].properties?.icons?.length\n                ) {\n                <div\n                  >\n                  <smart-icon\n                    [smartTooltip]=\"getToolTip(row, i)\"\n                    [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n                    [color]=\"getColor(getValue(row, header.propertyName), i)\"\n                    >\n                  </smart-icon>\n                </div>\n              }\n            </div>\n          }\n          @if (isImageResource(row, header.propertyName)) {\n            <div>\n              <smart-icon\n                [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n                [color]=\"getImageResourceColor(row, header.propertyName)\"\n                >\n              </smart-icon>\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n            <div\n              class=\"smart-table-buttons-col\"\n              >\n              @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n                <div>\n                  @if (showButton(button, row)) {\n                    <div>\n                      @switch (button.type) {\n                        @case (smartTableButtonType.ICON) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-icon-button\n                            color=\"{{ button.color }}\"\n                            >\n                            <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                          </button>\n                        }\n                        @case (smartTableButtonType.NORMAL) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        @case (smartTableButtonType.RAISED) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-raised-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        <!------ MENU ------>\n                        @case (smartTableButtonType.MENU) {\n                          <div class=\"menu-button\">\n                            <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getRowColumnAction(row, defaultActionToolbarId)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"row.id\"\n                              [actionParams]=\"{ model: row }\"\n                              (actionFired)=\"onRowActionFired(row, $event)\"\n                            ></smart-ui-action-toolbar>\n                            <!------ GENERIC HAMBURGER ------>\n                            @if (shouldShowMenuButton(row)) {\n                              <smart-ui-action-toolbar\n                                [uiActionModels]=\"getMenuActions(row)\"\n                                [widgetId]=\"smartTable.getGridId()\"\n                                [nodeId]=\"row.id\"\n                                [actionParams]=\"{ model: row }\"\n                                (actionFired)=\"onRowActionFired(row, $event)\"\n                              ></smart-ui-action-toolbar>\n                            }\n                            <!------ MENU ------>\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n            <div>\n              @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n                <smart-icon\n                  [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                  [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                  [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                  >\n                </smart-icon>\n              }\n            </div>\n          }\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].translator !== undefined\n            ) {\n            <div\n              class=\"smart-table-cell-text\"\n              >\n              {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n            </div>\n          }\n          @if (\n            !smartTable.customSmartTableHeaders ||\n            (smartTable.customSmartTableHeaders &&\n            (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n            ) {\n            <div\n              >\n              @if (header.propertyName === 'icon') {\n                <smart-icon\n                  [icon]=\"getValue(row, header.propertyName)!\"\n                  >\n                </smart-icon>\n              }\n              @if (header.propertyName === 'img') {\n                <img\n                  [src]=\"getValue(row, header.propertyName)\"\n                  alt=\"\"\n                  class=\"smarttableImg\"\n                  />\n              }\n              @if (\n                header.propertyName !== 'icon' &&\n                header.propertyName !== 'img' &&\n                header.propertyName !== 'option' &&\n                header.propertyName !== 'button'\n                ) {\n                @if (columnTemplate(i); as template) {\n                  <smart-html-cell\n                    [row]=\"row\"\n                    [template]=\"template\"\n                    [gridIdentifier]=\"smartTable.getGridId()\"\n                  ></smart-html-cell>\n                } @else if (isTextContent(i)) {\n                  <div class=\"smart-table-cell-text\">{{ getValue(row, header.propertyName) }}</div>\n                } @else {\n                  <div\n                    class=\"smart-table-cell-text\"\n                    [innerHtml]=\"getValue(row, header.propertyName)\"\n                  ></div>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid var(--color-border, #e4eaf2);padding:.5rem;gap:.5rem}.mobileTableRow.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.mobileTableRow.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.mobileTableRow.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.mobileTableRow.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}.mobileTableRow.sm-grid-row-moved{font-style:italic}.mobileTableRow.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}.mobileTableRow.selected{color:inherit}.mobileTableRow.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) );background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint));box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color, #384372)}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartHtmlCellComponent, selector: "smart-html-cell", inputs: ["row", "template", "gridIdentifier"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MobileTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-mobile-table', imports: [NgClass, NgStyle, MatCheckbox, SmartIconComponent, SmartTooltipDirective, MatTooltip, MatIconButton, MatButton, UiActionToolbarComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe, SmartHtmlCellComponent], template: "<div class=\"mobileTable\">\n  @for (row of smartTable.tableRows; track trackRow($index, row)) {\n    <div\n      class=\"mobileTableRow\"\n      [ngClass]=\"getRowClasses(row)\"\n      [ngStyle]=\"getRowStyles(row)\"\n      [attr.data-testid]=\"row?.id ?? null\"\n      >\n      @if (showRowStateColumn) {\n        <div class=\"mobileTableCell sm-grid-row-state-cell\" [attr.data-testid]=\"rowStateColumn\">\n          @if (rowStateIcon(row); as icon) {\n            <smart-icon\n              class=\"sm-grid-row-state-icon\"\n              [ngClass]=\"rowStateIconClass(row) ?? ''\"\n              [icon]=\"icon\"\n              color=\"\"\n              role=\"img\"\n              [attr.aria-label]=\"rowStateLabel(row)\"\n              [matTooltip]=\"rowStateLabel(row) ?? ''\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n        <div\n          class=\"mobileTableCell\"\n          (click)=\"handleOnRowClick($event, row)\"\n          (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n          >\n          <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n            {{ header.label }}\n          </div>\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].propertyName === 'select'\n            ) {\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n              [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n              >\n            </mat-checkbox>\n          }\n          @if (\n            smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n            !columnTemplate(i)\n            ) {\n            <div\n              >\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n                <div>\n                  <mat-checkbox\n                    [disabled]=\"true\"\n                    [checked]=\"getValue(row, header.propertyName)\"\n                  ></mat-checkbox>\n                </div>\n              }\n              @if (\n                smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n                smartTable.customSmartTableHeaders[i].properties?.icons?.length\n                ) {\n                <div\n                  >\n                  <smart-icon\n                    [smartTooltip]=\"getToolTip(row, i)\"\n                    [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n                    [color]=\"getColor(getValue(row, header.propertyName), i)\"\n                    >\n                  </smart-icon>\n                </div>\n              }\n            </div>\n          }\n          @if (isImageResource(row, header.propertyName)) {\n            <div>\n              <smart-icon\n                [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n                [color]=\"getImageResourceColor(row, header.propertyName)\"\n                >\n              </smart-icon>\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n            <div\n              class=\"smart-table-buttons-col\"\n              >\n              @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n                <div>\n                  @if (showButton(button, row)) {\n                    <div>\n                      @switch (button.type) {\n                        @case (smartTableButtonType.ICON) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-icon-button\n                            color=\"{{ button.color }}\"\n                            >\n                            <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                          </button>\n                        }\n                        @case (smartTableButtonType.NORMAL) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        @case (smartTableButtonType.RAISED) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-raised-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        <!------ MENU ------>\n                        @case (smartTableButtonType.MENU) {\n                          <div class=\"menu-button\">\n                            <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                              (actionFired)=\"onRowActionFired(element, $event)\"\n                            ></smart-ui-action-toolbar>\n                            <!------ GENERIC HAMBURGER ------>\n                            @if (shouldShowMenuButton(element)) {\n                              <smart-ui-action-toolbar\n                                [uiActionModels]=\"getMenuActions(element)\"\n                                [widgetId]=\"smartTable.getGridId()\"\n                                [nodeId]=\"element.id\"\n                                [actionParams]=\"{ model: element }\"\n                                (actionFired)=\"onRowActionFired(element, $event)\"\n                              ></smart-ui-action-toolbar>\n                            }\n                            <!------ MENU ------>\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n            <div>\n              @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n                <smart-icon\n                  [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                  [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                  [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                  >\n                </smart-icon>\n              }\n            </div>\n          }\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].translator !== undefined\n            ) {\n            <div\n              class=\"smart-table-cell-text\"\n              >\n              {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n            </div>\n          }\n          @if (\n            !smartTable.customSmartTableHeaders ||\n            (smartTable.customSmartTableHeaders &&\n            (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n            ) {\n            <div\n              >\n              @if (header.propertyName === 'icon') {\n                <smart-icon\n                  [icon]=\"getValue(row, header.propertyName)!\"\n                  >\n                </smart-icon>\n              }\n              @if (header.propertyName === 'img') {\n                <img\n                  [src]=\"getValue(row, header.propertyName)\"\n                  alt=\"\"\n                  class=\"smarttableImg\"\n                  />\n              }\n              @if (\n                header.propertyName !== 'icon' &&\n                header.propertyName !== 'img' &&\n                header.propertyName !== 'option' &&\n                header.propertyName !== 'button'\n                ) {\n                @if (columnTemplate(i); as template) {\n                  <smart-html-cell\n                    [row]=\"row\"\n                    [template]=\"template\"\n                    [gridIdentifier]=\"smartTable.getGridId()\"\n                  ></smart-html-cell>\n                } @else if (isTextContent(i)) {\n                  <div class=\"smart-table-cell-text\">{{ getValue(row, header.propertyName) }}</div>\n                } @else {\n                  <div\n                    class=\"smart-table-cell-text\"\n                    [innerHtml]=\"getValue(row, header.propertyName)\"\n                  ></div>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid var(--color-border, #e4eaf2);padding:.5rem;gap:.5rem}.mobileTableRow.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.mobileTableRow.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.mobileTableRow.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.mobileTableRow.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}.mobileTableRow.sm-grid-row-moved{font-style:italic}.mobileTableRow.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}.mobileTableRow.selected{color:inherit}.mobileTableRow.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) );background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint));box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color, #384372)}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"] }]
+            args: [{ selector: 'lib-mobile-table', imports: [NgClass, NgStyle, MatCheckbox, SmartIconComponent, SmartTooltipDirective, MatTooltip, MatIconButton, MatButton, UiActionToolbarComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe, SmartHtmlCellComponent], template: "<div class=\"mobileTable\">\n  @for (row of smartTable.tableRows; track trackRow($index, row)) {\n    <div\n      class=\"mobileTableRow\"\n      [ngClass]=\"getRowClasses(row)\"\n      [ngStyle]=\"getRowStyles(row)\"\n      [attr.data-testid]=\"row?.id ?? null\"\n      >\n      @if (showRowStateColumn) {\n        <div class=\"mobileTableCell sm-grid-row-state-cell\" [attr.data-testid]=\"rowStateColumn\">\n          @if (rowStateIcon(row); as icon) {\n            <smart-icon\n              class=\"sm-grid-row-state-icon\"\n              [ngClass]=\"rowStateIconClass(row) ?? ''\"\n              [icon]=\"icon\"\n              color=\"\"\n              role=\"img\"\n              [attr.aria-label]=\"rowStateLabel(row)\"\n              [matTooltip]=\"rowStateLabel(row) ?? ''\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n        <div\n          class=\"mobileTableCell\"\n          (click)=\"handleOnRowClick($event, row)\"\n          (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n          >\n          <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n            {{ header.label }}\n          </div>\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].propertyName === 'select'\n            ) {\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n              [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n              >\n            </mat-checkbox>\n          }\n          @if (\n            smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n            !columnTemplate(i)\n            ) {\n            <div\n              >\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n                <div>\n                  <mat-checkbox\n                    [disabled]=\"true\"\n                    [checked]=\"getValue(row, header.propertyName)\"\n                  ></mat-checkbox>\n                </div>\n              }\n              @if (\n                smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n                smartTable.customSmartTableHeaders[i].properties?.icons?.length\n                ) {\n                <div\n                  >\n                  <smart-icon\n                    [smartTooltip]=\"getToolTip(row, i)\"\n                    [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n                    [color]=\"getColor(getValue(row, header.propertyName), i)\"\n                    >\n                  </smart-icon>\n                </div>\n              }\n            </div>\n          }\n          @if (isImageResource(row, header.propertyName)) {\n            <div>\n              <smart-icon\n                [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n                [color]=\"getImageResourceColor(row, header.propertyName)\"\n                >\n              </smart-icon>\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n            <div\n              class=\"smart-table-buttons-col\"\n              >\n              @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n                <div>\n                  @if (showButton(button, row)) {\n                    <div>\n                      @switch (button.type) {\n                        @case (smartTableButtonType.ICON) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-icon-button\n                            color=\"{{ button.color }}\"\n                            >\n                            <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                          </button>\n                        }\n                        @case (smartTableButtonType.NORMAL) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        @case (smartTableButtonType.RAISED) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-raised-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        <!------ MENU ------>\n                        @case (smartTableButtonType.MENU) {\n                          <div class=\"menu-button\">\n                            <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getRowColumnAction(row, defaultActionToolbarId)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"row.id\"\n                              [actionParams]=\"{ model: row }\"\n                              (actionFired)=\"onRowActionFired(row, $event)\"\n                            ></smart-ui-action-toolbar>\n                            <!------ GENERIC HAMBURGER ------>\n                            @if (shouldShowMenuButton(row)) {\n                              <smart-ui-action-toolbar\n                                [uiActionModels]=\"getMenuActions(row)\"\n                                [widgetId]=\"smartTable.getGridId()\"\n                                [nodeId]=\"row.id\"\n                                [actionParams]=\"{ model: row }\"\n                                (actionFired)=\"onRowActionFired(row, $event)\"\n                              ></smart-ui-action-toolbar>\n                            }\n                            <!------ MENU ------>\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n            <div>\n              @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n                <smart-icon\n                  [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                  [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                  [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                  >\n                </smart-icon>\n              }\n            </div>\n          }\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].translator !== undefined\n            ) {\n            <div\n              class=\"smart-table-cell-text\"\n              >\n              {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n            </div>\n          }\n          @if (\n            !smartTable.customSmartTableHeaders ||\n            (smartTable.customSmartTableHeaders &&\n            (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n            ) {\n            <div\n              >\n              @if (header.propertyName === 'icon') {\n                <smart-icon\n                  [icon]=\"getValue(row, header.propertyName)!\"\n                  >\n                </smart-icon>\n              }\n              @if (header.propertyName === 'img') {\n                <img\n                  [src]=\"getValue(row, header.propertyName)\"\n                  alt=\"\"\n                  class=\"smarttableImg\"\n                  />\n              }\n              @if (\n                header.propertyName !== 'icon' &&\n                header.propertyName !== 'img' &&\n                header.propertyName !== 'option' &&\n                header.propertyName !== 'button'\n                ) {\n                @if (columnTemplate(i); as template) {\n                  <smart-html-cell\n                    [row]=\"row\"\n                    [template]=\"template\"\n                    [gridIdentifier]=\"smartTable.getGridId()\"\n                  ></smart-html-cell>\n                } @else if (isTextContent(i)) {\n                  <div class=\"smart-table-cell-text\">{{ getValue(row, header.propertyName) }}</div>\n                } @else {\n                  <div\n                    class=\"smart-table-cell-text\"\n                    [innerHtml]=\"getValue(row, header.propertyName)\"\n                  ></div>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid var(--color-border, #e4eaf2);padding:.5rem;gap:.5rem}.mobileTableRow.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.mobileTableRow.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.mobileTableRow.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.mobileTableRow.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}.mobileTableRow.sm-grid-row-moved{font-style:italic}.mobileTableRow.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}.mobileTableRow.selected{color:inherit}.mobileTableRow.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) );background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint));box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color, #384372)}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"] }]
         }] });
 
 class SmarttableComponent {
@@ -27959,7 +28897,7 @@ class UiActionFileUploadDialogComponent {
         this.service.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionFileUploadDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionFileUploadDialogComponent, isStandalone: true, selector: "lib-ui-action-file-upload-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\n  <div class=\"headerContainer\">\n    <h3 class=\"color-accent-700\">\n      {{ getTitle() }}\n    </h3>\n  </div>\n\n  @if(getText()){\n  <p>\n    {{ getText() }}\n  </p>\n  } @if(descriptor){\n  <smart-upload-widget\n    [uploadDescriptor]=\"descriptor.upload\"\n    [isMultiple]=\"isMultiple ?? true\"\n    (uploadFilesEvent)=\"upload($event)\"\n  />\n  }\n\n  <div class=\"folderNameDialogButtonsContainer\">\n    <ui-action-button [descriptor]=\"cancelButton\" (actionClick)=\"cancel()\"></ui-action-button>\n  </div>\n</div>\n", styles: [".folderNameDialogContainer{display:flex;flex-direction:column;justify-content:center;gap:1rem;min-width:30vw}photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:.5rem}.headerContainer ::ng-deep button{color:var(--primary-color);border:unset}.headerContainer h3{margin:0;font-size:1.5rem}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-start;gap:.5rem}.message{text-align:center;color:#6b7280}.uploadField{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem;padding:1rem}.folderNameDialogButtonsContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.8)}.headerContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.1)}@media(max-width:900px){.folderNameDialogContainer{width:100%}}.fileSize{padding-left:1rem;display:flex;justify-content:flex-end}.fileData{display:flex;flex-direction:column;justify-content:flex-end;padding-right:1rem}\n"], dependencies: [{ kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionFileUploadDialogComponent, isStandalone: true, selector: "lib-ui-action-file-upload-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\n  <div class=\"headerContainer\">\n    <h3 class=\"color-accent-700\">\n      {{ getTitle() }}\n    </h3>\n  </div>\n\n  @if(getText()){\n  <p>\n    {{ getText() }}\n  </p>\n  } @if(descriptor){\n  <smart-upload-widget\n    [uploadDescriptor]=\"descriptor.upload\"\n    [isMultiple]=\"isMultiple ?? true\"\n    (uploadFilesEvent)=\"upload($event)\"\n  />\n  }\n\n  <div class=\"folderNameDialogButtonsContainer\">\n    <ui-action-button [descriptor]=\"cancelButton\" (actionClick)=\"cancel()\"></ui-action-button>\n  </div>\n</div>\n", styles: [".folderNameDialogContainer{display:flex;flex-direction:column;justify-content:center;gap:1rem;min-width:30vw}photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:.5rem}.headerContainer ::ng-deep button{color:var(--primary-color);border:unset}.headerContainer h3{margin:0;font-size:1.5rem}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-start;gap:.5rem}.message{text-align:center;color:#6b7280}.uploadField{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem;padding:1rem}.folderNameDialogButtonsContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.8)}.headerContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.1)}@media(max-width:900px){.folderNameDialogContainer{width:100%}}.fileSize{padding-left:1rem;display:flex;justify-content:flex-end}.fileData{display:flex;flex-direction:column;justify-content:flex-end;padding-right:1rem}\n"], dependencies: [{ kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled", "sources", "capture"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionFileUploadDialogComponent, decorators: [{
             type: Component,
@@ -28834,5 +29772,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACLEntry, APIS$5 as APIS, AclEditingViewComponent, ApiModule$5 as ApiModule, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, CUSTOM_DIAGRAM_OPTIONS, CloseResult, CodeEditorLang, ComponentFactoryService, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DEFAULT_ROW_LAYOUT, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionBuilderUiModelTypeEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GridColumnContentType, GridDataAccessConfigKindEnum, GridDefaultRowActionTrigger, GridRowStateDisplay, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, PageExportFieldScope, PageExportSelectionKind, PageExportValueType, PageExportValuesSource, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DATE_FORMATS, SMART_DEFAULT_VIEW_COMPONENTS, SMART_MESSAGE_DEFAULTS, SMART_NG_CLIENT_CONFIG, SMART_ROW_LAYOUT_COMPONENT, SearchPageComponent, SelectAllMode, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SmartActionHost, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentDetachedDirective, SmartComponentHost, SmartComponentLayoutComponent, SmartDateFnsAdapter, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionService, SmartFileEditorComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorService, SmartFilterExpressionFieldComponent, SmartFilterPosition, SmartFilterType, SmartFilterWidgetComponent, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridService, SmartGridType, SmartIconComponent, SmartIconService, SmartKeybindingService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarService, SmartNavigationService, SmartNgClientFeatureKind, SmartService, SmartSessionService, SmartSessionTimerComponent, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartValueSetStore, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmarttreeGenericService, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarAlignment, ToolbarAppearance, ToolbarDirection, TreeArrowPosition, TreeGridControl, USE_ADVANCED_FILTER, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ValueSetDependencyWhenParentEmptyEnum, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, barChart, bubbleChart, createBasicOptions, doughnutChart, formatChord, formatMessage, hasGroupEditActions, horizontalBarChart, horizontalStackedBarChart, injectSmartComponent, isMacPlatform, isMergedExtra, matches, multiAxisLineChart, parseChord, pieChart, polarAreaChart, provideSmartNgClient, radarChart, registerSmartWidget, resolveDateLocale, resolveSlot, resolveSmartNgClientConfig, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter, withSmartDiagram, withSmartMap };
+export { ACLEntry, APIS$5 as APIS, AclEditingViewComponent, ApiModule$5 as ApiModule, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, CUSTOM_DIAGRAM_OPTIONS, CaptureDeviceStart, CaptureHandover, CaptureMode, CaptureOpenDirection, CloseResult, CodeEditorLang, ComponentFactoryService, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DEFAULT_ROW_LAYOUT, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FileUploaderSource, FileUploaderThumbnail, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionBuilderUiModelTypeEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GridColumnContentType, GridDataAccessConfigKindEnum, GridDefaultRowActionTrigger, GridRowStateDisplay, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, PageExportFieldScope, PageExportSelectionKind, PageExportValueType, PageExportValuesSource, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DATE_FORMATS, SMART_DEFAULT_VIEW_COMPONENTS, SMART_MESSAGE_DEFAULTS, SMART_NG_CLIENT_CONFIG, SMART_ROW_LAYOUT_COMPONENT, SearchPageComponent, SelectAllMode, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SmartActionHost, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentDetachedDirective, SmartComponentHost, SmartComponentLayoutComponent, SmartDateFnsAdapter, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionService, SmartFileEditorComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorService, SmartFilterExpressionFieldComponent, SmartFilterPosition, SmartFilterType, SmartFilterWidgetComponent, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridService, SmartGridType, SmartIconComponent, SmartIconService, SmartKeybindingService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarService, SmartNavigationService, SmartNgClientFeatureKind, SmartService, SmartSessionService, SmartSessionTimerComponent, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartValueSetStore, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmarttreeGenericService, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarAlignment, ToolbarAppearance, ToolbarDirection, TreeArrowPosition, TreeGridControl, USE_ADVANCED_FILTER, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ValueSetDependencyWhenParentEmptyEnum, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, barChart, bubbleChart, createBasicOptions, doughnutChart, formatChord, formatMessage, hasGroupEditActions, horizontalBarChart, horizontalStackedBarChart, injectSmartComponent, isMacPlatform, isMergedExtra, matches, multiAxisLineChart, parseChord, pieChart, polarAreaChart, provideSmartNgClient, radarChart, registerSmartWidget, resolveDateLocale, resolveSlot, resolveSmartNgClientConfig, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter, withSmartDiagram, withSmartMap };
 //# sourceMappingURL=smartbit4all-ng-client.mjs.map