@smileid/web-components 11.0.3 → 11.1.0

package/dist/types/combobox.d.ts

@@ -14,8 +14,8 @@ declare module 'signature_pad' {
 
     isEmpty(): boolean;
 
-    on(event: string, callback: Function): void;
+    on(event: string, callback: (...args: unknown[]) => void): void;
 
-    off(event: string, callback: Function): void;
+    off(event: string, callback: (...args: unknown[]) => void): void;
   }
 }

package/dist/types/document.d.ts

@@ -14,8 +14,8 @@ declare module 'signature_pad' {
 
     isEmpty(): boolean;
 
-    on(event: string, callback: Function): void;
+    on(event: string, callback: (...args: unknown[]) => void): void;
 
-    off(event: string, callback: Function): void;
+    off(event: string, callback: (...args: unknown[]) => void): void;
   }
 }

package/dist/types/end-user-consent.d.ts

@@ -14,8 +14,8 @@ declare module 'signature_pad' {
 
     isEmpty(): boolean;
 
-    on(event: string, callback: Function): void;
+    on(event: string, callback: (...args: unknown[]) => void): void;
 
-    off(event: string, callback: Function): void;
+    off(event: string, callback: (...args: unknown[]) => void): void;
   }
 }

package/dist/types/locale.d.ts

@@ -0,0 +1,19 @@
+export {};
+
+declare module 'signature_pad' {
+  export default class SignaturePad {
+    constructor(canvas: HTMLCanvasElement, options?: any);
+
+    clear(): void;
+
+    toDataURL(type?: string): string;
+
+    fromDataURL(dataURL: string): void;
+
+    isEmpty(): boolean;
+
+    on(event: string, callback: Function): void;
+
+    off(event: string, callback: Function): void;
+  }
+}

package/dist/types/localisation.d.ts

@@ -0,0 +1,21 @@
+export { }
+
+
+
+declare module 'signature_pad' {
+  export default class SignaturePad {
+    constructor(canvas: HTMLCanvasElement, options?: any);
+
+    clear(): void;
+
+    toDataURL(type?: string): string;
+
+    fromDataURL(dataURL: string): void;
+
+    isEmpty(): boolean;
+
+    on(event: string, callback: (...args: unknown[]) => void): void;
+
+    off(event: string, callback: (...args: unknown[]) => void): void;
+  }
+}

package/dist/types/main.d.ts

