@unvired/turboforms-embed-sdk 2.0.67 → 2.0.71

package/dist/turboforms.html

@@ -26881,7 +26881,7 @@ function injectBarcodeModalStyles() {
       top: 0; left: 0;
       width: 100%;
       height: 100%;
-      pointer-events: none;
+      pointer-events: auto;
     }
 
     .barcode-close-btn {
@@ -26899,7 +26899,7 @@ function injectBarcodeModalStyles() {
       align-items: center;
       justify-content: center;
       transition: background 0.2s;
-      pointer-events: all;
+      pointer-events: auto;
       z-index: 10003;
     }
     .barcode-close-btn:hover {
@@ -26977,7 +26977,7 @@ function injectBarcodeModalStyles() {
       font-size: 16px;
       text-align: center;
       opacity: 0.8;
-      pointer-events: all;
+      pointer-events: auto;
     }
 
     #scannedResult {
@@ -27289,11 +27289,11 @@ function openCameraModal() {
             <option value="" disabled selected>Select Camera</option>
           </select>
         </div>
-        <div id="captureButton" style="opacity: 0; pointer-events: none;">
+        <button id="captureButton" type="button" style="opacity: 0; pointer-events: none;">
           <div class="capture-ring">
             <div class="capture-inner"></div>
           </div>
-        </div>
+        </button>
       </div>
     </div>
   </div>
@@ -27382,17 +27382,6 @@ async function startCameraStream(deviceId = null) {
     // Mute video to prevent audio feedback and allow autoplay in restrictive policies
     video.muted = true;
 
-    // Assign stream
-    video.srcObject = videoStream;
-
-    // Ensure video doesn't stay paused if it somehow exits fullscreen or gets interrupted
-    video.onpause = () => {
-      if (cameraStarted && video.srcObject) {
-        // Only try to resume if we expect it to be playing
-        video.play().catch(e => logger.info("[TF_SDK:234] ✅ Resume error", e));
-      }
-    };
-
     // Wait for video to start playing, then hide loader
     video.onloadedmetadata = () => {
       // Once permission is granted and stream starts, listing devices will return labels
@@ -27411,7 +27400,7 @@ async function startCameraStream(deviceId = null) {
 
         if (captureBtn) {
           captureBtn.style.opacity = "1";
-          captureBtn.style.pointerEvents = "all";
+          captureBtn.style.pointerEvents = "auto";
         }
       };
 
@@ -27432,6 +27421,17 @@ async function startCameraStream(deviceId = null) {
       });
     };
 
+    // Ensure video doesn't stay paused if it somehow exits fullscreen or gets interrupted
+    video.onpause = () => {
+      if (cameraStarted && video.srcObject) {
+        // Only try to resume if we expect it to be playing
+        video.play().catch(e => logger.info("[TF_SDK:234] ✅ Resume error", e));
+      }
+    };
+
+    // Assign stream
+    video.srcObject = videoStream;
+
   } catch (err) {
     logger.error("[TF_SDK:238] ❌ Camera start error:", err);
     let errorMessage = err.message || "Failed to start camera";
@@ -27498,57 +27498,68 @@ async function populateCameraDevices() {
 }
 
 function captureImage() {
-  const video = document.getElementById("cameraVideo");
-  if (!video || !cameraStarted) {
-    logger.warn("[TF_SDK:240] ⚠️ Camera not ready for capture");
-    return;
-  }
-
-  // Add capture animation
-  const captureBtn = document.getElementById("captureButton");
-  captureBtn.classList.add("capturing");
+  try {
+    const video = document.getElementById("cameraVideo");
+    if (!video || !cameraStarted) {
+      logger.warn("[TF_SDK:240] ⚠️ Camera not ready for capture");
+      return;
+    }
 
-  const canvas = document.createElement("canvas");
-  canvas.width = video.videoWidth || 640;
-  canvas.height = video.videoHeight || 480;
+    // Add capture animation
+    const captureBtn = document.getElementById("captureButton");
+    if (captureBtn) {
+      captureBtn.classList.add("capturing");
+    }
 
-  const ctx = canvas.getContext("2d");
-  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth || 640;
+    canvas.height = video.videoHeight || 480;
 
-  capturedImageData = canvas.toDataURL("image/jpeg", 0.8);
-  logger.info('[TF_SDK:241] ✅ Image captured, dispatching capureImageData event', { controlId: window.compId });
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      throw new Error("Could not get 2D context from canvas");
+    }
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
 
-  // Stop camera stream
-  if (videoStream) {
-    videoStream.getTracks().forEach(track => track.stop());
-    cameraStarted = false;
-  }
+    capturedImageData = canvas.toDataURL("image/jpeg", 0.8);
+    logger.info('[TF_SDK:241] ✅ Image captured, dispatching capureImageData event', { controlId: window.compId });
 
-  // Auto-save and close modal after capture
-  setTimeout(() => {
-    if (window.compId && capturedImageData) {
-      // Send image data to file component using the correct event name
-      const event = new CustomEvent("capureImageData", {
-        detail: {
-          imageData: capturedImageData,
-          controlId: window.compId,
-          fileName: `photo-${Date.now()}.jpg`
-        }
-      });
-      document.dispatchEvent(event);
-      logger.info('[TF_SDK:242] ✅ capureImageData dispatched to SmartFile');
+    // Stop camera stream
+    if (videoStream) {
+      videoStream.getTracks().forEach(track => track.stop());
+      cameraStarted = false;
+    }
 
-      // Send success event
-      if (window.sendEventCallback) {
-        window.sendEventCallback({
-          type: window.FORM_EVENTS.OPEN_CAMERA,
-          message: "Photo captured successfully",
-          data: { controlId: window.compId, fileName: `photo-${Date.now()}.jpg` }
+    // Auto-save and close modal after capture
+    setTimeout(() => {
+      if (window.compId && capturedImageData) {
+        // Send image data to file component using the correct event name
+        const event = new CustomEvent("capureImageData", {
+          detail: {
+            imageData: capturedImageData,
+            controlId: window.compId,
+            fileName: `photo-${Date.now()}.jpg`
+          }
         });
+        document.dispatchEvent(event);
+        logger.info('[TF_SDK:242] ✅ capureImageData dispatched to SmartFile');
+
+        // Send success event
+        if (window.sendEventCallback) {
+          window.sendEventCallback({
+            type: window.FORM_EVENTS.OPEN_CAMERA,
+            message: "Photo captured successfully",
+            data: { controlId: window.compId, fileName: `photo-${Date.now()}.jpg` }
+          });
+        }
       }
-    }
+      closeCameraModal();
+    }, 300); // Small delay for capture animation
+  } catch (err) {
+    logger.error("[TF_SDK:241_err] ❌ Error during captureImage:", err);
+    alert("Error taking photo: " + (err.message || err));
     closeCameraModal();
-  }, 300); // Small delay for capture animation
+  }
 }
 
 function showCameraError(message) {
@@ -27665,7 +27676,7 @@ function injectCameraModalStyles() {
       top: 0; left: 0;
       width: 100%;
       height: 100%;
-      pointer-events: none;
+      pointer-events: auto;
     }
 
     .camera-close-btn {
@@ -27683,7 +27694,7 @@ function injectCameraModalStyles() {
       align-items: center;
       justify-content: center;
       transition: background 0.2s;
-      pointer-events: all;
+      pointer-events: auto;
       z-index: 10001;
     }
     .camera-close-btn:hover {
@@ -27695,7 +27706,7 @@ function injectCameraModalStyles() {
         top: 20px;
         right: 20px;
         z-index: 10001;
-        pointer-events: all;
+        pointer-events: auto;
         display: none; /* Hidden by default until devices found */
     }
 
@@ -27729,9 +27740,14 @@ function injectCameraModalStyles() {
       left: 50%;
       transform: translateX(-50%);
       cursor: pointer;
-      pointer-events: all;
+      pointer-events: auto;
       z-index: 10001;
       transition: opacity 0.3s ease;
+      background: transparent;
+      border: none;
+      padding: 0;
+      outline: none;
+      -webkit-tap-highlight-color: transparent;
     }
 
     .capture-ring {
@@ -30124,7 +30140,7 @@ class SmartFileComponent extends FieldComponent {
             correctOrientation: false,
           });
         } else {
-          let id = this.component.id;
+          let id = this.id;
           isfileBrowse = false;
           window.isListenerSet = false;
           let eventCustom = new CustomEvent("openCamera", {
@@ -30160,7 +30176,7 @@ class SmartFileComponent extends FieldComponent {
     if (this.refs.toggleCameraMode) {
       this.addEventListener(this.refs.toggleCameraMode, 'click', (event) => {
         event.preventDefault();
-        let id = this.component.id;
+        let id = this.id;
         isfileBrowse = false;
         window.isListenerSet = false;
         let eventCustom = new CustomEvent("openCamera", {
@@ -30229,9 +30245,9 @@ class SmartFileComponent extends FieldComponent {
       }
     }
     let that = this;
-    document.addEventListener('capureImageData', function (event) {
+    this.addEventListener(document, 'capureImageData', function (event) {
       logger.info("[TF_SDK:84] ✅ event.detail.controlId =" + event.detail.controlId)
-      if (that.component.id == event.detail.controlId) {
+      if (that.id == event.detail.controlId) {
         if (!window.isListenerSet) {
           const isBase64 = typeof event.detail.imageData === 'string' && event.detail.imageData.startsWith('data:');
           if (isBase64 || typeof window.resolveLocalFileSystemURL !== 'function') {
@@ -30279,9 +30295,9 @@ class SmartFileComponent extends FieldComponent {
     }, false);
 
 
-    document.addEventListener('capureImageDataForAndroidBrowser', function (event) {
+    this.addEventListener(document, 'capureImageDataForAndroidBrowser', function (event) {
       logger.info("[TF_SDK:89] ✅ event.detail.controlId capureImageDataForAndroidBrowser =" + event.detail.controlId)
-      if (that.component.id == event.detail.controlId) {
+      if (that.id == event.detail.controlId) {
         if (!window.isListenerSet) {
           that.compressFile([event.detail.imageData])
           // window.resolveLocalFileSystemURL(event.detail.imageData, (fileEntry) => {
@@ -41729,7 +41745,7 @@ initThemeHook();
     </div>
 
     <div id="sticky-footer">
-      <div class="build-version">SDK v2.0.67</div>
+      <div class="build-version">SDK v2.0.71</div>
       
       <button class="footer-btn footer-btn-secondary" id="prevBtn" style="display:none" onclick="FormOnPrevious()">
         <i class="bi bi-chevron-left"></i> Previous