@smartbit4all/ng-client 7.3.42 → 7.3.43

package/fesm2022/smartbit4all-ng-client.mjs

@@ -9185,9 +9185,11 @@ class UploadWidgetUtils {
         const value = parseFloat((bytes / Math.pow(k, i)).toFixed(1));
         return `${value} ${sizes[i]}`;
     }
-    /** The size of a capture with a decimal comma, as the Capture Dialog's captions show it. */
-    static formatCapturedSize(bytes) {
-        return UploadWidgetUtils.formatSize(bytes).replace('.', ',');
+    /** 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) {
@@ -9206,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 };
@@ -9456,54 +9541,24 @@ 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 }] }] } });
 
-class PhotoCaptureWidgetComponent {
-    constructor() {
-        this.injector = inject(Injector);
-        /** The take, record, retake and use buttons, for a host that draws them itself. */
-        this.actionButtonsTemplate = viewChild('actionButtons', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "actionButtonsTemplate" }] : /* istanbul ignore next */ []));
-        this.maxFileSize = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
-        /** PHOTO takes a picture; VIDEO records a video with the webcam or picks one on a desktop. */
-        this.mode = input('PHOTO', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-        /** True when the zone's capture row carries the button: the widget then opens only by
-         * openCapture(). */
-        this.externalTrigger = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "externalTrigger" }] : /* istanbul ignore next */ []));
-        /** The zone's texts; the buttons follow them. */
-        this.texts = input(UPLOAD_ZONE_DEFAULT_TEXTS, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
-        /** AUTO asks for the camera when the widget opens, MANUAL at the switch-on button. */
-        this.deviceStart = input(CaptureDeviceStart.MANUAL, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "deviceStart" }] : /* istanbul ignore next */ []));
-        /** CONFIRM keeps a capture for retake or use, IMMEDIATE hands it over at the take or the stop. */
-        this.handover = input(CaptureHandover.IMMEDIATE, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "handover" }] : /* istanbul ignore next */ []));
-        /** True in a host that draws actionButtonsTemplate: the widget then lays out as the Capture
-         * Dialog's camera view, with the switch inside the view. */
-        this.actionsInHost = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "actionsInHost" }] : /* istanbul ignore next */ []));
-        this.photoCaptured = output();
-        /** The desktop webcam panel of an externally triggered photo widget, opened by openCapture(). */
-        this.isPanelOpen = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isPanelOpen" }] : /* istanbul ignore next */ []));
-        /**
-         * Both are written after an `await` — the camera stream, the compression — so a signal
-         * each: the click that started it has long been checked by then.
-         */
-        this.cameraActiveState = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "cameraActiveState" }] : /* istanbul ignore next */ []));
-        /** Set when the browser gives no camera, shown in place of the switch-on hint. */
+/** 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: AUTO then shows neither the switch nor its hint. */
+        /** True while a camera request runs. */
         this.isCameraStarting = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isCameraStarting" }] : /* istanbul ignore next */ []));
-        this.isRecordingState = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isRecordingState" }] : /* istanbul ignore next */ []));
-        this.isCapturedState = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isCapturedState" }] : /* istanbul ignore next */ []));
+        this.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 */ []));
@@ -9513,110 +9568,16 @@ class PhotoCaptureWidgetComponent {
         /** The milliseconds of the running video, kept as the length of the stopped one. */
         this.recordingTime = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "recordingTime" }] : /* istanbul ignore next */ []));
-        /** The line on the stage of a running video: a timer in a host, the message on the panel. */
-        this.recordingCaption = computed(() => this.actionsInHost()
-            ? UploadWidgetUtils.formatDuration(this.recordingTime())
-            : this.texts().recording, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "recordingCaption" }] : /* istanbul ignore next */ []));
-        /** The kept capture's line on the stage of a host; the panel has none. */
-        this.capturedCaption = computed(() => {
-            const files = this.keptFiles();
-            if (!files || !this.actionsInHost()) {
-                return undefined;
-            }
-            const size = UploadWidgetUtils.formatCapturedSize(files[0].size);
-            if (this.mode() === 'PHOTO') {
-                return `${this.texts().capturedPhoto} · ${size}`;
-            }
-            const duration = UploadWidgetUtils.formatDuration(this.recordingTime());
-            return `${this.texts().capturedVideo} · ${duration} · ${size}`;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "capturedCaption" }] : /* istanbul ignore next */ []));
         /** True while a host may not lose the capture by accident: a device is asked for or runs, or
          * a capture waits for confirmation. */
