@smartbit4all/ng-client 7.3.40 → 7.3.41

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, NgZone, DestroyRef, forwardRef, createComponent, EnvironmentInjector, ApplicationRef, ChangeDetectionStrategy, ViewEncapsulation, Pipe, viewChild, 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';
@@ -7805,6 +7805,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,7 +9099,55 @@ class UploadWidgetUtils {
         const value = parseFloat((bytes / Math.pow(k, i)).toFixed(1));
         return `${value} ${sizes[i]}`;
     }
-}
+    /** 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',
+};
 
 class SmartfileuploaderComponent {
     constructor() {
@@ -9077,6 +9167,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 +9178,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 +9199,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) {
@@ -9134,6 +9234,9 @@ class SmartfileuploaderComponent {
         }
     }
     onDrop(event) {
+        if (!this.pickerShown()) {
+            return;
+        }
         event.preventDefault();
         this.isDragOver = false;
         if (!event.dataTransfer?.files)
@@ -9142,6 +9245,9 @@ class SmartfileuploaderComponent {
         this.processFiles(fileList);
     }
     onDragOver(event) {
+        if (!this.pickerShown()) {
+            return;
+        }
         event.preventDefault();
         this.isDragOver = true;
     }
@@ -9228,68 +9334,144 @@ 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{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{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.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 */ []));
         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 */ []));
+        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();
+        /** 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'), /* @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', '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 */ []));
+    }
+    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.isPanelOpen.update((open) => !open);
+    }
+    ngOnDestroy() {
+        this.stopCamera();
+    }
     async startCamera() {
-        this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
+        this.cameraError.set(false);
+        const request = ++this.cameraRequest;
+        let stream;
+        try {
+            stream = await this.openCameraStream();
+        }
+        catch {
+            if (request === this.cameraRequest) {
+                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.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++;
+        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;
@@ -9312,6 +9494,34 @@ class PhotoCaptureWidgetComponent {
         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.photoCaptured.emit([UploadWidgetUtils.createRecordingFile(blob, 'video', 'video/mp4')]);
+            this.stopCamera();
+        };
+        recorder.start();
+        this.recorder = recorder;
+        this.isRecording = true;
+    }
+    /** The recording state holds until onstop hands the video over and stops the camera. */
+    stopRecording() {
+        this.recorder?.stop();
+    }
     getPhotoDataURL() {
         return this.canvasRef.nativeElement.toDataURL('image/png');
     }
@@ -9346,26 +9556,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 +9613,16 @@ class PhotoCaptureWidgetComponent {
             return file;
         }
     }
+    createButton(title, icon, color = 'primary') {
+        return { type: UiActionButtonType.RAISED, 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 } }, 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: "@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\">\n    <video #video autoplay [muted]=\"true\" [hidden]=\"isCaptured || !cameraActive\"></video>\n    <canvas #canvas [hidden]=\"!isCaptured || cameraActive\"></canvas>\n    @if (cameraError()) {\n      <p class=\"message\">{{ texts().cameraError }}</p>\n    } @else if (isRecording) {\n      <p class=\"message\">{{ texts().recording }}</p>\n    } @else if (!cameraActive && !isCaptured) {\n      @if (mode() === 'VIDEO') {\n        <p class=\"message\">{{ texts().switchOnForVideo }}</p>\n      } @else {\n        <p class=\"message\">{{ texts().switchOnCameraHint }}</p>\n      }\n    }\n    <div class=\"controls\">\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      @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        <!-- 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      } @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    </div>\n  </div>\n}\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"] }] }); }
 }
 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: [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\">\n    <video #video autoplay [muted]=\"true\" [hidden]=\"isCaptured || !cameraActive\"></video>\n    <canvas #canvas [hidden]=\"!isCaptured || cameraActive\"></canvas>\n    @if (cameraError()) {\n      <p class=\"message\">{{ texts().cameraError }}</p>\n    } @else if (isRecording) {\n      <p class=\"message\">{{ texts().recording }}</p>\n    } @else if (!cameraActive && !isCaptured) {\n      @if (mode() === 'VIDEO') {\n        <p class=\"message\">{{ texts().switchOnForVideo }}</p>\n      } @else {\n        <p class=\"message\">{{ texts().switchOnCameraHint }}</p>\n      }\n    }\n    <div class=\"controls\">\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      @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        <!-- 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      } @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    </div>\n  </div>\n}\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"] }]
+        }], propDecorators: { videoRef: [{
                 type: ViewChild,
                 args: ['video']
             }], canvasRef: [{
@@ -9438,7 +9631,7 @@ 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"] }] } });
+            }], 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 }] }], photoCaptured: [{ type: i0.Output, args: ["photoCaptured"] }] } });
 
 class VoiceRecordWidgetComponent {
     constructor() {
@@ -9446,12 +9639,21 @@ class VoiceRecordWidgetComponent {
         this.changeDetectorRef = inject(ChangeDetectorRef);
         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 */ []));
         this.recordingSaved = output();
         this.isRecording = false;
         this.recordedBlob = null;
         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,
@@ -9521,8 +9723,7 @@ class VoiceRecordWidgetComponent {
             barRadius: 5,
         });
         this.wavesurfer.setVolume(1);
