@smileid/web-components 11.4.0 → 11.4.1

package/lib/components/document/src/document-capture-instructions/index.js

@@ -1,3 +1,4 @@
 import DocumentInstruction from './DocumentCaptureInstructions';
+import './DocumentCaptureInstructions.tsx';
 
 export default DocumentInstruction;

package/lib/components/navigation/src/Navigation.js

@@ -4,6 +4,13 @@ class Navigation extends HTMLElement {
   connectedCallback() {
     const shadow = this.attachShadow({ mode: 'open' });
     const direction = getDirection();
+    const hostPadding = '0px';
+    const buttonSize = '40px';
+    const buttonBackground = 'rgba(132, 130, 130, 0.9)';
+    const buttonBorder = '1px solid rgba(255, 255, 255, 0.1)';
+    const iconSize = '20px';
+    const iconColor = this.hasThemeColor ? this.themeColor : '#FFFFFF';
+    const focusColor = '#FFFFFF';
 
     const style = document.createElement('style');
     style.textContent = `
@@ -12,6 +19,8 @@ class Navigation extends HTMLElement {
   max-inline-size: 100%;
   justify-content: ${this.showBackButton ? 'space-between' : 'flex-end'};
   direction: ${direction};
+  padding: var(--smileid-navigation-padding, ${hostPadding});
+  gap: 1rem;
 }
 
 :host([dir="rtl"]) .back-button svg,
@@ -20,50 +29,48 @@ class Navigation extends HTMLElement {
 }
 
 button {
-  --button-color: var(--color-default);
-  --flow-space: 3rem;
   -webkit-appearance: none;
   -moz-appearance: none;
-  align-items: center;
   appearance: none;
-  background-color: transparent;
-  border-radius: 2.5rem;
-  border: none;
-  color: #ffffff;
-  cursor: pointer;
-  display: inline-flex;
-  font-size: 1rem;
-  font-weight: 500;
-  inline-size: 100%;
-  justify-content: center;
-  letter-spacing: 0.05ch;
-  line-height: 1;
-  padding: 1rem 2.5rem;
-  text-align: center;
-  text-decoration: none;
-}
-
-button[data-type="icon"] {
+  width: ${buttonSize};
+  height: ${buttonSize};
+  border-radius: 50%;
+  background: var(--smileid-navigation-button-bg, ${buttonBackground});
+  border: ${buttonBorder};
+  display: flex;
   align-items: center;
-  background-color: transparent;
-  border: 0;
+  justify-content: center;
+  color: var(--smileid-navigation-icon-color, ${iconColor});
   cursor: pointer;
-  display: flex;
   padding: 0;
-  width: auto;
+  flex-shrink: 0;
+  transition: box-shadow 0.15s ease;
+}
+
+button:hover {
+  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.15);
+}
+
+button:focus-visible {
+  outline: 2px solid var(--smileid-navigation-focus-color, ${focusColor});
+  outline-offset: 3px;
+}
+
+button svg {
+  width: ${iconSize};
+  height: ${iconSize};
 }
 
 :host::part(back-button) {
   display: flex;
   align-items: center;
-}
-
-:host::part(back-button-text) {
-  line-height: 1;
-  color: ${this.hasThemeColor ? this.themeColor : 'rgb(21, 31, 114)'} !important;
+  justify-content: center;
 }
 
 :host::part(close-button) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .visually-hidden {
@@ -79,57 +86,51 @@ button[data-type="icon"] {
 
     const backButton = document.createElement('button');
     backButton.setAttribute('class', 'back-button');
-    backButton.setAttribute('data-type', 'icon');
     backButton.setAttribute('part', 'back-button');
     backButton.setAttribute('type', 'button');
+    backButton.setAttribute('aria-label', t('navigation.back'));
     backButton.innerHTML = `
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
+        aria-hidden="true"
         viewBox="0 0 24 24"
         fill="none"
+        xmlns="http://www.w3.org/2000/svg"
         data-rtl="${direction === 'rtl'}"
       >
         <path
-          fill="#DBDBC4"
-          d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
-          opacity=".4"
-        />
-        <path
-          fill="${this.themeColor}"
-          d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
+          d="M19 12H5M5 12L12 19M5 12L12 5"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
       </svg>
-      <span part="back-button-text">${t('navigation.back')}</span>
+      <span part="back-button-text" class="visually-hidden">${t('navigation.back')}</span>
     `;
 
     const closeButton = document.createElement('button');
     closeButton.setAttribute('class', 'close-button');
-    closeButton.setAttribute('data-type', 'icon');
     closeButton.setAttribute('part', 'close-button');
     closeButton.setAttribute('type', 'button');
+    closeButton.setAttribute(
+      'aria-label',
+      t('navigation.closeVerificationFrame'),
+    );
     closeButton.innerHTML = `
       <svg
-        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
         viewBox="0 0 24 24"
-        width="24"
-        height="24"
         fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          fill="#DBDBC4"
-          d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
-          opacity=".4"
-        />
-        <path
-          fill="#91190F"
-          d="m13.06 12 2.3-2.3c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-2.3 2.3-2.3-2.3a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l2.3 2.3-2.3 2.3c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l2.3-2.3 2.3 2.3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-2.3-2.3Z"
+          d="M18 6L6 18M6 6L18 18"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
       </svg>
-      <span class="visually-hidden"
-        >${t('navigation.closeVerificationFrame')}</span
-      >
     `;
 
     shadow.appendChild(style);

package/lib/components/navigation/src/Navigation.stories.js

@@ -12,6 +12,13 @@ const meta = {
     },
   },
   component: 'smileid-navigation',
+  decorators: [
+    (story) => `
+      <div style="background: #1a1a2e; padding: 24px; min-height: 100px;">
+        ${story()}
+      </div>
+    `,
+  ],
 };
 
 export default meta;

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

@@ -1,12 +1,12 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "11.3.0",
+  "version": "11.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@smileid/signature-pad",
-      "version": "11.3.0",
+      "version": "11.4.0",
       "dependencies": {
         "signature_pad": "^5.0.2"
       },
@@ -1359,10 +1359,11 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
-      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
-      "dev": true
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/for-each": {
       "version": "0.3.3",
@@ -2321,10 +2322,11 @@
       }
     },
     "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8.6"
       },

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

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

package/lib/components/smart-camera-web/src/SmartCameraWeb.js

@@ -23,7 +23,7 @@ function scwTemplateString() {
       ${this.hideBackToHost} ${this.allowAgentMode} ${this.allowAgentModeTests} ${this.allowLegacySelfieFallback}
     ></selfie-capture-screens>
     <document-capture-screens ${this.applyComponentThemeColor} document-type=${this.documentType} ${this.title} ${this.documentCaptureModes} ${this.showNavigation}  ${this.hideAttribution}
-     ${this.hideBackOfId} ${this.applyComponentThemeColor} hidden></document-capture-screens>
+     ${this.hideBackOfId} ${this.newInstructions} ${this.applyComponentThemeColor} hidden></document-capture-screens>
   </div>
 `;
 }
@@ -78,6 +78,7 @@ class SmartCameraWeb extends HTMLElement {
       'hide-back-to-host',
       'show-navigation',
       'theme-color',
+      'new-instructions',
     ];
   }
 