-        this.isCaptureUnderWay = computed(() => this.isCameraStarting() || this.cameraActive || this.isRecording || !!this.keptFiles(), /* @ts-ignore */
+        this.isCaptureUnderWay = computed(() => this.isCameraStarting() ||
+            this.isCameraActive() ||
+            this.isRecording() ||
+            !!this.keptFiles(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isCaptureUnderWay" }] : /* istanbul ignore next */ []));
-        /** Under AUTO and in a host the switch returns when the camera is off, so a second shot stays
-         * possible. */
-        this.isCameraSwitchShown = computed(() => !this.keptFiles() &&
-            ((this.deviceStart() === CaptureDeviceStart.MANUAL && !this.actionsInHost()) ||
-                !(this.cameraActive || this.isCameraStarting())), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isCameraSwitchShown" }] : /* istanbul ignore next */ []));
-        this.isSwitchOnHintShown = computed(() => this.isCameraSwitchShown() && !this.cameraActive && !this.isCaptured, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isSwitchOnHintShown" }] : /* istanbul ignore next */ []));
         this.recordingStartTime = 0;
         /** Advanced by stopCamera(), so a stream the browser gives after a close is stopped at once. */
         this.cameraRequest = 0;
-        this.toggleCameraButton = computed(() => this.createButton(this.cameraActive ? this.texts().cameraOff : this.texts().cameraOn, 'power_settings_new', this.cameraActive ? 'red' : 'primary', this.getButtonType(UiActionButtonType.NORMAL)), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "toggleCameraButton" }] : /* istanbul ignore next */ []));
-        this.captureButton = computed(() => this.createButton(this.texts().takePicture, 'camera'), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "captureButton" }] : /* istanbul ignore next */ []));
-        this.startRecordingButton = computed(() => this.createButton(this.texts().startRecording, 'fiber_manual_record'), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "startRecordingButton" }] : /* istanbul ignore next */ []));
-        this.stopRecordingButton = computed(() => this.createButton(this.texts().stopRecording, 'stop', this.actionsInHost() ? 'warn' : 'red'), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "stopRecordingButton" }] : /* istanbul ignore next */ []));
-        this.pickVideoButton = computed(() => this.createButton(this.texts().pickVideo, 'video_library'), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pickVideoButton" }] : /* istanbul ignore next */ []));
-        this.retakeButton = computed(() => this.createButton(this.texts().retake, 'replay', 'primary', this.getButtonType(UiActionButtonType.NORMAL)), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "retakeButton" }] : /* istanbul ignore next */ []));
-        this.useButton = computed(() => this.createButton(this.texts().use, 'check'), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "useButton" }] : /* istanbul ignore next */ []));
-    }
-    get cameraActive() {
-        return this.cameraActiveState();
-    }
-    set cameraActive(active) {
-        this.cameraActiveState.set(active);
-    }
-    get isRecording() {
-        return this.isRecordingState();
-    }
-    set isRecording(recording) {
-        this.isRecordingState.set(recording);
-    }
-    get isCaptured() {
-        return this.isCapturedState();
-    }
-    set isCaptured(captured) {
-        this.isCapturedState.set(captured);
-    }
-    isMobile() {
-        return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-    }
-    /** A phone opens its own camera, a desktop the webcam panel. */
-    openCapture() {
-        if (this.isMobile()) {
-            this.fileInputRef.nativeElement.click();
-            return;
-        }
-        if (this.isPanelOpen()) {
-            this.stopCamera();
-            this.discardKeptCapture();
-        }
-        else {
-            this.startCameraAfterRender();
-        }
-        this.isPanelOpen.update((open) => !open);
-    }
-    ngAfterViewInit() {
-        if (!this.externalTrigger()) {
-            this.startCameraAfterRender();
-        }
-    }
-    ngOnDestroy() {
-        this.stopCamera();
-        this.discardKeptCapture();
-    }
-    /** AUTO waits for the render: the stream goes into the panel's video element. */
-    startCameraAfterRender() {
-        if (this.deviceStart() !== CaptureDeviceStart.AUTO || this.isMobile()) {
-            return;
-        }
-        afterNextRender(() => {
-            if (!this.externalTrigger() || this.isPanelOpen()) {
-                this.startCamera();
-            }
-        }, { injector: this.injector });
     }
     async startCamera() {
         this.cameraError.set(false);
@@ -9638,15 +9599,16 @@ class PhotoCaptureWidgetComponent {
             return;
         }
         this.stream = stream;
-        this.videoRef.nativeElement.srcObject = this.stream;
-        this.videoRef.nativeElement.play();
+        const video = this.options.getVideoElement();
+        video.srcObject = this.stream;
+        video.play();
         this.isCameraStarting.set(false);
-        this.cameraActive = true;
-        this.isCaptured = 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.mode() === 'VIDEO') {
+        if (this.options.mode() === 'VIDEO') {
             try {
                 return await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
             }
@@ -9666,14 +9628,22 @@ class PhotoCaptureWidgetComponent {
             this.recorder.stop();
             this.recorder = undefined;
         }
-        this.isRecording = false;
+        this.isRecording.set(false);
         this.stream?.getTracks().forEach((track) => track.stop());
         this.stream = undefined;
-        this.cameraActive = false;
+        this.isCameraActive.set(false);
+    }
+    toggleCamera() {
+        if (this.isCameraActive()) {
+            this.stopCamera();
+        }
+        else {
+            this.startCamera();
+        }
     }
     async capturePhoto() {
-        const video = this.videoRef.nativeElement;
-        const canvas = this.canvasRef.nativeElement;
+        const video = this.options.getVideoElement();
+        const canvas = this.options.getCanvasElement();
         const context = canvas.getContext('2d');
         if (!context)
             return;
@@ -9684,12 +9654,12 @@ class PhotoCaptureWidgetComponent {
         if (!blob)
             return;
         let file = new File([blob], `photo_${Date.now()}.jpg`, { type: 'image/jpeg' });
-        const maxFileSize = this.maxFileSize();
+        const maxFileSize = this.options.maxFileSize();
         if (maxFileSize && file.size > maxFileSize) {
-            file = await this.compressImageFile(file, maxFileSize);
+            file = await UploadWidgetUtils.compressImageFile(file, maxFileSize);
         }
         this.handOverCapture([file]);
-        this.isCaptured = true;
+        this.isCaptured.set(true);
         this.stopCamera();
     }
     /** A browser that records neither webm nor mp4 refuses the recorder: the camera error shows. */
@@ -9715,7 +9685,7 @@ class PhotoCaptureWidgetComponent {
         };
         recorder.start();
         this.recorder = recorder;
-        this.isRecording = true;
+        this.isRecording.set(true);
         this.recordingStartTime = Date.now();
         this.recordingTime.set(0);
         this.recordingClock = setInterval(() => this.updateRecordingTime(), 1000);
@@ -9728,23 +9698,28 @@ class PhotoCaptureWidgetComponent {
         this.recorder?.stop();
     }
     handOverCapture(files) {
-        if (this.handover() === CaptureHandover.IMMEDIATE) {
-            this.photoCaptured.emit(files);
+        if (this.options.handover() === CaptureHandover.IMMEDIATE) {
+            this.options.handOver(files);
             return;
         }
         this.keptFiles.set(files);
-        if (this.mode() === 'VIDEO') {
+        if (this.options.mode() === 'VIDEO') {
             this.keptVideoUrl.set(URL.createObjectURL(files[0]));
         }
     }
     retakeCapture() {
         this.discardKeptCapture();
-        if (this.deviceStart() === CaptureDeviceStart.AUTO) {
+        if (this.options.deviceStart() === CaptureDeviceStart.AUTO) {
             this.startCamera();
         }
     }
     useCapture() {
-        this.photoCaptured.emit(this.keptFiles());
+        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() {
@@ -9754,250 +9729,141 @@ class PhotoCaptureWidgetComponent {
         }
         this.keptVideoUrl.set(undefined);
         this.keptFiles.set(undefined);
-        this.isCaptured = false;
-    }
-    getPhotoDataURL() {
-        return this.canvasRef.nativeElement.toDataURL('image/png');
-    }
-    async onFileSelected(event) {
-        const input = event.target;
-        if (!input.files || input.files.length === 0)
-            return;
-        const maxSize = this.maxFileSize();
-        const filesArray = Array.from(input.files);
-        const processedFiles = [];
-        for (const file of filesArray) {
-            if (maxSize && file.size > maxSize && file.type.startsWith('image/')) {
-                try {
-                    const compressed = await this.compressImageFile(file, maxSize);
-                    processedFiles.push(compressed);
-                }
-                catch {
-                    processedFiles.push(file);
-                }
-            }
-            else {
-                processedFiles.push(file);
-            }
-        }
-        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;
-        }
-    }
-    /** The inline bar's buttons are all raised; a host's view tells them apart by type. */
-    getButtonType(typeInHost) {
-        return this.actionsInHost() ? typeInHost : UiActionButtonType.RAISED;
+        this.isCaptured.set(false);
     }
-    createButton(title, icon, color = 'primary', type = UiActionButtonType.RAISED) {
-        return { type, title, icon, iconPosition: IconPosition.PRE, color };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PhotoCaptureWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PhotoCaptureWidgetComponent, isStandalone: true, selector: "photo-capture-widget", inputs: { maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, externalTrigger: { classPropertyName: "externalTrigger", publicName: "externalTrigger", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, deviceStart: { classPropertyName: "deviceStart", publicName: "deviceStart", isSignal: true, isRequired: false, transformFunction: null }, handover: { classPropertyName: "handover", publicName: "handover", isSignal: true, isRequired: false, transformFunction: null }, actionsInHost: { classPropertyName: "actionsInHost", publicName: "actionsInHost", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { photoCaptured: "photoCaptured" }, viewQueries: [{ propertyName: "actionButtonsTemplate", first: true, predicate: ["actionButtons"], descendants: true, isSignal: true }, { propertyName: "videoRef", first: true, predicate: ["video"], descendants: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "@if (isMobile()) {\n  <input\n    #fileInput\n    type=\"file\"\n    [accept]=\"mode() === 'VIDEO' ? 'video/*' : 'image/*'\"\n    capture=\"environment\"\n    (change)=\"onFileSelected($event)\"\n    style=\"display: none\"\n    />\n  @if (!externalTrigger()) {\n    <div class=\"photoWidgetContainer\">\n      <div class=\"controls\">\n        <ui-action-button [descriptor]=\"captureButton()\" (actionClick)=\"fileInput.click()\">\n        </ui-action-button>\n      </div>\n    </div>\n  }\n} @else if (!externalTrigger() || isPanelOpen()) {\n  <div class=\"photoWidgetContainer\" [class.actionsInHost]=\"actionsInHost()\">\n    <div class=\"cameraStage\">\n      <video #video autoplay [muted]=\"true\" [hidden]=\"isCaptured || !cameraActive\"></video>\n      <canvas #canvas [hidden]=\"!isCaptured || cameraActive\"></canvas>\n      @if (keptVideoUrl(); as videoUrl) {\n        <video controls [src]=\"videoUrl\"></video>\n      }\n      @if (cameraError()) {\n        <p class=\"message cameraErrorMessage\">{{ texts().cameraError }}</p>\n      } @else if (capturedCaption(); as caption) {\n        <p class=\"message capturedCaption\">{{ caption }}</p>\n      } @else if (isRecording) {\n        <p class=\"message recordingMessage\">{{ recordingCaption() }}</p>\n      } @else if (isSwitchOnHintShown()) {\n        @if (mode() === 'VIDEO') {\n          <p class=\"message\">{{ texts().switchOnForVideo }}</p>\n        } @else {\n          <p class=\"message\">{{ texts().switchOnCameraHint }}</p>\n        }\n      }\n      @if (actionsInHost()) {\n        <ng-container [ngTemplateOutlet]=\"cameraSwitch\" />\n      }\n    </div>\n    @if (!actionsInHost()) {\n      <div class=\"controls\">\n        <ng-container [ngTemplateOutlet]=\"cameraSwitch\" />\n        <ng-container [ngTemplateOutlet]=\"actionButtons\" />\n        @if (mode() === 'VIDEO' && !keptFiles()) {\n          <!-- PICK VIDEO FILE -->\n          <input\n            #fileInput\n            type=\"file\"\n            accept=\"video/*\"\n            (change)=\"onFileSelected($event)\"\n            style=\"display: none\"\n            />\n          <ui-action-button\n            class=\"pickVideoButton\"\n            [disabled]=\"isRecording\"\n            [descriptor]=\"pickVideoButton()\"\n            (actionClick)=\"fileInput.click()\"\n            >\n          </ui-action-button>\n        }\n      </div>\n    }\n  </div>\n}\n\n<ng-template #cameraSwitch>\n  @if (isCameraSwitchShown()) {\n    <!-- START CAMERA -->\n    <ui-action-button\n      class=\"toggleCameraButton\"\n      [disabled]=\"isRecording\"\n      [descriptor]=\"toggleCameraButton()\"\n      (actionClick)=\"toggleCamera()\"\n      >\n    </ui-action-button>\n  }\n</ng-template>\n\n<ng-template #actionButtons>\n  @if (keptFiles()) {\n    <ui-action-button\n      class=\"retakeButton\"\n      [descriptor]=\"retakeButton()\"\n      (actionClick)=\"retakeCapture()\"\n      >\n    </ui-action-button>\n    <ui-action-button\n      class=\"useButton\"\n      [descriptor]=\"useButton()\"\n      (actionClick)=\"useCapture()\"\n      >\n    </ui-action-button>\n  } @else if (mode() === 'VIDEO') {\n    <!-- RECORD / STOP VIDEO -->\n    @if (isRecording) {\n      <ui-action-button\n        class=\"stopRecordingButton\"\n        [descriptor]=\"stopRecordingButton()\"\n        (actionClick)=\"stopRecording()\"\n        >\n      </ui-action-button>\n    } @else {\n      <ui-action-button\n        class=\"startRecordingButton\"\n        [disabled]=\"!cameraActive\"\n        [descriptor]=\"startRecordingButton()\"\n        (actionClick)=\"startRecording()\"\n        >\n      </ui-action-button>\n    }\n  } @else {\n    <!-- CAPTURE CAMERA -->\n    <ui-action-button\n      class=\"capturePhotoButton\"\n      [disabled]=\"!cameraActive\"\n      [descriptor]=\"captureButton()\"\n      (actionClick)=\"capturePhoto()\"\n      >\n    </ui-action-button>\n  }\n</ng-template>\n", styles: [".photoWidgetContainer{border-radius:5px;width:100%;max-width:100%;display:flex;flex-direction:column;justify-content:center;border:1px solid #dee2e6}.message{text-align:center;color:#6b7280}video,canvas{border-top-right-radius:5px;border-top-left-radius:5px;width:100%}.controls{padding:.5rem;display:flex;gap:1rem;flex-direction:row;justify-content:center;background:#f8f9fa;border-top:1px solid #dee2e6;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.controls ::ng-deep button{border-radius:3px}.cameraStage{display:contents}.actionsInHost{border:unset}.actionsInHost .cameraStage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;aspect-ratio:16 / 9;overflow:hidden;border-radius:4px;--stage-background: var( --capture-stage-background, color-mix(in srgb, var(--primary-color) 30%, black) );background:var(--stage-background);color:var(--capture-stage-text, color-mix(in srgb, var(--primary-color) 10%, white))}.actionsInHost .cameraStage video,.actionsInHost .cameraStage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:unset}.actionsInHost .toggleCameraButton ::ng-deep button{background:var(--color-surface)}.actionsInHost .message{margin:0;color:inherit}.actionsInHost .cameraErrorMessage{position:relative;color:color-mix(in srgb,var(--warn-color) 65%,white)}.actionsInHost .recordingMessage,.actionsInHost .capturedCaption{position:absolute;left:.5rem;top:.5rem;padding:.125rem .5rem;border-radius:.5rem;font-size:.75rem;font-weight:500}.actionsInHost .recordingMessage{background:color-mix(in srgb,var(--stage-background) 67%,transparent);font-family:monospace}.actionsInHost .capturedCaption{background:color-mix(in srgb,var(--success-color) 50%,black)}.actionsInHost .recordingMessage:before{content:\"\";display:inline-block;width:.5rem;height:.5rem;margin-right:.3125rem;border-radius:50%;background:var(--warn-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PhotoCaptureWidgetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'photo-capture-widget', imports: [NgTemplateOutlet, UiActionButtonComponent], template: "@if (isMobile()) {\n  <input\n    #fileInput\n    type=\"file\"\n    [accept]=\"mode() === 'VIDEO' ? 'video/*' : 'image/*'\"\n    capture=\"environment\"\n    (change)=\"onFileSelected($event)\"\n    style=\"display: none\"\n    />\n  @if (!externalTrigger()) {\n    <div class=\"photoWidgetContainer\">\n      <div class=\"controls\">\n        <ui-action-button [descriptor]=\"captureButton()\" (actionClick)=\"fileInput.click()\">\n        </ui-action-button>\n      </div>\n    </div>\n  }\n} @else if (!externalTrigger() || isPanelOpen()) {\n  <div class=\"photoWidgetContainer\" [class.actionsInHost]=\"actionsInHost()\">\n    <div class=\"cameraStage\">\n      <video #video autoplay [muted]=\"true\" [hidden]=\"isCaptured || !cameraActive\"></video>\n      <canvas #canvas [hidden]=\"!isCaptured || cameraActive\"></canvas>\n      @if (keptVideoUrl(); as videoUrl) {\n        <video controls [src]=\"videoUrl\"></video>\n      }\n      @if (cameraError()) {\n        <p class=\"message cameraErrorMessage\">{{ texts().cameraError }}</p>\n      } @else if (capturedCaption(); as caption) {\n        <p class=\"message capturedCaption\">{{ caption }}</p>\n      } @else if (isRecording) {\n        <p class=\"message recordingMessage\">{{ recordingCaption() }}</p>\n      } @else if (isSwitchOnHintShown()) {\n        @if (mode() === 'VIDEO') {\n          <p class=\"message\">{{ texts().switchOnForVideo }}</p>\n        } @else {\n          <p class=\"message\">{{ texts().switchOnCameraHint }}</p>\n        }\n      }\n      @if (actionsInHost()) {\n        <ng-container [ngTemplateOutlet]=\"cameraSwitch\" />\n      }\n    </div>\n    @if (!actionsInHost()) {\n      <div class=\"controls\">\n        <ng-container [ngTemplateOutlet]=\"cameraSwitch\" />\n        <ng-container [ngTemplateOutlet]=\"actionButtons\" />\n        @if (mode() === 'VIDEO' && !keptFiles()) {\n          <!-- PICK VIDEO FILE -->\n          <input\n            #fileInput\n            type=\"file\"\n            accept=\"video/*\"\n            (change)=\"onFileSelected($event)\"\n            style=\"display: none\"\n            />\n          <ui-action-button\n            class=\"pickVideoButton\"\n            [disabled]=\"isRecording\"\n            [descriptor]=\"pickVideoButton()\"\n            (actionClick)=\"fileInput.click()\"\n            >\n          </ui-action-button>\n        }\n      </div>\n    }\n  </div>\n}\n\n<ng-template #cameraSwitch>\n  @if (isCameraSwitchShown()) {\n    <!-- START CAMERA -->\n    <ui-action-button\n      class=\"toggleCameraButton\"\n      [disabled]=\"isRecording\"\n      [descriptor]=\"toggleCameraButton()\"\n      (actionClick)=\"toggleCamera()\"\n      >\n    </ui-action-button>\n  }\n</ng-template>\n\n<ng-template #actionButtons>\n  @if (keptFiles()) {\n    <ui-action-button\n      class=\"retakeButton\"\n      [descriptor]=\"retakeButton()\"\n      (actionClick)=\"retakeCapture()\"\n      >\n    </ui-action-button>\n    <ui-action-button\n      class=\"useButton\"\n      [descriptor]=\"useButton()\"\n      (actionClick)=\"useCapture()\"\n      >\n    </ui-action-button>\n  } @else if (mode() === 'VIDEO') {\n    <!-- RECORD / STOP VIDEO -->\n    @if (isRecording) {\n      <ui-action-button\n        class=\"stopRecordingButton\"\n        [descriptor]=\"stopRecordingButton()\"\n        (actionClick)=\"stopRecording()\"\n        >\n      </ui-action-button>\n    } @else {\n      <ui-action-button\n        class=\"startRecordingButton\"\n        [disabled]=\"!cameraActive\"\n        [descriptor]=\"startRecordingButton()\"\n        (actionClick)=\"startRecording()\"\n        >\n      </ui-action-button>\n    }\n  } @else {\n    <!-- CAPTURE CAMERA -->\n    <ui-action-button\n      class=\"capturePhotoButton\"\n      [disabled]=\"!cameraActive\"\n      [descriptor]=\"captureButton()\"\n      (actionClick)=\"capturePhoto()\"\n      >\n    </ui-action-button>\n  }\n</ng-template>\n", styles: [".photoWidgetContainer{border-radius:5px;width:100%;max-width:100%;display:flex;flex-direction:column;justify-content:center;border:1px solid #dee2e6}.message{text-align:center;color:#6b7280}video,canvas{border-top-right-radius:5px;border-top-left-radius:5px;width:100%}.controls{padding:.5rem;display:flex;gap:1rem;flex-direction:row;justify-content:center;background:#f8f9fa;border-top:1px solid #dee2e6;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.controls ::ng-deep button{border-radius:3px}.cameraStage{display:contents}.actionsInHost{border:unset}.actionsInHost .cameraStage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;aspect-ratio:16 / 9;overflow:hidden;border-radius:4px;--stage-background: var( --capture-stage-background, color-mix(in srgb, var(--primary-color) 30%, black) );background:var(--stage-background);color:var(--capture-stage-text, color-mix(in srgb, var(--primary-color) 10%, white))}.actionsInHost .cameraStage video,.actionsInHost .cameraStage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:unset}.actionsInHost .toggleCameraButton ::ng-deep button{background:var(--color-surface)}.actionsInHost .message{margin:0;color:inherit}.actionsInHost .cameraErrorMessage{position:relative;color:color-mix(in srgb,var(--warn-color) 65%,white)}.actionsInHost .recordingMessage,.actionsInHost .capturedCaption{position:absolute;left:.5rem;top:.5rem;padding:.125rem .5rem;border-radius:.5rem;font-size:.75rem;font-weight:500}.actionsInHost .recordingMessage{background:color-mix(in srgb,var(--stage-background) 67%,transparent);font-family:monospace}.actionsInHost .capturedCaption{background:color-mix(in srgb,var(--success-color) 50%,black)}.actionsInHost .recordingMessage:before{content:\"\";display:inline-block;width:.5rem;height:.5rem;margin-right:.3125rem;border-radius:50%;background:var(--warn-color)}\n"] }]
-        }], propDecorators: { videoRef: [{
-                type: ViewChild,
-                args: ['video']
-            }], canvasRef: [{
-                type: ViewChild,
-                args: ['canvas']
-            }], fileInputRef: [{
-                type: ViewChild,
-                args: ['fileInput']
-            }], actionButtonsTemplate: [{ type: i0.ViewChild, args: ['actionButtons', { isSignal: true }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], externalTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalTrigger", required: false }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: false }] }], deviceStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "deviceStart", required: false }] }], handover: [{ type: i0.Input, args: [{ isSignal: true, alias: "handover", required: false }] }], actionsInHost: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsInHost", required: false }] }], photoCaptured: [{ type: i0.Output, args: ["photoCaptured"] }] } });
 
-class VoiceRecordWidgetComponent {
+/** 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.ngZone = inject(NgZone);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        /** The stop and save buttons, for a host that draws them itself. */
+        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.openDirection = input('RIGHT', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "openDirection" }] : /* istanbul ignore next */ []));
-        /** The zone's texts, the microphone error line's among them. */
-        this.texts = input(UPLOAD_ZONE_DEFAULT_TEXTS, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
-        /** True in the upload zone only; the deprecated recordingUploader shows no error line. */
-        this.showMicrophoneError = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showMicrophoneError" }] : /* istanbul ignore next */ []));
-        /** AUTO starts the recording when the widget opens, MANUAL at the microphone button. */
-        this.deviceStart = input(CaptureDeviceStart.MANUAL, /* @ts-ignore */
+        this.mode = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.deviceStart = input.required(/* @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 */
+        this.handover = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "handover" }] : /* istanbul ignore next */ []));
-        /** True under the zone's Capture Settings; everywhere else the save stays an icon. */
-        this.showSaveTitle = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showSaveTitle" }] : /* istanbul ignore next */ []));
-        /** True in a host that draws actionButtonsTemplate: the strip keeps no save of its own. */
-        this.actionsInHost = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "actionsInHost" }] : /* istanbul ignore next */ []));
-        this.recordingSaved = output();
-        /** Signals, as the host reads them through isCaptureUnderWay and actionButtonsTemplate. */
-        this.isRecording = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isRecording" }] : /* istanbul ignore next */ []));
-        this.recordedBlob = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "recordedBlob" }] : /* istanbul ignore next */ []));
-        /** True while a host may not lose the capture by accident: the microphone is asked for, the
-         * recording runs or waits for the save. */
-        this.isCaptureUnderWay = computed(() => this.isRecording() || !!this.recordedBlob(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isCaptureUnderWay" }] : /* istanbul ignore next */ []));
-        this.time = '00:00';
-        this.isPlaying = false;
-        this.isWaveformOpen = false;
-        /** Set when the browser gives no microphone, until the next start. */
-        this.microphoneError = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "microphoneError" }] : /* istanbul ignore next */ []));
-        this.micButton = {
-            title: '',
-            type: UiActionButtonType.ICON,
-            icon: 'microphone',
-            iconPosition: IconPosition.PRE,
-            color: 'primary',
-        };
-        this.stopButton = {
-            title: '',
-            type: UiActionButtonType.ICON,
-            icon: 'stop-circle',
-            iconPosition: IconPosition.PRE,
-            iconColor: 'red',
-            color: 'primary',
-        };
-        /** Only a theme colour's name paints the icon: the deprecated recorder keeps its look. */
-        this.effectiveStopButton = computed(() => this.actionsInHost() ? { ...this.stopButton, color: 'warn', iconColor: 'warn' } : this.stopButton, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "effectiveStopButton" }] : /* istanbul ignore next */ []));
-        this.saveButton = {
-            title: '',
-            type: UiActionButtonType.ICON,
-            icon: 'save',
-            iconPosition: IconPosition.PRE,
-            color: 'primary',
-        };
-        this.effectiveSaveButton = computed(() => this.showSaveTitle()
-            ? { ...this.saveButton, title: this.texts().save, type: UiActionButtonType.RAISED }
-            : this.saveButton, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "effectiveSaveButton" }] : /* istanbul ignore next */ []));
-        this.stopRecordingButton = computed(() => ({
-            title: this.texts().stopRecording,
-            type: UiActionButtonType.RAISED,
-            icon: 'stop',
-            iconPosition: IconPosition.PRE,
-            color: 'warn',
-        }), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "stopRecordingButton" }] : /* istanbul ignore next */ []));
-    }
-    ngOnInit() {
-        this.playButton = {
-            title: '',
-            type: UiActionButtonType.ICON,
-            icon: 'play_circle',
-            iconPosition: IconPosition.PRE,
-            color: 'primary',
-        };
-        this.stopPlaybackButton = {
-            title: '',
-            type: UiActionButtonType.ICON,
-            icon: 'stop_circle',
-            iconPosition: IconPosition.PRE,
-            color: this.actionsInHost() ? 'warn' : 'red',
-        };
+        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) {
-            this.requestRecording();
+            afterNextRender(() => this.device.startCamera(), { injector: this.injector });
         }
     }
