@smileid/web-components 11.4.2 → 11.4.3

package/dist/types/main.d.ts

@@ -38,6 +38,8 @@ declare class ComboboxRoot extends HTMLElement {
 declare class ComboboxTrigger extends HTMLElement {
     handleKeyUp(event: any): void;
     handleKeyDown(event: any): void;
+    handleInput(event: any): void;
+    handleChange(event: any): void;
     handleSelection(event: any): void;
     toggleExpansionState(): void;
     get type(): string;
@@ -87,14 +89,13 @@ export declare class DocumentCaptureScreens extends HTMLElement {
     setUpEventListeners(): void;
     _publishSelectedImages(): void;
     get hideInstructions(): boolean;
-    get autoCapture(): boolean;
-    get autoCaptureMode(): string;
     get hideBackOfId(): boolean;
     get showNavigation(): "" | "show-navigation";
     get title(): string;
     get documentCaptureModes(): string;
     get documentType(): string;
     get hideAttribution(): "" | "hide-attribution";
+    get newInstructions(): boolean;
     get themeColor(): string;
     handleBackEvents(): void;
     handleCloseEvents(): void;
@@ -330,14 +331,13 @@ export declare class SmartCameraWeb extends HTMLElement {
     get isPortraitCaptureView(): boolean;
     get hideInstructions(): "" | "hide-instructions";
     get hideBackOfId(): "" | "hide-back-of-id";
+    get newInstructions(): "" | "new-instructions";
     get showNavigation(): "" | "show-navigation";
     get hideBackToHost(): "" | "hide-back";
     get allowAgentMode(): string;
     get allowAgentModeTests(): "" | "show-agent-mode-for-tests";
     get title(): string;
     get documentCaptureModes(): string;
-    get autoCapture(): string;
-    get autoCaptureMode(): string;
     get disableImageTests(): "" | "disable-image-tests";
     get allowLegacySelfieFallback(): string;
     get hideAttribution(): "" | "hide-attribution";

package/lib/components/selfie/src/smartselfie-capture/SmartSelfieCapture.tsx

@@ -3,6 +3,7 @@ import register from 'preact-custom-element';
 import type { FunctionComponent } from 'preact';
 
 import { getBoolProp } from '../../../../utils/props';
+import { translate } from '../../../../domain/localisation';
 import { useFaceCapture, useCamera } from './hooks';
 import { CameraPreview } from './components/CameraPreview';
 import { AlertDisplay } from './components/AlertDisplay';
@@ -61,8 +62,8 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
     getFacingMode: () => camera.facingMode,
   });
 
-  useEffect(() => {
-    const initializeCamera = async () => {
+  const initializeCamera = async () => {
+    try {
       await camera.startCamera(initialFacingMode, (cameraName) => {
         const smartCameraWeb = document.querySelector('smart-camera-web');
         smartCameraWeb?.dispatchEvent(
@@ -71,15 +72,20 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
           }),
         );
       });
-      await camera.checkAgentSupport();
-      await faceCapture.initializeFaceLandmarker();
+    } catch {
+      // startCamera already set cameraError; surface UI and skip downstream init
+      return;
+    }
+    await camera.checkAgentSupport();
+    await faceCapture.initializeFaceLandmarker();
 
-      setTimeout(() => {
-        faceCapture.setupCanvas();
-        faceCapture.startDetectionLoop();
-      }, 500);
-    };
+    setTimeout(() => {
+      faceCapture.setupCanvas();
+      faceCapture.startDetectionLoop();
+    }, 500);
+  };
 
+  useEffect(() => {
     camera.registerCameraSwitchCallback(() => {
       try {
         faceCapture.resetFaceDetectionState();
@@ -142,39 +148,57 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
         <smileid-navigation ref={navigationRef} theme-color={themeColor} />
       )}
 
-      <CameraPreview
-        videoRef={camera.videoRef}
-        canvasRef={canvasRef}
-        facingMode={camera.facingMode}
-        progress={
-          faceCapture.capturesTaken.value > 0
-            ? faceCapture.capturesTaken.value / faceCapture.totalCaptures.value
-            : 0
-        }
-        interval={interval}
-        themeColor={themeColor}
-      />
-
-      <AlertDisplay alertTitle={faceCapture.alertTitle.value} />
-
-      {!faceCapture.isCapturing.value &&
-        !faceCapture.hasFinishedCapture.value && (
-          <CaptureControls
-            isCapturing={faceCapture.isCapturing.value}
-            hasFinishedCapture={faceCapture.hasFinishedCapture.value}
-            isReadyToCapture={faceCapture.isReadyToCapture.value}
-            captureButtonFallbackEnabled={
-              faceCapture.captureButtonFallbackEnabled.value
-            }
-            allowAgentMode={allowAgentMode}
-            agentSupported={camera.agentSupported}
-            showAgentModeForTests={showAgentModeForTests}
+      {camera.cameraError ? (
+        <div className="camera-error" role="alert">
+          <p>{camera.cameraError}</p>
+          <button
+            type="button"
+            className="btn-primary"
+            onClick={() => {
+              initializeCamera();
+            }}
+          >
+            {translate('camera.error.retry')}
+          </button>
+        </div>
+      ) : (
+        <>
+          <CameraPreview
+            videoRef={camera.videoRef}
+            canvasRef={canvasRef}
             facingMode={camera.facingMode}
+            progress={
+              faceCapture.capturesTaken.value > 0
+                ? faceCapture.capturesTaken.value /
+                  faceCapture.totalCaptures.value
+                : 0
+            }
+            interval={interval}
             themeColor={themeColor}
-            onStartCapture={faceCapture.startCapture}
-            onSwitchCamera={camera.switchCamera}
           />
-        )}
+
+          <AlertDisplay alertTitle={faceCapture.alertTitle.value} />
+
+          {!faceCapture.isCapturing.value &&
+            !faceCapture.hasFinishedCapture.value && (
+              <CaptureControls
+                isCapturing={faceCapture.isCapturing.value}
+                hasFinishedCapture={faceCapture.hasFinishedCapture.value}
+                isReadyToCapture={faceCapture.isReadyToCapture.value}
+                captureButtonFallbackEnabled={
+                  faceCapture.captureButtonFallbackEnabled.value
+                }
+                allowAgentMode={allowAgentMode}
+                agentSupported={camera.agentSupported}
+                showAgentModeForTests={showAgentModeForTests}
+                facingMode={camera.facingMode}
+                themeColor={themeColor}
+                onStartCapture={faceCapture.startCapture}
+                onSwitchCamera={camera.switchCamera}
+              />
+            )}
+        </>
+      )}
 
       {/* @ts-expect-error -- preact-custom-element doesn't have proper types for refs */}
       {!hideAttribution && <powered-by-smile-id />}
@@ -227,6 +251,15 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
           padding: 1rem;
           font-family: sans-serif;
         }
+
+        .camera-error {
+          margin-top: 1.5rem;
+          padding: 1rem 1.5rem;
+          color: #b00020;
+          text-align: center;
+          font-size: 1rem;
+          font-weight: 500;
+        }
       `}</style>
     </div>
   );

package/lib/components/selfie/src/smartselfie-capture/hooks/useCamera.ts

@@ -1,10 +1,12 @@
 import { useRef, useState, useEffect } from 'preact/hooks';
+import SmartCamera from '../../../../../domain/camera/src/SmartCamera';
 
 export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const streamRef = useRef<MediaStream | null>(null);
   const [facingMode, setFacingMode] = useState(initialFacingMode);
   const [agentSupported, setAgentSupported] = useState(false);
+  const [cameraError, setCameraError] = useState<string | null>(null);
   const onCameraSwitchCallbackRef = useRef<(() => void) | null>(null);
   const isSwitchingCameraRef = useRef(false);
   const timeoutIdsRef = useRef<Set<NodeJS.Timeout>>(new Set());
@@ -63,6 +65,7 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
         video: { facingMode: targetFacingMode || facingMode },
       });
       streamRef.current = stream;
+      setCameraError(null);
 
       const track = stream.getVideoTracks()[0];
       const settings = track.getSettings();
@@ -94,9 +97,15 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
       }
     } catch (error) {
       console.error('Failed to start camera:', error);
+      setCameraError(SmartCamera.handleCameraError(error as Error));
+      throw error;
     }
   };
 
+  const retryCamera = async () => {
+    await startCamera(facingMode);
+  };
+
   const switchCamera = async () => {
     const newFacingMode = facingMode === 'user' ? 'environment' : 'user';
     isSwitchingCameraRef.current = true;
@@ -118,6 +127,7 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
         await startCamera(previousFacingMode);
       } catch (restoreError) {
         console.error('Failed to restore previous camera:', restoreError);
+        setCameraError(SmartCamera.handleCameraError(restoreError as Error));
       }
     }
   };
@@ -229,7 +239,9 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
     streamRef,
     facingMode,
     agentSupported,
+    cameraError,
     startCamera,
+    retryCamera,
     switchCamera,
     checkAgentSupport,
     stopCamera,

package/lib/components/signature-pad/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "11.4.2",
+  "version": "11.4.3",
   "private": true,
   "exports": {
     ".": "./index.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "11.4.2",
+  "version": "11.4.3",
   "private": false,
   "main": "dist/esm/main.js",
   "module": "dist/esm/main.js",
@@ -76,6 +76,15 @@
   ],
   "type": "module",
   "author": "SmileID <support@usesmileid.com> (https://usesmileid.com)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/smileidentity/web-client.git",
+    "directory": "packages/web-components"
+  },
+  "bugs": {
+    "url": "https://github.com/smileidentity/web-client/issues"
+  },
+  "homepage": "https://github.com/smileidentity/web-client#readme",
   "dependencies": {
     "@lottiefiles/dotlottie-web": "^0.71.0",
     "@mediapipe/tasks-vision": "^0.10.22-rc.20250304",