@smileid/web-components 1.0.0-beta → 1.4.2

package/cypress/e2e/smart-camera-web-complete-flow.cy.js

@@ -0,0 +1,221 @@
+const themeColor = '#001093';
+context('SmartCameraWeb', () => {
+  beforeEach(() => {
+    cy.visit('/smart-camera-web-complete-flow');
+  });
+
+  it('should go from the camera screen through to document review with camera capture', () => {
+    cy.clock();
+
+    cy.get('smart-camera-web')
+      .invoke('attr', 'theme-color')
+      .should('equal', themeColor);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .invoke('attr', 'theme-color')
+      .should('equal', themeColor);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .shadow()
+      .find('#allow')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-instructions')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .invoke('attr', 'theme-color')
+      .should('equal', themeColor);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('contain.text', 'Take a Selfie');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .find('#start-image-capture')
+      .click();
+
+    cy.tick(8000);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .invoke('attr', 'theme-color')
+      .should('equal', themeColor);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .find('#select-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('selfie-capture-review')
+      .shadow()
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-front')
+      .invoke('attr', 'theme-color')
+      .should('equal', themeColor);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-front')
+      .shadow()
+      .find('#take-photo')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-front')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-front')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-front')
+      .invoke('attr', 'theme-color')
+      .should('equal', themeColor);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-front')
+      .shadow()
+      .find('#capture-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-front')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-review#front-of-document-capture-review')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-review#front-of-document-capture-review')
+      .invoke('attr', 'theme-color')
+      .should('equal', themeColor);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-review#front-of-document-capture-review')
+      .shadow()
+      .find('#select-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-review#front-of-document-capture-review')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-back')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-back')
+      .invoke('attr', 'theme-color')
+      .should('equal', themeColor);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-back')
+      .shadow()
+      .find('#take-photo')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-instructions#document-capture-instructions-back')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-back')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-back')
+      .invoke('attr', 'theme-color')
+      .should('equal', themeColor);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-back')
+      .shadow()
+      .find('#capture-id-image')
+      .click();
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture#document-capture-back')
+      .should('not.be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-review#back-of-document-capture-review')
+      .should('be.visible');
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-review#back-of-document-capture-review')
+      .invoke('attr', 'theme-color')
+      .should('equal', themeColor);
+
+    cy.get('smart-camera-web')
+      .shadow()
+      .find('document-capture-review#back-of-document-capture-review')
+      .shadow()
+      .find('#select-id-image')
+      .click();
+  });
+});

package/cypress/e2e/smart-camera-web.cy.js

@@ -271,7 +271,7 @@ context('SmartCameraWeb', () => {
       .should('not.be.visible');
   });
 
-  it('should switch to request screen when "Rest"', () => {
+  it('should switch to request screen when "Reset"', () => {
     cy.get('smart-camera-web').then((element) => {
       element[0].reset();
     });

package/cypress/pages/smart-camera-web-agent-mode.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      body {
+        max-width: 100%;
+        min-height: 100%;
+      }
+
+      smart-camera-web {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 40ch;
+        padding: 1rem;
+        width: auto;
+      }
+    </style>
+  </head>
+
+  <body>
+    <smart-camera-web></smart-camera-web>
+
+    <script src="./js/components/smart-camera-web/src/SmartCameraWeb.js"></script>
+    <script>
+      const app = document.querySelector('smart-camera-web');
+      app.addEventListener('smart-camera-web.published', async (e) => {});
+    </script>
+  </body>
+</html>

package/cypress/pages/smart-camera-web-complete-flow.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      body {
+        max-width: 100%;
+        min-height: 100%;
+      }
+
+      smart-camera-web {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 40ch;
+        padding: 1rem;
+        width: auto;
+      }
+    </style>
+  </head>
+
+  <body>
+    <smart-camera-web
+      capture-id
+      disable-image-tests
+      theme-color="#001093"
+    ></smart-camera-web>
+
+    <script src="./js/components/smart-camera-web/src/SmartCameraWeb.js"></script>
+    <script>
+      const app = document.querySelector('smart-camera-web');
+      app.addEventListener('smart-camera-web.published', async (e) => {
+        console.log(e.detail);
+      });
+    </script>
+  </body>
+</html>

package/cypress/pages/smart-camera-web.html

@@ -30,7 +30,7 @@
     <script src="./js/components/smart-camera-web/src/SmartCameraWeb.js"></script>
     <script>
       const app = document.querySelector('smart-camera-web');
-      app.addEventListener('imagesComputed', async (e) => {
+      app.addEventListener('smart-camera-web.published', async (e) => {
         console.log(e.detail);
       });
     </script>

package/domain/camera/src/SmartCamera.js

@@ -31,6 +31,34 @@ class SmartCamera {
     }
   }
 
+  static async supportsAgentMode() {
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const videoDevices = devices.filter(
+        (device) => device.kind === 'videoinput',
+      );
+
+      let hasBackCamera = false;
+
+      videoDevices.forEach((device) => {
+        // Check if the device label or device ID indicates a back camera
+        if (
+          device.label.toLowerCase().includes('back') ||
+          device.label.toLowerCase().includes('rear')
+        ) {
+          hasBackCamera = true;
+          return true;
+        }
+        return false;
+      });
+
+      return hasBackCamera;
+    } catch (error) {
+      console.warn('Error accessing media devices: ', error);
+      return false;
+    }
+  }
+
   static isSamsungMultiCameraDevice() {
     const matchedModelNumber = navigator.userAgent.match(/SM-[N|G]\d{3}/);
     if (!matchedModelNumber) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "1.0.0-beta",
+  "version": "1.4.2",
   "exports": {
     ".": "./index.js",
     "./combobox": "./components/combobox/src/index.js",
@@ -28,19 +28,19 @@
   "type": "module",
   "author": "SmileID <support@usesmileid.com> (https://usesmileid.com)",
   "dependencies": {
-    "signature_pad": "^4.1.7",
+    "signature_pad": "^5.0.2",
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
-    "cypress": "^13.6.6",
-    "esbuild": "^0.20.2",
+    "cypress": "^13.14.1",
+    "esbuild": "^0.21.5",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.2.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.2.2"
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "prettier": "^3.3.3"
   }
 }

package/styles/src/styles.js

@@ -1,6 +1,8 @@
 import typography from './typography';
 
-const styles = `<link rel="preconnect" href="https://fonts.gstatic.com" />
+const styles = (
+  themeColor,
+) => `<link rel="preconnect" href="https://fonts.gstatic.com" />
 <link
   href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap"
   rel="stylesheet"
@@ -9,6 +11,7 @@ const styles = `<link rel="preconnect" href="https://fonts.gstatic.com" />
 <style>
 ${typography}
 :host {
+    --theme-color: ${themeColor || '#001096'};
     --color-active: #001096;
     --color-default: #2d2b2a;
     --color-disabled: #848282;
@@ -83,6 +86,14 @@ ${typography}
     color: #001096;
   }
 
+  .title-color {
+    color: ${themeColor || '#001096'};
+  }
+  
+  .theme-color {
+    color: ${themeColor || '#001096'};
+  }
+
   .center {
     text-align: center;
     margin-left: auto;
@@ -114,7 +125,7 @@ ${typography}
   }
 
   .button {
-    --button-color: var(--color-active);
+    --button-color: ${themeColor || 'var(--active-color)'};
     -webkit-appearance: none;
     appearance: none;
     border-radius: 2.5rem;
@@ -310,7 +321,7 @@ ${typography}
   }
 
   .instruction-header {
-    color: var(--web-digital-blue, #001096);
+    color: ${themeColor};
   }
 
   .flex-column {