idmission-web-sdk 1.0.309 → 1.0.310
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.
- package/dist/components/video_id/IdVideoCapture.d.ts +3 -0
- package/dist/components/video_id/IdVideoCaptureFlipIdPrompt.d.ts +3 -9
- package/dist/components/video_id/IdVideoCaptureGuides.d.ts +551 -1
- package/dist/sdk2.cjs.development.js +192 -309
- package/dist/sdk2.cjs.development.js.map +1 -1
- package/dist/sdk2.cjs.production.js +1 -1
- package/dist/sdk2.cjs.production.js.map +1 -1
- package/dist/sdk2.esm.js +192 -309
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +192 -309
- package/dist/sdk2.umd.development.js.map +1 -1
- package/dist/sdk2.umd.production.js +1 -1
- package/dist/sdk2.umd.production.js.map +1 -1
- package/dist/stories/Components/{VideoIdCaptureGuideOverlay/IdCardFront.stories.d.ts → VideoIdCaptureGuideOverlay.stories.d.ts} +19 -3
- package/dist/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/stories/Components/VideoIdCaptureGuideOverlay/FlipIdCard.stories.d.ts +0 -34
- package/dist/stories/Components/VideoIdCaptureGuideOverlay/IdCardBack.stories.d.ts +0 -21
package/dist/sdk2.esm.js
CHANGED
|
@@ -14,7 +14,7 @@ import i18n from 'i18next';
|
|
|
14
14
|
import { createPortal } from 'react-dom';
|
|
15
15
|
import SignatureCanvas from 'react-signature-canvas';
|
|
16
16
|
|
|
17
|
-
var webSdkVersion = '1.0.
|
|
17
|
+
var webSdkVersion = '1.0.310';
|
|
18
18
|
|
|
19
19
|
function getPlatform() {
|
|
20
20
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
@@ -149,7 +149,7 @@ function videoDataUrlToB64(url) {
|
|
|
149
149
|
});
|
|
150
150
|
}
|
|
151
151
|
|
|
152
|
-
var PageContainerDiv = styled.div(templateObject_1$
|
|
152
|
+
var PageContainerDiv = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", "\n\n ", "\n\n &.flex {\n display: flex;\n }\n\n &.padded {\n box-sizing: border-box;\n padding: 16px 24px;\n }\n"], ["\n ", "\n\n ", "\n\n &.flex {\n display: flex;\n }\n\n &.padded {\n box-sizing: border-box;\n padding: 16px 24px;\n }\n"])), function (props) {
|
|
153
153
|
var _a;
|
|
154
154
|
return props.theme.isFullscreen === false ? "" : "\n position: fixed;\n top: 0;\n left: 0;\n width: var(--app-width);\n height: calc(\n var(--app-height) - ".concat((_a = props.$heightOffset) !== null && _a !== void 0 ? _a : 0, "px\n );\n overflow-x: hidden;\n overflow-y: auto;\n ");
|
|
155
155
|
}, function (props) {
|
|
@@ -189,9 +189,9 @@ var PageContainer = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
189
189
|
}, dimensionsCalculated && children);
|
|
190
190
|
});
|
|
191
191
|
PageContainer.displayName = 'PageContainer';
|
|
192
|
-
var templateObject_1$
|
|
192
|
+
var templateObject_1$F;
|
|
193
193
|
|
|
194
|
-
var OverlayContainer = styled(PageContainer)(templateObject_1$
|
|
194
|
+
var OverlayContainer = styled(PageContainer)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n background: ", ";\n ", "\n z-index: 10000;\n"], ["\n background: ", ";\n ", "\n z-index: 10000;\n"])), function (props) {
|
|
195
195
|
return props.theme.background ? "".concat(props.theme.background) : "white";
|
|
196
196
|
}, function (props) {
|
|
197
197
|
return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
|
|
@@ -203,8 +203,8 @@ var OverlayInner$2 = styled.div(templateObject_2$r || (templateObject_2$r = __ma
|
|
|
203
203
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
204
204
|
});
|
|
205
205
|
var OverlayImageContainer = styled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n max-width: var(--app-width);\n max-height: var(--app-height);\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"], ["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n max-width: var(--app-width);\n max-height: var(--app-height);\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"])));
|
|
206
|
-
var OverlayImageRow = styled.div(templateObject_4$
|
|
207
|
-
var templateObject_1$
|
|
206
|
+
var OverlayImageRow = styled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100vh - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"], ["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100vh - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"])));
|
|
207
|
+
var templateObject_1$E, templateObject_2$r, templateObject_3$k, templateObject_4$f;
|
|
208
208
|
|
|
209
209
|
var LoaderButton = function LoaderButton(_a) {
|
|
210
210
|
var children = _a.children,
|
|
@@ -262,11 +262,11 @@ var LoaderButton = function LoaderButton(_a) {
|
|
|
262
262
|
className: "ladda-label"
|
|
263
263
|
}, children));
|
|
264
264
|
};
|
|
265
|
-
var StyledButton = styled.button(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
|
|
265
|
+
var StyledButton = styled.button(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n @keyframes ladda-spinner-line-fade {\n 0%,\n 100% {\n opacity: 0.22;\n }\n 1% {\n opacity: 1;\n }\n }\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
|
|
266
266
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
267
267
|
return ((_a = props.theme.buttons) === null || _a === void 0 ? void 0 : _a.style) === 'bootstrap' && "\n border-radius: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n text-transform: none;\n -webkit-appearance: button;\n \n &:not(:disabled),\n &[type='button']:not(:disabled),\n &[type='reset']:not(:disabled),\n &[type='submit']:not(:disabled) {\n cursor: pointer;\n }\n \n &:focus:not(:focus-visible) {\n outline: 0;\n }\n \n --bs-btn-padding-x: 0.75rem;\n --bs-btn-padding-y: 0.375rem;\n --bs-btn-font-family: ;\n --bs-btn-font-size: 1rem;\n --bs-btn-font-weight: 400;\n --bs-btn-line-height: 1.5;\n --bs-btn-color: var(--bs-body-color);\n --bs-btn-bg: transparent;\n --bs-btn-border-width: var(--bs-border-width);\n --bs-btn-border-color: transparent;\n --bs-btn-border-radius: var(--bs-border-radius);\n --bs-btn-hover-border-color: transparent;\n --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),\n 0 1px 1px rgba(0, 0, 0, 0.075);\n --bs-btn-disabled-opacity: 0.65;\n --bs-btn-focus-box-shadow: 0 0 0 0.25rem\n rgba(var(--bs-btn-focus-shadow-rgb), 0.5);\n display: inline-block;\n padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);\n font-family: var(--bs-btn-font-family);\n font-size: var(--bs-btn-font-size);\n font-weight: var(--bs-btn-font-weight);\n line-height: var(--bs-btn-line-height);\n color: var(--bs-btn-color);\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);\n border-radius: var(--bs-btn-border-radius);\n background-color: var(--bs-btn-bg);\n //transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n // border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n \n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n \n &:hover {\n filter: brightness(1.15);\n }\n \n &:focus-visible {\n color: var(--bs-btn-hover-color);\n background-color: var(--bs-btn-hover-bg);\n border-color: var(--bs-btn-hover-border-color);\n outline: 0;\n box-shadow: var(--bs-btn-focus-box-shadow);\n }\n \n &:disabled,\n &.disabled,\n fieldset:disabled & {\n color: var(--bs-btn-disabled-color);\n pointer-events: none;\n background-color: var(--bs-btn-disabled-bg);\n border-color: var(--bs-btn-disabled-border-color);\n opacity: var(--bs-btn-disabled-opacity);\n }\n \n --bs-btn-color: ".concat((_f = (_b = props.$textColor) !== null && _b !== void 0 ? _b : (_e = (_c = props.theme.buttons) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'primary']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : '#fff', ";\n --bs-btn-bg: ").concat((_l = (_g = props.$backgroundColor) !== null && _g !== void 0 ? _g : (_k = (_h = props.theme.buttons) === null || _h === void 0 ? void 0 : _h[(_j = props.$variant) !== null && _j !== void 0 ? _j : 'primary']) === null || _k === void 0 ? void 0 : _k.backgroundColor) !== null && _l !== void 0 ? _l : '#0d6efd', ";\n --bs-btn-border-color: var(--bs-btn-bg);\n --bs-btn-focus-shadow-rgb: 49, 132, 253;\n --bs-btn-active-color: #fff;\n --bs-btn-active-bg: #0a58ca;\n --bs-btn-active-border-color: #0a53be;\n --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --bs-btn-disabled-color: ").concat((_q = (_m = props.$disabledTextColor) !== null && _m !== void 0 ? _m : (_p = (_o = props.theme.buttons) === null || _o === void 0 ? void 0 : _o.loading) === null || _p === void 0 ? void 0 : _p.textColor) !== null && _q !== void 0 ? _q : '#fff', ";\n --bs-btn-disabled-bg: ").concat((_u = (_r = props.$disabledBackgroundColor) !== null && _r !== void 0 ? _r : (_t = (_s = props.theme.buttons) === null || _s === void 0 ? void 0 : _s.loading) === null || _t === void 0 ? void 0 : _t.backgroundColor) !== null && _u !== void 0 ? _u : 'gray', ";\n --bs-btn-disabled-border-color: ").concat((_v = props.$disabledBackgroundColor) !== null && _v !== void 0 ? _v : '#0d6efd', ";\n \n --bs-btn-padding-y: 14px;\n --bs-btn-padding-x: 1rem;\n --bs-btn-font-size: 18px;\n --bs-btn-border-radius: 4px;\n ");
|
|
268
268
|
});
|
|
269
|
-
var templateObject_1$
|
|
269
|
+
var templateObject_1$D;
|
|
270
270
|
|
|
271
271
|
var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
|
|
272
272
|
var accessBlockedImageUrl = _a.accessBlockedImageUrl;
|
|
@@ -903,10 +903,10 @@ var SubmissionProvider = function SubmissionProvider(_a) {
|
|
|
903
903
|
_e.label = 4;
|
|
904
904
|
case 4:
|
|
905
905
|
if (idCaptureVideoIdFrontImage) {
|
|
906
|
-
submissionRequest.customerData.idData.videoIdImageFront = idCaptureVideoIdFrontImage;
|
|
906
|
+
submissionRequest.customerData.idData.videoIdImageFront = dataUrlToBase64Sync(idCaptureVideoIdFrontImage);
|
|
907
907
|
}
|
|
908
908
|
if (idCaptureVideoIdBackImage) {
|
|
909
|
-
submissionRequest.customerData.idData.videoIdImageBack = idCaptureVideoIdBackImage;
|
|
909
|
+
submissionRequest.customerData.idData.videoIdImageBack = dataUrlToBase64Sync(idCaptureVideoIdBackImage);
|
|
910
910
|
}
|
|
911
911
|
attachMetadataToRequest(submissionRequest, {
|
|
912
912
|
selfieCaptureAttempts: selfieCaptureAttempts,
|
|
@@ -1476,7 +1476,7 @@ function getFrameDimensions(frame) {
|
|
|
1476
1476
|
return [frameWidth, frameHeight];
|
|
1477
1477
|
}
|
|
1478
1478
|
|
|
1479
|
-
var InvisibleCanvas = styled.canvas(templateObject_1$
|
|
1479
|
+
var InvisibleCanvas = styled.canvas(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
1480
1480
|
function drawToCanvas(canvas, frame, width, height) {
|
|
1481
1481
|
if (!canvas) return;
|
|
1482
1482
|
var ctx = canvas.getContext('2d');
|
|
@@ -1498,7 +1498,7 @@ function clearCanvas(canvas) {
|
|
|
1498
1498
|
if (!ctx) return;
|
|
1499
1499
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
1500
1500
|
}
|
|
1501
|
-
var templateObject_1$
|
|
1501
|
+
var templateObject_1$C;
|
|
1502
1502
|
|
|
1503
1503
|
function listAvailableCameras(facingMode, requestMicAccess) {
|
|
1504
1504
|
if (requestMicAccess === void 0) {
|
|
@@ -10006,7 +10006,7 @@ var useIdCaptureState = function useIdCaptureState() {
|
|
|
10006
10006
|
return [state, dispatch];
|
|
10007
10007
|
};
|
|
10008
10008
|
|
|
10009
|
-
var DebugStatsPane = styled.span(templateObject_1$
|
|
10009
|
+
var DebugStatsPane = styled.span(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n"], ["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n"])));
|
|
10010
10010
|
var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n position: absolute;\n z-index: 1001;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n ", "\n"], ["\n position: absolute;\n z-index: 1001;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n ", "\n"])), function (_a) {
|
|
10011
10011
|
var $flipX = _a.$flipX;
|
|
10012
10012
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
@@ -10021,7 +10021,7 @@ var ObjectDetectionDebugBox = styled.div(templateObject_3$j || (templateObject_3
|
|
|
10021
10021
|
var $flipX = _a.$flipX;
|
|
10022
10022
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
10023
10023
|
});
|
|
10024
|
-
var FaceDetectionKeypointMarker = styled.div(templateObject_4$
|
|
10024
|
+
var FaceDetectionKeypointMarker = styled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n"], ["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n"])), function (_a) {
|
|
10025
10025
|
var $color = _a.$color;
|
|
10026
10026
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
10027
10027
|
}, function (_a) {
|
|
@@ -10201,7 +10201,7 @@ function SelfieCaptureFaceKeypoint(_a) {
|
|
|
10201
10201
|
}
|
|
10202
10202
|
});
|
|
10203
10203
|
}
|
|
10204
|
-
var templateObject_1$
|
|
10204
|
+
var templateObject_1$B, templateObject_2$q, templateObject_3$j, templateObject_4$e;
|
|
10205
10205
|
|
|
10206
10206
|
var enTranslation = {};
|
|
10207
10207
|
|
|
@@ -10356,7 +10356,7 @@ function useTranslations(verbiage, fallbacks) {
|
|
|
10356
10356
|
}, [fallbacks, i18n.language, t, verbiage]);
|
|
10357
10357
|
}
|
|
10358
10358
|
|
|
10359
|
-
var GuidanceMessageContainerDiv = styled.div(templateObject_1$
|
|
10359
|
+
var GuidanceMessageContainerDiv = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n position: absolute;\n top: calc(", ");\n ", "\n font-weight: bold;\n width: 100%;\n display: flex;\n"], ["\n position: absolute;\n top: calc(", ");\n ", "\n font-weight: bold;\n width: 100%;\n display: flex;\n"])), function (_a) {
|
|
10360
10360
|
var $top = _a.$top;
|
|
10361
10361
|
return $top !== null && $top !== void 0 ? $top : '10vh';
|
|
10362
10362
|
}, function (_a) {
|
|
@@ -10376,7 +10376,7 @@ var GuidanceMessage = styled.div(templateObject_2$p || (templateObject_2$p = __m
|
|
|
10376
10376
|
var _a, _b, _c, _d, _e, _f;
|
|
10377
10377
|
return (_f = (_a = props.$textColor) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : 'black';
|
|
10378
10378
|
});
|
|
10379
|
-
var templateObject_1$
|
|
10379
|
+
var templateObject_1$A, templateObject_2$p;
|
|
10380
10380
|
|
|
10381
10381
|
var IdCapture = function IdCapture(_a) {
|
|
10382
10382
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
@@ -10728,13 +10728,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
10728
10728
|
finished: true
|
|
10729
10729
|
}, verbiage.retryBtnText)));
|
|
10730
10730
|
};
|
|
10731
|
-
var StyledOverlayInner$2 = styled(OverlayInner$2)(templateObject_1$
|
|
10731
|
+
var StyledOverlayInner$2 = styled(OverlayInner$2)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
|
|
10732
10732
|
var StyledOverlayImageContainer$2 = styled(OverlayImageContainer)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
10733
10733
|
var Description$3 = styled.p(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
10734
|
-
var RetryButton = styled(LoaderButton)(templateObject_4$
|
|
10735
|
-
var templateObject_1$
|
|
10734
|
+
var RetryButton = styled(LoaderButton)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
10735
|
+
var templateObject_1$z, templateObject_2$o, templateObject_3$i, templateObject_4$d;
|
|
10736
10736
|
|
|
10737
|
-
var ExitCaptureStyledButton = styled.button(templateObject_1$
|
|
10737
|
+
var ExitCaptureStyledButton = styled.button(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n position: absolute;\n top: 12px;\n right: 12px;\n font-size: 20px;\n width: 32px;\n height: 32px;\n font-family: monospace;\n z-index: 1002;\n border: none;\n border-radius: 4px;\n background: #ccc;\n cursor: pointer;\n padding: 8px;\n box-sizing: border-box;\n display: flex;\n\n &:hover {\n background: #ddd;\n }\n\n & > svg {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n"], ["\n position: absolute;\n top: 12px;\n right: 12px;\n font-size: 20px;\n width: 32px;\n height: 32px;\n font-family: monospace;\n z-index: 1002;\n border: none;\n border-radius: 4px;\n background: #ccc;\n cursor: pointer;\n padding: 8px;\n box-sizing: border-box;\n display: flex;\n\n &:hover {\n background: #ddd;\n }\n\n & > svg {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n"])));
|
|
10738
10738
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
10739
10739
|
var onClick = _a.onClick,
|
|
10740
10740
|
className = _a.className;
|
|
@@ -10778,10 +10778,10 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
|
10778
10778
|
y2: "19.75"
|
|
10779
10779
|
}))));
|
|
10780
10780
|
};
|
|
10781
|
-
var templateObject_1$
|
|
10781
|
+
var templateObject_1$y;
|
|
10782
10782
|
|
|
10783
|
-
var ButtonsRow = styled.div(templateObject_1$
|
|
10784
|
-
var templateObject_1$
|
|
10783
|
+
var ButtonsRow = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n"], ["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n"])));
|
|
10784
|
+
var templateObject_1$x;
|
|
10785
10785
|
|
|
10786
10786
|
function IdCaptureLoadingGraphic(props) {
|
|
10787
10787
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
@@ -11416,7 +11416,7 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
|
|
|
11416
11416
|
}
|
|
11417
11417
|
}, verbiage.continueText))))));
|
|
11418
11418
|
};
|
|
11419
|
-
var OverlayInner$1 = styled.div(templateObject_1$
|
|
11419
|
+
var OverlayInner$1 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"], ["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"])), function (props) {
|
|
11420
11420
|
var _a, _b, _c, _d;
|
|
11421
11421
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : '#ecedf3';
|
|
11422
11422
|
}, function (props) {
|
|
@@ -11430,10 +11430,10 @@ var OverlayHeader$1 = styled.div(templateObject_2$n || (templateObject_2$n = __m
|
|
|
11430
11430
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
11431
11431
|
});
|
|
11432
11432
|
var StyledGuidanceMessage$2 = styled(GuidanceMessage)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
|
|
11433
|
-
var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_4$
|
|
11434
|
-
var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_5$
|
|
11435
|
-
var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_6$
|
|
11436
|
-
var ContinuityCameraCheckbox$1 = styled.input(templateObject_7$
|
|
11433
|
+
var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n padding: 0 0 100px;\n\n & > svg {\n height: 100%;\n }\n"], ["\n padding: 0 0 100px;\n\n & > svg {\n height: 100%;\n }\n"])));
|
|
11434
|
+
var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n position: fixed;\n bottom: 120px;\n width: 100dvw;\n display: flex;\n"], ["\n position: fixed;\n bottom: 120px;\n width: 100dvw;\n display: flex;\n"])));
|
|
11435
|
+
var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
|
|
11436
|
+
var ContinuityCameraCheckbox$1 = styled.input(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
11437
11437
|
var StyledButtonsRow$a = styled(ButtonsRow)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"])), function (props) {
|
|
11438
11438
|
var _a, _b, _c, _d;
|
|
11439
11439
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
|
|
@@ -11468,9 +11468,9 @@ var ContinueButton$1 = styled(LoaderButton)(templateObject_18 || (templateObject
|
|
|
11468
11468
|
var _a, _b, _c, _d, _e, _f;
|
|
11469
11469
|
return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
|
|
11470
11470
|
});
|
|
11471
|
-
var templateObject_1$
|
|
11471
|
+
var templateObject_1$w, templateObject_2$n, templateObject_3$h, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18;
|
|
11472
11472
|
|
|
11473
|
-
var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$
|
|
11473
|
+
var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
|
|
11474
11474
|
var ContinuityCameraCheckbox = styled.input(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
11475
11475
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
11476
11476
|
var _b, _c, _d, _e;
|
|
@@ -11582,7 +11582,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
11582
11582
|
}
|
|
11583
11583
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
11584
11584
|
};
|
|
11585
|
-
var templateObject_1$
|
|
11585
|
+
var templateObject_1$v, templateObject_2$m;
|
|
11586
11586
|
|
|
11587
11587
|
var components$1 = {
|
|
11588
11588
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -11625,7 +11625,7 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
|
|
|
11625
11625
|
});
|
|
11626
11626
|
};
|
|
11627
11627
|
|
|
11628
|
-
var OverlayInstruction = styled.p(templateObject_1$
|
|
11628
|
+
var OverlayInstruction = styled.p(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n font-size: 18px;\n margin: 30px 0;\n"], ["\n font-size: 18px;\n margin: 30px 0;\n"])));
|
|
11629
11629
|
var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
11630
11630
|
var capturedDocuments = _a.capturedDocuments,
|
|
11631
11631
|
// barcodeResult,
|
|
@@ -11712,15 +11712,15 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
11712
11712
|
};
|
|
11713
11713
|
var Heading$9 = styled.h1(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n margin-bottom: 12px;\n"], ["\n margin-bottom: 12px;\n"])));
|
|
11714
11714
|
var ImagesContainer = styled(OverlayImageContainer)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n overflow-y: auto;\n"], ["\n overflow-y: auto;\n"])));
|
|
11715
|
-
var ImageRow = styled(OverlayImageRow)(templateObject_4$
|
|
11716
|
-
var ImageCol$1 = styled.div(templateObject_5$
|
|
11717
|
-
var ImageHeading = styled.h3(templateObject_6$
|
|
11718
|
-
var CapturedImageWrapper = styled.div(templateObject_7$
|
|
11715
|
+
var ImageRow = styled(OverlayImageRow)(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n flex-direction: column;\n"], ["\n flex-direction: column;\n"])));
|
|
11716
|
+
var ImageCol$1 = styled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n max-height: none !important;\n"], ["\n max-height: none !important;\n"])));
|
|
11717
|
+
var ImageHeading = styled.h3(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n text-align: left;\n margin-top: 24px;\n margin-bottom: 8px;\n font-size: 16px;\n font-weight: normal;\n"], ["\n text-align: left;\n margin-top: 24px;\n margin-bottom: 8px;\n font-size: 16px;\n font-weight: normal;\n"])));
|
|
11718
|
+
var CapturedImageWrapper = styled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n border-radius: 6px;\n padding: 4px;\n background: white;\n display: flex;\n"], ["\n border: 1px solid\n ", ";\n border-radius: 6px;\n padding: 4px;\n background: white;\n display: flex;\n"])), function (props) {
|
|
11719
11719
|
var _a, _b, _c;
|
|
11720
11720
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.success) === null || _b === void 0 ? void 0 : _b.imageBorderColor) !== null && _c !== void 0 ? _c : 'var(--idm-color-primary-400)';
|
|
11721
11721
|
});
|
|
11722
11722
|
var StyledImage = styled(CapturedDocumentImg)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 100%;\n border-radius: 4px;\n"], ["\n width: 100%;\n border-radius: 4px;\n"])));
|
|
11723
|
-
var templateObject_1$
|
|
11723
|
+
var templateObject_1$u, templateObject_2$l, templateObject_3$g, templateObject_4$b, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$2;
|
|
11724
11724
|
|
|
11725
11725
|
var CameraVideoTag = function CameraVideoTag(_a) {
|
|
11726
11726
|
var _b;
|
|
@@ -11751,10 +11751,10 @@ var CameraVideoTag = function CameraVideoTag(_a) {
|
|
|
11751
11751
|
"$isRearFacing": (_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing
|
|
11752
11752
|
});
|
|
11753
11753
|
};
|
|
11754
|
-
var FullscreenVideoTag = styled.video(templateObject_1$
|
|
11754
|
+
var FullscreenVideoTag = styled.video(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n transform: ", ";\n min-width: 100%;\n min-height: 100%;\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n object-fit: cover;\n background: black;\n z-index: -2;\n"], ["\n transform: ", ";\n min-width: 100%;\n min-height: 100%;\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n object-fit: cover;\n background: black;\n z-index: -2;\n"])), function (props) {
|
|
11755
11755
|
return props.$isRearFacing ? '' : 'scaleX(-1)';
|
|
11756
11756
|
});
|
|
11757
|
-
var templateObject_1$
|
|
11757
|
+
var templateObject_1$t;
|
|
11758
11758
|
|
|
11759
11759
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
11760
11760
|
var _this = this;
|
|
@@ -11789,10 +11789,10 @@ function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallb
|
|
|
11789
11789
|
return !skipSuccessScreen || skipSuccessScreenResolvedFalse;
|
|
11790
11790
|
}
|
|
11791
11791
|
|
|
11792
|
-
var CameraFeedWrapper = styled.div(templateObject_1$
|
|
11792
|
+
var CameraFeedWrapper = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
11793
11793
|
return props.$mode === 'snapToGuides' ? "display: flex;\n position: absolute;\n left: ".concat(props.$x, "px;\n top: ").concat(props.$y, "px;\n width: ").concat(props.$w, "px;\n height: ").concat(props.$h, "px;") : "";
|
|
11794
11794
|
});
|
|
11795
|
-
var templateObject_1$
|
|
11795
|
+
var templateObject_1$s;
|
|
11796
11796
|
|
|
11797
11797
|
function setCanvasDimensions(canvas, width, height) {
|
|
11798
11798
|
var _a;
|
|
@@ -11826,10 +11826,10 @@ var GuideOrientationContext = /*#__PURE__*/createContext({
|
|
|
11826
11826
|
}
|
|
11827
11827
|
});
|
|
11828
11828
|
|
|
11829
|
-
var StyledPageContainer = styled(PageContainer)(templateObject_1$
|
|
11829
|
+
var StyledPageContainer = styled(PageContainer)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n z-index: 1000;\n"], ["\n z-index: 1000;\n"])));
|
|
11830
11830
|
var GuidesContainer = styled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"])));
|
|
11831
11831
|
var GuideCenterRow = styled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n"], ["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n"])));
|
|
11832
|
-
var GuideRegion = styled.div(templateObject_4$
|
|
11832
|
+
var GuideRegion = styled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"])), function (props) {
|
|
11833
11833
|
var _a, _b, _c, _d, _e;
|
|
11834
11834
|
return (_e = (_a = props.$maskColor) !== null && _a !== void 0 ? _a : (_d = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.idCapture) === null || _c === void 0 ? void 0 : _c.guideOverlay) === null || _d === void 0 ? void 0 : _d.backgroundColor) !== null && _e !== void 0 ? _e : 'rgba(0, 0, 0, 0.5)';
|
|
11835
11835
|
}, function (props) {
|
|
@@ -11840,17 +11840,17 @@ var GuideRegion = styled.div(templateObject_4$9 || (templateObject_4$9 = __makeT
|
|
|
11840
11840
|
}, function (props) {
|
|
11841
11841
|
return props.$minHeight ? "min-width: ".concat(props.$minHeight, "px;") : "";
|
|
11842
11842
|
});
|
|
11843
|
-
var GuideCenterRegion = styled.div(templateObject_5$
|
|
11843
|
+
var GuideCenterRegion = styled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n ", "\n ", "\n box-sizing: border-box;\n"], ["\n ", "\n ", "\n box-sizing: border-box;\n"])), function (props) {
|
|
11844
11844
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
11845
11845
|
}, function (props) {
|
|
11846
11846
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
11847
11847
|
});
|
|
11848
|
-
var GuideCenterBorder = styled.div(templateObject_6$
|
|
11848
|
+
var GuideCenterBorder = styled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n box-sizing: border-box;\n position: relative;\n border: ", ";\n"], ["\n box-sizing: border-box;\n position: relative;\n border: ", ";\n"])), function (props) {
|
|
11849
11849
|
var _a, _b;
|
|
11850
11850
|
return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
|
|
11851
11851
|
});
|
|
11852
|
-
var GuideText = styled.span(templateObject_7$
|
|
11853
|
-
var GuideImage
|
|
11852
|
+
var GuideText = styled.span(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"], ["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"])));
|
|
11853
|
+
var GuideImage = styled.img(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n position: relative;\n z-index: 1;\n display: block;\n padding: ", "px;\n box-sizing: border-box;\n ", "\n ", "\n opacity: ", ";\n transition: opacity 0.5s;\n"], ["\n position: relative;\n z-index: 1;\n display: block;\n padding: ", "px;\n box-sizing: border-box;\n ", "\n ", "\n opacity: ", ";\n transition: opacity 0.5s;\n"])), function (props) {
|
|
11854
11854
|
return props.$padding;
|
|
11855
11855
|
}, function (props) {
|
|
11856
11856
|
return props.$width ? "width: ".concat(props.$width, "px;\n max-width: ").concat(props.$width, "px;") : "max-width: none;";
|
|
@@ -11950,7 +11950,7 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
|
11950
11950
|
"$borderWidth": borderWidth,
|
|
11951
11951
|
"$borderColor": borderColor,
|
|
11952
11952
|
className: classNames.centerRegionInner
|
|
11953
|
-
}, /*#__PURE__*/React__default.createElement(GuideImage
|
|
11953
|
+
}, /*#__PURE__*/React__default.createElement(GuideImage, {
|
|
11954
11954
|
src: imgSrc,
|
|
11955
11955
|
alt: "",
|
|
11956
11956
|
onLoad: onImageLoaded,
|
|
@@ -11978,9 +11978,9 @@ var regionClsx$1 = function regionClsx(classNames, which) {
|
|
|
11978
11978
|
return v;
|
|
11979
11979
|
}).join(' ');
|
|
11980
11980
|
};
|
|
11981
|
-
var templateObject_1$
|
|
11981
|
+
var templateObject_1$r, templateObject_2$k, templateObject_3$f, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$1;
|
|
11982
11982
|
|
|
11983
|
-
var FlippingImage = styled(GuideImage
|
|
11983
|
+
var FlippingImage = styled(GuideImage)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n backface-visibility: hidden;\n transform-style: preserve-3d;\n position: relative;\n top: 0;\n left: 0;\n transition: transform ", "s;\n transform: ", ";\n"], ["\n backface-visibility: hidden;\n transform-style: preserve-3d;\n position: relative;\n top: 0;\n left: 0;\n transition: transform ", "s;\n transform: ", ";\n"])), function (props) {
|
|
11984
11984
|
return props.$transitionTime;
|
|
11985
11985
|
}, function (props) {
|
|
11986
11986
|
return props.$transforms;
|
|
@@ -12126,7 +12126,7 @@ var regionClsx = function regionClsx(classNames, which) {
|
|
|
12126
12126
|
return v;
|
|
12127
12127
|
}).join(' ');
|
|
12128
12128
|
};
|
|
12129
|
-
var templateObject_1$
|
|
12129
|
+
var templateObject_1$q, templateObject_2$j;
|
|
12130
12130
|
|
|
12131
12131
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
12132
12132
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -12262,11 +12262,11 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
12262
12262
|
imageVisible: imageVisible
|
|
12263
12263
|
})));
|
|
12264
12264
|
};
|
|
12265
|
-
var CanvasWrapper$1 = styled.div(templateObject_1$
|
|
12265
|
+
var CanvasWrapper$1 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"])), function (props) {
|
|
12266
12266
|
return props.$maskColor;
|
|
12267
12267
|
});
|
|
12268
12268
|
var Canvas$1 = styled.canvas(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
12269
|
-
var templateObject_1$
|
|
12269
|
+
var templateObject_1$p, templateObject_2$i;
|
|
12270
12270
|
|
|
12271
12271
|
function IdCaptureGuides(_a) {
|
|
12272
12272
|
var _b, _c;
|
|
@@ -12324,7 +12324,7 @@ function IdCaptureGuides(_a) {
|
|
|
12324
12324
|
})));
|
|
12325
12325
|
}
|
|
12326
12326
|
|
|
12327
|
-
var Spinner = styled.div(templateObject_1$
|
|
12327
|
+
var Spinner = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: inline-block;\n width: ", "px;\n height: ", "px;\n margin: auto;\n\n &:after {\n content: ' ';\n display: block;\n width: ", "px;\n height: ", "px;\n margin: 8px;\n border-radius: 50%;\n border: ", "px solid\n ", ";\n border-color: ", " transparent\n ", " transparent;\n animation: lds-dual-ring 1.2s linear infinite;\n box-sizing: content-box;\n }\n\n @keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"], ["\n display: inline-block;\n width: ", "px;\n height: ", "px;\n margin: auto;\n\n &:after {\n content: ' ';\n display: block;\n width: ", "px;\n height: ", "px;\n margin: 8px;\n border-radius: 50%;\n border: ", "px solid\n ", ";\n border-color: ", " transparent\n ", " transparent;\n animation: lds-dual-ring 1.2s linear infinite;\n box-sizing: content-box;\n }\n\n @keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"])), function (_a) {
|
|
12328
12328
|
var $size = _a.$size;
|
|
12329
12329
|
return $size !== null && $size !== void 0 ? $size : 80;
|
|
12330
12330
|
}, function (_a) {
|
|
@@ -12349,7 +12349,7 @@ var Spinner = styled.div(templateObject_1$n || (templateObject_1$n = __makeTempl
|
|
|
12349
12349
|
var $color = _a.$color;
|
|
12350
12350
|
return $color !== null && $color !== void 0 ? $color : '#888';
|
|
12351
12351
|
});
|
|
12352
|
-
var templateObject_1$
|
|
12352
|
+
var templateObject_1$o;
|
|
12353
12353
|
|
|
12354
12354
|
var IdCaptureImagePreview = function IdCaptureImagePreview(_a) {
|
|
12355
12355
|
var _b = _a.classNames,
|
|
@@ -12434,11 +12434,11 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
|
|
|
12434
12434
|
onError: onError
|
|
12435
12435
|
})));
|
|
12436
12436
|
};
|
|
12437
|
-
var StyledSpinner = styled(Spinner)(templateObject_1$
|
|
12437
|
+
var StyledSpinner = styled(Spinner)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n position: relative;\n top: 4px;\n left: -3px;\n margin: 0 3px 0 -12px;\n"], ["\n position: relative;\n top: 4px;\n left: -3px;\n margin: 0 3px 0 -12px;\n"])));
|
|
12438
12438
|
var ImagePreviewWrapper = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: column;\n height: 33%;\n bottom: 12px;\n right: 12px;\n"], ["\n position: absolute;\n display: flex;\n flex-direction: column;\n height: 33%;\n bottom: 12px;\n right: 12px;\n"])));
|
|
12439
12439
|
var ImagePreviewText = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: block;\n position: absolute;\n top: -32px;\n font:\n 14px -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n Helvetica,\n Arial,\n sans-serif,\n 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n color: white;\n text-align: center;\n margin: 0 auto;\n width: 100%;\n"], ["\n display: block;\n position: absolute;\n top: -32px;\n font:\n 14px -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n Helvetica,\n Arial,\n sans-serif,\n 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n color: white;\n text-align: center;\n margin: 0 auto;\n width: 100%;\n"])));
|
|
12440
|
-
var ImagePreviewImageWrapper = styled.div(templateObject_4$
|
|
12441
|
-
var templateObject_1$
|
|
12440
|
+
var ImagePreviewImageWrapper = styled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: relative;\n height: calc(100% - 8px);\n padding: 4px;\n border-radius: 4px;\n background: white;\n\n & > img {\n border-radius: 4px;\n width: auto;\n max-height: 100%;\n }\n"], ["\n position: relative;\n height: calc(100% - 8px);\n padding: 4px;\n border-radius: 4px;\n background: white;\n\n & > img {\n border-radius: 4px;\n width: auto;\n max-height: 100%;\n }\n"])));
|
|
12441
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$e, templateObject_4$9;
|
|
12442
12442
|
|
|
12443
12443
|
var documentCaptureInitialState = {
|
|
12444
12444
|
documents: [],
|
|
@@ -12779,11 +12779,11 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
|
|
|
12779
12779
|
ref: canvasRef
|
|
12780
12780
|
}));
|
|
12781
12781
|
};
|
|
12782
|
-
var CanvasWrapper = styled.div(templateObject_1$
|
|
12782
|
+
var CanvasWrapper = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n"], ["\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
|
|
12783
12783
|
return props.$maskColor;
|
|
12784
12784
|
});
|
|
12785
12785
|
var Canvas = styled.canvas(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
12786
|
-
var templateObject_1$
|
|
12786
|
+
var templateObject_1$m, templateObject_2$g;
|
|
12787
12787
|
|
|
12788
12788
|
var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
12789
12789
|
var _b, _c, _d, _e, _f;
|
|
@@ -12915,21 +12915,21 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
12915
12915
|
disabled: !cameraReady || capturing
|
|
12916
12916
|
}, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
|
|
12917
12917
|
};
|
|
12918
|
-
var CaptureContainer = styled.div(templateObject_1$
|
|
12918
|
+
var CaptureContainer = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: var(--app-height);\n"], ["\n display: flex;\n flex-direction: column;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: var(--app-height);\n"])));
|
|
12919
12919
|
var HeadingRow = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n background: ", ";\n text-align: center;\n color: white;\n"], ["\n background: ", ";\n text-align: center;\n color: white;\n"])), function (props) {
|
|
12920
12920
|
return props.$maskColor;
|
|
12921
12921
|
});
|
|
12922
12922
|
var Heading$8 = styled.h1(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n font-size: 22px;\n"], ["\n font-size: 22px;\n"])));
|
|
12923
|
-
var FooterRow = styled.div(templateObject_4$
|
|
12923
|
+
var FooterRow = styled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"], ["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"])), function (props) {
|
|
12924
12924
|
return props.$maskColor;
|
|
12925
12925
|
});
|
|
12926
|
-
var Instructions = styled.div(templateObject_5$
|
|
12926
|
+
var Instructions = styled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n max-height: ", ";\n overflow-y: auto;\n"], ["\n max-height: ", ";\n overflow-y: auto;\n"])), function (props) {
|
|
12927
12927
|
var _a, _b, _c;
|
|
12928
12928
|
return (_c = (_b = (_a = props.theme.documentCapture) === null || _a === void 0 ? void 0 : _a.instructions) === null || _b === void 0 ? void 0 : _b.maxHeight) !== null && _c !== void 0 ? _c : '8rem';
|
|
12929
12929
|
});
|
|
12930
|
-
var StyledButtonsRow$9 = styled(ButtonsRow)(templateObject_6$
|
|
12931
|
-
var PreviewImage = styled.img(templateObject_7$
|
|
12932
|
-
var templateObject_1$
|
|
12930
|
+
var StyledButtonsRow$9 = styled(ButtonsRow)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n padding-top: 20px;\n"], ["\n padding-top: 20px;\n"])));
|
|
12931
|
+
var PreviewImage = styled.img(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"])));
|
|
12932
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$d, templateObject_4$8, templateObject_5$5, templateObject_6$4, templateObject_7$2;
|
|
12933
12933
|
|
|
12934
12934
|
var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
|
|
12935
12935
|
var onSuccess = _a.onSuccess,
|
|
@@ -13084,13 +13084,13 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
13084
13084
|
}
|
|
13085
13085
|
}, verbiage.doneBtnText))))));
|
|
13086
13086
|
};
|
|
13087
|
-
var StyledOverlayInner$1 = styled(OverlayInner$2)(templateObject_1$
|
|
13087
|
+
var StyledOverlayInner$1 = styled(OverlayInner$2)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
13088
13088
|
var Heading$7 = styled.h3(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
13089
13089
|
var Description$2 = styled.p(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
13090
|
-
var Instruction = styled.p(templateObject_4$
|
|
13091
|
-
var ImageCol = styled.div(templateObject_5$
|
|
13092
|
-
var StyledButtonsRow$8 = styled(ButtonsRow)(templateObject_6$
|
|
13093
|
-
var templateObject_1$
|
|
13090
|
+
var Instruction = styled.p(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
13091
|
+
var ImageCol = styled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n flex-grow: 1;\n flex-basis: 0;\n"], ["\n display: flex;\n justify-content: center;\n flex-grow: 1;\n flex-basis: 0;\n"])));
|
|
13092
|
+
var StyledButtonsRow$8 = styled(ButtonsRow)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
13093
|
+
var templateObject_1$k, templateObject_2$e, templateObject_3$c, templateObject_4$7, templateObject_5$4, templateObject_6$3;
|
|
13094
13094
|
|
|
13095
13095
|
var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
13096
13096
|
var _b, _c, _d, _e, _f, _g;
|
|
@@ -13414,7 +13414,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
13414
13414
|
})));
|
|
13415
13415
|
};
|
|
13416
13416
|
|
|
13417
|
-
var FaceCaptureGuideContainer = styled.div(templateObject_1$
|
|
13417
|
+
var FaceCaptureGuideContainer = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: absolute;\n z-index: 1000;\n width: 100%;\n height: 100%;\n display: flex;\n"], ["\n position: absolute;\n z-index: 1000;\n width: 100%;\n height: 100%;\n display: flex;\n"])));
|
|
13418
13418
|
var FaceCaptureGuideOval = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n border-width: ", "px;\n border-color: ", ";\n border-style: solid;\n border-radius: 50%;\n aspect-ratio: 1 / 1.618;\n height: 50%;\n margin: auto;\n"], ["\n border-width: ", "px;\n border-color: ", ";\n border-style: solid;\n border-radius: 50%;\n aspect-ratio: 1 / 1.618;\n height: 50%;\n margin: auto;\n"])), function (props) {
|
|
13419
13419
|
return props.$borderWidth;
|
|
13420
13420
|
}, function (props) {
|
|
@@ -13438,7 +13438,7 @@ var FaceCaptureGuideOverlay = function FaceCaptureGuideOverlay(_a) {
|
|
|
13438
13438
|
"$borderColor": borderColor
|
|
13439
13439
|
}));
|
|
13440
13440
|
};
|
|
13441
|
-
var templateObject_1$
|
|
13441
|
+
var templateObject_1$j, templateObject_2$d;
|
|
13442
13442
|
|
|
13443
13443
|
var useTimeout = function useTimeout(durationMs, onTimeout, timeoutAverted, shouldWaitLonger, shouldStart) {
|
|
13444
13444
|
if (shouldStart === void 0) {
|
|
@@ -13579,12 +13579,12 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
|
|
|
13579
13579
|
}
|
|
13580
13580
|
}, loading ? verbiage.doneBtnLoadingText : verbiage.doneBtnText)))));
|
|
13581
13581
|
};
|
|
13582
|
-
var StyledOverlayInner = styled(OverlayInner$2)(templateObject_1$
|
|
13582
|
+
var StyledOverlayInner = styled(OverlayInner$2)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
13583
13583
|
var Heading$6 = styled.h3(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
13584
13584
|
var Description$1 = styled.p(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
13585
|
-
var ImageContainer$5 = styled(OverlayImageContainer)(templateObject_4$
|
|
13586
|
-
var StyledButtonsRow$7 = styled(ButtonsRow)(templateObject_5$
|
|
13587
|
-
var templateObject_1$
|
|
13585
|
+
var ImageContainer$5 = styled(OverlayImageContainer)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
13586
|
+
var StyledButtonsRow$7 = styled(ButtonsRow)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
13587
|
+
var templateObject_1$i, templateObject_2$c, templateObject_3$b, templateObject_4$6, templateObject_5$3;
|
|
13588
13588
|
|
|
13589
13589
|
var initialState$3 = {
|
|
13590
13590
|
videoWidth: 0,
|
|
@@ -14123,8 +14123,8 @@ var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
|
|
|
14123
14123
|
finished: true
|
|
14124
14124
|
}, verbiage.doneBtnText))));
|
|
14125
14125
|
};
|
|
14126
|
-
var Heading$5 = styled.h3(templateObject_1$
|
|
14127
|
-
var templateObject_1$
|
|
14126
|
+
var Heading$5 = styled.h3(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n margin-bottom: 24px;\n"], ["\n margin-bottom: 24px;\n"])));
|
|
14127
|
+
var templateObject_1$h;
|
|
14128
14128
|
|
|
14129
14129
|
var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
14130
14130
|
var _b = _a.canRetry,
|
|
@@ -14173,8 +14173,8 @@ var FaceLivenessFailure = function FaceLivenessFailure(_a) {
|
|
|
14173
14173
|
finished: true
|
|
14174
14174
|
}, verbiage.exitBtnText))));
|
|
14175
14175
|
};
|
|
14176
|
-
var ImageContainer$4 = styled(OverlayImageContainer)(templateObject_1$
|
|
14177
|
-
var templateObject_1$
|
|
14176
|
+
var ImageContainer$4 = styled(OverlayImageContainer)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n max-height: calc(100vh - 185px);\n margin: 0 24px;\n"], ["\n max-height: calc(100vh - 185px);\n margin: 0 24px;\n"])));
|
|
14177
|
+
var templateObject_1$g;
|
|
14178
14178
|
|
|
14179
14179
|
var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLegacy(_a) {
|
|
14180
14180
|
var onDismissed = _a.onDismissed,
|
|
@@ -14244,9 +14244,9 @@ var SelfieCaptureLoadingOverlayLegacy = function SelfieCaptureLoadingOverlayLega
|
|
|
14244
14244
|
}
|
|
14245
14245
|
}, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? "".concat(verbiage.modelsWarmingUpText) : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)")))));
|
|
14246
14246
|
};
|
|
14247
|
-
var StyledGuidanceMessage$1 = styled(GuidanceMessage)(templateObject_1$
|
|
14247
|
+
var StyledGuidanceMessage$1 = styled(GuidanceMessage)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n padding: 12px 24px;\n font-weight: normal;\n line-height: 1.5;\n margin-bottom: -30px;\n"], ["\n padding: 12px 24px;\n font-weight: normal;\n line-height: 1.5;\n margin-bottom: -30px;\n"])));
|
|
14248
14248
|
var StyledButtonsRow$6 = styled(ButtonsRow)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n flex-direction: column;\n padding-top: 25px;\n"], ["\n flex-direction: column;\n padding-top: 25px;\n"])));
|
|
14249
|
-
var templateObject_1$
|
|
14249
|
+
var templateObject_1$f, templateObject_2$b;
|
|
14250
14250
|
|
|
14251
14251
|
function SelfieCaptureLoadingGraphic(_a) {
|
|
14252
14252
|
var _b, _c, _d;
|
|
@@ -14615,7 +14615,7 @@ var SelfieCaptureLoadingOverlayDefault = function SelfieCaptureLoadingOverlayDef
|
|
|
14615
14615
|
}
|
|
14616
14616
|
}, verbiage.continueText))))));
|
|
14617
14617
|
};
|
|
14618
|
-
var OverlayInner = styled.div(templateObject_1$
|
|
14618
|
+
var OverlayInner = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"], ["\n height: 100dvh;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n"])), function (props) {
|
|
14619
14619
|
var _a, _b, _c, _d;
|
|
14620
14620
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : '#ecedf3';
|
|
14621
14621
|
}, function (props) {
|
|
@@ -14629,16 +14629,16 @@ var OverlayHeader = styled.div(templateObject_2$a || (templateObject_2$a = __mak
|
|
|
14629
14629
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
14630
14630
|
});
|
|
14631
14631
|
var StyledGuidanceMessage = styled(GuidanceMessage)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
|
|
14632
|
-
var StyledButtonsRow$5 = styled(ButtonsRow)(templateObject_4$
|
|
14632
|
+
var StyledButtonsRow$5 = styled(ButtonsRow)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n height: 100px;\n color: ", ";\n ", "\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100dvw;\n box-sizing: border-box;\n"])), function (props) {
|
|
14633
14633
|
var _a, _b, _c, _d;
|
|
14634
14634
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
|
|
14635
14635
|
}, function (props) {
|
|
14636
14636
|
var _a, _b, _c, _d, _e, _f;
|
|
14637
14637
|
return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarFontSize) ? "font-size: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.selfieCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.progressBarFontSize, ";") : '';
|
|
14638
14638
|
});
|
|
14639
|
-
var StyledOverlayImageContainer = styled(OverlayImageContainer)(templateObject_5$
|
|
14640
|
-
var LoadingListContainer = styled.div(templateObject_6$
|
|
14641
|
-
var LoadingList = styled.ul(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"], ["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"])));
|
|
14639
|
+
var StyledOverlayImageContainer = styled(OverlayImageContainer)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n padding: 0;\n\n & > svg {\n height: 100%;\n }\n"], ["\n padding: 0;\n\n & > svg {\n height: 100%;\n }\n"])));
|
|
14640
|
+
var LoadingListContainer = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n display: flex;\n position: relative;\n z-index: 2;\n"], ["\n display: flex;\n position: relative;\n z-index: 2;\n"])));
|
|
14641
|
+
var LoadingList = styled.ul(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"], ["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"])));
|
|
14642
14642
|
var LoadingListItem = styled.li(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n\n &::before {\n content: '';\n display: inline-block;\n height: 1rem;\n min-width: 1rem;\n vertical-align: middle;\n background-size: cover;\n background-repeat: no-repeat;\n margin: auto 0.5rem auto 0;\n }\n\n &.done::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzg1KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMEM1LjM3MjU4IDAgMCA1LjM3MjU4IDAgMTJDMCAxOC42Mjc0IDUuMzcyNTggMjQgMTIgMjRaTTE5LjU2NDMgOC4yNzg1MkMxOS45NTQ5IDcuODg3OTkgMTkuOTU0OSA3LjI1NDgzIDE5LjU2NDMgNi44NjQzQzE5LjE3MzggNi40NzM3OCAxOC41NDA2IDYuNDczNzggMTguMTUwMSA2Ljg2NDNMOS40Mjg2NiAxNS41ODU4TDUuODUwMDUgMTIuMDA3MkM1LjQ1OTUzIDExLjYxNjYgNC44MjYzNiAxMS42MTY2IDQuNDM1ODQgMTIuMDA3MkM0LjA0NTMxIDEyLjM5NzcgNC4wNDUzMSAxMy4wMzA5IDQuNDM1ODQgMTMuNDIxNEw4LjcyMTU1IDE3LjcwNzFDOS4xMTIwOCAxOC4wOTc2IDkuNzQ1MjQgMTguMDk3NiAxMC4xMzU4IDE3LjcwNzFMMTkuNTY0MyA4LjI3ODUyWiIgZmlsbD0id2hpdGUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF80OV8zODUiPjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=');\n }\n\n &.running::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzcwKSI+PG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV80OV8zNzAiIGZpbGw9IndoaXRlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNTE0NzIgMjAuNDg1NUM4LjIwMTAxIDI1LjE3MTggMTUuNzk5IDI1LjE3MTggMjAuNDg1MyAyMC40ODU1QzI1LjE3MTYgMTUuNzk5MiAyNS4xNzE2IDguMjAxMTkgMjAuNDg1MyAzLjUxNDlDMTUuNzk5IC0xLjE3MTM5IDguMjAxMDEgLTEuMTcxMzkgMy41MTQ3MiAzLjUxNDlDLTEuMTcxNTcgOC4yMDExOSAtMS4xNzE1NyAxNS43OTkyIDMuNTE0NzIgMjAuNDg1NVoiLz48L21hc2s+PHBhdGggZD0iTTYuMzk4MTQgMTEuNDU5QzUuODQ1ODYgMTEuNDU5IDUuMzk4MTQgMTEuOTA2NyA1LjM5ODE0IDEyLjQ1OUM1LjM5ODE0IDEzLjAxMTIgNS44NDU4NiAxMy40NTkgNi4zOTgxNCAxMy40NTlWMTEuNDU5Wk0xNy42MDE5IDEzLjQ1OUMxOC4xNTQxIDEzLjQ1OSAxOC42MDE5IDEzLjAxMTIgMTguNjAxOSAxMi40NTlDMTguNjAxOSAxMS45MDY3IDE4LjE1NDEgMTEuNDU5IDE3LjYwMTkgMTEuNDU5VjEzLjQ1OVpNNi4zOTgxNCAxMy40NTlIMTcuNjAxOVYxMS40NTlINi4zOTgxNFYxMy40NTlaTTMuNTE0NzIgMjAuNDg1NUw0LjkyODkzIDE5LjA3MTNMNC45Mjg5MyAxOS4wNzEzTDMuNTE0NzIgMjAuNDg1NVpNMjAuNDg1MyAzLjUxNDlMMTkuMDcxMSA0LjkyOTEyTDE5LjA3MTEgNC45MjkxMkwyMC40ODUzIDMuNTE0OVpNMy41MTQ3MiAzLjUxNDlMNC45Mjg5MyA0LjkyOTEyTDQuOTI4OTMgNC45MjkxMkwzLjUxNDcyIDMuNTE0OVpNMTkuMDcxMSAxOS4wNzEzQzE1LjE2NTggMjIuOTc2NSA4LjgzNDE3IDIyLjk3NjUgNC45Mjg5MyAxOS4wNzEzTDIuMTAwNTEgMjEuODk5N0M3LjU2Nzg0IDI3LjM2NyAxNi40MzIyIDI3LjM2NyAyMS44OTk1IDIxLjg5OTdMMTkuMDcxMSAxOS4wNzEzWk0xOS4wNzExIDQuOTI5MTJDMjIuOTc2MyA4LjgzNDM2IDIyLjk3NjMgMTUuMTY2IDE5LjA3MTEgMTkuMDcxM0wyMS44OTk1IDIxLjg5OTdDMjcuMzY2OCAxNi40MzIzIDI3LjM2NjggNy41NjgwMyAyMS44OTk1IDIuMTAwNjlMMTkuMDcxMSA0LjkyOTEyWk00LjkyODkzIDQuOTI5MTJDOC44MzQxNyAxLjAyMzg3IDE1LjE2NTggMS4wMjM4NyAxOS4wNzExIDQuOTI5MTJMMjEuODk5NSAyLjEwMDY5QzE2LjQzMjIgLTMuMzY2NjUgNy41Njc4NCAtMy4zNjY2NSAyLjEwMDUxIDIuMTAwNjlMNC45Mjg5MyA0LjkyOTEyWk00LjkyODkzIDE5LjA3MTNDMS4wMjM2OSAxNS4xNjYgMS4wMjM2OSA4LjgzNDM2IDQuOTI4OTMgNC45MjkxMkwyLjEwMDUxIDIuMTAwNjlDLTMuMzY2ODMgNy41NjgwMyAtMy4zNjY4MyAxNi40MzIzIDIuMTAwNTEgMjEuODk5N0w0LjkyODkzIDE5LjA3MTNaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTEtaW5zaWRlLTFfNDlfMzcwKSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzQ5XzM3MCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==');\n }\n"], ["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n\n &::before {\n content: '';\n display: inline-block;\n height: 1rem;\n min-width: 1rem;\n vertical-align: middle;\n background-size: cover;\n background-repeat: no-repeat;\n margin: auto 0.5rem auto 0;\n }\n\n &.done::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzg1KSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAyNEMxOC42Mjc0IDI0IDI0IDE4LjYyNzQgMjQgMTJDMjQgNS4zNzI1OCAxOC42Mjc0IDAgMTIgMEM1LjM3MjU4IDAgMCA1LjM3MjU4IDAgMTJDMCAxOC42Mjc0IDUuMzcyNTggMjQgMTIgMjRaTTE5LjU2NDMgOC4yNzg1MkMxOS45NTQ5IDcuODg3OTkgMTkuOTU0OSA3LjI1NDgzIDE5LjU2NDMgNi44NjQzQzE5LjE3MzggNi40NzM3OCAxOC41NDA2IDYuNDczNzggMTguMTUwMSA2Ljg2NDNMOS40Mjg2NiAxNS41ODU4TDUuODUwMDUgMTIuMDA3MkM1LjQ1OTUzIDExLjYxNjYgNC44MjYzNiAxMS42MTY2IDQuNDM1ODQgMTIuMDA3MkM0LjA0NTMxIDEyLjM5NzcgNC4wNDUzMSAxMy4wMzA5IDQuNDM1ODQgMTMuNDIxNEw4LjcyMTU1IDE3LjcwNzFDOS4xMTIwOCAxOC4wOTc2IDkuNzQ1MjQgMTguMDk3NiAxMC4xMzU4IDE3LjcwNzFMMTkuNTY0MyA4LjI3ODUyWiIgZmlsbD0id2hpdGUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF80OV8zODUiPjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=');\n }\n\n &.running::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNDlfMzcwKSI+PG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV80OV8zNzAiIGZpbGw9IndoaXRlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNTE0NzIgMjAuNDg1NUM4LjIwMTAxIDI1LjE3MTggMTUuNzk5IDI1LjE3MTggMjAuNDg1MyAyMC40ODU1QzI1LjE3MTYgMTUuNzk5MiAyNS4xNzE2IDguMjAxMTkgMjAuNDg1MyAzLjUxNDlDMTUuNzk5IC0xLjE3MTM5IDguMjAxMDEgLTEuMTcxMzkgMy41MTQ3MiAzLjUxNDlDLTEuMTcxNTcgOC4yMDExOSAtMS4xNzE1NyAxNS43OTkyIDMuNTE0NzIgMjAuNDg1NVoiLz48L21hc2s+PHBhdGggZD0iTTYuMzk4MTQgMTEuNDU5QzUuODQ1ODYgMTEuNDU5IDUuMzk4MTQgMTEuOTA2NyA1LjM5ODE0IDEyLjQ1OUM1LjM5ODE0IDEzLjAxMTIgNS44NDU4NiAxMy40NTkgNi4zOTgxNCAxMy40NTlWMTEuNDU5Wk0xNy42MDE5IDEzLjQ1OUMxOC4xNTQxIDEzLjQ1OSAxOC42MDE5IDEzLjAxMTIgMTguNjAxOSAxMi40NTlDMTguNjAxOSAxMS45MDY3IDE4LjE1NDEgMTEuNDU5IDE3LjYwMTkgMTEuNDU5VjEzLjQ1OVpNNi4zOTgxNCAxMy40NTlIMTcuNjAxOVYxMS40NTlINi4zOTgxNFYxMy40NTlaTTMuNTE0NzIgMjAuNDg1NUw0LjkyODkzIDE5LjA3MTNMNC45Mjg5MyAxOS4wNzEzTDMuNTE0NzIgMjAuNDg1NVpNMjAuNDg1MyAzLjUxNDlMMTkuMDcxMSA0LjkyOTEyTDE5LjA3MTEgNC45MjkxMkwyMC40ODUzIDMuNTE0OVpNMy41MTQ3MiAzLjUxNDlMNC45Mjg5MyA0LjkyOTEyTDQuOTI4OTMgNC45MjkxMkwzLjUxNDcyIDMuNTE0OVpNMTkuMDcxMSAxOS4wNzEzQzE1LjE2NTggMjIuOTc2NSA4LjgzNDE3IDIyLjk3NjUgNC45Mjg5MyAxOS4wNzEzTDIuMTAwNTEgMjEuODk5N0M3LjU2Nzg0IDI3LjM2NyAxNi40MzIyIDI3LjM2NyAyMS44OTk1IDIxLjg5OTdMMTkuMDcxMSAxOS4wNzEzWk0xOS4wNzExIDQuOTI5MTJDMjIuOTc2MyA4LjgzNDM2IDIyLjk3NjMgMTUuMTY2IDE5LjA3MTEgMTkuMDcxM0wyMS44OTk1IDIxLjg5OTdDMjcuMzY2OCAxNi40MzIzIDI3LjM2NjggNy41NjgwMyAyMS44OTk1IDIuMTAwNjlMMTkuMDcxMSA0LjkyOTEyWk00LjkyODkzIDQuOTI5MTJDOC44MzQxNyAxLjAyMzg3IDE1LjE2NTggMS4wMjM4NyAxOS4wNzExIDQuOTI5MTJMMjEuODk5NSAyLjEwMDY5QzE2LjQzMjIgLTMuMzY2NjUgNy41Njc4NCAtMy4zNjY2NSAyLjEwMDUxIDIuMTAwNjlMNC45Mjg5MyA0LjkyOTEyWk00LjkyODkzIDE5LjA3MTNDMS4wMjM2OSAxNS4xNjYgMS4wMjM2OSA4LjgzNDM2IDQuOTI4OTMgNC45MjkxMkwyLjEwMDUxIDIuMTAwNjlDLTMuMzY2ODMgNy41NjgwMyAtMy4zNjY4MyAxNi40MzIzIDIuMTAwNTEgMjEuODk5N0w0LjkyODkzIDE5LjA3MTNaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTEtaW5zaWRlLTFfNDlfMzcwKSIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzQ5XzM3MCI+PHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==');\n }\n"])));
|
|
14643
14643
|
var ProgressContainer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
|
|
14644
14644
|
var ProgressBarBackground = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ", ";\n opacity: ", ";\n"])), function (props) {
|
|
@@ -14664,7 +14664,7 @@ var ContinueButton = styled(LoaderButton)(templateObject_15 || (templateObject_1
|
|
|
14664
14664
|
var _a, _b, _c, _d, _e, _f;
|
|
14665
14665
|
return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.selfieCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnBorder) ? "border: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.selfieCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.continueBtnBorder, ";") : '';
|
|
14666
14666
|
});
|
|
14667
|
-
var templateObject_1$
|
|
14667
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$a, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
14668
14668
|
|
|
14669
14669
|
var components = {
|
|
14670
14670
|
"default": SelfieCaptureLoadingOverlayDefault,
|
|
@@ -15010,11 +15010,11 @@ var AdditionalDocumentCapture = function AdditionalDocumentCapture(_a) {
|
|
|
15010
15010
|
}
|
|
15011
15011
|
}, verbiage.captureBtnText)))));
|
|
15012
15012
|
};
|
|
15013
|
-
var Inner = styled(OverlayInner$2)(templateObject_1$
|
|
15013
|
+
var Inner = styled(OverlayInner$2)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
15014
15014
|
var Heading$4 = styled.h3(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
15015
15015
|
var Description = styled.p(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
15016
|
-
var StyledButtonsRow$4 = styled(ButtonsRow)(templateObject_4$
|
|
15017
|
-
var templateObject_1$
|
|
15016
|
+
var StyledButtonsRow$4 = styled(ButtonsRow)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
15017
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$9, templateObject_4$4;
|
|
15018
15018
|
|
|
15019
15019
|
var AdditionalDocumentCaptureWizard = function AdditionalDocumentCaptureWizard(_a) {
|
|
15020
15020
|
var documents = _a.documents,
|
|
@@ -15097,7 +15097,7 @@ function signatureDataToIdmissionFormat(signatureCanvas) {
|
|
|
15097
15097
|
return signatureData;
|
|
15098
15098
|
}
|
|
15099
15099
|
|
|
15100
|
-
var SignaturePaperBacking = styled.div(templateObject_1$
|
|
15100
|
+
var SignaturePaperBacking = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n ", "\n ", "\n"], ["\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n ", "\n ", "\n ", "\n"])), function (props) {
|
|
15101
15101
|
var _a, _b;
|
|
15102
15102
|
return ((_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.background) ? "background: ".concat((_b = props.theme.signatureCapture) === null || _b === void 0 ? void 0 : _b.background, ";") : "";
|
|
15103
15103
|
}, function (props) {
|
|
@@ -15118,8 +15118,8 @@ var SignaturePad = styled.div(templateObject_3$8 || (templateObject_3$8 = __make
|
|
|
15118
15118
|
var _a, _b, _c;
|
|
15119
15119
|
return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : '16px';
|
|
15120
15120
|
});
|
|
15121
|
-
var SignatureButtonsContainer = styled(ButtonsRow)(templateObject_4$
|
|
15122
|
-
var templateObject_1$
|
|
15121
|
+
var SignatureButtonsContainer = styled(ButtonsRow)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n flex-grow: 0;\n padding-top: 12px;\n display: flex;\n z-index: 1000;\n position: relative;\n"], ["\n flex-grow: 0;\n padding-top: 12px;\n display: flex;\n z-index: 1000;\n position: relative;\n"])));
|
|
15122
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$8, templateObject_4$3;
|
|
15123
15123
|
|
|
15124
15124
|
var SignatureCapture = function SignatureCapture(_a) {
|
|
15125
15125
|
var _b;
|
|
@@ -15178,8 +15178,8 @@ var SignatureCapture = function SignatureCapture(_a) {
|
|
|
15178
15178
|
finished: true
|
|
15179
15179
|
}, verbiage.acceptBtnText)))));
|
|
15180
15180
|
};
|
|
15181
|
-
var AcceptBtn$1 = styled(LoaderButton)(templateObject_1$
|
|
15182
|
-
var templateObject_1$
|
|
15181
|
+
var AcceptBtn$1 = styled(LoaderButton)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
15182
|
+
var templateObject_1$b;
|
|
15183
15183
|
|
|
15184
15184
|
var useVideoRecorder = function useVideoRecorder(camera) {
|
|
15185
15185
|
var mediaRecorder = useRef(null);
|
|
@@ -15407,8 +15407,8 @@ var VideoSignatureCapture = function VideoSignatureCapture(_a) {
|
|
|
15407
15407
|
ref: outputCanvas
|
|
15408
15408
|
}));
|
|
15409
15409
|
};
|
|
15410
|
-
var AcceptBtn = styled(LoaderButton)(templateObject_1$
|
|
15411
|
-
var templateObject_1$
|
|
15410
|
+
var AcceptBtn = styled(LoaderButton)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n margin-left: auto;\n"], ["\n margin-left: auto;\n"])));
|
|
15411
|
+
var templateObject_1$a;
|
|
15412
15412
|
|
|
15413
15413
|
var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
15414
15414
|
var videoUrl = _a.videoUrl,
|
|
@@ -15456,8 +15456,8 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
|
|
|
15456
15456
|
finished: true
|
|
15457
15457
|
}, verbiage.doneBtnText))));
|
|
15458
15458
|
};
|
|
15459
|
-
var StyledVideo$1 = styled.video(templateObject_1$
|
|
15460
|
-
var templateObject_1$
|
|
15459
|
+
var StyledVideo$1 = styled.video(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n max-width: 100%;\n"], ["\n margin-left: auto;\n margin-right: auto;\n max-width: 100%;\n"])));
|
|
15460
|
+
var templateObject_1$9;
|
|
15461
15461
|
|
|
15462
15462
|
var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
15463
15463
|
var _b;
|
|
@@ -15631,175 +15631,79 @@ var VideoSignatureWizard = function VideoSignatureWizard(_a) {
|
|
|
15631
15631
|
|
|
15632
15632
|
var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
15633
15633
|
var _b;
|
|
15634
|
-
var
|
|
15634
|
+
var className = _a.className,
|
|
15635
|
+
imageWidth = _a.imageWidth,
|
|
15635
15636
|
imageHeight = _a.imageHeight,
|
|
15636
15637
|
_c = _a.borderWidth,
|
|
15637
15638
|
borderWidth = _c === void 0 ? 4 : _c,
|
|
15638
|
-
_d = _a.
|
|
15639
|
-
|
|
15640
|
-
_e = _a.style,
|
|
15641
|
-
style = _e === void 0 ? {} : _e,
|
|
15642
|
-
_f = _a.assets,
|
|
15643
|
-
assets = _f === void 0 ? {} : _f,
|
|
15644
|
-
_g = _a.verbiage,
|
|
15645
|
-
verbiage = _g === void 0 ? {} : _g;
|
|
15646
|
-
var _h = useResizeObserver(),
|
|
15647
|
-
ref = _h.ref,
|
|
15648
|
-
_j = _h.width,
|
|
15649
|
-
width = _j === void 0 ? 1 : _j,
|
|
15650
|
-
_k = _h.height,
|
|
15651
|
-
height = _k === void 0 ? 1 : _k;
|
|
15639
|
+
_d = _a.assets,
|
|
15640
|
+
assets = _d === void 0 ? {} : _d;
|
|
15652
15641
|
var cameraRef = useContext(CameraStateContext).cameraRef;
|
|
15653
15642
|
assets.frontImageUrl || (assets.frontImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Front-SVG-Landscape-2.svg"));
|
|
15654
15643
|
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
|
|
15655
|
-
var instructionText = useVerbiage(verbiage.instructionText, 'Please flip your ID card...');
|
|
15656
|
-
var padding = 0;
|
|
15657
15644
|
var isMirrored = !((_b = cameraRef.current) === null || _b === void 0 ? void 0 : _b.isRearFacing);
|
|
15658
|
-
|
|
15659
|
-
|
|
15660
|
-
|
|
15661
|
-
|
|
15662
|
-
|
|
15663
|
-
|
|
15664
|
-
};
|
|
15665
|
-
var _l = useState(1),
|
|
15666
|
-
transitionTime = _l[0],
|
|
15667
|
-
setTransitionTime = _l[1];
|
|
15668
|
-
var _m = useState(0),
|
|
15669
|
-
rotationAngle = _m[0],
|
|
15670
|
-
setRotationAngle = _m[1];
|
|
15645
|
+
var _e = useState(1),
|
|
15646
|
+
transitionTime = _e[0],
|
|
15647
|
+
setTransitionTime = _e[1];
|
|
15648
|
+
var _f = useState(0),
|
|
15649
|
+
rotationAngle = _f[0],
|
|
15650
|
+
setRotationAngle = _f[1];
|
|
15671
15651
|
var frontTransforms = ["rotateY(".concat(rotationAngle, "deg)")];
|
|
15672
15652
|
if (isMirrored) frontTransforms.push('scaleX(-1)');
|
|
15673
15653
|
var backTransforms = ["rotateY(".concat(180 - rotationAngle, "deg)")];
|
|
15674
15654
|
if (isMirrored) backTransforms.push('scaleX(-1)');
|
|
15675
15655
|
useEffect(function () {
|
|
15676
|
-
var
|
|
15656
|
+
var timeout;
|
|
15657
|
+
function doFlip() {
|
|
15677
15658
|
setTransitionTime(1);
|
|
15678
15659
|
setRotationAngle(180);
|
|
15679
|
-
setTimeout(function () {
|
|
15660
|
+
timeout = setTimeout(function () {
|
|
15680
15661
|
setTransitionTime(0);
|
|
15681
15662
|
setRotationAngle(0);
|
|
15682
15663
|
}, 1500);
|
|
15683
|
-
}
|
|
15684
|
-
setTimeout(doFlip, 250);
|
|
15664
|
+
}
|
|
15685
15665
|
var interval = setInterval(doFlip, 2500);
|
|
15666
|
+
timeout = setTimeout(doFlip, 250);
|
|
15686
15667
|
return function () {
|
|
15687
15668
|
clearInterval(interval);
|
|
15669
|
+
clearTimeout(timeout);
|
|
15688
15670
|
};
|
|
15689
15671
|
}, []);
|
|
15690
|
-
return /*#__PURE__*/React__default.createElement(
|
|
15691
|
-
ref: ref,
|
|
15692
|
-
style: __assign(__assign({}, style), {
|
|
15693
|
-
position: 'relative',
|
|
15694
|
-
top: -5
|
|
15695
|
-
})
|
|
15696
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
15697
|
-
style: {
|
|
15698
|
-
display: 'flex',
|
|
15699
|
-
flexFlow: 'column nowrap',
|
|
15700
|
-
height: '100%'
|
|
15701
|
-
}
|
|
15702
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
15703
|
-
style: {
|
|
15704
|
-
width: '100%',
|
|
15705
|
-
height: '100%',
|
|
15706
|
-
flexGrow: 1,
|
|
15707
|
-
textAlign: 'center',
|
|
15708
|
-
color: 'white',
|
|
15709
|
-
display: 'flex',
|
|
15710
|
-
flexDirection: 'column',
|
|
15711
|
-
justifyContent: 'end'
|
|
15712
|
-
}
|
|
15713
|
-
}, /*#__PURE__*/React__default.createElement("span", {
|
|
15714
|
-
style: {
|
|
15715
|
-
alignContent: 'center',
|
|
15716
|
-
marginTop: 12,
|
|
15717
|
-
marginBottom: 12
|
|
15718
|
-
}
|
|
15719
|
-
}, instructionText)), /*#__PURE__*/React__default.createElement("div", {
|
|
15720
|
-
style: {
|
|
15721
|
-
position: 'relative',
|
|
15722
|
-
display: 'flex',
|
|
15723
|
-
flexFlow: 'row nowrap',
|
|
15724
|
-
alignItems: 'center',
|
|
15725
|
-
justifyItems: 'center',
|
|
15726
|
-
maxWidth: "calc(100%)",
|
|
15727
|
-
maxHeight: "calc(100% - ".concat(padding * 2, "px)")
|
|
15728
|
-
}
|
|
15729
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
15730
|
-
style: {
|
|
15731
|
-
width: '100%',
|
|
15732
|
-
height: '100%',
|
|
15733
|
-
minWidth: padding,
|
|
15734
|
-
flexGrow: 1
|
|
15735
|
-
}
|
|
15736
|
-
}), /*#__PURE__*/React__default.createElement("div", {
|
|
15737
|
-
style: {
|
|
15738
|
-
maxWidth: "calc(100% - ".concat(padding * 2, "px - ").concat(borderWidth * 2, "px)"),
|
|
15739
|
-
maxHeight: height - padding * 2 - borderWidth * 2
|
|
15740
|
-
}
|
|
15741
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
15742
|
-
style: {
|
|
15743
|
-
position: 'relative',
|
|
15744
|
-
border: "".concat(borderWidth, "px solid ").concat(borderColor),
|
|
15745
|
-
width: (imageWidth !== null && imageWidth !== void 0 ? imageWidth : 0) + borderWidth * 2
|
|
15746
|
-
}
|
|
15747
|
-
}, /*#__PURE__*/React__default.createElement("img", {
|
|
15672
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FlipImage, {
|
|
15748
15673
|
src: assets.frontImageUrl,
|
|
15749
15674
|
alt: "",
|
|
15750
|
-
|
|
15751
|
-
|
|
15752
|
-
|
|
15753
|
-
|
|
15754
|
-
|
|
15755
|
-
|
|
15756
|
-
|
|
15757
|
-
transformStyle: 'preserve-3d',
|
|
15758
|
-
position: 'relative',
|
|
15759
|
-
top: 0,
|
|
15760
|
-
left: 0,
|
|
15761
|
-
display: 'block'
|
|
15762
|
-
}, imageStyle)
|
|
15763
|
-
}), /*#__PURE__*/React__default.createElement("img", {
|
|
15675
|
+
className: className,
|
|
15676
|
+
"$transforms": frontTransforms.join(' '),
|
|
15677
|
+
"$transitionTime": transitionTime,
|
|
15678
|
+
"$borderWidth": borderWidth,
|
|
15679
|
+
"$imageWidth": imageWidth,
|
|
15680
|
+
"$imageHeight": imageHeight
|
|
15681
|
+
}), /*#__PURE__*/React__default.createElement(FlipImage, {
|
|
15764
15682
|
src: assets.backImageUrl,
|
|
15765
15683
|
alt: "",
|
|
15766
|
-
|
|
15767
|
-
|
|
15768
|
-
|
|
15769
|
-
|
|
15770
|
-
|
|
15771
|
-
|
|
15772
|
-
|
|
15773
|
-
|
|
15774
|
-
display: 'block'
|
|
15775
|
-
}, imageStyle)
|
|
15776
|
-
}))), /*#__PURE__*/React__default.createElement("div", {
|
|
15777
|
-
style: {
|
|
15778
|
-
width: '100%',
|
|
15779
|
-
height: '100%',
|
|
15780
|
-
minWidth: padding,
|
|
15781
|
-
flexGrow: 1
|
|
15782
|
-
}
|
|
15783
|
-
})), /*#__PURE__*/React__default.createElement("div", {
|
|
15784
|
-
style: {
|
|
15785
|
-
width: '100%',
|
|
15786
|
-
height: '100%',
|
|
15787
|
-
flexGrow: 1,
|
|
15788
|
-
textAlign: 'center',
|
|
15789
|
-
color: 'white',
|
|
15790
|
-
display: 'flex',
|
|
15791
|
-
flexDirection: 'column',
|
|
15792
|
-
justifyContent: 'end'
|
|
15793
|
-
}
|
|
15794
|
-
}, /*#__PURE__*/React__default.createElement("span", {
|
|
15795
|
-
style: {
|
|
15796
|
-
alignContent: 'center',
|
|
15797
|
-
marginTop: 12,
|
|
15798
|
-
marginBottom: 12,
|
|
15799
|
-
opacity: 0
|
|
15800
|
-
}
|
|
15801
|
-
}, instructionText))));
|
|
15684
|
+
className: className,
|
|
15685
|
+
"$transforms": backTransforms.join(' '),
|
|
15686
|
+
"$transitionTime": transitionTime,
|
|
15687
|
+
"$borderWidth": borderWidth,
|
|
15688
|
+
"$imageWidth": imageWidth,
|
|
15689
|
+
"$imageHeight": imageHeight,
|
|
15690
|
+
"$isBack": true
|
|
15691
|
+
}));
|
|
15802
15692
|
};
|
|
15693
|
+
var FlipImage = styled.img(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: ", ";\n display: block;\n top: ", "px;\n width: ", "px;\n height: ", "px;\n"], ["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: ", ";\n display: block;\n top: ", "px;\n width: ", "px;\n height: ", "px;\n"])), function (props) {
|
|
15694
|
+
return props.$transitionTime;
|
|
15695
|
+
}, function (props) {
|
|
15696
|
+
return props.$transforms;
|
|
15697
|
+
}, function (props) {
|
|
15698
|
+
return props.$isBack ? 'absolute' : 'relative';
|
|
15699
|
+
}, function (props) {
|
|
15700
|
+
return -props.$borderWidth / 2;
|
|
15701
|
+
}, function (props) {
|
|
15702
|
+
return props.$imageWidth;
|
|
15703
|
+
}, function (props) {
|
|
15704
|
+
return props.$imageHeight + props.$borderWidth;
|
|
15705
|
+
});
|
|
15706
|
+
var templateObject_1$8;
|
|
15803
15707
|
|
|
15804
15708
|
var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
|
|
15805
15709
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
@@ -15829,104 +15733,77 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
|
|
|
15829
15733
|
assets.backImageUrl || (assets.backImageUrl = "".concat(DEFAULT_CDN_URL, "/Shieldout-IDCard-Back-SVG-Landscape-2.svg"));
|
|
15830
15734
|
var verbiage = useTranslations(rawVerbiage, {
|
|
15831
15735
|
idFrontInstructionText: 'Display the front of your ID card...',
|
|
15832
|
-
idBackInstructionText: 'Display the back of your ID card...'
|
|
15736
|
+
idBackInstructionText: 'Display the back of your ID card...',
|
|
15737
|
+
flipIdInstructionText: 'Please flip your ID card...'
|
|
15833
15738
|
});
|
|
15834
|
-
var instructionText = requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : verbiage.idBackInstructionText;
|
|
15739
|
+
var instructionText = requestedAction === 'SHOW_ID_FRONT' ? verbiage.idFrontInstructionText : requestedAction === 'FLIP_ID' ? verbiage.flipIdInstructionText : verbiage.idBackInstructionText;
|
|
15835
15740
|
var idGuideWidth = typeof window !== 'undefined' && window.innerWidth > window.innerHeight ? '30%' : '75%';
|
|
15836
15741
|
var theme = useTheme();
|
|
15837
15742
|
if (faceGuideBorderWidth === undefined) faceGuideBorderWidth = (_d = (_c = (_b = theme.idVideoCapture) === null || _b === void 0 ? void 0 : _b.faceGuides) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 4;
|
|
15838
15743
|
if (faceGuideBorderColor === undefined) faceGuideBorderColor = (_j = satisfied ? (_f = (_e = theme.idVideoCapture) === null || _e === void 0 ? void 0 : _e.faceGuides) === null || _f === void 0 ? void 0 : _f.satisfiedColor : (_h = (_g = theme.idVideoCapture) === null || _g === void 0 ? void 0 : _g.faceGuides) === null || _h === void 0 ? void 0 : _h.unsatisfiedColor) !== null && _j !== void 0 ? _j : 'white';
|
|
15839
15744
|
if (idCardGuideBorderWidth === undefined) idCardGuideBorderWidth = (_m = (_l = (_k = theme.idVideoCapture) === null || _k === void 0 ? void 0 : _k.idCardGuides) === null || _l === void 0 ? void 0 : _l.borderWidth) !== null && _m !== void 0 ? _m : 4;
|
|
15840
15745
|
if (idCardGuideBorderColor === undefined) idCardGuideBorderColor = (_s = satisfied ? (_p = (_o = theme.idVideoCapture) === null || _o === void 0 ? void 0 : _o.idCardGuides) === null || _p === void 0 ? void 0 : _p.satisfiedColor : (_r = (_q = theme.idVideoCapture) === null || _q === void 0 ? void 0 : _q.idCardGuides) === null || _r === void 0 ? void 0 : _r.unsatisfiedColor) !== null && _s !== void 0 ? _s : 'white';
|
|
15841
|
-
return /*#__PURE__*/React__default.createElement(
|
|
15746
|
+
return /*#__PURE__*/React__default.createElement(Container, {
|
|
15842
15747
|
className: classNames.container
|
|
15843
15748
|
}, /*#__PURE__*/React__default.createElement(FaceGuide, {
|
|
15844
15749
|
className: classNames.faceGuide,
|
|
15845
15750
|
"$borderWidth": faceGuideBorderWidth,
|
|
15846
15751
|
"$borderColor": faceGuideBorderColor
|
|
15847
|
-
}),
|
|
15752
|
+
}), /*#__PURE__*/React__default.createElement(IdCardGuideContainer, {
|
|
15753
|
+
"$width": idGuideWidth,
|
|
15754
|
+
className: classNames.idCardGuideContainer
|
|
15755
|
+
}, /*#__PURE__*/React__default.createElement(IdCardGuideInstructionsContainer, {
|
|
15756
|
+
className: classNames.idCardGuideInstructionsContainer
|
|
15757
|
+
}, /*#__PURE__*/React__default.createElement(IdCardGuideInstructions, {
|
|
15758
|
+
className: classNames.idCardGuideInstructions
|
|
15759
|
+
}, instructionText)), /*#__PURE__*/React__default.createElement(IdCardGuideImageContainer, {
|
|
15760
|
+
"$borderWidth": idCardGuideBorderWidth,
|
|
15761
|
+
"$borderColor": idCardGuideBorderColor,
|
|
15762
|
+
className: classNames.idCardGuideImageContainer
|
|
15763
|
+
}, requestedAction === 'FLIP_ID' ? ( /*#__PURE__*/React__default.createElement(IdVideoCaptureFlipIdPrompt, {
|
|
15848
15764
|
assets: assets,
|
|
15849
|
-
verbiage: {
|
|
15850
|
-
instructionText: verbiage.flipIdInstructionText
|
|
15851
|
-
},
|
|
15852
15765
|
imageWidth: imageWidth,
|
|
15853
15766
|
imageHeight: imageHeight,
|
|
15854
15767
|
borderWidth: idCardGuideBorderWidth,
|
|
15855
|
-
|
|
15856
|
-
|
|
15857
|
-
width: idGuideWidth,
|
|
15858
|
-
margin: '2% auto 2%'
|
|
15859
|
-
}
|
|
15860
|
-
})) : ( /*#__PURE__*/React__default.createElement("div", {
|
|
15861
|
-
style: {
|
|
15862
|
-
width: idGuideWidth,
|
|
15863
|
-
margin: '2% auto 2%',
|
|
15864
|
-
display: 'flex',
|
|
15865
|
-
flexFlow: 'column nowrap'
|
|
15866
|
-
}
|
|
15867
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
15868
|
-
style: {
|
|
15869
|
-
width: '100%',
|
|
15870
|
-
height: '100%',
|
|
15871
|
-
flexGrow: 1,
|
|
15872
|
-
textAlign: 'center',
|
|
15873
|
-
color: 'white',
|
|
15874
|
-
display: 'flex',
|
|
15875
|
-
flexDirection: 'column',
|
|
15876
|
-
justifyContent: 'end'
|
|
15877
|
-
}
|
|
15878
|
-
}, /*#__PURE__*/React__default.createElement("span", {
|
|
15879
|
-
style: {
|
|
15880
|
-
alignContent: 'center',
|
|
15881
|
-
marginTop: 12,
|
|
15882
|
-
marginBottom: 12
|
|
15883
|
-
}
|
|
15884
|
-
}, instructionText)), /*#__PURE__*/React__default.createElement("div", {
|
|
15885
|
-
style: {
|
|
15886
|
-
border: "".concat(idCardGuideBorderWidth, "px solid ").concat(idCardGuideBorderColor)
|
|
15887
|
-
}
|
|
15888
|
-
}, /*#__PURE__*/React__default.createElement(GuideImage, {
|
|
15768
|
+
className: classNames.flipIdPromptImage
|
|
15769
|
+
})) : ( /*#__PURE__*/React__default.createElement(IdCardGuideImage, {
|
|
15889
15770
|
ref: imageRef,
|
|
15890
15771
|
src: requestedAction === 'SHOW_ID_BACK' ? assets.backImageUrl : assets.frontImageUrl,
|
|
15891
15772
|
alt: "",
|
|
15773
|
+
className: classNames.idCardGuideImage,
|
|
15892
15774
|
"$isMirrored": !((_t = cameraRef.current) === null || _t === void 0 ? void 0 : _t.isRearFacing),
|
|
15893
15775
|
onLoad: function onLoad() {
|
|
15894
15776
|
var _a, _b, _c, _d;
|
|
15895
15777
|
if (!imageWidth) setImageWidth((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
|
|
15896
15778
|
if (!imageHeight) setImageHeight((_d = (_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
|
|
15897
15779
|
}
|
|
15898
|
-
}))
|
|
15899
|
-
style: {
|
|
15900
|
-
width: '100%',
|
|
15901
|
-
height: '100%',
|
|
15902
|
-
flexGrow: 1,
|
|
15903
|
-
textAlign: 'center',
|
|
15904
|
-
color: 'white',
|
|
15905
|
-
display: 'flex',
|
|
15906
|
-
flexDirection: 'column',
|
|
15907
|
-
justifyContent: 'end'
|
|
15908
|
-
}
|
|
15909
|
-
}, /*#__PURE__*/React__default.createElement("span", {
|
|
15910
|
-
style: {
|
|
15911
|
-
alignContent: 'center',
|
|
15912
|
-
marginTop: 12,
|
|
15913
|
-
marginBottom: 12,
|
|
15914
|
-
opacity: 0
|
|
15915
|
-
}
|
|
15916
|
-
}, instructionText))))));
|
|
15780
|
+
})))));
|
|
15917
15781
|
};
|
|
15918
|
-
var Container = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position:
|
|
15919
|
-
var
|
|
15782
|
+
var Container = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n font-family: ", ";\n"], ["\n position: fixed;\n z-index: 1000;\n width: 100dvw;\n height: 100dvh;\n display: flex;\n flex-direction: column;\n font-family: ", ";\n"])), function (props) {
|
|
15783
|
+
var _a;
|
|
15784
|
+
return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
|
|
15785
|
+
});
|
|
15786
|
+
var FaceGuide = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n border-width: ", "px;\n border-color: ", ";\n border-style: solid;\n border-radius: 50%;\n aspect-ratio: 1 / 1.618;\n height: 100%;\n min-height: 33dvh;\n margin: 4% auto auto;\n"], ["\n border-width: ", "px;\n border-color: ", ";\n border-style: solid;\n border-radius: 50%;\n aspect-ratio: 1 / 1.618;\n height: 100%;\n min-height: 33dvh;\n margin: 4% auto auto;\n"])), function (props) {
|
|
15920
15787
|
var _a;
|
|
15921
15788
|
return (_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 0;
|
|
15922
15789
|
}, function (props) {
|
|
15923
15790
|
var _a;
|
|
15924
15791
|
return (_a = props.$borderColor) !== null && _a !== void 0 ? _a : 'white';
|
|
15925
15792
|
});
|
|
15926
|
-
var
|
|
15793
|
+
var IdCardGuideContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n width: ", ";\n display: flex;\n flex-flow: column nowrap;\n margin: 2% auto;\n"], ["\n width: ", ";\n display: flex;\n flex-flow: column nowrap;\n margin: 2% auto;\n"])), function (props) {
|
|
15794
|
+
return props.$width;
|
|
15795
|
+
});
|
|
15796
|
+
var IdCardGuideInstructionsContainer = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n width: 100%;\n flex-grow: 1;\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n"], ["\n width: 100%;\n flex-grow: 1;\n text-align: center;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: end;\n"])));
|
|
15797
|
+
var IdCardGuideInstructions = styled.span(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"], ["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"])));
|
|
15798
|
+
var IdCardGuideImageContainer = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n position: relative;\n border: ", "px solid\n ", ";\n"], ["\n position: relative;\n border: ", "px solid\n ", ";\n"])), function (props) {
|
|
15799
|
+
return props.$borderWidth;
|
|
15800
|
+
}, function (props) {
|
|
15801
|
+
return props.$borderColor;
|
|
15802
|
+
});
|
|
15803
|
+
var IdCardGuideImage = styled.img(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 100%;\n max-height: 100%;\n ", "\n"], ["\n width: 100%;\n max-height: 100%;\n ", "\n"])), function (props) {
|
|
15927
15804
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
15928
15805
|
});
|
|
15929
|
-
var templateObject_1$7, templateObject_2$7, templateObject_3$7;
|
|
15806
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7;
|
|
15930
15807
|
|
|
15931
15808
|
var ReadTextPrompt = function ReadTextPrompt(_a) {
|
|
15932
15809
|
var text = _a.text,
|
|
@@ -16342,7 +16219,13 @@ var IdVideoCapture = function IdVideoCapture(_a) {
|
|
|
16342
16219
|
className: classNames.guidanceMessage,
|
|
16343
16220
|
"$background": (_q = (_p = (_o = theme.guidanceMessages) === null || _o === void 0 ? void 0 : _o.negative) === null || _p === void 0 ? void 0 : _p.backgroundColor) !== null && _q !== void 0 ? _q : 'red',
|
|
16344
16221
|
"$textColor": (_t = (_s = (_r = theme.guidanceMessages) === null || _r === void 0 ? void 0 : _r.negative) === null || _s === void 0 ? void 0 : _s.textColor) !== null && _t !== void 0 ? _t : 'white'
|
|
16345
|
-
}, guidanceText))), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default.createElement("br", null), isRecording ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__default.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__default.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__default.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__default.createElement("br", null), "Best Frame Detection Score: ", bestFrameDetectionScore, /*#__PURE__*/React__default.createElement("br", null), "Best Frame Focus Score: ", bestFrameFocusScore)), countdownRemaining && capturingId && ( /*#__PURE__*/React__default.createElement(CountdownContainer,
|
|
16222
|
+
}, guidanceText))), debugMode && ( /*#__PURE__*/React__default.createElement(DebugStatsPane, null, cameraRef.current ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", cameraRef.current.label, " (", cameraRef.current.width, "x", cameraRef.current.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default.createElement("br", null), isRecording ? '✅ Recording' : '❌ Not recording', /*#__PURE__*/React__default.createElement("br", null), goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', goodFramesCount, "/", goodFramesThreshold, /*#__PURE__*/React__default.createElement("br", null), "Detection Score: ", currentDetectionScore, /*#__PURE__*/React__default.createElement("br", null), "Focus Score: ", currentFocusScore, /*#__PURE__*/React__default.createElement("br", null), "Best Frame Detection Score: ", bestFrameDetectionScore, /*#__PURE__*/React__default.createElement("br", null), "Best Frame Focus Score: ", bestFrameFocusScore)), countdownRemaining && capturingId && ( /*#__PURE__*/React__default.createElement(CountdownContainer, {
|
|
16223
|
+
className: classNames.countdownContainer
|
|
16224
|
+
}, /*#__PURE__*/React__default.createElement(Countdown, {
|
|
16225
|
+
className: classNames.countdown
|
|
16226
|
+
}, countdownRemaining))), (!idCaptureModelsEnabled || modelError) && capturingId && ( /*#__PURE__*/React__default.createElement(CaptureButtonContainer, {
|
|
16227
|
+
className: classNames.captureBtnContainer
|
|
16228
|
+
}, /*#__PURE__*/React__default.createElement(CaptureButton, {
|
|
16346
16229
|
finished: true,
|
|
16347
16230
|
onClick: function onClick() {
|
|
16348
16231
|
return setCountdownStartedAt(new Date());
|