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
|
@@ -476,16 +476,16 @@ var LoaderButton = function LoaderButton(_a) {
|
|
|
476
476
|
className: "ladda-label"
|
|
477
477
|
}, children));
|
|
478
478
|
};
|
|
479
|
-
var StyledButton = styled__default.default.button(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
|
|
479
|
+
var StyledButton = styled__default.default.button(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
|
|
480
480
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
481
481
|
return ((_a = props.theme.buttons) === null || _a === void 0 ? void 0 : _a.style) === 'bootstrap' && "\n border-radius: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n text-transform: none;\n -webkit-appearance: button;\n \n &:not(:disabled),\n &[type='button']:not(:disabled),\n &[type='reset']:not(:disabled),\n &[type='submit']:not(:disabled) {\n cursor: pointer;\n }\n \n &:focus:not(:focus-visible) {\n outline: 0;\n }\n \n --bs-btn-padding-x: 0.75rem;\n --bs-btn-padding-y: 0.375rem;\n --bs-btn-font-family: ;\n --bs-btn-font-size: 1rem;\n --bs-btn-font-weight: 400;\n --bs-btn-line-height: 1.5;\n --bs-btn-color: var(--bs-body-color);\n --bs-btn-bg: transparent;\n --bs-btn-border-width: var(--bs-border-width);\n --bs-btn-border-color: transparent;\n --bs-btn-border-radius: var(--bs-border-radius);\n --bs-btn-hover-border-color: transparent;\n --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),\n 0 1px 1px rgba(0, 0, 0, 0.075);\n --bs-btn-disabled-opacity: 0.65;\n --bs-btn-focus-box-shadow: 0 0 0 0.25rem\n rgba(var(--bs-btn-focus-shadow-rgb), 0.5);\n display: inline-block;\n padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);\n font-family: var(--bs-btn-font-family);\n font-size: var(--bs-btn-font-size);\n font-weight: var(--bs-btn-font-weight);\n line-height: var(--bs-btn-line-height);\n color: var(--bs-btn-color);\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);\n border-radius: var(--bs-btn-border-radius);\n background-color: var(--bs-btn-bg);\n //transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n // border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n \n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n \n &:hover {\n filter: brightness(1.15);\n }\n \n &:focus-visible {\n color: var(--bs-btn-hover-color);\n background-color: var(--bs-btn-hover-bg);\n border-color: var(--bs-btn-hover-border-color);\n outline: 0;\n box-shadow: var(--bs-btn-focus-box-shadow);\n }\n \n &:disabled,\n &.disabled,\n fieldset:disabled & {\n color: var(--bs-btn-disabled-color);\n pointer-events: none;\n background-color: var(--bs-btn-disabled-bg);\n border-color: var(--bs-btn-disabled-border-color);\n opacity: var(--bs-btn-disabled-opacity);\n }\n \n --bs-btn-color: ".concat((_f = (_b = props.$textColor) !== null && _b !== void 0 ? _b : (_e = (_c = props.theme.buttons) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'primary']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : '#fff', ";\n --bs-btn-bg: ").concat((_l = (_g = props.$backgroundColor) !== null && _g !== void 0 ? _g : (_k = (_h = props.theme.buttons) === null || _h === void 0 ? void 0 : _h[(_j = props.$variant) !== null && _j !== void 0 ? _j : 'primary']) === null || _k === void 0 ? void 0 : _k.backgroundColor) !== null && _l !== void 0 ? _l : '#0d6efd', ";\n --bs-btn-border-color: var(--bs-btn-bg);\n --bs-btn-focus-shadow-rgb: 49, 132, 253;\n --bs-btn-active-color: #fff;\n --bs-btn-active-bg: #0a58ca;\n --bs-btn-active-border-color: #0a53be;\n --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --bs-btn-disabled-color: ").concat((_q = (_m = props.$disabledTextColor) !== null && _m !== void 0 ? _m : (_p = (_o = props.theme.buttons) === null || _o === void 0 ? void 0 : _o.loading) === null || _p === void 0 ? void 0 : _p.textColor) !== null && _q !== void 0 ? _q : '#fff', ";\n --bs-btn-disabled-bg: ").concat((_u = (_r = props.$disabledBackgroundColor) !== null && _r !== void 0 ? _r : (_t = (_s = props.theme.buttons) === null || _s === void 0 ? void 0 : _s.loading) === null || _t === void 0 ? void 0 : _t.backgroundColor) !== null && _u !== void 0 ? _u : 'gray', ";\n --bs-btn-disabled-border-color: ").concat((_v = props.$disabledBackgroundColor) !== null && _v !== void 0 ? _v : '#0d6efd', ";\n \n --bs-btn-padding-y: 14px;\n --bs-btn-padding-x: 1rem;\n --bs-btn-font-size: 18px;\n --bs-btn-border-radius: 4px;\n ");
|
|
482
482
|
});
|
|
483
|
-
var templateObject_1$
|
|
483
|
+
var templateObject_1$T;
|
|
484
484
|
|
|
485
|
-
var ButtonsRow$2 = styled__default.default.div(templateObject_1$
|
|
486
|
-
var templateObject_1$
|
|
485
|
+
var ButtonsRow$2 = styled__default.default.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n text-align: left;\n"], ["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n text-align: left;\n"])));
|
|
486
|
+
var templateObject_1$S;
|
|
487
487
|
|
|
488
|
-
var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$
|
|
488
|
+
var GuidanceMessageContainerDiv = styled__default.default.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: absolute;\n top: calc(", ");\n ", "\n font-weight: bold;\n width: 100%;\n display: flex;\n padding: 0 10%;\n box-sizing: border-box;\n"], ["\n position: absolute;\n top: calc(", ");\n ", "\n font-weight: bold;\n width: 100%;\n display: flex;\n padding: 0 10%;\n box-sizing: border-box;\n"])), function (_a) {
|
|
489
489
|
var $top = _a.$top;
|
|
490
490
|
return $top !== null && $top !== void 0 ? $top : '10%';
|
|
491
491
|
}, function (_a) {
|
|
@@ -498,36 +498,36 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
|
|
|
498
498
|
if (!portalLocation) return element;
|
|
499
499
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
500
500
|
};
|
|
501
|
-
var GuidanceMessage = styled__default.default.div(templateObject_2$
|
|
501
|
+
var GuidanceMessage = styled__default.default.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n border-radius: 8px;\n z-index: 10001;\n padding: 16px 24px;\n font-size: 18px;\n font-weight: bold;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n border-radius: 8px;\n z-index: 10001;\n padding: 16px 24px;\n font-size: 18px;\n font-weight: bold;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])), function (props) {
|
|
502
502
|
var _a, _b, _c, _d, _e, _f;
|
|
503
503
|
return (_f = (_a = props.$background) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : 'white';
|
|
504
504
|
}, function (props) {
|
|
505
505
|
var _a, _b, _c, _d, _e, _f;
|
|
506
506
|
return (_f = (_a = props.$textColor) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : 'black';
|
|
507
507
|
});
|
|
508
|
-
var templateObject_1$
|
|
508
|
+
var templateObject_1$R, templateObject_2$M;
|
|
509
509
|
|
|
510
|
-
var wavesAnimation = styled.keyframes(templateObject_1$
|
|
511
|
-
var progressBarAnimation = styled.keyframes(templateObject_2$
|
|
512
|
-
var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$
|
|
513
|
-
var progressBorderAnimation = styled.keyframes(templateObject_4$
|
|
514
|
-
var templateObject_1$
|
|
510
|
+
var wavesAnimation = styled.keyframes(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n 0% {\n opacity: 0;\n transform: scale3d(1, 1, 1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale3d(2, 2, 1);\n opacity: 0;\n }\n"], ["\n 0% {\n opacity: 0;\n transform: scale3d(1, 1, 1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale3d(2, 2, 1);\n opacity: 0;\n }\n"])));
|
|
511
|
+
var progressBarAnimation = styled.keyframes(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n"], ["\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n"])));
|
|
512
|
+
var dualRingSpinnerAnimation = styled.keyframes(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
|
|
513
|
+
var progressBorderAnimation = styled.keyframes(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n to {\n stroke-dashoffset: 0;\n }\n"], ["\n to {\n stroke-dashoffset: 0;\n }\n"])));
|
|
514
|
+
var templateObject_1$Q, templateObject_2$L, templateObject_3$x, templateObject_4$r;
|
|
515
515
|
|
|
516
|
-
var OverlayContainer = styled__default.default.div(templateObject_1$
|
|
516
|
+
var OverlayContainer = styled__default.default.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n background: ", ";\n ", "\n\n z-index: 10000;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n background: ", ";\n ", "\n\n z-index: 10000;\n"])), function (props) {
|
|
517
517
|
return props.theme.background ? "".concat(props.theme.background) : "white";
|
|
518
518
|
}, function (props) {
|
|
519
519
|
return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
|
|
520
520
|
});
|
|
521
|
-
var OverlayInner$2 = styled__default.default.div(templateObject_2$
|
|
521
|
+
var OverlayInner$2 = styled__default.default.div(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n width: 100%;\n height: 100%;\n ", "\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n width: 100%;\n height: 100%;\n ", "\n"])), function (props) {
|
|
522
522
|
var _a;
|
|
523
523
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
524
524
|
}, function (props) {
|
|
525
525
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
526
526
|
});
|
|
527
|
-
var OverlayImageContainer = styled__default.default.div(templateObject_3$
|
|
528
|
-
var OverlayImageRow = styled__default.default.div(templateObject_4$
|
|
529
|
-
var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_5$
|
|
530
|
-
var ButtonsColumn = styled__default.default.div(templateObject_6$
|
|
527
|
+
var OverlayImageContainer = styled__default.default.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"], ["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"])));
|
|
528
|
+
var OverlayImageRow = styled__default.default.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100% - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"], ["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100% - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"])));
|
|
529
|
+
var GrayOverlayContainer = styled__default.default(OverlayContainer)(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n background: #f7f6fb;\n"], ["\n background: #f7f6fb;\n"])));
|
|
530
|
+
var ButtonsColumn = styled__default.default.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"])));
|
|
531
531
|
var WideButton = styled__default.default(LoaderButton)(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n width: 100%;\n border-radius: 30px;\n"], ["\n width: 100%;\n border-radius: 30px;\n"])));
|
|
532
532
|
var WideBorderButton = styled__default.default(WideButton)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n border: 1px solid\n ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n background: ", ";\n border: 1px solid\n ", ";\n box-sizing: border-box;\n"])), function (props) {
|
|
533
533
|
var _a, _b;
|
|
@@ -566,7 +566,7 @@ var LoadingOverlayLoadingListItem = styled__default.default.li(templateObject_19
|
|
|
566
566
|
var LoadingOverlayProgressContainer = styled__default.default.div(templateObject_20$2 || (templateObject_20$2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
|
|
567
567
|
var LoadingOverlayCustomLoadingGraphic = styled__default.default.img(templateObject_21$2 || (templateObject_21$2 = __makeTemplateObject(["\n transform-style: preserve-3d;\n"], ["\n transform-style: preserve-3d;\n"])));
|
|
568
568
|
var LoadingOverlayContinueButtonContainer = styled__default.default.div(templateObject_22$2 || (templateObject_22$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
569
|
-
var templateObject_1$
|
|
569
|
+
var templateObject_1$P, templateObject_2$K, templateObject_3$w, templateObject_4$q, templateObject_5$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;
|
|
570
570
|
|
|
571
571
|
var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
|
|
572
572
|
var accessBlockedImageUrl = _a.accessBlockedImageUrl;
|
|
@@ -3306,8 +3306,8 @@ function getFrameDimensions(frame) {
|
|
|
3306
3306
|
return [frameWidth, frameHeight];
|
|
3307
3307
|
}
|
|
3308
3308
|
|
|
3309
|
-
var InvisibleCanvasContainer = styled__default.default.div(templateObject_1$
|
|
3310
|
-
var InvisibleCanvas = styled__default.default.canvas(templateObject_2$
|
|
3309
|
+
var InvisibleCanvasContainer = styled__default.default.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n user-select: none;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n user-select: none;\n"])));
|
|
3310
|
+
var InvisibleCanvas = styled__default.default.canvas(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
3311
3311
|
function drawToCanvas(canvas, frame, width, height) {
|
|
3312
3312
|
if (!canvas) return;
|
|
3313
3313
|
var ctx = canvas.getContext('2d');
|
|
@@ -3327,7 +3327,7 @@ function clearCanvas(canvas) {
|
|
|
3327
3327
|
var _a;
|
|
3328
3328
|
(_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
|
|
3329
3329
|
}
|
|
3330
|
-
var templateObject_1$
|
|
3330
|
+
var templateObject_1$O, templateObject_2$J;
|
|
3331
3331
|
|
|
3332
3332
|
function useFrameLoop(fn, options) {
|
|
3333
3333
|
if (options === void 0) {
|
|
@@ -5123,14 +5123,14 @@ function CameraTamperSeal(_a) {
|
|
|
5123
5123
|
className: classNames.message
|
|
5124
5124
|
}, messageText)));
|
|
5125
5125
|
}
|
|
5126
|
-
var StyledOverlayInner$4 = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
5127
|
-
var StyledOverlayHeading = styled__default.default.h3(templateObject_2$
|
|
5126
|
+
var StyledOverlayInner$4 = styled__default.default(OverlayInner$2)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
5127
|
+
var StyledOverlayHeading = styled__default.default.h3(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
5128
5128
|
function useCameraStore(selector) {
|
|
5129
5129
|
var store = React.useContext(CameraStoreContext);
|
|
5130
5130
|
if (!store) throw new Error('useCameraStore cannot be used without Provider');
|
|
5131
5131
|
return zustand.useStore(store, selector);
|
|
5132
5132
|
}
|
|
5133
|
-
var templateObject_1$
|
|
5133
|
+
var templateObject_1$N, templateObject_2$I;
|
|
5134
5134
|
|
|
5135
5135
|
var DocumentDetectionModelContext = /*#__PURE__*/React.createContext({
|
|
5136
5136
|
startDocumentDetection: function startDocumentDetection() {
|
|
@@ -7045,12 +7045,12 @@ function DebugStatsPane(_a) {
|
|
|
7045
7045
|
if (!portalLocation) return element;
|
|
7046
7046
|
return /*#__PURE__*/reactDom.createPortal(element, portalLocation);
|
|
7047
7047
|
}
|
|
7048
|
-
var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$
|
|
7049
|
-
var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$
|
|
7048
|
+
var DebugStatsPaneDiv = styled__default.default.span(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n margin-right: 20px;\n padding: 8px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10002;\n pointer-events: none;\n"], ["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n margin-right: 20px;\n padding: 8px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10002;\n pointer-events: none;\n"])));
|
|
7049
|
+
var ObjectDetectionDebugOverlayDiv = styled__default.default.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n position: absolute;\n z-index: 1001;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n pointer-events: none;\n ", "\n transform-style: preserve-3d;\n"], ["\n position: absolute;\n z-index: 1001;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n pointer-events: none;\n ", "\n transform-style: preserve-3d;\n"])), function (_a) {
|
|
7050
7050
|
var $flipX = _a.$flipX;
|
|
7051
7051
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
7052
7052
|
});
|
|
7053
|
-
var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$
|
|
7053
|
+
var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n transform-style: preserve-3d;\n"], ["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n transform-style: preserve-3d;\n"])), function (_a) {
|
|
7054
7054
|
var $color = _a.$color;
|
|
7055
7055
|
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
7056
7056
|
}, function (_a) {
|
|
@@ -7060,7 +7060,7 @@ var ObjectDetectionDebugBox = styled__default.default.div(templateObject_3$t ||
|
|
|
7060
7060
|
var $flipX = _a.$flipX;
|
|
7061
7061
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
7062
7062
|
});
|
|
7063
|
-
var FaceDetectionKeypointMarker = styled__default.default.div(templateObject_4$
|
|
7063
|
+
var FaceDetectionKeypointMarker = styled__default.default.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) {
|
|
7064
7064
|
var $color = _a.$color;
|
|
7065
7065
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
7066
7066
|
}, function (_a) {
|
|
@@ -7258,7 +7258,7 @@ function SelfieCaptureFaceKeypoint(_a) {
|
|
|
7258
7258
|
}
|
|
7259
7259
|
});
|
|
7260
7260
|
}
|
|
7261
|
-
var templateObject_1$
|
|
7261
|
+
var templateObject_1$M, templateObject_2$H, templateObject_3$v, templateObject_4$p;
|
|
7262
7262
|
|
|
7263
7263
|
function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
7264
7264
|
var _b = _a.classNames,
|
|
@@ -7291,18 +7291,18 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
|
7291
7291
|
}
|
|
7292
7292
|
}, verbiage.buttonText))));
|
|
7293
7293
|
}
|
|
7294
|
-
var Container$7 = styled__default.default.div(templateObject_1$
|
|
7294
|
+
var Container$7 = styled__default.default.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"], ["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"])), function (props) {
|
|
7295
7295
|
var _a, _b, _c;
|
|
7296
7296
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.backgroundColor) !== null && _c !== void 0 ? _c : '#eed202';
|
|
7297
7297
|
}, function (props) {
|
|
7298
7298
|
var _a, _b, _c;
|
|
7299
7299
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.textColor) !== null && _c !== void 0 ? _c : 'black';
|
|
7300
7300
|
});
|
|
7301
|
-
var InnerContainer = styled__default.default.div(templateObject_2$
|
|
7302
|
-
var Message = styled__default.default.span(templateObject_3$
|
|
7303
|
-
var ButtonContainer = styled__default.default.div(templateObject_4$
|
|
7304
|
-
var Button$1 = styled__default.default(LoaderButton)(templateObject_5$
|
|
7305
|
-
var templateObject_1$
|
|
7301
|
+
var InnerContainer = styled__default.default.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"])));
|
|
7302
|
+
var Message = styled__default.default.span(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: block;\n margin: auto 12px auto 0;\n"], ["\n display: block;\n margin: auto 12px auto 0;\n"])));
|
|
7303
|
+
var ButtonContainer = styled__default.default.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n display: flex;\n margin-left: auto;\n"], ["\n display: flex;\n margin-left: auto;\n"])));
|
|
7304
|
+
var Button$1 = styled__default.default(LoaderButton)(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n white-space: nowrap;\n margin: auto;\n"], ["\n white-space: nowrap;\n margin: auto;\n"])));
|
|
7305
|
+
var templateObject_1$L, templateObject_2$G, templateObject_3$u, templateObject_4$o, templateObject_5$h;
|
|
7306
7306
|
|
|
7307
7307
|
// This is a simplified version of https://github.com/ZeeCoder/use-resize-observer.
|
|
7308
7308
|
// We have removed all options and made it compliant with React Compiler/React 19.
|
|
@@ -7634,13 +7634,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
7634
7634
|
finished: true
|
|
7635
7635
|
}, verbiage.retryBtnText)));
|
|
7636
7636
|
};
|
|
7637
|
-
var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$
|
|
7638
|
-
var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$
|
|
7639
|
-
var Description$4 = styled__default.default.p(templateObject_3$
|
|
7640
|
-
var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$
|
|
7641
|
-
var templateObject_1$
|
|
7637
|
+
var StyledOverlayInner$3 = styled__default.default(OverlayInner$2)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
|
|
7638
|
+
var StyledOverlayImageContainer$1 = styled__default.default(OverlayImageContainer)(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
7639
|
+
var Description$4 = styled__default.default.p(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
7640
|
+
var RetryButton$1 = styled__default.default(LoaderButton)(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
7641
|
+
var templateObject_1$K, templateObject_2$F, templateObject_3$t, templateObject_4$n;
|
|
7642
7642
|
|
|
7643
|
-
var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$
|
|
7643
|
+
var ExitCaptureStyledButton = styled__default.default.button(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n position: absolute;\n top: 12px;\n right: 12px;\n font-size: 20px;\n width: 32px;\n height: 32px;\n font-family: monospace;\n z-index: 10002;\n border: none;\n border-radius: 4px;\n background: var(--idm-color-secondary-200);\n cursor: pointer;\n padding: 8px;\n box-sizing: border-box;\n display: flex;\n\n &:hover {\n background: #ddd;\n }\n\n & > svg {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n"], ["\n position: absolute;\n top: 12px;\n right: 12px;\n font-size: 20px;\n width: 32px;\n height: 32px;\n font-family: monospace;\n z-index: 10002;\n border: none;\n border-radius: 4px;\n background: var(--idm-color-secondary-200);\n cursor: pointer;\n padding: 8px;\n box-sizing: border-box;\n display: flex;\n\n &:hover {\n background: #ddd;\n }\n\n & > svg {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n"])));
|
|
7644
7644
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
7645
7645
|
var onClick = _a.onClick,
|
|
7646
7646
|
className = _a.className;
|
|
@@ -7684,7 +7684,7 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
|
7684
7684
|
y2: "19.75"
|
|
7685
7685
|
}))));
|
|
7686
7686
|
};
|
|
7687
|
-
var templateObject_1$
|
|
7687
|
+
var templateObject_1$J;
|
|
7688
7688
|
|
|
7689
7689
|
function IdCaptureLoadingGraphic(props) {
|
|
7690
7690
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
@@ -8159,21 +8159,21 @@ function IdCaptureLoadingGraphicMobile(_a) {
|
|
|
8159
8159
|
fill: "white"
|
|
8160
8160
|
}))));
|
|
8161
8161
|
}
|
|
8162
|
-
var LoadingGraphicWrapper = styled__default.default.div(templateObject_1$
|
|
8163
|
-
var LoadingGraphicSvg = styled__default.default.svg(templateObject_2$
|
|
8162
|
+
var LoadingGraphicWrapper = styled__default.default.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: flex;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n width: 100%;\n height: 100%;\n"])));
|
|
8163
|
+
var LoadingGraphicSvg = styled__default.default.svg(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n margin: auto;\n transform: scale(\n ", "\n );\n transform-style: preserve-3d;\n transition:\n transform 0.2s linear,\n border-width 0.2s linear;\n border: ", "px solid\n ", ";\n max-height: 80%;\n max-width: 80%;\n"], ["\n margin: auto;\n transform: scale(\n ", "\n );\n transform-style: preserve-3d;\n transition:\n transform 0.2s linear,\n border-width 0.2s linear;\n border: ", "px solid\n ", ";\n max-height: 80%;\n max-width: 80%;\n"])), function (props) {
|
|
8164
8164
|
return props.$frame > 1 ? 1 : props.$frame === 1 ? 1.25 : 0.75;
|
|
8165
8165
|
}, function (props) {
|
|
8166
8166
|
return props.$frame >= 5 ? 10 : 0;
|
|
8167
8167
|
}, function (props) {
|
|
8168
8168
|
return props.$borderColor;
|
|
8169
8169
|
});
|
|
8170
|
-
var LoadingGraphicCardGroup = styled__default.default.g(templateObject_3$
|
|
8170
|
+
var LoadingGraphicCardGroup = styled__default.default.g(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"], ["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"])), function (props) {
|
|
8171
8171
|
return props.$offScreen ? '-500px' : '0';
|
|
8172
8172
|
});
|
|
8173
|
-
var LoadingGraphicPhoneGroup = styled__default.default.g(templateObject_4$
|
|
8173
|
+
var LoadingGraphicPhoneGroup = styled__default.default.g(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"], ["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"])), function (props) {
|
|
8174
8174
|
return props.$offScreen ? '40px' : '0';
|
|
8175
8175
|
});
|
|
8176
|
-
var templateObject_1$
|
|
8176
|
+
var templateObject_1$I, templateObject_2$E, templateObject_3$s, templateObject_4$m;
|
|
8177
8177
|
|
|
8178
8178
|
function LoadingListItemIndicator(_a) {
|
|
8179
8179
|
var _b = _a.state,
|
|
@@ -8442,24 +8442,24 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
|
|
|
8442
8442
|
}
|
|
8443
8443
|
}, ready ? verbiage.continueText : verbiage.pleaseWaitText))))));
|
|
8444
8444
|
};
|
|
8445
|
-
var OverlayInner$1 = styled__default.default(LoadingOverlayInner)(templateObject_1$
|
|
8445
|
+
var OverlayInner$1 = styled__default.default(LoadingOverlayInner)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n"], ["\n background: ", ";\n color: ", ";\n"])), function (props) {
|
|
8446
8446
|
var _a, _b, _c, _d;
|
|
8447
8447
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : '#ecedf3';
|
|
8448
8448
|
}, function (props) {
|
|
8449
8449
|
var _a, _b, _c, _d;
|
|
8450
8450
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.textColor) !== null && _d !== void 0 ? _d : 'black';
|
|
8451
8451
|
});
|
|
8452
|
-
var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_2$
|
|
8453
|
-
var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_3$
|
|
8454
|
-
var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_4$
|
|
8455
|
-
var ButtonsRow$1 = styled__default.default(LoadingOverlayButtonsRow)(templateObject_5$
|
|
8452
|
+
var ContinuityCameraCheckboxContainer$1 = styled__default.default.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n position: absolute;\n bottom: 120px;\n width: 100%;\n display: flex;\n"], ["\n position: absolute;\n bottom: 120px;\n width: 100%;\n display: flex;\n"])));
|
|
8453
|
+
var ContinuityCameraCheckboxInner = styled__default.default(GuidanceMessage)(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n align-items: center;\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n display: flex;\n gap: 8px;\n align-items: center;\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
|
|
8454
|
+
var ContinuityCameraCheckbox$1 = styled__default.default.input(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
8455
|
+
var ButtonsRow$1 = styled__default.default(LoadingOverlayButtonsRow)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n color: ", ";\n ", "\n"], ["\n color: ", ";\n ", "\n"])), function (props) {
|
|
8456
8456
|
var _a, _b, _c, _d;
|
|
8457
8457
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
|
|
8458
8458
|
}, function (props) {
|
|
8459
8459
|
var _a, _b, _c, _d, _e, _f;
|
|
8460
8460
|
return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarFontSize) ? "font-size: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.progressBarFontSize, ";") : '';
|
|
8461
8461
|
});
|
|
8462
|
-
var ProgressBarBackground$1 = styled__default.default(LoadingOverlayProgressBarBackground)(templateObject_6$
|
|
8462
|
+
var ProgressBarBackground$1 = styled__default.default(LoadingOverlayProgressBarBackground)(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n background: ", ";\n opacity: ", ";\n"], ["\n background: ", ";\n opacity: ", ";\n"])), function (props) {
|
|
8463
8463
|
var _a, _b, _c, _d;
|
|
8464
8464
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarBackgroundColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
|
|
8465
8465
|
}, function (props) {
|
|
@@ -8489,10 +8489,10 @@ var ContinueButton$1 = styled__default.default(LoaderButton)(templateObject_8$5
|
|
|
8489
8489
|
var _a, _b, _c, _d;
|
|
8490
8490
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnDisabledBorder) !== null && _d !== void 0 ? _d : 'none';
|
|
8491
8491
|
});
|
|
8492
|
-
var templateObject_1$
|
|
8492
|
+
var templateObject_1$H, templateObject_2$D, templateObject_3$r, templateObject_4$l, templateObject_5$g, templateObject_6$a, templateObject_7$6, templateObject_8$5;
|
|
8493
8493
|
|
|
8494
|
-
var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$
|
|
8495
|
-
var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$
|
|
8494
|
+
var ContinuityCameraCheckboxContainer = styled__default.default.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
|
|
8495
|
+
var ContinuityCameraCheckbox = styled__default.default.input(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8496
8496
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
8497
8497
|
var _b, _c, _d, _e;
|
|
8498
8498
|
var onDismissed = _a.onDismissed,
|
|
@@ -8613,7 +8613,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
8613
8613
|
}
|
|
8614
8614
|
}, ready ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
8615
8615
|
};
|
|
8616
|
-
var templateObject_1$
|
|
8616
|
+
var templateObject_1$G, templateObject_2$C;
|
|
8617
8617
|
|
|
8618
8618
|
var components$1 = {
|
|
8619
8619
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -8671,9 +8671,9 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
|
|
|
8671
8671
|
});
|
|
8672
8672
|
};
|
|
8673
8673
|
|
|
8674
|
-
var Card = styled__default.default.div(templateObject_1$
|
|
8675
|
-
var FlexCard = styled__default.default(Card)(templateObject_2$
|
|
8676
|
-
var templateObject_1$
|
|
8674
|
+
var Card = styled__default.default.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: min(500px, 100% - 48px);\n max-height: 100%;\n overflow: auto;\n box-sizing: border-box;\n"], ["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: min(500px, 100% - 48px);\n max-height: 100%;\n overflow: auto;\n box-sizing: border-box;\n"])));
|
|
8675
|
+
var FlexCard = styled__default.default(Card)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
8676
|
+
var templateObject_1$F, templateObject_2$B;
|
|
8677
8677
|
|
|
8678
8678
|
var imageDisplayOrder = ['idCardFront', 'idCardBack', 'idBarcodeImage', 'passport', 'singlePage', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
|
|
8679
8679
|
var downloadImage = function downloadImage(dataUrl, filename) {
|
|
@@ -8808,12 +8808,12 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8808
8808
|
finished: true
|
|
8809
8809
|
}, verbiage.retryText)))));
|
|
8810
8810
|
};
|
|
8811
|
-
var Heading$a = styled__default.default.h1(templateObject_1$
|
|
8812
|
-
var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_2$
|
|
8813
|
-
var ImageRow = styled__default.default(OverlayImageRow)(templateObject_3$
|
|
8814
|
-
var ImageCol$1 = styled__default.default.div(templateObject_4$
|
|
8815
|
-
var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_5$
|
|
8816
|
-
var DebugInfoContainer = styled__default.default.div(templateObject_6$
|
|
8811
|
+
var Heading$a = styled__default.default.h1(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n font-size: 1.5rem;\n margin-top: 0;\n margin-bottom: 1.5rem;\n"], ["\n font-size: 1.5rem;\n margin-top: 0;\n margin-bottom: 1.5rem;\n"])));
|
|
8812
|
+
var ImagesContainer = styled__default.default(OverlayImageContainer)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n flex-grow: 1;\n overflow-y: auto;\n padding-bottom: 0;\n max-width: 100%;\n"], ["\n flex-grow: 1;\n overflow-y: auto;\n padding-bottom: 0;\n max-width: 100%;\n"])));
|
|
8813
|
+
var ImageRow = styled__default.default(OverlayImageRow)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n max-width: 100%;\n flex-direction: column;\n position: relative;\n width: 100%;\n"], ["\n max-width: 100%;\n flex-direction: column;\n position: relative;\n width: 100%;\n"])));
|
|
8814
|
+
var ImageCol$1 = styled__default.default.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n width: 450px;\n max-width: 100%;\n max-height: none !important;\n"], ["\n width: 450px;\n max-width: 100%;\n max-height: none !important;\n"])));
|
|
8815
|
+
var StyledImage = styled__default.default(CapturedDocumentImg)(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n width: 100%;\n border-radius: 12px;\n"], ["\n width: 100%;\n border-radius: 12px;\n"])));
|
|
8816
|
+
var DebugInfoContainer = styled__default.default.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n margin-top: 0.5rem;\n margin-bottom: 1rem;\n padding: 0.625rem;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n line-height: 1.35;\n text-align: left;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n margin-top: 0.5rem;\n margin-bottom: 1rem;\n padding: 0.625rem;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n line-height: 1.35;\n text-align: left;\n"])));
|
|
8817
8817
|
var DebugSection = styled__default.default.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 0;\n"], ["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 0;\n"])));
|
|
8818
8818
|
var DebugLabel = styled__default.default.span(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n font-weight: 600;\n color: #495057;\n font-size: 0.8125rem;\n flex-shrink: 0;\n width: 110px;\n"], ["\n font-weight: 600;\n color: #495057;\n font-size: 0.8125rem;\n flex-shrink: 0;\n width: 110px;\n"])));
|
|
8819
8819
|
var DebugValue = styled__default.default.span(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n color: #212529;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n"], ["\n color: #212529;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n"])));
|
|
@@ -8897,7 +8897,7 @@ var BarcodeComparisonScoreLabel = styled__default.default.span(templateObject_23
|
|
|
8897
8897
|
var $isHigher = _a.$isHigher;
|
|
8898
8898
|
return $isHigher ? '#c3e6cb' : '#dee2e6';
|
|
8899
8899
|
});
|
|
8900
|
-
var templateObject_1$
|
|
8900
|
+
var templateObject_1$E, templateObject_2$A, templateObject_3$q, templateObject_4$k, templateObject_5$f, templateObject_6$9, templateObject_7$5, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1;
|
|
8901
8901
|
|
|
8902
8902
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
8903
8903
|
var _this = this;
|
|
@@ -8949,12 +8949,12 @@ function resetCanvasDimensions(canvas) {
|
|
|
8949
8949
|
canvas.style.height = '0';
|
|
8950
8950
|
}
|
|
8951
8951
|
|
|
8952
|
-
var IdCardGuideImageContainer = styled__default.default(IdCardBorder)(templateObject_1$
|
|
8952
|
+
var IdCardGuideImageContainer = styled__default.default(IdCardBorder)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n position: relative;\n ", "\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"], ["\n position: relative;\n ", "\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"])), function (props) {
|
|
8953
8953
|
return props.$isVisible ? '' : 'opacity: 0;';
|
|
8954
8954
|
}, function (props) {
|
|
8955
8955
|
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
8956
8956
|
});
|
|
8957
|
-
var IdCardGuideImage = styled__default.default.img(templateObject_2$
|
|
8957
|
+
var IdCardGuideImage = styled__default.default.img(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n max-height: 100%;\n transform-style: preserve-3d;\n ", "\n ", "\n"], ["\n max-height: 100%;\n transform-style: preserve-3d;\n ", "\n ", "\n"])), function (props) {
|
|
8958
8958
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
8959
8959
|
}, function (props) {
|
|
8960
8960
|
return props.$isInvisible ? 'opacity: 0;' : '';
|
|
@@ -9104,17 +9104,17 @@ function IdCardBorderSvg(_a) {
|
|
|
9104
9104
|
className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
|
|
9105
9105
|
}));
|
|
9106
9106
|
}
|
|
9107
|
-
var IdCardBorderContainer = styled__default.default.div(templateObject_3$
|
|
9108
|
-
var IdCardBorderInner = styled__default.default.div(templateObject_4$
|
|
9109
|
-
var SvgOverlay = styled__default.default.svg(templateObject_5$
|
|
9110
|
-
var IdCardBorderRect = styled__default.default.rect(templateObject_6$
|
|
9107
|
+
var IdCardBorderContainer = styled__default.default.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n display: flex;\n position: relative;\n margin: auto;\n\n & .idmSdkWaves {\n position: absolute;\n animation: ", " 2s ease-out infinite;\n transform-style: preserve-3d;\n\n &:nth-child(3) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(4) {\n animation-delay: 1.33s;\n }\n }\n"], ["\n align-items: center;\n justify-content: center;\n display: flex;\n position: relative;\n margin: auto;\n\n & .idmSdkWaves {\n position: absolute;\n animation: ", " 2s ease-out infinite;\n transform-style: preserve-3d;\n\n &:nth-child(3) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(4) {\n animation-delay: 1.33s;\n }\n }\n"])), wavesAnimation);
|
|
9108
|
+
var IdCardBorderInner = styled__default.default.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n max-height: 100%;\n max-width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n"], ["\n max-height: 100%;\n max-width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n"])));
|
|
9109
|
+
var SvgOverlay = styled__default.default.svg(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"])));
|
|
9110
|
+
var IdCardBorderRect = styled__default.default.rect(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n &.idmSdkProgressBorder {\n animation: ", " ", "\n ", ";\n }\n\n &.idmSdkProgressPaused {\n animation-play-state: paused;\n }\n"], ["\n &.idmSdkProgressBorder {\n animation: ", " ", "\n ", ";\n }\n\n &.idmSdkProgressPaused {\n animation-play-state: paused;\n }\n"])), progressBorderAnimation, function (props) {
|
|
9111
9111
|
var _a;
|
|
9112
9112
|
return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
|
|
9113
9113
|
}, function (props) {
|
|
9114
9114
|
var _a;
|
|
9115
9115
|
return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
|
|
9116
9116
|
});
|
|
9117
|
-
var templateObject_1$
|
|
9117
|
+
var templateObject_1$D, templateObject_2$z, templateObject_3$p, templateObject_4$j, templateObject_5$e, templateObject_6$8;
|
|
9118
9118
|
|
|
9119
9119
|
var defaultIdCaptureGuideImages = {
|
|
9120
9120
|
portrait: {
|
|
@@ -9262,7 +9262,7 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
9262
9262
|
clearTimeout(timeout);
|
|
9263
9263
|
};
|
|
9264
9264
|
}, []);
|
|
9265
|
-
return /*#__PURE__*/React__namespace.default.createElement(Wrapper$
|
|
9265
|
+
return /*#__PURE__*/React__namespace.default.createElement(Wrapper$2, {
|
|
9266
9266
|
"$isLandscape": orientation === 'landscape',
|
|
9267
9267
|
style: {
|
|
9268
9268
|
aspectRatio: aspectRatio
|
|
@@ -9303,15 +9303,15 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
9303
9303
|
style: imageStyle
|
|
9304
9304
|
})));
|
|
9305
9305
|
};
|
|
9306
|
-
var Wrapper$
|
|
9306
|
+
var Wrapper$2 = styled__default.default.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])), function (props) {
|
|
9307
9307
|
return props.$isLandscape ? 'height: 100%;' : 'height: 100%;';
|
|
9308
9308
|
});
|
|
9309
|
-
var FlipImageContainer = styled__default.default(IdCardGuideImageContainer)(templateObject_2$
|
|
9309
|
+
var FlipImageContainer = styled__default.default(IdCardGuideImageContainer)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n height: 100%; // todo: branch between desktop and mobile\n"], ["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n height: 100%; // todo: branch between desktop and mobile\n"])), function (props) {
|
|
9310
9310
|
return props.$transitionTime;
|
|
9311
9311
|
}, function (props) {
|
|
9312
9312
|
return props.$transforms;
|
|
9313
9313
|
});
|
|
9314
|
-
var templateObject_1$
|
|
9314
|
+
var templateObject_1$C, templateObject_2$y;
|
|
9315
9315
|
|
|
9316
9316
|
var GuideOrientationContext = /*#__PURE__*/React.createContext({
|
|
9317
9317
|
orientation: 'landscape',
|
|
@@ -9406,7 +9406,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
|
|
|
9406
9406
|
clearTimeout(timeout);
|
|
9407
9407
|
};
|
|
9408
9408
|
}, []);
|
|
9409
|
-
return /*#__PURE__*/React__namespace.default.createElement(Wrapper, {
|
|
9409
|
+
return /*#__PURE__*/React__namespace.default.createElement(Wrapper$1, {
|
|
9410
9410
|
style: {
|
|
9411
9411
|
aspectRatio: imageAspectRatio
|
|
9412
9412
|
},
|
|
@@ -9450,10 +9450,10 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
|
|
|
9450
9450
|
height: height
|
|
9451
9451
|
})));
|
|
9452
9452
|
};
|
|
9453
|
-
var Wrapper = styled__default.default.div(templateObject_1$
|
|
9453
|
+
var Wrapper$1 = styled__default.default.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n display: flex;\n position: absolute;\n margin: auto;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"], ["\n align-items: center;\n justify-content: center;\n display: flex;\n position: absolute;\n margin: auto;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"])), function (props) {
|
|
9454
9454
|
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
9455
9455
|
});
|
|
9456
|
-
var templateObject_1$
|
|
9456
|
+
var templateObject_1$B;
|
|
9457
9457
|
|
|
9458
9458
|
var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
9459
9459
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
@@ -9599,10 +9599,10 @@ var regionClsx = function regionClsx(classNames, which) {
|
|
|
9599
9599
|
return v;
|
|
9600
9600
|
}).join(' ');
|
|
9601
9601
|
};
|
|
9602
|
-
var StyledPageContainer = styled__default.default.div(templateObject_1$
|
|
9603
|
-
var GuidesContainer = styled__default.default.div(templateObject_2$
|
|
9604
|
-
var GuideCenterRow = styled__default.default.div(templateObject_3$
|
|
9605
|
-
var GuideRegion = styled__default.default.div(templateObject_4$
|
|
9602
|
+
var StyledPageContainer = styled__default.default.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1000;\n overflow: hidden;\n"], ["\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1000;\n overflow: hidden;\n"])));
|
|
9603
|
+
var GuidesContainer = styled__default.default.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"])));
|
|
9604
|
+
var GuideCenterRow = styled__default.default.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n min-height: 0;\n flex: 1;\n"], ["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n min-height: 0;\n flex: 1;\n"])));
|
|
9605
|
+
var GuideRegion = styled__default.default.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"])), function (props) {
|
|
9606
9606
|
var _a, _b, _c, _d, _e;
|
|
9607
9607
|
return (_e = (_a = props.$maskColor) !== null && _a !== void 0 ? _a : (_d = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.idCapture) === null || _c === void 0 ? void 0 : _c.guideOverlay) === null || _d === void 0 ? void 0 : _d.backgroundColor) !== null && _e !== void 0 ? _e : 'rgba(0, 0, 0, 0.5)';
|
|
9608
9608
|
}, function (props) {
|
|
@@ -9613,8 +9613,8 @@ var GuideRegion = styled__default.default.div(templateObject_4$g || (templateObj
|
|
|
9613
9613
|
}, function (props) {
|
|
9614
9614
|
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
9615
9615
|
});
|
|
9616
|
-
var Spacer = styled__default.default(GuideRegion)(templateObject_5$
|
|
9617
|
-
var GuideCenterRegion = styled__default.default.div(templateObject_6$
|
|
9616
|
+
var Spacer = styled__default.default(GuideRegion)(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: block;\n width: auto;\n"], ["\n display: block;\n width: auto;\n"])));
|
|
9617
|
+
var GuideCenterRegion = styled__default.default.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n ", "\n ", "\n transform-style: preserve-3d;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"], ["\n ", "\n ", "\n transform-style: preserve-3d;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"])), function (props) {
|
|
9618
9618
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
9619
9619
|
}, function (props) {
|
|
9620
9620
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
@@ -9629,7 +9629,7 @@ var GuideText = styled__default.default.span(templateObject_8$3 || (templateObje
|
|
|
9629
9629
|
var GuideCenterInner = styled__default.default.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n position: relative;\n top: 0;\n margin: auto;\n ", "\n max-height: 100%;\n max-width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n position: relative;\n top: 0;\n margin: auto;\n ", "\n max-height: 100%;\n max-width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (props) {
|
|
9630
9630
|
return props.$isLandscape ? 'height: 100%;' : 'width: 90%;';
|
|
9631
9631
|
});
|
|
9632
|
-
var templateObject_1$
|
|
9632
|
+
var templateObject_1$A, templateObject_2$x, templateObject_3$o, templateObject_4$i, templateObject_5$d, templateObject_6$7, templateObject_7$4, templateObject_8$3, templateObject_9$2;
|
|
9633
9633
|
|
|
9634
9634
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
9635
9635
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -9752,7 +9752,7 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
9752
9752
|
ref: wrapperRef,
|
|
9753
9753
|
"$maskColor": maskColor !== null && maskColor !== void 0 ? maskColor : '',
|
|
9754
9754
|
className: classNames.canvasWrapper
|
|
9755
|
-
}, /*#__PURE__*/React__namespace.default.createElement(Canvas$
|
|
9755
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Canvas$2, {
|
|
9756
9756
|
ref: canvasRef,
|
|
9757
9757
|
className: classNames.canvas
|
|
9758
9758
|
})), /*#__PURE__*/React__namespace.default.createElement(IdCaptureGuideOverlay, {
|
|
@@ -9770,11 +9770,174 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
9770
9770
|
progress: progress
|
|
9771
9771
|
}));
|
|
9772
9772
|
};
|
|
9773
|
-
var CanvasWrapper$1 = styled__default.default.div(templateObject_1$
|
|
9773
|
+
var CanvasWrapper$1 = styled__default.default.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"])), function (props) {
|
|
9774
9774
|
return props.$maskColor;
|
|
9775
9775
|
});
|
|
9776
|
-
var Canvas$
|
|
9777
|
-
var templateObject_1$
|
|
9776
|
+
var Canvas$2 = styled__default.default.canvas(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
9777
|
+
var templateObject_1$z, templateObject_2$w;
|
|
9778
|
+
|
|
9779
|
+
var PDF417_ASPECT_RATIO = 3 / 1;
|
|
9780
|
+
function BarcodeGuideOverlay(_a) {
|
|
9781
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
9782
|
+
var _l = _a.aspectRatio,
|
|
9783
|
+
aspectRatio = _l === void 0 ? PDF417_ASPECT_RATIO : _l,
|
|
9784
|
+
maskColor = _a.maskColor,
|
|
9785
|
+
_m = _a.cornerColor,
|
|
9786
|
+
cornerColor = _m === void 0 ? 'white' : _m,
|
|
9787
|
+
_o = _a.cornerLength,
|
|
9788
|
+
cornerLength = _o === void 0 ? 40 : _o,
|
|
9789
|
+
_p = _a.cornerWidth,
|
|
9790
|
+
cornerWidth = _p === void 0 ? 4 : _p,
|
|
9791
|
+
padding = _a.padding,
|
|
9792
|
+
_q = _a.borderRadius,
|
|
9793
|
+
borderRadius = _q === void 0 ? 8 : _q,
|
|
9794
|
+
_r = _a.headerText,
|
|
9795
|
+
headerText = _r === void 0 ? 'SCAN THE BARCODE' : _r,
|
|
9796
|
+
_s = _a.instructionText,
|
|
9797
|
+
instructionText = _s === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _s,
|
|
9798
|
+
_t = _a.isSuccess,
|
|
9799
|
+
isSuccess = _t === void 0 ? false : _t,
|
|
9800
|
+
_u = _a.successColor,
|
|
9801
|
+
successColor = _u === void 0 ? '#22c55e' : _u,
|
|
9802
|
+
_v = _a.classNames,
|
|
9803
|
+
classNames = _v === void 0 ? {} : _v;
|
|
9804
|
+
var canvasRef = React.useRef(null);
|
|
9805
|
+
var _w = useResizeObserver(),
|
|
9806
|
+
wrapperRef = _w.ref,
|
|
9807
|
+
_x = _w.width,
|
|
9808
|
+
wrapperWidth = _x === void 0 ? 1 : _x,
|
|
9809
|
+
_y = _w.height,
|
|
9810
|
+
wrapperHeight = _y === void 0 ? 1 : _y;
|
|
9811
|
+
var theme = styled.useTheme();
|
|
9812
|
+
if (padding === undefined) {
|
|
9813
|
+
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;
|
|
9814
|
+
}
|
|
9815
|
+
if (maskColor === undefined) {
|
|
9816
|
+
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';
|
|
9817
|
+
}
|
|
9818
|
+
React.useEffect(function () {
|
|
9819
|
+
var canvas = canvasRef.current;
|
|
9820
|
+
if (!canvas) return;
|
|
9821
|
+
// Wait for valid dimensions from resize observer
|
|
9822
|
+
if (wrapperWidth <= 1 || wrapperHeight <= 1) return;
|
|
9823
|
+
var boundingWidth = wrapperWidth - padding * 2;
|
|
9824
|
+
var boundingHeight = wrapperHeight - padding * 2;
|
|
9825
|
+
// Start with bounding box dimensions
|
|
9826
|
+
var rectWidth = boundingWidth;
|
|
9827
|
+
var rectHeight = boundingWidth / aspectRatio;
|
|
9828
|
+
// If calculated height exceeds available height, constrain by height instead
|
|
9829
|
+
if (rectHeight > boundingHeight) {
|
|
9830
|
+
rectHeight = boundingHeight;
|
|
9831
|
+
rectWidth = boundingHeight * aspectRatio;
|
|
9832
|
+
}
|
|
9833
|
+
// Center the rectangle
|
|
9834
|
+
var rectX = padding + (boundingWidth - rectWidth) / 2;
|
|
9835
|
+
var rectY = padding + (boundingHeight - rectHeight) / 2;
|
|
9836
|
+
setCanvasDimensions(canvas, wrapperWidth, wrapperHeight);
|
|
9837
|
+
var ctx = canvas.getContext('2d');
|
|
9838
|
+
if (!ctx) return;
|
|
9839
|
+
// Fill with mask color
|
|
9840
|
+
ctx.fillStyle = maskColor;
|
|
9841
|
+
ctx.clearRect(0, 0, wrapperWidth, wrapperHeight);
|
|
9842
|
+
ctx.fillRect(0, 0, wrapperWidth, wrapperHeight);
|
|
9843
|
+
// Create the cutout
|
|
9844
|
+
ctx.beginPath();
|
|
9845
|
+
ctx.roundRect(rectX, rectY, rectWidth, rectHeight, borderRadius);
|
|
9846
|
+
ctx.fillStyle = 'rgba(0,0,0,1)';
|
|
9847
|
+
ctx.globalCompositeOperation = 'destination-out';
|
|
9848
|
+
ctx.fill();
|
|
9849
|
+
ctx.globalCompositeOperation = 'source-over';
|
|
9850
|
+
// Draw corner brackets
|
|
9851
|
+
var color = isSuccess ? successColor : cornerColor;
|
|
9852
|
+
ctx.strokeStyle = color;
|
|
9853
|
+
ctx.lineWidth = cornerWidth;
|
|
9854
|
+
ctx.lineCap = 'round';
|
|
9855
|
+
var effectiveCornerLength = Math.min(cornerLength, rectWidth / 3, rectHeight / 3);
|
|
9856
|
+
// Top-left corner
|
|
9857
|
+
ctx.beginPath();
|
|
9858
|
+
ctx.moveTo(rectX + effectiveCornerLength, rectY);
|
|
9859
|
+
ctx.lineTo(rectX + borderRadius, rectY);
|
|
9860
|
+
ctx.arcTo(rectX, rectY, rectX, rectY + borderRadius, borderRadius);
|
|
9861
|
+
ctx.lineTo(rectX, rectY + effectiveCornerLength);
|
|
9862
|
+
ctx.stroke();
|
|
9863
|
+
// Top-right corner
|
|
9864
|
+
ctx.beginPath();
|
|
9865
|
+
ctx.moveTo(rectX + rectWidth - effectiveCornerLength, rectY);
|
|
9866
|
+
ctx.lineTo(rectX + rectWidth - borderRadius, rectY);
|
|
9867
|
+
ctx.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + borderRadius, borderRadius);
|
|
9868
|
+
ctx.lineTo(rectX + rectWidth, rectY + effectiveCornerLength);
|
|
9869
|
+
ctx.stroke();
|
|
9870
|
+
// Bottom-left corner
|
|
9871
|
+
ctx.beginPath();
|
|
9872
|
+
ctx.moveTo(rectX, rectY + rectHeight - effectiveCornerLength);
|
|
9873
|
+
ctx.lineTo(rectX, rectY + rectHeight - borderRadius);
|
|
9874
|
+
ctx.arcTo(rectX, rectY + rectHeight, rectX + borderRadius, rectY + rectHeight, borderRadius);
|
|
9875
|
+
ctx.lineTo(rectX + effectiveCornerLength, rectY + rectHeight);
|
|
9876
|
+
ctx.stroke();
|
|
9877
|
+
// Bottom-right corner
|
|
9878
|
+
ctx.beginPath();
|
|
9879
|
+
ctx.moveTo(rectX + rectWidth, rectY + rectHeight - effectiveCornerLength);
|
|
9880
|
+
ctx.lineTo(rectX + rectWidth, rectY + rectHeight - borderRadius);
|
|
9881
|
+
ctx.arcTo(rectX + rectWidth, rectY + rectHeight, rectX + rectWidth - borderRadius, rectY + rectHeight, borderRadius);
|
|
9882
|
+
ctx.lineTo(rectX + rectWidth - effectiveCornerLength, rectY + rectHeight);
|
|
9883
|
+
ctx.stroke();
|
|
9884
|
+
return function () {
|
|
9885
|
+
resetCanvasDimensions(canvas);
|
|
9886
|
+
};
|
|
9887
|
+
}, [aspectRatio, borderRadius, cornerColor, cornerLength, cornerWidth, isSuccess, maskColor, padding, successColor, wrapperHeight, wrapperWidth]);
|
|
9888
|
+
return /*#__PURE__*/React__namespace.default.createElement(Wrapper, {
|
|
9889
|
+
ref: wrapperRef,
|
|
9890
|
+
className: classNames.wrapper
|
|
9891
|
+
}, /*#__PURE__*/React__namespace.default.createElement(Canvas$1, {
|
|
9892
|
+
ref: canvasRef,
|
|
9893
|
+
className: classNames.canvas
|
|
9894
|
+
}), /*#__PURE__*/React__namespace.default.createElement(TextOverlay, null, /*#__PURE__*/React__namespace.default.createElement(HeaderText, {
|
|
9895
|
+
className: classNames.header
|
|
9896
|
+
}, headerText), /*#__PURE__*/React__namespace.default.createElement(InstructionText, {
|
|
9897
|
+
className: classNames.instruction
|
|
9898
|
+
}, instructionText)));
|
|
9899
|
+
}
|
|
9900
|
+
var Wrapper = styled__default.default.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1;\n"])));
|
|
9901
|
+
var Canvas$1 = styled__default.default.canvas(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
|
|
9902
|
+
var TextOverlay = styled__default.default.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n padding-top: 48px;\n pointer-events: none;\n z-index: 2;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n padding-top: 48px;\n pointer-events: none;\n z-index: 2;\n"])));
|
|
9903
|
+
var HeaderText = styled__default.default.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n color: white;\n font-size: 24px;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 16px;\n"], ["\n color: white;\n font-size: 24px;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 16px;\n"])));
|
|
9904
|
+
var InstructionText = styled__default.default.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n color: white;\n font-size: 16px;\n font-weight: 400;\n text-align: center;\n max-width: 300px;\n line-height: 1.4;\n opacity: 0.9;\n"], ["\n color: white;\n font-size: 16px;\n font-weight: 400;\n text-align: center;\n max-width: 300px;\n line-height: 1.4;\n opacity: 0.9;\n"])));
|
|
9905
|
+
var templateObject_1$y, templateObject_2$v, templateObject_3$n, templateObject_4$h, templateObject_5$c;
|
|
9906
|
+
|
|
9907
|
+
function BarcodeSuccessOverlay(_a) {
|
|
9908
|
+
var _b = _a.headerText,
|
|
9909
|
+
headerText = _b === void 0 ? 'Scan Successful!' : _b,
|
|
9910
|
+
_c = _a.processingText,
|
|
9911
|
+
processingText = _c === void 0 ? 'Processing...' : _c,
|
|
9912
|
+
_d = _a.successColor,
|
|
9913
|
+
successColor = _d === void 0 ? '#22c55e' : _d;
|
|
9914
|
+
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(BarcodeGuideOverlay, {
|
|
9915
|
+
headerText: headerText,
|
|
9916
|
+
instructionText: processingText,
|
|
9917
|
+
isSuccess: true,
|
|
9918
|
+
successColor: successColor
|
|
9919
|
+
}), /*#__PURE__*/React__namespace.default.createElement(CheckmarkWrapper, null, /*#__PURE__*/React__namespace.default.createElement(CheckmarkCircle, {
|
|
9920
|
+
"$color": successColor
|
|
9921
|
+
}, /*#__PURE__*/React__namespace.default.createElement(CheckmarkIcon, {
|
|
9922
|
+
viewBox: "0 0 24 24",
|
|
9923
|
+
fill: "none"
|
|
9924
|
+
}, /*#__PURE__*/React__namespace.default.createElement(CheckmarkPath, {
|
|
9925
|
+
d: "M5 13l4 4L19 7",
|
|
9926
|
+
stroke: "white",
|
|
9927
|
+
strokeWidth: "3",
|
|
9928
|
+
strokeLinecap: "round",
|
|
9929
|
+
strokeLinejoin: "round"
|
|
9930
|
+
})))));
|
|
9931
|
+
}
|
|
9932
|
+
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"])));
|
|
9933
|
+
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"])));
|
|
9934
|
+
var CheckmarkWrapper = styled__default.default.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n z-index: 3;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n z-index: 3;\n"])));
|
|
9935
|
+
var CheckmarkCircle = styled__default.default.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n animation: ", " 0.4s ease-out forwards;\n"], ["\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n animation: ", " 0.4s ease-out forwards;\n"])), function (props) {
|
|
9936
|
+
return props.$color;
|
|
9937
|
+
}, scaleIn);
|
|
9938
|
+
var CheckmarkIcon = styled__default.default.svg(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n width: 48px;\n height: 48px;\n"], ["\n width: 48px;\n height: 48px;\n"])));
|
|
9939
|
+
var CheckmarkPath = styled__default.default.path(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n stroke-dasharray: 24;\n stroke-dashoffset: 24;\n animation: ", " 0.4s ease-out 0.2s forwards;\n"], ["\n stroke-dasharray: 24;\n stroke-dashoffset: 24;\n animation: ", " 0.4s ease-out 0.2s forwards;\n"])), drawCheck);
|
|
9940
|
+
var templateObject_1$x, templateObject_2$u, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$6;
|
|
9778
9941
|
|
|
9779
9942
|
function IdCaptureGuides(_a) {
|
|
9780
9943
|
var _b = _a.guideType,
|
|
@@ -9796,7 +9959,15 @@ function IdCaptureGuides(_a) {
|
|
|
9796
9959
|
_k = _a.colors,
|
|
9797
9960
|
colors = _k === void 0 ? {} : _k,
|
|
9798
9961
|
_l = _a.verbiage,
|
|
9799
|
-
rawVerbiage = _l === void 0 ? {} : _l
|
|
9962
|
+
rawVerbiage = _l === void 0 ? {} : _l,
|
|
9963
|
+
_m = _a.isRequestingBetterBarcode,
|
|
9964
|
+
isRequestingBetterBarcode = _m === void 0 ? false : _m,
|
|
9965
|
+
_o = _a.isBarcodeSuccess,
|
|
9966
|
+
isBarcodeSuccess = _o === void 0 ? false : _o,
|
|
9967
|
+
_p = _a.barcodeHeaderText,
|
|
9968
|
+
barcodeHeaderText = _p === void 0 ? 'SCAN THE BARCODE' : _p,
|
|
9969
|
+
_q = _a.barcodeInstructionText,
|
|
9970
|
+
barcodeInstructionText = _q === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _q;
|
|
9800
9971
|
var state = useIdCaptureStore();
|
|
9801
9972
|
var isRearFacing = useCameraStore(function (state) {
|
|
9802
9973
|
return state.isRearFacing;
|
|
@@ -9806,6 +9977,16 @@ function IdCaptureGuides(_a) {
|
|
|
9806
9977
|
capturingText: 'Capturing...',
|
|
9807
9978
|
captureFailedText: 'Capture failed!'
|
|
9808
9979
|
});
|
|
9980
|
+
// Render barcode guide overlays when in barcode recapture state
|
|
9981
|
+
if (isRequestingBetterBarcode) {
|
|
9982
|
+
if (isBarcodeSuccess) {
|
|
9983
|
+
return /*#__PURE__*/React__namespace.default.createElement(BarcodeSuccessOverlay, null);
|
|
9984
|
+
}
|
|
9985
|
+
return /*#__PURE__*/React__namespace.default.createElement(BarcodeGuideOverlay, {
|
|
9986
|
+
headerText: barcodeHeaderText,
|
|
9987
|
+
instructionText: barcodeInstructionText
|
|
9988
|
+
});
|
|
9989
|
+
}
|
|
9809
9990
|
return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, guideType === 'overlay' && (/*#__PURE__*/React__namespace.default.createElement(IdCaptureGuideOverlay, {
|
|
9810
9991
|
images: images,
|
|
9811
9992
|
classNames: classNames,
|
|
@@ -12004,7 +12185,8 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
12004
12185
|
classNames: classNames.guides,
|
|
12005
12186
|
colors: colors,
|
|
12006
12187
|
verbiage: idCaptureVerbiage,
|
|
12007
|
-
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments
|
|
12188
|
+
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments,
|
|
12189
|
+
isRequestingBetterBarcode: state.captureState === 'requestingBetterBarcode'
|
|
12008
12190
|
}), debugMode && !((_h = (_g = theme.idCapture) === null || _g === void 0 ? void 0 : _g.capturePreview) === null || _h === void 0 ? void 0 : _h.disabled) && state.captureState === 'requestingFlip' && !separateIdCardCaptureSequence && state.imageUrl && (/*#__PURE__*/React__namespace.default.createElement(IdCaptureImagePreview, {
|
|
12009
12191
|
classNames: (_j = classNames.capture) === null || _j === void 0 ? void 0 : _j.imagePreview,
|
|
12010
12192
|
text: (_k = idCaptureVerbiages === null || idCaptureVerbiages === void 0 ? void 0 : idCaptureVerbiages.idCardFront) === null || _k === void 0 ? void 0 : _k.processingIdCardText,
|