@smileid/web-components 1.0.0-beta → 1.4.2

package/README.md

@@ -0,0 +1,15 @@
+# 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/components/README.md

@@ -2,7 +2,7 @@
 
 These components can be used to capture id document or liveness images
 
-1. [`document-capture-screens`](./document/README.md)
+1. [`document-capture-screens`](./document/src/README.md)
 2. [`selfie-capture-screens`](./selfie/README.md)
 
 ## Orchestration

package/components/camera-permission/CameraPermission.js

@@ -5,7 +5,7 @@ import '../navigation/src';
 
 function templateString() {
   return `
-    ${styles}
+    ${styles(this.themeColor)}
     <style>
         .camera-permission-screen {
           padding-block: 2rem;
@@ -32,7 +32,7 @@ function templateString() {
         }
     </style>
     <div class='camera-permission-screen flow center'>
-        <smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
+        <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
         <div class='flow center'>
           <p class='color-red | center' id='error'>
           </p>
@@ -127,6 +127,10 @@ class CameraPermission extends HTMLElement {
   get hideBack() {
     return this.hasAttribute('hide-back');
   }
+
+  get themeColor() {
+    return this.getAttribute('theme-color') || '#001096';
+  }
 }
 
 if (window.customElements && !window.customElements.get('camera-permission')) {

package/components/camera-permission/CameraPermission.stories.js

@@ -1,21 +1,27 @@
 import './CameraPermission';
 
 const meta = {
+  args: {
+    'theme-color': '#001096',
+  },
+  argTypes: {
+    'theme-color': { control: 'color' },
+  },
   component: 'camera-permission',
 };
 
 export default meta;
 
 export const CameraPermission = {
-  render: () => `
-        <camera-permission>
+  render: (args) => `
+        <camera-permission theme-color='${args['theme-color']}'>
         </camera-permission>
     `,
 };
 
 export const CameraPermissionAtributes = {
-  render: () => `
-        <camera-permission show-navigation>
+  render: (args) => `
+        <camera-permission theme-color='${args['theme-color']}' show-navigation>
         </camera-permission>
     `,
 };

package/components/document/src/DocumentCaptureScreens.js

@@ -32,20 +32,22 @@ class DocumentCaptureScreens extends HTMLElement {
 
   connectedCallback() {
     this.innerHTML = `
-      ${styles}
+      ${styles(this.themeColor)}
       <div>
-      <document-capture-instructions id='document-capture-instructions-front' ${this.title} ${this.documentCaptureModes} ${this.showNavigation} ${this.hideInstructions ? 'hidden' : ''}></document-capture-instructions>
+      <document-capture-instructions theme-color='${this.themeColor}' id='document-capture-instructions-front' ${this.title} ${this.documentCaptureModes} ${this.showNavigation} ${this.hideInstructions ? 'hidden' : ''}></document-capture-instructions>
       <document-capture id='document-capture-front' side-of-id='Front'
       ${this.title} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'} 
-      ${this.documentCaptureModes} ${this.documentType}
+      ${this.documentCaptureModes} ${this.documentType} theme-color='${this.themeColor}'
       ></document-capture>
-      <document-capture-instructions id='document-capture-instructions-back' side-of-id='Back' title='Submit Back of ID' ${this.documentCaptureModes} ${this.showNavigation} hidden></document-capture-instructions>
+      <document-capture-instructions id='document-capture-instructions-back' side-of-id='Back' title='Submit Back of ID'
+       ${this.documentCaptureModes} ${this.showNavigation} theme-color='${this.themeColor}' hidden
+       ></document-capture-instructions>
       <document-capture id='document-capture-back' side-of-id='Back' ${this.title} ${this.showNavigation}
-      ${this.documentCaptureModes}
+      ${this.documentCaptureModes} theme-color='${this.themeColor}'
       hidden 
       ></document-capture>
-      <document-capture-review id='front-of-document-capture-review' hidden></document-capture-review>
-      <document-capture-review id='back-of-document-capture-review' hidden></document-capture-review>
+      <document-capture-review id='front-of-document-capture-review' theme-color='${this.themeColor}' hidden></document-capture-review>
+      <document-capture-review id='back-of-document-capture-review' theme-color='${this.themeColor}' hidden></document-capture-review>
       </div>
     `;
 
@@ -107,7 +109,7 @@ class DocumentCaptureScreens extends HTMLElement {
     this.documentInstruction.addEventListener(
       'document-capture-instructions.upload',
       async (event) => {
-        this.idReview.setAttribute('data-image', event.detail.image);
+        this.idReview.setAttribute('data-image', event.detail.previewImage);
         this._data.images.push({
           image: event.detail.image.split(',')[1],
           image_type_id: IMAGE_TYPE.ID_CARD_IMAGE_BASE64,
@@ -117,7 +119,7 @@ class DocumentCaptureScreens extends HTMLElement {
     );
 
     this.idCapture.addEventListener('document-capture.publish', (event) => {
-      this.idReview.setAttribute('data-image', event.detail.image);
+      this.idReview.setAttribute('data-image', event.detail.previewImage);
       this._data.images.push({
         image: event.detail.image.split(',')[1],
         image_type_id: IMAGE_TYPE.ID_CARD_IMAGE_BASE64,
@@ -187,7 +189,7 @@ class DocumentCaptureScreens extends HTMLElement {
     this.documentInstructionBack.addEventListener(
       'document-capture-instructions.upload',
       async (event) => {
-        this.idReview.setAttribute('data-image', event.detail.image);
+        this.backOfIdReview.setAttribute('data-image', event.detail.image);
         this._data.images.push({
           image: event.detail.image.split(',')[1],
           image_type_id: IMAGE_TYPE.ID_CARD_BACK_IMAGE_BASE64,
@@ -196,7 +198,7 @@ class DocumentCaptureScreens extends HTMLElement {
       },
     );
     this.idCaptureBack.addEventListener('document-capture.publish', (event) => {
-      this.backOfIdReview.setAttribute('data-image', event.detail.image);
+      this.backOfIdReview.setAttribute('data-image', event.detail.previewImage);
       this._data.images.push({
         image: event.detail.image.split(',')[1],
         image_type_id: IMAGE_TYPE.ID_CARD_BACK_IMAGE_BASE64,
@@ -292,6 +294,10 @@ class DocumentCaptureScreens extends HTMLElement {
       : '';
   }
 
+  get themeColor() {
+    return this.getAttribute('theme-color') || '#001096';
+  }
+
   handleBackEvents() {
     this.dispatchEvent(new CustomEvent('document-capture-screens.cancelled'));
   }
@@ -305,6 +311,30 @@ class DocumentCaptureScreens extends HTMLElement {
     screen.removeAttribute('hidden');
     this.activeScreen = screen;
   }
+
+  static get observedAttributes() {
+    return [
+      'document-capture-modes',
+      'document-type',
+      'hide-back-to-host',
+      'show-navigation',
+      'hide-back-of-id',
+    ];
+  }
+
+  attributeChangedCallback(name) {
+    switch (name) {
+      case 'document-capture-modes':
+      case 'document-type':
+      case 'hide-back-of-id':
+      case 'hide-back-to-host':
+      case 'show-navigation':
+        this.connectedCallback();
+        break;
+      default:
+        break;
+    }
+  }
 }
 
 if (

package/components/document/src/DocumentCaptureScreens.stories.js

@@ -1,44 +1,48 @@
 import './index';
 
 const meta = {
+  args: {
+    'theme-color': '#001096',
+  },
+  argTypes: {
+    'theme-color': { control: 'color' },
+  },
   component: 'document-capture-screens',
 };
 
 export default meta;
 
 export const DocumentCapture = {
-  render: () => `
-        <document-capture-screens>
+  render: (args) => `
+        <document-capture-screens theme-color='${args['theme-color']}'>
         </document-capture-screens>
     `,
 };
 
 export const DocumentCaptureHiddenInstructions = {
-  render: () => `
-        <document-capture-screens hide-instructions>
+  render: (args) => `
+        <document-capture-screens hide-instructions theme-color='${args['theme-color']}'>
         </document-capture-screens>
     `,
 };
 
 export const DocumentCaptureHideBackOfId = {
-  render: () => `
-        <document-capture-screens
-            hide-back-of-id
-        >
+  render: (args) => `
+        <document-capture-screens hide-back-of-id theme-color='${args['theme-color']}'>
         </document-capture-screens>
     `,
 };
 
 export const DocumentCaptureAllowAttributes = {
-  render: () => `
-        <document-capture-screens document-capture-screens-modes='camera,upload'>
+  render: (args) => `
+        <document-capture-screens document-capture-screens-modes='camera,upload' theme-color='${args['theme-color']}'>
         </document-capture-screens>
     `,
 };
 
 export const DocumentCaptureHideInstructionNBackOfId = {
-  render: () => `
-        <document-capture-screens hide-back-of-id hide-instructions>
+  render: (args) => `
+        <document-capture-screens hide-back-of-id hide-instructions theme-color='${args['theme-color']}'>
         </document-capture-screens>
     `,
 };