-        //So we support Safari
-        const mimeType = MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : 'audio/mp4';
+        const mimeType = UploadWidgetUtils.chooseRecorderMimeType('audio');
         this.record = this.wavesurfer.registerPlugin(RecordPlugin.create({
             renderRecordedAudio: true,
             scrollingWaveform: true,
@@ -9562,6 +9763,7 @@ class VoiceRecordWidgetComponent {
         if (!this.record)
             throw new Error('Voice recorder plugin is not initialized.');
         this.updateViewState(() => {
+            this.microphoneError.set(false);
             this.isWaveformOpen = true;
             this.isRecording = true;
             this.isPlaying = false;
@@ -9579,6 +9781,7 @@ class VoiceRecordWidgetComponent {
             this.updateViewState(() => {
                 this.isRecording = false;
                 this.isWaveformOpen = !!this.recordedBlob;
+                this.microphoneError.set(true);
             });
             throw error;
         }
@@ -9609,13 +9812,7 @@ class VoiceRecordWidgetComponent {
     }
     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 file = UploadWidgetUtils.createRecordingFile(this.recordedBlob, 'recording', 'audio/mp4');
             this.recordingSaved.emit(file);
             // Destroy completely so next recording initializes fresh
             this.wavesurfer?.destroy();
@@ -9670,18 +9867,18 @@ 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 } }, 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@if (showMicrophoneError() && microphoneError()) {\n  <p class=\"message\">{{ texts().microphoneError }}</p>\n}\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}\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], 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@if (showMicrophoneError() && microphoneError()) {\n  <p class=\"message\">{{ texts().microphoneError }}</p>\n}\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}\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"] }] } });
+            }], 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 }] }], recordingSaved: [{ type: i0.Output, args: ["recordingSaved"] }] } });
 
 class UploadWidgetComponent {
     constructor() {
@@ -9691,8 +9888,18 @@ class UploadWidgetComponent {
         ...(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.uploadFilesEvent = output();
         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 +9916,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 +9935,75 @@ 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);
+    }
+    startCapture(source) {
+        if (source === FileUploaderSource.CAMERA_PHOTO) {
+            this.photoCapture?.openCapture();
         }
-        else {
-            this.fileUploadMaterial.files.push(...files);
+        else if (source === FileUploaderSource.CAMERA_VIDEO) {
+            this.videoCapture?.openCapture();
+        }
+        else if (source === FileUploaderSource.MICROPHONE) {
+            this.isRecorderOpen.update((open) => !open);
         }
     }
+    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 +10012,172 @@ 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 } }, 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        [texts]=\"texts\"\n        [maxFileSize]=\"maxSizeMb * 1024 * 1024\"\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        [texts]=\"texts\"\n        (photoCaptured)=\"uploadImage($event)\"\n      ></photo-capture-widget>\n    }\n    @if (isRecorderOpen()) {\n      <voice-record-widget\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]=\"maxSizeMb * 1024 * 1024\"\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{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"], outputs: ["photoCaptured"] }, { kind: "component", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: ["openDirection", "texts", "showMicrophoneError"], 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        [texts]=\"texts\"\n        [maxFileSize]=\"maxSizeMb * 1024 * 1024\"\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        [texts]=\"texts\"\n        (photoCaptured)=\"uploadImage($event)\"\n      ></photo-capture-widget>\n    }\n    @if (isRecorderOpen()) {\n      <voice-record-widget\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]=\"maxSizeMb * 1024 * 1024\"\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{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 }] }], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }] } });
+const CAPTURE_BUTTONS = {
+    [FileUploaderSource.CAMERA_PHOTO]: {
+        icon: 'photo_camera',
+        cssClass: 'capturePhotoButton',
+        tooltip: 'capturePhoto',
+        noun: 'photo',
+    },
+    [FileUploaderSource.CAMERA_VIDEO]: {
+        icon: 'videocam',
+        cssClass: 'captureVideoButton',
+        tooltip: 'captureVideo',
+        noun: 'video',
+    },
+    [FileUploaderSource.MICROPHONE]: {
+        icon: 'mic',
+        cssClass: 'recordAudioButton',
+        tooltip: 'recordAudio',
+        noun: 'audio',
+    },
+};
+
+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 +10205,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 +10242,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 +10297,7 @@ class SmartFileEditorComponent {
             if (value) {
                 this.clearedFile = undefined;
             }
+            this.requestPreview();
             this.cdr.markForCheck();
         }
     }
@@ -9896,6 +10323,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 +10376,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        [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:#f1f1f1;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"], 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 +10386,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        [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:#f1f1f1;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 +11295,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 +11318,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 +11413,7 @@ class SmartMultiFileEditorComponent {
     writeValue(value) {
         if (value !== undefined && this._widgetInstance) {
             this._widgetInstance.value = value;
+            this.requestPreviews();
             this.cdr.markForCheck();
         }
     }
@@ -10976,6 +11434,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 +11457,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        [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:#f1f1f1}.playTile{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:#2f3550;color:#fff;cursor:pointer}.playTile.audioTile{background:#e8eaf6;color:var(--primary-color)}.playTile.open{outline:2px solid var(--primary-color);outline-offset:1px}.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"], outputs: ["uploadFilesEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartMultiFileEditorComponent, decorators: [{
             type: Component,
@@ -10996,7 +11467,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        [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:#f1f1f1}.playTile{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:#2f3550;color:#fff;cursor:pointer}.playTile.audioTile{background:#e8eaf6;color:var(--primary-color)}.playTile.open{outline:2px solid var(--primary-color);outline-offset:1px}.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 +11704,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"], outputs: ["recordingSaved"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartVoiceRecorderComponent, decorators: [{
             type: Component,
@@ -27959,7 +28437,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"], 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 +29312,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, 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