@smartbit4all/ng-client 7.3.41 → 7.3.43

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, DestroyRef, forwardRef, createComponent, EnvironmentInjector, ApplicationRef, ChangeDetectionStrategy, ViewEncapsulation, Pipe, viewChild, runInInjectionContext, EventEmitter, Output, makeEnvironmentProviders, importProvidersFrom, provideEnvironmentInitializer } from '@angular/core';
+import { InjectionToken, reflectComponentType, Injectable, inject, DOCUMENT, PLATFORM_ID, Optional, Inject, SkipSelf, NgModule, RendererStyleFlags2, input, computed, Component, HostListener, HostBinding, Directive, ViewContainerRef, ElementRef, Renderer2, ChangeDetectorRef, Input, output, Injector, signal, afterNextRender, CSP_NONCE, ViewChild, ViewChildren, effect, untracked, viewChild, NgZone, DestroyRef, forwardRef, createComponent, EnvironmentInjector, ApplicationRef, ChangeDetectionStrategy, ViewEncapsulation, Pipe, runInInjectionContext, EventEmitter, Output, makeEnvironmentProviders, importProvidersFrom, provideEnvironmentInitializer } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpErrorResponse, HttpParams, provideHttpClient, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
@@ -3481,7 +3481,13 @@ class SmartTooltipDirective {
         ...(ngDevMode ? [undefined, { debugName: "smartTooltipClass" }] : /* istanbul ignore next */ []));
         this.cursor = 'pointer';
     }
-    // A keyboard user reaches the element by focus, never by hover.
+    // A keyboard user reaches the element by focus, never by hover; a focus a script gives
+    // (a dialog restoring it, the focus restore after a push) is no reason to show.
+    focusin(event) {
+        if (event.target.matches(':focus-visible')) {
+            this.mouseover();
+        }
+    }
     mouseover() {
         const smartTooltip = this.smartTooltip();
         if (!smartTooltip)
@@ -3515,7 +3521,7 @@ class SmartTooltipDirective {
         return delay ? delay : 2000;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SmartTooltipDirective, isStandalone: true, selector: "[smartTooltip]", inputs: { smartTooltip: { classPropertyName: "smartTooltip", publicName: "smartTooltip", isSignal: true, isRequired: false, transformFunction: null }, smartTooltipClass: { classPropertyName: "smartTooltipClass", publicName: "smartTooltipClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "mouseover()", "mouseover": "mouseover()", "focusout": "mouseleave()", "mouseleave": "mouseleave()" }, properties: { "style.cursor": "this.cursor" } }, providers: [MatTooltip], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SmartTooltipDirective, isStandalone: true, selector: "[smartTooltip]", inputs: { smartTooltip: { classPropertyName: "smartTooltip", publicName: "smartTooltip", isSignal: true, isRequired: false, transformFunction: null }, smartTooltipClass: { classPropertyName: "smartTooltipClass", publicName: "smartTooltipClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "focusin($event)", "mouseover": "mouseover()", "focusout": "mouseleave()", "mouseleave": "mouseleave()" }, properties: { "style.cursor": "this.cursor" } }, providers: [MatTooltip], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartTooltipDirective, decorators: [{
             type: Directive,
@@ -3526,10 +3532,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }], propDecorators: { smartTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartTooltip", required: false }] }], smartTooltipClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartTooltipClass", required: false }] }], cursor: [{
                 type: HostBinding,
                 args: ['style.cursor']
-            }], mouseover: [{
+            }], focusin: [{
                 type: HostListener,
-                args: ['focusin']
-            }, {
+                args: ['focusin', ['$event']]
+            }], mouseover: [{
                 type: HostListener,
                 args: ['mouseover']
             }], mouseleave: [{
@@ -7341,8 +7347,8 @@ class SmartdialogService {
         });
         return this.dialogRef;
     }
-    createDialogRef(smartDialog, component) {
-        const dialogRef = this.dialog.open(component, { data: smartDialog });
+    createDialogRef(smartDialog, component, config) {
+        const dialogRef = this.dialog.open(component, { ...config, data: smartDialog });
         dialogRef.afterClosed().subscribe((result) => {
             this.handleAfterClosed(result);
             dialogRef.close();
@@ -7773,6 +7779,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 const APIS$3 = [DefaultService];
 
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ * When the camera or the microphone starts: AUTO the moment the capture UI opens (the recorder starts recording), MANUAL on a switch-on button.
+ */
+var CaptureDeviceStart;
+(function (CaptureDeviceStart) {
+    CaptureDeviceStart["AUTO"] = "AUTO";
+    CaptureDeviceStart["MANUAL"] = "MANUAL";
+})(CaptureDeviceStart || (CaptureDeviceStart = {}));
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ * What happens to a taken photo, a stopped video or a stopped recording: CONFIRM shows it for confirmation (retake / use, playback / save), IMMEDIATE hands it to the widget at once.
+ */
+var CaptureHandover;
+(function (CaptureHandover) {
+    CaptureHandover["CONFIRM"] = "CONFIRM";
+    CaptureHandover["IMMEDIATE"] = "IMMEDIATE";
+})(CaptureHandover || (CaptureHandover = {}));
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ * Where the capture UI of a file widget opens: INLINE under the capture buttons, DIALOG in a dialog of its own.
+ */
+var CaptureMode;
+(function (CaptureMode) {
+    CaptureMode["INLINE"] = "INLINE";
+    CaptureMode["DIALOG"] = "DIALOG";
+})(CaptureMode || (CaptureMode = {}));
+
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ * The side the inline recorder\'s waveform strip grows to from its microphone button: LEFT to the left with the button at the right edge, RIGHT to the right with the button at the left edge.
+ */
+var CaptureOpenDirection;
+(function (CaptureOpenDirection) {
+    CaptureOpenDirection["LEFT"] = "LEFT";
+    CaptureOpenDirection["RIGHT"] = "RIGHT";
+})(CaptureOpenDirection || (CaptureOpenDirection = {}));
+
 /**
  * Form layout definition
  * Contains form layout definition objects.
@@ -9099,6 +9185,18 @@ class UploadWidgetUtils {
         const value = parseFloat((bytes / Math.pow(k, i)).toFixed(1));
         return `${value} ${sizes[i]}`;
     }
+    /** The size of a capture for the Capture Dialog's captions: a decimal point in English, a
+     * decimal comma in Hungarian and without a known locale. */
+    static formatCapturedSize(bytes, locale) {
+        const size = UploadWidgetUtils.formatSize(bytes);
+        return locale?.startsWith('en') ? size : size.replace('.', ',');
+    }
+    /** A length of time as mm:ss. */
+    static formatDuration(milliseconds) {
+        return [Math.floor((milliseconds % 3600000) / 60000), Math.floor((milliseconds % 60000) / 1000)]
+            .map((v) => (v < 10 ? '0' + v : v))
+            .join(':');
+    }
     /** The recording mime of a media kind: webm where the browser records it, else mp4 (Safari). */
     static chooseRecorderMimeType(kind) {
         return MediaRecorder.isTypeSupported(`${kind}/webm`) ? `${kind}/webm` : `${kind}/mp4`;
@@ -9110,6 +9208,89 @@ class UploadWidgetUtils {
         const ext = mimeType.includes('webm') ? 'webm' : 'mp4';
         return new File([blob], `${prefix}_${formattedDate}.${ext}`, { type: mimeType });
     }
+    /** An image re-encoded as a jpeg, smaller step by step until it fits; the file itself when it
+     * does not fit at the floor of the quality and the size, or is no image. */
+    static async compressImageFile(file, maxFileSize) {
+        if (!file.type.startsWith('image/'))
+            return file;
+        const img = await new Promise((resolve, reject) => {
+            const url = URL.createObjectURL(file);
+            const image = new Image();
+            image.onload = () => {
+                URL.revokeObjectURL(url);
+                resolve(image);
+            };
+            image.onerror = (e) => {
+                URL.revokeObjectURL(url);
+                reject(e);
+            };
+            image.src = url;
+        });
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return file;
+        let width = img.naturalWidth;
+        let height = img.naturalHeight;
+        let quality = 0.9;
+        const minQuality = 0.4;
+        const minDimension = 640;
+        const getBlob = (q) => new Promise((resolve) => {
+            canvas.width = width;
+            canvas.height = height;
+            ctx.clearRect(0, 0, width, height);
+            ctx.drawImage(img, 0, 0, width, height);
+            canvas.toBlob((blob) => {
+                if (blob)
+                    resolve(blob);
+            }, 'image/jpeg', q);
+        });
+        let blob = await getBlob(quality);
+        while (blob.size > maxFileSize) {
+            if (quality > minQuality) {
+                quality -= 0.1;
+            }
+            else if (width > minDimension && height > minDimension) {
+                width = Math.floor(width * 0.8);
+                height = Math.floor(height * 0.8);
+                quality = 0.9;
+            }
+            else {
+                break;
+            }
+            blob = await getBlob(quality);
+        }
+        if (blob.size <= maxFileSize) {
+            return new File([blob], file.name, { type: 'image/jpeg' });
+        }
+        else {
+            return file;
+        }
+    }
+    /** The descriptor of a capture button: raised, in the primary colour unless told otherwise. */
+    static createCaptureButton(title, icon, color = 'primary', type = UiActionButtonType.RAISED) {
+        return { type, title, icon, iconPosition: IconPosition.PRE, color };
+    }
+    /** The button that takes a picture. */
+    static createTakePictureButton(texts) {
+        return UploadWidgetUtils.createCaptureButton(texts.takePicture, 'camera');
+    }
+    /** The button that starts a video recording. */
+    static createStartRecordingButton(texts) {
+        return UploadWidgetUtils.createCaptureButton(texts.startRecording, 'fiber_manual_record');
+    }
+    /** The button that stops a recording, in the colour of its host. */
+    static createStopRecordingButton(texts, color) {
+        return UploadWidgetUtils.createCaptureButton(texts.stopRecording, 'stop', color);
+    }
+    /** The button that discards the kept capture for a new one. */
+    static createRetakeButton(texts, type = UiActionButtonType.RAISED) {
+        return UploadWidgetUtils.createCaptureButton(texts.retake, 'replay', 'primary', type);
+    }
+    /** The button that accepts the kept capture. */
+    static createUseButton(texts) {
+        return UploadWidgetUtils.createCaptureButton(texts.use, 'check');
+    }
     /** 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 };
@@ -9147,11 +9328,23 @@ const UPLOAD_ZONE_DEFAULT_TEXTS = {
     cameraError: 'A kamera nem érhető el.',
     microphoneError: 'A mikrofon nem érhető el.',
     play: 'Lejátszás',
+    photoDialogTitle: 'Fénykép készítése',
+    videoDialogTitle: 'Videó felvétele',
+    audioDialogTitle: 'Hangfelvétel',
+    cancel: 'Mégse',
+    retake: 'Újra',
+    use: 'Használ',
+    save: 'Mentés',
+    capturedPhoto: 'Elkészült kép',
+    capturedVideo: 'Felvétel',
+    recordingHint: 'A lejátszás ikon visszajátssza, a mikrofon gomb új felvételt indít (felülírja ezt).',
+    microphoneRetryHint: 'A mikrofon gomb újra kéri az engedélyt.',
 };
 
 class SmartfileuploaderComponent {
     constructor() {
         this._snackBar = inject(MatSnackBar);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
         this.files = [];
         this.uploadCallback = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "uploadCallback" }] : /* istanbul ignore next */ []));
@@ -9225,6 +9418,8 @@ class SmartfileuploaderComponent {
         if (this.autoUpload() && this.errors.length == 0) {
             this.uploadFile();
         }
+        // A Capture Dialog hands its file over outside any template event of this view.
+        this.changeDetectorRef.markForCheck();
     }
     getFile(event) {
         if (event.target.files && event.target.files.length) {
@@ -9334,11 +9529,11 @@ 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 }, 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartfileuploaderComponent, isStandalone: true, selector: "smartfileuploader", inputs: { uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: true, transformFunction: null }, fileFormats: { classPropertyName: "fileFormats", publicName: "fileFormats", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, useIconButton: { classPropertyName: "useIconButton", publicName: "useIconButton", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, pickerShown: { classPropertyName: "pickerShown", publicName: "pickerShown", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n  [class.captureOnly]=\"!pickerShown()\"\n>\n  @if (pickerShown()) {\n    <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n      <input\n        #fileInput\n        id=\"addFile\"\n        placeholder=\"fileInput\"\n        type=\"file\"\n        (change)=\"getFile($event)\"\n        class=\"file\"\n        accept=\"{{ fileFormats()?.join(', ') }}\"\n        [size]=\"maxSizeMb()\"\n        [multiple]=\"isMultiple()\"\n        [disabled]=\"isDisabled()\"\n        style=\"display: none\"\n      />\n      <div class=\"fileUploadContentContainer\">\n        <div class=\"icon\">\n          @if (useIconButton()) {\n            <mat-label class=\"addFileButton\">\n              <mat-icon fontSet=\"material-symbols-outlined\" color=\"primary\" class=\"addCircle\"\n                >add_circle</mat-icon\n              >\n            </mat-label>\n          }\n          @if (!useIconButton()) {\n            <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n              {{ i18n!.addFile }}\n            </button>\n          }\n        </div>\n        <div class=\"labels\">\n          @if (useIconButton()) {\n            <mat-label class=\"label primary title\">\n              {{ i18n!.addFile }}\n            </mat-label>\n          }\n          <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n          <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n          <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n        </div>\n        @if (files.length) {\n          <div class=\"uploadButton\">\n            <ui-action-button\n              (actionClick)=\"uploadFile($event)\"\n              [code]=\"'default-upload'\"\n              [descriptor]=\"uploadButton\"\n            >\n            </ui-action-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.container.captureOnly{border:none}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon .addCircle{color:var(--primary-color)}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warn-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warn-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartfileuploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smartfileuploader', imports: [NgClass, MatLabel, MatIcon, MatButton, UiActionButtonComponent, SmartIconComponent], template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n  [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"] }]
+            args: [{ selector: 'smartfileuploader', imports: [NgClass, MatLabel, MatIcon, MatButton, UiActionButtonComponent, SmartIconComponent], template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n  [class.captureOnly]=\"!pickerShown()\"\n>\n  @if (pickerShown()) {\n    <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n      <input\n        #fileInput\n        id=\"addFile\"\n        placeholder=\"fileInput\"\n        type=\"file\"\n        (change)=\"getFile($event)\"\n        class=\"file\"\n        accept=\"{{ fileFormats()?.join(', ') }}\"\n        [size]=\"maxSizeMb()\"\n        [multiple]=\"isMultiple()\"\n        [disabled]=\"isDisabled()\"\n        style=\"display: none\"\n      />\n      <div class=\"fileUploadContentContainer\">\n        <div class=\"icon\">\n          @if (useIconButton()) {\n            <mat-label class=\"addFileButton\">\n              <mat-icon fontSet=\"material-symbols-outlined\" color=\"primary\" class=\"addCircle\"\n                >add_circle</mat-icon\n              >\n            </mat-label>\n          }\n          @if (!useIconButton()) {\n            <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n              {{ i18n!.addFile }}\n            </button>\n          }\n        </div>\n        <div class=\"labels\">\n          @if (useIconButton()) {\n            <mat-label class=\"label primary title\">\n              {{ i18n!.addFile }}\n            </mat-label>\n          }\n          <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n          <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n          <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n        </div>\n        @if (files.length) {\n          <div class=\"uploadButton\">\n            <ui-action-button\n              (actionClick)=\"uploadFile($event)\"\n              [code]=\"'default-upload'\"\n              [descriptor]=\"uploadButton\"\n            >\n            </ui-action-button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.container.captureOnly{border:none}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon .addCircle{color:var(--primary-color)}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warn-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warn-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"] }]
         }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -9346,8 +9541,658 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 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 }] }], pickerShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerShown", required: false }] }] } });
 
