idmission-web-sdk 2.3.171-feature-barcode-recapture-a8375e9 → 2.3.171-feature-barcode-recapture-658bede
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/common/debug.d.ts +3 -0
- package/dist/components/common/debug.d.ts.map +1 -1
- 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/IdCaptureModelsProvider.d.ts +2 -0
- package/dist/components/id_capture/IdCaptureModelsProvider.d.ts.map +1 -1
- package/dist/components/id_capture/IdCaptureStateProvider.d.ts +1 -1
- package/dist/components/id_capture/IdCaptureStateProvider.d.ts.map +1 -1
- package/dist/components/id_capture/IdCaptureWizard.d.ts.map +1 -1
- package/dist/sdk2.cjs.development.js +401 -152
- 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 +401 -152
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +401 -152
- 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$j || (templateObject_5$j = __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$j, 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() {
|
|
@@ -5930,9 +5930,9 @@ var onMobile = isMobile();
|
|
|
5930
5930
|
function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocumentCanvas, bestBarcodeCanvas, currentBestBarcodeScore, documentDetectionThresholds, makeBarcodeReadabilityPrediction, barcodeReadabilityThreshold) {
|
|
5931
5931
|
return __awaiter(this, void 0, void 0, function () {
|
|
5932
5932
|
var pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, newBestBarcodeScore, newBestBarcodeDetails, documentCroppedPrediction, processedCroppedPrediction, pdf417Prediction;
|
|
5933
|
-
var _a;
|
|
5934
|
-
return __generator(this, function (
|
|
5935
|
-
switch (
|
|
5933
|
+
var _a, _b;
|
|
5934
|
+
return __generator(this, function (_c) {
|
|
5935
|
+
switch (_c.label) {
|
|
5936
5936
|
case 0:
|
|
5937
5937
|
pdf417PredictionTime = 0;
|
|
5938
5938
|
pdf417PredictionScore = 0;
|
|
@@ -5943,7 +5943,8 @@ function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocu
|
|
|
5943
5943
|
pdf417PredictionScore: pdf417PredictionScore,
|
|
5944
5944
|
pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
|
|
5945
5945
|
newBestBarcodeScore: newBestBarcodeScore,
|
|
5946
|
-
newBestBarcodeDetails: newBestBarcodeDetails
|
|
5946
|
+
newBestBarcodeDetails: newBestBarcodeDetails,
|
|
5947
|
+
processedBarcodeBoundingBox: undefined
|
|
5947
5948
|
}];
|
|
5948
5949
|
}
|
|
5949
5950
|
/**
|
|
@@ -5953,7 +5954,7 @@ function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocu
|
|
|
5953
5954
|
cropToDetectedObjectBox(lastPredictionCanvas, prediction.bestDocument.box, croppedDocumentCanvas);
|
|
5954
5955
|
return [4 /*yield*/, makeDocumentDetectorPrediction(croppedDocumentCanvas)];
|
|
5955
5956
|
case 1:
|
|
5956
|
-
documentCroppedPrediction =
|
|
5957
|
+
documentCroppedPrediction = _c.sent();
|
|
5957
5958
|
if (!documentCroppedPrediction) {
|
|
5958
5959
|
// error occurred during prediction (error logged by callee)
|
|
5959
5960
|
return [2 /*return*/, {
|
|
@@ -5961,7 +5962,8 @@ function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocu
|
|
|
5961
5962
|
pdf417PredictionScore: pdf417PredictionScore,
|
|
5962
5963
|
pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
|
|
5963
5964
|
newBestBarcodeScore: newBestBarcodeScore,
|
|
5964
|
-
newBestBarcodeDetails: newBestBarcodeDetails
|
|
5965
|
+
newBestBarcodeDetails: newBestBarcodeDetails,
|
|
5966
|
+
processedBarcodeBoundingBox: undefined
|
|
5965
5967
|
}];
|
|
5966
5968
|
}
|
|
5967
5969
|
processedCroppedPrediction = processDocumentDetectorPrediction(documentCroppedPrediction, documentDetectionThresholds);
|
|
@@ -5991,7 +5993,9 @@ function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocu
|
|
|
5991
5993
|
pdf417PredictionScore: pdf417PredictionScore,
|
|
5992
5994
|
pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
|
|
5993
5995
|
newBestBarcodeScore: newBestBarcodeScore,
|
|
5994
|
-
newBestBarcodeDetails: newBestBarcodeDetails
|
|
5996
|
+
newBestBarcodeDetails: newBestBarcodeDetails,
|
|
5997
|
+
// Return processed barcode bounding box for recapture tracking (valid even when not a new best)
|
|
5998
|
+
processedBarcodeBoundingBox: (_b = processedCroppedPrediction === null || processedCroppedPrediction === void 0 ? void 0 : processedCroppedPrediction.bestPDF417) === null || _b === void 0 ? void 0 : _b.box
|
|
5995
5999
|
}];
|
|
5996
6000
|
}
|
|
5997
6001
|
});
|
|
@@ -6082,6 +6086,9 @@ var IdCaptureModelsContext = /*#__PURE__*/createContext({
|
|
|
6082
6086
|
getBestBarcode: function getBestBarcode() {
|
|
6083
6087
|
return null;
|
|
6084
6088
|
},
|
|
6089
|
+
resetBestBarcode: function resetBestBarcode() {
|
|
6090
|
+
return null;
|
|
6091
|
+
},
|
|
6085
6092
|
startBarcodeRecapturePhase: function startBarcodeRecapturePhase() {
|
|
6086
6093
|
return null;
|
|
6087
6094
|
},
|
|
@@ -6182,10 +6189,10 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6182
6189
|
var _this = this;
|
|
6183
6190
|
onDocumentDetected(function (prediction) {
|
|
6184
6191
|
return __awaiter(_this, void 0, void 0, function () {
|
|
6185
|
-
var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, isSinglePage, isRequiredDocumentType, isInRecapturePhase, shouldRunBarcodeAnalysisDuringRecapture, focusPrediction, focusThresholdSet, focusThreshold, barcodeAnalysisResult,
|
|
6186
|
-
var _a, _b, _c, _d, _e, _f, _g
|
|
6187
|
-
return __generator(this, function (
|
|
6188
|
-
switch (
|
|
6192
|
+
var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, isSinglePage, isRequiredDocumentType, isInRecapturePhase, shouldRunBarcodeAnalysisDuringRecapture, focusPrediction, focusThresholdSet, focusThreshold, barcodeAnalysisResult, barcodeAnalysisResult;
|
|
6193
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
6194
|
+
return __generator(this, function (_h) {
|
|
6195
|
+
switch (_h.label) {
|
|
6189
6196
|
case 0:
|
|
6190
6197
|
if (!lastPredictionCanvas.current) return [2 /*return*/];
|
|
6191
6198
|
stopDetectionAtStart = stopDetection.current;
|
|
@@ -6200,7 +6207,7 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6200
6207
|
}
|
|
6201
6208
|
isRequiredDocumentType = requiredDocumentType === 'none' || prediction.detectedDocumentType === requiredDocumentType || ((_a = requiredDocumentType.includes) === null || _a === void 0 ? void 0 : _a.call(requiredDocumentType, prediction.detectedDocumentType)) || allowSinglePageIdCapture && isSinglePage && ((_b = requiredDocumentType.includes) === null || _b === void 0 ? void 0 : _b.call(requiredDocumentType, 'idCardFront'));
|
|
6202
6209
|
isInRecapturePhase = isRecapturePhase.current;
|
|
6203
|
-
shouldRunBarcodeAnalysisDuringRecapture = isInRecapturePhase && isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.
|
|
6210
|
+
shouldRunBarcodeAnalysisDuringRecapture = isInRecapturePhase && isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.bestDocument && prediction.bestPDF417;
|
|
6204
6211
|
if (!(isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.documentInBounds && !prediction.documentTooClose && prediction.documentIsStable)) return [3 /*break*/, 3];
|
|
6205
6212
|
focusPrediction = makeFocusPrediction(lastPredictionCanvas.current, (_c = prediction.bestDocument) === null || _c === void 0 ? void 0 : _c.box);
|
|
6206
6213
|
if (focusPrediction) {
|
|
@@ -6224,7 +6231,7 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6224
6231
|
if (!(enableBarcodeReadabilityModel && prediction.bestDocument && prediction.bestPDF417 && croppedDocumentCanvas.current)) return [3 /*break*/, 2];
|
|
6225
6232
|
return [4 /*yield*/, analyzeBarcodeReadability(prediction, lastPredictionCanvas.current, croppedDocumentCanvas.current, bestBarcodeCanvas.current, bestBarcodeScore.current)];
|
|
6226
6233
|
case 1:
|
|
6227
|
-
barcodeAnalysisResult =
|
|
6234
|
+
barcodeAnalysisResult = _h.sent();
|
|
6228
6235
|
pdf417PredictionTime = barcodeAnalysisResult.pdf417PredictionTime;
|
|
6229
6236
|
pdf417PredictionScore = barcodeAnalysisResult.pdf417PredictionScore;
|
|
6230
6237
|
pdf417PredictionThresholdMet = barcodeAnalysisResult.pdf417PredictionThresholdMet;
|
|
@@ -6236,19 +6243,23 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6236
6243
|
}
|
|
6237
6244
|
// During recapture phase, also track best barcode separately for recapture sequence
|
|
6238
6245
|
if (isRecapturePhase.current && recaptureBarcodeCanvas.current && pdf417PredictionScore > recaptureBarcodeScore.current) {
|
|
6246
|
+
log("[IdCaptureModelsProvider] Recapture tracking: new best score ".concat(pdf417PredictionScore, " (was ").concat(recaptureBarcodeScore.current, ")"));
|
|
6239
6247
|
recaptureBarcodeScore.current = pdf417PredictionScore;
|
|
6240
|
-
|
|
6241
|
-
//
|
|
6242
|
-
|
|
6243
|
-
|
|
6244
|
-
|
|
6245
|
-
|
|
6246
|
-
|
|
6247
|
-
|
|
6248
|
-
|
|
6248
|
+
// Create details directly from current prediction (not newBestBarcodeDetails which
|
|
6249
|
+
// is only set when score beats overall best, not just recapture best)
|
|
6250
|
+
recaptureBarcodeDetails.current = {
|
|
6251
|
+
boundingBox: prediction.bestPDF417.box,
|
|
6252
|
+
score: pdf417PredictionScore
|
|
6253
|
+
};
|
|
6254
|
+
// Crop barcode from croppedDocumentCanvas using the processed bounding box
|
|
6255
|
+
// (can't use bestBarcodeCanvas since it's only updated for overall best)
|
|
6256
|
+
if (croppedDocumentCanvas.current && barcodeAnalysisResult.processedBarcodeBoundingBox) {
|
|
6257
|
+
cropToDetectedObjectBox(croppedDocumentCanvas.current, barcodeAnalysisResult.processedBarcodeBoundingBox, recaptureBarcodeCanvas.current, 16);
|
|
6258
|
+
} else {
|
|
6259
|
+
log("[IdCaptureModelsProvider] Recapture tracking: could not crop barcode - croppedDocumentCanvas=".concat(!!croppedDocumentCanvas.current, ", processedBarcodeBoundingBox=").concat(!!barcodeAnalysisResult.processedBarcodeBoundingBox));
|
|
6249
6260
|
}
|
|
6250
6261
|
}
|
|
6251
|
-
|
|
6262
|
+
_h.label = 2;
|
|
6252
6263
|
case 2:
|
|
6253
6264
|
return [3 /*break*/, 5];
|
|
6254
6265
|
case 3:
|
|
@@ -6256,7 +6267,7 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6256
6267
|
if (!(enableBarcodeReadabilityModel && croppedDocumentCanvas.current && stopDetectionAtStart === stopDetection.current)) return [3 /*break*/, 5];
|
|
6257
6268
|
return [4 /*yield*/, analyzeBarcodeReadability(prediction, lastPredictionCanvas.current, croppedDocumentCanvas.current, bestBarcodeCanvas.current, bestBarcodeScore.current)];
|
|
6258
6269
|
case 4:
|
|
6259
|
-
barcodeAnalysisResult =
|
|
6270
|
+
barcodeAnalysisResult = _h.sent();
|
|
6260
6271
|
pdf417PredictionTime = barcodeAnalysisResult.pdf417PredictionTime;
|
|
6261
6272
|
pdf417PredictionScore = barcodeAnalysisResult.pdf417PredictionScore;
|
|
6262
6273
|
pdf417PredictionThresholdMet = barcodeAnalysisResult.pdf417PredictionThresholdMet;
|
|
@@ -6268,19 +6279,23 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6268
6279
|
}
|
|
6269
6280
|
// Track best barcode separately for recapture sequence
|
|
6270
6281
|
if (recaptureBarcodeCanvas.current && pdf417PredictionScore > recaptureBarcodeScore.current) {
|
|
6282
|
+
log("[IdCaptureModelsProvider] Recapture tracking (relaxed): new best score ".concat(pdf417PredictionScore, " (was ").concat(recaptureBarcodeScore.current, ")"));
|
|
6271
6283
|
recaptureBarcodeScore.current = pdf417PredictionScore;
|
|
6272
|
-
|
|
6273
|
-
//
|
|
6274
|
-
|
|
6275
|
-
|
|
6276
|
-
|
|
6277
|
-
|
|
6278
|
-
|
|
6279
|
-
|
|
6280
|
-
|
|
6284
|
+
// Create details directly from current prediction (not newBestBarcodeDetails which
|
|
6285
|
+
// is only set when score beats overall best, not just recapture best)
|
|
6286
|
+
recaptureBarcodeDetails.current = {
|
|
6287
|
+
boundingBox: prediction.bestPDF417.box,
|
|
6288
|
+
score: pdf417PredictionScore
|
|
6289
|
+
};
|
|
6290
|
+
// Crop barcode from croppedDocumentCanvas using the processed bounding box
|
|
6291
|
+
// (can't use bestBarcodeCanvas since it's only updated for overall best)
|
|
6292
|
+
if (croppedDocumentCanvas.current && barcodeAnalysisResult.processedBarcodeBoundingBox) {
|
|
6293
|
+
cropToDetectedObjectBox(croppedDocumentCanvas.current, barcodeAnalysisResult.processedBarcodeBoundingBox, recaptureBarcodeCanvas.current, 16);
|
|
6294
|
+
} else {
|
|
6295
|
+
log("[IdCaptureModelsProvider] Recapture tracking (relaxed): could not crop barcode - croppedDocumentCanvas=".concat(!!croppedDocumentCanvas.current, ", processedBarcodeBoundingBox=").concat(!!barcodeAnalysisResult.processedBarcodeBoundingBox));
|
|
6281
6296
|
}
|
|
6282
6297
|
}
|
|
6283
|
-
|
|
6298
|
+
_h.label = 5;
|
|
6284
6299
|
case 5:
|
|
6285
6300
|
/**
|
|
6286
6301
|
* @note
|
|
@@ -6288,7 +6303,7 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6288
6303
|
* Do not return early from this function unless
|
|
6289
6304
|
* lastPredictionCanvas.current is not set
|
|
6290
6305
|
*/
|
|
6291
|
-
(
|
|
6306
|
+
(_g = onPredictionHandler.current) === null || _g === void 0 ? void 0 : _g.call(onPredictionHandler, _assign(_assign({}, prediction), {
|
|
6292
6307
|
focusScore: focusScore,
|
|
6293
6308
|
focusPredictionTime: focusPredictionTime,
|
|
6294
6309
|
focusThresholdMet: focusThresholdMet,
|
|
@@ -6321,7 +6336,29 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6321
6336
|
canvas: bestBarcodeCanvas.current
|
|
6322
6337
|
});
|
|
6323
6338
|
}, []);
|
|
6339
|
+
var resetBestBarcode = useCallback(function () {
|
|
6340
|
+
// Light-weight reset that only clears barcode tracking without disrupting detection
|
|
6341
|
+
bestBarcodeScore.current = 0;
|
|
6342
|
+
bestBarcodeDetails.current = null;
|
|
6343
|
+
// Also reset recapture tracking so early frames during move-closer window are ignored
|
|
6344
|
+
recaptureBarcodeScore.current = 0;
|
|
6345
|
+
recaptureBarcodeDetails.current = null;
|
|
6346
|
+
// Clear the canvas content but don't recreate it
|
|
6347
|
+
if (bestBarcodeCanvas.current) {
|
|
6348
|
+
var ctx = bestBarcodeCanvas.current.getContext('2d');
|
|
6349
|
+
if (ctx) {
|
|
6350
|
+
ctx.clearRect(0, 0, bestBarcodeCanvas.current.width, bestBarcodeCanvas.current.height);
|
|
6351
|
+
}
|
|
6352
|
+
}
|
|
6353
|
+
if (recaptureBarcodeCanvas.current) {
|
|
6354
|
+
var ctx = recaptureBarcodeCanvas.current.getContext('2d');
|
|
6355
|
+
if (ctx) {
|
|
6356
|
+
ctx.clearRect(0, 0, recaptureBarcodeCanvas.current.width, recaptureBarcodeCanvas.current.height);
|
|
6357
|
+
}
|
|
6358
|
+
}
|
|
6359
|
+
}, []);
|
|
6324
6360
|
var startBarcodeRecapturePhase = useCallback(function () {
|
|
6361
|
+
log("[IdCaptureModelsProvider] Starting barcode recapture phase. Initial best score: ".concat(bestBarcodeScore.current));
|
|
6325
6362
|
// Snapshot current best barcode to initial capture canvas
|
|
6326
6363
|
if (bestBarcodeCanvas.current && initialCaptureBarcodeCanvas.current) {
|
|
6327
6364
|
var ctx = initialCaptureBarcodeCanvas.current.getContext('2d');
|
|
@@ -6438,13 +6475,14 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6438
6475
|
bestFrameDetails: bestFrameDetails,
|
|
6439
6476
|
bestBarcodeDetails: bestBarcodeDetails,
|
|
6440
6477
|
getBestBarcode: getBestBarcode,
|
|
6478
|
+
resetBestBarcode: resetBestBarcode,
|
|
6441
6479
|
startBarcodeRecapturePhase: startBarcodeRecapturePhase,
|
|
6442
6480
|
getInitialCaptureBestBarcode: getInitialCaptureBestBarcode,
|
|
6443
6481
|
getRecaptureBestBarcode: getRecaptureBestBarcode,
|
|
6444
6482
|
requiredDocumentType: requiredDocumentType,
|
|
6445
6483
|
setRequiredDocumentType: setRequiredDocumentType
|
|
6446
6484
|
};
|
|
6447
|
-
}, [ready, modelDownloadProgress, modelLoadState, modelWarmingStartedAt, modelError, startDocumentDetection, stopDocumentDetection, load, thresholds, setThresholds, documentDetectionBoundaries, setDocumentDetectionBoundaries, onPredictionMade, detectionTime, focusPredictionTime, barcodeReadabilityPredictionTime, getBestFrame, resetBestFrame, getBestBarcode, startBarcodeRecapturePhase, getInitialCaptureBestBarcode, getRecaptureBestBarcode, requiredDocumentType]);
|
|
6485
|
+
}, [ready, modelDownloadProgress, modelLoadState, modelWarmingStartedAt, modelError, startDocumentDetection, stopDocumentDetection, load, thresholds, setThresholds, documentDetectionBoundaries, setDocumentDetectionBoundaries, onPredictionMade, detectionTime, focusPredictionTime, barcodeReadabilityPredictionTime, getBestFrame, resetBestFrame, getBestBarcode, resetBestBarcode, startBarcodeRecapturePhase, getInitialCaptureBestBarcode, getRecaptureBestBarcode, requiredDocumentType]);
|
|
6448
6486
|
return /*#__PURE__*/React__default.createElement(IdCaptureModelsContext.Provider, {
|
|
6449
6487
|
value: value
|
|
6450
6488
|
}, /*#__PURE__*/React__default.createElement(InvisibleCanvasContainer, null, /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
|
|
@@ -7014,12 +7052,12 @@ function DebugStatsPane(_a) {
|
|
|
7014
7052
|
if (!portalLocation) return element;
|
|
7015
7053
|
return /*#__PURE__*/createPortal(element, portalLocation);
|
|
7016
7054
|
}
|
|
7017
|
-
var DebugStatsPaneDiv = styled.span(templateObject_1$
|
|
7018
|
-
var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$
|
|
7055
|
+
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"])));
|
|
7056
|
+
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
7057
|
var $flipX = _a.$flipX;
|
|
7020
7058
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
7021
7059
|
});
|
|
7022
|
-
var ObjectDetectionDebugBox = styled.div(templateObject_3$
|
|
7060
|
+
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
7061
|
var $color = _a.$color;
|
|
7024
7062
|
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
7025
7063
|
}, function (_a) {
|
|
@@ -7029,7 +7067,11 @@ var ObjectDetectionDebugBox = styled.div(templateObject_3$t || (templateObject_3
|
|
|
7029
7067
|
var $flipX = _a.$flipX;
|
|
7030
7068
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
7031
7069
|
});
|
|
7032
|
-
var
|
|
7070
|
+
var ObjectDetectionDebugLabel = styled.span(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n position: absolute;\n top: -1px;\n left: -1px;\n background: ", ";\n color: black;\n font: bold 9px monospace;\n padding: 1px 3px;\n white-space: nowrap;\n transform: translateY(-100%);\n"], ["\n position: absolute;\n top: -1px;\n left: -1px;\n background: ", ";\n color: black;\n font: bold 9px monospace;\n padding: 1px 3px;\n white-space: nowrap;\n transform: translateY(-100%);\n"])), function (_a) {
|
|
7071
|
+
var $color = _a.$color;
|
|
7072
|
+
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
7073
|
+
});
|
|
7074
|
+
var FaceDetectionKeypointMarker = styled.div(templateObject_5$i || (templateObject_5$i = __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
7075
|
var $color = _a.$color;
|
|
7034
7076
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
7035
7077
|
}, function (_a) {
|
|
@@ -7141,7 +7183,9 @@ function IdCaptureDetectedObjectDebugBox(_a) {
|
|
|
7141
7183
|
width: width,
|
|
7142
7184
|
height: height
|
|
7143
7185
|
}
|
|
7144
|
-
}
|
|
7186
|
+
}, /*#__PURE__*/React__default.createElement(ObjectDetectionDebugLabel, {
|
|
7187
|
+
"$color": color
|
|
7188
|
+
}, obj.label, " ", obj.score.toFixed(2)));
|
|
7145
7189
|
}
|
|
7146
7190
|
function SelfieCaptureFaceDebugBox(_a) {
|
|
7147
7191
|
var face = _a.face,
|
|
@@ -7227,7 +7271,7 @@ function SelfieCaptureFaceKeypoint(_a) {
|
|
|
7227
7271
|
}
|
|
7228
7272
|
});
|
|
7229
7273
|
}
|
|
7230
|
-
var templateObject_1$
|
|
7274
|
+
var templateObject_1$M, templateObject_2$H, templateObject_3$v, templateObject_4$p, templateObject_5$i;
|
|
7231
7275
|
|
|
7232
7276
|
function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
7233
7277
|
var _b = _a.classNames,
|
|
@@ -7260,18 +7304,18 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
|
7260
7304
|
}
|
|
7261
7305
|
}, verbiage.buttonText))));
|
|
7262
7306
|
}
|
|
7263
|
-
var Container$7 = styled.div(templateObject_1$
|
|
7307
|
+
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
7308
|
var _a, _b, _c;
|
|
7265
7309
|
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
7310
|
}, function (props) {
|
|
7267
7311
|
var _a, _b, _c;
|
|
7268
7312
|
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
7313
|
});
|
|
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$
|
|
7314
|
+
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"])));
|
|
7315
|
+
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"])));
|
|
7316
|
+
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"])));
|
|
7317
|
+
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"])));
|
|
7318
|
+
var templateObject_1$L, templateObject_2$G, templateObject_3$u, templateObject_4$o, templateObject_5$h;
|
|
7275
7319
|
|
|
7276
7320
|
// This is a simplified version of https://github.com/ZeeCoder/use-resize-observer.
|
|
7277
7321
|
// We have removed all options and made it compliant with React Compiler/React 19.
|
|
@@ -7603,13 +7647,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
7603
7647
|
finished: true
|
|
7604
7648
|
}, verbiage.retryBtnText)));
|
|
7605
7649
|
};
|
|
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$
|
|
7650
|
+
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"])));
|
|
7651
|
+
var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
7652
|
+
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"])));
|
|
7653
|
+
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"])));
|
|
7654
|
+
var templateObject_1$K, templateObject_2$F, templateObject_3$t, templateObject_4$n;
|
|
7611
7655
|
|
|
7612
|
-
var ExitCaptureStyledButton = styled.button(templateObject_1$
|
|
7656
|
+
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
7657
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
7614
7658
|
var onClick = _a.onClick,
|
|
7615
7659
|
className = _a.className;
|
|
@@ -7653,7 +7697,7 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
|
7653
7697
|
y2: "19.75"
|
|
7654
7698
|
}))));
|
|
7655
7699
|
};
|
|
7656
|
-
var templateObject_1$
|
|
7700
|
+
var templateObject_1$J;
|
|
7657
7701
|
|
|
7658
7702
|
function IdCaptureLoadingGraphic(props) {
|
|
7659
7703
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
@@ -8128,21 +8172,21 @@ function IdCaptureLoadingGraphicMobile(_a) {
|
|
|
8128
8172
|
fill: "white"
|
|
8129
8173
|
}))));
|
|
8130
8174
|
}
|
|
8131
|
-
var LoadingGraphicWrapper = styled.div(templateObject_1$
|
|
8132
|
-
var LoadingGraphicSvg = styled.svg(templateObject_2$
|
|
8175
|
+
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"])));
|
|
8176
|
+
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
8177
|
return props.$frame > 1 ? 1 : props.$frame === 1 ? 1.25 : 0.75;
|
|
8134
8178
|
}, function (props) {
|
|
8135
8179
|
return props.$frame >= 5 ? 10 : 0;
|
|
8136
8180
|
}, function (props) {
|
|
8137
8181
|
return props.$borderColor;
|
|
8138
8182
|
});
|
|
8139
|
-
var LoadingGraphicCardGroup = styled.g(templateObject_3$
|
|
8183
|
+
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
8184
|
return props.$offScreen ? '-500px' : '0';
|
|
8141
8185
|
});
|
|
8142
|
-
var LoadingGraphicPhoneGroup = styled.g(templateObject_4$
|
|
8186
|
+
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
8187
|
return props.$offScreen ? '40px' : '0';
|
|
8144
8188
|
});
|
|
8145
|
-
var templateObject_1$
|
|
8189
|
+
var templateObject_1$I, templateObject_2$E, templateObject_3$s, templateObject_4$m;
|
|
8146
8190
|
|
|
8147
8191
|
function LoadingListItemIndicator(_a) {
|
|
8148
8192
|
var _b = _a.state,
|
|
@@ -8411,24 +8455,24 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
|
|
|
8411
8455
|
}
|
|
8412
8456
|
}, ready ? verbiage.continueText : verbiage.pleaseWaitText))))));
|
|
8413
8457
|
};
|
|
8414
|
-
var OverlayInner$1 = styled(LoadingOverlayInner)(templateObject_1$
|
|
8458
|
+
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
8459
|
var _a, _b, _c, _d;
|
|
8416
8460
|
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
8461
|
}, function (props) {
|
|
8418
8462
|
var _a, _b, _c, _d;
|
|
8419
8463
|
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
8464
|
});
|
|
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$
|
|
8465
|
+
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"])));
|
|
8466
|
+
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"])));
|
|
8467
|
+
var ContinuityCameraCheckbox$1 = styled.input(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
8468
|
+
var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n color: ", ";\n ", "\n"], ["\n color: ", ";\n ", "\n"])), function (props) {
|
|
8425
8469
|
var _a, _b, _c, _d;
|
|
8426
8470
|
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
8471
|
}, function (props) {
|
|
8428
8472
|
var _a, _b, _c, _d, _e, _f;
|
|
8429
8473
|
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
8474
|
});
|
|
8431
|
-
var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$
|
|
8475
|
+
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
8476
|
var _a, _b, _c, _d;
|
|
8433
8477
|
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
8478
|
}, function (props) {
|
|
@@ -8458,10 +8502,10 @@ var ContinueButton$1 = styled(LoaderButton)(templateObject_8$5 || (templateObjec
|
|
|
8458
8502
|
var _a, _b, _c, _d;
|
|
8459
8503
|
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
8504
|
});
|
|
8461
|
-
var templateObject_1$
|
|
8505
|
+
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
8506
|
|
|
8463
|
-
var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$
|
|
8464
|
-
var ContinuityCameraCheckbox = styled.input(templateObject_2$
|
|
8507
|
+
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"])));
|
|
8508
|
+
var ContinuityCameraCheckbox = styled.input(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8465
8509
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
8466
8510
|
var _b, _c, _d, _e;
|
|
8467
8511
|
var onDismissed = _a.onDismissed,
|
|
@@ -8582,7 +8626,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
8582
8626
|
}
|
|
8583
8627
|
}, ready ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
8584
8628
|
};
|
|
8585
|
-
var templateObject_1$
|
|
8629
|
+
var templateObject_1$G, templateObject_2$C;
|
|
8586
8630
|
|
|
8587
8631
|
var components$1 = {
|
|
8588
8632
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -8640,9 +8684,9 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
|
|
|
8640
8684
|
});
|
|
8641
8685
|
};
|
|
8642
8686
|
|
|
8643
|
-
var Card = styled.div(templateObject_1$
|
|
8644
|
-
var FlexCard = styled(Card)(templateObject_2$
|
|
8645
|
-
var templateObject_1$
|
|
8687
|
+
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"])));
|
|
8688
|
+
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"])));
|
|
8689
|
+
var templateObject_1$F, templateObject_2$B;
|
|
8646
8690
|
|
|
8647
8691
|
var imageDisplayOrder = ['idCardFront', 'idCardBack', 'idBarcodeImage', 'passport', 'singlePage', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
|
|
8648
8692
|
var downloadImage = function downloadImage(dataUrl, filename) {
|
|
@@ -8777,12 +8821,12 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8777
8821
|
finished: true
|
|
8778
8822
|
}, verbiage.retryText)))));
|
|
8779
8823
|
};
|
|
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$
|
|
8824
|
+
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"])));
|
|
8825
|
+
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"])));
|
|
8826
|
+
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"])));
|
|
8827
|
+
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"])));
|
|
8828
|
+
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"])));
|
|
8829
|
+
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
8830
|
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
8831
|
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
8832
|
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 +8910,7 @@ var BarcodeComparisonScoreLabel = styled.span(templateObject_23$1 || (templateOb
|
|
|
8866
8910
|
var $isHigher = _a.$isHigher;
|
|
8867
8911
|
return $isHigher ? '#c3e6cb' : '#dee2e6';
|
|
8868
8912
|
});
|
|
8869
|
-
var templateObject_1$
|
|
8913
|
+
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
8914
|
|
|
8871
8915
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
8872
8916
|
var _this = this;
|
|
@@ -8918,12 +8962,12 @@ function resetCanvasDimensions(canvas) {
|
|
|
8918
8962
|
canvas.style.height = '0';
|
|
8919
8963
|
}
|
|
8920
8964
|
|
|
8921
|
-
var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$
|
|
8965
|
+
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
8966
|
return props.$isVisible ? '' : 'opacity: 0;';
|
|
8923
8967
|
}, function (props) {
|
|
8924
8968
|
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
8925
8969
|
});
|
|
8926
|
-
var IdCardGuideImage = styled.img(templateObject_2$
|
|
8970
|
+
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
8971
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
8928
8972
|
}, function (props) {
|
|
8929
8973
|
return props.$isInvisible ? 'opacity: 0;' : '';
|
|
@@ -9073,17 +9117,17 @@ function IdCardBorderSvg(_a) {
|
|
|
9073
9117
|
className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
|
|
9074
9118
|
}));
|
|
9075
9119
|
}
|
|
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$
|
|
9120
|
+
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);
|
|
9121
|
+
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"])));
|
|
9122
|
+
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"])));
|
|
9123
|
+
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
9124
|
var _a;
|
|
9081
9125
|
return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
|
|
9082
9126
|
}, function (props) {
|
|
9083
9127
|
var _a;
|
|
9084
9128
|
return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
|
|
9085
9129
|
});
|
|
9086
|
-
var templateObject_1$
|
|
9130
|
+
var templateObject_1$D, templateObject_2$z, templateObject_3$p, templateObject_4$j, templateObject_5$e, templateObject_6$8;
|
|
9087
9131
|
|
|
9088
9132
|
var defaultIdCaptureGuideImages = {
|
|
9089
9133
|
portrait: {
|
|
@@ -9231,7 +9275,7 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
9231
9275
|
clearTimeout(timeout);
|
|
9232
9276
|
};
|
|
9233
9277
|
}, []);
|
|
9234
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
9278
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
9235
9279
|
"$isLandscape": orientation === 'landscape',
|
|
9236
9280
|
style: {
|
|
9237
9281
|
aspectRatio: aspectRatio
|
|
@@ -9272,15 +9316,15 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
9272
9316
|
style: imageStyle
|
|
9273
9317
|
})));
|
|
9274
9318
|
};
|
|
9275
|
-
var Wrapper$
|
|
9319
|
+
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
9320
|
return props.$isLandscape ? 'height: 100%;' : 'height: 100%;';
|
|
9277
9321
|
});
|
|
9278
|
-
var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_2$
|
|
9322
|
+
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
9323
|
return props.$transitionTime;
|
|
9280
9324
|
}, function (props) {
|
|
9281
9325
|
return props.$transforms;
|
|
9282
9326
|
});
|
|
9283
|
-
var templateObject_1$
|
|
9327
|
+
var templateObject_1$C, templateObject_2$y;
|
|
9284
9328
|
|
|
9285
9329
|
var GuideOrientationContext = /*#__PURE__*/createContext({
|
|
9286
9330
|
orientation: 'landscape',
|
|
@@ -9375,7 +9419,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
|
|
|
9375
9419
|
clearTimeout(timeout);
|
|
9376
9420
|
};
|
|
9377
9421
|
}, []);
|
|
9378
|
-
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
9422
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$1, {
|
|
9379
9423
|
style: {
|
|
9380
9424
|
aspectRatio: imageAspectRatio
|
|
9381
9425
|
},
|
|
@@ -9419,10 +9463,10 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
|
|
|
9419
9463
|
height: height
|
|
9420
9464
|
})));
|
|
9421
9465
|
};
|
|
9422
|
-
var Wrapper = styled.div(templateObject_1$
|
|
9466
|
+
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
9467
|
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
9424
9468
|
});
|
|
9425
|
-
var templateObject_1$
|
|
9469
|
+
var templateObject_1$B;
|
|
9426
9470
|
|
|
9427
9471
|
var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
9428
9472
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
@@ -9568,10 +9612,10 @@ var regionClsx = function regionClsx(classNames, which) {
|
|
|
9568
9612
|
return v;
|
|
9569
9613
|
}).join(' ');
|
|
9570
9614
|
};
|
|
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$
|
|
9615
|
+
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"])));
|
|
9616
|
+
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"])));
|
|
9617
|
+
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"])));
|
|
9618
|
+
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
9619
|
var _a, _b, _c, _d, _e;
|
|
9576
9620
|
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
9621
|
}, function (props) {
|
|
@@ -9582,8 +9626,8 @@ var GuideRegion = styled.div(templateObject_4$g || (templateObject_4$g = __makeT
|
|
|
9582
9626
|
}, function (props) {
|
|
9583
9627
|
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
9584
9628
|
});
|
|
9585
|
-
var Spacer = styled(GuideRegion)(templateObject_5$
|
|
9586
|
-
var GuideCenterRegion = styled.div(templateObject_6$
|
|
9629
|
+
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"])));
|
|
9630
|
+
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
9631
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
9588
9632
|
}, function (props) {
|
|
9589
9633
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
@@ -9598,7 +9642,7 @@ var GuideText = styled.span(templateObject_8$3 || (templateObject_8$3 = __makeTe
|
|
|
9598
9642
|
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
9643
|
return props.$isLandscape ? 'height: 100%;' : 'width: 90%;';
|
|
9600
9644
|
});
|
|
9601
|
-
var templateObject_1$
|
|
9645
|
+
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
9646
|
|
|
9603
9647
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
9604
9648
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -9721,7 +9765,7 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
9721
9765
|
ref: wrapperRef,
|
|
9722
9766
|
"$maskColor": maskColor !== null && maskColor !== void 0 ? maskColor : '',
|
|
9723
9767
|
className: classNames.canvasWrapper
|
|
9724
|
-
}, /*#__PURE__*/React__default.createElement(Canvas$
|
|
9768
|
+
}, /*#__PURE__*/React__default.createElement(Canvas$2, {
|
|
9725
9769
|
ref: canvasRef,
|
|
9726
9770
|
className: classNames.canvas
|
|
9727
9771
|
})), /*#__PURE__*/React__default.createElement(IdCaptureGuideOverlay, {
|
|
@@ -9739,11 +9783,174 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
9739
9783
|
progress: progress
|
|
9740
9784
|
}));
|
|
9741
9785
|
};
|
|
9742
|
-
var CanvasWrapper$1 = styled.div(templateObject_1$
|
|
9786
|
+
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
9787
|
return props.$maskColor;
|
|
9744
9788
|
});
|
|
9745
|
-
var Canvas$
|
|
9746
|
-
var templateObject_1$
|
|
9789
|
+
var Canvas$2 = styled.canvas(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
9790
|
+
var templateObject_1$z, templateObject_2$w;
|
|
9791
|
+
|
|
9792
|
+
var PDF417_ASPECT_RATIO = 3 / 1;
|
|
9793
|
+
function BarcodeGuideOverlay(_a) {
|
|
9794
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
9795
|
+
var _l = _a.aspectRatio,
|
|
9796
|
+
aspectRatio = _l === void 0 ? PDF417_ASPECT_RATIO : _l,
|
|
9797
|
+
maskColor = _a.maskColor,
|
|
9798
|
+
_m = _a.cornerColor,
|
|
9799
|
+
cornerColor = _m === void 0 ? 'white' : _m,
|
|
9800
|
+
_o = _a.cornerLength,
|
|
9801
|
+
cornerLength = _o === void 0 ? 40 : _o,
|
|
9802
|
+
_p = _a.cornerWidth,
|
|
9803
|
+
cornerWidth = _p === void 0 ? 4 : _p,
|
|
9804
|
+
padding = _a.padding,
|
|
9805
|
+
_q = _a.borderRadius,
|
|
9806
|
+
borderRadius = _q === void 0 ? 8 : _q,
|
|
9807
|
+
_r = _a.headerText,
|
|
9808
|
+
headerText = _r === void 0 ? 'SCAN THE BARCODE' : _r,
|
|
9809
|
+
_s = _a.instructionText,
|
|
9810
|
+
instructionText = _s === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _s,
|
|
9811
|
+
_t = _a.isSuccess,
|
|
9812
|
+
isSuccess = _t === void 0 ? false : _t,
|
|
9813
|
+
_u = _a.successColor,
|
|
9814
|
+
successColor = _u === void 0 ? '#22c55e' : _u,
|
|
9815
|
+
_v = _a.classNames,
|
|
9816
|
+
classNames = _v === void 0 ? {} : _v;
|
|
9817
|
+
var canvasRef = useRef(null);
|
|
9818
|
+
var _w = useResizeObserver(),
|
|
9819
|
+
wrapperRef = _w.ref,
|
|
9820
|
+
_x = _w.width,
|
|
9821
|
+
wrapperWidth = _x === void 0 ? 1 : _x,
|
|
9822
|
+
_y = _w.height,
|
|
9823
|
+
wrapperHeight = _y === void 0 ? 1 : _y;
|
|
9824
|
+
var theme = useTheme();
|
|
9825
|
+
if (padding === undefined) {
|
|
9826
|
+
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;
|
|
9827
|
+
}
|
|
9828
|
+
if (maskColor === undefined) {
|
|
9829
|
+
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';
|
|
9830
|
+
}
|
|
9831
|
+
useEffect(function () {
|
|
9832
|
+
var canvas = canvasRef.current;
|
|
9833
|
+
if (!canvas) return;
|
|
9834
|
+
// Wait for valid dimensions from resize observer
|
|
9835
|
+
if (wrapperWidth <= 1 || wrapperHeight <= 1) return;
|
|
9836
|
+
var boundingWidth = wrapperWidth - padding * 2;
|
|
9837
|
+
var boundingHeight = wrapperHeight - padding * 2;
|
|
9838
|
+
// Start with bounding box dimensions
|
|
9839
|
+
var rectWidth = boundingWidth;
|
|
9840
|
+
var rectHeight = boundingWidth / aspectRatio;
|
|
9841
|
+
// If calculated height exceeds available height, constrain by height instead
|
|
9842
|
+
if (rectHeight > boundingHeight) {
|
|
9843
|
+
rectHeight = boundingHeight;
|
|
9844
|
+
rectWidth = boundingHeight * aspectRatio;
|
|
9845
|
+
}
|
|
9846
|
+
// Center the rectangle
|
|
9847
|
+
var rectX = padding + (boundingWidth - rectWidth) / 2;
|
|
9848
|
+
var rectY = padding + (boundingHeight - rectHeight) / 2;
|
|
9849
|
+
setCanvasDimensions(canvas, wrapperWidth, wrapperHeight);
|
|
9850
|
+
var ctx = canvas.getContext('2d');
|
|
9851
|
+
if (!ctx) return;
|
|
9852
|
+
// Fill with mask color
|
|
9853
|
+
ctx.fillStyle = maskColor;
|
|
9854
|
+
ctx.clearRect(0, 0, wrapperWidth, wrapperHeight);
|
|
9855
|
+
ctx.fillRect(0, 0, wrapperWidth, wrapperHeight);
|
|
9856
|
+
// Create the cutout
|
|
9857
|
+
ctx.beginPath();
|
|
9858
|
+
ctx.roundRect(rectX, rectY, rectWidth, rectHeight, borderRadius);
|
|
9859
|
+
ctx.fillStyle = 'rgba(0,0,0,1)';
|
|
9860
|
+
ctx.globalCompositeOperation = 'destination-out';
|
|
9861
|
+
ctx.fill();
|
|
9862
|
+
ctx.globalCompositeOperation = 'source-over';
|
|
9863
|
+
// Draw corner brackets
|
|
9864
|
+
var color = isSuccess ? successColor : cornerColor;
|
|
9865
|
+
ctx.strokeStyle = color;
|
|
9866
|
+
ctx.lineWidth = cornerWidth;
|
|
9867
|
+
ctx.lineCap = 'round';
|
|
9868
|
+
var effectiveCornerLength = Math.min(cornerLength, rectWidth / 3, rectHeight / 3);
|
|
9869
|
+
// Top-left corner
|
|
9870
|
+
ctx.beginPath();
|
|
9871
|
+
ctx.moveTo(rectX + effectiveCornerLength, rectY);
|
|
9872
|
+
ctx.lineTo(rectX + borderRadius, rectY);
|
|
9873
|
+
ctx.arcTo(rectX, rectY, rectX, rectY + borderRadius, borderRadius);
|
|
9874
|
+
ctx.lineTo(rectX, rectY + effectiveCornerLength);
|
|
9875
|
+
ctx.stroke();
|
|
9876
|
+
// Top-right corner
|
|
9877
|
+
ctx.beginPath();
|
|
9878
|
+
ctx.moveTo(rectX + rectWidth - effectiveCornerLength, rectY);
|
|
9879
|
+
ctx.lineTo(rectX + rectWidth - borderRadius, rectY);
|
|
9880
|
+
ctx.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + borderRadius, borderRadius);
|
|
9881
|
+
ctx.lineTo(rectX + rectWidth, rectY + effectiveCornerLength);
|
|
9882
|
+
ctx.stroke();
|
|
9883
|
+
// Bottom-left corner
|
|
9884
|
+
ctx.beginPath();
|
|
9885
|
+
ctx.moveTo(rectX, rectY + rectHeight - effectiveCornerLength);
|
|
9886
|
+
ctx.lineTo(rectX, rectY + rectHeight - borderRadius);
|
|
9887
|
+
ctx.arcTo(rectX, rectY + rectHeight, rectX + borderRadius, rectY + rectHeight, borderRadius);
|
|
9888
|
+
ctx.lineTo(rectX + effectiveCornerLength, rectY + rectHeight);
|
|
9889
|
+
ctx.stroke();
|
|
9890
|
+
// Bottom-right corner
|
|
9891
|
+
ctx.beginPath();
|
|
9892
|
+
ctx.moveTo(rectX + rectWidth, rectY + rectHeight - effectiveCornerLength);
|
|
9893
|
+
ctx.lineTo(rectX + rectWidth, rectY + rectHeight - borderRadius);
|
|
9894
|
+
ctx.arcTo(rectX + rectWidth, rectY + rectHeight, rectX + rectWidth - borderRadius, rectY + rectHeight, borderRadius);
|
|
9895
|
+
ctx.lineTo(rectX + rectWidth - effectiveCornerLength, rectY + rectHeight);
|
|
9896
|
+
ctx.stroke();
|
|
9897
|
+
return function () {
|
|
9898
|
+
resetCanvasDimensions(canvas);
|
|
9899
|
+
};
|
|
9900
|
+
}, [aspectRatio, borderRadius, cornerColor, cornerLength, cornerWidth, isSuccess, maskColor, padding, successColor, wrapperHeight, wrapperWidth]);
|
|
9901
|
+
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
9902
|
+
ref: wrapperRef,
|
|
9903
|
+
className: classNames.wrapper
|
|
9904
|
+
}, /*#__PURE__*/React__default.createElement(Canvas$1, {
|
|
9905
|
+
ref: canvasRef,
|
|
9906
|
+
className: classNames.canvas
|
|
9907
|
+
}), /*#__PURE__*/React__default.createElement(TextOverlay, null, /*#__PURE__*/React__default.createElement(HeaderText, {
|
|
9908
|
+
className: classNames.header
|
|
9909
|
+
}, headerText), /*#__PURE__*/React__default.createElement(InstructionText, {
|
|
9910
|
+
className: classNames.instruction
|
|
9911
|
+
}, instructionText)));
|
|
9912
|
+
}
|
|
9913
|
+
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"])));
|
|
9914
|
+
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"])));
|
|
9915
|
+
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"])));
|
|
9916
|
+
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"])));
|
|
9917
|
+
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"])));
|
|
9918
|
+
var templateObject_1$y, templateObject_2$v, templateObject_3$n, templateObject_4$h, templateObject_5$c;
|
|
9919
|
+
|
|
9920
|
+
function BarcodeSuccessOverlay(_a) {
|
|
9921
|
+
var _b = _a.headerText,
|
|
9922
|
+
headerText = _b === void 0 ? 'Scan Successful!' : _b,
|
|
9923
|
+
_c = _a.processingText,
|
|
9924
|
+
processingText = _c === void 0 ? 'Processing...' : _c,
|
|
9925
|
+
_d = _a.successColor,
|
|
9926
|
+
successColor = _d === void 0 ? '#22c55e' : _d;
|
|
9927
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BarcodeGuideOverlay, {
|
|
9928
|
+
headerText: headerText,
|
|
9929
|
+
instructionText: processingText,
|
|
9930
|
+
isSuccess: true,
|
|
9931
|
+
successColor: successColor
|
|
9932
|
+
}), /*#__PURE__*/React__default.createElement(CheckmarkWrapper, null, /*#__PURE__*/React__default.createElement(CheckmarkCircle, {
|
|
9933
|
+
"$color": successColor
|
|
9934
|
+
}, /*#__PURE__*/React__default.createElement(CheckmarkIcon, {
|
|
9935
|
+
viewBox: "0 0 24 24",
|
|
9936
|
+
fill: "none"
|
|
9937
|
+
}, /*#__PURE__*/React__default.createElement(CheckmarkPath, {
|
|
9938
|
+
d: "M5 13l4 4L19 7",
|
|
9939
|
+
stroke: "white",
|
|
9940
|
+
strokeWidth: "3",
|
|
9941
|
+
strokeLinecap: "round",
|
|
9942
|
+
strokeLinejoin: "round"
|
|
9943
|
+
})))));
|
|
9944
|
+
}
|
|
9945
|
+
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"])));
|
|
9946
|
+
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"])));
|
|
9947
|
+
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"])));
|
|
9948
|
+
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) {
|
|
9949
|
+
return props.$color;
|
|
9950
|
+
}, scaleIn);
|
|
9951
|
+
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"])));
|
|
9952
|
+
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);
|
|
9953
|
+
var templateObject_1$x, templateObject_2$u, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$6;
|
|
9747
9954
|
|
|
9748
9955
|
function IdCaptureGuides(_a) {
|
|
9749
9956
|
var _b = _a.guideType,
|
|
@@ -9765,7 +9972,15 @@ function IdCaptureGuides(_a) {
|
|
|
9765
9972
|
_k = _a.colors,
|
|
9766
9973
|
colors = _k === void 0 ? {} : _k,
|
|
9767
9974
|
_l = _a.verbiage,
|
|
9768
|
-
rawVerbiage = _l === void 0 ? {} : _l
|
|
9975
|
+
rawVerbiage = _l === void 0 ? {} : _l,
|
|
9976
|
+
_m = _a.isRequestingBetterBarcode,
|
|
9977
|
+
isRequestingBetterBarcode = _m === void 0 ? false : _m,
|
|
9978
|
+
_o = _a.isBarcodeSuccess,
|
|
9979
|
+
isBarcodeSuccess = _o === void 0 ? false : _o,
|
|
9980
|
+
_p = _a.barcodeHeaderText,
|
|
9981
|
+
barcodeHeaderText = _p === void 0 ? 'SCAN THE BARCODE' : _p,
|
|
9982
|
+
_q = _a.barcodeInstructionText,
|
|
9983
|
+
barcodeInstructionText = _q === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _q;
|
|
9769
9984
|
var state = useIdCaptureStore();
|
|
9770
9985
|
var isRearFacing = useCameraStore(function (state) {
|
|
9771
9986
|
return state.isRearFacing;
|
|
@@ -9775,6 +9990,16 @@ function IdCaptureGuides(_a) {
|
|
|
9775
9990
|
capturingText: 'Capturing...',
|
|
9776
9991
|
captureFailedText: 'Capture failed!'
|
|
9777
9992
|
});
|
|
9993
|
+
// Render barcode guide overlays when in barcode recapture state
|
|
9994
|
+
if (isRequestingBetterBarcode) {
|
|
9995
|
+
if (isBarcodeSuccess) {
|
|
9996
|
+
return /*#__PURE__*/React__default.createElement(BarcodeSuccessOverlay, null);
|
|
9997
|
+
}
|
|
9998
|
+
return /*#__PURE__*/React__default.createElement(BarcodeGuideOverlay, {
|
|
9999
|
+
headerText: barcodeHeaderText,
|
|
10000
|
+
instructionText: barcodeInstructionText
|
|
10001
|
+
});
|
|
10002
|
+
}
|
|
9778
10003
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, guideType === 'overlay' && (/*#__PURE__*/React__default.createElement(IdCaptureGuideOverlay, {
|
|
9779
10004
|
images: images,
|
|
9780
10005
|
classNames: classNames,
|
|
@@ -11494,6 +11719,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11494
11719
|
setRequiredDocumentType = _18.setRequiredDocumentType,
|
|
11495
11720
|
modelError = _18.modelError,
|
|
11496
11721
|
resetBestFrame = _18.resetBestFrame,
|
|
11722
|
+
resetBestBarcode = _18.resetBestBarcode,
|
|
11497
11723
|
documentDetectionBoundaries = _18.documentDetectionBoundaries,
|
|
11498
11724
|
setDocumentDetectionBoundaries = _18.setDocumentDetectionBoundaries,
|
|
11499
11725
|
getBestBarcode = _18.getBestBarcode,
|
|
@@ -11767,44 +11993,63 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11767
11993
|
initialCaptureBarcodeImage: initialBarcodeImage
|
|
11768
11994
|
}
|
|
11769
11995
|
});
|
|
11770
|
-
|
|
11996
|
+
// Start recapture phase immediately so barcode analysis runs with relaxed conditions
|
|
11997
|
+
// (don't require document in bounds since user is zooming in)
|
|
11998
|
+
startBarcodeRecapturePhase();
|
|
11999
|
+
}, [startBarcodeRecapturePhase, state.captureState, (_d = state.capturedDocuments.idBarcodeImage) === null || _d === void 0 ? void 0 : _d.imageData, state.initialBarcodeScore, state.initialCaptureBarcodeImage]);
|
|
12000
|
+
// Reset best barcode after 1 second delay to ignore early frames before user has time to move closer
|
|
12001
|
+
useEffect(function () {
|
|
12002
|
+
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
12003
|
+
var t = setTimeout(function () {
|
|
12004
|
+
log('[IdCaptureWizard] Resetting best barcode after 1s delay in move-closer window');
|
|
12005
|
+
resetBestBarcode();
|
|
12006
|
+
}, 1000);
|
|
12007
|
+
return function () {
|
|
12008
|
+
return clearTimeout(t);
|
|
12009
|
+
};
|
|
12010
|
+
}, [resetBestBarcode, state.captureState]);
|
|
11771
12011
|
// Handle barcode recapture timeout
|
|
11772
12012
|
useEffect(function () {
|
|
11773
12013
|
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
11774
12014
|
// Continue detection to try to get a better barcode
|
|
11775
12015
|
setTimeout(start, 100);
|
|
11776
12016
|
var t = setTimeout(function () {
|
|
11777
|
-
|
|
12017
|
+
var _a, _b;
|
|
12018
|
+
// Move-closer window expired before growth requirement was met
|
|
11778
12019
|
if (recapturePhaseStartedRef.current) return;
|
|
11779
|
-
|
|
11780
|
-
var
|
|
12020
|
+
// Use recapture tracking since we start tracking with relaxed conditions immediately
|
|
12021
|
+
var recaptureBarcode = getRecaptureBestBarcode();
|
|
12022
|
+
var recaptureScore = (_a = recaptureBarcode === null || recaptureBarcode === void 0 ? void 0 : recaptureBarcode.score) !== null && _a !== void 0 ? _a : null;
|
|
12023
|
+
var improved = !!recaptureBarcode && recaptureBarcode.score > state.initialBarcodeScore;
|
|
11781
12024
|
if (improved) {
|
|
11782
|
-
log("[IdCaptureWizard] Barcode recapture move-closer window timed out. Found better barcode anyway: ".concat(
|
|
11783
|
-
// Persist the "after" image for debug visual comparison, even if the
|
|
11784
|
-
// model-provider recapture tracker was never started.
|
|
11785
|
-
dispatchIdCaptureAction({
|
|
11786
|
-
type: 'recaptureBarcodeImageCaptured',
|
|
11787
|
-
payload: {
|
|
11788
|
-
recaptureBarcodeImage: bestBarcode.canvas.toDataURL('image/jpeg', 0.95)
|
|
11789
|
-
}
|
|
11790
|
-
});
|
|
12025
|
+
log("[IdCaptureWizard] Barcode recapture move-closer window timed out. Found better barcode anyway: ".concat(recaptureBarcode.score.toFixed(3), " (was ").concat(state.initialBarcodeScore.toFixed(3), ")"));
|
|
11791
12026
|
dispatchIdCaptureAction({
|
|
11792
12027
|
type: 'barcodeCaptured',
|
|
11793
12028
|
payload: {
|
|
11794
|
-
imageUrl:
|
|
11795
|
-
barcodeReadabilityScore:
|
|
12029
|
+
imageUrl: recaptureBarcode.canvas.toDataURL('image/jpeg', 0.95),
|
|
12030
|
+
barcodeReadabilityScore: recaptureBarcode.score
|
|
11796
12031
|
}
|
|
11797
12032
|
});
|
|
11798
12033
|
} else {
|
|
11799
|
-
log("[IdCaptureWizard] Barcode recapture move-closer window timed out. No better barcode found.
|
|
12034
|
+
log("[IdCaptureWizard] Barcode recapture move-closer window timed out. No better barcode found. Best score during window: ".concat((_b = recaptureScore === null || recaptureScore === void 0 ? void 0 : recaptureScore.toFixed(3)) !== null && _b !== void 0 ? _b : 'none', ", initial score: ").concat(state.initialBarcodeScore.toFixed(3)));
|
|
11800
12035
|
}
|
|
11801
|
-
// Record
|
|
12036
|
+
// Record recapture attempt data for diagnostics - always store the best score
|
|
12037
|
+
// from the move-closer window so debug info shows what was actually captured
|
|
11802
12038
|
dispatchIdCaptureAction({
|
|
11803
12039
|
type: 'barcodeRecaptureScoreUpdated',
|
|
11804
12040
|
payload: {
|
|
11805
|
-
recaptureBarcodeScore:
|
|
12041
|
+
recaptureBarcodeScore: recaptureScore
|
|
11806
12042
|
}
|
|
11807
12043
|
});
|
|
12044
|
+
// Persist the barcode image from move-closer window for debug visual comparison
|
|
12045
|
+
if (recaptureBarcode) {
|
|
12046
|
+
dispatchIdCaptureAction({
|
|
12047
|
+
type: 'recaptureBarcodeImageCaptured',
|
|
12048
|
+
payload: {
|
|
12049
|
+
recaptureBarcodeImage: recaptureBarcode.canvas.toDataURL('image/jpeg', 0.95)
|
|
12050
|
+
}
|
|
12051
|
+
});
|
|
12052
|
+
}
|
|
11808
12053
|
dispatchIdCaptureAction({
|
|
11809
12054
|
type: 'barcodeRecaptureCompleted'
|
|
11810
12055
|
});
|
|
@@ -11812,7 +12057,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11812
12057
|
return function () {
|
|
11813
12058
|
return clearTimeout(t);
|
|
11814
12059
|
};
|
|
11815
|
-
}, [barcodeRecaptureMoveCloserTimeoutMs,
|
|
12060
|
+
}, [barcodeRecaptureMoveCloserTimeoutMs, getRecaptureBestBarcode, start, state.captureState, state.initialBarcodeScore]);
|
|
11816
12061
|
useEffect(function () {
|
|
11817
12062
|
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
11818
12063
|
if (!barcodeRecaptureGrowthSatisfied) return;
|
|
@@ -11823,11 +12068,14 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11823
12068
|
var bestBarcode = getBestBarcode();
|
|
11824
12069
|
var recaptureScore = (_a = recaptureBarcode === null || recaptureBarcode === void 0 ? void 0 : recaptureBarcode.score) !== null && _a !== void 0 ? _a : null;
|
|
11825
12070
|
var improved = !!bestBarcode && bestBarcode.score > state.initialBarcodeScore;
|
|
12071
|
+
log("[IdCaptureWizard] Recapture timeout debug: recaptureBarcode=".concat(!!recaptureBarcode, ", recaptureScore=").concat(recaptureScore, ", bestBarcode=").concat(!!bestBarcode, ", bestBarcodeScore=").concat(bestBarcode === null || bestBarcode === void 0 ? void 0 : bestBarcode.score, ", initialScore=").concat(state.initialBarcodeScore, ", improved=").concat(improved));
|
|
11826
12072
|
// Store the recapture score for diagnostic purposes
|
|
12073
|
+
// Always use actual recapture score (even if worse than initial) so debug info
|
|
12074
|
+
// shows what was actually captured during each sequence
|
|
11827
12075
|
dispatchIdCaptureAction({
|
|
11828
12076
|
type: 'barcodeRecaptureScoreUpdated',
|
|
11829
12077
|
payload: {
|
|
11830
|
-
recaptureBarcodeScore:
|
|
12078
|
+
recaptureBarcodeScore: recaptureScore
|
|
11831
12079
|
}
|
|
11832
12080
|
});
|
|
11833
12081
|
// Store the recapture barcode image if we found one
|
|
@@ -11973,7 +12221,8 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11973
12221
|
classNames: classNames.guides,
|
|
11974
12222
|
colors: colors,
|
|
11975
12223
|
verbiage: idCaptureVerbiage,
|
|
11976
|
-
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments
|
|
12224
|
+
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments,
|
|
12225
|
+
isRequestingBetterBarcode: state.captureState === 'requestingBetterBarcode'
|
|
11977
12226
|
}), 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
12227
|
classNames: (_j = classNames.capture) === null || _j === void 0 ? void 0 : _j.imagePreview,
|
|
11979
12228
|
text: (_k = idCaptureVerbiages === null || idCaptureVerbiages === void 0 ? void 0 : idCaptureVerbiages.idCardFront) === null || _k === void 0 ? void 0 : _k.processingIdCardText,
|