-    get isLeftDirection() {
-        return this.openDirection() === 'LEFT';
+    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() {
-        if (this.wavesurfer || !this.waveformRef?.nativeElement) {
+        const waveform = this.options.getWaveformElement();
+        if (this.wavesurfer || !waveform) {
             return;
         }
         await new Promise((resolve) => requestAnimationFrame(() => resolve()));
         if (!this.pendingStart) {
             return;
         }
-        this.waveformRef.nativeElement.style.padding = '0.1rem';
-        this.initWaveSurfer();
+        waveform.style.padding = '0.1rem';
+        this.initWaveSurfer(waveform);
     }
-    initWaveSurfer() {
-        let body = document.querySelector('body');
-        // A host theme sets the token on the body, which the element inherits and html does not see.
-        let primaryColor = getComputedStyle(this.actionsInHost() ? this.waveformRef.nativeElement : document.documentElement)
+    initWaveSurfer(waveform) {
+        const primaryColor = getComputedStyle(this.options.getThemeElement())
             .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;
+        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: this.waveformRef.nativeElement,
+            container: waveform,
             waveColor: primaryColor,
             progressColor: this.addAlphaToColor(primaryColor, 0.5),
             height: height,
@@ -10016,31 +9882,31 @@ class VoiceRecordWidgetComponent {
         }));
         this.record = record;
         this.wavesurfer.on('dblclick', () => {
-            this.updateViewState(() => {
+            this.options.ngZone.run(() => {
                 this.wavesurfer?.play();
-                this.isPlaying = true;
+                this.isPlaying.set(true);
             });
         });
         this.record.on('record-end', (blob) => {
             if (record !== this.record) {
                 return;
             }
-            this.updateViewState(() => {
+            this.options.ngZone.run(() => {
                 this.recordedBlob.set(blob);
                 this.isRecording.set(false);
             });
-            if (this.handover() === CaptureHandover.IMMEDIATE) {
+            if (this.options.handover() === CaptureHandover.IMMEDIATE) {
                 this.saveRecording();
             }
         });
         this.record.on('record-progress', (time) => {
-            this.updateViewState(() => {
-                this.updateProgress(time);
+            this.options.ngZone.run(() => {
+                this.time.set(UploadWidgetUtils.formatDuration(time));
             });
         });
         this.wavesurfer.on('finish', () => {
-            this.updateViewState(() => {
-                this.isPlaying = false;
+            this.options.ngZone.run(() => {
+                this.isPlaying.set(false);
             });
         });
     }
@@ -10049,8 +9915,7 @@ class VoiceRecordWidgetComponent {
         this.startRecording().catch(() => { });
     }
     async startRecording() {
-        const confirmed = this.checkHasRecorded();
-        if (!confirmed || this.isRecording())
+        if (this.isRecording())
             return;
         const start = {};
         this.pendingStart = start;
@@ -10062,13 +9927,13 @@ class VoiceRecordWidgetComponent {
         const record = this.record;
         if (!record)
             throw new Error('Voice recorder plugin is not initialized.');
-        this.updateViewState(() => {
+        this.options.ngZone.run(() => {
             this.microphoneError.set(false);
-            this.isWaveformOpen = true;
+            this.isWaveformOpen.set(true);
             this.isRecording.set(true);
-            this.isPlaying = false;
+            this.isPlaying.set(false);
             this.recordedBlob.set(null);
-            this.time = '00:00';
+            this.time.set('00:00');
         });
         try {
             // Force native mic permission first so it works with WKWebView
@@ -10091,34 +9956,21 @@ class VoiceRecordWidgetComponent {
             }
             console.error('Mic failed', error);
             this.pendingStart = undefined;
-            this.updateViewState(() => {
+            this.options.ngZone.run(() => {
                 this.isRecording.set(false);
-                this.isWaveformOpen = !!this.recordedBlob();
+                this.isWaveformOpen.set(!!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) {
-        this.time = UploadWidgetUtils.formatDuration(time);
-    }
     stopRecording() {
         if (this.pendingStart) {
             this.cancelPendingStart();
         }
         else if (this.record && this.isRecording()) {
             this.record.stopRecording();
-            this.updateViewState(() => {
+            this.options.ngZone.run(() => {
                 this.isRecording.set(false);
             });
         }
@@ -10127,9 +9979,9 @@ class VoiceRecordWidgetComponent {
     cancelPendingStart() {
         this.pendingStart = undefined;
         this.destroyRecorder();
-        this.updateViewState(() => {
+        this.options.ngZone.run(() => {
             this.isRecording.set(false);
-            this.isWaveformOpen = false;
+            this.isWaveformOpen.set(false);
         });
     }
     /** The plugin's destroy alone closes a running microphone's AudioContext twice, which rejects;
@@ -10147,26 +9999,27 @@ class VoiceRecordWidgetComponent {
         const recordedBlob = this.recordedBlob();
         if (recordedBlob) {
             const file = UploadWidgetUtils.createRecordingFile(recordedBlob, 'recording', 'audio/mp4');
-            this.recordingSaved.emit(file);
+            this.options.handOver(file);
             // Destroy completely so next recording initializes fresh
             this.destroyRecorder();
-            this.updateViewState(() => {
+            this.options.ngZone.run(() => {
                 this.recordedBlob.set(null);
-                this.time = '00:00';
-                this.isPlaying = false;
-                this.isWaveformOpen = false;
+                this.time.set('00:00');
+                this.isPlaying.set(false);
+                this.isWaveformOpen.set(false);
             });
         }
     }
     replayRecording() {
         if (this.recordedBlob()) {
-            this.updateViewState(() => {
-                this.isPlaying = !this.isPlaying;
+            this.options.ngZone.run(() => {
+                this.isPlaying.update((isPlaying) => !isPlaying);
                 this.wavesurfer?.playPause();
             });
         }
     }
-    ngOnDestroy() {
+    /** Cancels a start under way and closes the microphone: the close of the view. */
+    release() {
         this.pendingStart = undefined;
         this.destroyRecorder();
     }
@@ -10191,25 +10044,67 @@ class VoiceRecordWidgetComponent {
         }
         return hexColor;
     }
-    updateViewState(update) {
-        this.ngZone.run(() => {
-            update();
-            this.changeDetectorRef.markForCheck();
-        });
+}
+
+/** 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 */ []));
     }
-    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 }, deviceStart: { classPropertyName: "deviceStart", publicName: "deviceStart", isSignal: true, isRequired: false, transformFunction: null }, handover: { classPropertyName: "handover", publicName: "handover", isSignal: true, isRequired: false, transformFunction: null }, showSaveTitle: { classPropertyName: "showSaveTitle", publicName: "showSaveTitle", isSignal: true, isRequired: false, transformFunction: null }, actionsInHost: { classPropertyName: "actionsInHost", publicName: "actionsInHost", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordingSaved: "recordingSaved" }, host: { properties: { "class.actionsInHost": "actionsInHost()" } }, viewQueries: [{ propertyName: "actionButtonsTemplate", first: true, predicate: ["actionButtons"], descendants: true, isSignal: true }, { propertyName: "waveformRef", first: true, predicate: ["waveform"], descendants: true }, { propertyName: "mainButton", first: true, predicate: ["mainButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"recorderContainer\"\n  [class.direction-left]=\"isLeftDirection\"\n  [class.direction-right]=\"!isLeftDirection\"\n  [class.active]=\"isWaveformOpen || isRecording() || !!recordedBlob()\"\n  [class.isRecording]=\"isRecording()\"\n  [class.hasRecording]=\"recordedBlob()\"\n  >\n  <div class=\"recorderMain\">\n    <div class=\"recorderToolbar\">\n      <!-- Start Recording -->\n      @if (!isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"micButton\"\n          (actionClick)=\"requestRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Stop Recording -->\n      @if (isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"effectiveStopButton()\"\n          (actionClick)=\"stopRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Save Recording -->\n      @if (recordedBlob() && !actionsInHost()) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"effectiveSaveButton()\"\n          (actionClick)=\"saveRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Start Play  -->\n      @if (recordedBlob() && !isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"playButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      <!-- Stop Play  -->\n      @if (recordedBlob() && isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"stopPlaybackButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      @if (isRecording()) {\n        <div class=\"progress\">{{ time }}</div>\n      }\n    </div>\n\n    <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording() || !!recordedBlob()\">\n      <div class=\"waveformGrid\"></div>\n      <div class=\"waveform\" #waveform></div>\n    </div>\n  </div>\n</div>\n@if (showMicrophoneError() && microphoneError()) {\n  <p class=\"message\">{{ texts().microphoneError }}</p>\n  @if (actionsInHost()) {\n    <p class=\"hint\">{{ texts().microphoneRetryHint }}</p>\n  }\n}\n@if (actionsInHost() && recordedBlob()) {\n  <p class=\"hint\">{{ texts().recordingHint }}</p>\n}\n\n<ng-template #actionButtons>\n  @if (isRecording()) {\n    <ui-action-button\n      class=\"stopRecordingButton\"\n      [descriptor]=\"stopRecordingButton()\"\n      (actionClick)=\"stopRecording()\"\n      >\n    </ui-action-button>\n  }\n  @if (recordedBlob()) {\n    <ui-action-button\n      class=\"saveRecordingButton\"\n      [descriptor]=\"effectiveSaveButton()\"\n      (actionClick)=\"saveRecording()\"\n      >\n    </ui-action-button>\n  }\n</ng-template>\n", styles: [":host{display:block;width:100%;min-width:0}.message{text-align:center;color:#6b7280}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{background-color:transparent;display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}:host(.actionsInHost) .message{color:var(--warn-color)}:host(.actionsInHost) .hint{margin:.5rem 0 0;text-align:center;font-size:.75rem;color:var(--color-text-muted)}:host(.actionsInHost) .progress{color:var(--color-text-muted)}:host(.actionsInHost) .isRecording .progress:before{content:\"\";display:inline-block;width:.5rem;height:.5rem;margin-right:.3125rem;border-radius:50%;background:var(--warn-color)}:host(.actionsInHost) .active ::ng-deep .recorderToolbar{border-color:var(--color-border)}:host(.actionsInHost) .waveformGrid{border-color:var(--color-border);background:repeating-linear-gradient(to right,color-mix(in srgb,var(--color-text-muted) 35%,transparent) 0,color-mix(in srgb,var(--color-text-muted) 35%,transparent) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,color-mix(in srgb,var(--color-text-muted) 8%,transparent),color-mix(in srgb,var(--color-text-muted) 2%,transparent))}:host(.actionsInHost) .recorderToolbar ::ng-deep .sb4-warn,:host(.actionsInHost) .recorderToolbar ::ng-deep .sb4-primary,:host(.actionsInHost) .recorderToolbar ::ng-deep ui-action-button{border:unset}:host(.actionsInHost) .mainButton ::ng-deep .sb4-warn{padding:.5rem .75rem}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    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: VoiceRecordWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureRecorderViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'voice-record-widget', imports: [UiActionButtonComponent], host: { '[class.actionsInHost]': 'actionsInHost()' }, template: "<div\n  class=\"recorderContainer\"\n  [class.direction-left]=\"isLeftDirection\"\n  [class.direction-right]=\"!isLeftDirection\"\n  [class.active]=\"isWaveformOpen || isRecording() || !!recordedBlob()\"\n  [class.isRecording]=\"isRecording()\"\n  [class.hasRecording]=\"recordedBlob()\"\n  >\n  <div class=\"recorderMain\">\n    <div class=\"recorderToolbar\">\n      <!-- Start Recording -->\n      @if (!isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"micButton\"\n          (actionClick)=\"requestRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Stop Recording -->\n      @if (isRecording()) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"effectiveStopButton()\"\n          (actionClick)=\"stopRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Save Recording -->\n      @if (recordedBlob() && !actionsInHost()) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"effectiveSaveButton()\"\n          (actionClick)=\"saveRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Start Play  -->\n      @if (recordedBlob() && !isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"playButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      <!-- Stop Play  -->\n      @if (recordedBlob() && isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"stopPlaybackButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      @if (isRecording()) {\n        <div class=\"progress\">{{ time }}</div>\n      }\n    </div>\n\n    <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording() || !!recordedBlob()\">\n      <div class=\"waveformGrid\"></div>\n      <div class=\"waveform\" #waveform></div>\n    </div>\n  </div>\n</div>\n@if (showMicrophoneError() && microphoneError()) {\n  <p class=\"message\">{{ texts().microphoneError }}</p>\n  @if (actionsInHost()) {\n    <p class=\"hint\">{{ texts().microphoneRetryHint }}</p>\n  }\n}\n@if (actionsInHost() && recordedBlob()) {\n  <p class=\"hint\">{{ texts().recordingHint }}</p>\n}\n\n<ng-template #actionButtons>\n  @if (isRecording()) {\n    <ui-action-button\n      class=\"stopRecordingButton\"\n      [descriptor]=\"stopRecordingButton()\"\n      (actionClick)=\"stopRecording()\"\n      >\n    </ui-action-button>\n  }\n  @if (recordedBlob()) {\n    <ui-action-button\n      class=\"saveRecordingButton\"\n      [descriptor]=\"effectiveSaveButton()\"\n      (actionClick)=\"saveRecording()\"\n      >\n    </ui-action-button>\n  }\n</ng-template>\n", styles: [":host{display:block;width:100%;min-width:0}.message{text-align:center;color:#6b7280}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{background-color:transparent;display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}:host(.actionsInHost) .message{color:var(--warn-color)}:host(.actionsInHost) .hint{margin:.5rem 0 0;text-align:center;font-size:.75rem;color:var(--color-text-muted)}:host(.actionsInHost) .progress{color:var(--color-text-muted)}:host(.actionsInHost) .isRecording .progress:before{content:\"\";display:inline-block;width:.5rem;height:.5rem;margin-right:.3125rem;border-radius:50%;background:var(--warn-color)}:host(.actionsInHost) .active ::ng-deep .recorderToolbar{border-color:var(--color-border)}:host(.actionsInHost) .waveformGrid{border-color:var(--color-border);background:repeating-linear-gradient(to right,color-mix(in srgb,var(--color-text-muted) 35%,transparent) 0,color-mix(in srgb,var(--color-text-muted) 35%,transparent) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,color-mix(in srgb,var(--color-text-muted) 8%,transparent),color-mix(in srgb,var(--color-text-muted) 2%,transparent))}:host(.actionsInHost) .recorderToolbar ::ng-deep .sb4-warn,:host(.actionsInHost) .recorderToolbar ::ng-deep .sb4-primary,:host(.actionsInHost) .recorderToolbar ::ng-deep ui-action-button{border:unset}:host(.actionsInHost) .mainButton ::ng-deep .sb4-warn{padding:.5rem .75rem}\n"] }]
+            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 }] }], openDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDirection", required: false }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: false }] }], showMicrophoneError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMicrophoneError", required: false }] }], deviceStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "deviceStart", required: false }] }], handover: [{ type: i0.Input, args: [{ isSignal: true, alias: "handover", required: false }] }], showSaveTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSaveTitle", required: false }] }], actionsInHost: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsInHost", required: false }] }], recordingSaved: [{ type: i0.Output, args: ["recordingSaved"] }] } });
+            }], 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 {
@@ -10218,14 +10113,14 @@ class CaptureDialogComponent {
         this.data = inject(MAT_DIALOG_DATA);
         this.isMicrophone = this.data.source === FileUploaderSource.MICROPHONE;
         this.cameraMode = this.data.source === FileUploaderSource.CAMERA_VIDEO ? 'VIDEO' : 'PHOTO';
-        this.cameraWidget = viewChild(PhotoCaptureWidgetComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "cameraWidget" }] : /* istanbul ignore next */ []));
-        this.recorderWidget = viewChild(VoiceRecordWidgetComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "recorderWidget" }] : /* istanbul ignore next */ []));
-        this.captureWidget = computed(() => this.cameraWidget() ?? this.recorderWidget(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "captureWidget" }] : /* istanbul ignore next */ []));
-        /** The widget's buttons go to the footer of the dialog. */
-        this.actionButtons = computed(() => this.captureWidget()?.actionButtonsTemplate() ?? null, /* @ts-ignore */
+        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 */
@@ -10243,7 +10138,7 @@ class CaptureDialogComponent {
             color: 'primary',
         };
         effect(() => {
-            this.dialogRef.disableClose = this.captureWidget()?.isCaptureUnderWay() ?? false;
+            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.
@@ -10253,7 +10148,7 @@ class CaptureDialogComponent {
             }
         });
     }