@@ -60,12 +60,14 @@ export declare class DocumentCaptureScreens extends HTMLElement {
     activeScreen: any;
     smartCameraWeb: Element | null;
     connectedCallback(): void;
-    _data: {
+    _data:
+    | {
         images: never[];
         meta: {
             libraryVersion: string;
         };
-    } | undefined;
+    }
+    | undefined;
     documentInstruction: Element | null | undefined;
     documentInstructionBack: Element | null | undefined;
     idCapture: Element | null | undefined;
@@ -78,11 +80,11 @@ export declare class DocumentCaptureScreens extends HTMLElement {
     _publishSelectedImages(): void;
     get hideInstructions(): boolean;
     get hideBackOfId(): boolean;
-    get showNavigation(): "" | "show-navigation";
+    get showNavigation(): '' | 'show-navigation';
     get title(): string;
     get documentCaptureModes(): string;
     get documentType(): string;
-    get hideAttribution(): "" | "hide-attribution";
+    get hideAttribution(): '' | 'hide-attribution';
     get themeColor(): string;
     handleBackEvents(): void;
     handleCloseEvents(): void;
@@ -156,35 +158,40 @@ export declare class SelfieCaptureScreens extends HTMLElement {
     activeScreen: any;
     _remountKey: number;
     connectedCallback(): void;
-    _data: {
+    _data:
+    | {
         images: never[];
         meta: {
             libraryVersion: string;
         };
-    } | undefined;
+    }
+    | undefined;
     selfieInstruction: Element | null | undefined;
     selfieCapture: HTMLElement | Element | null | undefined;
     selfieReview: Element | null | undefined;
-    getAgentMode(): "environment" | "user";
+    getAgentMode(): 'environment' | 'user';
     disconnectedCallback(): void;
-    _selfieWrapperListeners: {
+    _selfieWrapperListeners:
+    | {
         event: string;
         handler: (event: any) => Promise<void>;
-    }[] | null | undefined;
+    }[]
+    | null
+    | undefined;
     setUpEventListeners(): void;
     forceWrapperRemount(): Promise<any>;
     setActiveScreen(screen: any): void;
     setupSelfieWrapperEventListeners(): void;
     _publishSelectedImages(): void;
     get hideInstructions(): boolean;
-    get hideAttribution(): "" | "hide-attribution=\"\"";
+    get hideAttribution(): '' | 'hide-attribution=""';
     get hideBackOfId(): boolean;
-    get showNavigation(): "" | "show-navigation=\"\"";
+    get showNavigation(): '' | 'show-navigation=""';
     get inAgentMode(): boolean;
-    get allowAgentMode(): "" | "allow-agent-mode=\"true\"";
-    get allowAgentModeTests(): "" | "show-agent-mode-for-tests=\"\"";
-    get hideBack(): "" | "hide-back=\"\"";
-    get disableImageTests(): "" | "disable-image-tests=\"\"";
+    get allowAgentMode(): '' | 'allow-agent-mode="true"';
+    get allowAgentModeTests(): '' | 'show-agent-mode-for-tests=""';
+    get hideBack(): '' | 'hide-back=""';
+    get disableImageTests(): '' | 'disable-image-tests=""';
     get themeColor(): string;
     handleBackEvents(): void;
     handleCloseEvent(): void;
@@ -216,12 +223,14 @@ export declare class SmartCameraWeb extends HTMLElement {
     render: () => string;
     activeScreen: any;
     connectedCallback(): void;
-    _data: {
+    _data:
+    | {
         images: never[];
         meta: {
             libraryVersion: string;
         };
-    } | undefined;
+    }
+    | undefined;
     disconnectedCallback(): void;
     attributeChangedCallback(name: any): void;
     setUpEventListeners(): void;
@@ -234,16 +243,16 @@ export declare class SmartCameraWeb extends HTMLElement {
     get captureId(): boolean;
     get documentType(): string | null;
     get isPortraitCaptureView(): boolean;
-    get hideInstructions(): "" | "hide-instructions";
-    get hideBackOfId(): "" | "hide-back-of-id";
-    get showNavigation(): "" | "show-navigation";
-    get hideBackToHost(): "" | "hide-back";
+    get hideInstructions(): '' | 'hide-instructions';
+    get hideBackOfId(): '' | 'hide-back-of-id';
+    get showNavigation(): '' | 'show-navigation';
+    get hideBackToHost(): '' | 'hide-back';
     get allowAgentMode(): string;
-    get allowAgentModeTests(): "" | "show-agent-mode-for-tests";
+    get allowAgentModeTests(): '' | 'show-agent-mode-for-tests';
     get title(): string;
     get documentCaptureModes(): string;
-    get disableImageTests(): "" | "disable-image-tests";
-    get hideAttribution(): "" | "hide-attribution";
+    get disableImageTests(): '' | 'disable-image-tests';
+    get hideAttribution(): '' | 'hide-attribution';
     get hasThemeColor(): boolean;
     get themeColor(): string | null;
     get applyComponentThemeColor(): string;
@@ -328,8 +337,8 @@ declare module 'signature_pad' {
 
     isEmpty(): boolean;
 
-    on(event: string, callback: Function): void;
+    on(event: string, callback: (...args: unknown[]) => void): void;
 
-    off(event: string, callback: Function): void;
+    off(event: string, callback: (...args: unknown[]) => void): void;
   }
 }

package/dist/types/navigation.d.ts

@@ -14,8 +14,8 @@ declare module 'signature_pad' {
 
     isEmpty(): boolean;
 
-    on(event: string, callback: Function): void;
+    on(event: string, callback: (...args: unknown[]) => void): void;
 
-    off(event: string, callback: Function): void;
+    off(event: string, callback: (...args: unknown[]) => void): void;
   }
 }

package/dist/types/selfie.d.ts

@@ -14,8 +14,8 @@ declare module 'signature_pad' {
 
     isEmpty(): boolean;
 
-    on(event: string, callback: Function): void;
+    on(event: string, callback: (...args: unknown[]) => void): void;
 
-    off(event: string, callback: Function): void;
+    off(event: string, callback: (...args: unknown[]) => void): void;
   }
 }

package/dist/types/signature-pad.d.ts

@@ -14,8 +14,8 @@ declare module 'signature_pad' {
 
     isEmpty(): boolean;
 
-    on(event: string, callback: Function): void;
+    on(event: string, callback: (...args: unknown[]) => void): void;
 
-    off(event: string, callback: Function): void;
+    off(event: string, callback: (...args: unknown[]) => void): void;
   }
 }

package/dist/types/smart-camera-web.d.ts

@@ -14,8 +14,8 @@ declare module 'signature_pad' {
 
     isEmpty(): boolean;
 
-    on(event: string, callback: Function): void;
+    on(event: string, callback: (...args: unknown[]) => void): void;
 
-    off(event: string, callback: Function): void;
+    off(event: string, callback: (...args: unknown[]) => void): void;
   }
 }

