@smileid/web-components 11.4.0 → 11.4.1

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

@@ -1,79 +0,0 @@
-# DocumentCaptureReview Web Component
-
-The `DocumentCaptureReview` component is designed to facilitate user interaction by allowing them to review and verify the accuracy of captured images. Users have the option to accept the captured image or initiate a recapture if necessary.
-
-## Usage
-
-To integrate the `DocumentCaptureReview` component into your web application, insert the custom HTML tag as follows, specifying attributes for the captured image data and optional features like navigation controls:
-
-```html
-<document-capture-review
-  data-image="base64image"
-  show-navigation
-  hide-back-to-host
-></document-capture-review>
-```
-
-### Attributes
-
-- `data-image`: A base64 encoded string of the captured image to be reviewed.
-- `show-navigation`: (Optional) Shows navigation controls for the review process. This attribute is boolean and does not require a value.
-- `hide-back-to-host`: (Optional) Hides the option to return to the host application or page. This attribute is boolean and does not require a value.
-
-## Event Handling
-
-### Image Acceptance
-
-When a user confirms the captured image as acceptable, the `document-capture-review.accepted` event is emitted. Implement an event listener to handle this action:
-
-```js
-document
-  .querySelector('document-capture-review')
-  .addEventListener('document-capture-review.accepted', function (event) {
-    // Handle the image acceptance action here
-  });
-```
-
-### Recapture Request
-
-If the user decides to recapture the image, the `document-capture-review.rejected` event is triggered. Set up an event listener to manage this scenario:
-
-```js
-document
-  .querySelector('document-capture-review')
-  .addEventListener('document-capture-review.rejected', function (event) {
-    // Handle the recapture request here
-  });
-```
-
-## Example
-
-Below is a sample implementation showcasing how to use the `IdReview` component with an event listener for both accepting an image and requesting a recapture:
-
-```html
-<document-capture-review
-  data-image="base64image"
-  show-navigation
-  hide-back-to-host
-></document-capture-review>
-
-<script>
-  const idReviewElement = document.querySelector('document-capture-review');
-
-  idReviewElement.addEventListener(
-    'document-capture-review.accepted',
-    function (event) {
-      console.log('Image accepted by the user.');
-      // Additional logic for accepted image
-    },
-  );
-
-  idReviewElement.addEventListener(
-    'document-capture-review.rejected',
-    function (event) {
-      console.log('User requested to recapture the image.');
-      // Additional logic for image recapture
-    },
-  );
-</script>
-```

package/dist/components/selfie/README.md

