@smileid/web-components 1.0.0-beta

package/components/end-user-consent/src/EndUserConsent.stories.js

@@ -0,0 +1,23 @@
+import './EndUserConsent';
+
+const meta = {
+  component: 'end-user-consent',
+};
+
+export default meta;
+
+export const EndUserConsent = {
+  render: () => `
+        <end-user-consent
+            country="NG"
+            id-type="NATIONAL_ID"
+            id-type-label="National ID"
+            partner-id="007"
+            partner-name="SmileID Stories"
+            policy-url="https://usesmileid.com/privacy-policy"
+            theme-color="#001096"
+            partner-logo="https://portal.usesmileid.com/favicon.ico"
+        >
+        </end-user-consent>
+    `,
+};

package/components/end-user-consent/src/index.js

@@ -0,0 +1,4 @@
+export {
+  // eslint-disable-next-line import/prefer-default-export
+  EndUserConsent,
+} from './EndUserConsent';

package/components/navigation/src/Navigation.js

@@ -0,0 +1,160 @@
+class Navigation extends HTMLElement {
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: 'open' });
+
+    const style = document.createElement('style');
+    style.textContent = `
+:host {
+  display: flex;
+  max-inline-size: 100%;
+  justify-content: ${this.showBackButton ? 'space-between' : 'flex-end'};
+}
+
+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: 20px;
+  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"] {
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  padding: 0;
+  width: auto;
+}
+
+:host::part(back-button) {
+  display: flex;
+  align-items: center;
+}
+
+:host::part(back-button-text) {
+  line-height: 1;
+  color: rgb(21, 31, 114) !important;
+}
+
+:host::part(close-button) {
+}
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  block-size: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
+}
+    `;
+
+    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.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="40"
+        height="40"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <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="#001096"
+          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"
+        />
+      </svg>
+      <span part="back-button-text">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.innerHTML = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="40"
+        height="40"
+        fill="none"
+      >
+        <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"
+        />
+      </svg>
+      <span class="visually-hidden"
+        >Close SmileIdentity Verification frame</span
+      >
+    `;
+
+    shadow.appendChild(style);
+    if (this.showBackButton) shadow.appendChild(backButton);
+    shadow.appendChild(closeButton);
+
+    // Back Button Controls
+    this.backButton = backButton;
+    this.backButton.addEventListener('click', () => this.handleBack());
+
+    // Close Button Controls
+    this.closeButton = closeButton;
+    this.closeButton.addEventListener('click', () => this.handleClose());
+  }
+
+  disconnectedCallback() {
+    this.backButton.removeEventListener('click', () => this.handleBack());
+    this.closeButton.removeEventListener('click', () => this.handleClose());
+  }
+
+  handleBack() {
+    this.dispatchEvent(new CustomEvent('navigation.back'));
+  }
+
+  handleClose() {
+    this.dispatchEvent(new CustomEvent('navigation.close'));
+  }
+
+  get showBackButton() {
+    return !this.hasAttribute('hide-back');
+  }
+}
+
+if ('customElements' in window) {
+  window.customElements.define('smileid-navigation', Navigation);
+}
+
+export default Navigation;

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

@@ -0,0 +1,24 @@
+import './Navigation';
+
+const meta = {
+  component: 'smileid-navigation',
+};
+
+export default meta;
+
+export const Navigation = {
+  render: () => `
+        <smileid-navigation
+        >
+        </smileid-navigation>
+    `,
+};
+
+export const NavigationWithBackHidden = {
+  render: () => `
+        <smileid-navigation
+          hide-back
+        >
+        </smileid-navigation>
+    `,
+};

package/components/navigation/src/index.js

@@ -0,0 +1,3 @@
+import Navigation from './Navigation';
+
+export default Navigation;

package/components/selfie/README.md

@@ -0,0 +1,201 @@
+# 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](#selfie-capture-review-web-component)
+- Selfie-instructions
+- SmartCamera
+
+These modules are imported when you use the `SelfieCaptureScreens` component in your projects.
+
+### 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 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/components/selfie/src/SelfieCaptureScreens.js

@@ -0,0 +1,224 @@
+import './selfie-capture';
+import './selfie-capture-instructions';
+import './selfie-capture-review';
+import SmartCamera from '../../../domain/camera/src/SmartCamera';
+import styles from '../../../styles/src/styles';
+import { version as COMPONENTS_VERSION } from '../../../package.json';
+
+async function getPermissions(captureScreen) {
+  try {
+    await SmartCamera.getMedia({ audio: false, video: true });
+    captureScreen.removeAttribute('data-camera-error');
+    captureScreen.setAttribute('data-camera-ready', true);
+  } catch (error) {
+    captureScreen.removeAttribute('data-camera-ready');
+    captureScreen.setAttribute(
+      'data-camera-error',
+      SmartCamera.handleCameraError(error),
+    );
+  }
+}
+
+class SelfieCaptureScreens extends HTMLElement {
+  constructor() {
+    super();
+    this.activeScreen = null;
+  }
+
+  connectedCallback() {
+    this.innerHTML = `
+            ${styles}
+            <div>
+              <selfie-capture-instructions ${this.showNavigation} ${this.hideAttribution} ${this.hideBack} hidden></selfie-capture-instructions>
+              <selfie-capture ${this.showNavigation} ${this.hideAttribution} ${this.disableImageTests} hidden></selfie-capture>
+              <selfie-capture-review ${this.showNavigation} ${this.hideAttribution} hidden></selfie-capture-review>
+            </div>
+        `;
+
+    this._data = {
+      images: [],
+      meta: {
+        libraryVersion: COMPONENTS_VERSION,
+      },
+    };
+
+    this.selfieInstruction = this.querySelector('selfie-capture-instructions');
+    this.selfieCapture = this.querySelector('selfie-capture');
+    this.selfieReview = this.querySelector('selfie-capture-review');
+
+    if (this.hideInstructions && !this.hasAttribute('hidden')) {
+      getPermissions(this.selfieCapture);
+    }
+
+    if (this.getAttribute('initial-screen') === 'selfie-capture') {
+      getPermissions(this.selfieCapture);
+      this.setActiveScreen(this.selfieCapture);
+    } else if (this.hideInstructions) {
+      this.setActiveScreen(this.selfieCapture);
+    } else {
+      this.setActiveScreen(this.selfieInstruction);
+    }
+
+    this.setUpEventListeners();
+  }
+
+  disconnectedCallback() {
+    SmartCamera.stopMedia();
+    if (this.activeScreen) {
+      this.activeScreen.removeAttribute('hidden');
+    }
+    this.activeScreen = null;
+    this.innerHTML = '';
+  }
+
+  setUpEventListeners() {
+    this.selfieInstruction.addEventListener(
+      'selfie-capture-instructions.capture',
+      async () => {
+        await getPermissions(this.selfieCapture);
+        this.setActiveScreen(this.selfieCapture);
+      },
+    );
+    this.selfieInstruction.addEventListener(
+      'selfie-capture-instructions.cancelled',
+      () => {
+        this.handleBackEvents();
+      },
+    );
+
+    this.selfieCapture.addEventListener('selfie-capture.cancelled', () => {
+      if (this.hideInstructions) {
+        this.dispatchEvent(new CustomEvent('selfie-capture-screens.cancelled'));
+      } else {
+        this.setActiveScreen(this.selfieInstruction);
+      }
+    });
+
+    this.selfieCapture.addEventListener('selfie-capture.publish', (event) => {
+      this.selfieReview.setAttribute('data-image', event.detail.referenceImage);
+      this._data.images = event.detail.images;
+      SmartCamera.stopMedia();
+      this.setActiveScreen(this.selfieReview);
+    });
+
+    this.selfieCapture.addEventListener('selfie-capture.cancelled', () => {
+      this.selfieCapture.reset();
+      SmartCamera.stopMedia();
+      if (this.hideInstructions) {
+        this.handleBackEvents();
+        return;
+      }
+
+      this.setActiveScreen(this.selfieInstruction);
+    });
+
+    this.selfieReview.addEventListener(
+      'selfie-capture-review.rejected',
+      async () => {
+        this.selfieReview.removeAttribute('data-image');
+        this._data.images = [];
+        if (this.hideInstructions) {
+          this.setActiveScreen(this.selfieCapture);
+          await getPermissions(this.selfieCapture);
+        } else {
+          this.setActiveScreen(this.selfieInstruction);
+        }
+      },
+    );
+
+    this.selfieReview.addEventListener(
+      'selfie-capture-review.accepted',
+      async () => {
+        this._publishSelectedImages();
+      },
+    );
+
+    [this.selfieInstruction, this.selfieCapture, this.selfieReview].forEach(
+      (screen) => {
+        screen.addEventListener(
+          `${screen.nodeName.toLowerCase()}.close`,
+          () => {
+            this.handleCloseEvent();
+          },
+        );
+      },
+    );
+  }
+
+  _publishSelectedImages() {
+    this.dispatchEvent(
+      new CustomEvent('selfie-capture-screens.publish', { detail: this._data }),
+    );
+  }
+
+  get hideInstructions() {
+    return this.hasAttribute('hide-instructions');
+  }
+
+  get hideAttribution() {
+    return this.hasAttribute('hide-attribution') ? 'hide-attribution' : '';
+  }
+
+  get hideBackOfId() {
+    return this.hasAttribute('hide-back-of-id');
+  }
+
+  get showNavigation() {
+    return this.hasAttribute('show-navigation') ? 'show-navigation' : '';
+  }
+
+  get hideBack() {
+    return this.hasAttribute('hide-back-to-host') ? 'hide-back' : '';
+  }
+
+  get disableImageTests() {
+    return this.hasAttribute('disable-image-tests')
+      ? 'disable-image-tests'
+      : '';
+  }
+
+  setActiveScreen(screen) {
+    this.activeScreen?.setAttribute('hidden', '');
+    screen.removeAttribute('hidden');
+    this.activeScreen = screen;
+  }
+
+  handleBackEvents() {
+    this.dispatchEvent(new CustomEvent('selfie-capture-screens.cancelled'));
+  }
+
+  handleCloseEvent() {
+    this.dispatchEvent(new CustomEvent('selfie-capture-screens.close'));
+  }
+
+  static get observedAttributes() {
+    return [
+      'title',
+      'hidden',
+      'show-navigation',
+      'hide-back-to-host',
+      'initial-screen',
+    ];
+  }
+
+  attributeChangedCallback(name) {
+    switch (name) {
+      case 'title':
+      case 'hidden':
+      case 'initial-screen':
+        this.connectedCallback();
+        break;
+      default:
+        break;
+    }
+  }
+}
+
+if (
+  'customElements' in window &&
+  !customElements.get('selfie-capture-screens')
+) {
+  customElements.define('selfie-capture-screens', SelfieCaptureScreens);
+}
+
+export default SelfieCaptureScreens;

package/components/selfie/src/SelfieCaptureScreens.stories.js

@@ -0,0 +1,21 @@
+import './SelfieCaptureScreens';
+
+const meta = {
+  component: 'selfie-capture-screens',
+};
+
+export default meta;
+
+export const SelfieCaptureFlow = {
+  render: () => `
+        <selfie-capture-screens>
+        </selfie-capture-screens>
+    `,
+};
+
+export const SelfieCaptureFlowHiddenInstructions = {
+  render: () => `
+        <selfie-capture-screens hide-instructions >
+        </selfie-capture-screens>
+    `,
+};

package/components/selfie/src/index.js

@@ -0,0 +1,5 @@
+import SelfieCaptureScreens from './SelfieCaptureScreens';
+import SelfieCapture from './selfie-capture/SelfieCapture';
+
+export default SelfieCaptureScreens;
+export { SelfieCapture };