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
|
@@ -452,16 +452,16 @@
|
|
|
452
452
|
className: "ladda-label"
|
|
453
453
|
}, children));
|
|
454
454
|
};
|
|
455
|
-
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) {
|
|
455
|
+
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) {
|
|
456
456
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
457
457
|
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 ");
|
|
458
458
|
});
|
|
459
|
-
var templateObject_1$
|
|
459
|
+
var templateObject_1$T;
|
|
460
460
|
|
|
461
|
-
var ButtonsRow$2 = styled.div(templateObject_1$
|
|
462
|
-
var templateObject_1$
|
|
461
|
+
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"])));
|
|
462
|
+
var templateObject_1$S;
|
|
463
463
|
|
|
464
|
-
var GuidanceMessageContainerDiv = styled.div(templateObject_1$
|
|
464
|
+
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) {
|
|
465
465
|
var $top = _a.$top;
|
|
466
466
|
return $top !== null && $top !== void 0 ? $top : '10%';
|
|
467
467
|
}, function (_a) {
|
|
@@ -474,36 +474,36 @@
|
|
|
474
474
|
if (!portalLocation) return element;
|
|
475
475
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
476
476
|
};
|
|
477
|
-
var GuidanceMessage = styled.div(templateObject_2$
|
|
477
|
+
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) {
|
|
478
478
|
var _a, _b, _c, _d, _e, _f;
|
|
479
479
|
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';
|
|
480
480
|
}, function (props) {
|
|
481
481
|
var _a, _b, _c, _d, _e, _f;
|
|
482
482
|
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';
|
|
483
483
|
});
|
|
484
|
-
var templateObject_1$
|
|
484
|
+
var templateObject_1$R, templateObject_2$M;
|
|
485
485
|
|
|
486
|
-
var wavesAnimation = styled.keyframes(templateObject_1$
|
|
487
|
-
var progressBarAnimation = styled.keyframes(templateObject_2$
|
|
488
|
-
var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$
|
|
489
|
-
var progressBorderAnimation = styled.keyframes(templateObject_4$
|
|
490
|
-
var templateObject_1$
|
|
486
|
+
var wavesAnimation = styled.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"])));
|
|
487
|
+
var progressBarAnimation = styled.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"])));
|
|
488
|
+
var dualRingSpinnerAnimation = styled.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"])));
|
|
489
|
+
var progressBorderAnimation = styled.keyframes(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n to {\n stroke-dashoffset: 0;\n }\n"], ["\n to {\n stroke-dashoffset: 0;\n }\n"])));
|
|
490
|
+
var templateObject_1$Q, templateObject_2$L, templateObject_3$x, templateObject_4$r;
|
|
491
491
|
|
|
492
|
-
var OverlayContainer = styled.div(templateObject_1$
|
|
492
|
+
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) {
|
|
493
493
|
return props.theme.background ? "".concat(props.theme.background) : "white";
|
|
494
494
|
}, function (props) {
|
|
495
495
|
return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
|
|
496
496
|
});
|
|
497
|
-
var OverlayInner$2 = styled.div(templateObject_2$
|
|
497
|
+
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) {
|
|
498
498
|
var _a;
|
|
499
499
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
500
500
|
}, function (props) {
|
|
501
501
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
502
502
|
});
|
|
503
|
-
var OverlayImageContainer = styled.div(templateObject_3$
|
|
504
|
-
var OverlayImageRow = styled.div(templateObject_4$
|
|
505
|
-
var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$
|
|
506
|
-
var ButtonsColumn = styled.div(templateObject_6$
|
|
503
|
+
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"])));
|
|
504
|
+
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"])));
|
|
505
|
+
var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n background: #f7f6fb;\n"], ["\n background: #f7f6fb;\n"])));
|
|
506
|
+
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"])));
|
|
507
507
|
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"])));
|
|
508
508
|
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) {
|
|
509
509
|
var _a, _b;
|
|
@@ -542,7 +542,7 @@
|
|
|
542
542
|
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"])));
|
|
543
543
|
var LoadingOverlayCustomLoadingGraphic = styled.img(templateObject_21$2 || (templateObject_21$2 = __makeTemplateObject(["\n transform-style: preserve-3d;\n"], ["\n transform-style: preserve-3d;\n"])));
|
|
544
544
|
var LoadingOverlayContinueButtonContainer = styled.div(templateObject_22$2 || (templateObject_22$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
545
|
-
var templateObject_1$
|
|
545
|
+
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;
|
|
546
546
|
|
|
547
547
|
function _extends() {
|
|
548
548
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
@@ -9180,8 +9180,8 @@
|
|
|
9180
9180
|
return [frameWidth, frameHeight];
|
|
9181
9181
|
}
|
|
9182
9182
|
|
|
9183
|
-
var InvisibleCanvasContainer = styled.div(templateObject_1$
|
|
9184
|
-
var InvisibleCanvas = styled.canvas(templateObject_2$
|
|
9183
|
+
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"])));
|
|
9184
|
+
var InvisibleCanvas = styled.canvas(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
9185
9185
|
function drawToCanvas(canvas, frame, width, height) {
|
|
9186
9186
|
if (!canvas) return;
|
|
9187
9187
|
var ctx = canvas.getContext('2d');
|
|
@@ -9201,7 +9201,7 @@
|
|
|
9201
9201
|
var _a;
|
|
9202
9202
|
(_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);
|
|
9203
9203
|
}
|
|
9204
|
-
var templateObject_1$
|
|
9204
|
+
var templateObject_1$O, templateObject_2$J;
|
|
9205
9205
|
|
|
9206
9206
|
function useFrameLoop(fn, options) {
|
|
9207
9207
|
if (options === void 0) {
|
|
@@ -13852,14 +13852,14 @@
|
|
|
13852
13852
|
className: classNames.message
|
|
13853
13853
|
}, messageText)));
|
|
13854
13854
|
}
|
|
13855
|
-
var StyledOverlayInner$4 = styled(OverlayInner$2)(templateObject_1$
|
|
13856
|
-
var StyledOverlayHeading = styled.h3(templateObject_2$
|
|
13855
|
+
var StyledOverlayInner$4 = styled(OverlayInner$2)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
13856
|
+
var StyledOverlayHeading = styled.h3(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
13857
13857
|
function useCameraStore(selector) {
|
|
13858
13858
|
var store = React.useContext(CameraStoreContext);
|
|
13859
13859
|
if (!store) throw new Error('useCameraStore cannot be used without Provider');
|
|
13860
13860
|
return useStore(store, selector);
|
|
13861
13861
|
}
|
|
13862
|
-
var templateObject_1$
|
|
13862
|
+
var templateObject_1$N, templateObject_2$I;
|
|
13863
13863
|
|
|
13864
13864
|
var DocumentDetectionModelContext = /*#__PURE__*/React.createContext({
|
|
13865
13865
|
startDocumentDetection: function startDocumentDetection() {
|
|
@@ -14690,9 +14690,9 @@
|
|
|
14690
14690
|
function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocumentCanvas, bestBarcodeCanvas, currentBestBarcodeScore, documentDetectionThresholds, makeBarcodeReadabilityPrediction, barcodeReadabilityThreshold) {
|
|
14691
14691
|
return __awaiter(this, void 0, void 0, function () {
|
|
14692
14692
|
var pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, newBestBarcodeScore, newBestBarcodeDetails, documentCroppedPrediction, processedCroppedPrediction, pdf417Prediction;
|
|
14693
|
-
var _a;
|
|
14694
|
-
return __generator(this, function (
|
|
14695
|
-
switch (
|
|
14693
|
+
var _a, _b;
|
|
14694
|
+
return __generator(this, function (_c) {
|
|
14695
|
+
switch (_c.label) {
|
|
14696
14696
|
case 0:
|
|
14697
14697
|
pdf417PredictionTime = 0;
|
|
14698
14698
|
pdf417PredictionScore = 0;
|
|
@@ -14703,7 +14703,8 @@
|
|
|
14703
14703
|
pdf417PredictionScore: pdf417PredictionScore,
|
|
14704
14704
|
pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
|
|
14705
14705
|
newBestBarcodeScore: newBestBarcodeScore,
|
|
14706
|
-
newBestBarcodeDetails: newBestBarcodeDetails
|
|
14706
|
+
newBestBarcodeDetails: newBestBarcodeDetails,
|
|
14707
|
+
processedBarcodeBoundingBox: undefined
|
|
14707
14708
|
}];
|
|
14708
14709
|
}
|
|
14709
14710
|
/**
|
|
@@ -14713,7 +14714,7 @@
|
|
|
14713
14714
|
cropToDetectedObjectBox(lastPredictionCanvas, prediction.bestDocument.box, croppedDocumentCanvas);
|
|
14714
14715
|
return [4 /*yield*/, makeDocumentDetectorPrediction(croppedDocumentCanvas)];
|
|
14715
14716
|
case 1:
|
|
14716
|
-
documentCroppedPrediction =
|
|
14717
|
+
documentCroppedPrediction = _c.sent();
|
|
14717
14718
|
if (!documentCroppedPrediction) {
|
|
14718
14719
|
// error occurred during prediction (error logged by callee)
|
|
14719
14720
|
return [2 /*return*/, {
|
|
@@ -14721,7 +14722,8 @@
|
|
|
14721
14722
|
pdf417PredictionScore: pdf417PredictionScore,
|
|
14722
14723
|
pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
|
|
14723
14724
|
newBestBarcodeScore: newBestBarcodeScore,
|
|
14724
|
-
newBestBarcodeDetails: newBestBarcodeDetails
|
|
14725
|
+
newBestBarcodeDetails: newBestBarcodeDetails,
|
|
14726
|
+
processedBarcodeBoundingBox: undefined
|
|
14725
14727
|
}];
|
|
14726
14728
|
}
|
|
14727
14729
|
processedCroppedPrediction = processDocumentDetectorPrediction(documentCroppedPrediction, documentDetectionThresholds);
|
|
@@ -14751,7 +14753,9 @@
|
|
|
14751
14753
|
pdf417PredictionScore: pdf417PredictionScore,
|
|
14752
14754
|
pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
|
|
14753
14755
|
newBestBarcodeScore: newBestBarcodeScore,
|
|
14754
|
-
newBestBarcodeDetails: newBestBarcodeDetails
|
|
14756
|
+
newBestBarcodeDetails: newBestBarcodeDetails,
|
|
14757
|
+
// Return processed barcode bounding box for recapture tracking (valid even when not a new best)
|
|
14758
|
+
processedBarcodeBoundingBox: (_b = processedCroppedPrediction === null || processedCroppedPrediction === void 0 ? void 0 : processedCroppedPrediction.bestPDF417) === null || _b === void 0 ? void 0 : _b.box
|
|
14755
14759
|
}];
|
|
14756
14760
|
}
|
|
14757
14761
|
});
|
|
@@ -14842,6 +14846,9 @@
|
|
|
14842
14846
|
getBestBarcode: function getBestBarcode() {
|
|
14843
14847
|
return null;
|
|
14844
14848
|
},
|
|
14849
|
+
resetBestBarcode: function resetBestBarcode() {
|
|
14850
|
+
return null;
|
|
14851
|
+
},
|
|
14845
14852
|
startBarcodeRecapturePhase: function startBarcodeRecapturePhase() {
|
|
14846
14853
|
return null;
|
|
14847
14854
|
},
|
|
@@ -14942,10 +14949,10 @@
|
|
|
14942
14949
|
var _this = this;
|
|
14943
14950
|
onDocumentDetected(function (prediction) {
|
|
14944
14951
|
return __awaiter(_this, void 0, void 0, function () {
|
|
14945
|
-
var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, isSinglePage, isRequiredDocumentType, isInRecapturePhase, shouldRunBarcodeAnalysisDuringRecapture, focusPrediction, focusThresholdSet, focusThreshold, barcodeAnalysisResult,
|
|
14946
|
-
var _a, _b, _c, _d, _e, _f, _g
|
|
14947
|
-
return __generator(this, function (
|
|
14948
|
-
switch (
|
|
14952
|
+
var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, isSinglePage, isRequiredDocumentType, isInRecapturePhase, shouldRunBarcodeAnalysisDuringRecapture, focusPrediction, focusThresholdSet, focusThreshold, barcodeAnalysisResult, barcodeAnalysisResult;
|
|
14953
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
14954
|
+
return __generator(this, function (_h) {
|
|
14955
|
+
switch (_h.label) {
|
|
14949
14956
|
case 0:
|
|
14950
14957
|
if (!lastPredictionCanvas.current) return [2 /*return*/];
|
|
14951
14958
|
stopDetectionAtStart = stopDetection.current;
|
|
@@ -14960,7 +14967,7 @@
|
|
|
14960
14967
|
}
|
|
14961
14968
|
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'));
|
|
14962
14969
|
isInRecapturePhase = isRecapturePhase.current;
|
|
14963
|
-
shouldRunBarcodeAnalysisDuringRecapture = isInRecapturePhase && isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.
|
|
14970
|
+
shouldRunBarcodeAnalysisDuringRecapture = isInRecapturePhase && isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.bestDocument && prediction.bestPDF417;
|
|
14964
14971
|
if (!(isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.documentInBounds && !prediction.documentTooClose && prediction.documentIsStable)) return [3 /*break*/, 3];
|
|
14965
14972
|
focusPrediction = makeFocusPrediction(lastPredictionCanvas.current, (_c = prediction.bestDocument) === null || _c === void 0 ? void 0 : _c.box);
|
|
14966
14973
|
if (focusPrediction) {
|
|
@@ -14984,7 +14991,7 @@
|
|
|
14984
14991
|
if (!(enableBarcodeReadabilityModel && prediction.bestDocument && prediction.bestPDF417 && croppedDocumentCanvas.current)) return [3 /*break*/, 2];
|
|
14985
14992
|
return [4 /*yield*/, analyzeBarcodeReadability(prediction, lastPredictionCanvas.current, croppedDocumentCanvas.current, bestBarcodeCanvas.current, bestBarcodeScore.current)];
|
|
14986
14993
|
case 1:
|
|
14987
|
-
barcodeAnalysisResult =
|
|
14994
|
+
barcodeAnalysisResult = _h.sent();
|
|
14988
14995
|
pdf417PredictionTime = barcodeAnalysisResult.pdf417PredictionTime;
|
|
14989
14996
|
pdf417PredictionScore = barcodeAnalysisResult.pdf417PredictionScore;
|
|
14990
14997
|
pdf417PredictionThresholdMet = barcodeAnalysisResult.pdf417PredictionThresholdMet;
|
|
@@ -14996,19 +15003,23 @@
|
|
|
14996
15003
|
}
|
|
14997
15004
|
// During recapture phase, also track best barcode separately for recapture sequence
|
|
14998
15005
|
if (isRecapturePhase.current && recaptureBarcodeCanvas.current && pdf417PredictionScore > recaptureBarcodeScore.current) {
|
|
15006
|
+
log("[IdCaptureModelsProvider] Recapture tracking: new best score ".concat(pdf417PredictionScore, " (was ").concat(recaptureBarcodeScore.current, ")"));
|
|
14999
15007
|
recaptureBarcodeScore.current = pdf417PredictionScore;
|
|
15000
|
-
|
|
15001
|
-
//
|
|
15002
|
-
|
|
15003
|
-
|
|
15004
|
-
|
|
15005
|
-
|
|
15006
|
-
|
|
15007
|
-
|
|
15008
|
-
|
|
15008
|
+
// Create details directly from current prediction (not newBestBarcodeDetails which
|
|
15009
|
+
// is only set when score beats overall best, not just recapture best)
|
|
15010
|
+
recaptureBarcodeDetails.current = {
|
|
15011
|
+
boundingBox: prediction.bestPDF417.box,
|
|
15012
|
+
score: pdf417PredictionScore
|
|
15013
|
+
};
|
|
15014
|
+
// Crop barcode from croppedDocumentCanvas using the processed bounding box
|
|
15015
|
+
// (can't use bestBarcodeCanvas since it's only updated for overall best)
|
|
15016
|
+
if (croppedDocumentCanvas.current && barcodeAnalysisResult.processedBarcodeBoundingBox) {
|
|
15017
|
+
cropToDetectedObjectBox(croppedDocumentCanvas.current, barcodeAnalysisResult.processedBarcodeBoundingBox, recaptureBarcodeCanvas.current, 16);
|
|
15018
|
+
} else {
|
|
15019
|
+
log("[IdCaptureModelsProvider] Recapture tracking: could not crop barcode - croppedDocumentCanvas=".concat(!!croppedDocumentCanvas.current, ", processedBarcodeBoundingBox=").concat(!!barcodeAnalysisResult.processedBarcodeBoundingBox));
|
|
15009
15020
|
}
|
|
15010
15021
|
}
|
|
15011
|
-
|
|
15022
|
+
_h.label = 2;
|
|
15012
15023
|
case 2:
|
|
15013
15024
|
return [3 /*break*/, 5];
|
|
15014
15025
|
case 3:
|
|
@@ -15016,7 +15027,7 @@
|
|
|
15016
15027
|
if (!(enableBarcodeReadabilityModel && croppedDocumentCanvas.current && stopDetectionAtStart === stopDetection.current)) return [3 /*break*/, 5];
|
|
15017
15028
|
return [4 /*yield*/, analyzeBarcodeReadability(prediction, lastPredictionCanvas.current, croppedDocumentCanvas.current, bestBarcodeCanvas.current, bestBarcodeScore.current)];
|
|
15018
15029
|
case 4:
|
|
15019
|
-
barcodeAnalysisResult =
|
|
15030
|
+
barcodeAnalysisResult = _h.sent();
|
|
15020
15031
|
pdf417PredictionTime = barcodeAnalysisResult.pdf417PredictionTime;
|
|
15021
15032
|
pdf417PredictionScore = barcodeAnalysisResult.pdf417PredictionScore;
|
|
15022
15033
|
pdf417PredictionThresholdMet = barcodeAnalysisResult.pdf417PredictionThresholdMet;
|
|
@@ -15028,19 +15039,23 @@
|
|
|
15028
15039
|
}
|
|
15029
15040
|
// Track best barcode separately for recapture sequence
|
|
15030
15041
|
if (recaptureBarcodeCanvas.current && pdf417PredictionScore > recaptureBarcodeScore.current) {
|
|
15042
|
+
log("[IdCaptureModelsProvider] Recapture tracking (relaxed): new best score ".concat(pdf417PredictionScore, " (was ").concat(recaptureBarcodeScore.current, ")"));
|
|
15031
15043
|
recaptureBarcodeScore.current = pdf417PredictionScore;
|
|
15032
|
-
|
|
15033
|
-
//
|
|
15034
|
-
|
|
15035
|
-
|
|
15036
|
-
|
|
15037
|
-
|
|
15038
|
-
|
|
15039
|
-
|
|
15040
|
-
|
|
15044
|
+
// Create details directly from current prediction (not newBestBarcodeDetails which
|
|
15045
|
+
// is only set when score beats overall best, not just recapture best)
|
|
15046
|
+
recaptureBarcodeDetails.current = {
|
|
15047
|
+
boundingBox: prediction.bestPDF417.box,
|
|
15048
|
+
score: pdf417PredictionScore
|
|
15049
|
+
};
|
|
15050
|
+
// Crop barcode from croppedDocumentCanvas using the processed bounding box
|
|
15051
|
+
// (can't use bestBarcodeCanvas since it's only updated for overall best)
|
|
15052
|
+
if (croppedDocumentCanvas.current && barcodeAnalysisResult.processedBarcodeBoundingBox) {
|
|
15053
|
+
cropToDetectedObjectBox(croppedDocumentCanvas.current, barcodeAnalysisResult.processedBarcodeBoundingBox, recaptureBarcodeCanvas.current, 16);
|
|
15054
|
+
} else {
|
|
15055
|
+
log("[IdCaptureModelsProvider] Recapture tracking (relaxed): could not crop barcode - croppedDocumentCanvas=".concat(!!croppedDocumentCanvas.current, ", processedBarcodeBoundingBox=").concat(!!barcodeAnalysisResult.processedBarcodeBoundingBox));
|
|
15041
15056
|
}
|
|
15042
15057
|
}
|
|
15043
|
-
|
|
15058
|
+
_h.label = 5;
|
|
15044
15059
|
case 5:
|
|
15045
15060
|
/**
|
|
15046
15061
|
* @note
|
|
@@ -15048,7 +15063,7 @@
|
|
|
15048
15063
|
* Do not return early from this function unless
|
|
15049
15064
|
* lastPredictionCanvas.current is not set
|
|
15050
15065
|
*/
|
|
15051
|
-
(
|
|
15066
|
+
(_g = onPredictionHandler.current) === null || _g === void 0 ? void 0 : _g.call(onPredictionHandler, _assign(_assign({}, prediction), {
|
|
15052
15067
|
focusScore: focusScore,
|
|
15053
15068
|
focusPredictionTime: focusPredictionTime,
|
|
15054
15069
|
focusThresholdMet: focusThresholdMet,
|
|
@@ -15081,7 +15096,29 @@
|
|
|
15081
15096
|
canvas: bestBarcodeCanvas.current
|
|
15082
15097
|
});
|
|
15083
15098
|
}, []);
|
|
15099
|
+
var resetBestBarcode = React.useCallback(function () {
|
|
15100
|
+
// Light-weight reset that only clears barcode tracking without disrupting detection
|
|
15101
|
+
bestBarcodeScore.current = 0;
|
|
15102
|
+
bestBarcodeDetails.current = null;
|
|
15103
|
+
// Also reset recapture tracking so early frames during move-closer window are ignored
|
|
15104
|
+
recaptureBarcodeScore.current = 0;
|
|
15105
|
+
recaptureBarcodeDetails.current = null;
|
|
15106
|
+
// Clear the canvas content but don't recreate it
|
|
15107
|
+
if (bestBarcodeCanvas.current) {
|
|
15108
|
+
var ctx = bestBarcodeCanvas.current.getContext('2d');
|
|
15109
|
+
if (ctx) {
|
|
15110
|
+
ctx.clearRect(0, 0, bestBarcodeCanvas.current.width, bestBarcodeCanvas.current.height);
|
|
15111
|
+
}
|
|
15112
|
+
}
|
|
15113
|
+
if (recaptureBarcodeCanvas.current) {
|
|
15114
|
+
var ctx = recaptureBarcodeCanvas.current.getContext('2d');
|
|
15115
|
+
if (ctx) {
|
|
15116
|
+
ctx.clearRect(0, 0, recaptureBarcodeCanvas.current.width, recaptureBarcodeCanvas.current.height);
|
|
15117
|
+
}
|
|
15118
|
+
}
|
|
15119
|
+
}, []);
|
|
15084
15120
|
var startBarcodeRecapturePhase = React.useCallback(function () {
|
|
15121
|
+
log("[IdCaptureModelsProvider] Starting barcode recapture phase. Initial best score: ".concat(bestBarcodeScore.current));
|
|
15085
15122
|
// Snapshot current best barcode to initial capture canvas
|
|
15086
15123
|
if (bestBarcodeCanvas.current && initialCaptureBarcodeCanvas.current) {
|
|
15087
15124
|
var ctx = initialCaptureBarcodeCanvas.current.getContext('2d');
|
|
@@ -15198,13 +15235,14 @@
|
|
|
15198
15235
|
bestFrameDetails: bestFrameDetails,
|
|
15199
15236
|
bestBarcodeDetails: bestBarcodeDetails,
|
|
15200
15237
|
getBestBarcode: getBestBarcode,
|
|
15238
|
+
resetBestBarcode: resetBestBarcode,
|
|
15201
15239
|
startBarcodeRecapturePhase: startBarcodeRecapturePhase,
|
|
15202
15240
|
getInitialCaptureBestBarcode: getInitialCaptureBestBarcode,
|
|
15203
15241
|
getRecaptureBestBarcode: getRecaptureBestBarcode,
|
|
15204
15242
|
requiredDocumentType: requiredDocumentType,
|
|
15205
15243
|
setRequiredDocumentType: setRequiredDocumentType
|
|
15206
15244
|
};
|
|
15207
|
-
}, [ready, modelDownloadProgress, modelLoadState, modelWarmingStartedAt, modelError, startDocumentDetection, stopDocumentDetection, load, thresholds, setThresholds, documentDetectionBoundaries, setDocumentDetectionBoundaries, onPredictionMade, detectionTime, focusPredictionTime, barcodeReadabilityPredictionTime, getBestFrame, resetBestFrame, getBestBarcode, startBarcodeRecapturePhase, getInitialCaptureBestBarcode, getRecaptureBestBarcode, requiredDocumentType]);
|
|
15245
|
+
}, [ready, modelDownloadProgress, modelLoadState, modelWarmingStartedAt, modelError, startDocumentDetection, stopDocumentDetection, load, thresholds, setThresholds, documentDetectionBoundaries, setDocumentDetectionBoundaries, onPredictionMade, detectionTime, focusPredictionTime, barcodeReadabilityPredictionTime, getBestFrame, resetBestFrame, getBestBarcode, resetBestBarcode, startBarcodeRecapturePhase, getInitialCaptureBestBarcode, getRecaptureBestBarcode, requiredDocumentType]);
|
|
15208
15246
|
return /*#__PURE__*/React.createElement(IdCaptureModelsContext.Provider, {
|
|
15209
15247
|
value: value
|
|
15210
15248
|
}, /*#__PURE__*/React.createElement(InvisibleCanvasContainer, null, /*#__PURE__*/React.createElement(InvisibleCanvas, {
|
|
@@ -16137,12 +16175,12 @@
|
|
|
16137
16175
|
if (!portalLocation) return element;
|
|
16138
16176
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
16139
16177
|
}
|
|
16140
|
-
var DebugStatsPaneDiv = styled.span(templateObject_1$
|
|
16141
|
-
var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$
|
|
16178
|
+
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"])));
|
|
16179
|
+
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) {
|
|
16142
16180
|
var $flipX = _a.$flipX;
|
|
16143
16181
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
16144
16182
|
});
|
|
16145
|
-
var ObjectDetectionDebugBox = styled.div(templateObject_3$
|
|
16183
|
+
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) {
|
|
16146
16184
|
var $color = _a.$color;
|
|
16147
16185
|
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
16148
16186
|
}, function (_a) {
|
|
@@ -16152,7 +16190,11 @@
|
|
|
16152
16190
|
var $flipX = _a.$flipX;
|
|
16153
16191
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
16154
16192
|
});
|
|
16155
|
-
var
|
|
16193
|
+
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) {
|
|
16194
|
+
var $color = _a.$color;
|
|
16195
|
+
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
16196
|
+
});
|
|
16197
|
+
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) {
|
|
16156
16198
|
var $color = _a.$color;
|
|
16157
16199
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
16158
16200
|
}, function (_a) {
|
|
@@ -16264,7 +16306,9 @@
|
|
|
16264
16306
|
width: width,
|
|
16265
16307
|
height: height
|
|
16266
16308
|
}
|
|
16267
|
-
}
|
|
16309
|
+
}, /*#__PURE__*/React.createElement(ObjectDetectionDebugLabel, {
|
|
16310
|
+
"$color": color
|
|
16311
|
+
}, obj.label, " ", obj.score.toFixed(2)));
|
|
16268
16312
|
}
|
|
16269
16313
|
function SelfieCaptureFaceDebugBox(_a) {
|
|
16270
16314
|
var face = _a.face,
|
|
@@ -16350,7 +16394,7 @@
|
|
|
16350
16394
|
}
|
|
16351
16395
|
});
|
|
16352
16396
|
}
|
|
16353
|
-
var templateObject_1$
|
|
16397
|
+
var templateObject_1$M, templateObject_2$H, templateObject_3$v, templateObject_4$p, templateObject_5$i;
|
|
16354
16398
|
|
|
16355
16399
|
function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
16356
16400
|
var _b = _a.classNames,
|
|
@@ -16383,18 +16427,18 @@
|
|
|
16383
16427
|
}
|
|
16384
16428
|
}, verbiage.buttonText))));
|
|
16385
16429
|
}
|
|
16386
|
-
var Container$7 = styled.div(templateObject_1$
|
|
16430
|
+
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) {
|
|
16387
16431
|
var _a, _b, _c;
|
|
16388
16432
|
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';
|
|
16389
16433
|
}, function (props) {
|
|
16390
16434
|
var _a, _b, _c;
|
|
16391
16435
|
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';
|
|
16392
16436
|
});
|
|
16393
|
-
var InnerContainer = styled.div(templateObject_2$
|
|
16394
|
-
var Message = styled.span(templateObject_3$
|
|
16395
|
-
var ButtonContainer = styled.div(templateObject_4$
|
|
16396
|
-
var Button$1 = styled(LoaderButton)(templateObject_5$
|
|
16397
|
-
var templateObject_1$
|
|
16437
|
+
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"])));
|
|
16438
|
+
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"])));
|
|
16439
|
+
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"])));
|
|
16440
|
+
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"])));
|
|
16441
|
+
var templateObject_1$L, templateObject_2$G, templateObject_3$u, templateObject_4$o, templateObject_5$h;
|
|
16398
16442
|
|
|
16399
16443
|
// This is a simplified version of https://github.com/ZeeCoder/use-resize-observer.
|
|
16400
16444
|
// We have removed all options and made it compliant with React Compiler/React 19.
|
|
@@ -16741,13 +16785,13 @@
|
|
|
16741
16785
|
finished: true
|
|
16742
16786
|
}, verbiage.retryBtnText)));
|
|
16743
16787
|
};
|
|
16744
|
-
var StyledOverlayInner$3 = styled(OverlayInner$2)(templateObject_1$
|
|
16745
|
-
var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$
|
|
16746
|
-
var Description$4 = styled.p(templateObject_3$
|
|
16747
|
-
var RetryButton$1 = styled(LoaderButton)(templateObject_4$
|
|
16748
|
-
var templateObject_1$
|
|
16788
|
+
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"])));
|
|
16789
|
+
var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
16790
|
+
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"])));
|
|
16791
|
+
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"])));
|
|
16792
|
+
var templateObject_1$K, templateObject_2$F, templateObject_3$t, templateObject_4$n;
|
|
16749
16793
|
|
|
16750
|
-
var ExitCaptureStyledButton = styled.button(templateObject_1$
|
|
16794
|
+
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"])));
|
|
16751
16795
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
16752
16796
|
var onClick = _a.onClick,
|
|
16753
16797
|
className = _a.className;
|
|
@@ -16791,7 +16835,7 @@
|
|
|
16791
16835
|
y2: "19.75"
|
|
16792
16836
|
}))));
|
|
16793
16837
|
};
|
|
16794
|
-
var templateObject_1$
|
|
16838
|
+
var templateObject_1$J;
|
|
16795
16839
|
|
|
16796
16840
|
function IdCaptureLoadingGraphic(props) {
|
|
16797
16841
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
@@ -17266,21 +17310,21 @@
|
|
|
17266
17310
|
fill: "white"
|
|
17267
17311
|
}))));
|
|
17268
17312
|
}
|
|
17269
|
-
var LoadingGraphicWrapper = styled.div(templateObject_1$
|
|
17270
|
-
var LoadingGraphicSvg = styled.svg(templateObject_2$
|
|
17313
|
+
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"])));
|
|
17314
|
+
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) {
|
|
17271
17315
|
return props.$frame > 1 ? 1 : props.$frame === 1 ? 1.25 : 0.75;
|
|
17272
17316
|
}, function (props) {
|
|
17273
17317
|
return props.$frame >= 5 ? 10 : 0;
|
|
17274
17318
|
}, function (props) {
|
|
17275
17319
|
return props.$borderColor;
|
|
17276
17320
|
});
|
|
17277
|
-
var LoadingGraphicCardGroup = styled.g(templateObject_3$
|
|
17321
|
+
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) {
|
|
17278
17322
|
return props.$offScreen ? '-500px' : '0';
|
|
17279
17323
|
});
|
|
17280
|
-
var LoadingGraphicPhoneGroup = styled.g(templateObject_4$
|
|
17324
|
+
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) {
|
|
17281
17325
|
return props.$offScreen ? '40px' : '0';
|
|
17282
17326
|
});
|
|
17283
|
-
var templateObject_1$
|
|
17327
|
+
var templateObject_1$I, templateObject_2$E, templateObject_3$s, templateObject_4$m;
|
|
17284
17328
|
|
|
17285
17329
|
function LoadingListItemIndicator(_a) {
|
|
17286
17330
|
var _b = _a.state,
|
|
@@ -17549,24 +17593,24 @@
|
|
|
17549
17593
|
}
|
|
17550
17594
|
}, ready ? verbiage.continueText : verbiage.pleaseWaitText))))));
|
|
17551
17595
|
};
|
|
17552
|
-
var OverlayInner$1 = styled(LoadingOverlayInner)(templateObject_1$
|
|
17596
|
+
var OverlayInner$1 = styled(LoadingOverlayInner)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n"], ["\n background: ", ";\n color: ", ";\n"])), function (props) {
|
|
17553
17597
|
var _a, _b, _c, _d;
|
|
17554
17598
|
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';
|
|
17555
17599
|
}, function (props) {
|
|
17556
17600
|
var _a, _b, _c, _d;
|
|
17557
17601
|
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';
|
|
17558
17602
|
});
|
|
17559
|
-
var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_2$
|
|
17560
|
-
var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_3$
|
|
17561
|
-
var ContinuityCameraCheckbox$1 = styled.input(templateObject_4$
|
|
17562
|
-
var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$
|
|
17603
|
+
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"])));
|
|
17604
|
+
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"])));
|
|
17605
|
+
var ContinuityCameraCheckbox$1 = styled.input(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
17606
|
+
var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n color: ", ";\n ", "\n"], ["\n color: ", ";\n ", "\n"])), function (props) {
|
|
17563
17607
|
var _a, _b, _c, _d;
|
|
17564
17608
|
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';
|
|
17565
17609
|
}, function (props) {
|
|
17566
17610
|
var _a, _b, _c, _d, _e, _f;
|
|
17567
17611
|
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, ";") : '';
|
|
17568
17612
|
});
|
|
17569
|
-
var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$
|
|
17613
|
+
var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n background: ", ";\n opacity: ", ";\n"], ["\n background: ", ";\n opacity: ", ";\n"])), function (props) {
|
|
17570
17614
|
var _a, _b, _c, _d;
|
|
17571
17615
|
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)';
|
|
17572
17616
|
}, function (props) {
|
|
@@ -17596,10 +17640,10 @@
|
|
|
17596
17640
|
var _a, _b, _c, _d;
|
|
17597
17641
|
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';
|
|
17598
17642
|
});
|
|
17599
|
-
var templateObject_1$
|
|
17643
|
+
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;
|
|
17600
17644
|
|
|
17601
|
-
var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$
|
|
17602
|
-
var ContinuityCameraCheckbox = styled.input(templateObject_2$
|
|
17645
|
+
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"])));
|
|
17646
|
+
var ContinuityCameraCheckbox = styled.input(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
17603
17647
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
17604
17648
|
var _b, _c, _d, _e;
|
|
17605
17649
|
var onDismissed = _a.onDismissed,
|
|
@@ -17720,7 +17764,7 @@
|
|
|
17720
17764
|
}
|
|
17721
17765
|
}, ready ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
17722
17766
|
};
|
|
17723
|
-
var templateObject_1$
|
|
17767
|
+
var templateObject_1$G, templateObject_2$C;
|
|
17724
17768
|
|
|
17725
17769
|
var components$1 = {
|
|
17726
17770
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -17778,9 +17822,9 @@
|
|
|
17778
17822
|
});
|
|
17779
17823
|
};
|
|
17780
17824
|
|
|
17781
|
-
var Card = styled.div(templateObject_1$
|
|
17782
|
-
var FlexCard = styled(Card)(templateObject_2$
|
|
17783
|
-
var templateObject_1$
|
|
17825
|
+
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"])));
|
|
17826
|
+
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"])));
|
|
17827
|
+
var templateObject_1$F, templateObject_2$B;
|
|
17784
17828
|
|
|
17785
17829
|
var imageDisplayOrder = ['idCardFront', 'idCardBack', 'idBarcodeImage', 'passport', 'singlePage', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
|
|
17786
17830
|
var downloadImage = function downloadImage(dataUrl, filename) {
|
|
@@ -17915,12 +17959,12 @@
|
|
|
17915
17959
|
finished: true
|
|
17916
17960
|
}, verbiage.retryText)))));
|
|
17917
17961
|
};
|
|
17918
|
-
var Heading$a = styled.h1(templateObject_1$
|
|
17919
|
-
var ImagesContainer = styled(OverlayImageContainer)(templateObject_2$
|
|
17920
|
-
var ImageRow = styled(OverlayImageRow)(templateObject_3$
|
|
17921
|
-
var ImageCol$1 = styled.div(templateObject_4$
|
|
17922
|
-
var StyledImage = styled(CapturedDocumentImg)(templateObject_5$
|
|
17923
|
-
var DebugInfoContainer = styled.div(templateObject_6$
|
|
17962
|
+
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"])));
|
|
17963
|
+
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"])));
|
|
17964
|
+
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"])));
|
|
17965
|
+
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"])));
|
|
17966
|
+
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"])));
|
|
17967
|
+
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"])));
|
|
17924
17968
|
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"])));
|
|
17925
17969
|
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"])));
|
|
17926
17970
|
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"])));
|
|
@@ -18004,7 +18048,7 @@
|
|
|
18004
18048
|
var $isHigher = _a.$isHigher;
|
|
18005
18049
|
return $isHigher ? '#c3e6cb' : '#dee2e6';
|
|
18006
18050
|
});
|
|
18007
|
-
var templateObject_1$
|
|
18051
|
+
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;
|
|
18008
18052
|
|
|
18009
18053
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
18010
18054
|
var _this = this;
|
|
@@ -18056,12 +18100,12 @@
|
|
|
18056
18100
|
canvas.style.height = '0';
|
|
18057
18101
|
}
|
|
18058
18102
|
|
|
18059
|
-
var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$
|
|
18103
|
+
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) {
|
|
18060
18104
|
return props.$isVisible ? '' : 'opacity: 0;';
|
|
18061
18105
|
}, function (props) {
|
|
18062
18106
|
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
18063
18107
|
});
|
|
18064
|
-
var IdCardGuideImage = styled.img(templateObject_2$
|
|
18108
|
+
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) {
|
|
18065
18109
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
18066
18110
|
}, function (props) {
|
|
18067
18111
|
return props.$isInvisible ? 'opacity: 0;' : '';
|
|
@@ -18211,17 +18255,17 @@
|
|
|
18211
18255
|
className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
|
|
18212
18256
|
}));
|
|
18213
18257
|
}
|
|
18214
|
-
var IdCardBorderContainer = styled.div(templateObject_3$
|
|
18215
|
-
var IdCardBorderInner = styled.div(templateObject_4$
|
|
18216
|
-
var SvgOverlay = styled.svg(templateObject_5$
|
|
18217
|
-
var IdCardBorderRect = styled.rect(templateObject_6$
|
|
18258
|
+
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);
|
|
18259
|
+
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"])));
|
|
18260
|
+
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"])));
|
|
18261
|
+
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) {
|
|
18218
18262
|
var _a;
|
|
18219
18263
|
return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
|
|
18220
18264
|
}, function (props) {
|
|
18221
18265
|
var _a;
|
|
18222
18266
|
return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
|
|
18223
18267
|
});
|
|
18224
|
-
var templateObject_1$
|
|
18268
|
+
var templateObject_1$D, templateObject_2$z, templateObject_3$p, templateObject_4$j, templateObject_5$e, templateObject_6$8;
|
|
18225
18269
|
|
|
18226
18270
|
var defaultIdCaptureGuideImages = {
|
|
18227
18271
|
portrait: {
|
|
@@ -18369,7 +18413,7 @@
|
|
|
18369
18413
|
clearTimeout(timeout);
|
|
18370
18414
|
};
|
|
18371
18415
|
}, []);
|
|
18372
|
-
return /*#__PURE__*/React.createElement(Wrapper$
|
|
18416
|
+
return /*#__PURE__*/React.createElement(Wrapper$2, {
|
|
18373
18417
|
"$isLandscape": orientation === 'landscape',
|
|
18374
18418
|
style: {
|
|
18375
18419
|
aspectRatio: aspectRatio
|
|
@@ -18410,15 +18454,15 @@
|
|
|
18410
18454
|
style: imageStyle
|
|
18411
18455
|
})));
|
|
18412
18456
|
};
|
|
18413
|
-
var Wrapper$
|
|
18457
|
+
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) {
|
|
18414
18458
|
return props.$isLandscape ? 'height: 100%;' : 'height: 100%;';
|
|
18415
18459
|
});
|
|
18416
|
-
var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_2$
|
|
18460
|
+
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) {
|
|
18417
18461
|
return props.$transitionTime;
|
|
18418
18462
|
}, function (props) {
|
|
18419
18463
|
return props.$transforms;
|
|
18420
18464
|
});
|
|
18421
|
-
var templateObject_1$
|
|
18465
|
+
var templateObject_1$C, templateObject_2$y;
|
|
18422
18466
|
|
|
18423
18467
|
var GuideOrientationContext = /*#__PURE__*/React.createContext({
|
|
18424
18468
|
orientation: 'landscape',
|
|
@@ -18513,7 +18557,7 @@
|
|
|
18513
18557
|
clearTimeout(timeout);
|
|
18514
18558
|
};
|
|
18515
18559
|
}, []);
|
|
18516
|
-
return /*#__PURE__*/React.createElement(Wrapper, {
|
|
18560
|
+
return /*#__PURE__*/React.createElement(Wrapper$1, {
|
|
18517
18561
|
style: {
|
|
18518
18562
|
aspectRatio: imageAspectRatio
|
|
18519
18563
|
},
|
|
@@ -18557,10 +18601,10 @@
|
|
|
18557
18601
|
height: height
|
|
18558
18602
|
})));
|
|
18559
18603
|
};
|
|
18560
|
-
var Wrapper = styled.div(templateObject_1$
|
|
18604
|
+
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) {
|
|
18561
18605
|
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
18562
18606
|
});
|
|
18563
|
-
var templateObject_1$
|
|
18607
|
+
var templateObject_1$B;
|
|
18564
18608
|
|
|
18565
18609
|
var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
18566
18610
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
@@ -18706,10 +18750,10 @@
|
|
|
18706
18750
|
return v;
|
|
18707
18751
|
}).join(' ');
|
|
18708
18752
|
};
|
|
18709
|
-
var StyledPageContainer = styled.div(templateObject_1$
|
|
18710
|
-
var GuidesContainer = styled.div(templateObject_2$
|
|
18711
|
-
var GuideCenterRow = styled.div(templateObject_3$
|
|
18712
|
-
var GuideRegion = styled.div(templateObject_4$
|
|
18753
|
+
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"])));
|
|
18754
|
+
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"])));
|
|
18755
|
+
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"])));
|
|
18756
|
+
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) {
|
|
18713
18757
|
var _a, _b, _c, _d, _e;
|
|
18714
18758
|
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)';
|
|
18715
18759
|
}, function (props) {
|
|
@@ -18720,8 +18764,8 @@
|
|
|
18720
18764
|
}, function (props) {
|
|
18721
18765
|
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
18722
18766
|
});
|
|
18723
|
-
var Spacer = styled(GuideRegion)(templateObject_5$
|
|
18724
|
-
var GuideCenterRegion = styled.div(templateObject_6$
|
|
18767
|
+
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"])));
|
|
18768
|
+
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) {
|
|
18725
18769
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
18726
18770
|
}, function (props) {
|
|
18727
18771
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
@@ -18736,7 +18780,7 @@
|
|
|
18736
18780
|
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) {
|
|
18737
18781
|
return props.$isLandscape ? 'height: 100%;' : 'width: 90%;';
|
|
18738
18782
|
});
|
|
18739
|
-
var templateObject_1$
|
|
18783
|
+
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;
|
|
18740
18784
|
|
|
18741
18785
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
18742
18786
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -18859,7 +18903,7 @@
|
|
|
18859
18903
|
ref: wrapperRef,
|
|
18860
18904
|
"$maskColor": maskColor !== null && maskColor !== void 0 ? maskColor : '',
|
|
18861
18905
|
className: classNames.canvasWrapper
|
|
18862
|
-
}, /*#__PURE__*/React.createElement(Canvas$
|
|
18906
|
+
}, /*#__PURE__*/React.createElement(Canvas$2, {
|
|
18863
18907
|
ref: canvasRef,
|
|
18864
18908
|
className: classNames.canvas
|
|
18865
18909
|
})), /*#__PURE__*/React.createElement(IdCaptureGuideOverlay, {
|
|
@@ -18877,11 +18921,174 @@
|
|
|
18877
18921
|
progress: progress
|
|
18878
18922
|
}));
|
|
18879
18923
|
};
|
|
18880
|
-
var CanvasWrapper$1 = styled.div(templateObject_1$
|
|
18924
|
+
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) {
|
|
18881
18925
|
return props.$maskColor;
|
|
18882
18926
|
});
|
|
18883
|
-
var Canvas$
|
|
18884
|
-
var templateObject_1$
|
|
18927
|
+
var Canvas$2 = styled.canvas(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
18928
|
+
var templateObject_1$z, templateObject_2$w;
|
|
18929
|
+
|
|
18930
|
+
var PDF417_ASPECT_RATIO = 3 / 1;
|
|
18931
|
+
function BarcodeGuideOverlay(_a) {
|
|
18932
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18933
|
+
var _l = _a.aspectRatio,
|
|
18934
|
+
aspectRatio = _l === void 0 ? PDF417_ASPECT_RATIO : _l,
|
|
18935
|
+
maskColor = _a.maskColor,
|
|
18936
|
+
_m = _a.cornerColor,
|
|
18937
|
+
cornerColor = _m === void 0 ? 'white' : _m,
|
|
18938
|
+
_o = _a.cornerLength,
|
|
18939
|
+
cornerLength = _o === void 0 ? 40 : _o,
|
|
18940
|
+
_p = _a.cornerWidth,
|
|
18941
|
+
cornerWidth = _p === void 0 ? 4 : _p,
|
|
18942
|
+
padding = _a.padding,
|
|
18943
|
+
_q = _a.borderRadius,
|
|
18944
|
+
borderRadius = _q === void 0 ? 8 : _q,
|
|
18945
|
+
_r = _a.headerText,
|
|
18946
|
+
headerText = _r === void 0 ? 'SCAN THE BARCODE' : _r,
|
|
18947
|
+
_s = _a.instructionText,
|
|
18948
|
+
instructionText = _s === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _s,
|
|
18949
|
+
_t = _a.isSuccess,
|
|
18950
|
+
isSuccess = _t === void 0 ? false : _t,
|
|
18951
|
+
_u = _a.successColor,
|
|
18952
|
+
successColor = _u === void 0 ? '#22c55e' : _u,
|
|
18953
|
+
_v = _a.classNames,
|
|
18954
|
+
classNames = _v === void 0 ? {} : _v;
|
|
18955
|
+
var canvasRef = React.useRef(null);
|
|
18956
|
+
var _w = useResizeObserver(),
|
|
18957
|
+
wrapperRef = _w.ref,
|
|
18958
|
+
_x = _w.width,
|
|
18959
|
+
wrapperWidth = _x === void 0 ? 1 : _x,
|
|
18960
|
+
_y = _w.height,
|
|
18961
|
+
wrapperHeight = _y === void 0 ? 1 : _y;
|
|
18962
|
+
var theme = styled.useTheme();
|
|
18963
|
+
if (padding === undefined) {
|
|
18964
|
+
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;
|
|
18965
|
+
}
|
|
18966
|
+
if (maskColor === undefined) {
|
|
18967
|
+
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';
|
|
18968
|
+
}
|
|
18969
|
+
React.useEffect(function () {
|
|
18970
|
+
var canvas = canvasRef.current;
|
|
18971
|
+
if (!canvas) return;
|
|
18972
|
+
// Wait for valid dimensions from resize observer
|
|
18973
|
+
if (wrapperWidth <= 1 || wrapperHeight <= 1) return;
|
|
18974
|
+
var boundingWidth = wrapperWidth - padding * 2;
|
|
18975
|
+
var boundingHeight = wrapperHeight - padding * 2;
|
|
18976
|
+
// Start with bounding box dimensions
|
|
18977
|
+
var rectWidth = boundingWidth;
|
|
18978
|
+
var rectHeight = boundingWidth / aspectRatio;
|
|
18979
|
+
// If calculated height exceeds available height, constrain by height instead
|
|
18980
|
+
if (rectHeight > boundingHeight) {
|
|
18981
|
+
rectHeight = boundingHeight;
|
|
18982
|
+
rectWidth = boundingHeight * aspectRatio;
|
|
18983
|
+
}
|
|
18984
|
+
// Center the rectangle
|
|
18985
|
+
var rectX = padding + (boundingWidth - rectWidth) / 2;
|
|
18986
|
+
var rectY = padding + (boundingHeight - rectHeight) / 2;
|
|
18987
|
+
setCanvasDimensions(canvas, wrapperWidth, wrapperHeight);
|
|
18988
|
+
var ctx = canvas.getContext('2d');
|
|
18989
|
+
if (!ctx) return;
|
|
18990
|
+
// Fill with mask color
|
|
18991
|
+
ctx.fillStyle = maskColor;
|
|
18992
|
+
ctx.clearRect(0, 0, wrapperWidth, wrapperHeight);
|
|
18993
|
+
ctx.fillRect(0, 0, wrapperWidth, wrapperHeight);
|
|
18994
|
+
// Create the cutout
|
|
18995
|
+
ctx.beginPath();
|
|
18996
|
+
ctx.roundRect(rectX, rectY, rectWidth, rectHeight, borderRadius);
|
|
18997
|
+
ctx.fillStyle = 'rgba(0,0,0,1)';
|
|
18998
|
+
ctx.globalCompositeOperation = 'destination-out';
|
|
18999
|
+
ctx.fill();
|
|
19000
|
+
ctx.globalCompositeOperation = 'source-over';
|
|
19001
|
+
// Draw corner brackets
|
|
19002
|
+
var color = isSuccess ? successColor : cornerColor;
|
|
19003
|
+
ctx.strokeStyle = color;
|
|
19004
|
+
ctx.lineWidth = cornerWidth;
|
|
19005
|
+
ctx.lineCap = 'round';
|
|
19006
|
+
var effectiveCornerLength = Math.min(cornerLength, rectWidth / 3, rectHeight / 3);
|
|
19007
|
+
// Top-left corner
|
|
19008
|
+
ctx.beginPath();
|
|
19009
|
+
ctx.moveTo(rectX + effectiveCornerLength, rectY);
|
|
19010
|
+
ctx.lineTo(rectX + borderRadius, rectY);
|
|
19011
|
+
ctx.arcTo(rectX, rectY, rectX, rectY + borderRadius, borderRadius);
|
|
19012
|
+
ctx.lineTo(rectX, rectY + effectiveCornerLength);
|
|
19013
|
+
ctx.stroke();
|
|
19014
|
+
// Top-right corner
|
|
19015
|
+
ctx.beginPath();
|
|
19016
|
+
ctx.moveTo(rectX + rectWidth - effectiveCornerLength, rectY);
|
|
19017
|
+
ctx.lineTo(rectX + rectWidth - borderRadius, rectY);
|
|
19018
|
+
ctx.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + borderRadius, borderRadius);
|
|
19019
|
+
ctx.lineTo(rectX + rectWidth, rectY + effectiveCornerLength);
|
|
19020
|
+
ctx.stroke();
|
|
19021
|
+
// Bottom-left corner
|
|
19022
|
+
ctx.beginPath();
|
|
19023
|
+
ctx.moveTo(rectX, rectY + rectHeight - effectiveCornerLength);
|
|
19024
|
+
ctx.lineTo(rectX, rectY + rectHeight - borderRadius);
|
|
19025
|
+
ctx.arcTo(rectX, rectY + rectHeight, rectX + borderRadius, rectY + rectHeight, borderRadius);
|
|
19026
|
+
ctx.lineTo(rectX + effectiveCornerLength, rectY + rectHeight);
|
|
19027
|
+
ctx.stroke();
|
|
19028
|
+
// Bottom-right corner
|
|
19029
|
+
ctx.beginPath();
|
|
19030
|
+
ctx.moveTo(rectX + rectWidth, rectY + rectHeight - effectiveCornerLength);
|
|
19031
|
+
ctx.lineTo(rectX + rectWidth, rectY + rectHeight - borderRadius);
|
|
19032
|
+
ctx.arcTo(rectX + rectWidth, rectY + rectHeight, rectX + rectWidth - borderRadius, rectY + rectHeight, borderRadius);
|
|
19033
|
+
ctx.lineTo(rectX + rectWidth - effectiveCornerLength, rectY + rectHeight);
|
|
19034
|
+
ctx.stroke();
|
|
19035
|
+
return function () {
|
|
19036
|
+
resetCanvasDimensions(canvas);
|
|
19037
|
+
};
|
|
19038
|
+
}, [aspectRatio, borderRadius, cornerColor, cornerLength, cornerWidth, isSuccess, maskColor, padding, successColor, wrapperHeight, wrapperWidth]);
|
|
19039
|
+
return /*#__PURE__*/React.createElement(Wrapper, {
|
|
19040
|
+
ref: wrapperRef,
|
|
19041
|
+
className: classNames.wrapper
|
|
19042
|
+
}, /*#__PURE__*/React.createElement(Canvas$1, {
|
|
19043
|
+
ref: canvasRef,
|
|
19044
|
+
className: classNames.canvas
|
|
19045
|
+
}), /*#__PURE__*/React.createElement(TextOverlay, null, /*#__PURE__*/React.createElement(HeaderText, {
|
|
19046
|
+
className: classNames.header
|
|
19047
|
+
}, headerText), /*#__PURE__*/React.createElement(InstructionText, {
|
|
19048
|
+
className: classNames.instruction
|
|
19049
|
+
}, instructionText)));
|
|
19050
|
+
}
|
|
19051
|
+
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"])));
|
|
19052
|
+
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"])));
|
|
19053
|
+
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"])));
|
|
19054
|
+
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"])));
|
|
19055
|
+
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"])));
|
|
19056
|
+
var templateObject_1$y, templateObject_2$v, templateObject_3$n, templateObject_4$h, templateObject_5$c;
|
|
19057
|
+
|
|
19058
|
+
function BarcodeSuccessOverlay(_a) {
|
|
19059
|
+
var _b = _a.headerText,
|
|
19060
|
+
headerText = _b === void 0 ? 'Scan Successful!' : _b,
|
|
19061
|
+
_c = _a.processingText,
|
|
19062
|
+
processingText = _c === void 0 ? 'Processing...' : _c,
|
|
19063
|
+
_d = _a.successColor,
|
|
19064
|
+
successColor = _d === void 0 ? '#22c55e' : _d;
|
|
19065
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BarcodeGuideOverlay, {
|
|
19066
|
+
headerText: headerText,
|
|
19067
|
+
instructionText: processingText,
|
|
19068
|
+
isSuccess: true,
|
|
19069
|
+
successColor: successColor
|
|
19070
|
+
}), /*#__PURE__*/React.createElement(CheckmarkWrapper, null, /*#__PURE__*/React.createElement(CheckmarkCircle, {
|
|
19071
|
+
"$color": successColor
|
|
19072
|
+
}, /*#__PURE__*/React.createElement(CheckmarkIcon, {
|
|
19073
|
+
viewBox: "0 0 24 24",
|
|
19074
|
+
fill: "none"
|
|
19075
|
+
}, /*#__PURE__*/React.createElement(CheckmarkPath, {
|
|
19076
|
+
d: "M5 13l4 4L19 7",
|
|
19077
|
+
stroke: "white",
|
|
19078
|
+
strokeWidth: "3",
|
|
19079
|
+
strokeLinecap: "round",
|
|
19080
|
+
strokeLinejoin: "round"
|
|
19081
|
+
})))));
|
|
19082
|
+
}
|
|
19083
|
+
var scaleIn = styled.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"])));
|
|
19084
|
+
var drawCheck = styled.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"])));
|
|
19085
|
+
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"])));
|
|
19086
|
+
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) {
|
|
19087
|
+
return props.$color;
|
|
19088
|
+
}, scaleIn);
|
|
19089
|
+
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"])));
|
|
19090
|
+
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);
|
|
19091
|
+
var templateObject_1$x, templateObject_2$u, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$6;
|
|
18885
19092
|
|
|
18886
19093
|
function IdCaptureGuides(_a) {
|
|
18887
19094
|
var _b = _a.guideType,
|
|
@@ -18903,7 +19110,15 @@
|
|
|
18903
19110
|
_k = _a.colors,
|
|
18904
19111
|
colors = _k === void 0 ? {} : _k,
|
|
18905
19112
|
_l = _a.verbiage,
|
|
18906
|
-
rawVerbiage = _l === void 0 ? {} : _l
|
|
19113
|
+
rawVerbiage = _l === void 0 ? {} : _l,
|
|
19114
|
+
_m = _a.isRequestingBetterBarcode,
|
|
19115
|
+
isRequestingBetterBarcode = _m === void 0 ? false : _m,
|
|
19116
|
+
_o = _a.isBarcodeSuccess,
|
|
19117
|
+
isBarcodeSuccess = _o === void 0 ? false : _o,
|
|
19118
|
+
_p = _a.barcodeHeaderText,
|
|
19119
|
+
barcodeHeaderText = _p === void 0 ? 'SCAN THE BARCODE' : _p,
|
|
19120
|
+
_q = _a.barcodeInstructionText,
|
|
19121
|
+
barcodeInstructionText = _q === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _q;
|
|
18907
19122
|
var state = useIdCaptureStore();
|
|
18908
19123
|
var isRearFacing = useCameraStore(function (state) {
|
|
18909
19124
|
return state.isRearFacing;
|
|
@@ -18913,6 +19128,16 @@
|
|
|
18913
19128
|
capturingText: 'Capturing...',
|
|
18914
19129
|
captureFailedText: 'Capture failed!'
|
|
18915
19130
|
});
|
|
19131
|
+
// Render barcode guide overlays when in barcode recapture state
|
|
19132
|
+
if (isRequestingBetterBarcode) {
|
|
19133
|
+
if (isBarcodeSuccess) {
|
|
19134
|
+
return /*#__PURE__*/React.createElement(BarcodeSuccessOverlay, null);
|
|
19135
|
+
}
|
|
19136
|
+
return /*#__PURE__*/React.createElement(BarcodeGuideOverlay, {
|
|
19137
|
+
headerText: barcodeHeaderText,
|
|
19138
|
+
instructionText: barcodeInstructionText
|
|
19139
|
+
});
|
|
19140
|
+
}
|
|
18916
19141
|
return /*#__PURE__*/React.createElement(React.Fragment, null, guideType === 'overlay' && (/*#__PURE__*/React.createElement(IdCaptureGuideOverlay, {
|
|
18917
19142
|
images: images,
|
|
18918
19143
|
classNames: classNames,
|
|
@@ -20632,6 +20857,7 @@
|
|
|
20632
20857
|
setRequiredDocumentType = _18.setRequiredDocumentType,
|
|
20633
20858
|
modelError = _18.modelError,
|
|
20634
20859
|
resetBestFrame = _18.resetBestFrame,
|
|
20860
|
+
resetBestBarcode = _18.resetBestBarcode,
|
|
20635
20861
|
documentDetectionBoundaries = _18.documentDetectionBoundaries,
|
|
20636
20862
|
setDocumentDetectionBoundaries = _18.setDocumentDetectionBoundaries,
|
|
20637
20863
|
getBestBarcode = _18.getBestBarcode,
|
|
@@ -20905,44 +21131,63 @@
|
|
|
20905
21131
|
initialCaptureBarcodeImage: initialBarcodeImage
|
|
20906
21132
|
}
|
|
20907
21133
|
});
|
|
20908
|
-
|
|
21134
|
+
// Start recapture phase immediately so barcode analysis runs with relaxed conditions
|
|
21135
|
+
// (don't require document in bounds since user is zooming in)
|
|
21136
|
+
startBarcodeRecapturePhase();
|
|
21137
|
+
}, [startBarcodeRecapturePhase, state.captureState, (_d = state.capturedDocuments.idBarcodeImage) === null || _d === void 0 ? void 0 : _d.imageData, state.initialBarcodeScore, state.initialCaptureBarcodeImage]);
|
|
21138
|
+
// Reset best barcode after 1 second delay to ignore early frames before user has time to move closer
|
|
21139
|
+
React.useEffect(function () {
|
|
21140
|
+
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
21141
|
+
var t = setTimeout(function () {
|
|
21142
|
+
log('[IdCaptureWizard] Resetting best barcode after 1s delay in move-closer window');
|
|
21143
|
+
resetBestBarcode();
|
|
21144
|
+
}, 1000);
|
|
21145
|
+
return function () {
|
|
21146
|
+
return clearTimeout(t);
|
|
21147
|
+
};
|
|
21148
|
+
}, [resetBestBarcode, state.captureState]);
|
|
20909
21149
|
// Handle barcode recapture timeout
|
|
20910
21150
|
React.useEffect(function () {
|
|
20911
21151
|
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
20912
21152
|
// Continue detection to try to get a better barcode
|
|
20913
21153
|
setTimeout(start, 100);
|
|
20914
21154
|
var t = setTimeout(function () {
|
|
20915
|
-
|
|
21155
|
+
var _a, _b;
|
|
21156
|
+
// Move-closer window expired before growth requirement was met
|
|
20916
21157
|
if (recapturePhaseStartedRef.current) return;
|
|
20917
|
-
|
|
20918
|
-
var
|
|
21158
|
+
// Use recapture tracking since we start tracking with relaxed conditions immediately
|
|
21159
|
+
var recaptureBarcode = getRecaptureBestBarcode();
|
|
21160
|
+
var recaptureScore = (_a = recaptureBarcode === null || recaptureBarcode === void 0 ? void 0 : recaptureBarcode.score) !== null && _a !== void 0 ? _a : null;
|
|
21161
|
+
var improved = !!recaptureBarcode && recaptureBarcode.score > state.initialBarcodeScore;
|
|
20919
21162
|
if (improved) {
|
|
20920
|
-
log("[IdCaptureWizard] Barcode recapture move-closer window timed out. Found better barcode anyway: ".concat(
|
|
20921
|
-
// Persist the "after" image for debug visual comparison, even if the
|
|
20922
|
-
// model-provider recapture tracker was never started.
|
|
20923
|
-
dispatchIdCaptureAction({
|
|
20924
|
-
type: 'recaptureBarcodeImageCaptured',
|
|
20925
|
-
payload: {
|
|
20926
|
-
recaptureBarcodeImage: bestBarcode.canvas.toDataURL('image/jpeg', 0.95)
|
|
20927
|
-
}
|
|
20928
|
-
});
|
|
21163
|
+
log("[IdCaptureWizard] Barcode recapture move-closer window timed out. Found better barcode anyway: ".concat(recaptureBarcode.score.toFixed(3), " (was ").concat(state.initialBarcodeScore.toFixed(3), ")"));
|
|
20929
21164
|
dispatchIdCaptureAction({
|
|
20930
21165
|
type: 'barcodeCaptured',
|
|
20931
21166
|
payload: {
|
|
20932
|
-
imageUrl:
|
|
20933
|
-
barcodeReadabilityScore:
|
|
21167
|
+
imageUrl: recaptureBarcode.canvas.toDataURL('image/jpeg', 0.95),
|
|
21168
|
+
barcodeReadabilityScore: recaptureBarcode.score
|
|
20934
21169
|
}
|
|
20935
21170
|
});
|
|
20936
21171
|
} else {
|
|
20937
|
-
log("[IdCaptureWizard] Barcode recapture move-closer window timed out. No better barcode found.
|
|
21172
|
+
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)));
|
|
20938
21173
|
}
|
|
20939
|
-
// Record
|
|
21174
|
+
// Record recapture attempt data for diagnostics - always store the best score
|
|
21175
|
+
// from the move-closer window so debug info shows what was actually captured
|
|
20940
21176
|
dispatchIdCaptureAction({
|
|
20941
21177
|
type: 'barcodeRecaptureScoreUpdated',
|
|
20942
21178
|
payload: {
|
|
20943
|
-
recaptureBarcodeScore:
|
|
21179
|
+
recaptureBarcodeScore: recaptureScore
|
|
20944
21180
|
}
|
|
20945
21181
|
});
|
|
21182
|
+
// Persist the barcode image from move-closer window for debug visual comparison
|
|
21183
|
+
if (recaptureBarcode) {
|
|
21184
|
+
dispatchIdCaptureAction({
|
|
21185
|
+
type: 'recaptureBarcodeImageCaptured',
|
|
21186
|
+
payload: {
|
|
21187
|
+
recaptureBarcodeImage: recaptureBarcode.canvas.toDataURL('image/jpeg', 0.95)
|
|
21188
|
+
}
|
|
21189
|
+
});
|
|
21190
|
+
}
|
|
20946
21191
|
dispatchIdCaptureAction({
|
|
20947
21192
|
type: 'barcodeRecaptureCompleted'
|
|
20948
21193
|
});
|
|
@@ -20950,7 +21195,7 @@
|
|
|
20950
21195
|
return function () {
|
|
20951
21196
|
return clearTimeout(t);
|
|
20952
21197
|
};
|
|
20953
|
-
}, [barcodeRecaptureMoveCloserTimeoutMs,
|
|
21198
|
+
}, [barcodeRecaptureMoveCloserTimeoutMs, getRecaptureBestBarcode, start, state.captureState, state.initialBarcodeScore]);
|
|
20954
21199
|
React.useEffect(function () {
|
|
20955
21200
|
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
20956
21201
|
if (!barcodeRecaptureGrowthSatisfied) return;
|
|
@@ -20961,11 +21206,14 @@
|
|
|
20961
21206
|
var bestBarcode = getBestBarcode();
|
|
20962
21207
|
var recaptureScore = (_a = recaptureBarcode === null || recaptureBarcode === void 0 ? void 0 : recaptureBarcode.score) !== null && _a !== void 0 ? _a : null;
|
|
20963
21208
|
var improved = !!bestBarcode && bestBarcode.score > state.initialBarcodeScore;
|
|
21209
|
+
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));
|
|
20964
21210
|
// Store the recapture score for diagnostic purposes
|
|
21211
|
+
// Always use actual recapture score (even if worse than initial) so debug info
|
|
21212
|
+
// shows what was actually captured during each sequence
|
|
20965
21213
|
dispatchIdCaptureAction({
|
|
20966
21214
|
type: 'barcodeRecaptureScoreUpdated',
|
|
20967
21215
|
payload: {
|
|
20968
|
-
recaptureBarcodeScore:
|
|
21216
|
+
recaptureBarcodeScore: recaptureScore
|
|
20969
21217
|
}
|
|
20970
21218
|
});
|
|
20971
21219
|
// Store the recapture barcode image if we found one
|
|
@@ -21111,7 +21359,8 @@
|
|
|
21111
21359
|
classNames: classNames.guides,
|
|
21112
21360
|
colors: colors,
|
|
21113
21361
|
verbiage: idCaptureVerbiage,
|
|
21114
|
-
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments
|
|
21362
|
+
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments,
|
|
21363
|
+
isRequestingBetterBarcode: state.captureState === 'requestingBetterBarcode'
|
|
21115
21364
|
}), 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.createElement(IdCaptureImagePreview, {
|
|
21116
21365
|
classNames: (_j = classNames.capture) === null || _j === void 0 ? void 0 : _j.imagePreview,
|
|
21117
21366
|
text: (_k = idCaptureVerbiages === null || idCaptureVerbiages === void 0 ? void 0 : idCaptureVerbiages.idCardFront) === null || _k === void 0 ? void 0 : _k.processingIdCardText,
|