@smileid/web-components 1.5.0 → 2.0.0

package/package.json

@@ -1,25 +1,35 @@
 {
   "name": "@smileid/web-components",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "main": "index.js",
   "exports": {
     ".": "./index.js",
-    "./combobox": "./components/combobox/src/index.js",
-    "./document-capture": "./components/document/src/index.js",
-    "./end-user-consent": "./components/end-user-consent/src/index.js",
-    "./navigation": "./components/navigation/src/index.js",
-    "./selfie-capture": "./components/selfie/src/index.js",
-    "./signature-pad": "./components/signature-pad/src/index.js",
-    "./totp-consent": "./components/totp-consent/src/index.js",
-    "./smart-camera-web": "./components/smart-camera-web/src/SmartCameraWeb.js"
+    "./combobox": "./src/components/combobox/src/index.js",
+    "./document-capture": "./src/components/document/src/index.js",
+    "./end-user-consent": "./src/components/end-user-consent/src/index.js",
+    "./navigation": "./src/components/navigation/src/index.js",
+    "./selfie-capture": "./src/components/selfie/src/index.js",
+    "./signature-pad": "./src/components/signature-pad/src/index.js",
+    "./totp-consent": "./src/components/totp-consent/src/index.js",
+    "./smart-camera-web": "./src/components/smart-camera-web/src/SmartCameraWeb.js"
   },
+  "files": [
+    "./src/components/",
+    "./src/domain/",
+    "./src/styles/",
+    "./README.md",
+    "index.js",
+    "package.json"
+  ],
   "scripts": {
-    "build": "cross-env NODE_ENV=development node esbuild.js",
+    "build": "cross-env NODE_ENV=production node esbuild.js",
+    "build:dev": "cross-env NODE_ENV=development node esbuild.js",
     "clean": "rm -rf build dist",
+    "prepublishOnly": "npm run build",
     "lint:fix": "eslint . --ext .js --fix",
     "lint:html": "npx prettier --write $(git ls-files '*.html')",
     "lint": "eslint . --ext .js",
-    "start": "npm run build && npx serve -p 8000 build",
+    "start": "npm run build:dev && npx serve -p 8000 dist",
     "test": "npx cypress run"
   },
   "description": "A collection of Web Components used by SmileID",

package/{components → src/components}/combobox/src/Combobox.js

@@ -576,7 +576,10 @@ const Trigger = ComboboxTrigger;
 const List = ComboboxListbox;
 const Option = ComboboxOption;
 
-if ('customElements' in window) {
+if (
+  'customElements' in window &&
+  !window.customElements.get('smileid-combobox')
+) {
   window.customElements.define('smileid-combobox', Root);
   window.customElements.define('smileid-combobox-trigger', Trigger);
   window.customElements.define('smileid-combobox-listbox', List);

package/{components → src/components}/document/src/DocumentCaptureScreens.js

@@ -5,7 +5,7 @@ import SmartCamera from '../../../domain/camera/src/SmartCamera';
 import './document-capture';
 import './document-capture-review';
 import './document-capture-instructions';
-import packageJson from '../../../package.json';
+import packageJson from '../../../../package.json';
 
 const COMPONENTS_VERSION = packageJson.version;
 

package/{components → src/components}/end-user-consent/src/EndUserConsent.js

@@ -782,7 +782,10 @@ class EndUserConsent extends HTMLElement {
   }
 }
 
-if ('customElements' in window) {
+if (
+  'customElements' in window &&
+  !window.customElements.get('end-user-consent')
+) {
   window.customElements.define('end-user-consent', EndUserConsent);
 }
 

package/{components → src/components}/navigation/src/Navigation.js

@@ -161,7 +161,10 @@ button[data-type="icon"] {
   }
 }
 
-if ('customElements' in window) {
+if (
+  'customElements' in window &&
+  !window.customElements.get('smileid-navigation')
+) {
   window.customElements.define('smileid-navigation', Navigation);
 }
 

package/{components → src/components}/selfie/src/SelfieCaptureScreens.js

@@ -3,7 +3,7 @@ import './selfie-capture-instructions';
 import './selfie-capture-review';
 import SmartCamera from '../../../domain/camera/src/SmartCamera';
 import styles from '../../../styles/src/styles';
-import packageJson from '../../../package.json';
+import packageJson from '../../../../package.json';
 
 const COMPONENTS_VERSION = packageJson.version;
 
@@ -126,11 +126,14 @@ class SelfieCaptureScreens extends HTMLElement {
     );
 
     this.selfieCapture.addEventListener('selfie-capture.cancelled', () => {
+      this.selfieCapture.reset();
+      SmartCamera.stopMedia();
       if (this.hideInstructions) {
-        this.dispatchEvent(new CustomEvent('selfie-capture-screens.cancelled'));
-      } else {
-        this.setActiveScreen(this.selfieInstruction);
+        this.handleBackEvents();
+        return;
       }
+
+      this.setActiveScreen(this.selfieInstruction);
     });
 
     this.selfieCapture.addEventListener('selfie-capture.publish', (event) => {
@@ -143,17 +146,6 @@ class SelfieCaptureScreens extends HTMLElement {
       this.setActiveScreen(this.selfieReview);
     });
 
-    this.selfieCapture.addEventListener('selfie-capture.cancelled', () => {
-      this.selfieCapture.reset();
-      SmartCamera.stopMedia();
-      if (this.hideInstructions) {
-        this.handleBackEvents();
-        return;
-      }
-
-      this.setActiveScreen(this.selfieInstruction);
-    });
-
     this.selfieReview.addEventListener(
       'selfie-capture-review.rejected',
       async () => {

package/{components → src/components}/selfie/src/selfie-capture/SelfieCapture.js

@@ -1,7 +1,7 @@
 import { IMAGE_TYPE } from '../../../../domain/constants/src/Constants';
 import SmartCamera from '../../../../domain/camera/src/SmartCamera';
 import styles from '../../../../styles/src/styles';
-import packageJson from '../../../../package.json';
+import packageJson from '../../../../../package.json';
 import '../../../navigation/src';
 
 const COMPONENTS_VERSION = packageJson.version;
@@ -518,7 +518,6 @@ function templateString() {
 
     <div className="error">
       ${this.cameraError ? `<p class="color-red">${this.cameraError}</p>` : ''}
-      ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
     </div>
     <div class='section | flow' ${this.cameraError ? 'hidden' : ''}>
       <div class='video-container'>
@@ -706,9 +705,25 @@ class SelfieCaptureScreen extends HTMLElement {
 
   _capturePOLPhoto() {
     const canvas = document.createElement('canvas');
-    canvas.width = 240;
-    canvas.height =
-      (canvas.width * this._video.videoHeight) / this._video.videoWidth;
+    // Determine orientation of the video
+    const isPortrait = this._video.videoHeight > this._video.videoWidth;
+
+    // Set dimensions based on orientation, ensuring minimums
+    if (isPortrait) {
+      // Portrait orientation (taller than wide)
+      canvas.width = 240;
+      canvas.height = Math.max(
+        320,
+        (canvas.width * this._video.videoHeight) / this._video.videoWidth,
+      );
+    } else {
+      // Landscape orientation (wider than tall)
+      canvas.height = 240;
+      canvas.width = Math.max(
+        320,
+        (canvas.height * this._video.videoWidth) / this._video.videoHeight,
+      );
+    }
 
     // NOTE: we do not want to test POL images
     this._drawImage(canvas, false);
@@ -718,9 +733,25 @@ class SelfieCaptureScreen extends HTMLElement {
 
   _captureReferencePhoto() {
     const canvas = document.createElement('canvas');
-    canvas.width = 480;
-    canvas.height =
-      (canvas.width * this._video.videoHeight) / this._video.videoWidth;
+    // Determine orientation of the video
+    const isPortrait = this._video.videoHeight > this._video.videoWidth;
+
+    // Set dimensions based on orientation, ensuring minimums
+    if (isPortrait) {
+      // Portrait orientation (taller than wide)
+      canvas.width = 480;
+      canvas.height = Math.max(
+        640,
+        (canvas.width * this._video.videoHeight) / this._video.videoWidth,
+      );
+    } else {
+      // Landscape orientation (wider than tall)
+      canvas.height = 480;
+      canvas.width = Math.max(
+        640,
+        (canvas.height * this._video.videoWidth) / this._video.videoHeight,
+      );
+    }
 
     // NOTE: we want to test the image quality of the reference photo
     this._drawImage(canvas, !this.disableImageTests);

package/{components → src/components}/signature-pad/package.json

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

package/{components → src/components}/signature-pad/src/SignaturePad.js

@@ -474,7 +474,10 @@ button:disabled {
   }
 }
 
-if ('customElements' in window) {
+if (
+  'customElements' in window &&
+  !window.customElements.get('smileid-signature-pad')
+) {
   window.customElements.define('smileid-signature-pad', SignaturePad);
 }
 

package/{components → src/components}/smart-camera-web/src/SmartCameraWeb.js

@@ -4,7 +4,7 @@ import SmartCamera from '../../../domain/camera/src/SmartCamera';
 import '../../document/src';
 import '../../selfie/src';
 import '../../camera-permission/CameraPermission';
-import packageJson from '../../../package.json';
+import packageJson from '../../../../package.json';
 
 const COMPONENTS_VERSION = packageJson.version;
 

package/{components → src/components}/totp-consent/src/TotpConsent.js

@@ -939,7 +939,7 @@ class TotpConsent extends HTMLElement {
   }
 }
 
-if ('customElements' in window) {
+if ('customElements' in window && !window.customElements.get('totp-consent')) {
   window.customElements.define('totp-consent', TotpConsent);
 }
 

package/.eslintrc.cjs

@@ -1,72 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    commonjs: true,
-    'cypress/globals': true,
-    es2021: true,
-  },
-  extends: 'airbnb-base',
-  ignorePatterns: [
-    'build/',
-    'instrumentation',
-    'dist/',
-    'libs/',
-    'node_modules/',
-  ],
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: ['.eslintrc.{js,cjs}'],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  plugins: ['cypress'],
-  rules: {
-    'class-methods-use-this': 'off',
-    'function-paren-newline': 'off',
-    'implicit-arrow-linebreak': 'off',
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        devDependencies: [
-          'esbuild.js',
-          'cypress.config.js',
-          '**/*{.,_,-}{test,spec}.js', // tests where the extension or filename suffix denotes that it is a test
-        ],
-        optionalDependencies: false,
-      },
-    ],
-    indent: 0,
-    'max-classes-per-file': 'off',
-    'max-len': 'off',
-    'object-curly-newline': 'off',
-    'operator-linebreak': 'off',
-    'no-console': ['error', { allow: ['warn', 'error', 'info'] }],
-    'no-param-reassign': 'off',
-    'no-plusplus': 'off',
-    'no-underscore-dangle': 'off',
-    'no-unused-vars': [
-      'error',
-      { args: 'after-used', ignoreRestSiblings: false, vars: 'all' },
-    ],
-    'prefer-destructuring': [
-      'error',
-      {
-        array: false,
-        object: true,
-      },
-      {
-        enforceForRenamedProperties: false,
-      },
-    ],
-    'sort-keys': 'error',
-  },
-};

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

@@ -1,144 +0,0 @@
-context('SmartCameraWeb', () => {
-  beforeEach(() => {
-    cy.visit('/smart-camera-web-agent-mode');
-  });
-
-  it('should switch from the selfie mode to agent mode"', () => {
-    cy.log('Enable agent mode for tests');
-    cy.get('smart-camera-web')
-      .invoke('attr', 'allow-agent-mode', 'true')
-      .should('have.attr', 'allow-agent-mode', 'true');
-
-    cy.get('smart-camera-web').invoke(
-      'attr',
-      'show-agent-mode-for-tests',
-      'true',
-    );
-    cy.get('smart-camera-web').invoke('attr', 'disable-image-tests', '');
-
-    cy.clock();
-    cy.get('smart-camera-web')
-      .shadow()
-      .find('selfie-capture-instructions')
-      .shadow()
-      .find('#allow')
-      .click();
-
-    cy.get('smart-camera-web')
-      .shadow()
-      .find('selfie-capture')
-      .should('be.visible');
-
-    cy.get('smart-camera-web')
-      .shadow()
-      .find('selfie-capture')
-      .shadow()
-      .should('contain.text', 'Agent Mode On');
-
-    cy.get('smart-camera-web')
-      .shadow()
-      .find('selfie-capture')
-      .shadow()
-      .find('#switch-camera')
-      .click();
-
-    cy.get('smart-camera-web')
-      .shadow()
-      .find('selfie-capture')
-      .shadow()
-      .should('contain.text', 'Agent Mode Off');
-
-    cy.get('smart-camera-web')
-      .shadow()
-      .find('selfie-capture')
-      .shadow()
-      .find('#switch-camera')
-      .click();
-
-    cy.get('smart-camera-web')
-      .shadow()
-      .find('selfie-capture')
-      .shadow()
-      .should('contain.text', 'Agent Mode On');
-
-    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');
-  });
-
-  it('should not show the agent mode switch button"', () => {
-    cy.get('smart-camera-web')
-      .shadow()
-      .find('selfie-capture')
-      .invoke('attr', 'show-agent-mode-for-tests', 'false');
-    cy.get('smart-camera-web').invoke('attr', 'disable-image-tests', '');
-
-    cy.clock();
-    cy.get('smart-camera-web')
-      .shadow()
-      .find('selfie-capture-instructions')
-      .shadow()
-      .find('#allow')
-      .click();
-
-    cy.get('smart-camera-web')
-      .shadow()
-      .find('selfie-capture')
-      .should('be.visible');
-
-    cy.get('smart-camera-web')
-      .shadow()
-      .find('selfie-capture')
-      .shadow()
-      .find('#switch-camera')
-      .should('not.exist');
-
-    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');
-  });
-});