+/** The camera of one capture view: the stream, the recorder and the capture kept for a decision.
+ * The view calls release() when it closes. */
+class CameraDevice {
+    constructor(options) {
+        this.options = options;
+        /** A signal, because it is set after an `await`, outside the change detection of the click. */
+        this.isCameraActive = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCameraActive" }] : /* istanbul ignore next */ []));
+        /** Set when the browser gives no camera. */
+        this.cameraError = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cameraError" }] : /* istanbul ignore next */ []));
+        /** True while a camera request runs. */
+        this.isCameraStarting = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCameraStarting" }] : /* istanbul ignore next */ []));
+        this.isRecording = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRecording" }] : /* istanbul ignore next */ []));
+        this.isCaptured = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCaptured" }] : /* istanbul ignore next */ []));
+        /** A capture kept for retake or use under the CONFIRM handover. */
+        this.keptFiles = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keptFiles" }] : /* istanbul ignore next */ []));
+        /** The playback address of a kept video. */
+        this.keptVideoUrl = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keptVideoUrl" }] : /* istanbul ignore next */ []));
+        /** The milliseconds of the running video, kept as the length of the stopped one. */
+        this.recordingTime = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recordingTime" }] : /* istanbul ignore next */ []));
+        /** True while a host may not lose the capture by accident: a device is asked for or runs, or
+         * a capture waits for confirmation. */
+        this.isCaptureUnderWay = computed(() => this.isCameraStarting() ||
+            this.isCameraActive() ||
+            this.isRecording() ||
+            !!this.keptFiles(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCaptureUnderWay" }] : /* istanbul ignore next */ []));
+        this.recordingStartTime = 0;
+        /** Advanced by stopCamera(), so a stream the browser gives after a close is stopped at once. */
+        this.cameraRequest = 0;
+    }
+    async startCamera() {
+        this.cameraError.set(false);
+        this.isCameraStarting.set(true);
+        const request = ++this.cameraRequest;
+        let stream;
+        try {
+            stream = await this.openCameraStream();
+        }
+        catch {
+            if (request === this.cameraRequest) {
+                this.isCameraStarting.set(false);
+                this.cameraError.set(true);
+            }
+            return;
+        }
+        if (request !== this.cameraRequest) {
+            stream.getTracks().forEach((track) => track.stop());
+            return;
+        }
+        this.stream = stream;
+        const video = this.options.getVideoElement();
+        video.srcObject = this.stream;
+        video.play();
+        this.isCameraStarting.set(false);
+        this.isCameraActive.set(true);
+        this.isCaptured.set(false);
+    }
+    /** A video asks for the sound too; a desktop without a microphone records a silent one. */
+    async openCameraStream() {
+        if (this.options.mode() === 'VIDEO') {
+            try {
+                return await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+            }
+            catch {
+                // No microphone answers: the camera alone is asked below.
+            }
+        }
+        return navigator.mediaDevices.getUserMedia({ video: true });
+    }
+    /** Closing the camera mid-recording discards the recording. */
+    stopCamera() {
+        this.cameraRequest++;
+        this.isCameraStarting.set(false);
+        clearInterval(this.recordingClock);
+        if (this.recorder) {
+            this.recorder.onstop = null;
+            this.recorder.stop();
+            this.recorder = undefined;
+        }
+        this.isRecording.set(false);
+        this.stream?.getTracks().forEach((track) => track.stop());
+        this.stream = undefined;
+        this.isCameraActive.set(false);
+    }
+    toggleCamera() {
+        if (this.isCameraActive()) {
+            this.stopCamera();
+        }
+        else {
+            this.startCamera();
+        }
+    }
+    async capturePhoto() {
+        const video = this.options.getVideoElement();
+        const canvas = this.options.getCanvasElement();
+        const context = canvas.getContext('2d');
+        if (!context)
+            return;
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        context.drawImage(video, 0, 0);
+        const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.9));
+        if (!blob)
+            return;
+        let file = new File([blob], `photo_${Date.now()}.jpg`, { type: 'image/jpeg' });
+        const maxFileSize = this.options.maxFileSize();
+        if (maxFileSize && file.size > maxFileSize) {
+            file = await UploadWidgetUtils.compressImageFile(file, maxFileSize);
+        }
+        this.handOverCapture([file]);
+        this.isCaptured.set(true);
+        this.stopCamera();
+    }
+    /** A browser that records neither webm nor mp4 refuses the recorder: the camera error shows. */
+    startRecording() {
+        let recorder;
+        try {
+            recorder = new MediaRecorder(this.stream, {
+                mimeType: UploadWidgetUtils.chooseRecorderMimeType('video'),
+            });
+        }
+        catch {
+            this.cameraError.set(true);
+            return;
+        }
+        const chunks = [];
+        recorder.ondataavailable = (event) => chunks.push(event.data);
+        recorder.onstop = () => {
+            const blob = new Blob(chunks, { type: recorder.mimeType });
+            this.recorder = undefined;
+            this.updateRecordingTime();
+            this.handOverCapture([UploadWidgetUtils.createRecordingFile(blob, 'video', 'video/mp4')]);
+            this.stopCamera();
+        };
+        recorder.start();
+        this.recorder = recorder;
+        this.isRecording.set(true);
+        this.recordingStartTime = Date.now();
+        this.recordingTime.set(0);
+        this.recordingClock = setInterval(() => this.updateRecordingTime(), 1000);
+    }
+    updateRecordingTime() {
+        this.recordingTime.set(Date.now() - this.recordingStartTime);
+    }
+    /** The recording state holds until onstop hands the video over and stops the camera. */
+    stopRecording() {
+        this.recorder?.stop();
+    }
+    handOverCapture(files) {
+        if (this.options.handover() === CaptureHandover.IMMEDIATE) {
+            this.options.handOver(files);
+            return;
+        }
+        this.keptFiles.set(files);
+        if (this.options.mode() === 'VIDEO') {
+            this.keptVideoUrl.set(URL.createObjectURL(files[0]));
+        }
+    }
+    retakeCapture() {
+        this.discardKeptCapture();
+        if (this.options.deviceStart() === CaptureDeviceStart.AUTO) {
+            this.startCamera();
+        }
+    }
+    useCapture() {
+        this.options.handOver(this.keptFiles());
+        this.discardKeptCapture();
+    }
+    /** Stops the camera and drops what it kept: the close of the view. */
+    release() {
+        this.stopCamera();
+        this.discardKeptCapture();
+    }
+    discardKeptCapture() {
+        const videoUrl = this.keptVideoUrl();
+        if (videoUrl) {
+            URL.revokeObjectURL(videoUrl);
+        }
+        this.keptVideoUrl.set(undefined);
+        this.keptFiles.set(undefined);
+        this.isCaptured.set(false);
+    }
+}
+
+/** The camera view of the Capture Dialog: a fixed stage with the switch and the captions inside
+ * it, and the buttons in actionButtonsTemplate for the dialog's footer. */
+class CaptureCameraViewComponent {
+    constructor() {
+        this.injector = inject(Injector);
+        this.session = inject(SmartSessionService);
+        this.video = viewChild.required('video', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "video" }] : /* istanbul ignore next */ []));
+        this.canvas = viewChild.required('canvas', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []));
+        this.actionButtonsTemplate = viewChild('actionButtons', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionButtonsTemplate" }] : /* istanbul ignore next */ []));
+        this.mode = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.deviceStart = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deviceStart" }] : /* istanbul ignore next */ []));
+        this.handover = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handover" }] : /* istanbul ignore next */ []));
+        this.texts = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
+        this.maxFileSize = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
+        this.captured = output();
+        this.device = new CameraDevice({
+            mode: this.mode,
+            deviceStart: this.deviceStart,
+            handover: this.handover,
+            maxFileSize: this.maxFileSize,
+            getVideoElement: () => this.video().nativeElement,
+            getCanvasElement: () => this.canvas().nativeElement,
+            handOver: (files) => this.captured.emit(files),
+        });
+        /** The timer on the stage of a running video. */
+        this.recordingCaption = computed(() => UploadWidgetUtils.formatDuration(this.device.recordingTime()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recordingCaption" }] : /* istanbul ignore next */ []));
+        /** The kept capture's line on the stage. */
+        this.capturedCaption = computed(() => {
+            const files = this.device.keptFiles();
+            if (!files) {
+                return undefined;
+            }
+            const size = UploadWidgetUtils.formatCapturedSize(files[0].size, this.session.sessionInfoData?.locale);
+            if (this.mode() === 'PHOTO') {
+                return `${this.texts().capturedPhoto} · ${size}`;
+            }
+            const duration = UploadWidgetUtils.formatDuration(this.device.recordingTime());
+            return `${this.texts().capturedVideo} · ${duration} · ${size}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "capturedCaption" }] : /* istanbul ignore next */ []));
+        /** The switch shows while the camera is off, so a second shot stays possible. */
+        this.isCameraSwitchShown = computed(() => !this.device.keptFiles() &&
+            !(this.device.isCameraActive() || this.device.isCameraStarting()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCameraSwitchShown" }] : /* istanbul ignore next */ []));
+        this.isSwitchOnHintShown = computed(() => this.isCameraSwitchShown() && !this.device.isCaptured(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSwitchOnHintShown" }] : /* istanbul ignore next */ []));
+        this.switchOnButton = computed(() => UploadWidgetUtils.createCaptureButton(this.texts().cameraOn, 'power_settings_new', 'primary', UiActionButtonType.NORMAL), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "switchOnButton" }] : /* istanbul ignore next */ []));
+        this.captureButton = computed(() => UploadWidgetUtils.createTakePictureButton(this.texts()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "captureButton" }] : /* istanbul ignore next */ []));
+        this.startRecordingButton = computed(() => UploadWidgetUtils.createStartRecordingButton(this.texts()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "startRecordingButton" }] : /* istanbul ignore next */ []));
+        this.stopRecordingButton = computed(() => UploadWidgetUtils.createStopRecordingButton(this.texts(), 'warn'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stopRecordingButton" }] : /* istanbul ignore next */ []));
+        this.retakeButton = computed(() => UploadWidgetUtils.createRetakeButton(this.texts(), UiActionButtonType.NORMAL), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "retakeButton" }] : /* istanbul ignore next */ []));
+        this.useButton = computed(() => UploadWidgetUtils.createUseButton(this.texts()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "useButton" }] : /* istanbul ignore next */ []));
+    }
+    ngAfterViewInit() {
+        if (this.deviceStart() === CaptureDeviceStart.AUTO) {
+            afterNextRender(() => this.device.startCamera(), { injector: this.injector });
+        }
+    }
+    ngOnDestroy() {
+        this.device.release();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureCameraViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CaptureCameraViewComponent, isStandalone: true, selector: "smart-capture-camera-view", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, deviceStart: { classPropertyName: "deviceStart", publicName: "deviceStart", isSignal: true, isRequired: true, transformFunction: null }, handover: { classPropertyName: "handover", publicName: "handover", isSignal: true, isRequired: true, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: true, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { captured: "captured" }, viewQueries: [{ propertyName: "video", first: true, predicate: ["video"], descendants: true, isSignal: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "actionButtonsTemplate", first: true, predicate: ["actionButtons"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"cameraStage\">\n  <video #video autoplay [muted]=\"true\" [hidden]=\"device.isCaptured() || !device.isCameraActive()\"></video>\n  <canvas #canvas [hidden]=\"!device.isCaptured() || device.isCameraActive()\"></canvas>\n  @if (device.keptVideoUrl(); as videoUrl) {\n    <video controls [src]=\"videoUrl\"></video>\n  }\n  @if (device.cameraError()) {\n    <p class=\"message cameraErrorMessage\">{{ texts().cameraError }}</p>\n  } @else if (capturedCaption(); as caption) {\n    <p class=\"message capturedCaption\">{{ caption }}</p>\n  } @else if (device.isRecording()) {\n    <p class=\"message recordingMessage\">{{ recordingCaption() }}</p>\n  } @else if (isSwitchOnHintShown()) {\n    @if (mode() === 'VIDEO') {\n      <p class=\"message\">{{ texts().switchOnForVideo }}</p>\n    } @else {\n      <p class=\"message\">{{ texts().switchOnCameraHint }}</p>\n    }\n  }\n  @if (isCameraSwitchShown()) {\n    <ui-action-button\n      class=\"switchOnButton\"\n      [descriptor]=\"switchOnButton()\"\n      (actionClick)=\"device.startCamera()\"\n    ></ui-action-button>\n  }\n</div>\n\n<ng-template #actionButtons>\n  @if (device.keptFiles()) {\n    <ui-action-button\n      class=\"retakeButton\"\n      [descriptor]=\"retakeButton()\"\n      (actionClick)=\"device.retakeCapture()\"\n    ></ui-action-button>\n    <ui-action-button\n      class=\"useButton\"\n      [descriptor]=\"useButton()\"\n      (actionClick)=\"device.useCapture()\"\n    ></ui-action-button>\n  } @else if (mode() === 'VIDEO') {\n    @if (device.isRecording()) {\n      <ui-action-button\n        class=\"stopRecordingButton\"\n        [descriptor]=\"stopRecordingButton()\"\n        (actionClick)=\"device.stopRecording()\"\n      ></ui-action-button>\n    } @else {\n      <ui-action-button\n        class=\"startRecordingButton\"\n        [disabled]=\"!device.isCameraActive()\"\n        [descriptor]=\"startRecordingButton()\"\n        (actionClick)=\"device.startRecording()\"\n      ></ui-action-button>\n    }\n  } @else {\n    <ui-action-button\n      class=\"capturePhotoButton\"\n      [disabled]=\"!device.isCameraActive()\"\n      [descriptor]=\"captureButton()\"\n      (actionClick)=\"device.capturePhoto()\"\n    ></ui-action-button>\n  }\n</ng-template>\n", styles: [":host{display:block;width:100%}.cameraStage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;aspect-ratio:16 / 9;overflow:hidden;border-radius:4px;--stage-background: var( --capture-stage-background, color-mix(in srgb, var(--primary-color) 30%, black) );background:var(--stage-background);color:var(--capture-stage-text, color-mix(in srgb, var(--primary-color) 10%, white))}.cameraStage video,.cameraStage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.cameraStage .switchOnButton ::ng-deep button{background:var(--color-surface)}.cameraStage .message{margin:0;text-align:center;color:inherit}.cameraStage .cameraErrorMessage{position:relative;color:color-mix(in srgb,var(--warn-color) 65%,white)}.cameraStage .recordingMessage,.cameraStage .capturedCaption{position:absolute;left:.5rem;top:.5rem;padding:.125rem .5rem;border-radius:.5rem;font-size:.75rem;font-weight:500}.cameraStage .recordingMessage{background:color-mix(in srgb,var(--stage-background) 67%,transparent);font-family:monospace}.cameraStage .capturedCaption{background:color-mix(in srgb,var(--success-color) 50%,black)}.cameraStage .recordingMessage:before{content:\"\";display:inline-block;width:.5rem;height:.5rem;margin-right:.3125rem;border-radius:50%;background:var(--warn-color)}\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: CaptureCameraViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-capture-camera-view', imports: [UiActionButtonComponent], template: "<div class=\"cameraStage\">\n  <video #video autoplay [muted]=\"true\" [hidden]=\"device.isCaptured() || !device.isCameraActive()\"></video>\n  <canvas #canvas [hidden]=\"!device.isCaptured() || device.isCameraActive()\"></canvas>\n  @if (device.keptVideoUrl(); as videoUrl) {\n    <video controls [src]=\"videoUrl\"></video>\n  }\n  @if (device.cameraError()) {\n    <p class=\"message cameraErrorMessage\">{{ texts().cameraError }}</p>\n  } @else if (capturedCaption(); as caption) {\n    <p class=\"message capturedCaption\">{{ caption }}</p>\n  } @else if (device.isRecording()) {\n    <p class=\"message recordingMessage\">{{ recordingCaption() }}</p>\n  } @else if (isSwitchOnHintShown()) {\n    @if (mode() === 'VIDEO') {\n      <p class=\"message\">{{ texts().switchOnForVideo }}</p>\n    } @else {\n      <p class=\"message\">{{ texts().switchOnCameraHint }}</p>\n    }\n  }\n  @if (isCameraSwitchShown()) {\n    <ui-action-button\n      class=\"switchOnButton\"\n      [descriptor]=\"switchOnButton()\"\n      (actionClick)=\"device.startCamera()\"\n    ></ui-action-button>\n  }\n</div>\n\n<ng-template #actionButtons>\n  @if (device.keptFiles()) {\n    <ui-action-button\n      class=\"retakeButton\"\n      [descriptor]=\"retakeButton()\"\n      (actionClick)=\"device.retakeCapture()\"\n    ></ui-action-button>\n    <ui-action-button\n      class=\"useButton\"\n      [descriptor]=\"useButton()\"\n      (actionClick)=\"device.useCapture()\"\n    ></ui-action-button>\n  } @else if (mode() === 'VIDEO') {\n    @if (device.isRecording()) {\n      <ui-action-button\n        class=\"stopRecordingButton\"\n        [descriptor]=\"stopRecordingButton()\"\n        (actionClick)=\"device.stopRecording()\"\n      ></ui-action-button>\n    } @else {\n      <ui-action-button\n        class=\"startRecordingButton\"\n        [disabled]=\"!device.isCameraActive()\"\n        [descriptor]=\"startRecordingButton()\"\n        (actionClick)=\"device.startRecording()\"\n      ></ui-action-button>\n    }\n  } @else {\n    <ui-action-button\n      class=\"capturePhotoButton\"\n      [disabled]=\"!device.isCameraActive()\"\n      [descriptor]=\"captureButton()\"\n      (actionClick)=\"device.capturePhoto()\"\n    ></ui-action-button>\n  }\n</ng-template>\n", styles: [":host{display:block;width:100%}.cameraStage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;aspect-ratio:16 / 9;overflow:hidden;border-radius:4px;--stage-background: var( --capture-stage-background, color-mix(in srgb, var(--primary-color) 30%, black) );background:var(--stage-background);color:var(--capture-stage-text, color-mix(in srgb, var(--primary-color) 10%, white))}.cameraStage video,.cameraStage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.cameraStage .switchOnButton ::ng-deep button{background:var(--color-surface)}.cameraStage .message{margin:0;text-align:center;color:inherit}.cameraStage .cameraErrorMessage{position:relative;color:color-mix(in srgb,var(--warn-color) 65%,white)}.cameraStage .recordingMessage,.cameraStage .capturedCaption{position:absolute;left:.5rem;top:.5rem;padding:.125rem .5rem;border-radius:.5rem;font-size:.75rem;font-weight:500}.cameraStage .recordingMessage{background:color-mix(in srgb,var(--stage-background) 67%,transparent);font-family:monospace}.cameraStage .capturedCaption{background:color-mix(in srgb,var(--success-color) 50%,black)}.cameraStage .recordingMessage:before{content:\"\";display:inline-block;width:.5rem;height:.5rem;margin-right:.3125rem;border-radius:50%;background:var(--warn-color)}\n"] }]
+        }], propDecorators: { video: [{ type: i0.ViewChild, args: ['video', { isSignal: true }] }], canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], actionButtonsTemplate: [{ type: i0.ViewChild, args: ['actionButtons', { isSignal: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], deviceStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "deviceStart", required: true }] }], handover: [{ type: i0.Input, args: [{ isSignal: true, alias: "handover", required: true }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: true }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], captured: [{ type: i0.Output, args: ["captured"] }] } });
+
+/** The microphone of one capture view: the record plugin, its start and the stopped recording.
+ * The view calls release() when it closes. */
+class MicrophoneDevice {
+    constructor(options) {
+        this.options = options;
+        this.isRecording = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRecording" }] : /* istanbul ignore next */ []));
+        this.recordedBlob = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recordedBlob" }] : /* istanbul ignore next */ []));
+        this.time = signal('00:00', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []));
+        this.isPlaying = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPlaying" }] : /* istanbul ignore next */ []));
+        /** Set when the browser gives no microphone, until the next start. */
+        this.microphoneError = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "microphoneError" }] : /* istanbul ignore next */ []));
+        this.isWaveformOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isWaveformOpen" }] : /* istanbul ignore next */ []));
+        /** True while a host may not lose the capture by accident: the recording runs, its microphone
+         * request included, or waits for the save. */
+        this.isCaptureUnderWay = computed(() => this.isRecording() || !!this.recordedBlob(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCaptureUnderWay" }] : /* istanbul ignore next */ []));
+        /** True while the view shows the waveform band. */
+        this.isWaveformShown = computed(() => this.isWaveformOpen() || this.isRecording() || !!this.recordedBlob(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isWaveformShown" }] : /* istanbul ignore next */ []));
+    }
+    async initializeWaveSurferIfNeeded() {
+        const waveform = this.options.getWaveformElement();
+        if (this.wavesurfer || !waveform) {
+            return;
+        }
+        await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+        if (!this.pendingStart) {
+            return;
+        }
+        waveform.style.padding = '0.1rem';
+        this.initWaveSurfer(waveform);
+    }
+    initWaveSurfer(waveform) {
+        const primaryColor = getComputedStyle(this.options.getThemeElement())
+            .getPropertyValue('--primary-color')
+            .trim();
+        const el = this.options.getButtonElement().querySelector('.sb4-primary');
+        const remInPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        const height = (el?.getBoundingClientRect().height ?? 0) - remInPx * 0.1;
+        this.wavesurfer = WaveSurfer.create({
+            container: waveform,
+            waveColor: primaryColor,
+            progressColor: this.addAlphaToColor(primaryColor, 0.5),
+            height: height,
+            barWidth: 5,
+            barGap: 1,
+            barRadius: 5,
+        });
+        this.wavesurfer.setVolume(1);
+        const mimeType = UploadWidgetUtils.chooseRecorderMimeType('audio');
+        const record = this.wavesurfer.registerPlugin(RecordPlugin.create({
+            renderRecordedAudio: true,
+            scrollingWaveform: true,
+            continuousWaveform: false,
+            continuousWaveformDuration: 15,
+            mimeType,
+        }));
+        this.record = record;
+        this.wavesurfer.on('dblclick', () => {
+            this.options.ngZone.run(() => {
+                this.wavesurfer?.play();
+                this.isPlaying.set(true);
+            });
+        });
+        this.record.on('record-end', (blob) => {
+            if (record !== this.record) {
+                return;
+            }
+            this.options.ngZone.run(() => {
+                this.recordedBlob.set(blob);
+                this.isRecording.set(false);
+            });
+            if (this.options.handover() === CaptureHandover.IMMEDIATE) {
+                this.saveRecording();
+            }
+        });
+        this.record.on('record-progress', (time) => {
+            this.options.ngZone.run(() => {
+                this.time.set(UploadWidgetUtils.formatDuration(time));
+            });
+        });
+        this.wavesurfer.on('finish', () => {
+            this.options.ngZone.run(() => {
+                this.isPlaying.set(false);
+            });
+        });
+    }
+    /** Starts from a click or on open: a refused microphone shows its error line, no rejection. */
+    requestRecording() {
+        this.startRecording().catch(() => { });
+    }
+    async startRecording() {
+        if (this.isRecording())
+            return;
+        const start = {};
+        this.pendingStart = start;
+        // Initialize first (still within the gesture tick on most browsers)
+        await this.initializeWaveSurferIfNeeded();
+        if (this.pendingStart !== start) {
+            return;
+        }
+        const record = this.record;
+        if (!record)
+            throw new Error('Voice recorder plugin is not initialized.');
+        this.options.ngZone.run(() => {
+            this.microphoneError.set(false);
+            this.isWaveformOpen.set(true);
+            this.isRecording.set(true);
+            this.isPlaying.set(false);
+            this.recordedBlob.set(null);
+            this.time.set('00:00');
+        });
+        try {
+            // Force native mic permission first so it works with WKWebView
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            stream.getTracks().forEach((track) => track.stop());
+            if (this.pendingStart !== start) {
+                return;
+            }
+            await record.startRecording();
+            if (this.pendingStart !== start) {
+                record.stopRecording();
+                record.stopMic();
+                return;
+            }
+            this.pendingStart = undefined;
+        }
+        catch (error) {
+            if (this.pendingStart !== start) {
+                return;
+            }
+            console.error('Mic failed', error);
+            this.pendingStart = undefined;
+            this.options.ngZone.run(() => {
+                this.isRecording.set(false);
+                this.isWaveformOpen.set(!!this.recordedBlob());
+                this.microphoneError.set(true);
+            });
+            throw error;
+        }
+    }
+    stopRecording() {
+        if (this.pendingStart) {
+            this.cancelPendingStart();
+        }
+        else if (this.record && this.isRecording()) {
+            this.record.stopRecording();
+            this.options.ngZone.run(() => {
+                this.isRecording.set(false);
+            });
+        }
+    }
+    /** A stop before the recording runs has nothing to keep: the strip goes back to idle. */
+    cancelPendingStart() {
+        this.pendingStart = undefined;
+        this.destroyRecorder();
+        this.options.ngZone.run(() => {
+            this.isRecording.set(false);
+            this.isWaveformOpen.set(false);
+        });
+    }
+    /** The plugin's destroy alone closes a running microphone's AudioContext twice, which rejects;
+     * after the stop and the stopMic it has nothing left to close. */
+    destroyRecorder() {
+        const wavesurfer = this.wavesurfer;
+        const record = this.record;
+        this.wavesurfer = undefined;
+        this.record = undefined;
+        record?.stopRecording();
+        record?.stopMic();
+        wavesurfer?.destroy();
+    }
+    saveRecording() {
+        const recordedBlob = this.recordedBlob();
+        if (recordedBlob) {
+            const file = UploadWidgetUtils.createRecordingFile(recordedBlob, 'recording', 'audio/mp4');
+            this.options.handOver(file);
+            // Destroy completely so next recording initializes fresh
+            this.destroyRecorder();
+            this.options.ngZone.run(() => {
+                this.recordedBlob.set(null);
+                this.time.set('00:00');
+                this.isPlaying.set(false);
+                this.isWaveformOpen.set(false);
+            });
+        }
+    }
+    replayRecording() {
+        if (this.recordedBlob()) {
+            this.options.ngZone.run(() => {
+                this.isPlaying.update((isPlaying) => !isPlaying);
+                this.wavesurfer?.playPause();
+            });
+        }
+    }
+    /** Cancels a start under way and closes the microphone: the close of the view. */
+    release() {
+        this.pendingStart = undefined;
+        this.destroyRecorder();
+    }
+    addAlphaToColor(hexColor, alpha) {
+        if (/^#([a-f\d])([a-f\d])([a-f\d])$/i.test(hexColor)) {
+            hexColor = hexColor.replace(/^#([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`);
+        }
+        const hexMatch = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor);
+        if (hexMatch) {
+            const [, r, g, b] = hexMatch;
+            return `rgba(${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt(b, 16)}, ${alpha})`;
+        }
+        const ctx = document.createElement('canvas').getContext('2d');
+        if (ctx) {
+            ctx.fillStyle = hexColor;
+            const parsed = ctx.fillStyle;
+            const rgbMatch = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.exec(parsed);
+            if (rgbMatch) {
+                const [, r, g, b] = rgbMatch;
+                return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+            }
+        }
+        return hexColor;
+    }
+}
+
+/** The recorder view of the Capture Dialog: the strip in the theme's colours, with its hints, and
+ * the stop and save buttons in actionButtonsTemplate for the dialog's footer. */
+class CaptureRecorderViewComponent {
+    constructor() {
+        this.actionButtonsTemplate = viewChild('actionButtons', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionButtonsTemplate" }] : /* istanbul ignore next */ []));
+        this.deviceStart = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deviceStart" }] : /* istanbul ignore next */ []));
+        this.handover = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handover" }] : /* istanbul ignore next */ []));
+        this.texts = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
+        this.recordingSaved = output();
+        this.device = new MicrophoneDevice({
+            handover: this.handover,
+            ngZone: inject(NgZone),
+            getWaveformElement: () => this.waveformRef?.nativeElement,
+            getButtonElement: () => this.mainButton.nativeElement,
+            // A host theme sets the token on the body, which the element inherits and html does not see.
+            getThemeElement: () => this.waveformRef.nativeElement,
+            handOver: (file) => this.recordingSaved.emit(file),
+        });
+        this.micButton = this.createIconButton('microphone', 'primary');
+        /** Only a theme colour's name paints the icon. */
+        this.stopButton = {
+            ...this.createIconButton('stop-circle', 'warn'),
+            iconColor: 'warn',
+        };
+        this.playButton = this.createIconButton('play_circle', 'primary');
+        this.stopPlaybackButton = this.createIconButton('stop_circle', 'warn');
+        this.saveButton = computed(() => UploadWidgetUtils.createCaptureButton(this.texts().save, 'save'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "saveButton" }] : /* istanbul ignore next */ []));
+        this.stopRecordingButton = computed(() => UploadWidgetUtils.createStopRecordingButton(this.texts(), 'warn'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stopRecordingButton" }] : /* istanbul ignore next */ []));
+    }
+    ngAfterViewInit() {
+        if (this.deviceStart() === CaptureDeviceStart.AUTO) {
+            this.device.requestRecording();
+        }
+    }
+    ngOnDestroy() {
+        this.device.release();
+    }
+    createIconButton(icon, color) {
+        return UploadWidgetUtils.createCaptureButton('', icon, color, UiActionButtonType.ICON);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureRecorderViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CaptureRecorderViewComponent, isStandalone: true, selector: "smart-capture-recorder-view", inputs: { deviceStart: { classPropertyName: "deviceStart", publicName: "deviceStart", isSignal: true, isRequired: true, transformFunction: null }, handover: { classPropertyName: "handover", publicName: "handover", isSignal: true, isRequired: true, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { recordingSaved: "recordingSaved" }, viewQueries: [{ propertyName: "actionButtonsTemplate", first: true, predicate: ["actionButtons"], descendants: true, isSignal: true }, { propertyName: "waveformRef", first: true, predicate: ["waveform"], descendants: true }, { propertyName: "mainButton", first: true, predicate: ["mainButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"recorderContainer direction-right\"\n  [class.active]=\"device.isWaveformShown()\"\n  [class.isRecording]=\"device.isRecording()\"\n  [class.hasRecording]=\"device.recordedBlob()\"\n>\n  <div class=\"recorderMain\">\n    <div class=\"recorderToolbar\">\n      @if (device.isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"stopButton\"\n          (actionClick)=\"device.stopRecording()\"\n        ></ui-action-button>\n        <div class=\"progress\">{{ device.time() }}</div>\n      } @else {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"micButton\"\n          (actionClick)=\"device.requestRecording()\"\n        ></ui-action-button>\n      }\n\n      @if (device.recordedBlob()) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"device.isPlaying() ? stopPlaybackButton : playButton\"\n          (actionClick)=\"device.replayRecording()\"\n        ></ui-action-button>\n      }\n    </div>\n\n    <div class=\"waveformBand\" [class.open]=\"device.isWaveformShown()\">\n      <div class=\"waveformGrid\"></div>\n      <div class=\"waveform\" #waveform></div>\n    </div>\n  </div>\n</div>\n@if (device.microphoneError()) {\n  <p class=\"message\">{{ texts().microphoneError }}</p>\n  <p class=\"hint\">{{ texts().microphoneRetryHint }}</p>\n}\n@if (device.recordedBlob()) {\n  <p class=\"hint\">{{ texts().recordingHint }}</p>\n}\n\n<ng-template #actionButtons>\n  @if (device.isRecording()) {\n    <ui-action-button\n      class=\"stopRecordingButton\"\n      [descriptor]=\"stopRecordingButton()\"\n      (actionClick)=\"device.stopRecording()\"\n    ></ui-action-button>\n  }\n  @if (device.recordedBlob()) {\n    <ui-action-button\n      class=\"saveRecordingButton\"\n      [descriptor]=\"saveButton()\"\n      (actionClick)=\"device.saveRecording()\"\n    ></ui-action-button>\n  }\n</ng-template>\n", styles: [":host{display:block;width:100%;min-width:0}.message{text-align:center;color:#6b7280}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{background-color:transparent;display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}\n", ":host .message{color:var(--warn-color)}:host .hint{margin:.5rem 0 0;text-align:center;font-size:.75rem;color:var(--color-text-muted)}:host .progress{color:var(--color-text-muted)}:host .isRecording .progress:before{content:\"\";display:inline-block;width:.5rem;height:.5rem;margin-right:.3125rem;border-radius:50%;background:var(--warn-color)}:host .active ::ng-deep .recorderToolbar{border-color:var(--color-border)}:host .waveformGrid{border-color:var(--color-border);background:repeating-linear-gradient(to right,color-mix(in srgb,var(--color-text-muted) 35%,transparent) 0,color-mix(in srgb,var(--color-text-muted) 35%,transparent) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,color-mix(in srgb,var(--color-text-muted) 8%,transparent),color-mix(in srgb,var(--color-text-muted) 2%,transparent))}:host .recorderToolbar ::ng-deep .sb4-warn,:host .recorderToolbar ::ng-deep .sb4-primary,:host .recorderToolbar ::ng-deep ui-action-button{border:unset}:host .mainButton ::ng-deep .sb4-warn{padding:.5rem .75rem}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureRecorderViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-capture-recorder-view', imports: [UiActionButtonComponent], template: "<div\n  class=\"recorderContainer direction-right\"\n  [class.active]=\"device.isWaveformShown()\"\n  [class.isRecording]=\"device.isRecording()\"\n  [class.hasRecording]=\"device.recordedBlob()\"\n>\n  <div class=\"recorderMain\">\n    <div class=\"recorderToolbar\">\n      @if (device.isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"stopButton\"\n          (actionClick)=\"device.stopRecording()\"\n        ></ui-action-button>\n        <div class=\"progress\">{{ device.time() }}</div>\n      } @else {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"micButton\"\n          (actionClick)=\"device.requestRecording()\"\n        ></ui-action-button>\n      }\n\n      @if (device.recordedBlob()) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"device.isPlaying() ? stopPlaybackButton : playButton\"\n          (actionClick)=\"device.replayRecording()\"\n        ></ui-action-button>\n      }\n    </div>\n\n    <div class=\"waveformBand\" [class.open]=\"device.isWaveformShown()\">\n      <div class=\"waveformGrid\"></div>\n      <div class=\"waveform\" #waveform></div>\n    </div>\n  </div>\n</div>\n@if (device.microphoneError()) {\n  <p class=\"message\">{{ texts().microphoneError }}</p>\n  <p class=\"hint\">{{ texts().microphoneRetryHint }}</p>\n}\n@if (device.recordedBlob()) {\n  <p class=\"hint\">{{ texts().recordingHint }}</p>\n}\n\n<ng-template #actionButtons>\n  @if (device.isRecording()) {\n    <ui-action-button\n      class=\"stopRecordingButton\"\n      [descriptor]=\"stopRecordingButton()\"\n      (actionClick)=\"device.stopRecording()\"\n    ></ui-action-button>\n  }\n  @if (device.recordedBlob()) {\n    <ui-action-button\n      class=\"saveRecordingButton\"\n      [descriptor]=\"saveButton()\"\n      (actionClick)=\"device.saveRecording()\"\n    ></ui-action-button>\n  }\n</ng-template>\n", styles: [":host{display:block;width:100%;min-width:0}.message{text-align:center;color:#6b7280}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{background-color:transparent;display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}\n", ":host .message{color:var(--warn-color)}:host .hint{margin:.5rem 0 0;text-align:center;font-size:.75rem;color:var(--color-text-muted)}:host .progress{color:var(--color-text-muted)}:host .isRecording .progress:before{content:\"\";display:inline-block;width:.5rem;height:.5rem;margin-right:.3125rem;border-radius:50%;background:var(--warn-color)}:host .active ::ng-deep .recorderToolbar{border-color:var(--color-border)}:host .waveformGrid{border-color:var(--color-border);background:repeating-linear-gradient(to right,color-mix(in srgb,var(--color-text-muted) 35%,transparent) 0,color-mix(in srgb,var(--color-text-muted) 35%,transparent) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,color-mix(in srgb,var(--color-text-muted) 8%,transparent),color-mix(in srgb,var(--color-text-muted) 2%,transparent))}:host .recorderToolbar ::ng-deep .sb4-warn,:host .recorderToolbar ::ng-deep .sb4-primary,:host .recorderToolbar ::ng-deep ui-action-button{border:unset}:host .mainButton ::ng-deep .sb4-warn{padding:.5rem .75rem}\n"] }]
+        }], propDecorators: { waveformRef: [{
+                type: ViewChild,
+                args: ['waveform']
+            }], mainButton: [{
+                type: ViewChild,
+                args: ['mainButton', { read: ElementRef }]
+            }], actionButtonsTemplate: [{ type: i0.ViewChild, args: ['actionButtons', { isSignal: true }] }], deviceStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "deviceStart", required: true }] }], handover: [{ type: i0.Input, args: [{ isSignal: true, alias: "handover", required: true }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: true }] }], recordingSaved: [{ type: i0.Output, args: ["recordingSaved"] }] } });
+
+/** The Capture Dialog of a File Field: closes with the files of a use or a save, else empty. */
+class CaptureDialogComponent {
+    constructor() {
+        this.dialogRef = inject(MatDialogRef);
+        this.data = inject(MAT_DIALOG_DATA);
+        this.isMicrophone = this.data.source === FileUploaderSource.MICROPHONE;
+        this.cameraMode = this.data.source === FileUploaderSource.CAMERA_VIDEO ? 'VIDEO' : 'PHOTO';
+        this.cameraView = viewChild(CaptureCameraViewComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cameraView" }] : /* istanbul ignore next */ []));
+        this.recorderView = viewChild(CaptureRecorderViewComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recorderView" }] : /* istanbul ignore next */ []));
+        this.captureView = computed(() => this.cameraView() ?? this.recorderView(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "captureView" }] : /* istanbul ignore next */ []));
+        /** The view's buttons go to the footer of the dialog. */
+        this.actionButtons = computed(() => this.captureView()?.actionButtonsTemplate() ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionButtons" }] : /* istanbul ignore next */ []));
+        /** The recorder waits for the open: it reads the waveform's height from its rendered button. */
+        this.isOpened = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpened" }] : /* istanbul ignore next */ []));
+        this.closeButton = {
+            title: '',
+            type: UiActionButtonType.ICON,
+            icon: 'close',
+            iconPosition: IconPosition.PRE,
+            color: 'primary',
+        };
+        this.cancelButton = {
+            title: this.data.texts.cancel,
+            type: UiActionButtonType.FLAT,
+            color: 'primary',
+        };
+        effect(() => {
+            this.dialogRef.disableClose = this.captureView()?.device.isCaptureUnderWay() ?? false;
+        });
+        this.dialogRef.afterOpened().subscribe(() => this.isOpened.set(true));
+        // disableClose stops the keyboard too, but only the backdrop is meant to wait for the capture.
+        this.dialogRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape' && this.dialogRef.disableClose) {
+                this.discardCapture();
+            }
+        });
+    }
+    /** The close destroys the capture view, which stops the device. */
+    discardCapture() {
+        this.dialogRef.close();
+    }
+    handOverCapture(files) {
+        this.dialogRef.close(files);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CaptureDialogComponent, isStandalone: true, selector: "smart-capture-dialog", viewQueries: [{ propertyName: "cameraView", first: true, predicate: CaptureCameraViewComponent, descendants: true, isSignal: true }, { propertyName: "recorderView", first: true, predicate: CaptureRecorderViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dialog-container captureDialog\">\n  <div class=\"dialog-header\">\n    <h2 class=\"dialog-title\">{{ data.content.title }}</h2>\n    <ui-action-button\n      class=\"closeCaptureButton\"\n      [descriptor]=\"closeButton\"\n      (actionClick)=\"discardCapture()\"\n    ></ui-action-button>\n  </div>\n\n  <mat-dialog-content class=\"dialog-content\">\n    @if (isMicrophone) {\n      <div class=\"recorderSlot\">\n        @if (isOpened()) {\n          <smart-capture-recorder-view\n            [deviceStart]=\"data.settings.deviceStart\"\n            [handover]=\"data.settings.handover\"\n            [texts]=\"data.texts\"\n            (recordingSaved)=\"handOverCapture([$event])\"\n          ></smart-capture-recorder-view>\n        }\n      </div>\n    } @else {\n      <smart-capture-camera-view\n        [mode]=\"cameraMode\"\n        [deviceStart]=\"data.settings.deviceStart\"\n        [handover]=\"data.settings.handover\"\n        [texts]=\"data.texts\"\n        [maxFileSize]=\"data.maxFileSize\"\n        (captured)=\"handOverCapture($event)\"\n      ></smart-capture-camera-view>\n    }\n  </mat-dialog-content>\n\n  <div class=\"dialog-footer\">\n    <ui-action-button\n      class=\"cancelCaptureButton\"\n      [descriptor]=\"cancelButton\"\n      (actionClick)=\"discardCapture()\"\n    ></ui-action-button>\n    <ng-container [ngTemplateOutlet]=\"actionButtons()\" />\n  </div>\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".captureDialog{--sb4-dialog-default-padding: 1rem}.captureDialog .dialog-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem}.closeCaptureButton ::ng-deep button{width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border-radius:50%}.captureDialog ::ng-deep .stopRecordingButton{--text-color: color-mix(in srgb, var(--warn-color) 5%, white)}.recorderSlot{min-height:3.25rem}\n"], dependencies: [{ kind: "component", type: CaptureCameraViewComponent, selector: "smart-capture-camera-view", inputs: ["mode", "deviceStart", "handover", "texts", "maxFileSize"], outputs: ["captured"] }, { kind: "component", type: CaptureRecorderViewComponent, selector: "smart-capture-recorder-view", inputs: ["deviceStart", "handover", "texts"], outputs: ["recordingSaved"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: CaptureDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-capture-dialog', imports: [
+                        CaptureCameraViewComponent,
+                        CaptureRecorderViewComponent,
+                        MatDialogContent,
+                        NgTemplateOutlet,
+                        UiActionButtonComponent,
+                    ], template: "<div class=\"dialog-container captureDialog\">\n  <div class=\"dialog-header\">\n    <h2 class=\"dialog-title\">{{ data.content.title }}</h2>\n    <ui-action-button\n      class=\"closeCaptureButton\"\n      [descriptor]=\"closeButton\"\n      (actionClick)=\"discardCapture()\"\n    ></ui-action-button>\n  </div>\n\n  <mat-dialog-content class=\"dialog-content\">\n    @if (isMicrophone) {\n      <div class=\"recorderSlot\">\n        @if (isOpened()) {\n          <smart-capture-recorder-view\n            [deviceStart]=\"data.settings.deviceStart\"\n            [handover]=\"data.settings.handover\"\n            [texts]=\"data.texts\"\n            (recordingSaved)=\"handOverCapture([$event])\"\n          ></smart-capture-recorder-view>\n        }\n      </div>\n    } @else {\n      <smart-capture-camera-view\n        [mode]=\"cameraMode\"\n        [deviceStart]=\"data.settings.deviceStart\"\n        [handover]=\"data.settings.handover\"\n        [texts]=\"data.texts\"\n        [maxFileSize]=\"data.maxFileSize\"\n        (captured)=\"handOverCapture($event)\"\n      ></smart-capture-camera-view>\n    }\n  </mat-dialog-content>\n\n  <div class=\"dialog-footer\">\n    <ui-action-button\n      class=\"cancelCaptureButton\"\n      [descriptor]=\"cancelButton\"\n      (actionClick)=\"discardCapture()\"\n    ></ui-action-button>\n    <ng-container [ngTemplateOutlet]=\"actionButtons()\" />\n  </div>\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".captureDialog{--sb4-dialog-default-padding: 1rem}.captureDialog .dialog-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem}.closeCaptureButton ::ng-deep button{width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border-radius:50%}.captureDialog ::ng-deep .stopRecordingButton{--text-color: color-mix(in srgb, var(--warn-color) 5%, white)}.recorderSlot{min-height:3.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { cameraView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CaptureCameraViewComponent), { isSignal: true }] }], recorderView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CaptureRecorderViewComponent), { isSignal: true }] }] } });
+
+class CaptureDialogService extends SmartdialogService {
+    constructor() {
+        super(inject(MatDialog), inject(Injector));
+    }
+    /** The returned dialog closes with the handed over files, or empty at a discard. */
+    openCaptureDialog(data) {
+        return this.createDialogRef(data, CaptureDialogComponent, {
+            width: '560px',
+            maxWidth: '90vw',
+            autoFocus: 'dialog',
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureDialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/** The inline camera panel of the upload zone; a phone opens its own camera instead. */
 class PhotoCaptureWidgetComponent {
     constructor() {
+        this.injector = inject(Injector);
         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. */
@@ -9360,53 +10205,46 @@ class PhotoCaptureWidgetComponent {
         /** The zone's texts; the buttons follow them. */
         this.texts = input(UPLOAD_ZONE_DEFAULT_TEXTS, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
+        /** AUTO asks for the camera when the widget opens, MANUAL at the switch-on button. */
+        this.deviceStart = input(CaptureDeviceStart.MANUAL, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deviceStart" }] : /* istanbul ignore next */ []));
+        /** CONFIRM keeps a capture for retake or use, IMMEDIATE hands it over at the take or the stop. */
+        this.handover = input(CaptureHandover.IMMEDIATE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handover" }] : /* istanbul ignore next */ []));
         this.photoCaptured = output();
+        this.device = new CameraDevice({
+            mode: this.mode,
+            deviceStart: this.deviceStart,
+            handover: this.handover,
+            maxFileSize: this.maxFileSize,
+            getVideoElement: () => this.videoRef.nativeElement,
+            getCanvasElement: () => this.canvasRef.nativeElement,
+            handOver: (files) => this.photoCaptured.emit(files),
+        });
         /** 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 */ []));
-        /** 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 */
+        /** Under AUTO the switch returns when the camera is off, so a second shot stays possible. */
+        this.isCameraSwitchShown = computed(() => !this.device.keptFiles() &&
+            (this.deviceStart() === CaptureDeviceStart.MANUAL ||
+                !(this.device.isCameraActive() || this.device.isCameraStarting())), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCameraSwitchShown" }] : /* istanbul ignore next */ []));
+        this.isSwitchOnHintShown = computed(() => this.isCameraSwitchShown() && !this.device.isCameraActive() && !this.device.isCaptured(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSwitchOnHintShown" }] : /* istanbul ignore next */ []));
+        this.toggleCameraButton = computed(() => UploadWidgetUtils.createCaptureButton(this.device.isCameraActive() ? this.texts().cameraOff : this.texts().cameraOn, 'power_settings_new', this.device.isCameraActive() ? 'red' : 'primary'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "toggleCameraButton" }] : /* istanbul ignore next */ []));
-        this.captureButton = computed(() => this.createButton(this.texts().takePicture, 'camera'), /* @ts-ignore */
+        this.captureButton = computed(() => UploadWidgetUtils.createTakePictureButton(this.texts()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "captureButton" }] : /* istanbul ignore next */ []));
-        this.startRecordingButton = computed(() => this.createButton(this.texts().startRecording, 'fiber_manual_record'), /* @ts-ignore */
+        this.startRecordingButton = computed(() => UploadWidgetUtils.createStartRecordingButton(this.texts()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "startRecordingButton" }] : /* istanbul ignore next */ []));
-        this.stopRecordingButton = computed(() => this.createButton(this.texts().stopRecording, 'stop', 'red'), /* @ts-ignore */
+        this.stopRecordingButton = computed(() => UploadWidgetUtils.createStopRecordingButton(this.texts(), 'red'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "stopRecordingButton" }] : /* istanbul ignore next */ []));
-        this.pickVideoButton = computed(() => this.createButton(this.texts().pickVideo, 'video_library'), /* @ts-ignore */
+        this.pickVideoButton = computed(() => UploadWidgetUtils.createCaptureButton(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);
+        this.retakeButton = computed(() => UploadWidgetUtils.createRetakeButton(this.texts()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "retakeButton" }] : /* istanbul ignore next */ []));
+        this.useButton = computed(() => UploadWidgetUtils.createUseButton(this.texts()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "useButton" }] : /* istanbul ignore next */ []));
     }
     isMobile() {
         return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
@@ -9417,110 +10255,32 @@ class PhotoCaptureWidgetComponent {
             this.fileInputRef.nativeElement.click();
             return;
         }
-        if (this.isPanelOpen()) {
-            this.stopCamera();
-        }
-        this.isPanelOpen.update((open) => !open);
-    }
-    ngOnDestroy() {
-        this.stopCamera();
-    }
-    async startCamera() {
-        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;
-    }
-    /** 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.
-            }
+        if (this.isPanelOpen()) {
+            this.device.release();
         }
-        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;
+        else {
+            this.startCameraAfterRender();
         }
-        this.isRecording = false;
-        this.stream?.getTracks().forEach((track) => track.stop());
-        this.stream = undefined;
-        this.cameraActive = false;
+        this.isPanelOpen.update((open) => !open);
     }
-    async capturePhoto() {
-        const video = this.videoRef.nativeElement;
-        const canvas = this.canvasRef.nativeElement;
-        const context = canvas.getContext('2d');
-        if (!context)
-            return;
-        canvas.width = video.videoWidth;
-        canvas.height = video.videoHeight;
-        context.drawImage(video, 0, 0);
-        const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.9));
-        if (!blob)
-            return;
-        let file = new File([blob], `photo_${Date.now()}.jpg`, { type: 'image/jpeg' });
-        const maxFileSize = this.maxFileSize();
-        if (maxFileSize && file.size > maxFileSize) {
-            file = await this.compressImageFile(file, maxFileSize);
+    ngAfterViewInit() {
+        if (!this.externalTrigger()) {
+            this.startCameraAfterRender();
         }
-        this.photoCaptured.emit([file]);
-        this.isCaptured = true;
-        this.stopCamera();
     }
-    /** A browser that records neither webm nor mp4 refuses the recorder: the camera error shows. */
-    startRecording() {
-        let recorder;
-        try {
-            recorder = new MediaRecorder(this.stream, {
-                mimeType: UploadWidgetUtils.chooseRecorderMimeType('video'),
-            });
-        }
-        catch {
-            this.cameraError.set(true);
+    ngOnDestroy() {
+        this.device.release();
+    }
+    /** AUTO waits for the render: the stream goes into the panel's video element. */
+    startCameraAfterRender() {
+        if (this.deviceStart() !== CaptureDeviceStart.AUTO || this.isMobile()) {
             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();
+        afterNextRender(() => {
+            if (!this.externalTrigger() || this.isPanelOpen()) {
+                this.device.startCamera();
+            }
+        }, { injector: this.injector });
     }
     getPhotoDataURL() {
         return this.canvasRef.nativeElement.toDataURL('image/png');
@@ -9535,7 +10295,7 @@ class PhotoCaptureWidgetComponent {
         for (const file of filesArray) {
             if (maxSize && file.size > maxSize && file.type.startsWith('image/')) {
                 try {
-                    const compressed = await this.compressImageFile(file, maxSize);
+                    const compressed = await UploadWidgetUtils.compressImageFile(file, maxSize);
                     processedFiles.push(compressed);
                 }
                 catch {
@@ -9548,80 +10308,12 @@ class PhotoCaptureWidgetComponent {
         }
         this.photoCaptured.emit(processedFiles);
     }
-    toggleCamera() {
-        if (this.cameraActive) {
-            this.stopCamera();
-        }
-        else {
-            this.startCamera();
-        }
-    }
-    async compressImageFile(file, maxFileSize) {
-        if (!file.type.startsWith('image/'))
-            return file;
-        const img = await new Promise((resolve, reject) => {
-            const url = URL.createObjectURL(file);
-            const image = new Image();
-            image.onload = () => {
-                URL.revokeObjectURL(url);
-                resolve(image);
-            };
-            image.onerror = (e) => {
-                URL.revokeObjectURL(url);
-                reject(e);
-            };
-            image.src = url;
-        });
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        if (!ctx)
-            return file;
-        let width = img.naturalWidth;
-        let height = img.naturalHeight;
-        let quality = 0.9;
-        const minQuality = 0.4;
-        const minDimension = 640;
-        const getBlob = (q) => new Promise((resolve) => {
-            canvas.width = width;
-            canvas.height = height;
-            ctx.clearRect(0, 0, width, height);
-            ctx.drawImage(img, 0, 0, width, height);
-            canvas.toBlob((blob) => {
-                if (blob)
-                    resolve(blob);
-            }, 'image/jpeg', q);
-        });
-        let blob = await getBlob(quality);
-        while (blob.size > maxFileSize) {
-            if (quality > minQuality) {
-                quality -= 0.1;
-            }
-            else if (width > minDimension && height > minDimension) {
-                width = Math.floor(width * 0.8);
-                height = Math.floor(height * 0.8);
-                quality = 0.9;
-            }
-            else {
-                break;
-            }
-            blob = await getBlob(quality);
-        }
-        if (blob.size <= maxFileSize) {
-            return new File([blob], file.name, { type: 'image/jpeg' });
-        }
-        else {
-            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 }, 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PhotoCaptureWidgetComponent, isStandalone: true, selector: "photo-capture-widget", inputs: { maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, externalTrigger: { classPropertyName: "externalTrigger", publicName: "externalTrigger", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, deviceStart: { classPropertyName: "deviceStart", publicName: "deviceStart", isSignal: true, isRequired: false, transformFunction: null }, handover: { classPropertyName: "handover", publicName: "handover", isSignal: true, isRequired: false, transformFunction: null } }, 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]=\"device.isCaptured() || !device.isCameraActive()\"></video>\n    <canvas #canvas [hidden]=\"!device.isCaptured() || device.isCameraActive()\"></canvas>\n    @if (device.keptVideoUrl(); as videoUrl) {\n      <video controls [src]=\"videoUrl\"></video>\n    }\n    @if (device.cameraError()) {\n      <p class=\"message\">{{ texts().cameraError }}</p>\n    } @else if (device.isRecording()) {\n      <p class=\"message\">{{ texts().recording }}</p>\n    } @else if (isSwitchOnHintShown()) {\n      @if (mode() === 'VIDEO') {\n        <p class=\"message\">{{ texts().switchOnForVideo }}</p>\n      } @else {\n        <p class=\"message\">{{ texts().switchOnCameraHint }}</p>\n      }\n    }\n    <div class=\"controls\">\n      @if (isCameraSwitchShown()) {\n        <!-- START CAMERA -->\n        <ui-action-button\n          class=\"toggleCameraButton\"\n          [disabled]=\"device.isRecording()\"\n          [descriptor]=\"toggleCameraButton()\"\n          (actionClick)=\"device.toggleCamera()\"\n          >\n        </ui-action-button>\n      }\n      @if (device.keptFiles()) {\n        <ui-action-button\n          class=\"retakeButton\"\n          [descriptor]=\"retakeButton()\"\n          (actionClick)=\"device.retakeCapture()\"\n          >\n        </ui-action-button>\n        <ui-action-button\n          class=\"useButton\"\n          [descriptor]=\"useButton()\"\n          (actionClick)=\"device.useCapture()\"\n          >\n        </ui-action-button>\n      } @else if (mode() === 'VIDEO') {\n        <!-- RECORD / STOP VIDEO -->\n        @if (device.isRecording()) {\n          <ui-action-button\n            class=\"stopRecordingButton\"\n            [descriptor]=\"stopRecordingButton()\"\n            (actionClick)=\"device.stopRecording()\"\n            >\n          </ui-action-button>\n        } @else {\n          <ui-action-button\n            class=\"startRecordingButton\"\n            [disabled]=\"!device.isCameraActive()\"\n            [descriptor]=\"startRecordingButton()\"\n            (actionClick)=\"device.startRecording()\"\n            >\n          </ui-action-button>\n        }\n      } @else {\n        <!-- CAPTURE CAMERA -->\n        <ui-action-button\n          class=\"capturePhotoButton\"\n          [disabled]=\"!device.isCameraActive()\"\n          [descriptor]=\"captureButton()\"\n          (actionClick)=\"device.capturePhoto()\"\n          >\n        </ui-action-button>\n      }\n      @if (mode() === 'VIDEO' && !device.keptFiles()) {\n        <!-- PICK VIDEO FILE -->\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\"video/*\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          />\n        <ui-action-button\n          class=\"pickVideoButton\"\n          [disabled]=\"device.isRecording()\"\n          [descriptor]=\"pickVideoButton()\"\n          (actionClick)=\"fileInput.click()\"\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: "@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"] }]
+            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]=\"device.isCaptured() || !device.isCameraActive()\"></video>\n    <canvas #canvas [hidden]=\"!device.isCaptured() || device.isCameraActive()\"></canvas>\n    @if (device.keptVideoUrl(); as videoUrl) {\n      <video controls [src]=\"videoUrl\"></video>\n    }\n    @if (device.cameraError()) {\n      <p class=\"message\">{{ texts().cameraError }}</p>\n    } @else if (device.isRecording()) {\n      <p class=\"message\">{{ texts().recording }}</p>\n    } @else if (isSwitchOnHintShown()) {\n      @if (mode() === 'VIDEO') {\n        <p class=\"message\">{{ texts().switchOnForVideo }}</p>\n      } @else {\n        <p class=\"message\">{{ texts().switchOnCameraHint }}</p>\n      }\n    }\n    <div class=\"controls\">\n      @if (isCameraSwitchShown()) {\n        <!-- START CAMERA -->\n        <ui-action-button\n          class=\"toggleCameraButton\"\n          [disabled]=\"device.isRecording()\"\n          [descriptor]=\"toggleCameraButton()\"\n          (actionClick)=\"device.toggleCamera()\"\n          >\n        </ui-action-button>\n      }\n      @if (device.keptFiles()) {\n        <ui-action-button\n          class=\"retakeButton\"\n          [descriptor]=\"retakeButton()\"\n          (actionClick)=\"device.retakeCapture()\"\n          >\n        </ui-action-button>\n        <ui-action-button\n          class=\"useButton\"\n          [descriptor]=\"useButton()\"\n          (actionClick)=\"device.useCapture()\"\n          >\n        </ui-action-button>\n      } @else if (mode() === 'VIDEO') {\n        <!-- RECORD / STOP VIDEO -->\n        @if (device.isRecording()) {\n          <ui-action-button\n            class=\"stopRecordingButton\"\n            [descriptor]=\"stopRecordingButton()\"\n            (actionClick)=\"device.stopRecording()\"\n            >\n          </ui-action-button>\n        } @else {\n          <ui-action-button\n            class=\"startRecordingButton\"\n            [disabled]=\"!device.isCameraActive()\"\n            [descriptor]=\"startRecordingButton()\"\n            (actionClick)=\"device.startRecording()\"\n            >\n          </ui-action-button>\n        }\n      } @else {\n        <!-- CAPTURE CAMERA -->\n        <ui-action-button\n          class=\"capturePhotoButton\"\n          [disabled]=\"!device.isCameraActive()\"\n          [descriptor]=\"captureButton()\"\n          (actionClick)=\"device.capturePhoto()\"\n          >\n        </ui-action-button>\n      }\n      @if (mode() === 'VIDEO' && !device.keptFiles()) {\n        <!-- PICK VIDEO FILE -->\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\"video/*\"\n          (change)=\"onFileSelected($event)\"\n          style=\"display: none\"\n          />\n        <ui-action-button\n          class=\"pickVideoButton\"\n          [disabled]=\"device.isRecording()\"\n          [descriptor]=\"pickVideoButton()\"\n          (actionClick)=\"fileInput.click()\"\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']
@@ -9631,12 +10323,11 @@ 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 }] }], 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"] }] } });
+            }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], externalTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalTrigger", required: false }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: false }] }], deviceStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "deviceStart", required: false }] }], handover: [{ type: i0.Input, args: [{ isSignal: true, alias: "handover", required: false }] }], photoCaptured: [{ type: i0.Output, args: ["photoCaptured"] }] } });
 
+/** The inline recorder strip of the upload zone and of the deprecated recordingUploader. */
 class VoiceRecordWidgetComponent {
     constructor() {
-        this.ngZone = inject(NgZone);
-        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. */
@@ -9645,15 +10336,24 @@ class VoiceRecordWidgetComponent {
         /** True in the upload zone only; the deprecated recordingUploader shows no error line. */
         this.showMicrophoneError = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showMicrophoneError" }] : /* istanbul ignore next */ []));
+        /** AUTO starts the recording when the widget opens, MANUAL at the microphone button. */
+        this.deviceStart = input(CaptureDeviceStart.MANUAL, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deviceStart" }] : /* istanbul ignore next */ []));
+        /** CONFIRM keeps a stopped recording for playback and save, IMMEDIATE hands it over. */
+        this.handover = input(CaptureHandover.CONFIRM, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handover" }] : /* istanbul ignore next */ []));
+        /** True under the zone's Capture Settings; everywhere else the save stays an icon. */
+        this.showSaveTitle = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSaveTitle" }] : /* istanbul ignore next */ []));
         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.device = new MicrophoneDevice({
+            handover: this.handover,
+            ngZone: inject(NgZone),
+            getWaveformElement: () => this.waveformRef?.nativeElement,
+            getButtonElement: () => this.mainButton.nativeElement,
+            getThemeElement: () => document.documentElement,
+            handOver: (file) => this.recordingSaved.emit(file),
+        });
         this.micButton = {
             title: '',
             type: UiActionButtonType.ICON,
@@ -9676,6 +10376,10 @@ class VoiceRecordWidgetComponent {
             iconPosition: IconPosition.PRE,
             color: 'primary',
         };
+        this.effectiveSaveButton = computed(() => this.showSaveTitle()
+            ? { ...this.saveButton, title: this.texts().save, type: UiActionButtonType.RAISED }
+            : this.saveButton, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveSaveButton" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         this.playButton = {
@@ -9693,195 +10397,34 @@ class VoiceRecordWidgetComponent {
             color: 'red',
         };
     }
-    ngAfterViewInit() { }
-    get isLeftDirection() {
-        return this.openDirection() === 'LEFT';
-    }
-    async initializeWaveSurferIfNeeded() {
-        if (this.wavesurfer || !this.waveformRef?.nativeElement) {
-            return;
-        }
-        await new Promise((resolve) => requestAnimationFrame(() => resolve()));
-        this.waveformRef.nativeElement.style.padding = '0.1rem';
-        this.initWaveSurfer();
-    }
-    initWaveSurfer() {
-        let body = document.querySelector('body');
-        let primaryColor = getComputedStyle(document.documentElement)
-            .getPropertyValue('--primary-color')
-            .trim();
-        let el = this.mainButton.nativeElement.querySelector('.sb4-primary');
-        let remInPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        let height = (el?.getBoundingClientRect().height ?? 0) - remInPx * 0.1;
-        this.wavesurfer = WaveSurfer.create({
-            container: this.waveformRef.nativeElement,
-            waveColor: primaryColor,
-            progressColor: this.addAlphaToColor(primaryColor, 0.5),
-            height: height,
-            barWidth: 5,
-            barGap: 1,
-            barRadius: 5,
-        });
-        this.wavesurfer.setVolume(1);
-        const mimeType = UploadWidgetUtils.chooseRecorderMimeType('audio');
-        this.record = this.wavesurfer.registerPlugin(RecordPlugin.create({
-            renderRecordedAudio: true,
-            scrollingWaveform: true,
-            continuousWaveform: false,
-            continuousWaveformDuration: 15,
-            mimeType,
-        }));
-        this.wavesurfer.on('dblclick', () => {
-            this.updateViewState(() => {
-                this.wavesurfer?.play();
-                this.isPlaying = true;
-            });
-        });
-        this.record.on('record-end', (blob) => {
-            this.updateViewState(() => {
-                this.recordedBlob = blob;
-                this.isRecording = false;
-            });
-        });
-        this.record.on('record-progress', (time) => {
-            this.updateViewState(() => {
-                this.updateProgress(time);
-            });
-        });
-        this.wavesurfer.on('finish', () => {
-            this.updateViewState(() => {
-                this.isPlaying = false;
-            });
-        });
-    }
-    async startRecording() {
-        const confirmed = this.checkHasRecorded();
-        if (!confirmed || this.isRecording)
-            return;
-        // Initialize first (still within the gesture tick on most browsers)
-        await this.initializeWaveSurferIfNeeded();
-        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;
-            this.recordedBlob = null;
-            this.time = '00:00';
-        });
-        try {
-            // Force native mic permission first so it works with WKWebView
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            stream.getTracks().forEach((track) => track.stop());
-            await this.record.startRecording();
-        }
-        catch (error) {
-            console.error('Mic failed', error);
-            this.updateViewState(() => {
-                this.isRecording = false;
-                this.isWaveformOpen = !!this.recordedBlob;
-                this.microphoneError.set(true);
-            });
-            throw error;
-        }
-    }
-    /**
-     * Whether recording may start. Always `true` today: the branch below is where a "you
-     * already have a recording — overwrite it?" confirmation was meant to go, and never did.
-     * Kept, rather than inlined away, so the place stays visible; see A37.
-     */
-    checkHasRecorded() {
-        if (this.recordedBlob) {
-        }
-        return true;
-    }
-    updateProgress(time) {
-        let formattedTime = [Math.floor((time % 3600000) / 60000), Math.floor((time % 60000) / 1000)]
-            .map((v) => (v < 10 ? '0' + v : v))
-            .join(':');
-        this.time = formattedTime;
-    }
-    stopRecording() {
-        if (this.record && this.isRecording) {
-            this.record.stopRecording();
-            this.updateViewState(() => {
-                this.isRecording = false;
-            });
-        }
-    }
-    saveRecording() {
-        if (this.recordedBlob) {
-            const file = UploadWidgetUtils.createRecordingFile(this.recordedBlob, 'recording', 'audio/mp4');
-            this.recordingSaved.emit(file);
-            // Destroy completely so next recording initializes fresh
-            this.wavesurfer?.destroy();
-            this.wavesurfer = undefined;
-            this.record = undefined;
-            this.updateViewState(() => {
-                this.recordedBlob = null;
-                this.time = '00:00';
-                this.isPlaying = false;
-                this.isWaveformOpen = false;
-            });
+    ngAfterViewInit() {
+        if (this.deviceStart() === CaptureDeviceStart.AUTO) {
+            this.device.requestRecording();
         }
     }
-    replayRecording() {
-        if (this.recordedBlob) {
-            this.updateViewState(() => {
-                this.isPlaying = !this.isPlaying;
-                this.wavesurfer?.playPause();
-            });
-        }
+    get isLeftDirection() {
+        return this.openDirection() === 'LEFT';
     }
     ngOnDestroy() {
-        if (this.wavesurfer) {
-            this.wavesurfer.destroy();
-        }
-    }
-    addAlphaToColor(hexColor, alpha) {
-        if (/^#([a-f\d])([a-f\d])([a-f\d])$/i.test(hexColor)) {
-            hexColor = hexColor.replace(/^#([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`);
-        }
-        const hexMatch = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor);
-        if (hexMatch) {
-            const [, r, g, b] = hexMatch;
-            return `rgba(${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt(b, 16)}, ${alpha})`;
-        }
-        const ctx = document.createElement('canvas').getContext('2d');
-        if (ctx) {
-            ctx.fillStyle = hexColor;
-            const parsed = ctx.fillStyle;
-            const rgbMatch = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.exec(parsed);
-            if (rgbMatch) {
-                const [, r, g, b] = rgbMatch;
-                return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-            }
-        }
-        return hexColor;
-    }
-    updateViewState(update) {
-        this.ngZone.run(() => {
-            update();
-            this.changeDetectorRef.markForCheck();
-        });
+        this.device.release();
     }
     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 }, 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: VoiceRecordWidgetComponent, isStandalone: true, selector: "voice-record-widget", inputs: { openDirection: { classPropertyName: "openDirection", publicName: "openDirection", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, showMicrophoneError: { classPropertyName: "showMicrophoneError", publicName: "showMicrophoneError", isSignal: true, isRequired: false, transformFunction: null }, deviceStart: { classPropertyName: "deviceStart", publicName: "deviceStart", isSignal: true, isRequired: false, transformFunction: null }, handover: { classPropertyName: "handover", publicName: "handover", isSignal: true, isRequired: false, transformFunction: null }, showSaveTitle: { classPropertyName: "showSaveTitle", publicName: "showSaveTitle", isSignal: true, isRequired: false, transformFunction: null } }, 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]=\"device.isWaveformShown()\"\n  [class.isRecording]=\"device.isRecording()\"\n  [class.hasRecording]=\"device.recordedBlob()\"\n  >\n  <div class=\"recorderMain\">\n    <div class=\"recorderToolbar\">\n      <!-- Start Recording -->\n      @if (!device.isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"micButton\"\n          (actionClick)=\"device.requestRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Stop Recording -->\n      @if (device.isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"stopButton\"\n          (actionClick)=\"device.stopRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Save Recording -->\n      @if (device.recordedBlob()) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"effectiveSaveButton()\"\n          (actionClick)=\"device.saveRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Start Play  -->\n      @if (device.recordedBlob() && !device.isPlaying()) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"playButton\"\n          (actionClick)=\"device.replayRecording()\"\n        ></ui-action-button>\n      }\n\n      <!-- Stop Play  -->\n      @if (device.recordedBlob() && device.isPlaying()) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"stopPlaybackButton\"\n          (actionClick)=\"device.replayRecording()\"\n        ></ui-action-button>\n      }\n\n      @if (device.isRecording()) {\n        <div class=\"progress\">{{ device.time() }}</div>\n      }\n    </div>\n\n    <div class=\"waveformBand\" [class.open]=\"device.isWaveformShown()\">\n      <div class=\"waveformGrid\"></div>\n      <div class=\"waveform\" #waveform></div>\n    </div>\n  </div>\n</div>\n@if (showMicrophoneError() && device.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@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"] }]
+            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]=\"device.isWaveformShown()\"\n  [class.isRecording]=\"device.isRecording()\"\n  [class.hasRecording]=\"device.recordedBlob()\"\n  >\n  <div class=\"recorderMain\">\n    <div class=\"recorderToolbar\">\n      <!-- Start Recording -->\n      @if (!device.isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"micButton\"\n          (actionClick)=\"device.requestRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Stop Recording -->\n      @if (device.isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"stopButton\"\n          (actionClick)=\"device.stopRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Save Recording -->\n      @if (device.recordedBlob()) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"effectiveSaveButton()\"\n          (actionClick)=\"device.saveRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Start Play  -->\n      @if (device.recordedBlob() && !device.isPlaying()) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"playButton\"\n          (actionClick)=\"device.replayRecording()\"\n        ></ui-action-button>\n      }\n\n      <!-- Stop Play  -->\n      @if (device.recordedBlob() && device.isPlaying()) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"stopPlaybackButton\"\n          (actionClick)=\"device.replayRecording()\"\n        ></ui-action-button>\n      }\n\n      @if (device.isRecording()) {\n        <div class=\"progress\">{{ device.time() }}</div>\n      }\n    </div>\n\n    <div class=\"waveformBand\" [class.open]=\"device.isWaveformShown()\">\n      <div class=\"waveformGrid\"></div>\n      <div class=\"waveform\" #waveform></div>\n    </div>\n  </div>\n</div>\n@if (showMicrophoneError() && device.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 }] }], 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"] }] } });
+            }], openDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDirection", required: false }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: false }] }], showMicrophoneError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMicrophoneError", required: false }] }], deviceStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "deviceStart", required: false }] }], handover: [{ type: i0.Input, args: [{ isSignal: true, alias: "handover", required: false }] }], showSaveTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSaveTitle", required: false }] }], recordingSaved: [{ type: i0.Output, args: ["recordingSaved"] }] } });
 
 class UploadWidgetComponent {
     constructor() {
+        this.captureDialogService = inject(CaptureDialogService);
         this.uploadDescriptor = input(this.defaultUploadDescriptor, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "uploadDescriptor" }] : /* istanbul ignore next */ []));
         this.isMultiple = input.required(/* @ts-ignore */
@@ -9890,7 +10433,20 @@ class UploadWidgetComponent {
         ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         this.sources = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sources" }] : /* istanbul ignore next */ []));
+        this.capture = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "capture" }] : /* istanbul ignore next */ []));
         this.uploadFilesEvent = output();