package/components/document/src/README.md

@@ -2,11 +2,12 @@
 
 ## Overview
 
-The `DocumentCapture` is a bespoke web component designed for capturing document images using a camera. It leverages the `SmartCamera` module for camera interaction and permission management.
+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 DocumentCapture component within your project, import it into your JavaScript file as follows:
+To utilize the `DocumentCaptureScreens` component within your project, import it into your JavaScript file as follows:
 
 ```js
 import '@smileid/components/document-capture';
@@ -17,7 +18,7 @@ import '@smileid/components/document-capture';
 The DocumentCapture component can be embedded in your HTML similarly to any standard HTML element:
 
 ```html
-<document-capture></document-capture>
+<document-capture-screens></document-capture-screens>
 ```
 
 ### Attributes
@@ -29,7 +30,7 @@ Customize the component's behavior with the following attributes:
 Omits the capture instructions. This attribute is boolean and does not require a value.
 
 ```html
-<document-capture hide-instructions></document-capture>
+<document-capture-screens hide-instructions></document-capture-screens>
 ```
 
 #### `hide-back-of-id`
@@ -37,7 +38,7 @@ Omits the capture instructions. This attribute is boolean and does not require a
 Excludes the option to capture the ID's back side. This attribute is boolean.
 
 ```html
-<document-capture hide-back-of-id></document-capture>
+<document-capture-screens hide-back-of-id></document-capture-screens>
 ```
 
 #### `show-navigation`
@@ -45,7 +46,7 @@ Excludes the option to capture the ID's back side. This attribute is boolean.
 Displays navigation controls for the capture process. This attribute is boolean.
 
 ```html
-<document-capture show-navigation></document-capture>
+<document-capture-screens show-navigation></document-capture-screens>
 ```
 
 #### `document-capture-modes`
@@ -53,7 +54,9 @@ Displays navigation controls for the capture process. This attribute is boolean.
 Specifies the capture modes, accepting `camera`, `upload`, or both. Value required.
 
 ```html
-<document-capture document-capture-modes="camera,upload"></document-capture>
+<document-capture-screens
+  document-capture-modes="camera,upload"
+></document-capture-screens>
 ```
 
 ### Permissions
@@ -85,7 +88,7 @@ To handle this event:
 
 ```js
 document
-  .querySelector('document-capture')
+  .querySelector('document-capture-screens')
   .addEventListener('document-capture-screens.publish', function (event) {
     console.log(event.detail);
   });