@smileid/web-components 10.0.6 → 11.0.1

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

@@ -1,97 +1,97 @@
-import type { FunctionComponent, Ref } from 'preact';
-import OvalProgress from '../OvalProgress';
-
-interface CameraPreviewProps {
-  videoRef: Ref<HTMLVideoElement>;
-  canvasRef: Ref<HTMLCanvasElement>;
-  facingMode: 'user' | 'environment';
-  multipleFaces: boolean;
-  progress: number;
-  interval: number;
-  themeColor: string;
-}
-
-export const CameraPreview: FunctionComponent<CameraPreviewProps> = ({
-  videoRef,
-  canvasRef,
-  facingMode,
-  multipleFaces,
-  progress,
-  interval,
-  themeColor,
-}) => (
-  <>
-    <div className="camera-preview-container">
-      <div
-        className="video-wrapper"
-        style={{
-          clipPath: multipleFaces ? 'none' : 'url(#selfie-clip-path)',
-        }}
-      >
-        <div className="video-container">
-          <video
-            ref={videoRef}
-            autoPlay
-            playsInline
-            muted
-            className={`camera-video ${facingMode === 'user' ? 'mirror' : ''}`}
-          />
-          <canvas
-            ref={canvasRef}
-            className={`camera-canvas ${facingMode === 'user' ? 'mirror' : ''}`}
-          />
-        </div>
-      </div>
-      {!multipleFaces && (
-        <OvalProgress
-          progress={progress}
-          duration={interval}
-          themeColor={themeColor}
-        />
-      )}
-    </div>
-
-    <style>{`
-      .camera-preview-container {
-        position: relative;
-        width: 100%;
-        max-width: 300px;
-        margin: 0 auto;
-      }
-
-      .video-wrapper {
-        width: 100%;
-        max-width: 300px;
-        margin: 0 auto;
-        position: relative;
-        aspect-ratio: 3 / 4;
-        overflow: hidden;
-      }
-
-      .video-container {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-
-      .camera-video,
-      .camera-canvas {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-
-      .camera-video.mirror,
-      .camera-canvas.mirror {
-        transform: translate(-50%, -50%) scaleX(-1);
-      }
-
-      .camera-canvas {
-        pointer-events: none;
-      }
-    `}</style>
-  </>
-);
+import type { FunctionComponent, Ref } from 'preact';
+import OvalProgress from '../OvalProgress';
+
+interface CameraPreviewProps {
+  videoRef: Ref<HTMLVideoElement>;
+  canvasRef: Ref<HTMLCanvasElement>;
+  facingMode: 'user' | 'environment';
+  multipleFaces: boolean;
+  progress: number;
+  interval: number;
+  themeColor: string;
+}
+
+export const CameraPreview: FunctionComponent<CameraPreviewProps> = ({
+  videoRef,
+  canvasRef,
+  facingMode,
+  multipleFaces,
+  progress,
+  interval,
+  themeColor,
+}) => (
+  <>
+    <div className="camera-preview-container">
+      <div
+        className="video-wrapper"
+        style={{
+          clipPath: multipleFaces ? 'none' : 'url(#selfie-clip-path)',
+        }}
+      >
+        <div className="video-container">
+          <video
+            ref={videoRef}
+            autoPlay
+            playsInline
+            muted
+            className={`camera-video ${facingMode === 'user' ? 'mirror' : ''}`}
+          />
+          <canvas
+            ref={canvasRef}
+            className={`camera-canvas ${facingMode === 'user' ? 'mirror' : ''}`}
+          />
+        </div>
+      </div>
+      {!multipleFaces && (
+        <OvalProgress
+          progress={progress}
+          duration={interval}
+          themeColor={themeColor}
+        />
+      )}
+    </div>
+
+    <style>{`
+      .camera-preview-container {
+        position: relative;
+        width: 100%;
+        max-width: 300px;
+        margin: 0 auto;
+      }
+
+      .video-wrapper {
+        width: 100%;
+        max-width: 300px;
+        margin: 0 auto;
+        position: relative;
+        aspect-ratio: 3 / 4;
+        overflow: hidden;
+      }
+
+      .video-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      .camera-video,
+      .camera-canvas {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .camera-video.mirror,
+      .camera-canvas.mirror {
+        transform: translate(-50%, -50%) scaleX(-1);
+      }
+
+      .camera-canvas {
+        pointer-events: none;
+      }
+    `}</style>
+  </>
+);

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

