idmission-web-sdk 2.3.171-feature-barcode-recapture-a8375e9 → 2.3.171-feature-barcode-recapture-d495693
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/id_capture/BarcodeGuideOverlay.d.ts +23 -0
- package/dist/components/id_capture/BarcodeGuideOverlay.d.ts.map +1 -0
- package/dist/components/id_capture/BarcodeSuccessOverlay.d.ts +8 -0
- package/dist/components/id_capture/BarcodeSuccessOverlay.d.ts.map +1 -0
- package/dist/components/id_capture/IdCaptureGuides.d.ts +5 -1
- package/dist/components/id_capture/IdCaptureGuides.d.ts.map +1 -1
- package/dist/components/id_capture/IdCaptureWizard.d.ts.map +1 -1
- package/dist/sdk2.cjs.development.js +277 -95
- package/dist/sdk2.cjs.development.js.map +1 -1
- package/dist/sdk2.cjs.production.js +1 -1
- package/dist/sdk2.cjs.production.js.map +1 -1
- package/dist/sdk2.esm.js +277 -95
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +277 -95
- package/dist/sdk2.umd.development.js.map +1 -1
- package/dist/sdk2.umd.production.js +1 -1
- package/dist/sdk2.umd.production.js.map +1 -1
- package/package.json +1 -1
|
@@ -452,16 +452,16 @@
|
|
|
452
452
|
className: "ladda-label"
|
|
453
453
|
}, children));
|
|
454
454
|
};
|
|
455
|
-
var StyledButton = styled.button(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
|
|
455
|
+
var StyledButton = styled.button(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
|
|
456
456
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
457
457
|
return ((_a = props.theme.buttons) === null || _a === void 0 ? void 0 : _a.style) === 'bootstrap' && "\n border-radius: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n text-transform: none;\n -webkit-appearance: button;\n \n &:not(:disabled),\n &[type='button']:not(:disabled),\n &[type='reset']:not(:disabled),\n &[type='submit']:not(:disabled) {\n cursor: pointer;\n }\n \n &:focus:not(:focus-visible) {\n outline: 0;\n }\n \n --bs-btn-padding-x: 0.75rem;\n --bs-btn-padding-y: 0.375rem;\n --bs-btn-font-family: ;\n --bs-btn-font-size: 1rem;\n --bs-btn-font-weight: 400;\n --bs-btn-line-height: 1.5;\n --bs-btn-color: var(--bs-body-color);\n --bs-btn-bg: transparent;\n --bs-btn-border-width: var(--bs-border-width);\n --bs-btn-border-color: transparent;\n --bs-btn-border-radius: var(--bs-border-radius);\n --bs-btn-hover-border-color: transparent;\n --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),\n 0 1px 1px rgba(0, 0, 0, 0.075);\n --bs-btn-disabled-opacity: 0.65;\n --bs-btn-focus-box-shadow: 0 0 0 0.25rem\n rgba(var(--bs-btn-focus-shadow-rgb), 0.5);\n display: inline-block;\n padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);\n font-family: var(--bs-btn-font-family);\n font-size: var(--bs-btn-font-size);\n font-weight: var(--bs-btn-font-weight);\n line-height: var(--bs-btn-line-height);\n color: var(--bs-btn-color);\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);\n border-radius: var(--bs-btn-border-radius);\n background-color: var(--bs-btn-bg);\n //transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n // border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n \n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n \n &:hover {\n filter: brightness(1.15);\n }\n \n &:focus-visible {\n color: var(--bs-btn-hover-color);\n background-color: var(--bs-btn-hover-bg);\n border-color: var(--bs-btn-hover-border-color);\n outline: 0;\n box-shadow: var(--bs-btn-focus-box-shadow);\n }\n \n &:disabled,\n &.disabled,\n fieldset:disabled & {\n color: var(--bs-btn-disabled-color);\n pointer-events: none;\n background-color: var(--bs-btn-disabled-bg);\n border-color: var(--bs-btn-disabled-border-color);\n opacity: var(--bs-btn-disabled-opacity);\n }\n \n --bs-btn-color: ".concat((_f = (_b = props.$textColor) !== null && _b !== void 0 ? _b : (_e = (_c = props.theme.buttons) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'primary']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : '#fff', ";\n --bs-btn-bg: ").concat((_l = (_g = props.$backgroundColor) !== null && _g !== void 0 ? _g : (_k = (_h = props.theme.buttons) === null || _h === void 0 ? void 0 : _h[(_j = props.$variant) !== null && _j !== void 0 ? _j : 'primary']) === null || _k === void 0 ? void 0 : _k.backgroundColor) !== null && _l !== void 0 ? _l : '#0d6efd', ";\n --bs-btn-border-color: var(--bs-btn-bg);\n --bs-btn-focus-shadow-rgb: 49, 132, 253;\n --bs-btn-active-color: #fff;\n --bs-btn-active-bg: #0a58ca;\n --bs-btn-active-border-color: #0a53be;\n --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --bs-btn-disabled-color: ").concat((_q = (_m = props.$disabledTextColor) !== null && _m !== void 0 ? _m : (_p = (_o = props.theme.buttons) === null || _o === void 0 ? void 0 : _o.loading) === null || _p === void 0 ? void 0 : _p.textColor) !== null && _q !== void 0 ? _q : '#fff', ";\n --bs-btn-disabled-bg: ").concat((_u = (_r = props.$disabledBackgroundColor) !== null && _r !== void 0 ? _r : (_t = (_s = props.theme.buttons) === null || _s === void 0 ? void 0 : _s.loading) === null || _t === void 0 ? void 0 : _t.backgroundColor) !== null && _u !== void 0 ? _u : 'gray', ";\n --bs-btn-disabled-border-color: ").concat((_v = props.$disabledBackgroundColor) !== null && _v !== void 0 ? _v : '#0d6efd', ";\n \n --bs-btn-padding-y: 14px;\n --bs-btn-padding-x: 1rem;\n --bs-btn-font-size: 18px;\n --bs-btn-border-radius: 4px;\n ");
|
|
458
458
|
});
|
|
459
|
-
var templateObject_1$
|
|
459
|
+
var templateObject_1$T;
|
|
460
460
|
|
|
461
|
-
var ButtonsRow$2 = styled.div(templateObject_1$
|
|
462
|
-
var templateObject_1$
|
|
461
|
+
var ButtonsRow$2 = styled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n text-align: left;\n"], ["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n text-align: left;\n"])));
|
|
462
|
+
var templateObject_1$S;
|
|
463
463
|
|
|
464
|
-
var GuidanceMessageContainerDiv = styled.div(templateObject_1$
|
|
464
|
+
var GuidanceMessageContainerDiv = styled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: absolute;\n top: calc(", ");\n ", "\n font-weight: bold;\n width: 100%;\n display: flex;\n padding: 0 10%;\n box-sizing: border-box;\n"], ["\n position: absolute;\n top: calc(", ");\n ", "\n font-weight: bold;\n width: 100%;\n display: flex;\n padding: 0 10%;\n box-sizing: border-box;\n"])), function (_a) {
|
|
465
465
|
var $top = _a.$top;
|
|
466
466
|
return $top !== null && $top !== void 0 ? $top : '10%';
|
|
467
467
|
}, function (_a) {
|
|
@@ -474,36 +474,36 @@
|
|
|
474
474
|
if (!portalLocation) return element;
|
|
475
475
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
476
476
|
};
|
|
477
|
-
var GuidanceMessage = styled.div(templateObject_2$
|
|
477
|
+
var GuidanceMessage = styled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n border-radius: 8px;\n z-index: 10001;\n padding: 16px 24px;\n font-size: 18px;\n font-weight: bold;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n border-radius: 8px;\n z-index: 10001;\n padding: 16px 24px;\n font-size: 18px;\n font-weight: bold;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])), function (props) {
|
|
478
478
|
var _a, _b, _c, _d, _e, _f;
|
|
479
479
|
return (_f = (_a = props.$background) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : 'white';
|
|
480
480
|
}, function (props) {
|
|
481
481
|
var _a, _b, _c, _d, _e, _f;
|
|
482
482
|
return (_f = (_a = props.$textColor) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : 'black';
|
|
483
483
|
});
|
|
484
|
-
var templateObject_1$
|
|
484
|
+
var templateObject_1$R, templateObject_2$M;
|
|
485
485
|
|
|
486
|
-
var wavesAnimation = styled.keyframes(templateObject_1$
|
|
487
|
-
var progressBarAnimation = styled.keyframes(templateObject_2$
|
|
488
|
-
var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$
|
|
489
|
-
var progressBorderAnimation = styled.keyframes(templateObject_4$
|
|
490
|
-
var templateObject_1$
|
|
486
|
+
var wavesAnimation = styled.keyframes(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n 0% {\n opacity: 0;\n transform: scale3d(1, 1, 1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale3d(2, 2, 1);\n opacity: 0;\n }\n"], ["\n 0% {\n opacity: 0;\n transform: scale3d(1, 1, 1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale3d(2, 2, 1);\n opacity: 0;\n }\n"])));
|
|
487
|
+
var progressBarAnimation = styled.keyframes(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n"], ["\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n"])));
|
|
488
|
+
var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
|
|
489
|
+
var progressBorderAnimation = styled.keyframes(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n to {\n stroke-dashoffset: 0;\n }\n"], ["\n to {\n stroke-dashoffset: 0;\n }\n"])));
|
|
490
|
+
var templateObject_1$Q, templateObject_2$L, templateObject_3$x, templateObject_4$r;
|
|
491
491
|
|
|
492
|
-
var OverlayContainer = styled.div(templateObject_1$
|
|
492
|
+
var OverlayContainer = styled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n background: ", ";\n ", "\n\n z-index: 10000;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n background: ", ";\n ", "\n\n z-index: 10000;\n"])), function (props) {
|
|
493
493
|
return props.theme.background ? "".concat(props.theme.background) : "white";
|
|
494
494
|
}, function (props) {
|
|
495
495
|
return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
|
|
496
496
|
});
|
|
497
|
-
var OverlayInner$2 = styled.div(templateObject_2$
|
|
497
|
+
var OverlayInner$2 = styled.div(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n width: 100%;\n height: 100%;\n ", "\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n width: 100%;\n height: 100%;\n ", "\n"])), function (props) {
|
|
498
498
|
var _a;
|
|
499
499
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
500
500
|
}, function (props) {
|
|
501
501
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
502
502
|
});
|
|
503
|
-
var OverlayImageContainer = styled.div(templateObject_3$
|
|
504
|
-
var OverlayImageRow = styled.div(templateObject_4$
|
|
505
|
-
var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$
|
|
506
|
-
var ButtonsColumn = styled.div(templateObject_6$
|
|
503
|
+
var OverlayImageContainer = styled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"], ["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"])));
|
|
504
|
+
var OverlayImageRow = styled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100% - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"], ["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100% - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"])));
|
|
505
|
+
var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n background: #f7f6fb;\n"], ["\n background: #f7f6fb;\n"])));
|
|
506
|
+
var ButtonsColumn = styled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"])));
|
|
507
507
|
var WideButton = styled(LoaderButton)(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n width: 100%;\n border-radius: 30px;\n"], ["\n width: 100%;\n border-radius: 30px;\n"])));
|
|
508
508
|
var WideBorderButton = styled(WideButton)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n border: 1px solid\n ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n background: ", ";\n border: 1px solid\n ", ";\n box-sizing: border-box;\n"])), function (props) {
|
|
509
509
|
var _a, _b;
|
|
@@ -542,7 +542,7 @@
|
|
|
542
542
|
var LoadingOverlayProgressContainer = styled.div(templateObject_20$2 || (templateObject_20$2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
|
|
543
543
|
var LoadingOverlayCustomLoadingGraphic = styled.img(templateObject_21$2 || (templateObject_21$2 = __makeTemplateObject(["\n transform-style: preserve-3d;\n"], ["\n transform-style: preserve-3d;\n"])));
|
|
544
544
|
var LoadingOverlayContinueButtonContainer = styled.div(templateObject_22$2 || (templateObject_22$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
545
|
-
var templateObject_1$
|
|
545
|
+
var templateObject_1$P, templateObject_2$K, templateObject_3$w, templateObject_4$q, templateObject_5$i, templateObject_6$b, templateObject_7$7, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$2, templateObject_21$2, templateObject_22$2;
|
|
546
546
|
|
|
547
547
|
function _extends() {
|
|
548
548
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
@@ -9180,8 +9180,8 @@
|
|
|
9180
9180
|
return [frameWidth, frameHeight];
|
|
9181
9181
|
}
|
|
9182
9182
|
|
|
9183
|
-
var InvisibleCanvasContainer = styled.div(templateObject_1$
|
|
9184
|
-
var InvisibleCanvas = styled.canvas(templateObject_2$
|
|
9183
|
+
var InvisibleCanvasContainer = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n user-select: none;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n user-select: none;\n"])));
|
|
9184
|
+
var InvisibleCanvas = styled.canvas(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
9185
9185
|
function drawToCanvas(canvas, frame, width, height) {
|
|
9186
9186
|
if (!canvas) return;
|
|
9187
9187
|
var ctx = canvas.getContext('2d');
|
|
@@ -9201,7 +9201,7 @@
|
|
|
9201
9201
|
var _a;
|
|
9202
9202
|
(_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
|
|
9203
9203
|
}
|
|
9204
|
-
var templateObject_1$
|
|
9204
|
+
var templateObject_1$O, templateObject_2$J;
|
|
9205
9205
|
|
|
9206
9206
|
function useFrameLoop(fn, options) {
|
|
9207
9207
|
if (options === void 0) {
|
|
@@ -13852,14 +13852,14 @@
|
|
|
13852
13852
|
className: classNames.message
|
|
13853
13853
|
}, messageText)));
|
|
13854
13854
|
}
|
|
13855
|
-
var StyledOverlayInner$4 = styled(OverlayInner$2)(templateObject_1$
|
|
13856
|
-
var StyledOverlayHeading = styled.h3(templateObject_2$
|
|
13855
|
+
var StyledOverlayInner$4 = styled(OverlayInner$2)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
13856
|
+
var StyledOverlayHeading = styled.h3(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
13857
13857
|
function useCameraStore(selector) {
|
|
13858
13858
|
var store = React.useContext(CameraStoreContext);
|
|
13859
13859
|
if (!store) throw new Error('useCameraStore cannot be used without Provider');
|
|
13860
13860
|
return useStore(store, selector);
|
|
13861
13861
|
}
|
|
13862
|
-
var templateObject_1$
|
|
13862
|
+
var templateObject_1$N, templateObject_2$I;
|
|
13863
13863
|
|
|
13864
13864
|
var DocumentDetectionModelContext = /*#__PURE__*/React.createContext({
|
|
13865
13865
|
startDocumentDetection: function startDocumentDetection() {
|
|
@@ -16137,12 +16137,12 @@
|
|
|
16137
16137
|
if (!portalLocation) return element;
|
|
16138
16138
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
16139
16139
|
}
|
|
16140
|
-
var DebugStatsPaneDiv = styled.span(templateObject_1$
|
|
16141
|
-
var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$
|
|
16140
|
+
var DebugStatsPaneDiv = styled.span(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n margin-right: 20px;\n padding: 8px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10002;\n pointer-events: none;\n"], ["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n margin-right: 20px;\n padding: 8px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10002;\n pointer-events: none;\n"])));
|
|
16141
|
+
var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n position: absolute;\n z-index: 1001;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n pointer-events: none;\n ", "\n transform-style: preserve-3d;\n"], ["\n position: absolute;\n z-index: 1001;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n pointer-events: none;\n ", "\n transform-style: preserve-3d;\n"])), function (_a) {
|
|
16142
16142
|
var $flipX = _a.$flipX;
|
|
16143
16143
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
16144
16144
|
});
|
|
16145
|
-
var ObjectDetectionDebugBox = styled.div(templateObject_3$
|
|
16145
|
+
var ObjectDetectionDebugBox = styled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n transform-style: preserve-3d;\n"], ["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n transform-style: preserve-3d;\n"])), function (_a) {
|
|
16146
16146
|
var $color = _a.$color;
|
|
16147
16147
|
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
16148
16148
|
}, function (_a) {
|
|
@@ -16152,7 +16152,7 @@
|
|
|
16152
16152
|
var $flipX = _a.$flipX;
|
|
16153
16153
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
16154
16154
|
});
|
|
16155
|
-
var FaceDetectionKeypointMarker = styled.div(templateObject_4$
|
|
16155
|
+
var FaceDetectionKeypointMarker = styled.div(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n transform-style: preserve-3d;\n"], ["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n transform-style: preserve-3d;\n"])), function (_a) {
|
|
16156
16156
|
var $color = _a.$color;
|
|
16157
16157
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
16158
16158
|
}, function (_a) {
|
|
@@ -16350,7 +16350,7 @@
|
|
|
16350
16350
|
}
|
|
16351
16351
|
});
|
|
16352
16352
|
}
|
|
16353
|
-
var templateObject_1$
|
|
16353
|
+
var templateObject_1$M, templateObject_2$H, templateObject_3$v, templateObject_4$p;
|
|
16354
16354
|
|
|
16355
16355
|
function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
16356
16356
|
var _b = _a.classNames,
|
|
@@ -16383,18 +16383,18 @@
|
|
|
16383
16383
|
}
|
|
16384
16384
|
}, verbiage.buttonText))));
|
|
16385
16385
|
}
|
|
16386
|
-
var Container$7 = styled.div(templateObject_1$
|
|
16386
|
+
var Container$7 = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"], ["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"])), function (props) {
|
|
16387
16387
|
var _a, _b, _c;
|
|
16388
16388
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.backgroundColor) !== null && _c !== void 0 ? _c : '#eed202';
|
|
16389
16389
|
}, function (props) {
|
|
16390
16390
|
var _a, _b, _c;
|
|
16391
16391
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.textColor) !== null && _c !== void 0 ? _c : 'black';
|
|
16392
16392
|
});
|
|
16393
|
-
var InnerContainer = styled.div(templateObject_2$
|
|
16394
|
-
var Message = styled.span(templateObject_3$
|
|
16395
|
-
var ButtonContainer = styled.div(templateObject_4$
|
|
16396
|
-
var Button$1 = styled(LoaderButton)(templateObject_5$
|
|
16397
|
-
var templateObject_1$
|
|
16393
|
+
var InnerContainer = styled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"])));
|
|
16394
|
+
var Message = styled.span(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: block;\n margin: auto 12px auto 0;\n"], ["\n display: block;\n margin: auto 12px auto 0;\n"])));
|
|
16395
|
+
var ButtonContainer = styled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n display: flex;\n margin-left: auto;\n"], ["\n display: flex;\n margin-left: auto;\n"])));
|
|
16396
|
+
var Button$1 = styled(LoaderButton)(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n white-space: nowrap;\n margin: auto;\n"], ["\n white-space: nowrap;\n margin: auto;\n"])));
|
|
16397
|
+
var templateObject_1$L, templateObject_2$G, templateObject_3$u, templateObject_4$o, templateObject_5$h;
|
|
16398
16398
|
|
|
16399
16399
|
// This is a simplified version of https://github.com/ZeeCoder/use-resize-observer.
|
|
16400
16400
|
// We have removed all options and made it compliant with React Compiler/React 19.
|
|
@@ -16741,13 +16741,13 @@
|
|
|
16741
16741
|
finished: true
|
|
16742
16742
|
}, verbiage.retryBtnText)));
|
|
16743
16743
|
};
|
|
16744
|
-
var StyledOverlayInner$3 = styled(OverlayInner$2)(templateObject_1$
|
|
16745
|
-
var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$
|
|
16746
|
-
var Description$4 = styled.p(templateObject_3$
|
|
16747
|
-
var RetryButton$1 = styled(LoaderButton)(templateObject_4$
|
|
16748
|
-
var templateObject_1$
|
|
16744
|
+
var StyledOverlayInner$3 = styled(OverlayInner$2)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
|
|
16745
|
+
var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
16746
|
+
var Description$4 = styled.p(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
16747
|
+
var RetryButton$1 = styled(LoaderButton)(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
16748
|
+
var templateObject_1$K, templateObject_2$F, templateObject_3$t, templateObject_4$n;
|
|
16749
16749
|
|
|
16750
|
-
var ExitCaptureStyledButton = styled.button(templateObject_1$
|
|
16750
|
+
var ExitCaptureStyledButton = styled.button(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n position: absolute;\n top: 12px;\n right: 12px;\n font-size: 20px;\n width: 32px;\n height: 32px;\n font-family: monospace;\n z-index: 10002;\n border: none;\n border-radius: 4px;\n background: var(--idm-color-secondary-200);\n cursor: pointer;\n padding: 8px;\n box-sizing: border-box;\n display: flex;\n\n &:hover {\n background: #ddd;\n }\n\n & > svg {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n"], ["\n position: absolute;\n top: 12px;\n right: 12px;\n font-size: 20px;\n width: 32px;\n height: 32px;\n font-family: monospace;\n z-index: 10002;\n border: none;\n border-radius: 4px;\n background: var(--idm-color-secondary-200);\n cursor: pointer;\n padding: 8px;\n box-sizing: border-box;\n display: flex;\n\n &:hover {\n background: #ddd;\n }\n\n & > svg {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n"])));
|
|
16751
16751
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
16752
16752
|
var onClick = _a.onClick,
|
|
16753
16753
|
className = _a.className;
|
|
@@ -16791,7 +16791,7 @@
|
|
|
16791
16791
|
y2: "19.75"
|
|
16792
16792
|
}))));
|
|
16793
16793
|
};
|
|
16794
|
-
var templateObject_1$
|
|
16794
|
+
var templateObject_1$J;
|
|
16795
16795
|
|
|
16796
16796
|
function IdCaptureLoadingGraphic(props) {
|
|
16797
16797
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
@@ -17266,21 +17266,21 @@
|
|
|
17266
17266
|
fill: "white"
|
|
17267
17267
|
}))));
|
|
17268
17268
|
}
|
|
17269
|
-
var LoadingGraphicWrapper = styled.div(templateObject_1$
|
|
17270
|
-
var LoadingGraphicSvg = styled.svg(templateObject_2$
|
|
17269
|
+
var LoadingGraphicWrapper = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: flex;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n width: 100%;\n height: 100%;\n"])));
|
|
17270
|
+
var LoadingGraphicSvg = styled.svg(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n margin: auto;\n transform: scale(\n ", "\n );\n transform-style: preserve-3d;\n transition:\n transform 0.2s linear,\n border-width 0.2s linear;\n border: ", "px solid\n ", ";\n max-height: 80%;\n max-width: 80%;\n"], ["\n margin: auto;\n transform: scale(\n ", "\n );\n transform-style: preserve-3d;\n transition:\n transform 0.2s linear,\n border-width 0.2s linear;\n border: ", "px solid\n ", ";\n max-height: 80%;\n max-width: 80%;\n"])), function (props) {
|
|
17271
17271
|
return props.$frame > 1 ? 1 : props.$frame === 1 ? 1.25 : 0.75;
|
|
17272
17272
|
}, function (props) {
|
|
17273
17273
|
return props.$frame >= 5 ? 10 : 0;
|
|
17274
17274
|
}, function (props) {
|
|
17275
17275
|
return props.$borderColor;
|
|
17276
17276
|
});
|
|
17277
|
-
var LoadingGraphicCardGroup = styled.g(templateObject_3$
|
|
17277
|
+
var LoadingGraphicCardGroup = styled.g(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"], ["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"])), function (props) {
|
|
17278
17278
|
return props.$offScreen ? '-500px' : '0';
|
|
17279
17279
|
});
|
|
17280
|
-
var LoadingGraphicPhoneGroup = styled.g(templateObject_4$
|
|
17280
|
+
var LoadingGraphicPhoneGroup = styled.g(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"], ["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"])), function (props) {
|
|
17281
17281
|
return props.$offScreen ? '40px' : '0';
|
|
17282
17282
|
});
|
|
17283
|
-
var templateObject_1$
|
|
17283
|
+
var templateObject_1$I, templateObject_2$E, templateObject_3$s, templateObject_4$m;
|
|
17284
17284
|
|
|
17285
17285
|
function LoadingListItemIndicator(_a) {
|
|
17286
17286
|
var _b = _a.state,
|
|
@@ -17549,24 +17549,24 @@
|
|
|
17549
17549
|
}
|
|
17550
17550
|
}, ready ? verbiage.continueText : verbiage.pleaseWaitText))))));
|
|
17551
17551
|
};
|
|
17552
|
-
var OverlayInner$1 = styled(LoadingOverlayInner)(templateObject_1$
|
|
17552
|
+
var OverlayInner$1 = styled(LoadingOverlayInner)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n"], ["\n background: ", ";\n color: ", ";\n"])), function (props) {
|
|
17553
17553
|
var _a, _b, _c, _d;
|
|
17554
17554
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : '#ecedf3';
|
|
17555
17555
|
}, function (props) {
|
|
17556
17556
|
var _a, _b, _c, _d;
|
|
17557
17557
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.textColor) !== null && _d !== void 0 ? _d : 'black';
|
|
17558
17558
|
});
|
|
17559
|
-
var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_2$
|
|
17560
|
-
var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_3$
|
|
17561
|
-
var ContinuityCameraCheckbox$1 = styled.input(templateObject_4$
|
|
17562
|
-
var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$
|
|
17559
|
+
var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n position: absolute;\n bottom: 120px;\n width: 100%;\n display: flex;\n"], ["\n position: absolute;\n bottom: 120px;\n width: 100%;\n display: flex;\n"])));
|
|
17560
|
+
var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n align-items: center;\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n display: flex;\n gap: 8px;\n align-items: center;\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
|
|
17561
|
+
var ContinuityCameraCheckbox$1 = styled.input(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
17562
|
+
var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n color: ", ";\n ", "\n"], ["\n color: ", ";\n ", "\n"])), function (props) {
|
|
17563
17563
|
var _a, _b, _c, _d;
|
|
17564
17564
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
|
|
17565
17565
|
}, function (props) {
|
|
17566
17566
|
var _a, _b, _c, _d, _e, _f;
|
|
17567
17567
|
return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarFontSize) ? "font-size: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.progressBarFontSize, ";") : '';
|
|
17568
17568
|
});
|
|
17569
|
-
var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$
|
|
17569
|
+
var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n background: ", ";\n opacity: ", ";\n"], ["\n background: ", ";\n opacity: ", ";\n"])), function (props) {
|
|
17570
17570
|
var _a, _b, _c, _d;
|
|
17571
17571
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarBackgroundColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
|
|
17572
17572
|
}, function (props) {
|
|
@@ -17596,10 +17596,10 @@
|
|
|
17596
17596
|
var _a, _b, _c, _d;
|
|
17597
17597
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnDisabledBorder) !== null && _d !== void 0 ? _d : 'none';
|
|
17598
17598
|
});
|
|
17599
|
-
var templateObject_1$
|
|
17599
|
+
var templateObject_1$H, templateObject_2$D, templateObject_3$r, templateObject_4$l, templateObject_5$g, templateObject_6$a, templateObject_7$6, templateObject_8$5;
|
|
17600
17600
|
|
|
17601
|
-
var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$
|
|
17602
|
-
var ContinuityCameraCheckbox = styled.input(templateObject_2$
|
|
17601
|
+
var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
|
|
17602
|
+
var ContinuityCameraCheckbox = styled.input(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
17603
17603
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
17604
17604
|
var _b, _c, _d, _e;
|
|
17605
17605
|
var onDismissed = _a.onDismissed,
|
|
@@ -17720,7 +17720,7 @@
|
|
|
17720
17720
|
}
|
|
17721
17721
|
}, ready ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
17722
17722
|
};
|
|
17723
|
-
var templateObject_1$
|
|
17723
|
+
var templateObject_1$G, templateObject_2$C;
|
|
17724
17724
|
|
|
17725
17725
|
var components$1 = {
|
|
17726
17726
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -17778,9 +17778,9 @@
|
|
|
17778
17778
|
});
|
|
17779
17779
|
};
|
|
17780
17780
|
|
|
17781
|
-
var Card = styled.div(templateObject_1$
|
|
17782
|
-
var FlexCard = styled(Card)(templateObject_2$
|
|
17783
|
-
var templateObject_1$
|
|
17781
|
+
var Card = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: min(500px, 100% - 48px);\n max-height: 100%;\n overflow: auto;\n box-sizing: border-box;\n"], ["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: min(500px, 100% - 48px);\n max-height: 100%;\n overflow: auto;\n box-sizing: border-box;\n"])));
|
|
17782
|
+
var FlexCard = styled(Card)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
17783
|
+
var templateObject_1$F, templateObject_2$B;
|
|
17784
17784
|
|
|
17785
17785
|
var imageDisplayOrder = ['idCardFront', 'idCardBack', 'idBarcodeImage', 'passport', 'singlePage', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
|
|
17786
17786
|
var downloadImage = function downloadImage(dataUrl, filename) {
|
|
@@ -17915,12 +17915,12 @@
|
|
|
17915
17915
|
finished: true
|
|
17916
17916
|
}, verbiage.retryText)))));
|
|
17917
17917
|
};
|
|
17918
|
-
var Heading$a = styled.h1(templateObject_1$
|
|
17919
|
-
var ImagesContainer = styled(OverlayImageContainer)(templateObject_2$
|
|
17920
|
-
var ImageRow = styled(OverlayImageRow)(templateObject_3$
|
|
17921
|
-
var ImageCol$1 = styled.div(templateObject_4$
|
|
17922
|
-
var StyledImage = styled(CapturedDocumentImg)(templateObject_5$
|
|
17923
|
-
var DebugInfoContainer = styled.div(templateObject_6$
|
|
17918
|
+
var Heading$a = styled.h1(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n font-size: 1.5rem;\n margin-top: 0;\n margin-bottom: 1.5rem;\n"], ["\n font-size: 1.5rem;\n margin-top: 0;\n margin-bottom: 1.5rem;\n"])));
|
|
17919
|
+
var ImagesContainer = styled(OverlayImageContainer)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n flex-grow: 1;\n overflow-y: auto;\n padding-bottom: 0;\n max-width: 100%;\n"], ["\n flex-grow: 1;\n overflow-y: auto;\n padding-bottom: 0;\n max-width: 100%;\n"])));
|
|
17920
|
+
var ImageRow = styled(OverlayImageRow)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n max-width: 100%;\n flex-direction: column;\n position: relative;\n width: 100%;\n"], ["\n max-width: 100%;\n flex-direction: column;\n position: relative;\n width: 100%;\n"])));
|
|
17921
|
+
var ImageCol$1 = styled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n width: 450px;\n max-width: 100%;\n max-height: none !important;\n"], ["\n width: 450px;\n max-width: 100%;\n max-height: none !important;\n"])));
|
|
17922
|
+
var StyledImage = styled(CapturedDocumentImg)(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n width: 100%;\n border-radius: 12px;\n"], ["\n width: 100%;\n border-radius: 12px;\n"])));
|
|
17923
|
+
var DebugInfoContainer = styled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n margin-top: 0.5rem;\n margin-bottom: 1rem;\n padding: 0.625rem;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n line-height: 1.35;\n text-align: left;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n margin-top: 0.5rem;\n margin-bottom: 1rem;\n padding: 0.625rem;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n line-height: 1.35;\n text-align: left;\n"])));
|
|
17924
17924
|
var DebugSection = styled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 0;\n"], ["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 0;\n"])));
|
|
17925
17925
|
var DebugLabel = styled.span(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n font-weight: 600;\n color: #495057;\n font-size: 0.8125rem;\n flex-shrink: 0;\n width: 110px;\n"], ["\n font-weight: 600;\n color: #495057;\n font-size: 0.8125rem;\n flex-shrink: 0;\n width: 110px;\n"])));
|
|
17926
17926
|
var DebugValue = styled.span(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n color: #212529;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n"], ["\n color: #212529;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n"])));
|
|
@@ -18004,7 +18004,7 @@
|
|
|
18004
18004
|
var $isHigher = _a.$isHigher;
|
|
18005
18005
|
return $isHigher ? '#c3e6cb' : '#dee2e6';
|
|
18006
18006
|
});
|
|
18007
|
-
var templateObject_1$
|
|
18007
|
+
var templateObject_1$E, templateObject_2$A, templateObject_3$q, templateObject_4$k, templateObject_5$f, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1;
|
|
18008
18008
|
|
|
18009
18009
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
18010
18010
|
var _this = this;
|
|
@@ -18056,12 +18056,12 @@
|
|
|
18056
18056
|
canvas.style.height = '0';
|
|
18057
18057
|
}
|
|
18058
18058
|
|
|
18059
|
-
var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$
|
|
18059
|
+
var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n position: relative;\n ", "\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"], ["\n position: relative;\n ", "\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"])), function (props) {
|
|
18060
18060
|
return props.$isVisible ? '' : 'opacity: 0;';
|
|
18061
18061
|
}, function (props) {
|
|
18062
18062
|
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
18063
18063
|
});
|
|
18064
|
-
var IdCardGuideImage = styled.img(templateObject_2$
|
|
18064
|
+
var IdCardGuideImage = styled.img(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n max-height: 100%;\n transform-style: preserve-3d;\n ", "\n ", "\n"], ["\n max-height: 100%;\n transform-style: preserve-3d;\n ", "\n ", "\n"])), function (props) {
|
|
18065
18065
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
18066
18066
|
}, function (props) {
|
|
18067
18067
|
return props.$isInvisible ? 'opacity: 0;' : '';
|
|
@@ -18211,17 +18211,17 @@
|
|
|
18211
18211
|
className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
|
|
18212
18212
|
}));
|
|
18213
18213
|
}
|
|
18214
|
-
var IdCardBorderContainer = styled.div(templateObject_3$
|
|
18215
|
-
var IdCardBorderInner = styled.div(templateObject_4$
|
|
18216
|
-
var SvgOverlay = styled.svg(templateObject_5$
|
|
18217
|
-
var IdCardBorderRect = styled.rect(templateObject_6$
|
|
18214
|
+
var IdCardBorderContainer = styled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n display: flex;\n position: relative;\n margin: auto;\n\n & .idmSdkWaves {\n position: absolute;\n animation: ", " 2s ease-out infinite;\n transform-style: preserve-3d;\n\n &:nth-child(3) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(4) {\n animation-delay: 1.33s;\n }\n }\n"], ["\n align-items: center;\n justify-content: center;\n display: flex;\n position: relative;\n margin: auto;\n\n & .idmSdkWaves {\n position: absolute;\n animation: ", " 2s ease-out infinite;\n transform-style: preserve-3d;\n\n &:nth-child(3) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(4) {\n animation-delay: 1.33s;\n }\n }\n"])), wavesAnimation);
|
|
18215
|
+
var IdCardBorderInner = styled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n max-height: 100%;\n max-width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n"], ["\n max-height: 100%;\n max-width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n"])));
|
|
18216
|
+
var SvgOverlay = styled.svg(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"])));
|
|
18217
|
+
var IdCardBorderRect = styled.rect(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n &.idmSdkProgressBorder {\n animation: ", " ", "\n ", ";\n }\n\n &.idmSdkProgressPaused {\n animation-play-state: paused;\n }\n"], ["\n &.idmSdkProgressBorder {\n animation: ", " ", "\n ", ";\n }\n\n &.idmSdkProgressPaused {\n animation-play-state: paused;\n }\n"])), progressBorderAnimation, function (props) {
|
|
18218
18218
|
var _a;
|
|
18219
18219
|
return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
|
|
18220
18220
|
}, function (props) {
|
|
18221
18221
|
var _a;
|
|
18222
18222
|
return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
|
|
18223
18223
|
});
|
|
18224
|
-
var templateObject_1$
|
|
18224
|
+
var templateObject_1$D, templateObject_2$z, templateObject_3$p, templateObject_4$j, templateObject_5$e, templateObject_6$8;
|
|
18225
18225
|
|
|
18226
18226
|
var defaultIdCaptureGuideImages = {
|
|
18227
18227
|
portrait: {
|
|
@@ -18369,7 +18369,7 @@
|
|
|
18369
18369
|
clearTimeout(timeout);
|
|
18370
18370
|
};
|
|
18371
18371
|
}, []);
|
|
18372
|
-
return /*#__PURE__*/React.createElement(Wrapper$
|
|
18372
|
+
return /*#__PURE__*/React.createElement(Wrapper$2, {
|
|
18373
18373
|
"$isLandscape": orientation === 'landscape',
|
|
18374
18374
|
style: {
|
|
18375
18375
|
aspectRatio: aspectRatio
|
|
@@ -18410,15 +18410,15 @@
|
|
|
18410
18410
|
style: imageStyle
|
|
18411
18411
|
})));
|
|
18412
18412
|
};
|
|
18413
|
-
var Wrapper$
|
|
18413
|
+
var Wrapper$2 = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])), function (props) {
|
|
18414
18414
|
return props.$isLandscape ? 'height: 100%;' : 'height: 100%;';
|
|
18415
18415
|
});
|
|
18416
|
-
var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_2$
|
|
18416
|
+
var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n height: 100%; // todo: branch between desktop and mobile\n"], ["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n height: 100%; // todo: branch between desktop and mobile\n"])), function (props) {
|
|
18417
18417
|
return props.$transitionTime;
|
|
18418
18418
|
}, function (props) {
|
|
18419
18419
|
return props.$transforms;
|
|
18420
18420
|
});
|
|
18421
|
-
var templateObject_1$
|
|
18421
|
+
var templateObject_1$C, templateObject_2$y;
|
|
18422
18422
|
|
|
18423
18423
|
var GuideOrientationContext = /*#__PURE__*/React.createContext({
|
|
18424
18424
|
orientation: 'landscape',
|
|
@@ -18513,7 +18513,7 @@
|
|
|
18513
18513
|
clearTimeout(timeout);
|
|
18514
18514
|
};
|
|
18515
18515
|
}, []);
|
|
18516
|
-
return /*#__PURE__*/React.createElement(Wrapper, {
|
|
18516
|
+
return /*#__PURE__*/React.createElement(Wrapper$1, {
|
|
18517
18517
|
style: {
|
|
18518
18518
|
aspectRatio: imageAspectRatio
|
|
18519
18519
|
},
|
|
@@ -18557,10 +18557,10 @@
|
|
|
18557
18557
|
height: height
|
|
18558
18558
|
})));
|
|
18559
18559
|
};
|
|
18560
|
-
var Wrapper = styled.div(templateObject_1$
|
|
18560
|
+
var Wrapper$1 = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n display: flex;\n position: absolute;\n margin: auto;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"], ["\n align-items: center;\n justify-content: center;\n display: flex;\n position: absolute;\n margin: auto;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"])), function (props) {
|
|
18561
18561
|
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
18562
18562
|
});
|
|
18563
|
-
var templateObject_1$
|
|
18563
|
+
var templateObject_1$B;
|
|
18564
18564
|
|
|
18565
18565
|
var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
18566
18566
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
@@ -18706,10 +18706,10 @@
|
|
|
18706
18706
|
return v;
|
|
18707
18707
|
}).join(' ');
|
|
18708
18708
|
};
|
|
18709
|
-
var StyledPageContainer = styled.div(templateObject_1$
|
|
18710
|
-
var GuidesContainer = styled.div(templateObject_2$
|
|
18711
|
-
var GuideCenterRow = styled.div(templateObject_3$
|
|
18712
|
-
var GuideRegion = styled.div(templateObject_4$
|
|
18709
|
+
var StyledPageContainer = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1000;\n overflow: hidden;\n"], ["\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1000;\n overflow: hidden;\n"])));
|
|
18710
|
+
var GuidesContainer = styled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"])));
|
|
18711
|
+
var GuideCenterRow = styled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n min-height: 0;\n flex: 1;\n"], ["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n min-height: 0;\n flex: 1;\n"])));
|
|
18712
|
+
var GuideRegion = styled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"])), function (props) {
|
|
18713
18713
|
var _a, _b, _c, _d, _e;
|
|
18714
18714
|
return (_e = (_a = props.$maskColor) !== null && _a !== void 0 ? _a : (_d = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.idCapture) === null || _c === void 0 ? void 0 : _c.guideOverlay) === null || _d === void 0 ? void 0 : _d.backgroundColor) !== null && _e !== void 0 ? _e : 'rgba(0, 0, 0, 0.5)';
|
|
18715
18715
|
}, function (props) {
|
|
@@ -18720,8 +18720,8 @@
|
|
|
18720
18720
|
}, function (props) {
|
|
18721
18721
|
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
18722
18722
|
});
|
|
18723
|
-
var Spacer = styled(GuideRegion)(templateObject_5$
|
|
18724
|
-
var GuideCenterRegion = styled.div(templateObject_6$
|
|
18723
|
+
var Spacer = styled(GuideRegion)(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: block;\n width: auto;\n"], ["\n display: block;\n width: auto;\n"])));
|
|
18724
|
+
var GuideCenterRegion = styled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n ", "\n ", "\n transform-style: preserve-3d;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"], ["\n ", "\n ", "\n transform-style: preserve-3d;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"])), function (props) {
|
|
18725
18725
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
18726
18726
|
}, function (props) {
|
|
18727
18727
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
@@ -18736,7 +18736,7 @@
|
|
|
18736
18736
|
var GuideCenterInner = styled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n position: relative;\n top: 0;\n margin: auto;\n ", "\n max-height: 100%;\n max-width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n position: relative;\n top: 0;\n margin: auto;\n ", "\n max-height: 100%;\n max-width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (props) {
|
|
18737
18737
|
return props.$isLandscape ? 'height: 100%;' : 'width: 90%;';
|
|
18738
18738
|
});
|
|
18739
|
-
var templateObject_1$
|
|
18739
|
+
var templateObject_1$A, templateObject_2$x, templateObject_3$o, templateObject_4$i, templateObject_5$d, templateObject_6$7, templateObject_7$4, templateObject_8$3, templateObject_9$2;
|
|
18740
18740
|
|
|
18741
18741
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
18742
18742
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -18859,7 +18859,7 @@
|
|
|
18859
18859
|
ref: wrapperRef,
|
|
18860
18860
|
"$maskColor": maskColor !== null && maskColor !== void 0 ? maskColor : '',
|
|
18861
18861
|
className: classNames.canvasWrapper
|
|
18862
|
-
}, /*#__PURE__*/React.createElement(Canvas$
|
|
18862
|
+
}, /*#__PURE__*/React.createElement(Canvas$2, {
|
|
18863
18863
|
ref: canvasRef,
|
|
18864
18864
|
className: classNames.canvas
|
|
18865
18865
|
})), /*#__PURE__*/React.createElement(IdCaptureGuideOverlay, {
|
|
@@ -18877,11 +18877,174 @@
|
|
|
18877
18877
|
progress: progress
|
|
18878
18878
|
}));
|
|
18879
18879
|
};
|
|
18880
|
-
var CanvasWrapper$1 = styled.div(templateObject_1$
|
|
18880
|
+
var CanvasWrapper$1 = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"])), function (props) {
|
|
18881
18881
|
return props.$maskColor;
|
|
18882
18882
|
});
|
|
18883
|
-
var Canvas$
|
|
18884
|
-
var templateObject_1$
|
|
18883
|
+
var Canvas$2 = styled.canvas(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
18884
|
+
var templateObject_1$z, templateObject_2$w;
|
|
18885
|
+
|
|
18886
|
+
var PDF417_ASPECT_RATIO = 3 / 1;
|
|
18887
|
+
function BarcodeGuideOverlay(_a) {
|
|
18888
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18889
|
+
var _l = _a.aspectRatio,
|
|
18890
|
+
aspectRatio = _l === void 0 ? PDF417_ASPECT_RATIO : _l,
|
|
18891
|
+
maskColor = _a.maskColor,
|
|
18892
|
+
_m = _a.cornerColor,
|
|
18893
|
+
cornerColor = _m === void 0 ? 'white' : _m,
|
|
18894
|
+
_o = _a.cornerLength,
|
|
18895
|
+
cornerLength = _o === void 0 ? 40 : _o,
|
|
18896
|
+
_p = _a.cornerWidth,
|
|
18897
|
+
cornerWidth = _p === void 0 ? 4 : _p,
|
|
18898
|
+
padding = _a.padding,
|
|
18899
|
+
_q = _a.borderRadius,
|
|
18900
|
+
borderRadius = _q === void 0 ? 8 : _q,
|
|
18901
|
+
_r = _a.headerText,
|
|
18902
|
+
headerText = _r === void 0 ? 'SCAN THE BARCODE' : _r,
|
|
18903
|
+
_s = _a.instructionText,
|
|
18904
|
+
instructionText = _s === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _s,
|
|
18905
|
+
_t = _a.isSuccess,
|
|
18906
|
+
isSuccess = _t === void 0 ? false : _t,
|
|
18907
|
+
_u = _a.successColor,
|
|
18908
|
+
successColor = _u === void 0 ? '#22c55e' : _u,
|
|
18909
|
+
_v = _a.classNames,
|
|
18910
|
+
classNames = _v === void 0 ? {} : _v;
|
|
18911
|
+
var canvasRef = React.useRef(null);
|
|
18912
|
+
var _w = useResizeObserver(),
|
|
18913
|
+
wrapperRef = _w.ref,
|
|
18914
|
+
_x = _w.width,
|
|
18915
|
+
wrapperWidth = _x === void 0 ? 1 : _x,
|
|
18916
|
+
_y = _w.height,
|
|
18917
|
+
wrapperHeight = _y === void 0 ? 1 : _y;
|
|
18918
|
+
var theme = styled.useTheme();
|
|
18919
|
+
if (padding === undefined) {
|
|
18920
|
+
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;
|
|
18921
|
+
}
|
|
18922
|
+
if (maskColor === undefined) {
|
|
18923
|
+
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';
|
|
18924
|
+
}
|
|
18925
|
+
React.useEffect(function () {
|
|
18926
|
+
var canvas = canvasRef.current;
|
|
18927
|
+
if (!canvas) return;
|
|
18928
|
+
// Wait for valid dimensions from resize observer
|
|
18929
|
+
if (wrapperWidth <= 1 || wrapperHeight <= 1) return;
|
|
18930
|
+
var boundingWidth = wrapperWidth - padding * 2;
|
|
18931
|
+
var boundingHeight = wrapperHeight - padding * 2;
|
|
18932
|
+
// Start with bounding box dimensions
|
|
18933
|
+
var rectWidth = boundingWidth;
|
|
18934
|
+
var rectHeight = boundingWidth / aspectRatio;
|
|
18935
|
+
// If calculated height exceeds available height, constrain by height instead
|
|
18936
|
+
if (rectHeight > boundingHeight) {
|
|
18937
|
+
rectHeight = boundingHeight;
|
|
18938
|
+
rectWidth = boundingHeight * aspectRatio;
|
|
18939
|
+
}
|
|
18940
|
+
// Center the rectangle
|
|
18941
|
+
var rectX = padding + (boundingWidth - rectWidth) / 2;
|
|
18942
|
+
var rectY = padding + (boundingHeight - rectHeight) / 2;
|
|
18943
|
+
setCanvasDimensions(canvas, wrapperWidth, wrapperHeight);
|
|
18944
|
+
var ctx = canvas.getContext('2d');
|
|
18945
|
+
if (!ctx) return;
|
|
18946
|
+
// Fill with mask color
|
|
18947
|
+
ctx.fillStyle = maskColor;
|
|
18948
|
+
ctx.clearRect(0, 0, wrapperWidth, wrapperHeight);
|
|
18949
|
+
ctx.fillRect(0, 0, wrapperWidth, wrapperHeight);
|
|
18950
|
+
// Create the cutout
|
|
18951
|
+
ctx.beginPath();
|
|
18952
|
+
ctx.roundRect(rectX, rectY, rectWidth, rectHeight, borderRadius);
|
|
18953
|
+
ctx.fillStyle = 'rgba(0,0,0,1)';
|
|
18954
|
+
ctx.globalCompositeOperation = 'destination-out';
|
|
18955
|
+
ctx.fill();
|
|
18956
|
+
ctx.globalCompositeOperation = 'source-over';
|
|
18957
|
+
// Draw corner brackets
|
|
18958
|
+
var color = isSuccess ? successColor : cornerColor;
|
|
18959
|
+
ctx.strokeStyle = color;
|
|
18960
|
+
ctx.lineWidth = cornerWidth;
|
|
18961
|
+
ctx.lineCap = 'round';
|
|
18962
|
+
var effectiveCornerLength = Math.min(cornerLength, rectWidth / 3, rectHeight / 3);
|
|
18963
|
+
// Top-left corner
|
|
18964
|
+
ctx.beginPath();
|
|
18965
|
+
ctx.moveTo(rectX + effectiveCornerLength, rectY);
|
|
18966
|
+
ctx.lineTo(rectX + borderRadius, rectY);
|
|
18967
|
+
ctx.arcTo(rectX, rectY, rectX, rectY + borderRadius, borderRadius);
|
|
18968
|
+
ctx.lineTo(rectX, rectY + effectiveCornerLength);
|
|
18969
|
+
ctx.stroke();
|
|
18970
|
+
// Top-right corner
|
|
18971
|
+
ctx.beginPath();
|
|
18972
|
+
ctx.moveTo(rectX + rectWidth - effectiveCornerLength, rectY);
|
|
18973
|
+
ctx.lineTo(rectX + rectWidth - borderRadius, rectY);
|
|
18974
|
+
ctx.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + borderRadius, borderRadius);
|
|
18975
|
+
ctx.lineTo(rectX + rectWidth, rectY + effectiveCornerLength);
|
|
18976
|
+
ctx.stroke();
|
|
18977
|
+
// Bottom-left corner
|
|
18978
|
+
ctx.beginPath();
|
|
18979
|
+
ctx.moveTo(rectX, rectY + rectHeight - effectiveCornerLength);
|
|
18980
|
+
ctx.lineTo(rectX, rectY + rectHeight - borderRadius);
|
|
18981
|
+
ctx.arcTo(rectX, rectY + rectHeight, rectX + borderRadius, rectY + rectHeight, borderRadius);
|
|
18982
|
+
ctx.lineTo(rectX + effectiveCornerLength, rectY + rectHeight);
|
|
18983
|
+
ctx.stroke();
|
|
18984
|
+
// Bottom-right corner
|
|
18985
|
+
ctx.beginPath();
|
|
18986
|
+
ctx.moveTo(rectX + rectWidth, rectY + rectHeight - effectiveCornerLength);
|
|
18987
|
+
ctx.lineTo(rectX + rectWidth, rectY + rectHeight - borderRadius);
|
|
18988
|
+
ctx.arcTo(rectX + rectWidth, rectY + rectHeight, rectX + rectWidth - borderRadius, rectY + rectHeight, borderRadius);
|
|
18989
|
+
ctx.lineTo(rectX + rectWidth - effectiveCornerLength, rectY + rectHeight);
|
|
18990
|
+
ctx.stroke();
|
|
18991
|
+
return function () {
|
|
18992
|
+
resetCanvasDimensions(canvas);
|
|
18993
|
+
};
|
|
18994
|
+
}, [aspectRatio, borderRadius, cornerColor, cornerLength, cornerWidth, isSuccess, maskColor, padding, successColor, wrapperHeight, wrapperWidth]);
|
|
18995
|
+
return /*#__PURE__*/React.createElement(Wrapper, {
|
|
18996
|
+
ref: wrapperRef,
|
|
18997
|
+
className: classNames.wrapper
|
|
18998
|
+
}, /*#__PURE__*/React.createElement(Canvas$1, {
|
|
18999
|
+
ref: canvasRef,
|
|
19000
|
+
className: classNames.canvas
|
|
19001
|
+
}), /*#__PURE__*/React.createElement(TextOverlay, null, /*#__PURE__*/React.createElement(HeaderText, {
|
|
19002
|
+
className: classNames.header
|
|
19003
|
+
}, headerText), /*#__PURE__*/React.createElement(InstructionText, {
|
|
19004
|
+
className: classNames.instruction
|
|
19005
|
+
}, instructionText)));
|
|
19006
|
+
}
|
|
19007
|
+
var Wrapper = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1;\n"])));
|
|
19008
|
+
var Canvas$1 = styled.canvas(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
|
|
19009
|
+
var TextOverlay = styled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n padding-top: 48px;\n pointer-events: none;\n z-index: 2;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n padding-top: 48px;\n pointer-events: none;\n z-index: 2;\n"])));
|
|
19010
|
+
var HeaderText = styled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n color: white;\n font-size: 24px;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 16px;\n"], ["\n color: white;\n font-size: 24px;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 16px;\n"])));
|
|
19011
|
+
var InstructionText = styled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n color: white;\n font-size: 16px;\n font-weight: 400;\n text-align: center;\n max-width: 300px;\n line-height: 1.4;\n opacity: 0.9;\n"], ["\n color: white;\n font-size: 16px;\n font-weight: 400;\n text-align: center;\n max-width: 300px;\n line-height: 1.4;\n opacity: 0.9;\n"])));
|
|
19012
|
+
var templateObject_1$y, templateObject_2$v, templateObject_3$n, templateObject_4$h, templateObject_5$c;
|
|
19013
|
+
|
|
19014
|
+
function BarcodeSuccessOverlay(_a) {
|
|
19015
|
+
var _b = _a.headerText,
|
|
19016
|
+
headerText = _b === void 0 ? 'Scan Successful!' : _b,
|
|
19017
|
+
_c = _a.processingText,
|
|
19018
|
+
processingText = _c === void 0 ? 'Processing...' : _c,
|
|
19019
|
+
_d = _a.successColor,
|
|
19020
|
+
successColor = _d === void 0 ? '#22c55e' : _d;
|
|
19021
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BarcodeGuideOverlay, {
|
|
19022
|
+
headerText: headerText,
|
|
19023
|
+
instructionText: processingText,
|
|
19024
|
+
isSuccess: true,
|
|
19025
|
+
successColor: successColor
|
|
19026
|
+
}), /*#__PURE__*/React.createElement(CheckmarkWrapper, null, /*#__PURE__*/React.createElement(CheckmarkCircle, {
|
|
19027
|
+
"$color": successColor
|
|
19028
|
+
}, /*#__PURE__*/React.createElement(CheckmarkIcon, {
|
|
19029
|
+
viewBox: "0 0 24 24",
|
|
19030
|
+
fill: "none"
|
|
19031
|
+
}, /*#__PURE__*/React.createElement(CheckmarkPath, {
|
|
19032
|
+
d: "M5 13l4 4L19 7",
|
|
19033
|
+
stroke: "white",
|
|
19034
|
+
strokeWidth: "3",
|
|
19035
|
+
strokeLinecap: "round",
|
|
19036
|
+
strokeLinejoin: "round"
|
|
19037
|
+
})))));
|
|
19038
|
+
}
|
|
19039
|
+
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"])));
|
|
19040
|
+
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"])));
|
|
19041
|
+
var CheckmarkWrapper = styled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n z-index: 3;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n z-index: 3;\n"])));
|
|
19042
|
+
var CheckmarkCircle = styled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n animation: ", " 0.4s ease-out forwards;\n"], ["\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n animation: ", " 0.4s ease-out forwards;\n"])), function (props) {
|
|
19043
|
+
return props.$color;
|
|
19044
|
+
}, scaleIn);
|
|
19045
|
+
var CheckmarkIcon = styled.svg(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n width: 48px;\n height: 48px;\n"], ["\n width: 48px;\n height: 48px;\n"])));
|
|
19046
|
+
var CheckmarkPath = styled.path(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n stroke-dasharray: 24;\n stroke-dashoffset: 24;\n animation: ", " 0.4s ease-out 0.2s forwards;\n"], ["\n stroke-dasharray: 24;\n stroke-dashoffset: 24;\n animation: ", " 0.4s ease-out 0.2s forwards;\n"])), drawCheck);
|
|
19047
|
+
var templateObject_1$x, templateObject_2$u, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$6;
|
|
18885
19048
|
|
|
18886
19049
|
function IdCaptureGuides(_a) {
|
|
18887
19050
|
var _b = _a.guideType,
|
|
@@ -18903,7 +19066,15 @@
|
|
|
18903
19066
|
_k = _a.colors,
|
|
18904
19067
|
colors = _k === void 0 ? {} : _k,
|
|
18905
19068
|
_l = _a.verbiage,
|
|
18906
|
-
rawVerbiage = _l === void 0 ? {} : _l
|
|
19069
|
+
rawVerbiage = _l === void 0 ? {} : _l,
|
|
19070
|
+
_m = _a.isRequestingBetterBarcode,
|
|
19071
|
+
isRequestingBetterBarcode = _m === void 0 ? false : _m,
|
|
19072
|
+
_o = _a.isBarcodeSuccess,
|
|
19073
|
+
isBarcodeSuccess = _o === void 0 ? false : _o,
|
|
19074
|
+
_p = _a.barcodeHeaderText,
|
|
19075
|
+
barcodeHeaderText = _p === void 0 ? 'SCAN THE BARCODE' : _p,
|
|
19076
|
+
_q = _a.barcodeInstructionText,
|
|
19077
|
+
barcodeInstructionText = _q === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _q;
|
|
18907
19078
|
var state = useIdCaptureStore();
|
|
18908
19079
|
var isRearFacing = useCameraStore(function (state) {
|
|
18909
19080
|
return state.isRearFacing;
|
|
@@ -18913,6 +19084,16 @@
|
|
|
18913
19084
|
capturingText: 'Capturing...',
|
|
18914
19085
|
captureFailedText: 'Capture failed!'
|
|
18915
19086
|
});
|
|
19087
|
+
// Render barcode guide overlays when in barcode recapture state
|
|
19088
|
+
if (isRequestingBetterBarcode) {
|
|
19089
|
+
if (isBarcodeSuccess) {
|
|
19090
|
+
return /*#__PURE__*/React.createElement(BarcodeSuccessOverlay, null);
|
|
19091
|
+
}
|
|
19092
|
+
return /*#__PURE__*/React.createElement(BarcodeGuideOverlay, {
|
|
19093
|
+
headerText: barcodeHeaderText,
|
|
19094
|
+
instructionText: barcodeInstructionText
|
|
19095
|
+
});
|
|
19096
|
+
}
|
|
18916
19097
|
return /*#__PURE__*/React.createElement(React.Fragment, null, guideType === 'overlay' && (/*#__PURE__*/React.createElement(IdCaptureGuideOverlay, {
|
|
18917
19098
|
images: images,
|
|
18918
19099
|
classNames: classNames,
|
|
@@ -21111,7 +21292,8 @@
|
|
|
21111
21292
|
classNames: classNames.guides,
|
|
21112
21293
|
colors: colors,
|
|
21113
21294
|
verbiage: idCaptureVerbiage,
|
|
21114
|
-
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments
|
|
21295
|
+
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments,
|
|
21296
|
+
isRequestingBetterBarcode: state.captureState === 'requestingBetterBarcode'
|
|
21115
21297
|
}), debugMode && !((_h = (_g = theme.idCapture) === null || _g === void 0 ? void 0 : _g.capturePreview) === null || _h === void 0 ? void 0 : _h.disabled) && state.captureState === 'requestingFlip' && !separateIdCardCaptureSequence && state.imageUrl && (/*#__PURE__*/React.createElement(IdCaptureImagePreview, {
|
|
21116
21298
|
classNames: (_j = classNames.capture) === null || _j === void 0 ? void 0 : _j.imagePreview,
|
|
21117
21299
|
text: (_k = idCaptureVerbiages === null || idCaptureVerbiages === void 0 ? void 0 : idCaptureVerbiages.idCardFront) === null || _k === void 0 ? void 0 : _k.processingIdCardText,
|