@@ -93,6 +94,7 @@ class SmartCameraWeb extends HTMLElement {
       case 'hide-back-to-host':
       case 'show-navigation':
       case 'theme-color':
+      case 'new-instructions':
         this.disconnectedCallback();
         this.shadowRoot.innerHTML = this.render();
         this.setUpEventListeners();
@@ -227,6 +229,10 @@ class SmartCameraWeb extends HTMLElement {
     return this.hasAttribute('hide-back-of-id') ? 'hide-back-of-id' : '';
   }
 
+  get newInstructions() {
+    return this.hasAttribute('new-instructions') ? 'new-instructions' : '';
+  }
+
   get showNavigation() {
     return this.hasAttribute('show-navigation') ? 'show-navigation' : '';
   }

package/lib/styles/src/styles.js

@@ -290,7 +290,7 @@ ${typography}
     padding-bottom: 2rem;
   }
 
-  smart-camera-web, selfie-capture-screens, selfie-capture-instructions, document-capture-screens, document-capture-instructions {
+  smart-camera-web, selfie-capture-screens, selfie-capture-instructions, document-capture-screens, document-capture-instructions, document-capture-instructions-v2 {
     height: 100%;
     display: block;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "11.4.0",
+  "version": "11.4.1",
   "private": false,
   "main": "dist/esm/main.js",
   "module": "dist/esm/main.js",
@@ -77,10 +77,11 @@
   "type": "module",
   "author": "SmileID <support@usesmileid.com> (https://usesmileid.com)",
   "dependencies": {
+    "@lottiefiles/dotlottie-web": "^0.71.0",
     "@mediapipe/tasks-vision": "^0.10.22-rc.20250304",
     "@preact/signals": "^2.1.1",
     "@tabler/icons-preact": "^3.34.0",
-    "lodash": "^4.17.23",
+    "lodash": "^4.18.1",
     "preact": "^10.27.3",
     "preact-custom-element": "^4.3.0",
     "preact-router": "^4.1.2",
@@ -108,7 +109,7 @@
     "prettier": "^3.6.2",
     "rollup-plugin-visualizer": "^6.0.3",
     "typescript": "^5.8.3",
-    "vite": "^7.2.2",
+    "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-tsconfig-paths": "^1.4.1"
   },

package/dist/README.md

@@ -1,15 +0,0 @@
-# Instructions
-
-These components can be used to capture id document or liveness images
-
-1. [`smart-camera-web`](./components/smart-camera-web/src/)
-2. [`document-capture-screens`](./components/document/src/README.md)
-3. [`selfie-capture-screens`](./components/selfie/README.md)
-
-## Orchestration
-
-To build your own flow, we have several components that can be used together
-
-### document-capture-instructions
-
-This is the screen used to instruct the user how to capture document using both the camera and/or upload.

package/dist/components/README.md

@@ -1,14 +0,0 @@
-# Instructions
-
-These components can be used to capture id document or liveness images
-
-1. [`document-capture-screens`](./document/src/README.md)
-2. [`selfie-capture-screens`](./selfie/README.md)
-
-## Orchestration
-
-To build your own flow, we have several components that can be used together
-
-### document-capture-instructions
-
-This is the screen used to instruct the user how to capture document using both the camera and/or upload.

package/dist/components/document/src/README.md

@@ -1,111 +0,0 @@
-# DocumentCapture Web Component
-
-## Overview
-
-The `DocumentCaptureScreens` is a bespoke web component designed for capturing document images using a camera. It leverages the `SmartCamera` module for camera interaction and permission management.
-This component contains the flow for capturing both front and the back of id documents.
-
-### Importing the Component
-
-To utilize the `DocumentCaptureScreens` component within your project, import it into your JavaScript file as follows:
-
-```js
-import '@smileid/components/document-capture';
-```
-
-### Using the Component
-
-The DocumentCapture component can be embedded in your HTML similarly to any standard HTML element:
-
-```html
-<document-capture-screens></document-capture-screens>
-```
-
-### Attributes
-
-Customize the component's behavior with the following attributes:
-
-#### `hide-instructions`
-
-Omits the capture instructions. This attribute is boolean and does not require a value.
-
-```html
-<document-capture-screens hide-instructions></document-capture-screens>
-```
-
-#### `hide-back-of-id`
-
-Excludes the option to capture the ID's back side. This attribute is boolean.
-
-```html
-<document-capture-screens hide-back-of-id></document-capture-screens>
-```
-
-#### `show-navigation`
-
-Displays navigation controls for the capture process. This attribute is boolean.
-
-```html
-<document-capture-screens show-navigation></document-capture-screens>
-```
-
-#### `document-capture-modes`
-
-Specifies the capture modes, accepting `camera`, `upload`, or both. Value required.
-
-```html
-<document-capture-screens
-  document-capture-modes="camera,upload"
-></document-capture-screens>
-```
-
-### Permissions
-
-Camera permissions are essential for functionality. The component requests permissions automatically. Upon granting, `data-camera-ready` is set to true, and `data-camera-error` is removed. Denied permissions result in `data-camera-error` being set with an error message.
-
-For manual permission handling, appropriately set `data-camera-ready` and `data-camera-error`.
-
-### Error Handling
-
-Errors during permission requests or document capture are managed by the component, setting `data-camera-error` with the respective error message.
-
-### Event Handlers
-
-Capture events emit `document-capture-screens.publish`, providing captured images and metadata:
-
-```json
-{
-  "detail": {
-    "images": [{ "image": "base64-encoded image", "image_type_id": "" }],
-    "meta": {
-      "version": "library version"
-    }
-  }
-}
-```
-
-To handle this event:
-
-```js
-document
-  .querySelector('document-capture-screens')
-  .addEventListener('document-capture-screens.publish', function (event) {
-    console.log(event.detail);
-  });
-```
-
-### Dependencies
-
-`DocumentCaptureScreens` relies on the following modules:
-
-- [document-capture-instructions](./document-capture-instructions/README.md)
-- [document-capture](./document-capture/README.md)
-- [document-capture-review](./document-capture-review/README.md)
-- [SmartCamera](../../../domain/camera/src/README.md)
-- [FileUpload](../../../domain/file-upload/README.md)
-
-These dependencies are automatically imported with the component.
-
-### Compatibility
-
-Designed for modern browsers supporting custom web components, with specific enhancements for multi-camera Samsung devices to prevent blurry image edges. Report compatibility issues with other devices to our support team.

package/dist/components/document/src/document-capture/README.md

@@ -1,90 +0,0 @@
-# IdCapture Web Component
-
-## Overview
-
-The `IdCapture` is a custom web component designed to capture documents using a camera. It uses the `SmartCamera` module to interact with the device's camera and handle permissions.
-
-### Importing the Component
-
-To use the IdCapture component, you need to import it into your JavaScript file:
-
-```js
-import '@smileid/components/document-capture';
-```
-
-### Using the Component
-
-You can use the IdCapture component in your HTML like any other HTML element:
-
-```html
-<document-capture></document-capture>
-```
-
-### IdCapture Web Component Attributes
-
-You can use a mixture of the following attributes to configure the behavior of the component.
-
-#### hide-back-of-id
-
-This attribute, when present, hides the option to capture the back of the ID. It does not require a value.
-
-Usage:
-
-```html
-<document-capture hide-back-of-id></document-capture>
-```
-
-#### show-navigation
-
-This attribute, when present, shows the navigation controls for the document capture process. It does not require a value.
-
-Usage:
-
-```html
-<document-capture show-navigation></document-capture>
-```
-
-### Permissions
-
-The `IdCapture` component requires camera permissions to function. It will automatically request these permissions when used. If the permissions are granted, it will remove the `data-camera-error` attribute from the capture screen and set the `data-camera-ready` attribute to true. If the permissions are denied, it will remove the `data-camera-ready` attribute and set the `data-camera-error` attribute with the error message.
-
-If you handle the permissions yourself, make sure to set `data-camera-ready` and `data-camera-error` appropriately.
-
-### Error Handling
-
-If there is an error while requesting permissions or capturing the document, the `IdCapture` component will handle it and set the `data-camera-error` attribute with the error message.
-
-### Event Handlers
-
-To receive the images after they have been captured, you can listen to the custom event `document-capture.publish`. The data posted to this event has the structure:
-
-```json
-{
-  "detail": {
-    "image": "base64 image",
-    "previewImage": "base64 image"
-  }
-}
-```
-
-Usage:
-
-```js
-document
-  .querySelector('document-capture')
-  .addEventListener('document-capture.publish', function (event) {
-    console.log(event.detail);
-  });
-```
-
-### Dependencies
-
-The `DocumentCapture` component depends on the following module:
-
-- [SmartCamera](../../../../domain/camera/src/README.md)
-
-This module is imported when you use the `DocumentCapture` component in your projects.
-
-### Compatibility
-
-The IdCapture component is designed to work on all modern browsers that support custom web components. However, it includes a special case for multi-camera Samsung devices to mitigate blurry images at the edges. Please report any issues found on other devices to our support team.

package/dist/components/document/src/document-capture-instructions/README.md

@@ -1,56 +0,0 @@
-# Document Instruction Web Component Guide
-
-## Importing the Component
-
-To incorporate the DocumentInstruction component into your project, import it into your JavaScript file as follows:
-
-```js
-import '@smileid/document-capture/document-capture-instructions';
-```
-
-## Using the Component
-
-The `DocumentInstruction` component is designed to provide users with guidance for capturing document images. It can be integrated into your web page as a custom HTML element:
-
-```html
-<document-capture-instructions></document-capture-instructions>
-```
-
-### Customizing the Component
-
-Adjust the component's behavior and appearance using the following attributes:
-
-#### `show-navigation`
-
-Displays navigation controls, facilitating user interaction during the document capture process. This attribute is boolean and does not require a value.
-
-```html
-<document-capture-instructions show-navigation></document-capture-instructions>
-```
-
-#### `document-capture-modes`
-
-Determines the available modes for document capture. This attribute accepts a comma-separated string specifying the modes:
-
-- `camera`: Enables capturing document images using the camera.
-- `upload`: Allows uploading document images from the device.
-- `camera,upload`: Offers users a choice between capturing images using the camera or uploading from the device.
-
-```html
-<document-capture-instructions
-  document-capture-modes="camera,upload"
-></document-capture-instructions>
-```
-
-## Example
-
-Here is a complete example demonstrating how to embed the `DocumentInstruction` component with navigation controls and both capture modes enabled:
-
-```html
-<document-capture-instructions
-  show-navigation
-  document-capture-modes="camera,upload"
-></document-capture-instructions>
-```
-
-This setup provides an intuitive interface for users, enabling them to receive instructions, navigate through the capture process, and choose their preferred method of document image submission.