@@ -1,225 +0,0 @@
-# SelfieCaptureScreens Web Component
-
-## Overview
-
-The `SelfieCaptureScreens` is a custom web component designed to capture selfies and liveness images using a camera. It uses the `SmartCamera` module to interact with the device's camera and handle permissions.
-
-### Importing the Component
-
-To use the SelfieCaptureScreens component, you need to import it into your JavaScript file:
-
-```js
-import '@smileid/web-components/selfie-capture-screens';
-```
-
-### Using the Component
-
-You can use the SelfieCaptureScreens component in your HTML like any other HTML element:
-
-```html
-<selfie-capture-screens></selfie-capture-screens>
-```
-
-### SelfieCaptureScreens Web Component Attributes
-
-You can use a mixture of the following attributes to configure the behavior of the component.
-
-#### hide-instructions
-
-This attribute, when present, hides the instructions for the liveness capture process. It does not require a value.
-
-Usage:
-
-```html
-<selfie-capture-screens hide-instructions></selfie-capture-screens>
-```
-
-#### show-navigation
-
-This attribute, when present, shows the navigation controls for the liveness capture process. It does not require a value.
-
-Usage:
-
-```html
-<selfie-capture-screens show-navigation></selfie-capture-screens>
-```
-
-### Permissions
-
-The `SelfieCaptureScreens` 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 images, the `SelfieCaptureScreens` 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 `selfie-capture-screens.publish`. The data posted to this event has the structure:
-
-```json
-{
-  "detail": {
-    "images": [{ "image": "base64 image", "image_type_id": "" }],
-    "meta": {
-      "version": "version of the library in use"
-    }
-  }
-}
-```
-
-Usage:
-
-```js
-document
-  .querySelector('selfie-capture-screens')
-  .addEventListener('selfie-capture-screens.publish', function (event) {
-    console.log(event.detail);
-  });
-```
-
-### Dependencies
-
-The `SelfieCaptureScreens` component depends on the following modules:
-
-- [selfie-capture](#selfiecapture-web-component)
-- [selfie-capture-review](#selfiecapturereview-web-component)
-- [Selfie-instructions](#selfiecaptureinstructions-web-component)
-- [SmartCamera](../../domain/camera/src/README.md)
-
-These modules are imported when you use the `SelfieCaptureScreens` component in your projects.
-
-### SelfieCaptureInstructions Web Component
-
-#### Overview
-
-The `SelfieCaptureInstructions` is a custom web component designed to show an instruction on how to capture a clear selfie image.
-
-#### Importing the SelfieCaptureInstructions Component
-
-To use the SelfieCaptureInstructions component, you need to import it into your JavaScript file:
-
-```js
-import '@smileid/web-components/selfie-capture-instructions';
-```
-
-#### show-navigation
-
-This attribute, when present, shows the navigation controls for the document capture process. It does not require a value.
-
-Usage:
-
-```html
-<selfie-capture-instructions show-navigation></selfie-capture-instructions>
-```
-
-### SelfieCapture Web Component
-
-#### Overview
-
-The `SelfieCapture` is a custom web component designed to capture selfies and liveness images using a camera. It uses the `SmartCamera` module to interact with the device's camera and handle permissions.
-
-#### Importing the SelfieCapture Component
-
-To use the SelfieCapture component, you need to import it into your JavaScript file:
-
-```js
-import '@smileid/web-components/selfie-capture';
-```
-
-### Using the SelfieCapture Component
-
-You can use the SelfieCapture component in your HTML like any other HTML element:
-
-```html
-<selfie-capture></selfie-capture>
-```
-
-### SelfieCapture Web Component Attributes
-
-You can use a mixture of the following attributes to configure the behavior of the component.
-
-#### show-navigation
-
-This attribute, when present, shows the navigation controls for the document capture process. It does not require a value.
-
-Usage:
-
-```html
-<selfie-capture show-navigation></selfie-capture>
-```
-
-### Permissions
-
-The `SelfieCapture` 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 images, the `SelfieCapture` 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 `selfie-capture.publish`. The data posted to this event has the structure:
-
-```json
-{
- "detail": {
-  "images": [
-   {"image": "
-
-base64 image", "image_type_id": ""}
-  ],
-  "meta": {
-   "version": "version of the library in use"
-  }
- }
-}
-```
-
-Usage:
-
-```js
-document
-  .querySelector('selfie-capture')
-  .addEventListener('selfie-capture.publish', function (event) {
-    console.log(event.detail);
-  });
-```
-
-### SelfieCaptureReview Web Component
-
-This component is used to allow the user to verify the accuracy of the capture.
-The user can choose to use the captured image or recapture a new selfie.
-
-Usage:
-
-```html
-<selfie-capture-review
-  data-image="base64 image"
-  show-navigation
-  hide-back-to-host
-></selfie-capture-review>
-```
-
-When a user accepts an image, an event is triggered as shown below:
-
-```js
-document
-  .querySelector('selfie-capture-review')
-  .addEventListener('selfie-capture-review.accepted', function (event) {});
-```
-
-When a user wants to recapture a selfie, an event is triggered as shown below:
-
-```js
-document
-  .querySelector('selfie-capture-review')
-  .addEventListener('selfie-capture-review.rejected', function (event) {});
-```
-
-### Compatibility
-
-The SelfieCaptureScreens 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/smart-camera-web/src/README.md

@@ -1,206 +0,0 @@
-# SmartCameraWeb
-
-`SmartCameraWeb` is a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) designed to capture images including selfies, liveness images, and ID Document images for use with SmileIdentity. It interfaces with the [Server to Server](https://docs.usesmileid.com/server-to-server) libraries, serving as a user interface client.
-
-Explore an [example full stack integration](https://glitch.com/edit/#!/smart-camera-web-demo-node) using our [NodeJS](https://docs.usesmileid.com/server-to-server/javascript) library.
-
-## Getting Started
-
-To integrate `SmartCameraWeb`, follow these steps:
-
-- [SmartCameraWeb](#smartcameraweb)
-  - [Getting Started](#getting-started)
-    - [Choose a Server to Server Library](#choose-a-server-to-server-library)
-    - [Installation](#installation)
-      - [Install Via NPM](#install-via-npm)
-    - [Usage](#usage)
-  - [Compatibility](#compatibility)
-  - [Support](#support)
-  - [Development](#development)
-
-### Choose a Server to Server Library
-
-Supported [Server to Server Libraries](https://docs.usesmileid.com/server-to-server) include:
-
-- [Java](https://docs.usesmileid.com/server-to-server/java)
-- [NodeJS](https://docs.usesmileid.com/server-to-server/javascript)
-- [PHP](https://docs.usesmileid.com/server-to-server/php)
-- [Python](https://docs.usesmileid.com/server-to-server/python)
-- [Ruby](https://docs.usesmileid.com/server-to-server/ruby)
-
-> **Note**: Code samples in this documentation utilize the NodeJS Server to Server library.
-
-### Installation
-
-You can install via NPM or directly include it from our CDN.
-
-#### Install Via NPM
-
-```shell
-npm install @smileid/web-components@<version>
-```
-
-Then, in your VueJS, AngularJS, or React component:
-
-```js
-import '@smileid/web-components/smart-camera-web';
-```
-
-### Usage
-
-After installation and necessary imports:
-
-1. Add the desired markup to your page/component:
-   - **For Selfie Capture / Liveness Images**:
-
-     ```html
-     <smart-camera-web></smart-camera-web>
-     ```
-
-   - **For Selfie Capture / Liveness and ID Images**:
-
-     ```html
-     <smart-camera-web capture-id></smart-camera-web>
-     ```
-
-     Initially, you'll see this image:
-     ![Selfie Capture Instruction](https://cdn.smileidentity.com/images/smart-camera-web/selfie-capture-instruction.png)
-
-     After granting access, the capture screen appears:
-     ![Selfie Camera](https://cdn.smileidentity.com/images/smart-camera-web/selfie-capture.png)
-
-     Upon capturing a selfie, you'll reach the review screen:
-     ![Selfie Review](https://cdn.smileidentity.com/images/smart-camera-web/selfie-capture-review.png)
-
-   ![Document Capture Instruction](https://cdn.smileidentity.com/images/smart-camera-web/document-capture-instruction.png)
-
-   If the `capture-id` attribute is used, additional screens include:
-
-   ![ID Camera](https://cdn.smileidentity.com/images/smart-camera-web/document-capture.png)
-
-   ![ID Review](https://cdn.smileidentity.com/images/smart-camera-web/document-review-new.png)
-
-2. Handle the `smart-camera-web.publish` event:
-
-   When the user approves the captured image, an `smart-camera-web.publish` event is dispatched. The event returns a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) payload in `e.detail`.
-
-   Here's a script example to handle the event and send data to a backend endpoint:
-
-   ```html
-   <script>
-     const app = document.querySelector('smart-camera-web');
-
-     const postContent = async (data) => {
-       const options = {
-         method: 'POST',
-         headers: {
-           'Content-Type': 'application/json',
-         },
-         body: JSON.stringify(data),
-       };
-
-       try {
-         const response = await fetch('/', options);
-         const json = await response.json();
-
-         return json;
-       } catch (e) {
-         throw e;
-       }
-     };
-
-     app.addEventListener('smart-camera-web.publish', async (e) => {
-       try {
-         const response = await postContent(e.detail);
-
-         console.log(response);
-       } catch (e) {
-         console.error(e);
-       }
-     });
-   </script>
-   ```
-
-   The provided backend endpoint uses the NodeJS Server to Server library and ExpressJS:
-
-   ```js
-   const express = require('express');
-   const { v4: UUID } = require('uuid');
-
-   if (process.env.NODE_ENV === 'development') {
-     const dotenv = require('dotenv');
-
-     dotenv.config();
-   }
-
-   const SIDCore = require('smile-identity-core');
-   const SIDSignature = SIDCore.Signature;
-   const SIDWebAPI = SIDCore.WebApi;
-
-   const app = express();
-
-   app.use(express.json({ limit: '500kb' }));
-   app.use(express.static('public'));
-
-   app.post('/', async (req, res, next) => {
-     try {
-       const { PARTNER_ID, API_KEY, SID_SERVER } = process.env;
-       const connection = new SIDWebAPI(
-         PARTNER_ID,
-         '/callback',
-         API_KEY,
-         SID_SERVER,
-       );
-
-       const partner_params_from_server = {
-         user_id: `user-${UUID()}`,
-         job_id: `job-${UUID()}`,
-         job_type: 4, // job_type is the simplest job we have which enrolls a user using their selfie
-       };
-
-       const {
-         images,
-         partner_params: { libraryVersion },
-       } = req.body;
-
-       const options = {
-         return_job_status: true,
-       };
-
-       const partner_params = Object.assign({}, partner_params_from_server, {
-         libraryVersion,
-       });
-
-       const result = await connection.submit_job(
-         partner_params,
-         images,
-         {},
-         options,
-       );
-
-       res.json(result);
-     } catch (e) {
-       console.error(e);
-     }
-   });
-
-   // NOTE: This can be used to process responses. don't forget to add it as a callback option in the `connection` config on L22
-   // https://docs.usesmileid.com/further-reading/faqs/how-do-i-setup-a-callback
-   app.post('/callback', (req, res, next) => {});
-
-   app.listen(process.env.PORT || 4000);
-   ```
-
-   This approach can also be achieved using other Server to Server libraries.
-
-## Compatibility
-
-`SmartCameraWeb` is compatible with most JavaScript frameworks and libraries. For integration with [ReactJS](https://reactjs.org), refer to this [tutorial](https://www.robinwieruch.de/react-web-components) due to React-WebComponents compatibility issues.
-
-## Support
-
-Tested on the latest versions of Chrome, Edge, Firefox, and Safari. If compatibility issues arise on certain browsers, please notify us.
-
-## Development
-
-Note: `smart-camera-web.js` is generated from `src/` using [esbuild](https://esbuild.github.io/). To make changes, edit the source files and run `npm run build` to generate the new `smart-camera-web.js` file.

package/dist/domain/camera/src/README.md

@@ -1,38 +0,0 @@
-# SmartCamera.js
-
-SmartCamera.js is a JavaScript class that provides an interface for interacting with the user's camera device. It has special handling for multi-camera Samsung devices to mitigate issues with blurry images at the edges.
-
-## Usage
-
-### Getting Media Stream
-
-To get the media stream from the user's camera, call the `getMedia` method with the desired constraints. This method returns a Promise that resolves to a MediaStream object.
-
-```javascript
-const constraints = {
-  video: true,
-  audio: false,
-};
-const stream = await SmartCamera.getMedia(constraints);
-```
-
-`StartCamera` is a singleton so the `stream` can be accessed anytime via `SmartCamera.stream`.
-
-```javascript
-let video = document.createElement('video');
-
-video.autoplay = true;
-video.playsInline = true;
-video.muted = true;
-
-if ('srcObject' in video) {
-  video.srcObject = stream;
-} else {
-  video.src = window.URL.createObjectURL(stream);
-}
-video.play();
-```
-
-### Stopping Media Stream
-
-To stop the media stream, call the stopMedia method. This will stop all tracks in the stream and set the stream to null.

package/dist/domain/file-upload/README.md

@@ -1,35 +0,0 @@
-# SmartFileUpload.js
-
-This exports a class for dealing with file-uploads in SmileID's web components
-
-## Usage
-
-Suppose you have an file input field
-
-```html
-<input
-  type="file"
-  id="upload-photo"
-  name="document"
-  accept="image/png, image/jpeg"
-/>
-```
-
-```javascript
-// get the element
-const uploadDocumentPhotoButton = document.getElementById('upload-photo');
-// add a change event listener
-uploadDocumentPhotoButton.addEventListener('change', async (event) => {
-  try {
-    const { files } = event.target;
-
-    // validate file, and convert file to data url
-    // returns the data url for the first file
-    const fileData = await SmartFileUpload.retrieve(files);
-
-    // use the data url
-  } catch (error) {
-    // handle error
-  }
-});
-```