@smileid/web-components 2.0.1 → 10.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/dist/DocumentCaptureScreens-Dwl7UqVH.js +1534 -0
  2. package/dist/DocumentCaptureScreens-Dwl7UqVH.js.map +1 -0
  3. package/dist/EndUserConsent-C5hZdJzH.js +715 -0
  4. package/dist/EndUserConsent-C5hZdJzH.js.map +1 -0
  5. package/dist/Navigation-juBE4qOw.js +136 -0
  6. package/dist/Navigation-juBE4qOw.js.map +1 -0
  7. package/dist/PoweredBySmileId-CxbaihMu.js +33 -0
  8. package/dist/PoweredBySmileId-CxbaihMu.js.map +1 -0
  9. package/dist/SelfieCaptureScreens-CQc251hz.js +7618 -0
  10. package/dist/SelfieCaptureScreens-CQc251hz.js.map +1 -0
  11. package/dist/SignaturePad-C7MtmT8m.js +324 -0
  12. package/dist/SignaturePad-C7MtmT8m.js.map +1 -0
  13. package/dist/TotpConsent-CQU5jQi4.js +730 -0
  14. package/dist/TotpConsent-CQU5jQi4.js.map +1 -0
  15. package/dist/combobox.js +300 -0
  16. package/dist/combobox.js.map +1 -0
  17. package/dist/document.js +5 -0
  18. package/dist/document.js.map +1 -0
  19. package/dist/end-user-consent.js +5 -0
  20. package/dist/end-user-consent.js.map +1 -0
  21. package/dist/main.js +22 -0
  22. package/dist/main.js.map +1 -0
  23. package/dist/navigation.js +5 -0
  24. package/dist/navigation.js.map +1 -0
  25. package/dist/package-Oi2Yil3b.js +105 -0
  26. package/dist/package-Oi2Yil3b.js.map +1 -0
  27. package/dist/selfie.js +5 -0
  28. package/dist/selfie.js.map +1 -0
  29. package/dist/signature-pad.js +5 -0
  30. package/dist/signature-pad.js.map +1 -0
  31. package/dist/smart-camera-web.js +303 -0
  32. package/dist/smart-camera-web.js.map +1 -0
  33. package/dist/styles-BUWNxWeQ.js +406 -0
  34. package/dist/styles-BUWNxWeQ.js.map +1 -0
  35. package/dist/totp-consent.js +5 -0
  36. package/dist/totp-consent.js.map +1 -0
  37. package/dist/types/combobox.d.ts +21 -0
  38. package/dist/types/document.d.ts +21 -0
  39. package/dist/types/end-user-consent.d.ts +21 -0
  40. package/dist/types/main.d.ts +331 -0
  41. package/dist/types/navigation.d.ts +21 -0
  42. package/dist/types/selfie.d.ts +21 -0
  43. package/dist/types/signature-pad.d.ts +21 -0
  44. package/dist/types/smart-camera-web.d.ts +21 -0
  45. package/dist/types/totp-consent.d.ts +21 -0
  46. package/{src → lib}/components/README.md +14 -14
  47. package/{src → lib}/components/attribution/PoweredBySmileId.js +42 -42
  48. package/{src → lib}/components/camera-permission/CameraPermission.js +140 -140
  49. package/{src → lib}/components/camera-permission/CameraPermission.stories.js +27 -27
  50. package/{src → lib}/components/combobox/src/Combobox.js +589 -589
  51. package/{src → lib}/components/combobox/src/index.js +1 -1
  52. package/{src → lib}/components/document/src/DocumentCaptureScreens.js +409 -409
  53. package/{src → lib}/components/document/src/DocumentCaptureScreens.stories.js +57 -57
  54. package/{src → lib}/components/document/src/README.md +111 -111
  55. package/{src → lib}/components/document/src/document-capture/DocumentCapture.js +760 -760
  56. package/{src → lib}/components/document/src/document-capture/DocumentCapture.stories.js +78 -78
  57. package/{src → lib}/components/document/src/document-capture/README.md +90 -90
  58. package/{src → lib}/components/document/src/document-capture/index.js +3 -3
  59. package/{src → lib}/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js +499 -499
  60. package/{src → lib}/components/document/src/document-capture-instructions/DocumentCaptureInstructions.stories.js +24 -24
  61. package/{src → lib}/components/document/src/document-capture-instructions/README.md +56 -56
  62. package/{src → lib}/components/document/src/document-capture-instructions/index.js +3 -3
  63. package/{src → lib}/components/document/src/document-capture-review/DocumentCaptureReview.js +362 -362
  64. package/{src → lib}/components/document/src/document-capture-review/DocumentCaptureReview.stories.js +24 -24
  65. package/{src → lib}/components/document/src/document-capture-review/README.md +79 -79
  66. package/{src → lib}/components/document/src/document-capture-review/index.js +3 -3
  67. package/{src → lib}/components/document/src/index.js +3 -3
  68. package/{src → lib}/components/end-user-consent/src/EndUserConsent.js +795 -795
  69. package/{src → lib}/components/end-user-consent/src/EndUserConsent.stories.js +29 -29
  70. package/{src → lib}/components/end-user-consent/src/index.js +4 -4
  71. package/{src → lib}/components/navigation/src/Navigation.js +171 -171
  72. package/{src → lib}/components/navigation/src/Navigation.stories.js +24 -24
  73. package/{src → lib}/components/navigation/src/index.js +3 -3
  74. package/{src → lib}/components/selfie/README.md +225 -225
  75. package/{src → lib}/components/selfie/src/SelfieCaptureScreens.js +433 -282
  76. package/{src → lib}/components/selfie/src/SelfieCaptureScreens.stories.js +29 -29
  77. package/{src → lib}/components/selfie/src/index.js +3 -5
  78. package/{src → lib}/components/selfie/src/selfie-capture/SelfieCapture.js +1041 -1010
  79. package/{src → lib}/components/selfie/src/selfie-capture/SelfieCapture.stories.js +36 -36
  80. package/{src → lib}/components/selfie/src/selfie-capture/index.js +3 -3
  81. package/{src → lib}/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js +657 -648
  82. package/{src → lib}/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.stories.js +23 -23
  83. package/{src → lib}/components/selfie/src/selfie-capture-instructions/index.js +3 -3
  84. package/{src → lib}/components/selfie/src/selfie-capture-review/SelfieCaptureReview.js +340 -347
  85. package/{src → lib}/components/selfie/src/selfie-capture-review/SelfieCaptureReview.stories.js +24 -24
  86. package/{src → lib}/components/selfie/src/selfie-capture-review/index.js +3 -3
  87. package/lib/components/selfie/src/selfie-capture-wrapper/SelfieCaptureWrapper.tsx +227 -0
  88. package/lib/components/selfie/src/selfie-capture-wrapper/index.ts +1 -0
  89. package/lib/components/selfie/src/smartselfie-capture/OvalProgress.tsx +81 -0
  90. package/lib/components/selfie/src/smartselfie-capture/SmartSelfieCapture.tsx +224 -0
  91. package/lib/components/selfie/src/smartselfie-capture/components/AlertDisplay.tsx +34 -0
  92. package/lib/components/selfie/src/smartselfie-capture/components/CameraPreview.tsx +97 -0
  93. package/lib/components/selfie/src/smartselfie-capture/components/CaptureControls.tsx +74 -0
  94. package/lib/components/selfie/src/smartselfie-capture/components/index.ts +3 -0
  95. package/lib/components/selfie/src/smartselfie-capture/constants.ts +23 -0
  96. package/lib/components/selfie/src/smartselfie-capture/hooks/index.ts +2 -0
  97. package/lib/components/selfie/src/smartselfie-capture/hooks/useCamera.ts +94 -0
  98. package/lib/components/selfie/src/smartselfie-capture/hooks/useFaceCapture.ts +558 -0
  99. package/lib/components/selfie/src/smartselfie-capture/index.ts +1 -0
  100. package/lib/components/selfie/src/smartselfie-capture/utils/alertMessages.ts +12 -0
  101. package/lib/components/selfie/src/smartselfie-capture/utils/canvas.ts +105 -0
  102. package/lib/components/selfie/src/smartselfie-capture/utils/faceDetection.ts +129 -0
  103. package/lib/components/selfie/src/smartselfie-capture/utils/imageCapture.ts +64 -0
  104. package/lib/components/selfie/src/smartselfie-capture/utils/index.ts +4 -0
  105. package/lib/components/selfie/src/smartselfie-capture/utils/mediapipeManager.ts +60 -0
  106. package/{src → lib}/components/signature-pad/package-lock.json +3009 -3009
  107. package/{src → lib}/components/signature-pad/package.json +30 -30
  108. package/{src → lib}/components/signature-pad/src/SignaturePad.js +484 -484
  109. package/{src → lib}/components/signature-pad/src/SignaturePad.stories.js +32 -32
  110. package/{src → lib}/components/signature-pad/src/index.js +3 -3
  111. package/{src → lib}/components/smart-camera-web/src/README.md +206 -207
  112. package/{src → lib}/components/smart-camera-web/src/SmartCameraWeb.js +299 -299
  113. package/{src → lib}/components/smart-camera-web/src/SmartCameraWeb.stories.js +57 -57
  114. package/{src → lib}/components/totp-consent/src/TotpConsent.js +949 -949
  115. package/{src → lib}/components/totp-consent/src/index.js +4 -4
  116. package/{src → lib}/domain/camera/src/README.md +38 -38
  117. package/{src → lib}/domain/camera/src/SmartCamera.js +109 -109
  118. package/{src → lib}/domain/constants/src/Constants.js +27 -27
  119. package/{src → lib}/domain/file-upload/README.md +35 -35
  120. package/{src → lib}/domain/file-upload/src/SmartFileUpload.js +65 -65
  121. package/{src → lib}/styles/README.md +3 -3
  122. package/{src → lib}/styles/src/styles.js +359 -359
  123. package/{src → lib}/styles/src/typography.js +52 -52
  124. package/package.json +109 -58
  125. package/src/index.js +0 -5