+        /** The Capture Settings in force: a missing bean or field takes its default here only. */
+        this.captureSettings = computed(() => {
+            const capture = this.capture();
+            return {
+                mode: capture?.mode ?? CaptureMode.DIALOG,
+                openDirection: capture?.openDirection ?? CaptureOpenDirection.RIGHT,
+                deviceStart: capture?.deviceStart ?? CaptureDeviceStart.AUTO,
+                handover: capture?.handover ?? CaptureHandover.CONFIRM,
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "captureSettings" }] : /* istanbul ignore next */ []));
         this.uploadWidgetType = UploadWidgetType;
         this.fileUploaderSource = FileUploaderSource;
         /** The recorder opens below the capture row at a click on the microphone button. */
@@ -9965,17 +10521,45 @@ class UploadWidgetComponent {
     getCaptureSources() {
         return (this.sources() ?? []).filter((source) => source !== FileUploaderSource.FILE);
     }
+    /** On a phone a camera button stays the device's own camera, whatever the Capture Mode says. */
     startCapture(source) {
-        if (source === FileUploaderSource.CAMERA_PHOTO) {
-            this.photoCapture?.openCapture();
+        const camera = this.getCameraWidget(source);
+        if (this.captureSettings().mode === CaptureMode.DIALOG && !camera?.isMobile()) {
+            this.openCaptureDialog(source);
         }
-        else if (source === FileUploaderSource.CAMERA_VIDEO) {
-            this.videoCapture?.openCapture();
+        else if (camera) {
+            camera.openCapture();
         }
         else if (source === FileUploaderSource.MICROPHONE) {
             this.isRecorderOpen.update((open) => !open);
         }
     }
+    getCameraWidget(source) {
+        if (source === FileUploaderSource.MICROPHONE) {
+            return undefined;
+        }
+        return source === FileUploaderSource.CAMERA_PHOTO ? this.photoCapture : this.videoCapture;
+    }
+    openCaptureDialog(source) {
+        this.captureDialogService
+            .openCaptureDialog({
+            size: {},
+            content: { title: this.texts[CAPTURE_BUTTONS[source].dialogTitle] },
+            source,
+            settings: this.captureSettings(),
+            texts: this.texts,
+            maxFileSize: source === FileUploaderSource.CAMERA_PHOTO ? this.getMaxFileSize() : undefined,
+        })
+            .afterClosed()
+            .subscribe((files) => {
+            if (files) {
+                this.uploadImage(files);
+            }
+        });
+    }
+    getMaxFileSize() {
+        return this.maxSizeMb * 1024 * 1024;
+    }
     getCaptureButtonClass(source) {
         return CAPTURE_BUTTONS[source].cssClass;
     }
@@ -10019,7 +10603,7 @@ class UploadWidgetComponent {
         };
     }
     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 }, 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UploadWidgetComponent, isStandalone: true, selector: "smart-upload-widget", inputs: { uploadDescriptor: { classPropertyName: "uploadDescriptor", publicName: "uploadDescriptor", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: true, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, sources: { classPropertyName: "sources", publicName: "sources", isSignal: true, isRequired: false, transformFunction: null }, capture: { classPropertyName: "capture", publicName: "capture", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadFilesEvent: "uploadFilesEvent" }, viewQueries: [{ propertyName: "fileUploadMaterial", first: true, predicate: ["fileUploadMaterial"], descendants: true }, { propertyName: "photoCapture", first: true, predicate: ["photoCapture"], descendants: true }, { propertyName: "videoCapture", first: true, predicate: ["videoCapture"], descendants: true }], ngImport: i0, template: "<div class=\"sb4UploadWidget\">\n  @if (hasSources()) {\n    <!-- CAPTURE ROW OF THE SOURCES, hidden in view mode -->\n    @if (getCaptureSources().length && !isDisabled()) {\n      <div class=\"captureRow\" [class.captureOnly]=\"isCaptureOnly()\">\n        <div class=\"captureButtons\">\n          @for (source of getCaptureSources(); track source) {\n            <ui-action-button\n              class=\"{{ getCaptureButtonClass(source) }}\"\n              [descriptor]=\"getCaptureButton(source)\"\n              (actionClick)=\"startCapture(source)\"\n            ></ui-action-button>\n          }\n        </div>\n        @if (isCaptureOnly()) {\n          <div class=\"captureHint\">{{ getCaptureOnlyHint() }}</div>\n        }\n      </div>\n    }\n    @if (isSourceNeeded(fileUploaderSource.CAMERA_PHOTO)) {\n      <photo-capture-widget\n        #photoCapture\n        [mode]=\"'PHOTO'\"\n        [externalTrigger]=\"true\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [texts]=\"texts\"\n        [maxFileSize]=\"getMaxFileSize()\"\n        (photoCaptured)=\"uploadImage($event)\"\n      ></photo-capture-widget>\n    }\n    @if (isSourceNeeded(fileUploaderSource.CAMERA_VIDEO)) {\n      <photo-capture-widget\n        #videoCapture\n        [mode]=\"'VIDEO'\"\n        [externalTrigger]=\"true\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [texts]=\"texts\"\n        (photoCaptured)=\"uploadImage($event)\"\n      ></photo-capture-widget>\n    }\n    @if (isRecorderOpen()) {\n      <voice-record-widget\n        [openDirection]=\"captureSettings().openDirection\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [showSaveTitle]=\"true\"\n        [texts]=\"texts\"\n        [showMicrophoneError]=\"true\"\n        (recordingSaved)=\"uploadRecording($event)\"\n      ></voice-record-widget>\n    }\n  } @else {\n    <!-- IMAGE TYPE WIDGET -->\n    @if (widgetNeeded(uploadWidgetType.IMAGE) || widgetNeeded(uploadWidgetType.ALL)) {\n      <photo-capture-widget\n        [maxFileSize]=\"getMaxFileSize()\"\n        [texts]=\"texts\"\n        (photoCaptured)=\"uploadImage($event)\"\n        >\n      </photo-capture-widget>\n    }\n\n    <!-- SOUND TYPE WIDGET -->\n    @if (widgetNeeded(uploadWidgetType.SOUND) || widgetNeeded(uploadWidgetType.ALL)) {\n      <voice-record-widget\n        [texts]=\"texts\"\n        [showMicrophoneError]=\"true\"\n        (recordingSaved)=\"uploadRecording($event)\"\n      ></voice-record-widget>\n    }\n  }\n  <smartfileuploader\n    #fileUploadMaterial\n    [i18n]=\"i18n\"\n    [fileFormats]=\"fileFormats\"\n    [maxSizeMb]=\"maxSizeMb\"\n    [uploadCallback]=\"upload.bind(this)\"\n    [isMultiple]=\"isMultiple()\"\n    [autoUpload]=\"isUploadImmediate()\"\n    [isDisabled]=\"isDisabled()\"\n    [pickerShown]=\"isPickerShown()\"\n  ></smartfileuploader>\n</div>\n", styles: ["photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}voice-record-widget{box-sizing:border-box;padding:.5rem;border-bottom:1px solid #e5e7eb}voice-record-widget ::ng-deep .sb4-red,voice-record-widget ::ng-deep .sb4-primary,voice-record-widget ::ng-deep ui-action-button{border:unset!important}@media(max-width:900px){:host{width:100%}}.captureRow{display:flex;justify-content:center;padding:.5rem;border-bottom:1px solid #e5e7eb}.captureRow.captureOnly{border-bottom:unset;flex-direction:column;align-items:center;padding:.875rem .5rem;gap:.375rem}.captureButtons{display:flex;gap:.5rem}.captureButtons ::ng-deep button{border:unset}.captureHint{font-size:12px;color:#6b7280}\n"], dependencies: [{ kind: "component", type: PhotoCaptureWidgetComponent, selector: "photo-capture-widget", inputs: ["maxFileSize", "mode", "externalTrigger", "texts", "deviceStart", "handover"], outputs: ["photoCaptured"] }, { kind: "component", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: ["openDirection", "texts", "showMicrophoneError", "deviceStart", "handover", "showSaveTitle"], 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,
@@ -10028,7 +10612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         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"] }]
+                    ], template: "<div class=\"sb4UploadWidget\">\n  @if (hasSources()) {\n    <!-- CAPTURE ROW OF THE SOURCES, hidden in view mode -->\n    @if (getCaptureSources().length && !isDisabled()) {\n      <div class=\"captureRow\" [class.captureOnly]=\"isCaptureOnly()\">\n        <div class=\"captureButtons\">\n          @for (source of getCaptureSources(); track source) {\n            <ui-action-button\n              class=\"{{ getCaptureButtonClass(source) }}\"\n              [descriptor]=\"getCaptureButton(source)\"\n              (actionClick)=\"startCapture(source)\"\n            ></ui-action-button>\n          }\n        </div>\n        @if (isCaptureOnly()) {\n          <div class=\"captureHint\">{{ getCaptureOnlyHint() }}</div>\n        }\n      </div>\n    }\n    @if (isSourceNeeded(fileUploaderSource.CAMERA_PHOTO)) {\n      <photo-capture-widget\n        #photoCapture\n        [mode]=\"'PHOTO'\"\n        [externalTrigger]=\"true\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [texts]=\"texts\"\n        [maxFileSize]=\"getMaxFileSize()\"\n        (photoCaptured)=\"uploadImage($event)\"\n      ></photo-capture-widget>\n    }\n    @if (isSourceNeeded(fileUploaderSource.CAMERA_VIDEO)) {\n      <photo-capture-widget\n        #videoCapture\n        [mode]=\"'VIDEO'\"\n        [externalTrigger]=\"true\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [texts]=\"texts\"\n        (photoCaptured)=\"uploadImage($event)\"\n      ></photo-capture-widget>\n    }\n    @if (isRecorderOpen()) {\n      <voice-record-widget\n        [openDirection]=\"captureSettings().openDirection\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [showSaveTitle]=\"true\"\n        [texts]=\"texts\"\n        [showMicrophoneError]=\"true\"\n        (recordingSaved)=\"uploadRecording($event)\"\n      ></voice-record-widget>\n    }\n  } @else {\n    <!-- IMAGE TYPE WIDGET -->\n    @if (widgetNeeded(uploadWidgetType.IMAGE) || widgetNeeded(uploadWidgetType.ALL)) {\n      <photo-capture-widget\n        [maxFileSize]=\"getMaxFileSize()\"\n        [texts]=\"texts\"\n        (photoCaptured)=\"uploadImage($event)\"\n        >\n      </photo-capture-widget>\n    }\n\n    <!-- SOUND TYPE WIDGET -->\n    @if (widgetNeeded(uploadWidgetType.SOUND) || widgetNeeded(uploadWidgetType.ALL)) {\n      <voice-record-widget\n        [texts]=\"texts\"\n        [showMicrophoneError]=\"true\"\n        (recordingSaved)=\"uploadRecording($event)\"\n      ></voice-record-widget>\n    }\n  }\n  <smartfileuploader\n    #fileUploadMaterial\n    [i18n]=\"i18n\"\n    [fileFormats]=\"fileFormats\"\n    [maxSizeMb]=\"maxSizeMb\"\n    [uploadCallback]=\"upload.bind(this)\"\n    [isMultiple]=\"isMultiple()\"\n    [autoUpload]=\"isUploadImmediate()\"\n    [isDisabled]=\"isDisabled()\"\n    [pickerShown]=\"isPickerShown()\"\n  ></smartfileuploader>\n</div>\n", styles: ["photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}voice-record-widget{box-sizing:border-box;padding:.5rem;border-bottom:1px solid #e5e7eb}voice-record-widget ::ng-deep .sb4-red,voice-record-widget ::ng-deep .sb4-primary,voice-record-widget ::ng-deep ui-action-button{border:unset!important}@media(max-width:900px){:host{width:100%}}.captureRow{display:flex;justify-content:center;padding:.5rem;border-bottom:1px solid #e5e7eb}.captureRow.captureOnly{border-bottom:unset;flex-direction:column;align-items:center;padding:.875rem .5rem;gap:.375rem}.captureButtons{display:flex;gap:.5rem}.captureButtons ::ng-deep button{border:unset}.captureHint{font-size:12px;color:#6b7280}\n"] }]
         }], propDecorators: { fileUploadMaterial: [{
                 type: ViewChild,
                 args: ['fileUploadMaterial']
@@ -10038,25 +10622,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }], 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"] }] } });
+            }], uploadDescriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadDescriptor", required: false }] }], isMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiple", required: true }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], sources: [{ type: i0.Input, args: [{ isSignal: true, alias: "sources", required: false }] }], capture: [{ type: i0.Input, args: [{ isSignal: true, alias: "capture", required: false }] }], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }] } });
 const CAPTURE_BUTTONS = {
     [FileUploaderSource.CAMERA_PHOTO]: {
         icon: 'photo_camera',
         cssClass: 'capturePhotoButton',
         tooltip: 'capturePhoto',
         noun: 'photo',
+        dialogTitle: 'photoDialogTitle',
     },
     [FileUploaderSource.CAMERA_VIDEO]: {
         icon: 'videocam',
         cssClass: 'captureVideoButton',
         tooltip: 'captureVideo',
         noun: 'video',
+        dialogTitle: 'videoDialogTitle',
     },
     [FileUploaderSource.MICROPHONE]: {
         icon: 'mic',
         cssClass: 'recordAudioButton',
         tooltip: 'recordAudio',
         noun: 'audio',
+        dialogTitle: 'audioDialogTitle',
     },
 };
 
