@smileid/web-components 10.0.2 → 10.0.5

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

@@ -50,7 +50,7 @@ class DocumentCaptureScreens extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
       ${styles(this.themeColor)}
-      <div>
+      <div style="height: 100%;">
       <document-capture-instructions theme-color='${this.themeColor}' id='document-capture-instructions-front' ${this.title}
       ${this.documentCaptureModes} ${this.showNavigation} ${this.hideInstructions ? 'hidden' : ''}
       ${this.hideAttribution}

package/lib/components/document/src/document-capture/DocumentCapture.js

@@ -60,11 +60,11 @@ function templateString() {
 
       #document-capture-screen,
       #back-of-document-capture-screen {
-        block-size: 45rem;
         display: flex;
         flex-direction: column;
         max-block-size: 100%;
         max-inline-size: 40ch;
+        padding: 1rem;
       }
 
       #document-capture-screen header p {
@@ -121,6 +121,7 @@ function templateString() {
         inset: -1px;
       }
       canvas {
+        width: 100%;
         border-width: 0.25rem;
         border-color: #9394ab;
         border-style: solid;

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

@@ -155,12 +155,51 @@ function backDocumentIcon() {
 
 function templateString() {
   return `
+  <style>
+    h1 {
+      font-size: 1.25rem;
+    }
+
+    .controls {
+      width: 100%;
+      margin-top: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .content-root {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    .content-header, .content-body, .content-footer {
+      width: 100%;
+    }
+
+    .content-body {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+    }
+    
+    .content-body header {
+      margin-top: 1rem;
+    }
+  </style>
     <div id="document-capture-instructions-screen" class="flow center">
-        <section className="main">
+        <div class="content-root">
+            <div class="content-header">
         <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
+        </div>
+        <div class="content-body">
         <header>
         ${this.isFrontOfId ? frontDocumentIcon() : backDocumentIcon()}
-            <h1 class='text-2xl title-color font-bold'>${this.title}</h1>
+            <h1 class='title-color font-bold'>${this.title}</h1>
         <p class="description text-sm font-normal">
             We'll use it to verify your identity.
           </p>
@@ -168,7 +207,7 @@ function templateString() {
           Please follow the instructions below.
           </p>
         </header>
-        <div class="flow instructions-wrapper">
+        <div class="instructions-wrapper">
             <div class="instructions">
                 <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -342,9 +381,7 @@ function templateString() {
         <div id="error" class='color-red'>
         </div>
         </div>
-        </section>
-    <section className="footer">
-    <div class='flow'>
+    <div class='controls'>
     ${
       this.supportBothCaptureModes || this.documentCaptureModes === 'camera'
         ? `
@@ -367,9 +404,18 @@ function templateString() {
         : ''
     }
 </div>
-${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
-    </section>
+${
+  this.hideAttribution
+    ? ''
+    : `
+  <div class="content-footer">
+    <powered-by-smile-id></powered-by-smile-id>
   </div>
+  `
+}
+    </div>
+  </div>
+</div>
   ${styles(this.themeColor)}
   `;
 }

package/lib/components/document/src/document-capture-review/DocumentCaptureReview.js

@@ -17,7 +17,6 @@ function templateString() {
     
       .section {
         width: 100%;
-        height: 100vh;
         justify-content: center;
       }
     }
@@ -125,11 +124,11 @@ function templateString() {
     }
     
     #document-capture-review-screen {
-      block-size: 45rem;
       display: flex;
       flex-direction: column;
       max-block-size: 100%;
       max-inline-size: 40ch;
+      padding: 1rem;
     }
 
     #document-capture-review-screen .id-image-container.landscape {
@@ -194,7 +193,7 @@ function templateString() {
       text-align: center;
 
       /* h1 */
-      font-size: 1.5rem;
+      font-size: 1.25rem;
       font-style: normal;
       font-weight: 700;
       line-height: 36px; /* 150% */

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

@@ -23,7 +23,7 @@ button {
   color: #ffffff;
   cursor: pointer;
   display: inline-flex;
-  font-size: 20px;
+  font-size: 1rem;
   font-weight: 500;
   inline-size: 100%;
   justify-content: center;
@@ -76,8 +76,8 @@ button[data-type="icon"] {
     backButton.innerHTML = `
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="40"
-        height="40"
+        width="24"
+        height="24"
         viewBox="0 0 24 24"
         fill="none"
       >
@@ -103,8 +103,8 @@ button[data-type="icon"] {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        width="40"
-        height="40"
+        width="24"
+        height="24"
         fill="none"
       >
         <path

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

@@ -9,34 +9,6 @@ const COMPONENTS_VERSION = packageJson.version;
 
 const smartCameraWeb = document.querySelector('smart-camera-web');
 
-async function getPermissions(captureScreen, facingMode = 'user') {
-  try {
-    const stream = await SmartCamera.getMedia({
-      audio: false,
-      video: { facingMode },
-    });
-    const devices = await navigator.mediaDevices.enumerateDevices();
-    const videoDevice = devices.find(
-      (device) =>
-        device.kind === 'videoinput' &&
-        stream.getVideoTracks()[0].getSettings().deviceId === device.deviceId,
-    );
-    smartCameraWeb?.dispatchEvent(
-      new CustomEvent('metadata.camera-name', {
-        detail: { cameraName: videoDevice?.label },
-      }),
-    );
-    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),
-    );
-  }
-}
-
 const cropImageFromDataUri = (
   dataUri,
   cropPercentX = 0,
@@ -113,7 +85,7 @@ class SelfieCaptureScreens extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
             ${styles(this.themeColor)}
-            <div>
+            <div style="height: 100%;">
               <selfie-capture-instructions theme-color='${this.themeColor}' ${this.showNavigation} ${this.hideAttribution} ${this.hideBack} hidden></selfie-capture-instructions>
               <selfie-capture-wrapper theme-color='${this.themeColor}' ${this.showNavigation} ${this.allowAgentMode} ${this.allowAgentModeTests} ${this.hideAttribution} ${this.disableImageTests} key="${this._remountKey}" start-countdown="false" hidden></selfie-capture-wrapper>
               <selfie-capture-review theme-color='${this.themeColor}' ${this.showNavigation} ${this.hideAttribution} hidden></selfie-capture-review>
@@ -130,16 +102,10 @@ class SelfieCaptureScreens extends HTMLElement {
     this.selfieCapture = this.querySelector('selfie-capture-wrapper');
     this.selfieReview = this.querySelector('selfie-capture-review');
 
-    if (this.hideInstructions && !this.hasAttribute('hidden')) {
-      getPermissions(this.selfieCapture, this.getAgentMode());
-    }
-
-    // If the initial screen is selfie-capture, we need to get permissions
-    if (this.getAttribute('initial-screen') === 'selfie-capture') {
-      getPermissions(this.selfieCapture, this.getAgentMode()).then(() =>
-        this.setActiveScreen(this.selfieCapture),
-      );
-    } else if (this.hideInstructions) {
+    if (
+      this.getAttribute('initial-screen') === 'selfie-capture' ||
+      this.hideInstructions
+    ) {
       this.setActiveScreen(this.selfieCapture);
     } else {
       this.setActiveScreen(this.selfieInstruction);
@@ -154,6 +120,14 @@ class SelfieCaptureScreens extends HTMLElement {
 
   disconnectedCallback() {
     SmartCamera.stopMedia();
+
+    if (this._selfieWrapperListeners) {
+      this._selfieWrapperListeners.forEach(({ event, handler }) => {
+        window.removeEventListener(event, handler);
+      });
+      this._selfieWrapperListeners = null;
+    }
+
     if (this.activeScreen) {
       this.activeScreen.removeAttribute('hidden');
     }
@@ -165,22 +139,25 @@ class SelfieCaptureScreens extends HTMLElement {
     this.selfieInstruction.addEventListener(
       'selfie-capture-instructions.capture',
       async () => {
-        await getPermissions(this.selfieCapture, this.getAgentMode()).then(() =>
-          this.setActiveScreen(this.selfieCapture),
-        );
-        smartCameraWeb?.dispatchEvent(
-          new CustomEvent('metadata.selfie-capture-start'),
-        );
-        smartCameraWeb?.dispatchEvent(
-          new CustomEvent('metadata.selfie-origin', {
-            detail: {
-              imageOrigin: {
-                environment: 'back_camera',
-                user: 'front_camera',
-              }[this.getAgentMode()],
-            },
-          }),
-        );
+        this.setActiveScreen(this.selfieCapture);
+
+        const selfieCapture =
+          this.selfieCapture.querySelector('selfie-capture');
+        if (selfieCapture) {
+          smartCameraWeb?.dispatchEvent(
+            new CustomEvent('metadata.selfie-capture-start'),
+          );
+          smartCameraWeb?.dispatchEvent(
+            new CustomEvent('metadata.selfie-origin', {
+              detail: {
+                imageOrigin: {
+                  environment: 'back_camera',
+                  user: 'front_camera',
+                }[this.getAgentMode()],
+              },
+            }),
+          );
+        }
       },
     );
     this.selfieInstruction.addEventListener(
@@ -189,7 +166,6 @@ class SelfieCaptureScreens extends HTMLElement {
         this.handleBackEvents();
       },
     );
-    // Setup selfie-wrapper event listeners
     this.setupSelfieWrapperEventListeners();
 
     this.selfieReview.addEventListener(
@@ -199,17 +175,12 @@ class SelfieCaptureScreens extends HTMLElement {
           new CustomEvent('metadata.selfie-capture-retry'),
         );
         this.selfieReview.removeAttribute('data-image');
+        this.selfieReview.removeAttribute('mirror-image');
         this._data.images = [];
 
-        // Force remount by incrementing key
-        this.forceWrapperRemount();
+        await this.forceWrapperRemount();
 
-        if (this.hideInstructions) {
-          this.setActiveScreen(this.selfieCapture);
-          await getPermissions(this.selfieCapture, this.getAgentMode());
-        } else {
-          this.setActiveScreen(this.selfieInstruction);
-        }
+        this.setActiveScreen(this.selfieCapture);
       },
     );
 
@@ -233,52 +204,66 @@ class SelfieCaptureScreens extends HTMLElement {
   }
 
   // Force remount of selfie-capture-wrapper component for clean state
-  forceWrapperRemount() {
+  async forceWrapperRemount() {
+    SmartCamera.stopMedia();
+
     this._remountKey++;
+
     const container = this.querySelector('div');
-    const oldSelfieCapture = this.selfieCapture;
-
-    // Create new selfie-capture-wrapper element with same attributes
-    const newSelfieCapture = document.createElement('selfie-capture-wrapper');
-    newSelfieCapture.setAttribute('theme-color', this.themeColor);
-    newSelfieCapture.setAttribute('key', this._remountKey.toString());
-    newSelfieCapture.setAttribute('start-countdown', 'false');
-
-    // Copy all the correct attributes based on the getter logic
-    const showNav = this.hasAttribute('show-navigation');
-    const allowAgent = this.getAttribute('allow-agent-mode') === 'true';
-    const allowAgentTests = this.hasAttribute('show-agent-mode-for-tests');
-    const hideAttr = this.hasAttribute('hide-attribution');
-    const disableTests = this.hasAttribute('disable-image-tests');
-
-    if (showNav) newSelfieCapture.setAttribute('show-navigation', '');
-    if (allowAgent) newSelfieCapture.setAttribute('allow-agent-mode', 'true');
-    if (allowAgentTests)
-      newSelfieCapture.setAttribute('show-agent-mode-for-tests', '');
-    if (hideAttr) newSelfieCapture.setAttribute('hide-attribution', '');
-    if (disableTests) newSelfieCapture.setAttribute('disable-image-tests', '');
-    newSelfieCapture.setAttribute('hidden', '');
-
-    // Replace old element with new one
-    container.replaceChild(newSelfieCapture, oldSelfieCapture);
-
-    // Update reference
-    this.selfieCapture = newSelfieCapture;
-
-    // Re-add event listeners for the new element
-    this.setupSelfieWrapperEventListeners();
+    const oldWrapper = this.selfieCapture;
+
+    if (oldWrapper && container) {
+      // recreate wrapper element
+      const newWrapper = document.createElement('selfie-capture-wrapper');
+
+      // copy attributes from old wrapper, but skip key and start-countdown
+      const attributesToCopy = Array.from(oldWrapper.attributes);
+
+      attributesToCopy.forEach((attr) => {
+        newWrapper.setAttribute(attr.name, attr.value);
+      });
+      oldWrapper.remove();
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50);
+      });
+
+      newWrapper.setAttribute('key', this._remountKey.toString());
+      newWrapper.setAttribute('start-countdown', 'false');
+      newWrapper.setAttribute('hidden', '');
+
+      const reviewElement = container.querySelector('selfie-capture-review');
+      if (reviewElement) {
+        container.insertBefore(newWrapper, reviewElement);
+      } else {
+        container.appendChild(newWrapper);
+      }
+
+      this.selfieCapture = newWrapper;
+
+      this.setupSelfieWrapperEventListeners();
+    }
+
+    // give time for the new component to initialize
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, 200);
+    });
   }
 
   // Override setActiveScreen to enable countdown when selfie-capture is active
   setActiveScreen(screen) {
+    if (this.activeScreen === screen) {
+      return;
+    }
+
     this.activeScreen?.setAttribute('hidden', '');
     screen.removeAttribute('hidden');
     this.activeScreen = screen;
 
-    // If activating selfie-capture-wrapper, enable the countdown and ensure permissions
+    // If activating selfie-capture-wrapper, enable the countdown
     if (screen === this.selfieCapture) {
       screen.setAttribute('start-countdown', 'true');
-      getPermissions(this.selfieCapture, this.getAgentMode());
     } else if (this.selfieCapture) {
       // Disable countdown when not on capture screen
       this.selfieCapture.setAttribute('start-countdown', 'false');
@@ -286,11 +271,19 @@ class SelfieCaptureScreens extends HTMLElement {
   }
 
   setupSelfieWrapperEventListeners() {
-    window.addEventListener('selfie-capture.cancelled', () => {
+    // Remove existing event listeners if they exist
+    if (this._selfieWrapperListeners) {
+      this._selfieWrapperListeners.forEach(({ event, handler }) => {
+        window.removeEventListener(event, handler);
+      });
+    }
+
+    // Create new event handlers
+    const cancelledHandler = async () => {
       SmartCamera.stopMedia();
 
       // Force remount of selfie-capture-wrapper for clean state on next visit
-      this.forceWrapperRemount();
+      await this.forceWrapperRemount();
 
       if (this.hideInstructions) {
         this.handleBackEvents();
@@ -298,19 +291,18 @@ class SelfieCaptureScreens extends HTMLElement {
       }
 
       this.setActiveScreen(this.selfieInstruction);
-    });
+    };
 
-    // Add specific close event handler for selfie-capture-wrapper
-    window.addEventListener('selfie-capture.close', () => {
+    const closeHandler = async () => {
       SmartCamera.stopMedia();
 
       // Force remount of selfie-capture-wrapper for clean state on next visit
-      this.forceWrapperRemount();
+      await this.forceWrapperRemount();
 
       this.handleCloseEvent();
-    });
+    };
 
-    window.addEventListener('selfie-capture.publish', async (event) => {
+    const publishHandler = async (event) => {
       smartCameraWeb?.dispatchEvent(
         new CustomEvent('metadata.selfie-capture-end'),
       );
@@ -318,25 +310,31 @@ class SelfieCaptureScreens extends HTMLElement {
         'data-image',
         await cropImageFromDataUri(event.detail.referenceImage, 20, 20),
       );
+      const shouldMirror = event.detail.facingMode === 'user';
+      this.selfieReview.setAttribute(
+        'mirror-image',
+        shouldMirror ? 'true' : 'false',
+      );
       this._data.images = event.detail.images;
       SmartCamera.stopMedia();
       this.setActiveScreen(this.selfieReview);
+    };
+
+    // Store references to remove them later
+    this._selfieWrapperListeners = [
+      { event: 'selfie-capture.cancelled', handler: cancelledHandler },
+      { event: 'selfie-capture.close', handler: closeHandler },
+      { event: 'selfie-capture.publish', handler: publishHandler },
+    ];
+
+    // Add event listeners
+    this._selfieWrapperListeners.forEach(({ event, handler }) => {
+      window.addEventListener(event, handler);
     });
 
     // Also listen for the publish event on the parent SelfieCaptureScreens element
     // in case smartselfie-capture dispatches it there
-    this.addEventListener('selfie-capture.publish', async (event) => {
-      smartCameraWeb?.dispatchEvent(
-        new CustomEvent('metadata.selfie-capture-end'),
-      );
-      this.selfieReview.setAttribute(
-        'data-image',
-        await cropImageFromDataUri(event.detail.referenceImage, 20, 20),
-      );
-      this._data.images = event.detail.images;
-      SmartCamera.stopMedia();
-      this.setActiveScreen(this.selfieReview);
-    });
+    this.addEventListener('selfie-capture.publish', publishHandler);
   }
 
   _publishSelectedImages() {

package/lib/components/selfie/src/selfie-capture/SelfieCapture.js

@@ -351,6 +351,7 @@ function templateString() {
     position: relative;
     z-index: 1;
     width: 100%;
+    overflow: hidden;
   }
 
   .video-container video,
@@ -467,11 +468,12 @@ function templateString() {
 
   #selfie-capture-screen,
   #back-of-id-entry-screen {
-    block-size: 45rem;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     max-block-size: 100%;
     max-inline-size: 40ch;
+    padding: 1rem;
   }
 
   #selfie-capture-screen header p {
@@ -574,7 +576,8 @@ async function getPermissions(
         device.kind === 'videoinput' &&
         stream.getVideoTracks()[0].getSettings().deviceId === device.deviceId,
     );
-    window.dispatchEvent(
+    const smartCameraWeb = document.querySelector('smart-camera-web');
+    smartCameraWeb?.dispatchEvent(
       new CustomEvent('metadata.camera-name', {
         detail: { cameraName: videoDevice?.label },
       }),
@@ -669,7 +672,7 @@ class SelfieCaptureScreen extends HTMLElement {
 
     setTimeout(() => {
       this.smileCTABox.style.opacity = 1;
-      this.smileCTA.textContent = 'BIGGER SMILE';
+      this.smileCTA.textContent = 'WIDER SMILE';
       this.mouth.setAttribute(
         'd',
         'm 213.88314,319.4551 c -1.58,0.97 -0.35309,9.33393 1.50671,9.30586 6.05679,-0.0914 16.11631,0.17227 34.57066,0.13346 18.45435,-0.0388 28.15778,-0.0418 31.09964,-0.79956 1.80122,-0.46394 2.75061,-7.48365 1.16061,-8.45365 -1.6,-1.74874 -2.96432,-0.94348 -6.77747,-1.56441 -12.83012,0.04 -36.52534,0.50197 -41.29469,0.43262 -2.51525,-0.0713 -18.41588,-0.61 -20.01588,0.35 z m 57.29363,1.36599 c -9.24417,-2.23757 -8.08363,-2.42362 -20.78363,-2.42362 -12.7,0 -17.77931,2.69528 -26.84042,5.36549 12.57883,3.28731 33.57775,-4.29887 49.70067,2.24964 z',
@@ -794,9 +797,14 @@ class SelfieCaptureScreen extends HTMLElement {
   }
 
   _publishImages() {
+    const eventDetail = {
+      ...this._data,
+      facingMode: this.facingMode,
+    };
+
     this.dispatchEvent(
       new CustomEvent('selfie-capture.publish', {
-        detail: this._data,
+        detail: eventDetail,
       }),
     );
   }
@@ -839,6 +847,11 @@ class SelfieCaptureScreen extends HTMLElement {
 
   handleStream(stream) {
     try {
+      const videoContainer = this.shadowRoot.querySelector('.video');
+      if (!videoContainer) {
+        return;
+      }
+
       const videoExists = this.shadowRoot.querySelector('video');
       let video = null;
       if (videoExists) {
@@ -862,9 +875,6 @@ class SelfieCaptureScreen extends HTMLElement {
       };
 
       this._video = video;
-      const videoContainer = this.shadowRoot.querySelector(
-        '.video-container > .video',
-      );
       this._data.permissionGranted = true;
 
       if (!videoExists) {
@@ -914,7 +924,10 @@ class SelfieCaptureScreen extends HTMLElement {
 
     if (SmartCamera.stream) {
       this.handleStream(SmartCamera.stream);
-    } else if (this.hasAttribute('data-camera-ready')) {
+    } else if (
+      this.hasAttribute('data-camera-ready') ||
+      !this.hasAttribute('data-camera-error')
+    ) {
       getPermissions(this, { facingMode: this.facingMode });
     }
 
@@ -1005,13 +1018,44 @@ class SelfieCaptureScreen extends HTMLElement {
   attributeChangedCallback(name) {
     switch (name) {
       case 'data-camera-error':
-      case 'data-camera-ready':
       case 'hidden':
       case 'title':
-      case 'allow-agent-mode':
         this.shadowRoot.innerHTML = this.render();
         this.init();
         break;
+      case 'allow-agent-mode':
+        // only re-render if the shadowRoot is empty or not initialized
+        if (!this.shadowRoot.innerHTML.trim()) {
+          this.shadowRoot.innerHTML = this.render();
+          this.init();
+        } else {
+          // update the setupAgentMode
+          this.setupAgentMode();
+        }
+        break;
+      case 'show-navigation':
+        // update the navigation element if it exists
+        if (this.shadowRoot.innerHTML.trim()) {
+          const navigation =
+            this.shadowRoot.querySelector('smileid-navigation');
+          if (navigation) {
+            if (this.showNavigation) {
+              navigation.setAttribute('show-navigation', '');
+            } else {
+              navigation.removeAttribute('show-navigation');
+            }
+          }
+        } else {
+          this.shadowRoot.innerHTML = this.render();
+          this.init();
+        }
+        break;
+      case 'data-camera-ready':
+        // don't re-render, just handle the stream
+        if (this.hasAttribute('data-camera-ready') && SmartCamera.stream) {
+          this.handleStream(SmartCamera.stream);
+        }
+        break;
       default:
         break;
     }