@@ -1,57 +1,57 @@
1
- import './index';
2
-
3
- const meta = {
4
- args: {
5
- 'hide-attribution': false,
6
- 'theme-color': '#001096',
7
- },
8
- argTypes: {
9
- 'hide-attribution': { control: 'boolean' },
10
- 'theme-color': { control: 'color' },
11
- },
12
- component: 'document-capture-screens',
13
- };
14
-
15
- export default meta;
16
-
17
- export const DocumentCapture = {
18
- render: (args) => `
19
- <document-capture-screens theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
20
- </document-capture-screens>
21
- `,
22
- };
23
-
24
- export const DocumentCaptureHiddenInstructions = {
25
- render: (args) => `
26
- <document-capture-screens hide-instructions theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
27
- </document-capture-screens>
28
- `,
29
- };
30
-
31
- export const DocumentCaptureHideBackOfId = {
32
- render: (args) => `
33
- <document-capture-screens hide-back-of-id theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
34
- </document-capture-screens>
35
- `,
36
- };
37
-
38
- export const DocumentCaptureAllowAttributes = {
39
- render: (args) => `
40
- <document-capture-screens document-capture-screens-modes='camera,upload' theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
41
- </document-capture-screens>
42
- `,
43
- };
44
-
45
- export const DocumentCaptureHideInstructionNBackOfId = {
46
- render: (args) => `
47
- <document-capture-screens hide-back-of-id hide-instructions theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
48
- </document-capture-screens>
49
- `,
50
- };
51
-
52
- export const DocumentCapturePortraitMode = {
53
- render: () => `
54
- <document-capture-screens hide-back-of-id hide-instructions document-type="GREEN_BOOK">
55
- </document-capture-screens>
56
- `,
57
- };
1
+ import './index';
2
+
3
+ const meta = {
4
+ args: {
5
+ 'hide-attribution': false,
6
+ 'theme-color': '#001096',
7
+ },
8
+ argTypes: {
9
+ 'hide-attribution': { control: 'boolean' },
10
+ 'theme-color': { control: 'color' },
11
+ },
12
+ component: 'document-capture-screens',
13
+ };
14
+
15
+ export default meta;
16
+
17
+ export const DocumentCapture = {
18
+ render: (args) => `
19
+ <document-capture-screens theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
20
+ </document-capture-screens>
21
+ `,
22
+ };
23
+
24
+ export const DocumentCaptureHiddenInstructions = {
25
+ render: (args) => `
26
+ <document-capture-screens hide-instructions theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
27
+ </document-capture-screens>
28
+ `,
29
+ };
30
+
31
+ export const DocumentCaptureHideBackOfId = {
32
+ render: (args) => `
33
+ <document-capture-screens hide-back-of-id theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
34
+ </document-capture-screens>
35
+ `,
36
+ };
37
+
38
+ export const DocumentCaptureAllowAttributes = {
39
+ render: (args) => `
40
+ <document-capture-screens document-capture-screens-modes='camera,upload' theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
41
+ </document-capture-screens>
42
+ `,
43
+ };
44
+
45
+ export const DocumentCaptureHideInstructionNBackOfId = {
46
+ render: (args) => `
47
+ <document-capture-screens hide-back-of-id hide-instructions theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
48
+ </document-capture-screens>
49
+ `,
50
+ };
51
+
52
+ export const DocumentCapturePortraitMode = {
53
+ render: () => `
54
+ <document-capture-screens hide-back-of-id hide-instructions document-type="GREEN_BOOK">
55
+ </document-capture-screens>
56
+ `,
57
+ };
@@ -1,111 +1,111 @@
1
- # DocumentCapture Web Component
2
-
3
- ## Overview
4
-
5
- The `DocumentCaptureScreens` is a bespoke web component designed for capturing document images using a camera. It leverages the `SmartCamera` module for camera interaction and permission management.
6
- This component contains the flow for capturing both front and the back of id documents.
7
-
8
- ### Importing the Component
9
-
10
- To utilize the `DocumentCaptureScreens` component within your project, import it into your JavaScript file as follows:
11
-
12
- ```js
13
- import '@smileid/components/document-capture';
14
- ```
15
-
16
- ### Using the Component
17
-
18
- The DocumentCapture component can be embedded in your HTML similarly to any standard HTML element:
19
-
20
- ```html
21
- <document-capture-screens></document-capture-screens>
22
- ```
23
-
24
- ### Attributes
25
-
26
- Customize the component's behavior with the following attributes:
27
-
28
- #### `hide-instructions`
29
-
30
- Omits the capture instructions. This attribute is boolean and does not require a value.
31
-
32
- ```html
33
- <document-capture-screens hide-instructions></document-capture-screens>
34
- ```
35
-
36
- #### `hide-back-of-id`
37
-
38
- Excludes the option to capture the ID's back side. This attribute is boolean.
39
-
40
- ```html
41
- <document-capture-screens hide-back-of-id></document-capture-screens>
42
- ```
43
-
44
- #### `show-navigation`
45
-
46
- Displays navigation controls for the capture process. This attribute is boolean.
47
-
48
- ```html
49
- <document-capture-screens show-navigation></document-capture-screens>
50
- ```
51
-
52
- #### `document-capture-modes`
53
-
54
- Specifies the capture modes, accepting `camera`, `upload`, or both. Value required.
55
-
56
- ```html
57
- <document-capture-screens
58
- document-capture-modes="camera,upload"
59
- ></document-capture-screens>
60
- ```
61
-
62
- ### Permissions
63
-
64
- Camera permissions are essential for functionality. The component requests permissions automatically. Upon granting, `data-camera-ready` is set to true, and `data-camera-error` is removed. Denied permissions result in `data-camera-error` being set with an error message.
65
-
66
- For manual permission handling, appropriately set `data-camera-ready` and `data-camera-error`.
67
-
68
- ### Error Handling
69
-
70
- Errors during permission requests or document capture are managed by the component, setting `data-camera-error` with the respective error message.
71
-
72
- ### Event Handlers
73
-
74
- Capture events emit `document-capture-screens.publish`, providing captured images and metadata:
75
-
76
- ```json
77
- {
78
- "detail": {
79
- "images": [{ "image": "base64-encoded image", "image_type_id": "" }],
80
- "meta": {
81
- "version": "library version"
82
- }
83
- }
84
- }
85
- ```
86
-
87
- To handle this event:
88
-
89
- ```js
90
- document
91
- .querySelector('document-capture-screens')
92
- .addEventListener('document-capture-screens.publish', function (event) {
93
- console.log(event.detail);
94
- });
95
- ```
96
-
97
- ### Dependencies
98
-
99
- `DocumentCaptureScreens` relies on the following modules:
100
-
101
- - [document-capture-instructions](./document-capture-instructions/README.md)
102
- - [document-capture](./document-capture/README.md)
103
- - [document-capture-review](./document-capture-review/README.md)
104
- - [SmartCamera](../../../domain/camera/src/README.md)
105
- - [FileUpload](../../../domain/file-upload/README.md)
106
-
107
- These dependencies are automatically imported with the component.
108
-
109
- ### Compatibility
110
-
111
- Designed for modern browsers supporting custom web components, with specific enhancements for multi-camera Samsung devices to prevent blurry image edges. Report compatibility issues with other devices to our support team.
1
+ # DocumentCapture Web Component
2
+
3
+ ## Overview
4
+
5
+ The `DocumentCaptureScreens` is a bespoke web component designed for capturing document images using a camera. It leverages the `SmartCamera` module for camera interaction and permission management.
6
+ This component contains the flow for capturing both front and the back of id documents.
7
+
8
+ ### Importing the Component
9
+
10
+ To utilize the `DocumentCaptureScreens` component within your project, import it into your JavaScript file as follows:
11
+
12
+ ```js
13
+ import '@smileid/components/document-capture';
14
+ ```
15
+
16
+ ### Using the Component
17
+
18
+ The DocumentCapture component can be embedded in your HTML similarly to any standard HTML element:
19
+
20
+ ```html
21
+ <document-capture-screens></document-capture-screens>
22
+ ```
23
+
24
+ ### Attributes
25
+
26
+ Customize the component's behavior with the following attributes:
27
+
28
+ #### `hide-instructions`
29
+
30
+ Omits the capture instructions. This attribute is boolean and does not require a value.
31
+
32
+ ```html
33
+ <document-capture-screens hide-instructions></document-capture-screens>
34
+ ```
35
+
36
+ #### `hide-back-of-id`
37
+
38
+ Excludes the option to capture the ID's back side. This attribute is boolean.
39
+
40
+ ```html
41
+ <document-capture-screens hide-back-of-id></document-capture-screens>
42
+ ```
43
+
44
+ #### `show-navigation`
45
+
46
+ Displays navigation controls for the capture process. This attribute is boolean.
47
+
48
+ ```html
49
+ <document-capture-screens show-navigation></document-capture-screens>
50
+ ```
51
+
52
+ #### `document-capture-modes`
53
+
54
+ Specifies the capture modes, accepting `camera`, `upload`, or both. Value required.
55
+
56
+ ```html
57
+ <document-capture-screens
58
+ document-capture-modes="camera,upload"
59
+ ></document-capture-screens>
60
+ ```
61
+
62
+ ### Permissions
63
+
64
+ Camera permissions are essential for functionality. The component requests permissions automatically. Upon granting, `data-camera-ready` is set to true, and `data-camera-error` is removed. Denied permissions result in `data-camera-error` being set with an error message.
65
+
66
+ For manual permission handling, appropriately set `data-camera-ready` and `data-camera-error`.
67
+
68
+ ### Error Handling
69
+
70
+ Errors during permission requests or document capture are managed by the component, setting `data-camera-error` with the respective error message.
71
+
72
+ ### Event Handlers
73
+
74
+ Capture events emit `document-capture-screens.publish`, providing captured images and metadata:
75
+
76
+ ```json
77
+ {
78
+ "detail": {
79
+ "images": [{ "image": "base64-encoded image", "image_type_id": "" }],
80
+ "meta": {
81
+ "version": "library version"
82
+ }
83
+ }
84
+ }
85
+ ```
86
+
87
+ To handle this event:
88
+
89
+ ```js
90
+ document
91
+ .querySelector('document-capture-screens')
92
+ .addEventListener('document-capture-screens.publish', function (event) {
93
+ console.log(event.detail);
94
+ });
95
+ ```
96
+
97
+ ### Dependencies
98
+
99
+ `DocumentCaptureScreens` relies on the following modules:
100
+
101
+ - [document-capture-instructions](./document-capture-instructions/README.md)
102
+ - [document-capture](./document-capture/README.md)
103
+ - [document-capture-review](./document-capture-review/README.md)
104
+ - [SmartCamera](../../../domain/camera/src/README.md)
105
+ - [FileUpload](../../../domain/file-upload/README.md)
106
+
107
+ These dependencies are automatically imported with the component.
108
+
109
+ ### Compatibility
110
+
111
+ Designed for modern browsers supporting custom web components, with specific enhancements for multi-camera Samsung devices to prevent blurry image edges. Report compatibility issues with other devices to our support team.