@smileid/web-components 11.1.0 → 11.2.0

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

@@ -32,7 +32,7 @@ function templateString() {
         }
     </style>
     <div class='camera-permission-screen flow center' dir='${this.direction}'>
-        <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
+        ${this.showNavigation ? `<smileid-navigation theme-color='${this.themeColor}' ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>` : ''}
         <div class='flow center'>
           <p class='color-red | center' id='error'>
           </p>

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

@@ -164,7 +164,7 @@ function templateString() {
   </style>
   ${styles(this.themeColor)}
   <div id='document-capture-screen' class='flow center flex-column' dir='${this.direction}'>
-  <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
+  ${this.showNavigation ? `<smileid-navigation theme-color='${this.themeColor}' show-navigation ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>` : ''}
     <h2 class='text-base font-bold title-color'>${this.documentName}</h2>
     <div class="circle-progress" id="loader">
         ${this.cameraError ? '' : '<p class="spinner"></p>'}
@@ -629,11 +629,11 @@ class DocumentCapture extends HTMLElement {
       this.handleIDStream(SmartCamera.stream);
     }
 
-    this.navigation.addEventListener('navigation.back', () => {
+    this.navigation?.addEventListener('navigation.back', () => {
       this.handleBackEvents();
     });
 
-    this.navigation.addEventListener('navigation.close', () => {
+    this.navigation?.addEventListener('navigation.close', () => {
       this.handleCloseEvents();
     });
 

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

@@ -195,7 +195,7 @@ function templateString() {
     <div id="document-capture-instructions-screen" class="flow center" dir="${this.direction}">
         <div class="content-root">
             <div class="content-header">
-        <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
+        ${this.showNavigation ? `<smileid-navigation theme-color='${this.themeColor}' show-navigation ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>` : ''}
         </div>
         <div class="content-body">
         <header>
@@ -441,11 +441,11 @@ class DocumentInstruction extends HTMLElement {
     this.uploadDocumentPhotoButton =
       this.shadowRoot.querySelector('#upload-photo');
 
-    this.navigation.addEventListener('navigation.back', () => {
+    this.navigation?.addEventListener('navigation.back', () => {
       this.handleBackEvents();
     });
 
-    this.navigation.addEventListener('navigation.close', () => {
+    this.navigation?.addEventListener('navigation.close', () => {
       this.handleCloseEvents();
     });
 

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

@@ -220,7 +220,7 @@ function templateString() {
   </style>
   ${styles(this.themeColor)}
   <div id='document-capture-review-screen' class='flow center' dir='${this.direction}'>
-  <smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} hide-back></smileid-navigation>
+  ${this.showNavigation ? `<smileid-navigation show-navigation hide-back></smileid-navigation>` : ''}
     <h1 class="header-title title-color">
       ${t('document.review.question')}
     </h1>
@@ -329,11 +329,11 @@ class IdReview extends HTMLElement {
       '#re-capture-id-image',
     );
     this.navigation = this.shadowRoot.querySelector('smileid-navigation');
-    this.navigation.addEventListener('navigation.back', () => {
+    this.navigation?.addEventListener('navigation.back', () => {
       this.handleBackEvents();
     });
 
-    this.navigation.addEventListener('navigation.close', () => {
+    this.navigation?.addEventListener('navigation.close', () => {
       this.handleCloseEvents();
     });
 

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

@@ -83,7 +83,7 @@ class SelfieCaptureScreens extends HTMLElement {
             ${styles(this.themeColor)}
             <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-wrapper theme-color='${this.themeColor}' ${this.showNavigation} ${this.allowAgentMode} ${this.allowAgentModeTests} ${this.hideAttribution} ${this.disableImageTests} ${this.allowLegacySelfieFallback} 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>
             </div>
         `;
@@ -365,6 +365,12 @@ class SelfieCaptureScreens extends HTMLElement {
       : '';
   }
 
+  get allowLegacySelfieFallback() {
+    return this.hasAttribute('allow-legacy-selfie-fallback')
+      ? `allow-legacy-selfie-fallback='${this.getAttribute('allow-legacy-selfie-fallback')}'`
+      : '';
+  }
+
   get themeColor() {
     return this.getAttribute('theme-color') || '#001096';
   }
@@ -385,6 +391,7 @@ class SelfieCaptureScreens extends HTMLElement {
       'hide-back-to-host',
       'initial-screen',
       'allow-agent-mode',
+      'allow-legacy-selfie-fallback',
       'show-agent-mode-for-tests',
       'disable-image-tests',
     ];
@@ -396,6 +403,7 @@ class SelfieCaptureScreens extends HTMLElement {
       case 'hidden':
       case 'initial-screen':
       case 'allow-agent-mode':
+      case 'allow-legacy-selfie-fallback':
       case 'show-agent-mode-for-tests':
       case 'disable-image-tests':
         this.connectedCallback();

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

@@ -932,11 +932,11 @@ class SelfieCaptureScreen extends HTMLElement {
       this._switchCamera();
     });
 
-    this.navigation.addEventListener('navigation.back', () => {
+    this.navigation?.addEventListener('navigation.back', () => {
       this.handleBackEvents();
     });
 
-    this.navigation.addEventListener('navigation.close', () => {
+    this.navigation?.addEventListener('navigation.close', () => {
       this.closeWindow();
     });
 

package/lib/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js

@@ -343,7 +343,7 @@ function templateString() {
     <div id="selfie-capture-instruction-screen" class="center" dir="${this.direction}">
     <div class="content-root">
       <div class="content-header">
-        <smileid-navigation theme-color=${this.themeColor} ${this.hideBack ? 'hide-back' : ''} ${this.showNavigation ? '' : 'hidden'}></smileid-navigation>
+        ${this.showNavigation ? `<smileid-navigation theme-color='${this.themeColor}' ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>` : ''}
       </div>
       <div class="content-body">
         <header>
@@ -625,7 +625,7 @@ class SelfieCaptureInstructions extends HTMLElement {
     this.allowButton = this.shadowRoot.querySelector('#allow');
     this.navigation = this.shadowRoot.querySelector('smileid-navigation');
 
-    this.navigation.addEventListener('navigation.back', () => {
+    this.navigation?.addEventListener('navigation.back', () => {
       this.handleBackEvents();
     });
 
@@ -637,7 +637,7 @@ class SelfieCaptureInstructions extends HTMLElement {
       });
     }
 
-    this.navigation.addEventListener(
+    this.navigation?.addEventListener(
       'navigation.close',
       () => {
         this.handleCloseEvents();

package/lib/components/selfie/src/selfie-capture-review/SelfieCaptureReview.js

@@ -57,7 +57,7 @@ function templateString() {
     </style>
     ${styles(this.themeColor)}
     <div id='selfie-capture-review-screen' class='center' dir='${this.direction}'>
-    <smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} hide-back></smileid-navigation>
+   ${this.showNavigation ? `<smileid-navigation hide-back></smileid-navigation>` : ''}
     <h1 class="header-title title-color font-bold">
       ${t('selfie.review.question')}
     </h1>
@@ -180,10 +180,10 @@ class SelfieCaptureReview extends HTMLElement {
     this.reCaptureImage = this.shadowRoot.querySelector('#re-capture-image');
     this.navigation = this.shadowRoot.querySelector('smileid-navigation');
 
-    this.navigation.addEventListener('navigation.back', () => {
+    this.navigation?.addEventListener('navigation.back', () => {
       this.handleBackEvents();
     });
-    this.navigation.addEventListener('navigation.close', () => {
+    this.navigation?.addEventListener('navigation.close', () => {
       this.handleCloseEvents();
     });
 

package/lib/components/selfie/src/selfie-capture-wrapper/SelfieCaptureWrapper.tsx

@@ -4,6 +4,7 @@ import register from 'preact-custom-element';
 import type { FunctionComponent } from 'preact';
 
 import { getBoolProp } from '../../../../utils/props';
+import { translate, translateHtml } from '../../../../domain/localisation';
 import SmartSelfieCapture from '../smartselfie-capture/SmartSelfieCapture';
 // Legacy web component fallback (used when Mediapipe isn't available)
 import '../selfie-capture/SelfieCapture';
@@ -17,6 +18,7 @@ interface Props {
   'theme-color'?: string;
   'show-navigation'?: string | boolean;
   'allow-agent-mode'?: string | boolean;
+  'allow-legacy-selfie-fallback'?: string | boolean;
   'show-agent-mode-for-tests'?: string | boolean;
   'hide-attribution'?: string | boolean;
   'disable-image-tests'?: string | boolean;
@@ -25,12 +27,16 @@ interface Props {
   hidden?: string | boolean;
 }
 
+const DEFAULT_MEDIAPIPE_WAIT_MS = 90 * 1000; // For when legacy fallback is NOT allowed, we wait the full 90s for mediapipe to load before showing an error.
+const DEFAULT_WAIT_MS = 20 * 1000; // default for when legacy fallback is allowed we wait for 20s
+
 // Wrapper component that decides whether to use the modern
 // SmartSelfieCapture (Mediapipe-based) or fallback to the legacy `selfie-capture`
-// web component after a timeout of 20 seconds.
+// web component after a timeout (default 90 seconds).
 const SelfieCaptureWrapper: FunctionComponent<Props> = ({
-  timeout = 20000,
+  timeout = DEFAULT_MEDIAPIPE_WAIT_MS,
   'start-countdown': startCountdownProp = false,
+  'allow-legacy-selfie-fallback': allowLegacySelfieFallbackProp = false,
   hidden: hiddenProp = false,
   ...props
 }) => {
@@ -54,6 +60,9 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
 
   const hidden = getBoolProp(hiddenProp);
   const startCountdown = getBoolProp(startCountdownProp);
+  const allowLegacySelfieFallback = getBoolProp(allowLegacySelfieFallbackProp);
+  const loadingTime = allowLegacySelfieFallback ? DEFAULT_WAIT_MS : timeout;
+
   // Component state:
   // - mediapipeReady: whether the mediapipe instance has successfully loaded
   // - loadingProgress: percentage used for the visible loading UI
@@ -96,12 +105,12 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
 
     const timer = setInterval(() => {
       setLoadingProgress((prev: number) => Math.min(prev + 1, 100));
-    }, timeout / 100);
+    }, loadingTime / 100);
 
     return () => {
       clearInterval(timer);
     };
-  }, [hidden, startCountdown, timeout, mediapipeReady]);
+  }, [hidden, startCountdown, loadingTime, mediapipeReady]);
 
   useEffect(() => {
     if (hidden || mediapipeReady || loadingProgress < 100) return undefined;
@@ -155,8 +164,22 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     };
   }, [hidden, mediapipeReady, loadingProgress]);
 
+  // Dispatch allow_legacy_selfie_fallback config for observability
+  useEffect(() => {
+    if (hidden) return;
+
+    const smartCameraWeb = document.querySelector('smart-camera-web');
+    smartCameraWeb?.dispatchEvent(
+      new CustomEvent('metadata.allow-legacy-selfie-fallback', {
+        detail: {
+          allow_legacy_selfie_fallback: allowLegacySelfieFallback,
+        },
+      }),
+    );
+  }, [hidden, allowLegacySelfieFallback]);
+
   // Announce to any `smart-camera-web` element which liveness version is active.
-  // The old capture users 0.0.1, the new one 1.0.0.
+  // The old capture uses 0.0.1, the new one 1.0.0.
   useEffect(() => {
     if (hidden || mediapipeLoading) return;
 
@@ -185,52 +208,71 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
   }
 
   if (loadingProgress >= 100) {
-    // When loading completes without Mediapipe becoming ready, mount the legacy
-    // `selfie-capture` web component. We also set `usingSelfieCapture` so other
-    // effects can react (e.g. metadata dispatch).
-    if (!usingSelfieCapture) {
-      setUsingSelfieCapture(true);
-    }
+    // When loading completes without Mediapipe becoming ready, check if legacy
+    // fallback is allowed. Legacy is allowed if:
+    // 1. allow-legacy-selfie-fallback attribute is set to true, OR
+    // 2. Running under Cypress (to keep existing test behavior)
+    const legacyFallbackAllowed = allowLegacySelfieFallback || isCypress;
+
+    if (legacyFallbackAllowed) {
+      // Mount the legacy `selfie-capture` web component. We also set
+      // `usingSelfieCapture` so other effects can react (e.g. metadata dispatch).
+      if (!usingSelfieCapture) {
+        setUsingSelfieCapture(true);
+      }
+
+      const propsWithoutHidden = { ...props };
+      delete (propsWithoutHidden as any).hidden;
+
+      return (
+        // @ts-expect-error --- preact-custom-element doesn't have proper types for refs
+        <selfie-capture
+          {...propsWithoutHidden}
+          ref={(el: HTMLElement) => {
+            if (el && !el.hasAttribute('data-events-setup')) {
+              el.setAttribute('data-events-setup', 'true');
 
-    const propsWithoutHidden = { ...props };
-    delete (propsWithoutHidden as any).hidden;
+              const forwardEvent = (event: Event) => {
+                const customEvent = event as CustomEvent;
 
+                if (
+                  customEvent.type === 'selfie-capture.publish' ||
+                  customEvent.type === 'selfie-capture.cancelled' ||
+                  customEvent.type === 'selfie-capture.close'
+                ) {
+                  setInitialSessionCompleted(true);
+                }
+
+                window.dispatchEvent(
+                  new CustomEvent(customEvent.type, {
+                    detail: customEvent.detail,
+                    bubbles: true,
+                  }),
+                );
+              };
+
+              el.addEventListener('selfie-capture.publish', forwardEvent);
+              el.addEventListener('selfie-capture.cancelled', forwardEvent);
+              el.addEventListener('selfie-capture.close', forwardEvent);
+            }
+          }}
+        />
+      );
+    }
+
+    // Legacy fallback is NOT allowed: show error message
     return (
-      // @ts-expect-error --- preact-custom-element doesn't have proper types for refs
-      <selfie-capture
-        {...propsWithoutHidden}
-        ref={(el: HTMLElement) => {
-          if (el && !el.hasAttribute('data-events-setup')) {
-            el.setAttribute('data-events-setup', 'true');
-
-            const forwardEvent = (event: Event) => {
-              const customEvent = event as CustomEvent;
-
-              if (
-                customEvent.type === 'selfie-capture.publish' ||
-                customEvent.type === 'selfie-capture.cancelled' ||
-                customEvent.type === 'selfie-capture.close'
-              ) {
-                setInitialSessionCompleted(true);
-              }
-
-              window.dispatchEvent(
-                new CustomEvent(customEvent.type, {
-                  detail: customEvent.detail,
-                  bubbles: true,
-                }),
-              );
-            };
-
-            el.addEventListener('selfie-capture.publish', forwardEvent);
-            el.addEventListener('selfie-capture.cancelled', forwardEvent);
-            el.addEventListener('selfie-capture.close', forwardEvent);
-          }
-        }}
-      />
+      <div style={{ textAlign: 'center', marginTop: '20%', padding: '0 20px' }}>
+        <p style={{ fontSize: '1.2rem', color: '#333' }}>
+          {translate('selfie.capture.loading.connectionError')}
+        </p>
+      </div>
     );
   }
 
+  // Midpoint threshold (40s out of 90s ≈ 44%)
+  const SLOW_CONNECTION_THRESHOLD = 44;
+
   return (
     <div style={{ textAlign: 'center', marginTop: '20%' }}>
       <div
@@ -245,7 +287,15 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
           style={{ animation: 'spin 1s linear infinite' }}
         />
       </div>
-      <p>Loading... {loadingProgress}%</p>
+      {loadingProgress >= SLOW_CONNECTION_THRESHOLD ? (
+        <p>{translate('selfie.capture.loading.slowConnection')}</p>
+      ) : (
+        <p>
+          {translateHtml('selfie.capture.loading.progress', {
+            progress: loadingProgress,
+          })}
+        </p>
+      )}
       <style>{`
         @keyframes spin {
           from { transform: rotate(0deg); }
@@ -267,6 +317,7 @@ if (!customElements.get('selfie-capture-wrapper')) {
       'theme-color',
       'show-navigation',
       'allow-agent-mode',
+      'allow-legacy-selfie-fallback',
       'show-agent-mode-for-tests',
       'hide-attribution',
       'disable-image-tests',

package/lib/components/signature-pad/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "private": "true",
   "exports": {
     ".": "./index.js"

package/lib/components/smart-camera-web/src/SmartCameraWeb.js

@@ -20,7 +20,7 @@ function scwTemplateString() {
   <div style="height: 100%;">
     <camera-permission ${this.applyComponentThemeColor} ${this.title} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'} ${this.hideAttribution}></camera-permission>
     <selfie-capture-screens ${this.applyComponentThemeColor} ${this.title} ${this.showNavigation} ${this.disableImageTests} ${this.hideAttribution} ${this.hideInstructions} hidden
-      ${this.hideBackToHost} ${this.allowAgentMode} ${this.allowAgentModeTests}
+      ${this.hideBackToHost} ${this.allowAgentMode} ${this.allowAgentModeTests} ${this.allowLegacySelfieFallback}
     ></selfie-capture-screens>
     <document-capture-screens ${this.applyComponentThemeColor} document-type=${this.documentType} ${this.title} ${this.documentCaptureModes} ${this.showNavigation}  ${this.hideAttribution}
      ${this.hideBackOfId} ${this.applyComponentThemeColor} hidden></document-capture-screens>
@@ -69,6 +69,7 @@ class SmartCameraWeb extends HTMLElement {
   static get observedAttributes() {
     return [
       'allow-agent-mode',
+      'allow-legacy-selfie-fallback',
       'disable-image-tests',
       'document-capture-modes',
       'document-type',
@@ -83,6 +84,7 @@ class SmartCameraWeb extends HTMLElement {
   attributeChangedCallback(name) {
     switch (name) {
       case 'allow-agent-mode':
+      case 'allow-legacy-selfie-fallback':
       case 'disable-image-tests':
       case 'document-capture-modes':
       case 'document-type':
@@ -266,6 +268,12 @@ class SmartCameraWeb extends HTMLElement {
       : '';
   }
 
+  get allowLegacySelfieFallback() {
+    return this.hasAttribute('allow-legacy-selfie-fallback')
+      ? `allow-legacy-selfie-fallback='${this.getAttribute('allow-legacy-selfie-fallback')}'`
+      : '';
+  }
+
   get hideAttribution() {
     return this.hasAttribute('hide-attribution') ? 'hide-attribution' : '';
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/web-components",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "main": "dist/esm/main.js",
   "module": "dist/esm/main.js",
   "types": "dist/types/main.d.ts",
@@ -79,7 +79,7 @@
     "@mediapipe/tasks-vision": "^0.10.22-rc.20250304",
     "@preact/signals": "^2.1.1",
     "@tabler/icons-preact": "^3.34.0",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "preact": "^10.27.3",
     "preact-custom-element": "^4.3.0",
     "preact-router": "^4.1.2",