idmission-web-sdk 2.3.171-feature-barcode-recapture-a8375e9 → 2.3.171-feature-barcode-recapture-d495693
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/id_capture/BarcodeGuideOverlay.d.ts +23 -0
- package/dist/components/id_capture/BarcodeGuideOverlay.d.ts.map +1 -0
- package/dist/components/id_capture/BarcodeSuccessOverlay.d.ts +8 -0
- package/dist/components/id_capture/BarcodeSuccessOverlay.d.ts.map +1 -0
- package/dist/components/id_capture/IdCaptureGuides.d.ts +5 -1
- package/dist/components/id_capture/IdCaptureGuides.d.ts.map +1 -1
- package/dist/components/id_capture/IdCaptureWizard.d.ts.map +1 -1
- package/dist/sdk2.cjs.development.js +277 -95
- 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 +277 -95
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +277 -95
- 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/package.json +1 -1
package/dist/sdk2.esm.js
CHANGED
|
@@ -445,16 +445,16 @@ var LoaderButton = function LoaderButton(_a) {
|
|
|
445
445
|
className: "ladda-label"
|
|
446
446
|
}, children));
|
|
447
447
|
};
|
|
448
|
-
var StyledButton = styled.button(templateObject_1$R || (templateObject_1$R = __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\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\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) {
|
|
448
|
+
var StyledButton = styled.button(templateObject_1$T || (templateObject_1$T = __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\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\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) {
|
|
449
449
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
450
450
|
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 ");
|
|
451
451
|
});
|
|
452
|
-
var templateObject_1$
|
|
452
|
+
var templateObject_1$T;
|
|
453
453
|
|
|
454
|
-
var ButtonsRow$2 = styled.div(templateObject_1$
|
|
455
|
-
var templateObject_1$
|
|
454
|
+
var ButtonsRow$2 = styled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n text-align: left;\n"], ["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n text-align: left;\n"])));
|
|
455
|
+
var templateObject_1$S;
|
|
456
456
|
|
|
457
|
-
var GuidanceMessageContainerDiv = styled.div(templateObject_1$
|
|
457
|
+
var GuidanceMessageContainerDiv = styled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: absolute;\n top: calc(", ");\n ", "\n font-weight: bold;\n width: 100%;\n display: flex;\n padding: 0 10%;\n box-sizing: border-box;\n"], ["\n position: absolute;\n top: calc(", ");\n ", "\n font-weight: bold;\n width: 100%;\n display: flex;\n padding: 0 10%;\n box-sizing: border-box;\n"])), function (_a) {
|
|
458
458
|
var $top = _a.$top;
|
|
459
459
|
return $top !== null && $top !== void 0 ? $top : '10%';
|
|
460
460
|
}, function (_a) {
|
|
@@ -467,36 +467,36 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
|
|
|
467
467
|
if (!portalLocation) return element;
|
|
468
468
|
return /*#__PURE__*/createPortal(element, portalLocation);
|
|
469
469
|
};
|
|
470
|
-
var GuidanceMessage = styled.div(templateObject_2$
|
|
470
|
+
var GuidanceMessage = styled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n border-radius: 8px;\n z-index: 10001;\n padding: 16px 24px;\n font-size: 18px;\n font-weight: bold;\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 margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n border-radius: 8px;\n z-index: 10001;\n padding: 16px 24px;\n font-size: 18px;\n font-weight: bold;\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"])), function (props) {
|
|
471
471
|
var _a, _b, _c, _d, _e, _f;
|
|
472
472
|
return (_f = (_a = props.$background) !== 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.backgroundColor) !== null && _f !== void 0 ? _f : 'white';
|
|
473
473
|
}, function (props) {
|
|
474
474
|
var _a, _b, _c, _d, _e, _f;
|
|
475
475
|
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';
|
|
476
476
|
});
|
|
477
|
-
var templateObject_1$
|
|
477
|
+
var templateObject_1$R, templateObject_2$M;
|
|
478
478
|
|
|
479
|
-
var wavesAnimation = keyframes(templateObject_1$
|
|
480
|
-
var progressBarAnimation = keyframes(templateObject_2$
|
|
481
|
-
var dualRingSpinnerAnimation = keyframes(templateObject_3$
|
|
482
|
-
var progressBorderAnimation = keyframes(templateObject_4$
|
|
483
|
-
var templateObject_1$
|
|
479
|
+
var wavesAnimation = keyframes(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n 0% {\n opacity: 0;\n transform: scale3d(1, 1, 1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale3d(2, 2, 1);\n opacity: 0;\n }\n"], ["\n 0% {\n opacity: 0;\n transform: scale3d(1, 1, 1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale3d(2, 2, 1);\n opacity: 0;\n }\n"])));
|
|
480
|
+
var progressBarAnimation = keyframes(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n"], ["\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n"])));
|
|
481
|
+
var dualRingSpinnerAnimation = keyframes(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
|
|
482
|
+
var progressBorderAnimation = keyframes(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n to {\n stroke-dashoffset: 0;\n }\n"], ["\n to {\n stroke-dashoffset: 0;\n }\n"])));
|
|
483
|
+
var templateObject_1$Q, templateObject_2$L, templateObject_3$x, templateObject_4$r;
|
|
484
484
|
|
|
485
|
-
var OverlayContainer = styled.div(templateObject_1$
|
|
485
|
+
var OverlayContainer = 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\n display: flex;\n flex-direction: column;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n background: ", ";\n ", "\n\n z-index: 10000;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n background: ", ";\n ", "\n\n z-index: 10000;\n"])), function (props) {
|
|
486
486
|
return props.theme.background ? "".concat(props.theme.background) : "white";
|
|
487
487
|
}, function (props) {
|
|
488
488
|
return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
|
|
489
489
|
});
|
|
490
|
-
var OverlayInner$2 = styled.div(templateObject_2$
|
|
490
|
+
var OverlayInner$2 = styled.div(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n width: 100%;\n height: 100%;\n ", "\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n width: 100%;\n height: 100%;\n ", "\n"])), function (props) {
|
|
491
491
|
var _a;
|
|
492
492
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
493
493
|
}, function (props) {
|
|
494
494
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
495
495
|
});
|
|
496
|
-
var OverlayImageContainer = styled.div(templateObject_3$
|
|
497
|
-
var OverlayImageRow = styled.div(templateObject_4$
|
|
498
|
-
var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$
|
|
499
|
-
var ButtonsColumn = styled.div(templateObject_6$
|
|
496
|
+
var OverlayImageContainer = styled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\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 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"])));
|
|
497
|
+
var OverlayImageRow = styled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100% - 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(100% - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"])));
|
|
498
|
+
var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n background: #f7f6fb;\n"], ["\n background: #f7f6fb;\n"])));
|
|
499
|
+
var ButtonsColumn = styled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"])));
|
|
500
500
|
var WideButton = styled(LoaderButton)(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n width: 100%;\n border-radius: 30px;\n"], ["\n width: 100%;\n border-radius: 30px;\n"])));
|
|
501
501
|
var WideBorderButton = styled(WideButton)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n border: 1px solid\n ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n background: ", ";\n border: 1px solid\n ", ";\n box-sizing: border-box;\n"])), function (props) {
|
|
502
502
|
var _a, _b;
|
|
@@ -535,7 +535,7 @@ var LoadingOverlayLoadingListItem = styled.li(templateObject_19$2 || (templateOb
|
|
|
535
535
|
var LoadingOverlayProgressContainer = styled.div(templateObject_20$2 || (templateObject_20$2 = __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"])));
|
|
536
536
|
var LoadingOverlayCustomLoadingGraphic = styled.img(templateObject_21$2 || (templateObject_21$2 = __makeTemplateObject(["\n transform-style: preserve-3d;\n"], ["\n transform-style: preserve-3d;\n"])));
|
|
537
537
|
var LoadingOverlayContinueButtonContainer = styled.div(templateObject_22$2 || (templateObject_22$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
538
|
-
var templateObject_1$
|
|
538
|
+
var templateObject_1$P, templateObject_2$K, templateObject_3$w, templateObject_4$q, templateObject_5$i, templateObject_6$b, templateObject_7$7, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$2, templateObject_21$2, templateObject_22$2;
|
|
539
539
|
|
|
540
540
|
var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
|
|
541
541
|
var accessBlockedImageUrl = _a.accessBlockedImageUrl;
|
|
@@ -3275,8 +3275,8 @@ function getFrameDimensions(frame) {
|
|
|
3275
3275
|
return [frameWidth, frameHeight];
|
|
3276
3276
|
}
|
|
3277
3277
|
|
|
3278
|
-
var InvisibleCanvasContainer = styled.div(templateObject_1$
|
|
3279
|
-
var InvisibleCanvas = styled.canvas(templateObject_2$
|
|
3278
|
+
var InvisibleCanvasContainer = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n user-select: none;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n user-select: none;\n"])));
|
|
3279
|
+
var InvisibleCanvas = styled.canvas(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
3280
3280
|
function drawToCanvas(canvas, frame, width, height) {
|
|
3281
3281
|
if (!canvas) return;
|
|
3282
3282
|
var ctx = canvas.getContext('2d');
|
|
@@ -3296,7 +3296,7 @@ function clearCanvas(canvas) {
|
|
|
3296
3296
|
var _a;
|
|
3297
3297
|
(_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
|
|
3298
3298
|
}
|
|
3299
|
-
var templateObject_1$
|
|
3299
|
+
var templateObject_1$O, templateObject_2$J;
|
|
3300
3300
|
|
|
3301
3301
|
function useFrameLoop(fn, options) {
|
|
3302
3302
|
if (options === void 0) {
|
|
@@ -5092,14 +5092,14 @@ function CameraTamperSeal(_a) {
|
|
|
5092
5092
|
className: classNames.message
|
|
5093
5093
|
}, messageText)));
|
|
5094
5094
|
}
|
|
5095
|
-
var StyledOverlayInner$4 = styled(OverlayInner$2)(templateObject_1$
|
|
5096
|
-
var StyledOverlayHeading = styled.h3(templateObject_2$
|
|
5095
|
+
var StyledOverlayInner$4 = styled(OverlayInner$2)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
5096
|
+
var StyledOverlayHeading = styled.h3(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
5097
5097
|
function useCameraStore(selector) {
|
|
5098
5098
|
var store = useContext(CameraStoreContext);
|
|
5099
5099
|
if (!store) throw new Error('useCameraStore cannot be used without Provider');
|
|
5100
5100
|
return useStore(store, selector);
|
|
5101
5101
|
}
|
|
5102
|
-
var templateObject_1$
|
|
5102
|
+
var templateObject_1$N, templateObject_2$I;
|
|
5103
5103
|
|
|
5104
5104
|
var DocumentDetectionModelContext = /*#__PURE__*/createContext({
|
|
5105
5105
|
startDocumentDetection: function startDocumentDetection() {
|
|
@@ -7014,12 +7014,12 @@ function DebugStatsPane(_a) {
|
|
|
7014
7014
|
if (!portalLocation) return element;
|
|
7015
7015
|
return /*#__PURE__*/createPortal(element, portalLocation);
|
|
7016
7016
|
}
|
|
7017
|
-
var DebugStatsPaneDiv = styled.span(templateObject_1$
|
|
7018
|
-
var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$
|
|
7017
|
+
var DebugStatsPaneDiv = styled.span(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n margin-right: 20px;\n padding: 8px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10002;\n pointer-events: none;\n"], ["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n margin-right: 20px;\n padding: 8px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10002;\n pointer-events: none;\n"])));
|
|
7018
|
+
var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n position: absolute;\n z-index: 1001;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n pointer-events: none;\n ", "\n transform-style: preserve-3d;\n"], ["\n position: absolute;\n z-index: 1001;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n pointer-events: none;\n ", "\n transform-style: preserve-3d;\n"])), function (_a) {
|
|
7019
7019
|
var $flipX = _a.$flipX;
|
|
7020
7020
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
7021
7021
|
});
|
|
7022
|
-
var ObjectDetectionDebugBox = styled.div(templateObject_3$
|
|
7022
|
+
var ObjectDetectionDebugBox = styled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n transform-style: preserve-3d;\n"], ["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n transform-style: preserve-3d;\n"])), function (_a) {
|
|
7023
7023
|
var $color = _a.$color;
|
|
7024
7024
|
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
7025
7025
|
}, function (_a) {
|
|
@@ -7029,7 +7029,7 @@ var ObjectDetectionDebugBox = styled.div(templateObject_3$t || (templateObject_3
|
|
|
7029
7029
|
var $flipX = _a.$flipX;
|
|
7030
7030
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
7031
7031
|
});
|
|
7032
|
-
var FaceDetectionKeypointMarker = styled.div(templateObject_4$
|
|
7032
|
+
var FaceDetectionKeypointMarker = styled.div(templateObject_4$p || (templateObject_4$p = __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 transform-style: preserve-3d;\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 transform-style: preserve-3d;\n"])), function (_a) {
|
|
7033
7033
|
var $color = _a.$color;
|
|
7034
7034
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
7035
7035
|
}, function (_a) {
|
|
@@ -7227,7 +7227,7 @@ function SelfieCaptureFaceKeypoint(_a) {
|
|
|
7227
7227
|
}
|
|
7228
7228
|
});
|
|
7229
7229
|
}
|
|
7230
|
-
var templateObject_1$
|
|
7230
|
+
var templateObject_1$M, templateObject_2$H, templateObject_3$v, templateObject_4$p;
|
|
7231
7231
|
|
|
7232
7232
|
function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
7233
7233
|
var _b = _a.classNames,
|
|
@@ -7260,18 +7260,18 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
|
7260
7260
|
}
|
|
7261
7261
|
}, verbiage.buttonText))));
|
|
7262
7262
|
}
|
|
7263
|
-
var Container$7 = styled.div(templateObject_1$
|
|
7263
|
+
var Container$7 = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"], ["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"])), function (props) {
|
|
7264
7264
|
var _a, _b, _c;
|
|
7265
7265
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.backgroundColor) !== null && _c !== void 0 ? _c : '#eed202';
|
|
7266
7266
|
}, function (props) {
|
|
7267
7267
|
var _a, _b, _c;
|
|
7268
7268
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.textColor) !== null && _c !== void 0 ? _c : 'black';
|
|
7269
7269
|
});
|
|
7270
|
-
var InnerContainer = styled.div(templateObject_2$
|
|
7271
|
-
var Message = styled.span(templateObject_3$
|
|
7272
|
-
var ButtonContainer = styled.div(templateObject_4$
|
|
7273
|
-
var Button$1 = styled(LoaderButton)(templateObject_5$
|
|
7274
|
-
var templateObject_1$
|
|
7270
|
+
var InnerContainer = styled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"])));
|
|
7271
|
+
var Message = styled.span(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: block;\n margin: auto 12px auto 0;\n"], ["\n display: block;\n margin: auto 12px auto 0;\n"])));
|
|
7272
|
+
var ButtonContainer = styled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n display: flex;\n margin-left: auto;\n"], ["\n display: flex;\n margin-left: auto;\n"])));
|
|
7273
|
+
var Button$1 = styled(LoaderButton)(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n white-space: nowrap;\n margin: auto;\n"], ["\n white-space: nowrap;\n margin: auto;\n"])));
|
|
7274
|
+
var templateObject_1$L, templateObject_2$G, templateObject_3$u, templateObject_4$o, templateObject_5$h;
|
|
7275
7275
|
|
|
7276
7276
|
// This is a simplified version of https://github.com/ZeeCoder/use-resize-observer.
|
|
7277
7277
|
// We have removed all options and made it compliant with React Compiler/React 19.
|
|
@@ -7603,13 +7603,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
7603
7603
|
finished: true
|
|
7604
7604
|
}, verbiage.retryBtnText)));
|
|
7605
7605
|
};
|
|
7606
|
-
var StyledOverlayInner$3 = styled(OverlayInner$2)(templateObject_1$
|
|
7607
|
-
var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$
|
|
7608
|
-
var Description$4 = styled.p(templateObject_3$
|
|
7609
|
-
var RetryButton$1 = styled(LoaderButton)(templateObject_4$
|
|
7610
|
-
var templateObject_1$
|
|
7606
|
+
var StyledOverlayInner$3 = styled(OverlayInner$2)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
|
|
7607
|
+
var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
7608
|
+
var Description$4 = styled.p(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
7609
|
+
var RetryButton$1 = styled(LoaderButton)(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
7610
|
+
var templateObject_1$K, templateObject_2$F, templateObject_3$t, templateObject_4$n;
|
|
7611
7611
|
|
|
7612
|
-
var ExitCaptureStyledButton = styled.button(templateObject_1$
|
|
7612
|
+
var ExitCaptureStyledButton = styled.button(templateObject_1$J || (templateObject_1$J = __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: 10002;\n border: none;\n border-radius: 4px;\n background: var(--idm-color-secondary-200);\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: 10002;\n border: none;\n border-radius: 4px;\n background: var(--idm-color-secondary-200);\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"])));
|
|
7613
7613
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
7614
7614
|
var onClick = _a.onClick,
|
|
7615
7615
|
className = _a.className;
|
|
@@ -7653,7 +7653,7 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
|
7653
7653
|
y2: "19.75"
|
|
7654
7654
|
}))));
|
|
7655
7655
|
};
|
|
7656
|
-
var templateObject_1$
|
|
7656
|
+
var templateObject_1$J;
|
|
7657
7657
|
|
|
7658
7658
|
function IdCaptureLoadingGraphic(props) {
|
|
7659
7659
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
@@ -8128,21 +8128,21 @@ function IdCaptureLoadingGraphicMobile(_a) {
|
|
|
8128
8128
|
fill: "white"
|
|
8129
8129
|
}))));
|
|
8130
8130
|
}
|
|
8131
|
-
var LoadingGraphicWrapper = styled.div(templateObject_1$
|
|
8132
|
-
var LoadingGraphicSvg = styled.svg(templateObject_2$
|
|
8131
|
+
var LoadingGraphicWrapper = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: flex;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n width: 100%;\n height: 100%;\n"])));
|
|
8132
|
+
var LoadingGraphicSvg = styled.svg(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n margin: auto;\n transform: scale(\n ", "\n );\n transform-style: preserve-3d;\n transition:\n transform 0.2s linear,\n border-width 0.2s linear;\n border: ", "px solid\n ", ";\n max-height: 80%;\n max-width: 80%;\n"], ["\n margin: auto;\n transform: scale(\n ", "\n );\n transform-style: preserve-3d;\n transition:\n transform 0.2s linear,\n border-width 0.2s linear;\n border: ", "px solid\n ", ";\n max-height: 80%;\n max-width: 80%;\n"])), function (props) {
|
|
8133
8133
|
return props.$frame > 1 ? 1 : props.$frame === 1 ? 1.25 : 0.75;
|
|
8134
8134
|
}, function (props) {
|
|
8135
8135
|
return props.$frame >= 5 ? 10 : 0;
|
|
8136
8136
|
}, function (props) {
|
|
8137
8137
|
return props.$borderColor;
|
|
8138
8138
|
});
|
|
8139
|
-
var LoadingGraphicCardGroup = styled.g(templateObject_3$
|
|
8139
|
+
var LoadingGraphicCardGroup = styled.g(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"], ["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"])), function (props) {
|
|
8140
8140
|
return props.$offScreen ? '-500px' : '0';
|
|
8141
8141
|
});
|
|
8142
|
-
var LoadingGraphicPhoneGroup = styled.g(templateObject_4$
|
|
8142
|
+
var LoadingGraphicPhoneGroup = styled.g(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"], ["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"])), function (props) {
|
|
8143
8143
|
return props.$offScreen ? '40px' : '0';
|
|
8144
8144
|
});
|
|
8145
|
-
var templateObject_1$
|
|
8145
|
+
var templateObject_1$I, templateObject_2$E, templateObject_3$s, templateObject_4$m;
|
|
8146
8146
|
|
|
8147
8147
|
function LoadingListItemIndicator(_a) {
|
|
8148
8148
|
var _b = _a.state,
|
|
@@ -8411,24 +8411,24 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
|
|
|
8411
8411
|
}
|
|
8412
8412
|
}, ready ? verbiage.continueText : verbiage.pleaseWaitText))))));
|
|
8413
8413
|
};
|
|
8414
|
-
var OverlayInner$1 = styled(LoadingOverlayInner)(templateObject_1$
|
|
8414
|
+
var OverlayInner$1 = styled(LoadingOverlayInner)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n"], ["\n background: ", ";\n color: ", ";\n"])), function (props) {
|
|
8415
8415
|
var _a, _b, _c, _d;
|
|
8416
8416
|
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';
|
|
8417
8417
|
}, function (props) {
|
|
8418
8418
|
var _a, _b, _c, _d;
|
|
8419
8419
|
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.textColor) !== null && _d !== void 0 ? _d : 'black';
|
|
8420
8420
|
});
|
|
8421
|
-
var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_2$
|
|
8422
|
-
var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_3$
|
|
8423
|
-
var ContinuityCameraCheckbox$1 = styled.input(templateObject_4$
|
|
8424
|
-
var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$
|
|
8421
|
+
var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n position: absolute;\n bottom: 120px;\n width: 100%;\n display: flex;\n"], ["\n position: absolute;\n bottom: 120px;\n width: 100%;\n display: flex;\n"])));
|
|
8422
|
+
var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n align-items: center;\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 display: flex;\n gap: 8px;\n align-items: center;\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"])));
|
|
8423
|
+
var ContinuityCameraCheckbox$1 = styled.input(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
8424
|
+
var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n color: ", ";\n ", "\n"], ["\n color: ", ";\n ", "\n"])), function (props) {
|
|
8425
8425
|
var _a, _b, _c, _d;
|
|
8426
8426
|
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.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
|
|
8427
8427
|
}, function (props) {
|
|
8428
8428
|
var _a, _b, _c, _d, _e, _f;
|
|
8429
8429
|
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.progressBarFontSize) ? "font-size: ".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.progressBarFontSize, ";") : '';
|
|
8430
8430
|
});
|
|
8431
|
-
var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$
|
|
8431
|
+
var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n background: ", ";\n opacity: ", ";\n"], ["\n background: ", ";\n opacity: ", ";\n"])), function (props) {
|
|
8432
8432
|
var _a, _b, _c, _d;
|
|
8433
8433
|
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.progressBarBackgroundColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
|
|
8434
8434
|
}, function (props) {
|
|
@@ -8458,10 +8458,10 @@ var ContinueButton$1 = styled(LoaderButton)(templateObject_8$5 || (templateObjec
|
|
|
8458
8458
|
var _a, _b, _c, _d;
|
|
8459
8459
|
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.continueBtnDisabledBorder) !== null && _d !== void 0 ? _d : 'none';
|
|
8460
8460
|
});
|
|
8461
|
-
var templateObject_1$
|
|
8461
|
+
var templateObject_1$H, templateObject_2$D, templateObject_3$r, templateObject_4$l, templateObject_5$g, templateObject_6$a, templateObject_7$6, templateObject_8$5;
|
|
8462
8462
|
|
|
8463
|
-
var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$
|
|
8464
|
-
var ContinuityCameraCheckbox = styled.input(templateObject_2$
|
|
8463
|
+
var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
|
|
8464
|
+
var ContinuityCameraCheckbox = styled.input(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8465
8465
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
8466
8466
|
var _b, _c, _d, _e;
|
|
8467
8467
|
var onDismissed = _a.onDismissed,
|
|
@@ -8582,7 +8582,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
8582
8582
|
}
|
|
8583
8583
|
}, ready ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
8584
8584
|
};
|
|
8585
|
-
var templateObject_1$
|
|
8585
|
+
var templateObject_1$G, templateObject_2$C;
|
|
8586
8586
|
|
|
8587
8587
|
var components$1 = {
|
|
8588
8588
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -8640,9 +8640,9 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
|
|
|
8640
8640
|
});
|
|
8641
8641
|
};
|
|
8642
8642
|
|
|
8643
|
-
var Card = styled.div(templateObject_1$
|
|
8644
|
-
var FlexCard = styled(Card)(templateObject_2$
|
|
8645
|
-
var templateObject_1$
|
|
8643
|
+
var Card = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: min(500px, 100% - 48px);\n max-height: 100%;\n overflow: auto;\n box-sizing: border-box;\n"], ["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: min(500px, 100% - 48px);\n max-height: 100%;\n overflow: auto;\n box-sizing: border-box;\n"])));
|
|
8644
|
+
var FlexCard = styled(Card)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
8645
|
+
var templateObject_1$F, templateObject_2$B;
|
|
8646
8646
|
|
|
8647
8647
|
var imageDisplayOrder = ['idCardFront', 'idCardBack', 'idBarcodeImage', 'passport', 'singlePage', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
|
|
8648
8648
|
var downloadImage = function downloadImage(dataUrl, filename) {
|
|
@@ -8777,12 +8777,12 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8777
8777
|
finished: true
|
|
8778
8778
|
}, verbiage.retryText)))));
|
|
8779
8779
|
};
|
|
8780
|
-
var Heading$a = styled.h1(templateObject_1$
|
|
8781
|
-
var ImagesContainer = styled(OverlayImageContainer)(templateObject_2$
|
|
8782
|
-
var ImageRow = styled(OverlayImageRow)(templateObject_3$
|
|
8783
|
-
var ImageCol$1 = styled.div(templateObject_4$
|
|
8784
|
-
var StyledImage = styled(CapturedDocumentImg)(templateObject_5$
|
|
8785
|
-
var DebugInfoContainer = styled.div(templateObject_6$
|
|
8780
|
+
var Heading$a = styled.h1(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n font-size: 1.5rem;\n margin-top: 0;\n margin-bottom: 1.5rem;\n"], ["\n font-size: 1.5rem;\n margin-top: 0;\n margin-bottom: 1.5rem;\n"])));
|
|
8781
|
+
var ImagesContainer = styled(OverlayImageContainer)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n flex-grow: 1;\n overflow-y: auto;\n padding-bottom: 0;\n max-width: 100%;\n"], ["\n flex-grow: 1;\n overflow-y: auto;\n padding-bottom: 0;\n max-width: 100%;\n"])));
|
|
8782
|
+
var ImageRow = styled(OverlayImageRow)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n max-width: 100%;\n flex-direction: column;\n position: relative;\n width: 100%;\n"], ["\n max-width: 100%;\n flex-direction: column;\n position: relative;\n width: 100%;\n"])));
|
|
8783
|
+
var ImageCol$1 = styled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n width: 450px;\n max-width: 100%;\n max-height: none !important;\n"], ["\n width: 450px;\n max-width: 100%;\n max-height: none !important;\n"])));
|
|
8784
|
+
var StyledImage = styled(CapturedDocumentImg)(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n width: 100%;\n border-radius: 12px;\n"], ["\n width: 100%;\n border-radius: 12px;\n"])));
|
|
8785
|
+
var DebugInfoContainer = styled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n margin-top: 0.5rem;\n margin-bottom: 1rem;\n padding: 0.625rem;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n line-height: 1.35;\n text-align: left;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n margin-top: 0.5rem;\n margin-bottom: 1rem;\n padding: 0.625rem;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n line-height: 1.35;\n text-align: left;\n"])));
|
|
8786
8786
|
var DebugSection = styled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 0;\n"], ["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 0;\n"])));
|
|
8787
8787
|
var DebugLabel = styled.span(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n font-weight: 600;\n color: #495057;\n font-size: 0.8125rem;\n flex-shrink: 0;\n width: 110px;\n"], ["\n font-weight: 600;\n color: #495057;\n font-size: 0.8125rem;\n flex-shrink: 0;\n width: 110px;\n"])));
|
|
8788
8788
|
var DebugValue = styled.span(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n color: #212529;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n"], ["\n color: #212529;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n"])));
|
|
@@ -8866,7 +8866,7 @@ var BarcodeComparisonScoreLabel = styled.span(templateObject_23$1 || (templateOb
|
|
|
8866
8866
|
var $isHigher = _a.$isHigher;
|
|
8867
8867
|
return $isHigher ? '#c3e6cb' : '#dee2e6';
|
|
8868
8868
|
});
|
|
8869
|
-
var templateObject_1$
|
|
8869
|
+
var templateObject_1$E, templateObject_2$A, templateObject_3$q, templateObject_4$k, templateObject_5$f, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1;
|
|
8870
8870
|
|
|
8871
8871
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
8872
8872
|
var _this = this;
|
|
@@ -8918,12 +8918,12 @@ function resetCanvasDimensions(canvas) {
|
|
|
8918
8918
|
canvas.style.height = '0';
|
|
8919
8919
|
}
|
|
8920
8920
|
|
|
8921
|
-
var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$
|
|
8921
|
+
var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n position: relative;\n ", "\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"], ["\n position: relative;\n ", "\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"])), function (props) {
|
|
8922
8922
|
return props.$isVisible ? '' : 'opacity: 0;';
|
|
8923
8923
|
}, function (props) {
|
|
8924
8924
|
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
8925
8925
|
});
|
|
8926
|
-
var IdCardGuideImage = styled.img(templateObject_2$
|
|
8926
|
+
var IdCardGuideImage = styled.img(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n max-height: 100%;\n transform-style: preserve-3d;\n ", "\n ", "\n"], ["\n max-height: 100%;\n transform-style: preserve-3d;\n ", "\n ", "\n"])), function (props) {
|
|
8927
8927
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
8928
8928
|
}, function (props) {
|
|
8929
8929
|
return props.$isInvisible ? 'opacity: 0;' : '';
|
|
@@ -9073,17 +9073,17 @@ function IdCardBorderSvg(_a) {
|
|
|
9073
9073
|
className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
|
|
9074
9074
|
}));
|
|
9075
9075
|
}
|
|
9076
|
-
var IdCardBorderContainer = styled.div(templateObject_3$
|
|
9077
|
-
var IdCardBorderInner = styled.div(templateObject_4$
|
|
9078
|
-
var SvgOverlay = styled.svg(templateObject_5$
|
|
9079
|
-
var IdCardBorderRect = styled.rect(templateObject_6$
|
|
9076
|
+
var IdCardBorderContainer = styled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n display: flex;\n position: relative;\n margin: auto;\n\n & .idmSdkWaves {\n position: absolute;\n animation: ", " 2s ease-out infinite;\n transform-style: preserve-3d;\n\n &:nth-child(3) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(4) {\n animation-delay: 1.33s;\n }\n }\n"], ["\n align-items: center;\n justify-content: center;\n display: flex;\n position: relative;\n margin: auto;\n\n & .idmSdkWaves {\n position: absolute;\n animation: ", " 2s ease-out infinite;\n transform-style: preserve-3d;\n\n &:nth-child(3) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(4) {\n animation-delay: 1.33s;\n }\n }\n"])), wavesAnimation);
|
|
9077
|
+
var IdCardBorderInner = styled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n max-height: 100%;\n max-width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n"], ["\n max-height: 100%;\n max-width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n"])));
|
|
9078
|
+
var SvgOverlay = styled.svg(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"])));
|
|
9079
|
+
var IdCardBorderRect = styled.rect(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n &.idmSdkProgressBorder {\n animation: ", " ", "\n ", ";\n }\n\n &.idmSdkProgressPaused {\n animation-play-state: paused;\n }\n"], ["\n &.idmSdkProgressBorder {\n animation: ", " ", "\n ", ";\n }\n\n &.idmSdkProgressPaused {\n animation-play-state: paused;\n }\n"])), progressBorderAnimation, function (props) {
|
|
9080
9080
|
var _a;
|
|
9081
9081
|
return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
|
|
9082
9082
|
}, function (props) {
|
|
9083
9083
|
var _a;
|
|
9084
9084
|
return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
|
|
9085
9085
|
});
|
|
9086
|
-
var templateObject_1$
|
|
9086
|
+
var templateObject_1$D, templateObject_2$z, templateObject_3$p, templateObject_4$j, templateObject_5$e, templateObject_6$8;
|
|
9087
9087
|
|
|
9088
9088
|
var defaultIdCaptureGuideImages = {
|
|
9089
9089
|
portrait: {
|
|
@@ -9231,7 +9231,7 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
9231
9231
|
clearTimeout(timeout);
|
|
9232
9232
|
};
|
|
9233
9233
|
}, []);
|
|
9234
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9234
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
9235
9235
|
"$isLandscape": orientation === 'landscape',
|
|
9236
9236
|
style: {
|
|
9237
9237
|
aspectRatio: aspectRatio
|
|
@@ -9272,15 +9272,15 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
9272
9272
|
style: imageStyle
|
|
9273
9273
|
})));
|
|
9274
9274
|
};
|
|
9275
|
-
var Wrapper$
|
|
9275
|
+
var Wrapper$2 = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])), function (props) {
|
|
9276
9276
|
return props.$isLandscape ? 'height: 100%;' : 'height: 100%;';
|
|
9277
9277
|
});
|
|
9278
|
-
var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_2$
|
|
9278
|
+
var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n height: 100%; // todo: branch between desktop and mobile\n"], ["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n height: 100%; // todo: branch between desktop and mobile\n"])), function (props) {
|
|
9279
9279
|
return props.$transitionTime;
|
|
9280
9280
|
}, function (props) {
|
|
9281
9281
|
return props.$transforms;
|
|
9282
9282
|
});
|
|
9283
|
-
var templateObject_1$
|
|
9283
|
+
var templateObject_1$C, templateObject_2$y;
|
|
9284
9284
|
|
|
9285
9285
|
var GuideOrientationContext = /*#__PURE__*/createContext({
|
|
9286
9286
|
orientation: 'landscape',
|
|
@@ -9375,7 +9375,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
|
|
|
9375
9375
|
clearTimeout(timeout);
|
|
9376
9376
|
};
|
|
9377
9377
|
}, []);
|
|
9378
|
-
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
9378
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$1, {
|
|
9379
9379
|
style: {
|
|
9380
9380
|
aspectRatio: imageAspectRatio
|
|
9381
9381
|
},
|
|
@@ -9419,10 +9419,10 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
|
|
|
9419
9419
|
height: height
|
|
9420
9420
|
})));
|
|
9421
9421
|
};
|
|
9422
|
-
var Wrapper = styled.div(templateObject_1$
|
|
9422
|
+
var Wrapper$1 = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n display: flex;\n position: absolute;\n margin: auto;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"], ["\n align-items: center;\n justify-content: center;\n display: flex;\n position: absolute;\n margin: auto;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"])), function (props) {
|
|
9423
9423
|
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
9424
9424
|
});
|
|
9425
|
-
var templateObject_1$
|
|
9425
|
+
var templateObject_1$B;
|
|
9426
9426
|
|
|
9427
9427
|
var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
9428
9428
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
@@ -9568,10 +9568,10 @@ var regionClsx = function regionClsx(classNames, which) {
|
|
|
9568
9568
|
return v;
|
|
9569
9569
|
}).join(' ');
|
|
9570
9570
|
};
|
|
9571
|
-
var StyledPageContainer = styled.div(templateObject_1$
|
|
9572
|
-
var GuidesContainer = styled.div(templateObject_2$
|
|
9573
|
-
var GuideCenterRow = styled.div(templateObject_3$
|
|
9574
|
-
var GuideRegion = styled.div(templateObject_4$
|
|
9571
|
+
var StyledPageContainer = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1000;\n overflow: hidden;\n"], ["\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1000;\n overflow: hidden;\n"])));
|
|
9572
|
+
var GuidesContainer = styled.div(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
9573
|
+
var GuideCenterRow = styled.div(templateObject_3$o || (templateObject_3$o = __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 min-height: 0;\n flex: 1;\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 min-height: 0;\n flex: 1;\n"])));
|
|
9574
|
+
var GuideRegion = styled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\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 position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"])), function (props) {
|
|
9575
9575
|
var _a, _b, _c, _d, _e;
|
|
9576
9576
|
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)';
|
|
9577
9577
|
}, function (props) {
|
|
@@ -9582,8 +9582,8 @@ var GuideRegion = styled.div(templateObject_4$g || (templateObject_4$g = __makeT
|
|
|
9582
9582
|
}, function (props) {
|
|
9583
9583
|
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
9584
9584
|
});
|
|
9585
|
-
var Spacer = styled(GuideRegion)(templateObject_5$
|
|
9586
|
-
var GuideCenterRegion = styled.div(templateObject_6$
|
|
9585
|
+
var Spacer = styled(GuideRegion)(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: block;\n width: auto;\n"], ["\n display: block;\n width: auto;\n"])));
|
|
9586
|
+
var GuideCenterRegion = styled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n ", "\n ", "\n transform-style: preserve-3d;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"], ["\n ", "\n ", "\n transform-style: preserve-3d;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"])), function (props) {
|
|
9587
9587
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
9588
9588
|
}, function (props) {
|
|
9589
9589
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
@@ -9598,7 +9598,7 @@ var GuideText = styled.span(templateObject_8$3 || (templateObject_8$3 = __makeTe
|
|
|
9598
9598
|
var GuideCenterInner = styled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n position: relative;\n top: 0;\n margin: auto;\n ", "\n max-height: 100%;\n max-width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n position: relative;\n top: 0;\n margin: auto;\n ", "\n max-height: 100%;\n max-width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (props) {
|
|
9599
9599
|
return props.$isLandscape ? 'height: 100%;' : 'width: 90%;';
|
|
9600
9600
|
});
|
|
9601
|
-
var templateObject_1$
|
|
9601
|
+
var templateObject_1$A, templateObject_2$x, templateObject_3$o, templateObject_4$i, templateObject_5$d, templateObject_6$7, templateObject_7$4, templateObject_8$3, templateObject_9$2;
|
|
9602
9602
|
|
|
9603
9603
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
9604
9604
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -9721,7 +9721,7 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
9721
9721
|
ref: wrapperRef,
|
|
9722
9722
|
"$maskColor": maskColor !== null && maskColor !== void 0 ? maskColor : '',
|
|
9723
9723
|
className: classNames.canvasWrapper
|
|
9724
|
-
}, /*#__PURE__*/React__default.createElement(Canvas$
|
|
9724
|
+
}, /*#__PURE__*/React__default.createElement(Canvas$2, {
|
|
9725
9725
|
ref: canvasRef,
|
|
9726
9726
|
className: classNames.canvas
|
|
9727
9727
|
})), /*#__PURE__*/React__default.createElement(IdCaptureGuideOverlay, {
|
|
@@ -9739,11 +9739,174 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
9739
9739
|
progress: progress
|
|
9740
9740
|
}));
|
|
9741
9741
|
};
|
|
9742
|
-
var CanvasWrapper$1 = styled.div(templateObject_1$
|
|
9742
|
+
var CanvasWrapper$1 = styled.div(templateObject_1$z || (templateObject_1$z = __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) {
|
|
9743
9743
|
return props.$maskColor;
|
|
9744
9744
|
});
|
|
9745
|
-
var Canvas$
|
|
9746
|
-
var templateObject_1$
|
|
9745
|
+
var Canvas$2 = styled.canvas(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
9746
|
+
var templateObject_1$z, templateObject_2$w;
|
|
9747
|
+
|
|
9748
|
+
var PDF417_ASPECT_RATIO = 3 / 1;
|
|
9749
|
+
function BarcodeGuideOverlay(_a) {
|
|
9750
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
9751
|
+
var _l = _a.aspectRatio,
|
|
9752
|
+
aspectRatio = _l === void 0 ? PDF417_ASPECT_RATIO : _l,
|
|
9753
|
+
maskColor = _a.maskColor,
|
|
9754
|
+
_m = _a.cornerColor,
|
|
9755
|
+
cornerColor = _m === void 0 ? 'white' : _m,
|
|
9756
|
+
_o = _a.cornerLength,
|
|
9757
|
+
cornerLength = _o === void 0 ? 40 : _o,
|
|
9758
|
+
_p = _a.cornerWidth,
|
|
9759
|
+
cornerWidth = _p === void 0 ? 4 : _p,
|
|
9760
|
+
padding = _a.padding,
|
|
9761
|
+
_q = _a.borderRadius,
|
|
9762
|
+
borderRadius = _q === void 0 ? 8 : _q,
|
|
9763
|
+
_r = _a.headerText,
|
|
9764
|
+
headerText = _r === void 0 ? 'SCAN THE BARCODE' : _r,
|
|
9765
|
+
_s = _a.instructionText,
|
|
9766
|
+
instructionText = _s === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _s,
|
|
9767
|
+
_t = _a.isSuccess,
|
|
9768
|
+
isSuccess = _t === void 0 ? false : _t,
|
|
9769
|
+
_u = _a.successColor,
|
|
9770
|
+
successColor = _u === void 0 ? '#22c55e' : _u,
|
|
9771
|
+
_v = _a.classNames,
|
|
9772
|
+
classNames = _v === void 0 ? {} : _v;
|
|
9773
|
+
var canvasRef = useRef(null);
|
|
9774
|
+
var _w = useResizeObserver(),
|
|
9775
|
+
wrapperRef = _w.ref,
|
|
9776
|
+
_x = _w.width,
|
|
9777
|
+
wrapperWidth = _x === void 0 ? 1 : _x,
|
|
9778
|
+
_y = _w.height,
|
|
9779
|
+
wrapperHeight = _y === void 0 ? 1 : _y;
|
|
9780
|
+
var theme = useTheme();
|
|
9781
|
+
if (padding === undefined) {
|
|
9782
|
+
padding = isMobile() ? (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.mobilePadding) !== null && _d !== void 0 ? _d : 24 : (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.desktopPadding) !== null && _g !== void 0 ? _g : 48;
|
|
9783
|
+
}
|
|
9784
|
+
if (maskColor === undefined) {
|
|
9785
|
+
maskColor = (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideOverlay) === null || _j === void 0 ? void 0 : _j.backgroundColor) !== null && _k !== void 0 ? _k : '#708090';
|
|
9786
|
+
}
|
|
9787
|
+
useEffect(function () {
|
|
9788
|
+
var canvas = canvasRef.current;
|
|
9789
|
+
if (!canvas) return;
|
|
9790
|
+
// Wait for valid dimensions from resize observer
|
|
9791
|
+
if (wrapperWidth <= 1 || wrapperHeight <= 1) return;
|
|
9792
|
+
var boundingWidth = wrapperWidth - padding * 2;
|
|
9793
|
+
var boundingHeight = wrapperHeight - padding * 2;
|
|
9794
|
+
// Start with bounding box dimensions
|
|
9795
|
+
var rectWidth = boundingWidth;
|
|
9796
|
+
var rectHeight = boundingWidth / aspectRatio;
|
|
9797
|
+
// If calculated height exceeds available height, constrain by height instead
|
|
9798
|
+
if (rectHeight > boundingHeight) {
|
|
9799
|
+
rectHeight = boundingHeight;
|
|
9800
|
+
rectWidth = boundingHeight * aspectRatio;
|
|
9801
|
+
}
|
|
9802
|
+
// Center the rectangle
|
|
9803
|
+
var rectX = padding + (boundingWidth - rectWidth) / 2;
|
|
9804
|
+
var rectY = padding + (boundingHeight - rectHeight) / 2;
|
|
9805
|
+
setCanvasDimensions(canvas, wrapperWidth, wrapperHeight);
|
|
9806
|
+
var ctx = canvas.getContext('2d');
|
|
9807
|
+
if (!ctx) return;
|
|
9808
|
+
// Fill with mask color
|
|
9809
|
+
ctx.fillStyle = maskColor;
|
|
9810
|
+
ctx.clearRect(0, 0, wrapperWidth, wrapperHeight);
|
|
9811
|
+
ctx.fillRect(0, 0, wrapperWidth, wrapperHeight);
|
|
9812
|
+
// Create the cutout
|
|
9813
|
+
ctx.beginPath();
|
|
9814
|
+
ctx.roundRect(rectX, rectY, rectWidth, rectHeight, borderRadius);
|
|
9815
|
+
ctx.fillStyle = 'rgba(0,0,0,1)';
|
|
9816
|
+
ctx.globalCompositeOperation = 'destination-out';
|
|
9817
|
+
ctx.fill();
|
|
9818
|
+
ctx.globalCompositeOperation = 'source-over';
|
|
9819
|
+
// Draw corner brackets
|
|
9820
|
+
var color = isSuccess ? successColor : cornerColor;
|
|
9821
|
+
ctx.strokeStyle = color;
|
|
9822
|
+
ctx.lineWidth = cornerWidth;
|
|
9823
|
+
ctx.lineCap = 'round';
|
|
9824
|
+
var effectiveCornerLength = Math.min(cornerLength, rectWidth / 3, rectHeight / 3);
|
|
9825
|
+
// Top-left corner
|
|
9826
|
+
ctx.beginPath();
|
|
9827
|
+
ctx.moveTo(rectX + effectiveCornerLength, rectY);
|
|
9828
|
+
ctx.lineTo(rectX + borderRadius, rectY);
|
|
9829
|
+
ctx.arcTo(rectX, rectY, rectX, rectY + borderRadius, borderRadius);
|
|
9830
|
+
ctx.lineTo(rectX, rectY + effectiveCornerLength);
|
|
9831
|
+
ctx.stroke();
|
|
9832
|
+
// Top-right corner
|
|
9833
|
+
ctx.beginPath();
|
|
9834
|
+
ctx.moveTo(rectX + rectWidth - effectiveCornerLength, rectY);
|
|
9835
|
+
ctx.lineTo(rectX + rectWidth - borderRadius, rectY);
|
|
9836
|
+
ctx.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + borderRadius, borderRadius);
|
|
9837
|
+
ctx.lineTo(rectX + rectWidth, rectY + effectiveCornerLength);
|
|
9838
|
+
ctx.stroke();
|
|
9839
|
+
// Bottom-left corner
|
|
9840
|
+
ctx.beginPath();
|
|
9841
|
+
ctx.moveTo(rectX, rectY + rectHeight - effectiveCornerLength);
|
|
9842
|
+
ctx.lineTo(rectX, rectY + rectHeight - borderRadius);
|
|
9843
|
+
ctx.arcTo(rectX, rectY + rectHeight, rectX + borderRadius, rectY + rectHeight, borderRadius);
|
|
9844
|
+
ctx.lineTo(rectX + effectiveCornerLength, rectY + rectHeight);
|
|
9845
|
+
ctx.stroke();
|
|
9846
|
+
// Bottom-right corner
|
|
9847
|
+
ctx.beginPath();
|
|
9848
|
+
ctx.moveTo(rectX + rectWidth, rectY + rectHeight - effectiveCornerLength);
|
|
9849
|
+
ctx.lineTo(rectX + rectWidth, rectY + rectHeight - borderRadius);
|
|
9850
|
+
ctx.arcTo(rectX + rectWidth, rectY + rectHeight, rectX + rectWidth - borderRadius, rectY + rectHeight, borderRadius);
|
|
9851
|
+
ctx.lineTo(rectX + rectWidth - effectiveCornerLength, rectY + rectHeight);
|
|
9852
|
+
ctx.stroke();
|
|
9853
|
+
return function () {
|
|
9854
|
+
resetCanvasDimensions(canvas);
|
|
9855
|
+
};
|
|
9856
|
+
}, [aspectRatio, borderRadius, cornerColor, cornerLength, cornerWidth, isSuccess, maskColor, padding, successColor, wrapperHeight, wrapperWidth]);
|
|
9857
|
+
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
9858
|
+
ref: wrapperRef,
|
|
9859
|
+
className: classNames.wrapper
|
|
9860
|
+
}, /*#__PURE__*/React__default.createElement(Canvas$1, {
|
|
9861
|
+
ref: canvasRef,
|
|
9862
|
+
className: classNames.canvas
|
|
9863
|
+
}), /*#__PURE__*/React__default.createElement(TextOverlay, null, /*#__PURE__*/React__default.createElement(HeaderText, {
|
|
9864
|
+
className: classNames.header
|
|
9865
|
+
}, headerText), /*#__PURE__*/React__default.createElement(InstructionText, {
|
|
9866
|
+
className: classNames.instruction
|
|
9867
|
+
}, instructionText)));
|
|
9868
|
+
}
|
|
9869
|
+
var Wrapper = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1;\n"])));
|
|
9870
|
+
var Canvas$1 = styled.canvas(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
9871
|
+
var TextOverlay = styled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n padding-top: 48px;\n pointer-events: none;\n z-index: 2;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n padding-top: 48px;\n pointer-events: none;\n z-index: 2;\n"])));
|
|
9872
|
+
var HeaderText = styled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n color: white;\n font-size: 24px;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 16px;\n"], ["\n color: white;\n font-size: 24px;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 16px;\n"])));
|
|
9873
|
+
var InstructionText = styled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n color: white;\n font-size: 16px;\n font-weight: 400;\n text-align: center;\n max-width: 300px;\n line-height: 1.4;\n opacity: 0.9;\n"], ["\n color: white;\n font-size: 16px;\n font-weight: 400;\n text-align: center;\n max-width: 300px;\n line-height: 1.4;\n opacity: 0.9;\n"])));
|
|
9874
|
+
var templateObject_1$y, templateObject_2$v, templateObject_3$n, templateObject_4$h, templateObject_5$c;
|
|
9875
|
+
|
|
9876
|
+
function BarcodeSuccessOverlay(_a) {
|
|
9877
|
+
var _b = _a.headerText,
|
|
9878
|
+
headerText = _b === void 0 ? 'Scan Successful!' : _b,
|
|
9879
|
+
_c = _a.processingText,
|
|
9880
|
+
processingText = _c === void 0 ? 'Processing...' : _c,
|
|
9881
|
+
_d = _a.successColor,
|
|
9882
|
+
successColor = _d === void 0 ? '#22c55e' : _d;
|
|
9883
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BarcodeGuideOverlay, {
|
|
9884
|
+
headerText: headerText,
|
|
9885
|
+
instructionText: processingText,
|
|
9886
|
+
isSuccess: true,
|
|
9887
|
+
successColor: successColor
|
|
9888
|
+
}), /*#__PURE__*/React__default.createElement(CheckmarkWrapper, null, /*#__PURE__*/React__default.createElement(CheckmarkCircle, {
|
|
9889
|
+
"$color": successColor
|
|
9890
|
+
}, /*#__PURE__*/React__default.createElement(CheckmarkIcon, {
|
|
9891
|
+
viewBox: "0 0 24 24",
|
|
9892
|
+
fill: "none"
|
|
9893
|
+
}, /*#__PURE__*/React__default.createElement(CheckmarkPath, {
|
|
9894
|
+
d: "M5 13l4 4L19 7",
|
|
9895
|
+
stroke: "white",
|
|
9896
|
+
strokeWidth: "3",
|
|
9897
|
+
strokeLinecap: "round",
|
|
9898
|
+
strokeLinejoin: "round"
|
|
9899
|
+
})))));
|
|
9900
|
+
}
|
|
9901
|
+
var scaleIn = keyframes(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 50% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n"], ["\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 50% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n"])));
|
|
9902
|
+
var drawCheck = keyframes(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n 0% {\n stroke-dashoffset: 24;\n }\n 100% {\n stroke-dashoffset: 0;\n }\n"], ["\n 0% {\n stroke-dashoffset: 24;\n }\n 100% {\n stroke-dashoffset: 0;\n }\n"])));
|
|
9903
|
+
var CheckmarkWrapper = styled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n z-index: 3;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n z-index: 3;\n"])));
|
|
9904
|
+
var CheckmarkCircle = styled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n animation: ", " 0.4s ease-out forwards;\n"], ["\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n animation: ", " 0.4s ease-out forwards;\n"])), function (props) {
|
|
9905
|
+
return props.$color;
|
|
9906
|
+
}, scaleIn);
|
|
9907
|
+
var CheckmarkIcon = styled.svg(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n width: 48px;\n height: 48px;\n"], ["\n width: 48px;\n height: 48px;\n"])));
|
|
9908
|
+
var CheckmarkPath = styled.path(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n stroke-dasharray: 24;\n stroke-dashoffset: 24;\n animation: ", " 0.4s ease-out 0.2s forwards;\n"], ["\n stroke-dasharray: 24;\n stroke-dashoffset: 24;\n animation: ", " 0.4s ease-out 0.2s forwards;\n"])), drawCheck);
|
|
9909
|
+
var templateObject_1$x, templateObject_2$u, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$6;
|
|
9747
9910
|
|
|
9748
9911
|
function IdCaptureGuides(_a) {
|
|
9749
9912
|
var _b = _a.guideType,
|
|
@@ -9765,7 +9928,15 @@ function IdCaptureGuides(_a) {
|
|
|
9765
9928
|
_k = _a.colors,
|
|
9766
9929
|
colors = _k === void 0 ? {} : _k,
|
|
9767
9930
|
_l = _a.verbiage,
|
|
9768
|
-
rawVerbiage = _l === void 0 ? {} : _l
|
|
9931
|
+
rawVerbiage = _l === void 0 ? {} : _l,
|
|
9932
|
+
_m = _a.isRequestingBetterBarcode,
|
|
9933
|
+
isRequestingBetterBarcode = _m === void 0 ? false : _m,
|
|
9934
|
+
_o = _a.isBarcodeSuccess,
|
|
9935
|
+
isBarcodeSuccess = _o === void 0 ? false : _o,
|
|
9936
|
+
_p = _a.barcodeHeaderText,
|
|
9937
|
+
barcodeHeaderText = _p === void 0 ? 'SCAN THE BARCODE' : _p,
|
|
9938
|
+
_q = _a.barcodeInstructionText,
|
|
9939
|
+
barcodeInstructionText = _q === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _q;
|
|
9769
9940
|
var state = useIdCaptureStore();
|
|
9770
9941
|
var isRearFacing = useCameraStore(function (state) {
|
|
9771
9942
|
return state.isRearFacing;
|
|
@@ -9775,6 +9946,16 @@ function IdCaptureGuides(_a) {
|
|
|
9775
9946
|
capturingText: 'Capturing...',
|
|
9776
9947
|
captureFailedText: 'Capture failed!'
|
|
9777
9948
|
});
|
|
9949
|
+
// Render barcode guide overlays when in barcode recapture state
|
|
9950
|
+
if (isRequestingBetterBarcode) {
|
|
9951
|
+
if (isBarcodeSuccess) {
|
|
9952
|
+
return /*#__PURE__*/React__default.createElement(BarcodeSuccessOverlay, null);
|
|
9953
|
+
}
|
|
9954
|
+
return /*#__PURE__*/React__default.createElement(BarcodeGuideOverlay, {
|
|
9955
|
+
headerText: barcodeHeaderText,
|
|
9956
|
+
instructionText: barcodeInstructionText
|
|
9957
|
+
});
|
|
9958
|
+
}
|
|
9778
9959
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, guideType === 'overlay' && (/*#__PURE__*/React__default.createElement(IdCaptureGuideOverlay, {
|
|
9779
9960
|
images: images,
|
|
9780
9961
|
classNames: classNames,
|
|
@@ -11973,7 +12154,8 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11973
12154
|
classNames: classNames.guides,
|
|
11974
12155
|
colors: colors,
|
|
11975
12156
|
verbiage: idCaptureVerbiage,
|
|
11976
|
-
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments
|
|
12157
|
+
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments,
|
|
12158
|
+
isRequestingBetterBarcode: state.captureState === 'requestingBetterBarcode'
|
|
11977
12159
|
}), debugMode && !((_h = (_g = theme.idCapture) === null || _g === void 0 ? void 0 : _g.capturePreview) === null || _h === void 0 ? void 0 : _h.disabled) && state.captureState === 'requestingFlip' && !separateIdCardCaptureSequence && state.imageUrl && (/*#__PURE__*/React__default.createElement(IdCaptureImagePreview, {
|
|
11978
12160
|
classNames: (_j = classNames.capture) === null || _j === void 0 ? void 0 : _j.imagePreview,
|
|
11979
12161
|
text: (_k = idCaptureVerbiages === null || idCaptureVerbiages === void 0 ? void 0 : idCaptureVerbiages.idCardFront) === null || _k === void 0 ? void 0 : _k.processingIdCardText,
|