@@ -1,76 +1,78 @@
-import type { FunctionComponent } from 'preact';
-
-interface CaptureControlsProps {
-  isCapturing: boolean;
-  hasFinishedCapture: boolean;
-  isReadyToCapture: boolean;
-  allowAgentMode: boolean;
-  agentSupported: boolean;
-  showAgentModeForTests: boolean;
-  facingMode: 'user' | 'environment';
-  themeColor?: string;
-  onStartCapture: () => void;
-  onSwitchCamera: () => void;
-}
-
-export const CaptureControls: FunctionComponent<CaptureControlsProps> = ({
-  isCapturing,
-  hasFinishedCapture,
-  isReadyToCapture,
-  allowAgentMode,
-  agentSupported,
-  showAgentModeForTests,
-  facingMode,
-  themeColor = '#001096',
-  onStartCapture,
-  onSwitchCamera,
-}) => (
-  <>
-    <div className="controls">
-      <button
-        class="btn-primary"
-        onClick={onStartCapture}
-        disabled={isCapturing || hasFinishedCapture || !isReadyToCapture}
-      >
-        Start Capture
-      </button>
-
-      {allowAgentMode && (agentSupported || showAgentModeForTests) && (
-        <button
-          onClick={onSwitchCamera}
-          className="agent-mode-btn"
-          disabled={isCapturing || hasFinishedCapture}
-        >
-          {facingMode === 'user' ? 'Agent Mode Off' : 'Agent Mode On'}
-        </button>
-      )}
-    </div>
-
-    <style>{`
-      .controls {
-        margin: 1.5rem 0;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        justify-content: center;
-        max-width: 356px;
-        margin: 0 auto;
-      }
-
-      .agent-mode-btn {
-        padding: 8px 16px;
-        font-size: 14px;
-        background: ${themeColor};
-        color: white;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-
-      .agent-mode-btn:disabled {
-        background: #ccc;
-        cursor: not-allowed;
-      }
-    `}</style>
-  </>
-);
+import type { FunctionComponent } from 'preact';
+
+interface CaptureControlsProps {
+  isCapturing: boolean;
+  hasFinishedCapture: boolean;
+  isReadyToCapture: boolean;
+  allowAgentMode: boolean;
+  agentSupported: boolean;
+  showAgentModeForTests: boolean;
+  facingMode: 'user' | 'environment';
+  themeColor?: string;
+  onStartCapture: () => void;
+  onSwitchCamera: () => void;
+}
+
+export const CaptureControls: FunctionComponent<CaptureControlsProps> = ({
+  isCapturing,
+  hasFinishedCapture,
+  isReadyToCapture,
+  allowAgentMode,
+  agentSupported,
+  showAgentModeForTests,
+  facingMode,
+  themeColor = '#001096',
+  onStartCapture,
+  onSwitchCamera,
+}) => (
+  <>
+    <div className="controls">
+      <button
+        id="start-image-capture"
+        class="btn-primary"
+        onClick={onStartCapture}
+        disabled={isCapturing || hasFinishedCapture || !isReadyToCapture}
+      >
+        Start Capture
+      </button>
+
+      {allowAgentMode && (agentSupported || showAgentModeForTests) && (
+        <button
+          id="switch-camera"
+          onClick={onSwitchCamera}
+          className="agent-mode-btn"
+          disabled={isCapturing || hasFinishedCapture}
+        >
+          {facingMode === 'user' ? 'Agent Mode Off' : 'Agent Mode On'}
+        </button>
+      )}
+    </div>
+
+    <style>{`
+      .controls {
+        margin: 1.5rem 0;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        justify-content: center;
+        max-width: 356px;
+        margin: 0 auto;
+      }
+
+      .agent-mode-btn {
+        padding: 8px 16px;
+        font-size: 14px;
+        background: ${themeColor};
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+
+      .agent-mode-btn:disabled {
+        background: #ccc;
+        cursor: not-allowed;
+      }
+    `}</style>
+  </>
+);