package/dist/types/totp-consent.d.ts

@@ -14,8 +14,8 @@ declare module 'signature_pad' {
 
     isEmpty(): boolean;
 
-    on(event: string, callback: Function): void;
+    on(event: string, callback: (...args: unknown[]) => void): void;
 
-    off(event: string, callback: Function): void;
+    off(event: string, callback: (...args: unknown[]) => void): void;
   }
 }

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

@@ -2,6 +2,7 @@ import SmartCamera from '../../domain/camera/src/SmartCamera';
 import styles from '../../styles/src/styles';
 import '../attribution/PoweredBySmileId';
 import '../navigation/src';
+import { t, getDirection } from '../../domain/localisation';
 
 function templateString() {
   return `
@@ -30,7 +31,7 @@ function templateString() {
             text-align: center;
         }
     </style>
-    <div class='camera-permission-screen flow center'>
+    <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>
         <div class='flow center'>
           <p class='color-red | center' id='error'>
@@ -69,10 +70,10 @@ function templateString() {
                 </clipPath>
                 </defs>
             </svg>
-            <p class='text-2xl font-bold'>We need access to your camera so that we can capture your details.</p>
+            <p class='text-2xl font-bold'>${t('camera.permission.description')}</p>
             <div class='flow action-buttons'>
                 <button data-variant='solid full-width' class='button' type='button' id='request-camera-access'>
-                  Request Camera Access
+                  ${t('camera.permission.requestButton')}
                 </button>
                 ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
             </div>
@@ -130,6 +131,10 @@ class CameraPermission extends HTMLElement {
   get themeColor() {
     return this.getAttribute('theme-color') || '#001096';
   }
+
+  get direction() {
+    return this.getAttribute('dir') || getDirection() || 'ltr';
+  }
 }
 
 if (window.customElements && !window.customElements.get('camera-permission')) {

package/lib/components/combobox/src/Combobox.js

@@ -1,3 +1,5 @@
+import { t } from '../../../domain/localisation';
+
 function generateId(prefix) {
   const id = [...Array(30)].map(() => Math.random().toString(36)[3]).join('');
   return `${prefix}-${id}`;
@@ -111,7 +113,7 @@ class ComboboxTrigger extends HTMLElement {
             this.disabled ? ' disabled ' : ''
           }type="text" placeholder="${this.label}" />
           <button ${this.disabled ? 'disabled ' : ''}tabindex='-1' type='button'>
-            <span class="visually-hidden">Toggle</span>
+            <span class="visually-hidden">${t('common.toggle')}</span>
           </button>
         </div>
       `
@@ -336,7 +338,7 @@ class ComboboxListbox extends HTMLElement {
   get emptyState() {
     return `
       <p id='empty-state' style="text-align: center;">
-        ${this.emptyLabel || 'No items'}
+        ${this.emptyLabel || t('combobox.noItems')}
       </p>
     `;
   }

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

@@ -1,6 +1,7 @@
 import { IMAGE_TYPE } from '../../../domain/constants/src/Constants';
 import styles from '../../../styles/src/styles';
 import SmartCamera from '../../../domain/camera/src/SmartCamera';
+import { t } from '../../../domain/localisation';
 
 import './document-capture';
 import './document-capture-review';
@@ -56,13 +57,13 @@ class DocumentCaptureScreens extends HTMLElement {
       ${this.hideAttribution}
       ></document-capture-instructions>
       <document-capture id='document-capture-front' side-of-id='Front'
-      ${this.title} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'} ${this.hideAttribution}
+      ${this.title || `title='${t('document.title.front')}'`} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'} ${this.hideAttribution}
       ${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'
+      <document-capture-instructions id='document-capture-instructions-back' side-of-id='Back' title='${t('document.title.back')}'
        ${this.documentCaptureModes} ${this.showNavigation} theme-color='${this.themeColor}' ${this.hideAttribution} hidden
        ></document-capture-instructions>
-      <document-capture id='document-capture-back' side-of-id='Back' ${this.title} ${this.showNavigation}
+      <document-capture id='document-capture-back' side-of-id='Back' ${this.title || `title='${t('document.title.back')}'`}  ${this.showNavigation}
       ${this.documentCaptureModes} theme-color='${this.themeColor}' ${this.hideAttribution}
       hidden 
       ></document-capture>

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

@@ -1,12 +1,18 @@
 import './index';
+import { setCurrentLocale } from '../../../domain/localisation';
 
 const meta = {
   args: {
     'hide-attribution': false,
+    language: 'en',
     'theme-color': '#001096',
   },
   argTypes: {
     'hide-attribution': { control: 'boolean' },
+    language: {
+      control: { type: 'select' },
+      options: ['en', 'ar'],
+    },
     'theme-color': { control: 'color' },
   },
   component: 'document-capture-screens',
@@ -15,43 +21,61 @@ const meta = {
 export default meta;
 
 export const DocumentCapture = {
-  render: (args) => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
         <document-capture-screens theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </document-capture-screens>
-    `,
+    `;
+  },
 };
 
 export const DocumentCaptureHiddenInstructions = {
-  render: (args) => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
         <document-capture-screens hide-instructions theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </document-capture-screens>
-    `,
+    `;
+  },
 };
 
 export const DocumentCaptureHideBackOfId = {
-  render: (args) => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
         <document-capture-screens hide-back-of-id theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </document-capture-screens>
-    `,
+    `;
+  },
 };
 
 export const DocumentCaptureAllowAttributes = {
-  render: (args) => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
         <document-capture-screens document-capture-screens-modes='camera,upload' theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </document-capture-screens>
-    `,
+    `;
+  },
 };
 
 export const DocumentCaptureHideInstructionNBackOfId = {
-  render: (args) => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
         <document-capture-screens hide-back-of-id hide-instructions theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </document-capture-screens>
-    `,
+    `;
+  },
 };
 
 export const DocumentCapturePortraitMode = {
-  render: () => `
-        <document-capture-screens hide-back-of-id hide-instructions document-type="GREEN_BOOK">
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
+        <document-capture-screens hide-back-of-id hide-instructions theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''} document-type="GREEN_BOOK">
         </document-capture-screens>
-    `,
+    `;
+  },
 };

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

@@ -1,6 +1,8 @@
 import SmartCamera from '../../../../domain/camera/src/SmartCamera';
 import styles from '../../../../styles/src/styles';
 import '../../../navigation/src';
+import { t, getDirection } from '../../../../domain/localisation';
+import { JPEG_QUALITY } from '../../../../domain/constants/src/Constants';
 
 function hasMoreThanNColors(data, n = 16) {
   const colors = new Set();
@@ -47,7 +49,7 @@ function templateString() {
         overflow: visible;
         margin: 0 auto;
       }
-      
+
       @media (max-width: 600px) {
         .section {
           width: 99%;
@@ -80,7 +82,7 @@ function templateString() {
           -webkit-tap-highlight-color: transparent;
           content: normal;
         }
-      
+
         .id-video {
           width: 99%;
           text-align: center;
@@ -111,7 +113,7 @@ function templateString() {
         box-sizing: border-box;
         inset: 0px;
       }
-      
+
       .video-overlay .inner-border {
         position: absolute;
         border-width: 0.25rem;
@@ -127,7 +129,7 @@ function templateString() {
         border-style: solid;
         border-radius: 0.25rem;
       }
-      
+
       .description {
         align-self: center;
         padding-bottom: 1.75rem;
@@ -141,7 +143,7 @@ function templateString() {
       .id-side {
         padding-bottom: 0.5rem;
       }
-      
+
       .circle-progress {
         display: flex;
         flex-direction: column;
@@ -161,12 +163,12 @@ function templateString() {
       }
   </style>
   ${styles(this.themeColor)}
-  <div id='document-capture-screen' class='flow center flex-column'>
+  <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>
     <h2 class='text-base font-bold title-color'>${this.documentName}</h2>
     <div class="circle-progress" id="loader">
         ${this.cameraError ? '' : '<p class="spinner"></p>'}
-        ${this.cameraError ? `<p style="--flow-space: 4rem" class='color-red | center'>${this.cameraError}</p>` : '<p style="--flow-space: 4rem">Checking permissions</p>'}
+        ${this.cameraError ? `<p style="--flow-space: 4rem" class='color-red | center'>${this.cameraError}</p>` : `<p style="--flow-space: 4rem">${t('document.capture.checkingPermissions')}</p>`}
     </div>
     <div class='section | flow ${this.isPortraitCaptureView ? 'portrait' : 'landscape'}' ${this.cameraError ? 'hidden' : ''}>
       <div class='id-video-container'>
@@ -174,13 +176,13 @@ function templateString() {
         </div>
         <div class='video-footer sticky'>
           <h2 class='text-base font-bold title-color reset-margin-block id-side'>${this.title}</h2>
-          <h4 class='text-base font-normal title-color description reset-margin-block'>Make sure all corners are visible and there is no glare.</h4>
+          <h4 class='text-base font-normal title-color description reset-margin-block'>${t('document.capture.instructionText')}</h4>
           <div class='actions' hidden>
             <button id='capture-id-image' class='button icon-btn | center' type='button'>
               <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70" fill="none" aria-hidden="true" focusable="false">
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M35 70C54.33 70 70 54.33 70 35C70 15.67 54.33 0 35 0C15.67 0 0 15.67 0 35C0 54.33 15.67 70 35 70ZM61 35C61 49.3594 49.3594 61 35 61C20.6406 61 9 49.3594 9 35C9 20.6406 20.6406 9 35 9C49.3594 9 61 20.6406 61 35ZM65 35C65 51.5685 51.5685 65 35 65C18.4315 65 5 51.5685 5 35C5 18.4315 18.4315 5 35 5C51.5685 5 65 18.4315 65 35Z" fill="${this.themeColor}"/>
               </svg>
-              <span class='visually-hidden'>Capture Document</span>
+              <span class='visually-hidden'>${t('document.capture.captureButton')}</span>
             </button>
           </div>
           ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
@@ -261,8 +263,8 @@ class DocumentCapture extends HTMLElement {
 
       this.updatePortraitId(canvas, video, 1, 1);
       this.updatePortraitId(previewCanvas, video);
-      const image = canvas.toDataURL('image/jpeg');
-      const previewImage = previewCanvas.toDataURL('image/jpeg');
+      const image = canvas.toDataURL('image/jpeg', JPEG_QUALITY);
+      const previewImage = previewCanvas.toDataURL('image/jpeg', JPEG_QUALITY);
       return {
         image,
         originalHeight: canvas.height,
@@ -294,9 +296,9 @@ class DocumentCapture extends HTMLElement {
       this._drawLandscapeImage(canvas, video, 1, 1);
       this._drawLandscapeImage(previewCanvas, video);
     }
-    const image = canvas.toDataURL('image/jpeg');
+    const image = canvas.toDataURL('image/jpeg', JPEG_QUALITY);
 
-    const previewImage = previewCanvas.toDataURL('image/jpeg');
+    const previewImage = previewCanvas.toDataURL('image/jpeg', JPEG_QUALITY);
     return {
       image,
       originalHeight: canvas.height,
@@ -698,12 +700,16 @@ class DocumentCapture extends HTMLElement {
     return !this.isFrontOfId;
   }
 
+  get direction() {
+    return this.getAttribute('dir') || getDirection() || 'ltr';
+  }
+
   get documentType() {
     return this.getAttribute('document-type') || '';
   }
 
   get documentName() {
-    return this.getAttribute('document-name') || 'Document';
+    return this.getAttribute('document-name') || t('document.name.default');
   }
 
   get isPortraitCaptureView() {

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

@@ -1,15 +1,23 @@
 import SmartCamera from '../../../../domain/camera/src/SmartCamera';
+import { setCurrentLocale } from '../../../../domain/localisation';
 import './index';
 
 const meta = {
   args: {
+    language: 'en',
     'theme-color': '#001096',
   },
   argTypes: {
+    language: {
+      control: { type: 'select' },
+      options: ['en', 'ar'],
+    },
     'theme-color': { control: 'color' },
   },
   component: 'document-capture',
-  render: (args) => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
     <document-capture
         show-navigation
         document-capture-modes="camera,upload"
@@ -19,7 +27,8 @@ const meta = {
         theme-color='${args['theme-color']}'
     >
     </document-capture>
-`,
+`;
+  },
 };
 
 export default meta;