reneco-advanced-input-module 0.0.23 → 0.0.25

package/dist/collection/components/voice-input-module/voice-input-module.css

@@ -341,6 +341,40 @@ input[type="date"].form-input {
   user-select: none;
 }
 
+/* Skeleton loading state */
+@keyframes skeleton-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton-circle {
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: linear-gradient(
+    90deg,
+    #e2e8f0 25%,
+    #f8fafc 50%,
+    #e2e8f0 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+.skeleton-status {
+  height: 14px;
+  border-radius: 7px;
+  width: 140px;
+  background: linear-gradient(
+    90deg,
+    #e2e8f0 25%,
+    #f8fafc 50%,
+    #e2e8f0 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  animation-delay: 0.15s;
+}
+
 /* Force OCR component to respect size */
 ocr-file-uploader {
   display: block;

package/dist/collection/components/voice-input-module/voice-input-module.js

@@ -42,6 +42,7 @@ export class VoiceFormRecorder {
         this.filledData = null;
         this.debugInfo = {};
         this.isReadonlyMode = true; // Start in readonly preview mode
+        this.isInitializing = true;
         this.triggerAudioRecordUpload = () => {
             this.fileInputAudioRecord.click();
         };
@@ -49,6 +50,10 @@ export class VoiceFormRecorder {
             const input = event.target;
             if (!input.files || input.files.length === 0)
                 return;
+            if (this.isProcessing || this.isRecording) {
+                input.value = '';
+                return;
+            }
             const file = input.files[0];
             const isEn = this.language === 'en';
             // Validate file type
@@ -69,7 +74,18 @@ export class VoiceFormRecorder {
         this.audioRecorder = new AudioRecorderService();
     }
     componentWillLoad() {
+        // Parse theme only so the skeleton can be styled correctly on first render.
+        // Full initialization runs in componentDidLoad() to give the skeleton time to paint.
+        try {
+            this.parsedTheme = this.theme ? JSON.parse(this.theme) : this.getDefaultTheme();
+        }
+        catch (_a) {
+            this.parsedTheme = this.getDefaultTheme();
+        }
+    }
+    componentDidLoad() {
         this.initializeServices();
+        this.isInitializing = false;
     }
     initializeServices() {
         var _a;
@@ -267,6 +283,8 @@ export class VoiceFormRecorder {
     }
     async processJsonForm(ocrData) {
         var _a, _b, _c;
+        if (this.isProcessing || this.isRecording)
+            return;
         this.isProcessing = true;
         this.hasTransientError = false;
         this.statusMessage = ((_a = this.parsedTheme.texts) === null || _a === void 0 ? void 0 : _a.processing) || (this.language == 'en' ? 'Processing document...' : 'Traitement du document ...');
@@ -304,6 +322,8 @@ export class VoiceFormRecorder {
     }
     async processAudioContent(audioFile) {
         var _a, _b, _c;
+        if (this.isProcessing || this.isRecording)
+            return;
         this.isProcessing = true;
         this.hasTransientError = false;
         this.updateDebugInfo('Audio Captured', { size: audioFile.size, type: audioFile.type });
@@ -622,7 +642,7 @@ export class VoiceFormRecorder {
                 textColor: ocrStyle.textColor || '#ffffff'
             }
         };
-        const isDisabled = this.isProcessing || this.hasError;
+        const isDisabled = this.isProcessing || this.hasError || this.isRecording;
         return (h("div", { style: { width: size, height: size, flexShrink: '0', opacity: isDisabled ? '0.6' : '1', pointerEvents: isDisabled ? 'none' : 'auto' } }, h("ocr-file-uploader", { batch: false, "json-schema": this.convertSchemaToOcrFormat(this.parsedSchema), callback: (data) => { this.processJsonForm(data); }, theme: JSON.stringify(ocrTheme), style: { width: '100%', height: '100%' } })));
     }
     convertSchemaToOcrFormat(schema) {
@@ -677,7 +697,7 @@ export class VoiceFormRecorder {
             return;
         const audioStyle = ((_a = this.parsedTheme.buttons) === null || _a === void 0 ? void 0 : _a.audio) || {};
         const size = audioStyle.size || '50px';
-        const isDisabled = this.isProcessing || this.hasError;
+        const isDisabled = this.isProcessing || this.hasError || this.isRecording;
         const buttonStyle = {
             stroke: audioStyle.backgroundColor || '#3b82f6',
             fill: audioStyle.backgroundColor || '#3b82f6',
@@ -706,6 +726,17 @@ export class VoiceFormRecorder {
         };
         return (h("button", { class: buttonClass, style: buttonStyle, onClick: () => this.handleRecordClick(), disabled: isDisabled, "aria-label": this.isRecording ? 'Stop recording' : 'Start recording' }, this.isProcessing ? (h("svg", { class: "record-icon", viewBox: "0 0 24 24" }, h("circle", { cx: "12", cy: "12", r: "3" }, h("animate", { attributeName: "r", values: "3;6;3", dur: "1s", repeatCount: "indefinite" }), h("animate", { attributeName: "opacity", values: "1;0.3;1", dur: "1s", repeatCount: "indefinite" })))) : this.isRecording ? (h("svg", { class: "record-icon", viewBox: "0 0 24 24" }, h("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }))) : (h("svg", { class: "record-icon", viewBox: "0 0 24 24" }, h("circle", { cx: "12", cy: "12", r: "8" })))));
     }
+    renderLoadingSkeleton() {
+        var _a;
+        const types = this.parsedInputTypes.length > 0 ? this.parsedInputTypes : ['voice'];
+        const containerStyle = this.getContainerStyle();
+        const buttons = (((_a = this.parsedTheme) === null || _a === void 0 ? void 0 : _a.buttons) || {});
+        const getSize = (type) => { var _a, _b; return ((_a = buttons[type]) === null || _a === void 0 ? void 0 : _a.size) || ((_b = buttons.voice) === null || _b === void 0 ? void 0 : _b.size) || '50px'; };
+        return (h("div", null, h("div", { class: "voice-recorder-container" + (this.debug || this.renderForm ? "-debug" : ""), style: containerStyle }, h("div", { class: "row-audio-area" }, types.map(type => {
+            const size = getSize(type);
+            return h("div", { class: "skeleton-circle", style: { width: size, height: size } });
+        })), this.displayStatus && h("div", { class: "skeleton-status" }))));
+    }
     renderStatusMessage() {
         const hasAnyError = this.hasError || this.hasTransientError;
         const statusClass = [
@@ -867,7 +898,8 @@ export class VoiceFormRecorder {
         };
     }
     getContainerStyle() {
-        const c = this.parsedTheme.container || {};
+        var _a;
+        const c = ((_a = this.parsedTheme) === null || _a === void 0 ? void 0 : _a.container) || {};
         return {
             width: c.width || 'auto',
             height: c.height || 'auto',
@@ -879,15 +911,19 @@ export class VoiceFormRecorder {
         };
     }
     getStatusStyle() {
-        const s = this.parsedTheme.statusText || {};
+        var _a;
+        const s = ((_a = this.parsedTheme) === null || _a === void 0 ? void 0 : _a.statusText) || {};
         return {
             color: s.color || '#1e293b',
             fontSize: s.fontSize || '14px'
         };
     }
     render() {
+        if (this.isInitializing) {
+            return this.renderLoadingSkeleton();
+        }
         const containerStyle = this.getContainerStyle();
-        return (h("div", { key: 'd2eb6b74840a57809920b3dbba3fd7dfbeef8531' }, h("div", { key: 'e66e1d4fc23176f9024ca20413535440a8be3ce8', class: "voice-recorder-container" + (this.debug || this.renderForm ? "-debug" : ""), style: containerStyle }, h("div", { key: '57dd7b882771d1f0bd56a97bfd0a06ffee09428e', class: "row-audio-area" }, this.renderRecordButton(), this.renderUploadRecordButton(), this.renderUploadButton()), this.displayStatus ? this.renderStatusMessage() : "", this.renderForm ? this.renderFormPreview() : "", this.debug ? this.renderDebugPanel() : "")));
+        return (h("div", null, h("div", { class: "voice-recorder-container" + (this.debug || this.renderForm ? "-debug" : ""), style: containerStyle }, h("div", { class: "row-audio-area" }, this.renderRecordButton(), this.renderUploadRecordButton(), this.renderUploadButton()), this.displayStatus ? this.renderStatusMessage() : "", this.renderForm ? this.renderFormPreview() : "", this.debug ? this.renderDebugPanel() : "")));
     }
     static get is() { return "voice-input-module"; }
     static get encapsulation() { return "shadow"; }
@@ -1246,7 +1282,8 @@ export class VoiceFormRecorder {
             "transcription": {},
             "filledData": {},
             "debugInfo": {},
-            "isReadonlyMode": {}
+            "isReadonlyMode": {},
+            "isInitializing": {}
         };
     }
     static get events() {