package/lib/components/selfie/src/smartselfie-capture/components/index.ts

@@ -1,3 +1,3 @@
-export * from './CameraPreview';
-export * from './AlertDisplay';
-export * from './CaptureControls';
+export * from './CameraPreview';
+export * from './AlertDisplay';
+export * from './CaptureControls';

package/lib/components/selfie/src/smartselfie-capture/constants.ts

@@ -1,23 +1,23 @@
-/**
- * The type of image submitted in the job request
- * @readonly
- * @enum {number}
- */
-export const ImageType = {
-  /** ID_CARD_BACK_IMAGE_BASE64 Base64 encoded back of ID card image (.jpg or .png) */
-  ID_CARD_BACK_IMAGE_BASE64: 7,
-  /** ID_CARD_BACK_IMAGE_FILE Back of ID card image in .png or .jpg file format */
-  ID_CARD_BACK_IMAGE_FILE: 5,
-  /** ID_CARD_IMAGE_BASE64 Base64 encoded ID card image (.png or .jpg) */
-  ID_CARD_IMAGE_BASE64: 3,
-  /** ID_CARD_IMAGE_FILE ID card image in .png or .jpg file format */
-  ID_CARD_IMAGE_FILE: 1,
-  /** LIVENESS_IMAGE_BASE64 Base64 encoded liveness image (.jpg or .png) */
-  LIVENESS_IMAGE_BASE64: 6,
-  /** LIVENESS_IMAGE_FILE Liveness image in .png or .jpg file format */
-  LIVENESS_IMAGE_FILE: 4,
-  /** SELFIE_IMAGE_BASE64 Base64 encoded selfie image (.png or .jpg) */
-  SELFIE_IMAGE_BASE64: 2,
-  /** SELFIE_IMAGE_FILE Selfie image in .png or .jpg file format */
-  SELFIE_IMAGE_FILE: 0,
-};
+/**
+ * The type of image submitted in the job request
+ * @readonly
+ * @enum {number}
+ */
+export const ImageType = {
+  /** ID_CARD_BACK_IMAGE_BASE64 Base64 encoded back of ID card image (.jpg or .png) */
+  ID_CARD_BACK_IMAGE_BASE64: 7,
+  /** ID_CARD_BACK_IMAGE_FILE Back of ID card image in .png or .jpg file format */
+  ID_CARD_BACK_IMAGE_FILE: 5,
+  /** ID_CARD_IMAGE_BASE64 Base64 encoded ID card image (.png or .jpg) */
+  ID_CARD_IMAGE_BASE64: 3,
+  /** ID_CARD_IMAGE_FILE ID card image in .png or .jpg file format */
+  ID_CARD_IMAGE_FILE: 1,
+  /** LIVENESS_IMAGE_BASE64 Base64 encoded liveness image (.jpg or .png) */
+  LIVENESS_IMAGE_BASE64: 6,
+  /** LIVENESS_IMAGE_FILE Liveness image in .png or .jpg file format */
+  LIVENESS_IMAGE_FILE: 4,
+  /** SELFIE_IMAGE_BASE64 Base64 encoded selfie image (.png or .jpg) */
+  SELFIE_IMAGE_BASE64: 2,
+  /** SELFIE_IMAGE_FILE Selfie image in .png or .jpg file format */
+  SELFIE_IMAGE_FILE: 0,
+};

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

@@ -1,2 +1,2 @@
-export * from './useCamera';
-export * from './useFaceCapture';
+export * from './useCamera';
+export * from './useFaceCapture';