@@ -10376,7 +10963,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        [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"] }] }); }
+        ], ngImport: i0, template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else if (!widgetInstance.value || fileToChange) {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n        [sources]=\"widgetInstance.fileUploaderProperties.sources\"\n        [capture]=\"widgetInstance.fileUploaderProperties.capture\"\n        [isMultiple]=\"false\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n      @if (clearedFile && !isDisabled) {\n        <div class=\"undoClearContainer\">\n          <ui-action-button\n            class=\"removeIcon undoClearButton\"\n            (actionClick)=\"undoClear()\"\n            [descriptor]=\"removeButton\"\n          ></ui-action-button>\n        </div>\n      }\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      @if (preview; as filePreview) {\n        <div class=\"filePreview\">\n          @switch (filePreview.kind) {\n            @case ('image') {\n              <img [src]=\"filePreview.url\" [alt]=\"widgetInstance.value?.fileName\" />\n            }\n            @case ('video') {\n              <video\n                controls\n                [src]=\"filePreview.url\"\n                (loadedmetadata)=\"onPreviewMetadata($event)\"\n              ></video>\n            }\n            @case ('audio') {\n              <audio controls [src]=\"filePreview.url\"></audio>\n            }\n          }\n        </div>\n      }\n      <div class=\"uploadedFile\">\n        @if (!preview) {\n          <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n        }\n\n        <div class=\"fileData\">\n          <div class=\"fileDataContainer\">\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n            <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n          </div>\n        </div>\n\n        <div class=\"fileActions\">\n          <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n          @if (!fileToChange) {\n            <ui-action-button\n              class=\"changeButton\"\n              (actionClick)=\"change(widgetInstance.value)\"\n              [disabled]=\"isDisabled\"\n              [descriptor]=\"changeButton\"\n              >\n            </ui-action-button>\n            @if (!isDisabled && isClearEnabled) {\n              <ui-action-button\n                class=\"deleteButton\"\n                (actionClick)=\"clear()\"\n                [descriptor]=\"deleteButton\"\n              ></ui-action-button>\n            }\n          } @else {\n            <ui-action-button\n              class=\"removeIcon\"\n              (actionClick)=\"cancelChange()\"\n              [descriptor]=\"removeButton\"\n            ></ui-action-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button,.undoClearContainer ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover,.undoClearContainer ::ng-deep button:hover{border:unset}.undoClearContainer{display:flex;justify-content:flex-end;padding:0 1rem .5rem}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.filePreview{padding:.75rem 1rem 0}.filePreview img,.filePreview video{display:block;width:100%;max-height:200px;object-fit:contain;background:var(--color-surface-alt);border-radius:4px}.filePreview audio{display:block;width:100%}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled", "sources", "capture"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFileEditorComponent, decorators: [{
             type: Component,
@@ -10386,7 +10973,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        [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"] }]
+                    ], imports: [NgClass, NgStyle, SmartIconComponent, UploadWidgetComponent, UiActionToolbarComponent, UiActionButtonComponent], template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else if (!widgetInstance.value || fileToChange) {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n        [sources]=\"widgetInstance.fileUploaderProperties.sources\"\n        [capture]=\"widgetInstance.fileUploaderProperties.capture\"\n        [isMultiple]=\"false\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n      @if (clearedFile && !isDisabled) {\n        <div class=\"undoClearContainer\">\n          <ui-action-button\n            class=\"removeIcon undoClearButton\"\n            (actionClick)=\"undoClear()\"\n            [descriptor]=\"removeButton\"\n          ></ui-action-button>\n        </div>\n      }\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      @if (preview; as filePreview) {\n        <div class=\"filePreview\">\n          @switch (filePreview.kind) {\n            @case ('image') {\n              <img [src]=\"filePreview.url\" [alt]=\"widgetInstance.value?.fileName\" />\n            }\n            @case ('video') {\n              <video\n                controls\n                [src]=\"filePreview.url\"\n                (loadedmetadata)=\"onPreviewMetadata($event)\"\n              ></video>\n            }\n            @case ('audio') {\n              <audio controls [src]=\"filePreview.url\"></audio>\n            }\n          }\n        </div>\n      }\n      <div class=\"uploadedFile\">\n        @if (!preview) {\n          <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n        }\n\n        <div class=\"fileData\">\n          <div class=\"fileDataContainer\">\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n            <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n          </div>\n        </div>\n\n        <div class=\"fileActions\">\n          <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n          @if (!fileToChange) {\n            <ui-action-button\n              class=\"changeButton\"\n              (actionClick)=\"change(widgetInstance.value)\"\n              [disabled]=\"isDisabled\"\n              [descriptor]=\"changeButton\"\n              >\n            </ui-action-button>\n            @if (!isDisabled && isClearEnabled) {\n              <ui-action-button\n                class=\"deleteButton\"\n                (actionClick)=\"clear()\"\n                [descriptor]=\"deleteButton\"\n              ></ui-action-button>\n            }\n          } @else {\n            <ui-action-button\n              class=\"removeIcon\"\n              (actionClick)=\"cancelChange()\"\n              [descriptor]=\"removeButton\"\n            ></ui-action-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button,.undoClearContainer ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover,.undoClearContainer ::ng-deep button:hover{border:unset}.undoClearContainer{display:flex;justify-content:flex-end;padding:0 1rem .5rem}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.filePreview{padding:.75rem 1rem 0}.filePreview img,.filePreview video{display:block;width:100%;max-height:200px;object-fit:contain;background:var(--color-surface-alt);border-radius:4px}.filePreview audio{display:block;width:100%}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"] }]
         }], propDecorators: { widgetInstance: [{
                 type: Input
             }], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }] } });