-    /** The close destroys the capture widget, which stops the device. */
+    /** The close destroys the capture view, which stops the device. */
     discardCapture() {
         this.dialogRef.close();
     }
@@ -10261,18 +10156,18 @@ class CaptureDialogComponent {
         this.dialogRef.close(files);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CaptureDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: CaptureDialogComponent, isStandalone: true, selector: "smart-capture-dialog", viewQueries: [{ propertyName: "cameraWidget", first: true, predicate: PhotoCaptureWidgetComponent, descendants: true, isSignal: true }, { propertyName: "recorderWidget", first: true, predicate: VoiceRecordWidgetComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"dialog-container captureDialog\">\n  <div class=\"dialog-header\">\n    <h2 class=\"dialog-title\">{{ data.content.title }}</h2>\n    <ui-action-button\n      class=\"closeCaptureButton\"\n      [descriptor]=\"closeButton\"\n      (actionClick)=\"discardCapture()\"\n    ></ui-action-button>\n  </div>\n\n  <mat-dialog-content class=\"dialog-content\">\n    @if (isMicrophone) {\n      <div class=\"recorderSlot\">\n        @if (isOpened()) {\n          <voice-record-widget\n            [deviceStart]=\"data.settings.deviceStart\"\n            [handover]=\"data.settings.handover\"\n            [actionsInHost]=\"true\"\n            [showSaveTitle]=\"true\"\n            [texts]=\"data.texts\"\n            [showMicrophoneError]=\"true\"\n            (recordingSaved)=\"handOverCapture([$event])\"\n          ></voice-record-widget>\n        }\n      </div>\n    } @else {\n      <photo-capture-widget\n        [mode]=\"cameraMode\"\n        [deviceStart]=\"data.settings.deviceStart\"\n        [handover]=\"data.settings.handover\"\n        [actionsInHost]=\"true\"\n        [texts]=\"data.texts\"\n        [maxFileSize]=\"data.maxFileSize\"\n        (photoCaptured)=\"handOverCapture($event)\"\n      ></photo-capture-widget>\n    }\n  </mat-dialog-content>\n\n  <div class=\"dialog-footer\">\n    <ui-action-button\n      class=\"cancelCaptureButton\"\n      [descriptor]=\"cancelButton\"\n      (actionClick)=\"discardCapture()\"\n    ></ui-action-button>\n    <ng-container [ngTemplateOutlet]=\"actionButtons()\" />\n  </div>\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".captureDialog{--sb4-dialog-default-padding: 1rem}.captureDialog .dialog-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem}.closeCaptureButton ::ng-deep button{width:40px;min-width:40px;height:40px;min-height:40px;padding:0}.captureDialog ::ng-deep .stopRecordingButton{--text-color: color-mix(in srgb, var(--warn-color) 5%, white)}photo-capture-widget{display:block;width:100%}.recorderSlot{min-height:3.25rem}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PhotoCaptureWidgetComponent, selector: "photo-capture-widget", inputs: ["maxFileSize", "mode", "externalTrigger", "texts", "deviceStart", "handover", "actionsInHost"], outputs: ["photoCaptured"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: ["openDirection", "texts", "showMicrophoneError", "deviceStart", "handover", "showSaveTitle", "actionsInHost"], outputs: ["recordingSaved"] }] }); }
