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
|
@@ -476,16 +476,16 @@ var LoaderButton = function LoaderButton(_a) {
|
|
|
476
476
|
className: "ladda-label"
|
|
477
477
|
}, children));
|
|
478
478
|
};
|
|
479
|
-
var StyledButton = styled__default.default.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) {
|
|
479
|
+
var StyledButton = styled__default.default.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) {
|
|
480
480
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
481
481
|
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 ");
|
|
482
482
|
});
|
|
483
|
-
var templateObject_1$
|
|
483
|
+
var templateObject_1$T;
|
|
484
484
|
|
|
485
|
-
var ButtonsRow$2 = styled__default.default.div(templateObject_1$
|
|
486
|
-
var templateObject_1$
|
|
485
|
+
var ButtonsRow$2 = styled__default.default.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"])));
|
|
486
|
+
var templateObject_1$S;
|
|
487
487
|
|
|
488
|
-
var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$
|
|
488
|
+
var GuidanceMessageContainerDiv = styled__default.default.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) {
|
|
489
489
|
var $top = _a.$top;
|
|
490
490
|
return $top !== null && $top !== void 0 ? $top : '10%';
|
|
491
491
|
}, function (_a) {
|
|
@@ -498,36 +498,36 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
|
|
|
498
498
|
if (!portalLocation) return element;
|
|
499
499
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
500
500
|
};
|
|
501
|
-
var GuidanceMessage = styled__default.default.div(templateObject_2$
|
|
501
|
+
var GuidanceMessage = styled__default.default.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) {
|
|
502
502
|
var _a, _b, _c, _d, _e, _f;
|
|
503
503
|
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';
|
|
504
504
|
}, function (props) {
|
|
505
505
|
var _a, _b, _c, _d, _e, _f;
|
|
506
506
|
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';
|
|
507
507
|
});
|
|
508
|
-
var templateObject_1$
|
|
508
|
+
var templateObject_1$R, templateObject_2$M;
|
|
509
509
|
|
|
510
|
-
var wavesAnimation = styled.keyframes(templateObject_1$
|
|
511
|
-
var progressBarAnimation = styled.keyframes(templateObject_2$
|
|
512
|
-
var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$
|
|
513
|
-
var progressBorderAnimation = styled.keyframes(templateObject_4$
|
|
514
|
-
var templateObject_1$
|
|
510
|
+
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"])));
|
|
511
|
+
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"])));
|
|
512
|
+
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"])));
|
|
513
|
+
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"])));
|
|
514
|
+
var templateObject_1$Q, templateObject_2$L, templateObject_3$x, templateObject_4$r;
|
|
515
515
|
|
|
516
|
-
var OverlayContainer = styled__default.default.div(templateObject_1$
|
|
516
|
+
var OverlayContainer = styled__default.default.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) {
|
|
517
517
|
return props.theme.background ? "".concat(props.theme.background) : "white";
|
|
518
518
|
}, function (props) {
|
|
519
519
|
return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
|
|
520
520
|
});
|
|
521
|
-
var OverlayInner$2 = styled__default.default.div(templateObject_2$
|
|
521
|
+
var OverlayInner$2 = styled__default.default.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) {
|
|
522
522
|
var _a;
|
|
523
523
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
524
524
|
}, function (props) {
|
|
525
525
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
526
526
|
});
|
|
527
|
-
var OverlayImageContainer = styled__default.default.div(templateObject_3$
|
|
528
|
-
var OverlayImageRow = styled__default.default.div(templateObject_4$
|
|
529
|
-
var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_5$
|
|
530
|
-
var ButtonsColumn = styled__default.default.div(templateObject_6$
|
|
527
|
+
var OverlayImageContainer = styled__default.default.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"])));
|
|
528
|
+
var OverlayImageRow = styled__default.default.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"])));
|
|
529
|
+
var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n background: #f7f6fb;\n"], ["\n background: #f7f6fb;\n"])));
|
|
530
|
+
var ButtonsColumn = styled__default.default.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"])));
|
|
531
531
|
var WideButton = styled__default.default(LoaderButton)(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n width: 100%;\n border-radius: 30px;\n"], ["\n width: 100%;\n border-radius: 30px;\n"])));
|
|
532
532
|
var WideBorderButton = styled__default.default(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) {
|
|
533
533
|
var _a, _b;
|
|
@@ -566,7 +566,7 @@ var LoadingOverlayLoadingListItem = styled__default.default.li(templateObject_19
|
|
|
566
566
|
var LoadingOverlayProgressContainer = styled__default.default.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"])));
|
|
567
567
|
var LoadingOverlayCustomLoadingGraphic = styled__default.default.img(templateObject_21$2 || (templateObject_21$2 = __makeTemplateObject(["\n transform-style: preserve-3d;\n"], ["\n transform-style: preserve-3d;\n"])));
|
|
568
568
|
var LoadingOverlayContinueButtonContainer = styled__default.default.div(templateObject_22$2 || (templateObject_22$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
569
|
-
var templateObject_1$
|
|
569
|
+
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;
|
|
570
570
|
|
|
571
571
|
var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
|
|
572
572
|
var accessBlockedImageUrl = _a.accessBlockedImageUrl;
|
|
@@ -3306,8 +3306,8 @@ function getFrameDimensions(frame) {
|
|
|
3306
3306
|
return [frameWidth, frameHeight];
|
|
3307
3307
|
}
|
|
3308
3308
|
|
|
3309
|
-
var InvisibleCanvasContainer = styled__default.default.div(templateObject_1$
|
|
3310
|
-
var InvisibleCanvas = styled__default.default.canvas(templateObject_2$
|
|
3309
|
+
var InvisibleCanvasContainer = styled__default.default.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"])));
|
|
3310
|
+
var InvisibleCanvas = styled__default.default.canvas(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
3311
3311
|
function drawToCanvas(canvas, frame, width, height) {
|
|
3312
3312
|
if (!canvas) return;
|
|
3313
3313
|
var ctx = canvas.getContext('2d');
|
|
@@ -3327,7 +3327,7 @@ function clearCanvas(canvas) {
|
|
|
3327
3327
|
var _a;
|
|
3328
3328
|
(_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);
|
|
3329
3329
|
}
|
|
3330
|
-
var templateObject_1$
|
|
3330
|
+
var templateObject_1$O, templateObject_2$J;
|
|
3331
3331
|
|
|
3332
3332
|
function useFrameLoop(fn, options) {
|
|
3333
3333
|
if (options === void 0) {
|
|
@@ -5123,14 +5123,14 @@ function CameraTamperSeal(_a) {
|
|
|
5123
5123
|
className: classNames.message
|
|
5124
5124
|
}, messageText)));
|
|
5125
5125
|
}
|
|
5126
|
-
var StyledOverlayInner$4 = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
5127
|
-
var StyledOverlayHeading = styled__default.default.h3(templateObject_2$
|
|
5126
|
+
var StyledOverlayInner$4 = styled__default.default(OverlayInner$2)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
5127
|
+
var StyledOverlayHeading = styled__default.default.h3(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
5128
5128
|
function useCameraStore(selector) {
|
|
5129
5129
|
var store = React.useContext(CameraStoreContext);
|
|
5130
5130
|
if (!store) throw new Error('useCameraStore cannot be used without Provider');
|
|
5131
5131
|
return zustand.useStore(store, selector);
|
|
5132
5132
|
}
|
|
5133
|
-
var templateObject_1$
|
|
5133
|
+
var templateObject_1$N, templateObject_2$I;
|
|
5134
5134
|
|
|
5135
5135
|
var DocumentDetectionModelContext = /*#__PURE__*/React.createContext({
|
|
5136
5136
|
startDocumentDetection: function startDocumentDetection() {
|
|
@@ -5961,9 +5961,9 @@ var onMobile = isMobile();
|
|
|
5961
5961
|
function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocumentCanvas, bestBarcodeCanvas, currentBestBarcodeScore, documentDetectionThresholds, makeBarcodeReadabilityPrediction, barcodeReadabilityThreshold) {
|
|
5962
5962
|
return __awaiter(this, void 0, void 0, function () {
|
|
5963
5963
|
var pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, newBestBarcodeScore, newBestBarcodeDetails, documentCroppedPrediction, processedCroppedPrediction, pdf417Prediction;
|
|
5964
|
-
var _a;
|
|
5965
|
-
return __generator(this, function (
|
|
5966
|
-
switch (
|
|
5964
|
+
var _a, _b;
|
|
5965
|
+
return __generator(this, function (_c) {
|
|
5966
|
+
switch (_c.label) {
|
|
5967
5967
|
case 0:
|
|
5968
5968
|
pdf417PredictionTime = 0;
|
|
5969
5969
|
pdf417PredictionScore = 0;
|
|
@@ -5974,7 +5974,8 @@ function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocu
|
|
|
5974
5974
|
pdf417PredictionScore: pdf417PredictionScore,
|
|
5975
5975
|
pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
|
|
5976
5976
|
newBestBarcodeScore: newBestBarcodeScore,
|
|
5977
|
-
newBestBarcodeDetails: newBestBarcodeDetails
|
|
5977
|
+
newBestBarcodeDetails: newBestBarcodeDetails,
|
|
5978
|
+
processedBarcodeBoundingBox: undefined
|
|
5978
5979
|
}];
|
|
5979
5980
|
}
|
|
5980
5981
|
/**
|
|
@@ -5984,7 +5985,7 @@ function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocu
|
|
|
5984
5985
|
cropToDetectedObjectBox(lastPredictionCanvas, prediction.bestDocument.box, croppedDocumentCanvas);
|
|
5985
5986
|
return [4 /*yield*/, makeDocumentDetectorPrediction(croppedDocumentCanvas)];
|
|
5986
5987
|
case 1:
|
|
5987
|
-
documentCroppedPrediction =
|
|
5988
|
+
documentCroppedPrediction = _c.sent();
|
|
5988
5989
|
if (!documentCroppedPrediction) {
|
|
5989
5990
|
// error occurred during prediction (error logged by callee)
|
|
5990
5991
|
return [2 /*return*/, {
|
|
@@ -5992,7 +5993,8 @@ function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocu
|
|
|
5992
5993
|
pdf417PredictionScore: pdf417PredictionScore,
|
|
5993
5994
|
pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
|
|
5994
5995
|
newBestBarcodeScore: newBestBarcodeScore,
|
|
5995
|
-
newBestBarcodeDetails: newBestBarcodeDetails
|
|
5996
|
+
newBestBarcodeDetails: newBestBarcodeDetails,
|
|
5997
|
+
processedBarcodeBoundingBox: undefined
|
|
5996
5998
|
}];
|
|
5997
5999
|
}
|
|
5998
6000
|
processedCroppedPrediction = processDocumentDetectorPrediction(documentCroppedPrediction, documentDetectionThresholds);
|
|
@@ -6022,7 +6024,9 @@ function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocu
|
|
|
6022
6024
|
pdf417PredictionScore: pdf417PredictionScore,
|
|
6023
6025
|
pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
|
|
6024
6026
|
newBestBarcodeScore: newBestBarcodeScore,
|
|
6025
|
-
newBestBarcodeDetails: newBestBarcodeDetails
|
|
6027
|
+
newBestBarcodeDetails: newBestBarcodeDetails,
|
|
6028
|
+
// Return processed barcode bounding box for recapture tracking (valid even when not a new best)
|
|
6029
|
+
processedBarcodeBoundingBox: (_b = processedCroppedPrediction === null || processedCroppedPrediction === void 0 ? void 0 : processedCroppedPrediction.bestPDF417) === null || _b === void 0 ? void 0 : _b.box
|
|
6026
6030
|
}];
|
|
6027
6031
|
}
|
|
6028
6032
|
});
|
|
@@ -6113,6 +6117,9 @@ var IdCaptureModelsContext = /*#__PURE__*/React.createContext({
|
|
|
6113
6117
|
getBestBarcode: function getBestBarcode() {
|
|
6114
6118
|
return null;
|
|
6115
6119
|
},
|
|
6120
|
+
resetBestBarcode: function resetBestBarcode() {
|
|
6121
|
+
return null;
|
|
6122
|
+
},
|
|
6116
6123
|
startBarcodeRecapturePhase: function startBarcodeRecapturePhase() {
|
|
6117
6124
|
return null;
|
|
6118
6125
|
},
|
|
@@ -6213,10 +6220,10 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6213
6220
|
var _this = this;
|
|
6214
6221
|
onDocumentDetected(function (prediction) {
|
|
6215
6222
|
return __awaiter(_this, void 0, void 0, function () {
|
|
6216
|
-
var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, isSinglePage, isRequiredDocumentType, isInRecapturePhase, shouldRunBarcodeAnalysisDuringRecapture, focusPrediction, focusThresholdSet, focusThreshold, barcodeAnalysisResult,
|
|
6217
|
-
var _a, _b, _c, _d, _e, _f, _g
|
|
6218
|
-
return __generator(this, function (
|
|
6219
|
-
switch (
|
|
6223
|
+
var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, isSinglePage, isRequiredDocumentType, isInRecapturePhase, shouldRunBarcodeAnalysisDuringRecapture, focusPrediction, focusThresholdSet, focusThreshold, barcodeAnalysisResult, barcodeAnalysisResult;
|
|
6224
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
6225
|
+
return __generator(this, function (_h) {
|
|
6226
|
+
switch (_h.label) {
|
|
6220
6227
|
case 0:
|
|
6221
6228
|
if (!lastPredictionCanvas.current) return [2 /*return*/];
|
|
6222
6229
|
stopDetectionAtStart = stopDetection.current;
|
|
@@ -6231,7 +6238,7 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6231
6238
|
}
|
|
6232
6239
|
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'));
|
|
6233
6240
|
isInRecapturePhase = isRecapturePhase.current;
|
|
6234
|
-
shouldRunBarcodeAnalysisDuringRecapture = isInRecapturePhase && isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.
|
|
6241
|
+
shouldRunBarcodeAnalysisDuringRecapture = isInRecapturePhase && isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.bestDocument && prediction.bestPDF417;
|
|
6235
6242
|
if (!(isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.documentInBounds && !prediction.documentTooClose && prediction.documentIsStable)) return [3 /*break*/, 3];
|
|
6236
6243
|
focusPrediction = makeFocusPrediction(lastPredictionCanvas.current, (_c = prediction.bestDocument) === null || _c === void 0 ? void 0 : _c.box);
|
|
6237
6244
|
if (focusPrediction) {
|
|
@@ -6255,7 +6262,7 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6255
6262
|
if (!(enableBarcodeReadabilityModel && prediction.bestDocument && prediction.bestPDF417 && croppedDocumentCanvas.current)) return [3 /*break*/, 2];
|
|
6256
6263
|
return [4 /*yield*/, analyzeBarcodeReadability(prediction, lastPredictionCanvas.current, croppedDocumentCanvas.current, bestBarcodeCanvas.current, bestBarcodeScore.current)];
|
|
6257
6264
|
case 1:
|
|
6258
|
-
barcodeAnalysisResult =
|
|
6265
|
+
barcodeAnalysisResult = _h.sent();
|
|
6259
6266
|
pdf417PredictionTime = barcodeAnalysisResult.pdf417PredictionTime;
|
|
6260
6267
|
pdf417PredictionScore = barcodeAnalysisResult.pdf417PredictionScore;
|
|
6261
6268
|
pdf417PredictionThresholdMet = barcodeAnalysisResult.pdf417PredictionThresholdMet;
|
|
@@ -6267,19 +6274,23 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6267
6274
|
}
|
|
6268
6275
|
// During recapture phase, also track best barcode separately for recapture sequence
|
|
6269
6276
|
if (isRecapturePhase.current && recaptureBarcodeCanvas.current && pdf417PredictionScore > recaptureBarcodeScore.current) {
|
|
6277
|
+
log("[IdCaptureModelsProvider] Recapture tracking: new best score ".concat(pdf417PredictionScore, " (was ").concat(recaptureBarcodeScore.current, ")"));
|
|
6270
6278
|
recaptureBarcodeScore.current = pdf417PredictionScore;
|
|
6271
|
-
|
|
6272
|
-
//
|
|
6273
|
-
|
|
6274
|
-
|
|
6275
|
-
|
|
6276
|
-
|
|
6277
|
-
|
|
6278
|
-
|
|
6279
|
-
|
|
6279
|
+
// Create details directly from current prediction (not newBestBarcodeDetails which
|
|
6280
|
+
// is only set when score beats overall best, not just recapture best)
|
|
6281
|
+
recaptureBarcodeDetails.current = {
|
|
6282
|
+
boundingBox: prediction.bestPDF417.box,
|
|
6283
|
+
score: pdf417PredictionScore
|
|
6284
|
+
};
|
|
6285
|
+
// Crop barcode from croppedDocumentCanvas using the processed bounding box
|
|
6286
|
+
// (can't use bestBarcodeCanvas since it's only updated for overall best)
|
|
6287
|
+
if (croppedDocumentCanvas.current && barcodeAnalysisResult.processedBarcodeBoundingBox) {
|
|
6288
|
+
cropToDetectedObjectBox(croppedDocumentCanvas.current, barcodeAnalysisResult.processedBarcodeBoundingBox, recaptureBarcodeCanvas.current, 16);
|
|
6289
|
+
} else {
|
|
6290
|
+
log("[IdCaptureModelsProvider] Recapture tracking: could not crop barcode - croppedDocumentCanvas=".concat(!!croppedDocumentCanvas.current, ", processedBarcodeBoundingBox=").concat(!!barcodeAnalysisResult.processedBarcodeBoundingBox));
|
|
6280
6291
|
}
|
|
6281
6292
|
}
|
|
6282
|
-
|
|
6293
|
+
_h.label = 2;
|
|
6283
6294
|
case 2:
|
|
6284
6295
|
return [3 /*break*/, 5];
|
|
6285
6296
|
case 3:
|
|
@@ -6287,7 +6298,7 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6287
6298
|
if (!(enableBarcodeReadabilityModel && croppedDocumentCanvas.current && stopDetectionAtStart === stopDetection.current)) return [3 /*break*/, 5];
|
|
6288
6299
|
return [4 /*yield*/, analyzeBarcodeReadability(prediction, lastPredictionCanvas.current, croppedDocumentCanvas.current, bestBarcodeCanvas.current, bestBarcodeScore.current)];
|
|
6289
6300
|
case 4:
|
|
6290
|
-
barcodeAnalysisResult =
|
|
6301
|
+
barcodeAnalysisResult = _h.sent();
|
|
6291
6302
|
pdf417PredictionTime = barcodeAnalysisResult.pdf417PredictionTime;
|
|
6292
6303
|
pdf417PredictionScore = barcodeAnalysisResult.pdf417PredictionScore;
|
|
6293
6304
|
pdf417PredictionThresholdMet = barcodeAnalysisResult.pdf417PredictionThresholdMet;
|
|
@@ -6299,19 +6310,23 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6299
6310
|
}
|
|
6300
6311
|
// Track best barcode separately for recapture sequence
|
|
6301
6312
|
if (recaptureBarcodeCanvas.current && pdf417PredictionScore > recaptureBarcodeScore.current) {
|
|
6313
|
+
log("[IdCaptureModelsProvider] Recapture tracking (relaxed): new best score ".concat(pdf417PredictionScore, " (was ").concat(recaptureBarcodeScore.current, ")"));
|
|
6302
6314
|
recaptureBarcodeScore.current = pdf417PredictionScore;
|
|
6303
|
-
|
|
6304
|
-
//
|
|
6305
|
-
|
|
6306
|
-
|
|
6307
|
-
|
|
6308
|
-
|
|
6309
|
-
|
|
6310
|
-
|
|
6311
|
-
|
|
6315
|
+
// Create details directly from current prediction (not newBestBarcodeDetails which
|
|
6316
|
+
// is only set when score beats overall best, not just recapture best)
|
|
6317
|
+
recaptureBarcodeDetails.current = {
|
|
6318
|
+
boundingBox: prediction.bestPDF417.box,
|
|
6319
|
+
score: pdf417PredictionScore
|
|
6320
|
+
};
|
|
6321
|
+
// Crop barcode from croppedDocumentCanvas using the processed bounding box
|
|
6322
|
+
// (can't use bestBarcodeCanvas since it's only updated for overall best)
|
|
6323
|
+
if (croppedDocumentCanvas.current && barcodeAnalysisResult.processedBarcodeBoundingBox) {
|
|
6324
|
+
cropToDetectedObjectBox(croppedDocumentCanvas.current, barcodeAnalysisResult.processedBarcodeBoundingBox, recaptureBarcodeCanvas.current, 16);
|
|
6325
|
+
} else {
|
|
6326
|
+
log("[IdCaptureModelsProvider] Recapture tracking (relaxed): could not crop barcode - croppedDocumentCanvas=".concat(!!croppedDocumentCanvas.current, ", processedBarcodeBoundingBox=").concat(!!barcodeAnalysisResult.processedBarcodeBoundingBox));
|
|
6312
6327
|
}
|
|
6313
6328
|
}
|
|
6314
|
-
|
|
6329
|
+
_h.label = 5;
|
|
6315
6330
|
case 5:
|
|
6316
6331
|
/**
|
|
6317
6332
|
* @note
|
|
@@ -6319,7 +6334,7 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6319
6334
|
* Do not return early from this function unless
|
|
6320
6335
|
* lastPredictionCanvas.current is not set
|
|
6321
6336
|
*/
|
|
6322
|
-
(
|
|
6337
|
+
(_g = onPredictionHandler.current) === null || _g === void 0 ? void 0 : _g.call(onPredictionHandler, _assign(_assign({}, prediction), {
|
|
6323
6338
|
focusScore: focusScore,
|
|
6324
6339
|
focusPredictionTime: focusPredictionTime,
|
|
6325
6340
|
focusThresholdMet: focusThresholdMet,
|
|
@@ -6352,7 +6367,29 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6352
6367
|
canvas: bestBarcodeCanvas.current
|
|
6353
6368
|
});
|
|
6354
6369
|
}, []);
|
|
6370
|
+
var resetBestBarcode = React.useCallback(function () {
|
|
6371
|
+
// Light-weight reset that only clears barcode tracking without disrupting detection
|
|
6372
|
+
bestBarcodeScore.current = 0;
|
|
6373
|
+
bestBarcodeDetails.current = null;
|
|
6374
|
+
// Also reset recapture tracking so early frames during move-closer window are ignored
|
|
6375
|
+
recaptureBarcodeScore.current = 0;
|
|
6376
|
+
recaptureBarcodeDetails.current = null;
|
|
6377
|
+
// Clear the canvas content but don't recreate it
|
|
6378
|
+
if (bestBarcodeCanvas.current) {
|
|
6379
|
+
var ctx = bestBarcodeCanvas.current.getContext('2d');
|
|
6380
|
+
if (ctx) {
|
|
6381
|
+
ctx.clearRect(0, 0, bestBarcodeCanvas.current.width, bestBarcodeCanvas.current.height);
|
|
6382
|
+
}
|
|
6383
|
+
}
|
|
6384
|
+
if (recaptureBarcodeCanvas.current) {
|
|
6385
|
+
var ctx = recaptureBarcodeCanvas.current.getContext('2d');
|
|
6386
|
+
if (ctx) {
|
|
6387
|
+
ctx.clearRect(0, 0, recaptureBarcodeCanvas.current.width, recaptureBarcodeCanvas.current.height);
|
|
6388
|
+
}
|
|
6389
|
+
}
|
|
6390
|
+
}, []);
|
|
6355
6391
|
var startBarcodeRecapturePhase = React.useCallback(function () {
|
|
6392
|
+
log("[IdCaptureModelsProvider] Starting barcode recapture phase. Initial best score: ".concat(bestBarcodeScore.current));
|
|
6356
6393
|
// Snapshot current best barcode to initial capture canvas
|
|
6357
6394
|
if (bestBarcodeCanvas.current && initialCaptureBarcodeCanvas.current) {
|
|
6358
6395
|
var ctx = initialCaptureBarcodeCanvas.current.getContext('2d');
|
|
@@ -6469,13 +6506,14 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6469
6506
|
bestFrameDetails: bestFrameDetails,
|
|
6470
6507
|
bestBarcodeDetails: bestBarcodeDetails,
|
|
6471
6508
|
getBestBarcode: getBestBarcode,
|
|
6509
|
+
resetBestBarcode: resetBestBarcode,
|
|
6472
6510
|
startBarcodeRecapturePhase: startBarcodeRecapturePhase,
|
|
6473
6511
|
getInitialCaptureBestBarcode: getInitialCaptureBestBarcode,
|
|
6474
6512
|
getRecaptureBestBarcode: getRecaptureBestBarcode,
|
|
6475
6513
|
requiredDocumentType: requiredDocumentType,
|
|
6476
6514
|
setRequiredDocumentType: setRequiredDocumentType
|
|
6477
6515
|
};
|
|
6478
|
-
}, [ready, modelDownloadProgress, modelLoadState, modelWarmingStartedAt, modelError, startDocumentDetection, stopDocumentDetection, load, thresholds, setThresholds, documentDetectionBoundaries, setDocumentDetectionBoundaries, onPredictionMade, detectionTime, focusPredictionTime, barcodeReadabilityPredictionTime, getBestFrame, resetBestFrame, getBestBarcode, startBarcodeRecapturePhase, getInitialCaptureBestBarcode, getRecaptureBestBarcode, requiredDocumentType]);
|
|
6516
|
+
}, [ready, modelDownloadProgress, modelLoadState, modelWarmingStartedAt, modelError, startDocumentDetection, stopDocumentDetection, load, thresholds, setThresholds, documentDetectionBoundaries, setDocumentDetectionBoundaries, onPredictionMade, detectionTime, focusPredictionTime, barcodeReadabilityPredictionTime, getBestFrame, resetBestFrame, getBestBarcode, resetBestBarcode, startBarcodeRecapturePhase, getInitialCaptureBestBarcode, getRecaptureBestBarcode, requiredDocumentType]);
|
|
6479
6517
|
return /*#__PURE__*/React__namespace.default.createElement(IdCaptureModelsContext.Provider, {
|
|
6480
6518
|
value: value
|
|
6481
6519
|
}, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvasContainer, null, /*#__PURE__*/React__namespace.default.createElement(InvisibleCanvas, {
|
|
@@ -7045,12 +7083,12 @@ function DebugStatsPane(_a) {
|
|
|
7045
7083
|
if (!portalLocation) return element;
|
|
7046
7084
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
7047
7085
|
}
|
|
7048
|
-
var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$
|
|
7049
|
-
var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$
|
|
7086
|
+
var DebugStatsPaneDiv = styled__default.default.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"])));
|
|
7087
|
+
var ObjectDetectionDebugOverlayDiv = styled__default.default.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) {
|
|
7050
7088
|
var $flipX = _a.$flipX;
|
|
7051
7089
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
7052
7090
|
});
|
|
7053
|
-
var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$
|
|
7091
|
+
var ObjectDetectionDebugBox = styled__default.default.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) {
|
|
7054
7092
|
var $color = _a.$color;
|
|
7055
7093
|
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
7056
7094
|
}, function (_a) {
|
|
@@ -7060,7 +7098,11 @@ var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$t ||
|
|
|
7060
7098
|
var $flipX = _a.$flipX;
|
|
7061
7099
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
7062
7100
|
});
|
|
7063
|
-
var
|
|
7101
|
+
var ObjectDetectionDebugLabel = styled__default.default.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) {
|
|
7102
|
+
var $color = _a.$color;
|
|
7103
|
+
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
7104
|
+
});
|
|
7105
|
+
var FaceDetectionKeypointMarker = styled__default.default.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) {
|
|
7064
7106
|
var $color = _a.$color;
|
|
7065
7107
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
7066
7108
|
}, function (_a) {
|
|
@@ -7172,7 +7214,9 @@ function IdCaptureDetectedObjectDebugBox(_a) {
|
|
|
7172
7214
|
width: width,
|
|
7173
7215
|
height: height
|
|
7174
7216
|
}
|
|
7175
|
-
}
|
|
7217
|
+
}, /*#__PURE__*/React__namespace.default.createElement(ObjectDetectionDebugLabel, {
|
|
7218
|
+
"$color": color
|
|
7219
|
+
}, obj.label, " ", obj.score.toFixed(2)));
|
|
7176
7220
|
}
|
|
7177
7221
|
function SelfieCaptureFaceDebugBox(_a) {
|
|
7178
7222
|
var face = _a.face,
|
|
@@ -7258,7 +7302,7 @@ function SelfieCaptureFaceKeypoint(_a) {
|
|
|
7258
7302
|
}
|
|
7259
7303
|
});
|
|
7260
7304
|
}
|
|
7261
|
-
var templateObject_1$
|
|
7305
|
+
var templateObject_1$M, templateObject_2$H, templateObject_3$v, templateObject_4$p, templateObject_5$i;
|
|
7262
7306
|
|
|
7263
7307
|
function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
7264
7308
|
var _b = _a.classNames,
|
|
@@ -7291,18 +7335,18 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
|
7291
7335
|
}
|
|
7292
7336
|
}, verbiage.buttonText))));
|
|
7293
7337
|
}
|
|
7294
|
-
var Container$7 = styled__default.default.div(templateObject_1$
|
|
7338
|
+
var Container$7 = styled__default.default.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) {
|
|
7295
7339
|
var _a, _b, _c;
|
|
7296
7340
|
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';
|
|
7297
7341
|
}, function (props) {
|
|
7298
7342
|
var _a, _b, _c;
|
|
7299
7343
|
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';
|
|
7300
7344
|
});
|
|
7301
|
-
var InnerContainer = styled__default.default.div(templateObject_2$
|
|
7302
|
-
var Message = styled__default.default.span(templateObject_3$
|
|
7303
|
-
var ButtonContainer = styled__default.default.div(templateObject_4$
|
|
7304
|
-
var Button$1 = styled__default.default(LoaderButton)(templateObject_5$
|
|
7305
|
-
var templateObject_1$
|
|
7345
|
+
var InnerContainer = styled__default.default.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"])));
|
|
7346
|
+
var Message = styled__default.default.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"])));
|
|
7347
|
+
var ButtonContainer = styled__default.default.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n display: flex;\n margin-left: auto;\n"], ["\n display: flex;\n margin-left: auto;\n"])));
|
|
7348
|
+
var Button$1 = styled__default.default(LoaderButton)(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n white-space: nowrap;\n margin: auto;\n"], ["\n white-space: nowrap;\n margin: auto;\n"])));
|
|
7349
|
+
var templateObject_1$L, templateObject_2$G, templateObject_3$u, templateObject_4$o, templateObject_5$h;
|
|
7306
7350
|
|
|
7307
7351
|
// This is a simplified version of https://github.com/ZeeCoder/use-resize-observer.
|
|
7308
7352
|
// We have removed all options and made it compliant with React Compiler/React 19.
|
|
@@ -7634,13 +7678,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
7634
7678
|
finished: true
|
|
7635
7679
|
}, verbiage.retryBtnText)));
|
|
7636
7680
|
};
|
|
7637
|
-
var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
7638
|
-
var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$
|
|
7639
|
-
var Description$4 = styled__default.default.p(templateObject_3$
|
|
7640
|
-
var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$
|
|
7641
|
-
var templateObject_1$
|
|
7681
|
+
var StyledOverlayInner$3 = styled__default.default(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"])));
|
|
7682
|
+
var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
7683
|
+
var Description$4 = styled__default.default.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"])));
|
|
7684
|
+
var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
7685
|
+
var templateObject_1$K, templateObject_2$F, templateObject_3$t, templateObject_4$n;
|
|
7642
7686
|
|
|
7643
|
-
var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$
|
|
7687
|
+
var ExitCaptureStyledButton = styled__default.default.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"])));
|
|
7644
7688
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
7645
7689
|
var onClick = _a.onClick,
|
|
7646
7690
|
className = _a.className;
|
|
@@ -7684,7 +7728,7 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
|
7684
7728
|
y2: "19.75"
|
|
7685
7729
|
}))));
|
|
7686
7730
|
};
|
|
7687
|
-
var templateObject_1$
|
|
7731
|
+
var templateObject_1$J;
|
|
7688
7732
|
|
|
7689
7733
|
function IdCaptureLoadingGraphic(props) {
|
|
7690
7734
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
@@ -8159,21 +8203,21 @@ function IdCaptureLoadingGraphicMobile(_a) {
|
|
|
8159
8203
|
fill: "white"
|
|
8160
8204
|
}))));
|
|
8161
8205
|
}
|
|
8162
|
-
var LoadingGraphicWrapper = styled__default.default.div(templateObject_1$
|
|
8163
|
-
var LoadingGraphicSvg = styled__default.default.svg(templateObject_2$
|
|
8206
|
+
var LoadingGraphicWrapper = styled__default.default.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"])));
|
|
8207
|
+
var LoadingGraphicSvg = styled__default.default.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) {
|
|
8164
8208
|
return props.$frame > 1 ? 1 : props.$frame === 1 ? 1.25 : 0.75;
|
|
8165
8209
|
}, function (props) {
|
|
8166
8210
|
return props.$frame >= 5 ? 10 : 0;
|
|
8167
8211
|
}, function (props) {
|
|
8168
8212
|
return props.$borderColor;
|
|
8169
8213
|
});
|
|
8170
|
-
var LoadingGraphicCardGroup = styled__default.default.g(templateObject_3$
|
|
8214
|
+
var LoadingGraphicCardGroup = styled__default.default.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) {
|
|
8171
8215
|
return props.$offScreen ? '-500px' : '0';
|
|
8172
8216
|
});
|
|
8173
|
-
var LoadingGraphicPhoneGroup = styled__default.default.g(templateObject_4$
|
|
8217
|
+
var LoadingGraphicPhoneGroup = styled__default.default.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) {
|
|
8174
8218
|
return props.$offScreen ? '40px' : '0';
|
|
8175
8219
|
});
|
|
8176
|
-
var templateObject_1$
|
|
8220
|
+
var templateObject_1$I, templateObject_2$E, templateObject_3$s, templateObject_4$m;
|
|
8177
8221
|
|
|
8178
8222
|
function LoadingListItemIndicator(_a) {
|
|
8179
8223
|
var _b = _a.state,
|
|
@@ -8442,24 +8486,24 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
|
|
|
8442
8486
|
}
|
|
8443
8487
|
}, ready ? verbiage.continueText : verbiage.pleaseWaitText))))));
|
|
8444
8488
|
};
|
|
8445
|
-
var OverlayInner$1 = styled__default.default(LoadingOverlayInner)(templateObject_1$
|
|
8489
|
+
var OverlayInner$1 = styled__default.default(LoadingOverlayInner)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n"], ["\n background: ", ";\n color: ", ";\n"])), function (props) {
|
|
8446
8490
|
var _a, _b, _c, _d;
|
|
8447
8491
|
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';
|
|
8448
8492
|
}, function (props) {
|
|
8449
8493
|
var _a, _b, _c, _d;
|
|
8450
8494
|
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';
|
|
8451
8495
|
});
|
|
8452
|
-
var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_2$
|
|
8453
|
-
var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_3$
|
|
8454
|
-
var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_4$
|
|
8455
|
-
var ButtonsRow$1 = styled__default.default(LoadingOverlayButtonsRow)(templateObject_5$
|
|
8496
|
+
var ContinuityCameraCheckboxContainer$1 = styled__default.default.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"])));
|
|
8497
|
+
var ContinuityCameraCheckboxInner = styled__default.default(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"])));
|
|
8498
|
+
var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
8499
|
+
var ButtonsRow$1 = styled__default.default(LoadingOverlayButtonsRow)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n color: ", ";\n ", "\n"], ["\n color: ", ";\n ", "\n"])), function (props) {
|
|
8456
8500
|
var _a, _b, _c, _d;
|
|
8457
8501
|
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';
|
|
8458
8502
|
}, function (props) {
|
|
8459
8503
|
var _a, _b, _c, _d, _e, _f;
|
|
8460
8504
|
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, ";") : '';
|
|
8461
8505
|
});
|
|
8462
|
-
var ProgressBarBackground$1 = styled__default.default(LoadingOverlayProgressBarBackground)(templateObject_6$
|
|
8506
|
+
var ProgressBarBackground$1 = styled__default.default(LoadingOverlayProgressBarBackground)(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n background: ", ";\n opacity: ", ";\n"], ["\n background: ", ";\n opacity: ", ";\n"])), function (props) {
|
|
8463
8507
|
var _a, _b, _c, _d;
|
|
8464
8508
|
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)';
|
|
8465
8509
|
}, function (props) {
|
|
@@ -8489,10 +8533,10 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_8$5
|
|
|
8489
8533
|
var _a, _b, _c, _d;
|
|
8490
8534
|
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';
|
|
8491
8535
|
});
|
|
8492
|
-
var templateObject_1$
|
|
8536
|
+
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;
|
|
8493
8537
|
|
|
8494
|
-
var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$
|
|
8495
|
-
var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$
|
|
8538
|
+
var ContinuityCameraCheckboxContainer = styled__default.default.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"])));
|
|
8539
|
+
var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8496
8540
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
8497
8541
|
var _b, _c, _d, _e;
|
|
8498
8542
|
var onDismissed = _a.onDismissed,
|
|
@@ -8613,7 +8657,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
8613
8657
|
}
|
|
8614
8658
|
}, ready ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
8615
8659
|
};
|
|
8616
|
-
var templateObject_1$
|
|
8660
|
+
var templateObject_1$G, templateObject_2$C;
|
|
8617
8661
|
|
|
8618
8662
|
var components$1 = {
|
|
8619
8663
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -8671,9 +8715,9 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
|
|
|
8671
8715
|
});
|
|
8672
8716
|
};
|
|
8673
8717
|
|
|
8674
|
-
var Card = styled__default.default.div(templateObject_1$
|
|
8675
|
-
var FlexCard = styled__default.default(Card)(templateObject_2$
|
|
8676
|
-
var templateObject_1$
|
|
8718
|
+
var Card = styled__default.default.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"])));
|
|
8719
|
+
var FlexCard = styled__default.default(Card)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
8720
|
+
var templateObject_1$F, templateObject_2$B;
|
|
8677
8721
|
|
|
8678
8722
|
var imageDisplayOrder = ['idCardFront', 'idCardBack', 'idBarcodeImage', 'passport', 'singlePage', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
|
|
8679
8723
|
var downloadImage = function downloadImage(dataUrl, filename) {
|
|
@@ -8808,12 +8852,12 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8808
8852
|
finished: true
|
|
8809
8853
|
}, verbiage.retryText)))));
|
|
8810
8854
|
};
|
|
8811
|
-
var Heading$a = styled__default.default.h1(templateObject_1$
|
|
8812
|
-
var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_2$
|
|
8813
|
-
var ImageRow = styled__default.default(OverlayImageRow)(templateObject_3$
|
|
8814
|
-
var ImageCol$1 = styled__default.default.div(templateObject_4$
|
|
8815
|
-
var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_5$
|
|
8816
|
-
var DebugInfoContainer = styled__default.default.div(templateObject_6$
|
|
8855
|
+
var Heading$a = styled__default.default.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"])));
|
|
8856
|
+
var ImagesContainer = styled__default.default(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"])));
|
|
8857
|
+
var ImageRow = styled__default.default(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"])));
|
|
8858
|
+
var ImageCol$1 = styled__default.default.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"])));
|
|
8859
|
+
var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n width: 100%;\n border-radius: 12px;\n"], ["\n width: 100%;\n border-radius: 12px;\n"])));
|
|
8860
|
+
var DebugInfoContainer = styled__default.default.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"])));
|
|
8817
8861
|
var DebugSection = styled__default.default.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"])));
|
|
8818
8862
|
var DebugLabel = styled__default.default.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"])));
|
|
8819
8863
|
var DebugValue = styled__default.default.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"])));
|
|
@@ -8897,7 +8941,7 @@ var BarcodeComparisonScoreLabel = styled__default.default.span(templateObject_23
|
|
|
8897
8941
|
var $isHigher = _a.$isHigher;
|
|
8898
8942
|
return $isHigher ? '#c3e6cb' : '#dee2e6';
|
|
8899
8943
|
});
|
|
8900
|
-
var templateObject_1$
|
|
8944
|
+
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;
|
|
8901
8945
|
|
|
8902
8946
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
8903
8947
|
var _this = this;
|
|
@@ -8949,12 +8993,12 @@ function resetCanvasDimensions(canvas) {
|
|
|
8949
8993
|
canvas.style.height = '0';
|
|
8950
8994
|
}
|
|
8951
8995
|
|
|
8952
|
-
var IdCardGuideImageContainer = styled__default.default(IdCardBorder)(templateObject_1$
|
|
8996
|
+
var IdCardGuideImageContainer = styled__default.default(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) {
|
|
8953
8997
|
return props.$isVisible ? '' : 'opacity: 0;';
|
|
8954
8998
|
}, function (props) {
|
|
8955
8999
|
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
8956
9000
|
});
|
|
8957
|
-
var IdCardGuideImage = styled__default.default.img(templateObject_2$
|
|
9001
|
+
var IdCardGuideImage = styled__default.default.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) {
|
|
8958
9002
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
8959
9003
|
}, function (props) {
|
|
8960
9004
|
return props.$isInvisible ? 'opacity: 0;' : '';
|
|
@@ -9104,17 +9148,17 @@ function IdCardBorderSvg(_a) {
|
|
|
9104
9148
|
className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
|
|
9105
9149
|
}));
|
|
9106
9150
|
}
|
|
9107
|
-
var IdCardBorderContainer = styled__default.default.div(templateObject_3$
|
|
9108
|
-
var IdCardBorderInner = styled__default.default.div(templateObject_4$
|
|
9109
|
-
var SvgOverlay = styled__default.default.svg(templateObject_5$
|
|
9110
|
-
var IdCardBorderRect = styled__default.default.rect(templateObject_6$
|
|
9151
|
+
var IdCardBorderContainer = styled__default.default.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);
|
|
9152
|
+
var IdCardBorderInner = styled__default.default.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"])));
|
|
9153
|
+
var SvgOverlay = styled__default.default.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"])));
|
|
9154
|
+
var IdCardBorderRect = styled__default.default.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) {
|
|
9111
9155
|
var _a;
|
|
9112
9156
|
return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
|
|
9113
9157
|
}, function (props) {
|
|
9114
9158
|
var _a;
|
|
9115
9159
|
return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
|
|
9116
9160
|
});
|
|
9117
|
-
var templateObject_1$
|
|
9161
|
+
var templateObject_1$D, templateObject_2$z, templateObject_3$p, templateObject_4$j, templateObject_5$e, templateObject_6$8;
|
|
9118
9162
|
|
|
9119
9163
|
var defaultIdCaptureGuideImages = {
|
|
9120
9164
|
portrait: {
|
|
@@ -9262,7 +9306,7 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
9262
9306
|
clearTimeout(timeout);
|
|
9263
9307
|
};
|
|
9264
9308
|
}, []);
|
|
9265
|
-
return /*#__PURE__*/React__namespace.default.createElement(Wrapper$
|
|
9309
|
+
return /*#__PURE__*/React__namespace.default.createElement(Wrapper$2, {
|
|
9266
9310
|
"$isLandscape": orientation === 'landscape',
|
|
9267
9311
|
style: {
|
|
9268
9312
|
aspectRatio: aspectRatio
|
|
@@ -9303,15 +9347,15 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
9303
9347
|
style: imageStyle
|
|
9304
9348
|
})));
|
|
9305
9349
|
};
|
|
9306
|
-
var Wrapper$
|
|
9350
|
+
var Wrapper$2 = styled__default.default.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) {
|
|
9307
9351
|
return props.$isLandscape ? 'height: 100%;' : 'height: 100%;';
|
|
9308
9352
|
});
|
|
9309
|
-
var FlipImageContainer = styled__default.default(IdCardGuideImageContainer)(templateObject_2$
|
|
9353
|
+
var FlipImageContainer = styled__default.default(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) {
|
|
9310
9354
|
return props.$transitionTime;
|
|
9311
9355
|
}, function (props) {
|
|
9312
9356
|
return props.$transforms;
|
|
9313
9357
|
});
|
|
9314
|
-
var templateObject_1$
|
|
9358
|
+
var templateObject_1$C, templateObject_2$y;
|
|
9315
9359
|
|
|
9316
9360
|
var GuideOrientationContext = /*#__PURE__*/React.createContext({
|
|
9317
9361
|
orientation: 'landscape',
|
|
@@ -9406,7 +9450,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
|
|
|
9406
9450
|
clearTimeout(timeout);
|
|
9407
9451
|
};
|
|
9408
9452
|
}, []);
|
|
9409
|
-
return /*#__PURE__*/React__namespace.default.createElement(Wrapper, {
|
|
9453
|
+
return /*#__PURE__*/React__namespace.default.createElement(Wrapper$1, {
|
|
9410
9454
|
style: {
|
|
9411
9455
|
aspectRatio: imageAspectRatio
|
|
9412
9456
|
},
|
|
@@ -9450,10 +9494,10 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
|
|
|
9450
9494
|
height: height
|
|
9451
9495
|
})));
|
|
9452
9496
|
};
|
|
9453
|
-
var Wrapper = styled__default.default.div(templateObject_1$
|
|
9497
|
+
var Wrapper$1 = styled__default.default.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) {
|
|
9454
9498
|
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
9455
9499
|
});
|
|
9456
|
-
var templateObject_1$
|
|
9500
|
+
var templateObject_1$B;
|
|
9457
9501
|
|
|
9458
9502
|
var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
9459
9503
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
@@ -9599,10 +9643,10 @@ var regionClsx = function regionClsx(classNames, which) {
|
|
|
9599
9643
|
return v;
|
|
9600
9644
|
}).join(' ');
|
|
9601
9645
|
};
|
|
9602
|
-
var StyledPageContainer = styled__default.default.div(templateObject_1$
|
|
9603
|
-
var GuidesContainer = styled__default.default.div(templateObject_2$
|
|
9604
|
-
var GuideCenterRow = styled__default.default.div(templateObject_3$
|
|
9605
|
-
var GuideRegion = styled__default.default.div(templateObject_4$
|
|
9646
|
+
var StyledPageContainer = styled__default.default.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"])));
|
|
9647
|
+
var GuidesContainer = styled__default.default.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"])));
|
|
9648
|
+
var GuideCenterRow = styled__default.default.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"])));
|
|
9649
|
+
var GuideRegion = styled__default.default.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) {
|
|
9606
9650
|
var _a, _b, _c, _d, _e;
|
|
9607
9651
|
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)';
|
|
9608
9652
|
}, function (props) {
|
|
@@ -9613,8 +9657,8 @@ var GuideRegion = styled__default.default.div(templateObject_4$g || (templateObj
|
|
|
9613
9657
|
}, function (props) {
|
|
9614
9658
|
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
9615
9659
|
});
|
|
9616
|
-
var Spacer = styled__default.default(GuideRegion)(templateObject_5$
|
|
9617
|
-
var GuideCenterRegion = styled__default.default.div(templateObject_6$
|
|
9660
|
+
var Spacer = styled__default.default(GuideRegion)(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: block;\n width: auto;\n"], ["\n display: block;\n width: auto;\n"])));
|
|
9661
|
+
var GuideCenterRegion = styled__default.default.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) {
|
|
9618
9662
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
9619
9663
|
}, function (props) {
|
|
9620
9664
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
@@ -9629,7 +9673,7 @@ var GuideText = styled__default.default.span(templateObject_8$3 || (templateObje
|
|
|
9629
9673
|
var GuideCenterInner = styled__default.default.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) {
|
|
9630
9674
|
return props.$isLandscape ? 'height: 100%;' : 'width: 90%;';
|
|
9631
9675
|
});
|
|
9632
|
-
var templateObject_1$
|
|
9676
|
+
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;
|
|
9633
9677
|
|
|
9634
9678
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
9635
9679
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -9752,7 +9796,7 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
9752
9796
|
ref: wrapperRef,
|
|
9753
9797
|
"$maskColor": maskColor !== null && maskColor !== void 0 ? maskColor : '',
|
|
9754
9798
|
className: classNames.canvasWrapper
|
|
9755
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Canvas$
|
|
9799
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Canvas$2, {
|
|
9756
9800
|
ref: canvasRef,
|
|
9757
9801
|
className: classNames.canvas
|
|
9758
9802
|
})), /*#__PURE__*/React__namespace.default.createElement(IdCaptureGuideOverlay, {
|
|
@@ -9770,11 +9814,174 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
9770
9814
|
progress: progress
|
|
9771
9815
|
}));
|
|
9772
9816
|
};
|
|
9773
|
-
var CanvasWrapper$1 = styled__default.default.div(templateObject_1$
|
|
9817
|
+
var CanvasWrapper$1 = styled__default.default.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) {
|
|
9774
9818
|
return props.$maskColor;
|
|
9775
9819
|
});
|
|
9776
|
-
var Canvas$
|
|
9777
|
-
var templateObject_1$
|
|
9820
|
+
var Canvas$2 = styled__default.default.canvas(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
9821
|
+
var templateObject_1$z, templateObject_2$w;
|
|
9822
|
+
|
|
9823
|
+
var PDF417_ASPECT_RATIO = 3 / 1;
|
|
9824
|
+
function BarcodeGuideOverlay(_a) {
|
|
9825
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
9826
|
+
var _l = _a.aspectRatio,
|
|
9827
|
+
aspectRatio = _l === void 0 ? PDF417_ASPECT_RATIO : _l,
|
|
9828
|
+
maskColor = _a.maskColor,
|
|
9829
|
+
_m = _a.cornerColor,
|
|
9830
|
+
cornerColor = _m === void 0 ? 'white' : _m,
|
|
9831
|
+
_o = _a.cornerLength,
|
|
9832
|
+
cornerLength = _o === void 0 ? 40 : _o,
|
|
9833
|
+
_p = _a.cornerWidth,
|
|
9834
|
+
cornerWidth = _p === void 0 ? 4 : _p,
|
|
9835
|
+
padding = _a.padding,
|
|
9836
|
+
_q = _a.borderRadius,
|
|
9837
|
+
borderRadius = _q === void 0 ? 8 : _q,
|
|
9838
|
+
_r = _a.headerText,
|
|
9839
|
+
headerText = _r === void 0 ? 'SCAN THE BARCODE' : _r,
|
|
9840
|
+
_s = _a.instructionText,
|
|
9841
|
+
instructionText = _s === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _s,
|
|
9842
|
+
_t = _a.isSuccess,
|
|
9843
|
+
isSuccess = _t === void 0 ? false : _t,
|
|
9844
|
+
_u = _a.successColor,
|
|
9845
|
+
successColor = _u === void 0 ? '#22c55e' : _u,
|
|
9846
|
+
_v = _a.classNames,
|
|
9847
|
+
classNames = _v === void 0 ? {} : _v;
|
|
9848
|
+
var canvasRef = React.useRef(null);
|
|
9849
|
+
var _w = useResizeObserver(),
|
|
9850
|
+
wrapperRef = _w.ref,
|
|
9851
|
+
_x = _w.width,
|
|
9852
|
+
wrapperWidth = _x === void 0 ? 1 : _x,
|
|
9853
|
+
_y = _w.height,
|
|
9854
|
+
wrapperHeight = _y === void 0 ? 1 : _y;
|
|
9855
|
+
var theme = styled.useTheme();
|
|
9856
|
+
if (padding === undefined) {
|
|
9857
|
+
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;
|
|
9858
|
+
}
|
|
9859
|
+
if (maskColor === undefined) {
|
|
9860
|
+
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';
|
|
9861
|
+
}
|
|
9862
|
+
React.useEffect(function () {
|
|
9863
|
+
var canvas = canvasRef.current;
|
|
9864
|
+
if (!canvas) return;
|
|
9865
|
+
// Wait for valid dimensions from resize observer
|
|
9866
|
+
if (wrapperWidth <= 1 || wrapperHeight <= 1) return;
|
|
9867
|
+
var boundingWidth = wrapperWidth - padding * 2;
|
|
9868
|
+
var boundingHeight = wrapperHeight - padding * 2;
|
|
9869
|
+
// Start with bounding box dimensions
|
|
9870
|
+
var rectWidth = boundingWidth;
|
|
9871
|
+
var rectHeight = boundingWidth / aspectRatio;
|
|
9872
|
+
// If calculated height exceeds available height, constrain by height instead
|
|
9873
|
+
if (rectHeight > boundingHeight) {
|
|
9874
|
+
rectHeight = boundingHeight;
|
|
9875
|
+
rectWidth = boundingHeight * aspectRatio;
|
|
9876
|
+
}
|
|
9877
|
+
// Center the rectangle
|
|
9878
|
+
var rectX = padding + (boundingWidth - rectWidth) / 2;
|
|
9879
|
+
var rectY = padding + (boundingHeight - rectHeight) / 2;
|
|
9880
|
+
setCanvasDimensions(canvas, wrapperWidth, wrapperHeight);
|
|
9881
|
+
var ctx = canvas.getContext('2d');
|
|
9882
|
+
if (!ctx) return;
|
|
9883
|
+
// Fill with mask color
|
|
9884
|
+
ctx.fillStyle = maskColor;
|
|
9885
|
+
ctx.clearRect(0, 0, wrapperWidth, wrapperHeight);
|
|
9886
|
+
ctx.fillRect(0, 0, wrapperWidth, wrapperHeight);
|
|
9887
|
+
// Create the cutout
|
|
9888
|
+
ctx.beginPath();
|
|
9889
|
+
ctx.roundRect(rectX, rectY, rectWidth, rectHeight, borderRadius);
|
|
9890
|
+
ctx.fillStyle = 'rgba(0,0,0,1)';
|
|
9891
|
+
ctx.globalCompositeOperation = 'destination-out';
|
|
9892
|
+
ctx.fill();
|
|
9893
|
+
ctx.globalCompositeOperation = 'source-over';
|
|
9894
|
+
// Draw corner brackets
|
|
9895
|
+
var color = isSuccess ? successColor : cornerColor;
|
|
9896
|
+
ctx.strokeStyle = color;
|
|
9897
|
+
ctx.lineWidth = cornerWidth;
|
|
9898
|
+
ctx.lineCap = 'round';
|
|
9899
|
+
var effectiveCornerLength = Math.min(cornerLength, rectWidth / 3, rectHeight / 3);
|
|
9900
|
+
// Top-left corner
|
|
9901
|
+
ctx.beginPath();
|
|
9902
|
+
ctx.moveTo(rectX + effectiveCornerLength, rectY);
|
|
9903
|
+
ctx.lineTo(rectX + borderRadius, rectY);
|
|
9904
|
+
ctx.arcTo(rectX, rectY, rectX, rectY + borderRadius, borderRadius);
|
|
9905
|
+
ctx.lineTo(rectX, rectY + effectiveCornerLength);
|
|
9906
|
+
ctx.stroke();
|
|
9907
|
+
// Top-right corner
|
|
9908
|
+
ctx.beginPath();
|
|
9909
|
+
ctx.moveTo(rectX + rectWidth - effectiveCornerLength, rectY);
|
|
9910
|
+
ctx.lineTo(rectX + rectWidth - borderRadius, rectY);
|
|
9911
|
+
ctx.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + borderRadius, borderRadius);
|
|
9912
|
+
ctx.lineTo(rectX + rectWidth, rectY + effectiveCornerLength);
|
|
9913
|
+
ctx.stroke();
|
|
9914
|
+
// Bottom-left corner
|
|
9915
|
+
ctx.beginPath();
|
|
9916
|
+
ctx.moveTo(rectX, rectY + rectHeight - effectiveCornerLength);
|
|
9917
|
+
ctx.lineTo(rectX, rectY + rectHeight - borderRadius);
|
|
9918
|
+
ctx.arcTo(rectX, rectY + rectHeight, rectX + borderRadius, rectY + rectHeight, borderRadius);
|
|
9919
|
+
ctx.lineTo(rectX + effectiveCornerLength, rectY + rectHeight);
|
|
9920
|
+
ctx.stroke();
|
|
9921
|
+
// Bottom-right corner
|
|
9922
|
+
ctx.beginPath();
|
|
9923
|
+
ctx.moveTo(rectX + rectWidth, rectY + rectHeight - effectiveCornerLength);
|
|
9924
|
+
ctx.lineTo(rectX + rectWidth, rectY + rectHeight - borderRadius);
|
|
9925
|
+
ctx.arcTo(rectX + rectWidth, rectY + rectHeight, rectX + rectWidth - borderRadius, rectY + rectHeight, borderRadius);
|
|
9926
|
+
ctx.lineTo(rectX + rectWidth - effectiveCornerLength, rectY + rectHeight);
|
|
9927
|
+
ctx.stroke();
|
|
9928
|
+
return function () {
|
|
9929
|
+
resetCanvasDimensions(canvas);
|
|
9930
|
+
};
|
|
9931
|
+
}, [aspectRatio, borderRadius, cornerColor, cornerLength, cornerWidth, isSuccess, maskColor, padding, successColor, wrapperHeight, wrapperWidth]);
|
|
9932
|
+
return /*#__PURE__*/React__namespace.default.createElement(Wrapper, {
|
|
9933
|
+
ref: wrapperRef,
|
|
9934
|
+
className: classNames.wrapper
|
|
9935
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Canvas$1, {
|
|
9936
|
+
ref: canvasRef,
|
|
9937
|
+
className: classNames.canvas
|
|
9938
|
+
}), /*#__PURE__*/React__namespace.default.createElement(TextOverlay, null, /*#__PURE__*/React__namespace.default.createElement(HeaderText, {
|
|
9939
|
+
className: classNames.header
|
|
9940
|
+
}, headerText), /*#__PURE__*/React__namespace.default.createElement(InstructionText, {
|
|
9941
|
+
className: classNames.instruction
|
|
9942
|
+
}, instructionText)));
|
|
9943
|
+
}
|
|
9944
|
+
var Wrapper = styled__default.default.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"])));
|
|
9945
|
+
var Canvas$1 = styled__default.default.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"])));
|
|
9946
|
+
var TextOverlay = styled__default.default.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"])));
|
|
9947
|
+
var HeaderText = styled__default.default.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"])));
|
|
9948
|
+
var InstructionText = styled__default.default.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"])));
|
|
9949
|
+
var templateObject_1$y, templateObject_2$v, templateObject_3$n, templateObject_4$h, templateObject_5$c;
|
|
9950
|
+
|
|
9951
|
+
function BarcodeSuccessOverlay(_a) {
|
|
9952
|
+
var _b = _a.headerText,
|
|
9953
|
+
headerText = _b === void 0 ? 'Scan Successful!' : _b,
|
|
9954
|
+
_c = _a.processingText,
|
|
9955
|
+
processingText = _c === void 0 ? 'Processing...' : _c,
|
|
9956
|
+
_d = _a.successColor,
|
|
9957
|
+
successColor = _d === void 0 ? '#22c55e' : _d;
|
|
9958
|
+
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(BarcodeGuideOverlay, {
|
|
9959
|
+
headerText: headerText,
|
|
9960
|
+
instructionText: processingText,
|
|
9961
|
+
isSuccess: true,
|
|
9962
|
+
successColor: successColor
|
|
9963
|
+
}), /*#__PURE__*/React__namespace.default.createElement(CheckmarkWrapper, null, /*#__PURE__*/React__namespace.default.createElement(CheckmarkCircle, {
|
|
9964
|
+
"$color": successColor
|
|
9965
|
+
}, /*#__PURE__*/React__namespace.default.createElement(CheckmarkIcon, {
|
|
9966
|
+
viewBox: "0 0 24 24",
|
|
9967
|
+
fill: "none"
|
|
9968
|
+
}, /*#__PURE__*/React__namespace.default.createElement(CheckmarkPath, {
|
|
9969
|
+
d: "M5 13l4 4L19 7",
|
|
9970
|
+
stroke: "white",
|
|
9971
|
+
strokeWidth: "3",
|
|
9972
|
+
strokeLinecap: "round",
|
|
9973
|
+
strokeLinejoin: "round"
|
|
9974
|
+
})))));
|
|
9975
|
+
}
|
|
9976
|
+
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"])));
|
|
9977
|
+
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"])));
|
|
9978
|
+
var CheckmarkWrapper = styled__default.default.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"])));
|
|
9979
|
+
var CheckmarkCircle = styled__default.default.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) {
|
|
9980
|
+
return props.$color;
|
|
9981
|
+
}, scaleIn);
|
|
9982
|
+
var CheckmarkIcon = styled__default.default.svg(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n width: 48px;\n height: 48px;\n"], ["\n width: 48px;\n height: 48px;\n"])));
|
|
9983
|
+
var CheckmarkPath = styled__default.default.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);
|
|
9984
|
+
var templateObject_1$x, templateObject_2$u, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$6;
|
|
9778
9985
|
|
|
9779
9986
|
function IdCaptureGuides(_a) {
|
|
9780
9987
|
var _b = _a.guideType,
|
|
@@ -9796,7 +10003,15 @@ function IdCaptureGuides(_a) {
|
|
|
9796
10003
|
_k = _a.colors,
|
|
9797
10004
|
colors = _k === void 0 ? {} : _k,
|
|
9798
10005
|
_l = _a.verbiage,
|
|
9799
|
-
rawVerbiage = _l === void 0 ? {} : _l
|
|
10006
|
+
rawVerbiage = _l === void 0 ? {} : _l,
|
|
10007
|
+
_m = _a.isRequestingBetterBarcode,
|
|
10008
|
+
isRequestingBetterBarcode = _m === void 0 ? false : _m,
|
|
10009
|
+
_o = _a.isBarcodeSuccess,
|
|
10010
|
+
isBarcodeSuccess = _o === void 0 ? false : _o,
|
|
10011
|
+
_p = _a.barcodeHeaderText,
|
|
10012
|
+
barcodeHeaderText = _p === void 0 ? 'SCAN THE BARCODE' : _p,
|
|
10013
|
+
_q = _a.barcodeInstructionText,
|
|
10014
|
+
barcodeInstructionText = _q === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _q;
|
|
9800
10015
|
var state = useIdCaptureStore();
|
|
9801
10016
|
var isRearFacing = useCameraStore(function (state) {
|
|
9802
10017
|
return state.isRearFacing;
|
|
@@ -9806,6 +10021,16 @@ function IdCaptureGuides(_a) {
|
|
|
9806
10021
|
capturingText: 'Capturing...',
|
|
9807
10022
|
captureFailedText: 'Capture failed!'
|
|
9808
10023
|
});
|
|
10024
|
+
// Render barcode guide overlays when in barcode recapture state
|
|
10025
|
+
if (isRequestingBetterBarcode) {
|
|
10026
|
+
if (isBarcodeSuccess) {
|
|
10027
|
+
return /*#__PURE__*/React__namespace.default.createElement(BarcodeSuccessOverlay, null);
|
|
10028
|
+
}
|
|
10029
|
+
return /*#__PURE__*/React__namespace.default.createElement(BarcodeGuideOverlay, {
|
|
10030
|
+
headerText: barcodeHeaderText,
|
|
10031
|
+
instructionText: barcodeInstructionText
|
|
10032
|
+
});
|
|
10033
|
+
}
|
|
9809
10034
|
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, guideType === 'overlay' && (/*#__PURE__*/React__namespace.default.createElement(IdCaptureGuideOverlay, {
|
|
9810
10035
|
images: images,
|
|
9811
10036
|
classNames: classNames,
|
|
@@ -11525,6 +11750,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11525
11750
|
setRequiredDocumentType = _18.setRequiredDocumentType,
|
|
11526
11751
|
modelError = _18.modelError,
|
|
11527
11752
|
resetBestFrame = _18.resetBestFrame,
|
|
11753
|
+
resetBestBarcode = _18.resetBestBarcode,
|
|
11528
11754
|
documentDetectionBoundaries = _18.documentDetectionBoundaries,
|
|
11529
11755
|
setDocumentDetectionBoundaries = _18.setDocumentDetectionBoundaries,
|
|
11530
11756
|
getBestBarcode = _18.getBestBarcode,
|
|
@@ -11798,44 +12024,63 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11798
12024
|
initialCaptureBarcodeImage: initialBarcodeImage
|
|
11799
12025
|
}
|
|
11800
12026
|
});
|
|
11801
|
-
|
|
12027
|
+
// Start recapture phase immediately so barcode analysis runs with relaxed conditions
|
|
12028
|
+
// (don't require document in bounds since user is zooming in)
|
|
12029
|
+
startBarcodeRecapturePhase();
|
|
12030
|
+
}, [startBarcodeRecapturePhase, state.captureState, (_d = state.capturedDocuments.idBarcodeImage) === null || _d === void 0 ? void 0 : _d.imageData, state.initialBarcodeScore, state.initialCaptureBarcodeImage]);
|
|
12031
|
+
// Reset best barcode after 1 second delay to ignore early frames before user has time to move closer
|
|
12032
|
+
React.useEffect(function () {
|
|
12033
|
+
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
12034
|
+
var t = setTimeout(function () {
|
|
12035
|
+
log('[IdCaptureWizard] Resetting best barcode after 1s delay in move-closer window');
|
|
12036
|
+
resetBestBarcode();
|
|
12037
|
+
}, 1000);
|
|
12038
|
+
return function () {
|
|
12039
|
+
return clearTimeout(t);
|
|
12040
|
+
};
|
|
12041
|
+
}, [resetBestBarcode, state.captureState]);
|
|
11802
12042
|
// Handle barcode recapture timeout
|
|
11803
12043
|
React.useEffect(function () {
|
|
11804
12044
|
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
11805
12045
|
// Continue detection to try to get a better barcode
|
|
11806
12046
|
setTimeout(start, 100);
|
|
11807
12047
|
var t = setTimeout(function () {
|
|
11808
|
-
|
|
12048
|
+
var _a, _b;
|
|
12049
|
+
// Move-closer window expired before growth requirement was met
|
|
11809
12050
|
if (recapturePhaseStartedRef.current) return;
|
|
11810
|
-
|
|
11811
|
-
var
|
|
12051
|
+
// Use recapture tracking since we start tracking with relaxed conditions immediately
|
|
12052
|
+
var recaptureBarcode = getRecaptureBestBarcode();
|
|
12053
|
+
var recaptureScore = (_a = recaptureBarcode === null || recaptureBarcode === void 0 ? void 0 : recaptureBarcode.score) !== null && _a !== void 0 ? _a : null;
|
|
12054
|
+
var improved = !!recaptureBarcode && recaptureBarcode.score > state.initialBarcodeScore;
|
|
11812
12055
|
if (improved) {
|
|
11813
|
-
log("[IdCaptureWizard] Barcode recapture move-closer window timed out. Found better barcode anyway: ".concat(
|
|
11814
|
-
// Persist the "after" image for debug visual comparison, even if the
|
|
11815
|
-
// model-provider recapture tracker was never started.
|
|
11816
|
-
dispatchIdCaptureAction({
|
|
11817
|
-
type: 'recaptureBarcodeImageCaptured',
|
|
11818
|
-
payload: {
|
|
11819
|
-
recaptureBarcodeImage: bestBarcode.canvas.toDataURL('image/jpeg', 0.95)
|
|
11820
|
-
}
|
|
11821
|
-
});
|
|
12056
|
+
log("[IdCaptureWizard] Barcode recapture move-closer window timed out. Found better barcode anyway: ".concat(recaptureBarcode.score.toFixed(3), " (was ").concat(state.initialBarcodeScore.toFixed(3), ")"));
|
|
11822
12057
|
dispatchIdCaptureAction({
|
|
11823
12058
|
type: 'barcodeCaptured',
|
|
11824
12059
|
payload: {
|
|
11825
|
-
imageUrl:
|
|
11826
|
-
barcodeReadabilityScore:
|
|
12060
|
+
imageUrl: recaptureBarcode.canvas.toDataURL('image/jpeg', 0.95),
|
|
12061
|
+
barcodeReadabilityScore: recaptureBarcode.score
|
|
11827
12062
|
}
|
|
11828
12063
|
});
|
|
11829
12064
|
} else {
|
|
11830
|
-
log("[IdCaptureWizard] Barcode recapture move-closer window timed out. No better barcode found.
|
|
12065
|
+
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)));
|
|
11831
12066
|
}
|
|
11832
|
-
// Record
|
|
12067
|
+
// Record recapture attempt data for diagnostics - always store the best score
|
|
12068
|
+
// from the move-closer window so debug info shows what was actually captured
|
|
11833
12069
|
dispatchIdCaptureAction({
|
|
11834
12070
|
type: 'barcodeRecaptureScoreUpdated',
|
|
11835
12071
|
payload: {
|
|
11836
|
-
recaptureBarcodeScore:
|
|
12072
|
+
recaptureBarcodeScore: recaptureScore
|
|
11837
12073
|
}
|
|
11838
12074
|
});
|
|
12075
|
+
// Persist the barcode image from move-closer window for debug visual comparison
|
|
12076
|
+
if (recaptureBarcode) {
|
|
12077
|
+
dispatchIdCaptureAction({
|
|
12078
|
+
type: 'recaptureBarcodeImageCaptured',
|
|
12079
|
+
payload: {
|
|
12080
|
+
recaptureBarcodeImage: recaptureBarcode.canvas.toDataURL('image/jpeg', 0.95)
|
|
12081
|
+
}
|
|
12082
|
+
});
|
|
12083
|
+
}
|
|
11839
12084
|
dispatchIdCaptureAction({
|
|
11840
12085
|
type: 'barcodeRecaptureCompleted'
|
|
11841
12086
|
});
|
|
@@ -11843,7 +12088,7 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11843
12088
|
return function () {
|
|
11844
12089
|
return clearTimeout(t);
|
|
11845
12090
|
};
|
|
11846
|
-
}, [barcodeRecaptureMoveCloserTimeoutMs,
|
|
12091
|
+
}, [barcodeRecaptureMoveCloserTimeoutMs, getRecaptureBestBarcode, start, state.captureState, state.initialBarcodeScore]);
|
|
11847
12092
|
React.useEffect(function () {
|
|
11848
12093
|
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
11849
12094
|
if (!barcodeRecaptureGrowthSatisfied) return;
|
|
@@ -11854,11 +12099,14 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11854
12099
|
var bestBarcode = getBestBarcode();
|
|
11855
12100
|
var recaptureScore = (_a = recaptureBarcode === null || recaptureBarcode === void 0 ? void 0 : recaptureBarcode.score) !== null && _a !== void 0 ? _a : null;
|
|
11856
12101
|
var improved = !!bestBarcode && bestBarcode.score > state.initialBarcodeScore;
|
|
12102
|
+
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));
|
|
11857
12103
|
// Store the recapture score for diagnostic purposes
|
|
12104
|
+
// Always use actual recapture score (even if worse than initial) so debug info
|
|
12105
|
+
// shows what was actually captured during each sequence
|
|
11858
12106
|
dispatchIdCaptureAction({
|
|
11859
12107
|
type: 'barcodeRecaptureScoreUpdated',
|
|
11860
12108
|
payload: {
|
|
11861
|
-
recaptureBarcodeScore:
|
|
12109
|
+
recaptureBarcodeScore: recaptureScore
|
|
11862
12110
|
}
|
|
11863
12111
|
});
|
|
11864
12112
|
// Store the recapture barcode image if we found one
|
|
@@ -12004,7 +12252,8 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
12004
12252
|
classNames: classNames.guides,
|
|
12005
12253
|
colors: colors,
|
|
12006
12254
|
verbiage: idCaptureVerbiage,
|
|
12007
|
-
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments
|
|
12255
|
+
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments,
|
|
12256
|
+
isRequestingBetterBarcode: state.captureState === 'requestingBetterBarcode'
|
|
12008
12257
|
}), 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__namespace.default.createElement(IdCaptureImagePreview, {
|
|
12009
12258
|
classNames: (_j = classNames.capture) === null || _j === void 0 ? void 0 : _j.imagePreview,
|
|
12010
12259
|
text: (_k = idCaptureVerbiages === null || idCaptureVerbiages === void 0 ? void 0 : idCaptureVerbiages.idCardFront) === null || _k === void 0 ? void 0 : _k.processingIdCardText,
|