@@ -11457,7 +12044,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        [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"] }] }); }
+        ], ngImport: i0, template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\n        [sources]=\"widgetInstance.multiFileUploaderProperties.sources\"\n        [capture]=\"widgetInstance.multiFileUploaderProperties.capture\"\n        [isMultiple]=\"true\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"scrollable\">\n        @for (file of widgetInstance.value; track file; let i = $index) {\n          <div class=\"uploadedFile\">\n            @let previewKind = getPreviewKind(file);\n            @let thumbnail = previewKind === 'image' ? getPreview(file.dataUri) : undefined;\n            @if (thumbnail) {\n              <img class=\"fileThumbnail\" [src]=\"thumbnail.url\" [alt]=\"file.fileName\" />\n            } @else if (previewKind === 'video' || previewKind === 'audio') {\n              <button\n                type=\"button\"\n                class=\"playTile\"\n                [class.audioTile]=\"previewKind === 'audio'\"\n                [class.open]=\"expandedDataUri === file.dataUri\"\n                [smartTooltip]=\"playTooltip\"\n                (click)=\"togglePlayer(file.dataUri)\"\n              >\n                <smart-icon\n                  [icon]=\"previewKind === 'audio' ? 'graphic_eq' : 'play_arrow'\"\n                ></smart-icon>\n              </button>\n            } @else {\n              <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n            }\n            <div class=\"fileData\">\n              <div class=\"fileDataContainer\">\n                <span class=\"fileName\">{{ file?.fileName }}</span>\n                <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(file?.size)) }}</span>\n              </div>\n            </div>\n            <div class=\"fileActions\">\n              <!--\n                One toolbar per file, each resolving the widget's actions for itself and\n                carrying its own file. The hidden sibling whose list these used to read is\n                gone with the collection machinery (ADR-0006).\n              -->\n              <smart-ui-action-toolbar\n                [id]=\"widgetInstance.toolbarId\"\n                [actionParams]=\"{ _dataUri: file.dataUri }\"\n              ></smart-ui-action-toolbar>\n              <smart-icon\n                class=\"downloadIcon\"\n                icon=\"download\"\n                (click)=\"downloadFile(file.dataUri)\"\n              ></smart-icon>\n              @if (!file.readOnly && !isDisabled) {\n                <smart-icon\n                  class=\"removeIcon\"\n                  [icon]=\"removeIcon\"\n                  (click)=\"file.readOnly === false && deleteFile(file.dataUri)\"\n                ></smart-icon>\n              }\n            </div>\n          </div>\n          @if (expandedDataUri === file.dataUri) {\n            @if (getPreview(file.dataUri); as player) {\n              <div class=\"filePlayer\">\n                @if (player.kind === 'audio') {\n                  <audio controls [src]=\"player.url\"></audio>\n                } @else {\n                  <video\n                    controls\n                    [src]=\"player.url\"\n                    (loadedmetadata)=\"onPreviewMetadata(file.dataUri, $event)\"\n                  ></video>\n                }\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileThumbnail,.playTile{width:3rem;height:3rem;flex:none;border-radius:4px}.fileThumbnail{object-fit:cover;background:var(--color-surface-alt)}.playTile{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:#2f3550;color:#fff;cursor:pointer}.playTile.audioTile{background:var(--color-surface-alt);color:var(--primary-color)}.playTile.open{outline:2px solid var(--primary-color);outline-offset:1px}.playTile smart-icon,.playTile smart-icon ::ng-deep mat-icon{font-size:2rem;color:inherit}.scrollable>.uploadedFile:has(+.filePlayer){border-bottom:none}.filePlayer{padding:0 1rem .75rem 5rem}.filePlayer video{display:block;width:100%;max-height:160px;background:#000;border-radius:4px}.filePlayer audio{display:block;width:100%}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled", "sources", "capture"], outputs: ["uploadFilesEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartMultiFileEditorComponent, decorators: [{
             type: Component,
@@ -11474,7 +12061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         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"] }]
+                    ], template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\n        [sources]=\"widgetInstance.multiFileUploaderProperties.sources\"\n        [capture]=\"widgetInstance.multiFileUploaderProperties.capture\"\n        [isMultiple]=\"true\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"scrollable\">\n        @for (file of widgetInstance.value; track file; let i = $index) {\n          <div class=\"uploadedFile\">\n            @let previewKind = getPreviewKind(file);\n            @let thumbnail = previewKind === 'image' ? getPreview(file.dataUri) : undefined;\n            @if (thumbnail) {\n              <img class=\"fileThumbnail\" [src]=\"thumbnail.url\" [alt]=\"file.fileName\" />\n            } @else if (previewKind === 'video' || previewKind === 'audio') {\n              <button\n                type=\"button\"\n                class=\"playTile\"\n                [class.audioTile]=\"previewKind === 'audio'\"\n                [class.open]=\"expandedDataUri === file.dataUri\"\n                [smartTooltip]=\"playTooltip\"\n                (click)=\"togglePlayer(file.dataUri)\"\n              >\n                <smart-icon\n                  [icon]=\"previewKind === 'audio' ? 'graphic_eq' : 'play_arrow'\"\n                ></smart-icon>\n              </button>\n            } @else {\n              <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n            }\n            <div class=\"fileData\">\n              <div class=\"fileDataContainer\">\n                <span class=\"fileName\">{{ file?.fileName }}</span>\n                <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(file?.size)) }}</span>\n              </div>\n            </div>\n            <div class=\"fileActions\">\n              <!--\n                One toolbar per file, each resolving the widget's actions for itself and\n                carrying its own file. The hidden sibling whose list these used to read is\n                gone with the collection machinery (ADR-0006).\n              -->\n              <smart-ui-action-toolbar\n                [id]=\"widgetInstance.toolbarId\"\n                [actionParams]=\"{ _dataUri: file.dataUri }\"\n              ></smart-ui-action-toolbar>\n              <smart-icon\n                class=\"downloadIcon\"\n                icon=\"download\"\n                (click)=\"downloadFile(file.dataUri)\"\n              ></smart-icon>\n              @if (!file.readOnly && !isDisabled) {\n                <smart-icon\n                  class=\"removeIcon\"\n                  [icon]=\"removeIcon\"\n                  (click)=\"file.readOnly === false && deleteFile(file.dataUri)\"\n                ></smart-icon>\n              }\n            </div>\n          </div>\n          @if (expandedDataUri === file.dataUri) {\n            @if (getPreview(file.dataUri); as player) {\n              <div class=\"filePlayer\">\n                @if (player.kind === 'audio') {\n                  <audio controls [src]=\"player.url\"></audio>\n                } @else {\n                  <video\n                    controls\n                    [src]=\"player.url\"\n                    (loadedmetadata)=\"onPreviewMetadata(file.dataUri, $event)\"\n                  ></video>\n                }\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileThumbnail,.playTile{width:3rem;height:3rem;flex:none;border-radius:4px}.fileThumbnail{object-fit:cover;background:var(--color-surface-alt)}.playTile{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:#2f3550;color:#fff;cursor:pointer}.playTile.audioTile{background:var(--color-surface-alt);color:var(--primary-color)}.playTile.open{outline:2px solid var(--primary-color);outline-offset:1px}.playTile smart-icon,.playTile smart-icon ::ng-deep mat-icon{font-size:2rem;color:inherit}.scrollable>.uploadedFile:has(+.filePlayer){border-bottom:none}.filePlayer{padding:0 1rem .75rem 5rem}.filePlayer video{display:block;width:100%;max-height:160px;background:#000;border-radius:4px}.filePlayer audio{display:block;width:100%}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"] }]
         }], propDecorators: { widgetInstance: [{
                 type: Input
             }], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }], fileEvent: [{ type: i0.Output, args: ["fileEvent"] }] } });