+    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,
-                        PhotoCaptureWidgetComponent,
                         UiActionButtonComponent,
-                        VoiceRecordWidgetComponent,
-                    ], template: "<div class=\"dialog-container captureDialog\">\n  <div class=\"dialog-header\">\n    <h2 class=\"dialog-title\">{{ data.content.title }}</h2>\n    <ui-action-button\n      class=\"closeCaptureButton\"\n      [descriptor]=\"closeButton\"\n      (actionClick)=\"discardCapture()\"\n    ></ui-action-button>\n  </div>\n\n  <mat-dialog-content class=\"dialog-content\">\n    @if (isMicrophone) {\n      <div class=\"recorderSlot\">\n        @if (isOpened()) {\n          <voice-record-widget\n            [deviceStart]=\"data.settings.deviceStart\"\n            [handover]=\"data.settings.handover\"\n            [actionsInHost]=\"true\"\n            [showSaveTitle]=\"true\"\n            [texts]=\"data.texts\"\n            [showMicrophoneError]=\"true\"\n            (recordingSaved)=\"handOverCapture([$event])\"\n          ></voice-record-widget>\n        }\n      </div>\n    } @else {\n      <photo-capture-widget\n        [mode]=\"cameraMode\"\n        [deviceStart]=\"data.settings.deviceStart\"\n        [handover]=\"data.settings.handover\"\n        [actionsInHost]=\"true\"\n        [texts]=\"data.texts\"\n        [maxFileSize]=\"data.maxFileSize\"\n        (photoCaptured)=\"handOverCapture($event)\"\n      ></photo-capture-widget>\n    }\n  </mat-dialog-content>\n\n  <div class=\"dialog-footer\">\n    <ui-action-button\n      class=\"cancelCaptureButton\"\n      [descriptor]=\"cancelButton\"\n      (actionClick)=\"discardCapture()\"\n    ></ui-action-button>\n    <ng-container [ngTemplateOutlet]=\"actionButtons()\" />\n  </div>\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;--sb4-dialog-default-padding: .5rem;--mat-dialog-content-padding: var(--sb4-dialog-default-padding)}.dialog-header{display:flex;align-items:center;gap:var(--sb4-dialog-default-padding);padding:var(--sb4-dialog-default-padding)}.mat-mdc-dialog-content{max-height:var(--sb4-dialog-default-max-height, 80vh);max-width:var(--sb4-dialog-default-max-width, unset);min-width:var(--sb4-dialog-default-min-width, unset)}.dialog-title{flex:1;margin:0}.dialog-footer{padding:var(--sb4-dialog-default-padding)}\n", ".captureDialog{--sb4-dialog-default-padding: 1rem}.captureDialog .dialog-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem}.closeCaptureButton ::ng-deep button{width:40px;min-width:40px;height:40px;min-height:40px;padding:0}.captureDialog ::ng-deep .stopRecordingButton{--text-color: color-mix(in srgb, var(--warn-color) 5%, white)}photo-capture-widget{display:block;width:100%}.recorderSlot{min-height:3.25rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { cameraWidget: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PhotoCaptureWidgetComponent), { isSignal: true }] }], recorderWidget: [{ type: i0.ViewChild, args: [i0.forwardRef(() => VoiceRecordWidgetComponent), { isSignal: true }] }] } });
+                    ], 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() {
@@ -10294,6 +10189,239 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             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. */
+        this.mode = input('PHOTO', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** True when the zone's capture row carries the button: the widget then opens only by
+         * openCapture(). */
+        this.externalTrigger = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "externalTrigger" }] : /* istanbul ignore next */ []));
+        /** The zone's texts; the buttons follow them. */
+        this.texts = input(UPLOAD_ZONE_DEFAULT_TEXTS, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
+        /** AUTO asks for the camera when the widget opens, MANUAL at the switch-on button. */
+        this.deviceStart = input(CaptureDeviceStart.MANUAL, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deviceStart" }] : /* istanbul ignore next */ []));
+        /** CONFIRM keeps a capture for retake or use, IMMEDIATE hands it over at the take or the stop. */
+        this.handover = input(CaptureHandover.IMMEDIATE, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handover" }] : /* istanbul ignore next */ []));
+        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 */ []));
+        /** 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(() => 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(), 'red'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stopRecordingButton" }] : /* istanbul ignore next */ []));
+        this.pickVideoButton = computed(() => UploadWidgetUtils.createCaptureButton(this.texts().pickVideo, 'video_library'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickVideoButton" }] : /* istanbul ignore next */ []));
+        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);
+    }
+    /** A phone opens its own camera, a desktop the webcam panel. */
+    openCapture() {
+        if (this.isMobile()) {
+            this.fileInputRef.nativeElement.click();
+            return;
+        }
+        if (this.isPanelOpen()) {
+            this.device.release();
+        }
+        else {
+            this.startCameraAfterRender();
+        }
+        this.isPanelOpen.update((open) => !open);
+    }
+    ngAfterViewInit() {
+        if (!this.externalTrigger()) {
+            this.startCameraAfterRender();
+        }
+    }
+    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;
+        }
+        afterNextRender(() => {
+            if (!this.externalTrigger() || this.isPanelOpen()) {
+                this.device.startCamera();
+            }
+        }, { injector: this.injector });
+    }
+    getPhotoDataURL() {
+        return this.canvasRef.nativeElement.toDataURL('image/png');
+    }
+    async onFileSelected(event) {
+        const input = event.target;
+        if (!input.files || input.files.length === 0)
+            return;
+        const maxSize = this.maxFileSize();
+        const filesArray = Array.from(input.files);
+        const processedFiles = [];
+        for (const file of filesArray) {
+            if (maxSize && file.size > maxSize && file.type.startsWith('image/')) {
+                try {
+                    const compressed = await UploadWidgetUtils.compressImageFile(file, maxSize);
+                    processedFiles.push(compressed);
+                }
+                catch {
+                    processedFiles.push(file);
+                }
+            }
+            else {
+                processedFiles.push(file);
+            }
+        }
+        this.photoCaptured.emit(processedFiles);
+    }
+    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 }, 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]=\"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']
+            }], canvasRef: [{
+                type: ViewChild,
+                args: ['canvas']
+            }], 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 }] }], 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.openDirection = input('RIGHT', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openDirection" }] : /* istanbul ignore next */ []));
+        /** The zone's texts, the microphone error line's among them. */
+        this.texts = input(UPLOAD_ZONE_DEFAULT_TEXTS, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
+        /** True in the upload zone only; the deprecated recordingUploader shows no error line. */
+        this.showMicrophoneError = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showMicrophoneError" }] : /* istanbul ignore next */ []));
+        /** AUTO starts the recording when the widget opens, MANUAL at the microphone button. */
+        this.deviceStart = input(CaptureDeviceStart.MANUAL, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "deviceStart" }] : /* istanbul ignore next */ []));
+        /** CONFIRM keeps a stopped recording for playback and save, IMMEDIATE hands it over. */
+        this.handover = input(CaptureHandover.CONFIRM, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "handover" }] : /* istanbul ignore next */ []));
+        /** True under the zone's Capture Settings; everywhere else the save stays an icon. */
+        this.showSaveTitle = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSaveTitle" }] : /* istanbul ignore next */ []));
+        this.recordingSaved = output();
+        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,
+            icon: 'microphone',
+            iconPosition: IconPosition.PRE,
+            color: 'primary',
+        };
+        this.stopButton = {
+            title: '',
+            type: UiActionButtonType.ICON,
+            icon: 'stop-circle',
+            iconPosition: IconPosition.PRE,
+            iconColor: 'red',
+            color: 'primary',
+        };
+        this.saveButton = {
+            title: '',
+            type: UiActionButtonType.ICON,
+            icon: 'save',
+            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 = {
+            title: '',
+            type: UiActionButtonType.ICON,
+            icon: 'play_circle',
+            iconPosition: IconPosition.PRE,
+            color: 'primary',
+        };
+        this.stopPlaybackButton = {
+            title: '',
+            type: UiActionButtonType.ICON,
+            icon: 'stop_circle',
+            iconPosition: IconPosition.PRE,
+            color: 'red',
+        };
+    }
+    ngAfterViewInit() {
+        if (this.deviceStart() === CaptureDeviceStart.AUTO) {
+            this.device.requestRecording();
+        }
+    }
+    get isLeftDirection() {
+        return this.openDirection() === 'LEFT';
+    }
+    ngOnDestroy() {
+        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 }, 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]=\"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 }] }], 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);
@@ -10475,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 }, capture: { classPropertyName: "capture", publicName: "capture", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadFilesEvent: "uploadFilesEvent" }, viewQueries: [{ propertyName: "fileUploadMaterial", first: true, predicate: ["fileUploadMaterial"], descendants: true }, { propertyName: "photoCapture", first: true, predicate: ["photoCapture"], descendants: true }, { propertyName: "videoCapture", first: true, predicate: ["videoCapture"], descendants: true }], ngImport: i0, template: "<div class=\"sb4UploadWidget\">\n  @if (hasSources()) {\n    <!-- CAPTURE ROW OF THE SOURCES, hidden in view mode -->\n    @if (getCaptureSources().length && !isDisabled()) {\n      <div class=\"captureRow\" [class.captureOnly]=\"isCaptureOnly()\">\n        <div class=\"captureButtons\">\n          @for (source of getCaptureSources(); track source) {\n            <ui-action-button\n              class=\"{{ getCaptureButtonClass(source) }}\"\n              [descriptor]=\"getCaptureButton(source)\"\n              (actionClick)=\"startCapture(source)\"\n            ></ui-action-button>\n          }\n        </div>\n        @if (isCaptureOnly()) {\n          <div class=\"captureHint\">{{ getCaptureOnlyHint() }}</div>\n        }\n      </div>\n    }\n    @if (isSourceNeeded(fileUploaderSource.CAMERA_PHOTO)) {\n      <photo-capture-widget\n        #photoCapture\n        [mode]=\"'PHOTO'\"\n        [externalTrigger]=\"true\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [texts]=\"texts\"\n        [maxFileSize]=\"getMaxFileSize()\"\n        (photoCaptured)=\"uploadImage($event)\"\n      ></photo-capture-widget>\n    }\n    @if (isSourceNeeded(fileUploaderSource.CAMERA_VIDEO)) {\n      <photo-capture-widget\n        #videoCapture\n        [mode]=\"'VIDEO'\"\n        [externalTrigger]=\"true\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [texts]=\"texts\"\n        (photoCaptured)=\"uploadImage($event)\"\n      ></photo-capture-widget>\n    }\n    @if (isRecorderOpen()) {\n      <voice-record-widget\n        [openDirection]=\"captureSettings().openDirection\"\n        [deviceStart]=\"captureSettings().deviceStart\"\n        [handover]=\"captureSettings().handover\"\n        [showSaveTitle]=\"true\"\n        [texts]=\"texts\"\n        [showMicrophoneError]=\"true\"\n        (recordingSaved)=\"uploadRecording($event)\"\n      ></voice-record-widget>\n    }\n  } @else {\n    <!-- IMAGE TYPE WIDGET -->\n    @if (widgetNeeded(uploadWidgetType.IMAGE) || widgetNeeded(uploadWidgetType.ALL)) {\n      <photo-capture-widget\n        [maxFileSize]=\"getMaxFileSize()\"\n        [texts]=\"texts\"\n        (photoCaptured)=\"uploadImage($event)\"\n        >\n      </photo-capture-widget>\n    }\n\n    <!-- SOUND TYPE WIDGET -->\n    @if (widgetNeeded(uploadWidgetType.SOUND) || widgetNeeded(uploadWidgetType.ALL)) {\n      <voice-record-widget\n        [texts]=\"texts\"\n        [showMicrophoneError]=\"true\"\n        (recordingSaved)=\"uploadRecording($event)\"\n      ></voice-record-widget>\n    }\n  }\n  <smartfileuploader\n    #fileUploadMaterial\n    [i18n]=\"i18n\"\n    [fileFormats]=\"fileFormats\"\n    [maxSizeMb]=\"maxSizeMb\"\n    [uploadCallback]=\"upload.bind(this)\"\n    [isMultiple]=\"isMultiple()\"\n    [autoUpload]=\"isUploadImmediate()\"\n    [isDisabled]=\"isDisabled()\"\n    [pickerShown]=\"isPickerShown()\"\n  ></smartfileuploader>\n</div>\n", styles: ["photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}voice-record-widget{box-sizing:border-box;padding:.5rem;border-bottom:1px solid #e5e7eb}voice-record-widget ::ng-deep .sb4-red,voice-record-widget ::ng-deep .sb4-primary,voice-record-widget ::ng-deep ui-action-button{border:unset!important}@media(max-width:900px){:host{width:100%}}.captureRow{display:flex;justify-content:center;padding:.5rem;border-bottom:1px solid #e5e7eb}.captureRow.captureOnly{border-bottom:unset;flex-direction:column;align-items:center;padding:.875rem .5rem;gap:.375rem}.captureButtons{display:flex;gap:.5rem}.captureButtons ::ng-deep button{border:unset}.captureHint{font-size:12px;color:#6b7280}\n"], dependencies: [{ kind: "component", type: PhotoCaptureWidgetComponent, selector: "photo-capture-widget", inputs: ["maxFileSize", "mode", "externalTrigger", "texts", "deviceStart", "handover", "actionsInHost"], outputs: ["photoCaptured"] }, { kind: "component", type: VoiceRecordWidgetComponent, selector: "voice-record-widget", inputs: ["openDirection", "texts", "showMicrophoneError", "deviceStart", "handover", "showSaveTitle", "actionsInHost"], outputs: ["recordingSaved"] }, { kind: "component", type: SmartfileuploaderComponent, selector: "smartfileuploader", inputs: ["uploadCallback", "fileFormats", "maxSizeMb", "i18n", "useIconButton", "isMultiple", "autoUpload", "isDisabled", "pickerShown"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    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,
@@ -12163,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", "deviceStart", "handover", "showSaveTitle", "actionsInHost"], 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,
@@ -17242,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.');
         }