@@ -11704,7 +12291,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", "texts", "showMicrophoneError"], outputs: ["recordingSaved"] }] }); }
+        ], ngImport: i0, template: "<voice-record-widget [openDirection]=\"openDirection\" (recordingSaved)=\"uploadRecording($event)\">\n</voice-record-widget>\n", styles: [":host{display:block;width:100%;min-width:0}\n"], dependencies: [{ kind: "component", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: ["openDirection", "texts", "showMicrophoneError", "deviceStart", "handover", "showSaveTitle"], outputs: ["recordingSaved"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartVoiceRecorderComponent, decorators: [{
             type: Component,
@@ -16425,7 +17012,8 @@ class Table {
     renderRows() {
         this.createCellToActionMap();
         this.rowMenuActionModelArrayCache.clear();
-        this.myTableChild.renderRows();
+        // The mobile template renders from its own loop and has no material table.
+        this.myTableChild?.renderRows();
     }
     createCellToActionMap() {
         this.cellToActionMap = SmartGridToolbarActionsUtil.calculateCellToActionMap(this.smartTable.tableRows);
@@ -16782,6 +17370,10 @@ class Table {
         }
     }
     async onToggle(element, event) {
+        // The mobile table has no material table, so no detail row to open.
+        if (!this.myTableChild) {
+            return;
+        }
         if (!this.smartTable.rowExpander) {
             throw new Error('SmartTableRowExpander not found!. Please provide a SmartTableRowExpander implementation.');
         }
@@ -17259,11 +17851,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 class MobileTableComponent extends Table {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MobileTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MobileTableComponent, isStandalone: true, selector: "lib-mobile-table", usesInheritance: true, ngImport: i0, template: "<div class=\"mobileTable\">\n  @for (row of smartTable.tableRows; track trackRow($index, row)) {\n    <div\n      class=\"mobileTableRow\"\n      [ngClass]=\"getRowClasses(row)\"\n      [ngStyle]=\"getRowStyles(row)\"\n      [attr.data-testid]=\"row?.id ?? null\"\n      >\n      @if (showRowStateColumn) {\n        <div class=\"mobileTableCell sm-grid-row-state-cell\" [attr.data-testid]=\"rowStateColumn\">\n          @if (rowStateIcon(row); as icon) {\n            <smart-icon\n              class=\"sm-grid-row-state-icon\"\n              [ngClass]=\"rowStateIconClass(row) ?? ''\"\n              [icon]=\"icon\"\n              color=\"\"\n              role=\"img\"\n              [attr.aria-label]=\"rowStateLabel(row)\"\n              [matTooltip]=\"rowStateLabel(row) ?? ''\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n        <div\n          class=\"mobileTableCell\"\n          (click)=\"handleOnRowClick($event, row)\"\n          (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n          >\n          <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n            {{ header.label }}\n          </div>\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].propertyName === 'select'\n            ) {\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n              [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n              >\n            </mat-checkbox>\n          }\n          @if (\n            smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n            !columnTemplate(i)\n            ) {\n            <div\n              >\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n                <div>\n                  <mat-checkbox\n                    [disabled]=\"true\"\n                    [checked]=\"getValue(row, header.propertyName)\"\n                  ></mat-checkbox>\n                </div>\n              }\n              @if (\n                smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n                smartTable.customSmartTableHeaders[i].properties?.icons?.length\n                ) {\n                <div\n                  >\n                  <smart-icon\n                    [smartTooltip]=\"getToolTip(row, i)\"\n                    [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n                    [color]=\"getColor(getValue(row, header.propertyName), i)\"\n                    >\n                  </smart-icon>\n                </div>\n              }\n            </div>\n          }\n          @if (isImageResource(row, header.propertyName)) {\n            <div>\n              <smart-icon\n                [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n                [color]=\"getImageResourceColor(row, header.propertyName)\"\n                >\n              </smart-icon>\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n            <div\n              class=\"smart-table-buttons-col\"\n              >\n              @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n                <div>\n                  @if (showButton(button, row)) {\n                    <div>\n                      @switch (button.type) {\n                        @case (smartTableButtonType.ICON) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-icon-button\n                            color=\"{{ button.color }}\"\n                            >\n                            <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                          </button>\n                        }\n                        @case (smartTableButtonType.NORMAL) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        @case (smartTableButtonType.RAISED) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-raised-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        <!------ MENU ------>\n                        @case (smartTableButtonType.MENU) {\n                          <div class=\"menu-button\">\n                            <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                              (actionFired)=\"onRowActionFired(element, $event)\"\n                            ></smart-ui-action-toolbar>\n                            <!------ GENERIC HAMBURGER ------>\n                            @if (shouldShowMenuButton(element)) {\n                              <smart-ui-action-toolbar\n                                [uiActionModels]=\"getMenuActions(element)\"\n                                [widgetId]=\"smartTable.getGridId()\"\n                                [nodeId]=\"element.id\"\n                                [actionParams]=\"{ model: element }\"\n                                (actionFired)=\"onRowActionFired(element, $event)\"\n                              ></smart-ui-action-toolbar>\n                            }\n                            <!------ MENU ------>\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n            <div>\n              @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n                <smart-icon\n                  [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                  [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                  [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                  >\n                </smart-icon>\n              }\n            </div>\n          }\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].translator !== undefined\n            ) {\n            <div\n              class=\"smart-table-cell-text\"\n              >\n              {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n            </div>\n          }\n          @if (\n            !smartTable.customSmartTableHeaders ||\n            (smartTable.customSmartTableHeaders &&\n            (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n            ) {\n            <div\n              >\n              @if (header.propertyName === 'icon') {\n                <smart-icon\n                  [icon]=\"getValue(row, header.propertyName)!\"\n                  >\n                </smart-icon>\n              }\n              @if (header.propertyName === 'img') {\n                <img\n                  [src]=\"getValue(row, header.propertyName)\"\n                  alt=\"\"\n                  class=\"smarttableImg\"\n                  />\n              }\n              @if (\n                header.propertyName !== 'icon' &&\n                header.propertyName !== 'img' &&\n                header.propertyName !== 'option' &&\n                header.propertyName !== 'button'\n                ) {\n                @if (columnTemplate(i); as template) {\n                  <smart-html-cell\n                    [row]=\"row\"\n                    [template]=\"template\"\n                    [gridIdentifier]=\"smartTable.getGridId()\"\n                  ></smart-html-cell>\n                } @else if (isTextContent(i)) {\n                  <div class=\"smart-table-cell-text\">{{ getValue(row, header.propertyName) }}</div>\n                } @else {\n                  <div\n                    class=\"smart-table-cell-text\"\n                    [innerHtml]=\"getValue(row, header.propertyName)\"\n                  ></div>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid var(--color-border, #e4eaf2);padding:.5rem;gap:.5rem}.mobileTableRow.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.mobileTableRow.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.mobileTableRow.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.mobileTableRow.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}.mobileTableRow.sm-grid-row-moved{font-style:italic}.mobileTableRow.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}.mobileTableRow.selected{color:inherit}.mobileTableRow.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) );background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint));box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color, #384372)}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartHtmlCellComponent, selector: "smart-html-cell", inputs: ["row", "template", "gridIdentifier"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MobileTableComponent, isStandalone: true, selector: "lib-mobile-table", usesInheritance: true, ngImport: i0, template: "<div class=\"mobileTable\">\n  @for (row of smartTable.tableRows; track trackRow($index, row)) {\n    <div\n      class=\"mobileTableRow\"\n      [ngClass]=\"getRowClasses(row)\"\n      [ngStyle]=\"getRowStyles(row)\"\n      [attr.data-testid]=\"row?.id ?? null\"\n      >\n      @if (showRowStateColumn) {\n        <div class=\"mobileTableCell sm-grid-row-state-cell\" [attr.data-testid]=\"rowStateColumn\">\n          @if (rowStateIcon(row); as icon) {\n            <smart-icon\n              class=\"sm-grid-row-state-icon\"\n              [ngClass]=\"rowStateIconClass(row) ?? ''\"\n              [icon]=\"icon\"\n              color=\"\"\n              role=\"img\"\n              [attr.aria-label]=\"rowStateLabel(row)\"\n              [matTooltip]=\"rowStateLabel(row) ?? ''\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n        <div\n          class=\"mobileTableCell\"\n          (click)=\"handleOnRowClick($event, row)\"\n          (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n          >\n          <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n            {{ header.label }}\n          </div>\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].propertyName === 'select'\n            ) {\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n              [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n              >\n            </mat-checkbox>\n          }\n          @if (\n            smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n            !columnTemplate(i)\n            ) {\n            <div\n              >\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n                <div>\n                  <mat-checkbox\n                    [disabled]=\"true\"\n                    [checked]=\"getValue(row, header.propertyName)\"\n                  ></mat-checkbox>\n                </div>\n              }\n              @if (\n                smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n                smartTable.customSmartTableHeaders[i].properties?.icons?.length\n                ) {\n                <div\n                  >\n                  <smart-icon\n                    [smartTooltip]=\"getToolTip(row, i)\"\n                    [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n                    [color]=\"getColor(getValue(row, header.propertyName), i)\"\n                    >\n                  </smart-icon>\n                </div>\n              }\n            </div>\n          }\n          @if (isImageResource(row, header.propertyName)) {\n            <div>\n              <smart-icon\n                [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n                [color]=\"getImageResourceColor(row, header.propertyName)\"\n                >\n              </smart-icon>\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n            <div\n              class=\"smart-table-buttons-col\"\n              >\n              @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n                <div>\n                  @if (showButton(button, row)) {\n                    <div>\n                      @switch (button.type) {\n                        @case (smartTableButtonType.ICON) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-icon-button\n                            color=\"{{ button.color }}\"\n                            >\n                            <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                          </button>\n                        }\n                        @case (smartTableButtonType.NORMAL) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        @case (smartTableButtonType.RAISED) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-raised-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        <!------ MENU ------>\n                        @case (smartTableButtonType.MENU) {\n                          <div class=\"menu-button\">\n                            <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getRowColumnAction(row, defaultActionToolbarId)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"row.id\"\n                              [actionParams]=\"{ model: row }\"\n                              (actionFired)=\"onRowActionFired(row, $event)\"\n                            ></smart-ui-action-toolbar>\n                            <!------ GENERIC HAMBURGER ------>\n                            @if (shouldShowMenuButton(row)) {\n                              <smart-ui-action-toolbar\n                                [uiActionModels]=\"getMenuActions(row)\"\n                                [widgetId]=\"smartTable.getGridId()\"\n                                [nodeId]=\"row.id\"\n                                [actionParams]=\"{ model: row }\"\n                                (actionFired)=\"onRowActionFired(row, $event)\"\n                              ></smart-ui-action-toolbar>\n                            }\n                            <!------ MENU ------>\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n            <div>\n              @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n                <smart-icon\n                  [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                  [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                  [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                  >\n                </smart-icon>\n              }\n            </div>\n          }\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].translator !== undefined\n            ) {\n            <div\n              class=\"smart-table-cell-text\"\n              >\n              {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n            </div>\n          }\n          @if (\n            !smartTable.customSmartTableHeaders ||\n            (smartTable.customSmartTableHeaders &&\n            (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n            ) {\n            <div\n              >\n              @if (header.propertyName === 'icon') {\n                <smart-icon\n                  [icon]=\"getValue(row, header.propertyName)!\"\n                  >\n                </smart-icon>\n              }\n              @if (header.propertyName === 'img') {\n                <img\n                  [src]=\"getValue(row, header.propertyName)\"\n                  alt=\"\"\n                  class=\"smarttableImg\"\n                  />\n              }\n              @if (\n                header.propertyName !== 'icon' &&\n                header.propertyName !== 'img' &&\n                header.propertyName !== 'option' &&\n                header.propertyName !== 'button'\n                ) {\n                @if (columnTemplate(i); as template) {\n                  <smart-html-cell\n                    [row]=\"row\"\n                    [template]=\"template\"\n                    [gridIdentifier]=\"smartTable.getGridId()\"\n                  ></smart-html-cell>\n                } @else if (isTextContent(i)) {\n                  <div class=\"smart-table-cell-text\">{{ getValue(row, header.propertyName) }}</div>\n                } @else {\n                  <div\n                    class=\"smart-table-cell-text\"\n                    [innerHtml]=\"getValue(row, header.propertyName)\"\n                  ></div>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid var(--color-border, #e4eaf2);padding:.5rem;gap:.5rem}.mobileTableRow.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.mobileTableRow.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.mobileTableRow.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.mobileTableRow.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}.mobileTableRow.sm-grid-row-moved{font-style:italic}.mobileTableRow.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}.mobileTableRow.selected{color:inherit}.mobileTableRow.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) );background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint));box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color, #384372)}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartHtmlCellComponent, selector: "smart-html-cell", inputs: ["row", "template", "gridIdentifier"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MobileTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-mobile-table', imports: [NgClass, NgStyle, MatCheckbox, SmartIconComponent, SmartTooltipDirective, MatTooltip, MatIconButton, MatButton, UiActionToolbarComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe, SmartHtmlCellComponent], template: "<div class=\"mobileTable\">\n  @for (row of smartTable.tableRows; track trackRow($index, row)) {\n    <div\n      class=\"mobileTableRow\"\n      [ngClass]=\"getRowClasses(row)\"\n      [ngStyle]=\"getRowStyles(row)\"\n      [attr.data-testid]=\"row?.id ?? null\"\n      >\n      @if (showRowStateColumn) {\n        <div class=\"mobileTableCell sm-grid-row-state-cell\" [attr.data-testid]=\"rowStateColumn\">\n          @if (rowStateIcon(row); as icon) {\n            <smart-icon\n              class=\"sm-grid-row-state-icon\"\n              [ngClass]=\"rowStateIconClass(row) ?? ''\"\n              [icon]=\"icon\"\n              color=\"\"\n              role=\"img\"\n              [attr.aria-label]=\"rowStateLabel(row)\"\n              [matTooltip]=\"rowStateLabel(row) ?? ''\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n        <div\n          class=\"mobileTableCell\"\n          (click)=\"handleOnRowClick($event, row)\"\n          (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n          >\n          <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n            {{ header.label }}\n          </div>\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].propertyName === 'select'\n            ) {\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n              [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n              >\n            </mat-checkbox>\n          }\n          @if (\n            smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n            !columnTemplate(i)\n            ) {\n            <div\n              >\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n                <div>\n                  <mat-checkbox\n                    [disabled]=\"true\"\n                    [checked]=\"getValue(row, header.propertyName)\"\n                  ></mat-checkbox>\n                </div>\n              }\n              @if (\n                smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n                smartTable.customSmartTableHeaders[i].properties?.icons?.length\n                ) {\n                <div\n                  >\n                  <smart-icon\n                    [smartTooltip]=\"getToolTip(row, i)\"\n                    [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n                    [color]=\"getColor(getValue(row, header.propertyName), i)\"\n                    >\n                  </smart-icon>\n                </div>\n              }\n            </div>\n          }\n          @if (isImageResource(row, header.propertyName)) {\n            <div>\n              <smart-icon\n                [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n                [color]=\"getImageResourceColor(row, header.propertyName)\"\n                >\n              </smart-icon>\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n            <div\n              class=\"smart-table-buttons-col\"\n              >\n              @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n                <div>\n                  @if (showButton(button, row)) {\n                    <div>\n                      @switch (button.type) {\n                        @case (smartTableButtonType.ICON) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-icon-button\n                            color=\"{{ button.color }}\"\n                            >\n                            <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                          </button>\n                        }\n                        @case (smartTableButtonType.NORMAL) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        @case (smartTableButtonType.RAISED) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-raised-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        <!------ MENU ------>\n                        @case (smartTableButtonType.MENU) {\n                          <div class=\"menu-button\">\n                            <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                              (actionFired)=\"onRowActionFired(element, $event)\"\n                            ></smart-ui-action-toolbar>\n                            <!------ GENERIC HAMBURGER ------>\n                            @if (shouldShowMenuButton(element)) {\n                              <smart-ui-action-toolbar\n                                [uiActionModels]=\"getMenuActions(element)\"\n                                [widgetId]=\"smartTable.getGridId()\"\n                                [nodeId]=\"element.id\"\n                                [actionParams]=\"{ model: element }\"\n                                (actionFired)=\"onRowActionFired(element, $event)\"\n                              ></smart-ui-action-toolbar>\n                            }\n                            <!------ MENU ------>\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n            <div>\n              @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n                <smart-icon\n                  [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                  [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                  [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                  >\n                </smart-icon>\n              }\n            </div>\n          }\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].translator !== undefined\n            ) {\n            <div\n              class=\"smart-table-cell-text\"\n              >\n              {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n            </div>\n          }\n          @if (\n            !smartTable.customSmartTableHeaders ||\n            (smartTable.customSmartTableHeaders &&\n            (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n            ) {\n            <div\n              >\n              @if (header.propertyName === 'icon') {\n                <smart-icon\n                  [icon]=\"getValue(row, header.propertyName)!\"\n                  >\n                </smart-icon>\n              }\n              @if (header.propertyName === 'img') {\n                <img\n                  [src]=\"getValue(row, header.propertyName)\"\n                  alt=\"\"\n                  class=\"smarttableImg\"\n                  />\n              }\n              @if (\n                header.propertyName !== 'icon' &&\n                header.propertyName !== 'img' &&\n                header.propertyName !== 'option' &&\n                header.propertyName !== 'button'\n                ) {\n                @if (columnTemplate(i); as template) {\n                  <smart-html-cell\n                    [row]=\"row\"\n                    [template]=\"template\"\n                    [gridIdentifier]=\"smartTable.getGridId()\"\n                  ></smart-html-cell>\n                } @else if (isTextContent(i)) {\n                  <div class=\"smart-table-cell-text\">{{ getValue(row, header.propertyName) }}</div>\n                } @else {\n                  <div\n                    class=\"smart-table-cell-text\"\n                    [innerHtml]=\"getValue(row, header.propertyName)\"\n                  ></div>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid var(--color-border, #e4eaf2);padding:.5rem;gap:.5rem}.mobileTableRow.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.mobileTableRow.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.mobileTableRow.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.mobileTableRow.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}.mobileTableRow.sm-grid-row-moved{font-style:italic}.mobileTableRow.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}.mobileTableRow.selected{color:inherit}.mobileTableRow.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) );background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint));box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color, #384372)}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"] }]
+            args: [{ selector: 'lib-mobile-table', imports: [NgClass, NgStyle, MatCheckbox, SmartIconComponent, SmartTooltipDirective, MatTooltip, MatIconButton, MatButton, UiActionToolbarComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe, SmartHtmlCellComponent], template: "<div class=\"mobileTable\">\n  @for (row of smartTable.tableRows; track trackRow($index, row)) {\n    <div\n      class=\"mobileTableRow\"\n      [ngClass]=\"getRowClasses(row)\"\n      [ngStyle]=\"getRowStyles(row)\"\n      [attr.data-testid]=\"row?.id ?? null\"\n      >\n      @if (showRowStateColumn) {\n        <div class=\"mobileTableCell sm-grid-row-state-cell\" [attr.data-testid]=\"rowStateColumn\">\n          @if (rowStateIcon(row); as icon) {\n            <smart-icon\n              class=\"sm-grid-row-state-icon\"\n              [ngClass]=\"rowStateIconClass(row) ?? ''\"\n              [icon]=\"icon\"\n              color=\"\"\n              role=\"img\"\n              [attr.aria-label]=\"rowStateLabel(row)\"\n              [matTooltip]=\"rowStateLabel(row) ?? ''\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n        <div\n          class=\"mobileTableCell\"\n          (click)=\"handleOnRowClick($event, row)\"\n          (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n          >\n          <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n            {{ header.label }}\n          </div>\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].propertyName === 'select'\n            ) {\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n              [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n              >\n            </mat-checkbox>\n          }\n          @if (\n            smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n            !columnTemplate(i)\n            ) {\n            <div\n              >\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n                <div class=\"smart-table-cell-text\">\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n                <div>\n                  <mat-checkbox\n                    [disabled]=\"true\"\n                    [checked]=\"getValue(row, header.propertyName)\"\n                  ></mat-checkbox>\n                </div>\n              }\n              @if (\n                smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n                smartTable.customSmartTableHeaders[i].properties?.icons?.length\n                ) {\n                <div\n                  >\n                  <smart-icon\n                    [smartTooltip]=\"getToolTip(row, i)\"\n                    [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n                    [color]=\"getColor(getValue(row, header.propertyName), i)\"\n                    >\n                  </smart-icon>\n                </div>\n              }\n            </div>\n          }\n          @if (isImageResource(row, header.propertyName)) {\n            <div>\n              <smart-icon\n                [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n                [color]=\"getImageResourceColor(row, header.propertyName)\"\n                >\n              </smart-icon>\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n            <div\n              class=\"smart-table-buttons-col\"\n              >\n              @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n                <div>\n                  @if (showButton(button, row)) {\n                    <div>\n                      @switch (button.type) {\n                        @case (smartTableButtonType.ICON) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-icon-button\n                            color=\"{{ button.color }}\"\n                            >\n                            <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                          </button>\n                        }\n                        @case (smartTableButtonType.NORMAL) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        @case (smartTableButtonType.RAISED) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-raised-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        <!------ MENU ------>\n                        @case (smartTableButtonType.MENU) {\n                          <div class=\"menu-button\">\n                            <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getRowColumnAction(row, defaultActionToolbarId)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"row.id\"\n                              [actionParams]=\"{ model: row }\"\n                              (actionFired)=\"onRowActionFired(row, $event)\"\n                            ></smart-ui-action-toolbar>\n                            <!------ GENERIC HAMBURGER ------>\n                            @if (shouldShowMenuButton(row)) {\n                              <smart-ui-action-toolbar\n                                [uiActionModels]=\"getMenuActions(row)\"\n                                [widgetId]=\"smartTable.getGridId()\"\n                                [nodeId]=\"row.id\"\n                                [actionParams]=\"{ model: row }\"\n                                (actionFired)=\"onRowActionFired(row, $event)\"\n                              ></smart-ui-action-toolbar>\n                            }\n                            <!------ MENU ------>\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n            <div>\n              @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n                <smart-icon\n                  [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                  [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                  [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                  >\n                </smart-icon>\n              }\n            </div>\n          }\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].translator !== undefined\n            ) {\n            <div\n              class=\"smart-table-cell-text\"\n              >\n              {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n            </div>\n          }\n          @if (\n            !smartTable.customSmartTableHeaders ||\n            (smartTable.customSmartTableHeaders &&\n            (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n            ) {\n            <div\n              >\n              @if (header.propertyName === 'icon') {\n                <smart-icon\n                  [icon]=\"getValue(row, header.propertyName)!\"\n                  >\n                </smart-icon>\n              }\n              @if (header.propertyName === 'img') {\n                <img\n                  [src]=\"getValue(row, header.propertyName)\"\n                  alt=\"\"\n                  class=\"smarttableImg\"\n                  />\n              }\n              @if (\n                header.propertyName !== 'icon' &&\n                header.propertyName !== 'img' &&\n                header.propertyName !== 'option' &&\n                header.propertyName !== 'button'\n                ) {\n                @if (columnTemplate(i); as template) {\n                  <smart-html-cell\n                    [row]=\"row\"\n                    [template]=\"template\"\n                    [gridIdentifier]=\"smartTable.getGridId()\"\n                  ></smart-html-cell>\n                } @else if (isTextContent(i)) {\n                  <div class=\"smart-table-cell-text\">{{ getValue(row, header.propertyName) }}</div>\n                } @else {\n                  <div\n                    class=\"smart-table-cell-text\"\n                    [innerHtml]=\"getValue(row, header.propertyName)\"\n                  ></div>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid var(--color-border, #e4eaf2);padding:.5rem;gap:.5rem}.mobileTableRow.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.mobileTableRow.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.mobileTableRow.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.mobileTableRow.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}.mobileTableRow.sm-grid-row-moved{font-style:italic}.mobileTableRow.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}.mobileTableRow.selected{color:inherit}.mobileTableRow.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) );background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint));box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color, #384372)}.selected{background-color:var(--primary-light-color, var(--color-surface-alt, #f4f6fb))}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"] }]
         }] });
 
 class SmarttableComponent {
@@ -28437,7 +29029,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", "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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionFileUploadDialogComponent, isStandalone: true, selector: "lib-ui-action-file-upload-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\n  <div class=\"headerContainer\">\n    <h3 class=\"color-accent-700\">\n      {{ getTitle() }}\n    </h3>\n  </div>\n\n  @if(getText()){\n  <p>\n    {{ getText() }}\n  </p>\n  } @if(descriptor){\n  <smart-upload-widget\n    [uploadDescriptor]=\"descriptor.upload\"\n    [isMultiple]=\"isMultiple ?? true\"\n    (uploadFilesEvent)=\"upload($event)\"\n  />\n  }\n\n  <div class=\"folderNameDialogButtonsContainer\">\n    <ui-action-button [descriptor]=\"cancelButton\" (actionClick)=\"cancel()\"></ui-action-button>\n  </div>\n</div>\n", styles: [".folderNameDialogContainer{display:flex;flex-direction:column;justify-content:center;gap:1rem;min-width:30vw}photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:.5rem}.headerContainer ::ng-deep button{color:var(--primary-color);border:unset}.headerContainer h3{margin:0;font-size:1.5rem}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-start;gap:.5rem}.message{text-align:center;color:#6b7280}.uploadField{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem;padding:1rem}.folderNameDialogButtonsContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.8)}.headerContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.1)}@media(max-width:900px){.folderNameDialogContainer{width:100%}}.fileSize{padding-left:1rem;display:flex;justify-content:flex-end}.fileData{display:flex;flex-direction:column;justify-content:flex-end;padding-right:1rem}\n"], dependencies: [{ kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled", "sources", "capture"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionFileUploadDialogComponent, decorators: [{
             type: Component,
@@ -29312,5 +29904,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, 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 };
+export { ACLEntry, APIS$5 as APIS, AclEditingViewComponent, ApiModule$5 as ApiModule, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, CUSTOM_DIAGRAM_OPTIONS, CaptureDeviceStart, CaptureHandover, CaptureMode, CaptureOpenDirection, CloseResult, CodeEditorLang, ComponentFactoryService, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DEFAULT_ROW_LAYOUT, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FileUploaderSource, FileUploaderThumbnail, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionBuilderUiModelTypeEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GridColumnContentType, GridDataAccessConfigKindEnum, GridDefaultRowActionTrigger, GridRowStateDisplay, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, PageExportFieldScope, PageExportSelectionKind, PageExportValueType, PageExportValuesSource, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DATE_FORMATS, SMART_DEFAULT_VIEW_COMPONENTS, SMART_MESSAGE_DEFAULTS, SMART_NG_CLIENT_CONFIG, SMART_ROW_LAYOUT_COMPONENT, SearchPageComponent, SelectAllMode, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SmartActionHost, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentDetachedDirective, SmartComponentHost, SmartComponentLayoutComponent, SmartDateFnsAdapter, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionService, SmartFileEditorComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorService, SmartFilterExpressionFieldComponent, SmartFilterPosition, SmartFilterType, SmartFilterWidgetComponent, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridService, SmartGridType, SmartIconComponent, SmartIconService, SmartKeybindingService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarService, SmartNavigationService, SmartNgClientFeatureKind, SmartService, SmartSessionService, SmartSessionTimerComponent, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartValueSetStore, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmarttreeGenericService, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarAlignment, ToolbarAppearance, ToolbarDirection, TreeArrowPosition, TreeGridControl, USE_ADVANCED_FILTER, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ValueSetDependencyWhenParentEmptyEnum, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, barChart, bubbleChart, createBasicOptions, doughnutChart, formatChord, formatMessage, hasGroupEditActions, horizontalBarChart, horizontalStackedBarChart, injectSmartComponent, isMacPlatform, isMergedExtra, matches, multiAxisLineChart, parseChord, pieChart, polarAreaChart, provideSmartNgClient, radarChart, registerSmartWidget, resolveDateLocale, resolveSlot, resolveSmartNgClientConfig, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter, withSmartDiagram, withSmartMap };
 //# sourceMappingURL=smartbit4all-ng-client.mjs.map