pipwave-ekyc-uikit 0.0.1-beta.5 → 0.0.1-beta.6
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/pw-bundle.js +11 -11
- package/package.json +2 -1
package/dist/pw-bundle.js
CHANGED
|
@@ -26,7 +26,7 @@ return /******/ (() => { // webpackBootstrap
|
|
|
26
26
|
/***/ ((module, __webpack_exports__, __webpack_require__) => {
|
|
27
27
|
|
|
28
28
|
"use strict";
|
|
29
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_pikaday_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../../node_modules/css-loader/dist/cjs.js!./pikaday.css */ \"./node_modules/css-loader/dist/cjs.js!./src/assets/scss/pikaday.css\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/getUrl.js */ \"./node_modules/css-loader/dist/runtime/getUrl.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3__);\n// Imports\n\n\n\n\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! ../img/mask-smile.png */ \"./src/assets/img/mask-smile.png\"), __webpack_require__.b);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(/* asset import */ __webpack_require__(/*! ../img/mask-neutral.png */ \"./src/assets/img/mask-neutral.png\"), __webpack_require__.b);\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Roboto+Flex:ital,wght@0,400;0,600;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/icon?family=Material+Icons);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_pikaday_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3___default()(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3___default()(___CSS_LOADER_URL_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgba(59, 130, 246, 0.5);\n --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);\n --tw-ring-shadow: 0 0 rgba(0,0,0,0);\n --tw-shadow: 0 0 rgba(0,0,0,0);\n --tw-shadow-colored: 0 0 rgba(0,0,0,0);\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgba(59, 130, 246, 0.5);\n --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);\n --tw-ring-shadow: 0 0 rgba(0,0,0,0);\n --tw-shadow: 0 0 rgba(0,0,0,0);\n --tw-shadow-colored: 0 0 rgba(0,0,0,0);\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n.pw-invisible {\n visibility: hidden;\n}\n\n.\\\\!pw-absolute {\n position: absolute !important;\n}\n\n.pw-absolute {\n position: absolute;\n}\n\n.pw-relative {\n position: relative;\n}\n\n.pw-inset-0 {\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n}\n\n.pw-bottom-0 {\n bottom: 0px;\n}\n\n.pw-bottom-16 {\n bottom: 4rem;\n}\n\n.pw-bottom-28 {\n bottom: 7rem;\n}\n\n.pw-bottom-\\\\[10\\\\%\\\\] {\n bottom: 10%;\n}\n\n.pw-left-0 {\n left: 0px;\n}\n\n.pw-left-1 {\n left: 0.25rem;\n}\n\n.pw-left-1\\\\/2 {\n left: 50%;\n}\n\n.pw-left-10 {\n left: 2.5rem;\n}\n\n.pw-left-2 {\n left: 0.5rem;\n}\n\n.pw-left-4 {\n left: 1rem;\n}\n\n.pw-left-8 {\n left: 2rem;\n}\n\n.pw-left-\\\\[100\\\\%\\\\] {\n left: 100%;\n}\n\n.pw-right-0 {\n right: 0px;\n}\n\n.pw-right-1 {\n right: 0.25rem;\n}\n\n.pw-right-2\\\\/4 {\n right: 50%;\n}\n\n.pw-right-3 {\n right: 0.75rem;\n}\n\n.pw-right-5 {\n right: 1.25rem;\n}\n\n.pw-top-0 {\n top: 0px;\n}\n\n.pw-top-1\\\\/2 {\n top: 50%;\n}\n\n.pw-top-1\\\\/3 {\n top: 33.333333%;\n}\n\n.pw-top-2 {\n top: 0.5rem;\n}\n\n.pw-top-2\\\\/4 {\n top: 50%;\n}\n\n.pw-top-3 {\n top: 0.75rem;\n}\n\n.pw-top-4 {\n top: 1rem;\n}\n\n.pw-top-5 {\n top: 1.25rem;\n}\n\n.pw-z-10 {\n z-index: 10;\n}\n\n.pw-z-30 {\n z-index: 30;\n}\n\n.pw-z-40 {\n z-index: 40;\n}\n\n.pw-z-50 {\n z-index: 50;\n}\n\n.pw-z-\\\\[2\\\\] {\n z-index: 2;\n}\n\n.pw-m-0 {\n margin: 0px;\n}\n\n.pw-mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.pw-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pw-mb-10 {\n margin-bottom: 2.5rem;\n}\n\n.pw-mb-16 {\n margin-bottom: 4rem;\n}\n\n.pw-mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.pw-mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.pw-mb-4 {\n margin-bottom: 1rem;\n}\n\n.pw-mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.pw-mb-6 {\n margin-bottom: 1.5rem;\n}\n\n.pw-mb-7 {\n margin-bottom: 1.75rem;\n}\n\n.pw-mb-8 {\n margin-bottom: 2rem;\n}\n\n.pw-mb-9 {\n margin-bottom: 2.25rem;\n}\n\n.pw-ml-2 {\n margin-left: 0.5rem;\n}\n\n.pw-mt-16 {\n margin-top: 4rem;\n}\n\n.pw-mt-2 {\n margin-top: 0.5rem;\n}\n\n.pw-mt-4 {\n margin-top: 1rem;\n}\n\n.pw-mt-7 {\n margin-top: 1.75rem;\n}\n\n.pw-box-border {\n box-sizing: border-box;\n}\n\n.pw-block {\n display: block;\n}\n\n.pw-inline-block {\n display: inline-block;\n}\n\n.pw-flex {\n display: flex;\n}\n\n.pw-hidden {\n display: none;\n}\n\n.\\\\!pw-h-px {\n height: 1px !important;\n}\n\n.pw-h-1 {\n height: 0.25rem;\n}\n\n.pw-h-10 {\n height: 2.5rem;\n}\n\n.pw-h-11 {\n height: 2.75rem;\n}\n\n.pw-h-14 {\n height: 3.5rem;\n}\n\n.pw-h-16 {\n height: 4rem;\n}\n\n.pw-h-24 {\n height: 6rem;\n}\n\n.pw-h-3 {\n height: 0.75rem;\n}\n\n.pw-h-40 {\n height: 10rem;\n}\n\n.pw-h-52 {\n height: 13rem;\n}\n\n.pw-h-9 {\n height: 2.25rem;\n}\n\n.pw-h-\\\\[calc\\\\(100\\\\%-2\\\\*1rem\\\\)\\\\] {\n height: calc(100% - 2rem);\n}\n\n.pw-h-\\\\[calc\\\\(100vh-3rem\\\\)\\\\] {\n height: calc(100vh - 3rem);\n}\n\n.pw-h-full {\n height: 100%;\n}\n\n.pw-max-h-\\\\[51rem\\\\] {\n max-height: 51rem;\n}\n\n.pw-max-h-\\\\[90vh\\\\] {\n max-height: 90vh;\n}\n\n.\\\\!pw-w-px {\n width: 1px !important;\n}\n\n.pw-w-10\\\\/12 {\n width: 83.333333%;\n}\n\n.pw-w-11 {\n width: 2.75rem;\n}\n\n.pw-w-14 {\n width: 3.5rem;\n}\n\n.pw-w-16 {\n width: 4rem;\n}\n\n.pw-w-24 {\n width: 6rem;\n}\n\n.pw-w-36 {\n width: 9rem;\n}\n\n.pw-w-4\\\\/5 {\n width: 80%;\n}\n\n.pw-w-48 {\n width: 12rem;\n}\n\n.pw-w-6 {\n width: 1.5rem;\n}\n\n.pw-w-60 {\n width: 15rem;\n}\n\n.pw-w-72 {\n width: 18rem;\n}\n\n.pw-w-\\\\[calc\\\\(100\\\\%-2\\\\*1\\\\.25rem\\\\)\\\\] {\n width: calc(100% - 2.5rem);\n}\n\n.pw-w-full {\n width: 100%;\n}\n\n.pw-max-w-sm {\n max-width: 24rem;\n}\n\n.pw-flex-none {\n flex: none;\n}\n\n.pw-grow {\n flex-grow: 1;\n}\n\n.pw-basis-2\\\\/5 {\n flex-basis: 40%;\n}\n\n.pw-basis-3\\\\/5 {\n flex-basis: 60%;\n}\n\n.-pw-translate-x-1\\\\/2 {\n --tw-translate-x: -50%;\n transform: translate(-50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-y-1\\\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-y-1\\\\/3 {\n --tw-translate-y: -33.333333%;\n transform: translate(var(--tw-translate-x), -33.333333%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-y-2\\\\/4 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-translate-x-2\\\\/4 {\n --tw-translate-x: 50%;\n transform: translate(50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-translate-y-full {\n --tw-translate-y: 100%;\n transform: translate(var(--tw-translate-x), 100%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-scale-\\\\[1\\\\.7\\\\] {\n --tw-scale-x: 1.7;\n --tw-scale-y: 1.7;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1.7) scaleY(1.7);\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@keyframes pw-camera-rotation {\n 0% {\n transform: rotate3d(0, 1, 0, 0deg);\n }\n 100% {\n transform: rotate3d(0, 1, 0, 180deg);\n }\n}\n.pw-animate-camera {\n animation: pw-camera-rotation 1s ease-out 0.5s 1;\n}\n\n@keyframes pw-loading {\n 0% {\n transform: translateX(-100%);\n }\n 50% {\n transform: translateX(0%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n.pw-animate-loading {\n animation: pw-loading 1.25s linear infinite;\n}\n\n@keyframes pw-spin {\n to {\n transform: rotate(360deg);\n }\n}\n.pw-animate-spin {\n animation: pw-spin 1s linear infinite;\n}\n\n.pw-cursor-pointer {\n cursor: pointer;\n}\n\n.pw-resize-none {\n resize: none;\n}\n\n.pw-flex-row {\n flex-direction: row;\n}\n\n.pw-flex-col {\n flex-direction: column;\n}\n\n.pw-items-end {\n align-items: flex-end;\n}\n\n.pw-items-center {\n align-items: center;\n}\n\n.pw-justify-end {\n justify-content: flex-end;\n}\n\n.pw-justify-center {\n justify-content: center;\n}\n\n.pw-justify-between {\n justify-content: space-between;\n}\n\n.pw-gap-1 {\n gap: 0.25rem;\n}\n\n.pw-gap-x-1 {\n -moz-column-gap: 0.25rem;\n column-gap: 0.25rem;\n}\n\n.pw-gap-x-3 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n\n.pw-overflow-auto {\n overflow: auto;\n}\n\n.\\\\!pw-overflow-hidden {\n overflow: hidden !important;\n}\n\n.pw-overflow-hidden {\n overflow: hidden;\n}\n\n.pw-overflow-y-auto {\n overflow-y: auto;\n}\n\n.pw-overflow-x-hidden {\n overflow-x: hidden;\n}\n\n.pw-overflow-y-hidden {\n overflow-y: hidden;\n}\n\n.\\\\!pw-whitespace-nowrap {\n white-space: nowrap !important;\n}\n\n.pw-rounded-2xl {\n border-radius: 1rem;\n}\n\n.pw-rounded-\\\\[2\\\\.5rem\\\\] {\n border-radius: 2.5rem;\n}\n\n.pw-rounded-\\\\[40px\\\\] {\n border-radius: 40px;\n}\n\n.pw-rounded-full {\n border-radius: 9999px;\n}\n\n.pw-rounded-lg {\n border-radius: 0.5rem;\n}\n\n.pw-rounded-t-lg {\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n}\n\n.\\\\!pw-border-0 {\n border-width: 0px !important;\n}\n\n.pw-border {\n border-width: 1px;\n}\n\n.pw-border-2 {\n border-width: 2px;\n}\n\n.pw-border-4 {\n border-width: 4px;\n}\n\n.pw-border-8 {\n border-width: 8px;\n}\n\n.pw-border-solid {\n border-style: solid;\n}\n\n.pw-border-none {\n border-style: none;\n}\n\n.pw-border-current {\n border-color: currentColor;\n}\n\n.pw-border-gray-200 {\n --tw-border-opacity: 1;\n border-color: rgb(229, 231, 235);\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n}\n\n.pw-border-grey-5 {\n --tw-border-opacity: 1;\n border-color: rgb(201, 201, 201);\n border-color: rgba(201, 201, 201, var(--tw-border-opacity));\n}\n\n.pw-border-primary {\n --tw-border-opacity: 1;\n border-color: rgb(154, 45, 183);\n border-color: rgba(154, 45, 183, var(--tw-border-opacity));\n}\n\n.pw-border-red-500 {\n --tw-border-opacity: 1;\n border-color: rgb(239, 68, 68);\n border-color: rgba(239, 68, 68, var(--tw-border-opacity));\n}\n\n.pw-border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255, 255, 255);\n border-color: rgba(255, 255, 255, var(--tw-border-opacity));\n}\n\n.pw-border-r-transparent {\n border-right-color: transparent;\n}\n\n.pw-bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0, 0, 0);\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.pw-bg-grey-2 {\n --tw-bg-opacity: 1;\n background-color: rgb(250, 250, 252);\n background-color: rgba(250, 250, 252, var(--tw-bg-opacity));\n}\n\n.pw-bg-grey-4 {\n --tw-bg-opacity: 1;\n background-color: rgb(231, 231, 236);\n background-color: rgba(231, 231, 236, var(--tw-bg-opacity));\n}\n\n.pw-bg-primary {\n --tw-bg-opacity: 1;\n background-color: rgb(154, 45, 183);\n background-color: rgba(154, 45, 183, var(--tw-bg-opacity));\n}\n\n.pw-bg-primary-light {\n --tw-bg-opacity: 1;\n background-color: rgb(251, 235, 255);\n background-color: rgba(251, 235, 255, var(--tw-bg-opacity));\n}\n\n.pw-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255, 255, 255);\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.pw-bg-opacity-70 {\n --tw-bg-opacity: 0.7 ;\n}\n\n.pw-bg-opacity-75 {\n --tw-bg-opacity: 0.75 ;\n}\n\n.pw-bg-opacity-80 {\n --tw-bg-opacity: 0.8 ;\n}\n\n.pw-bg-opacity-90 {\n --tw-bg-opacity: 0.9 ;\n}\n\n.pw-bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n\n.pw-from-\\\\[\\\\#AF4AFF\\\\] {\n --tw-gradient-from: #AF4AFF var(--tw-gradient-from-position);\n --tw-gradient-to: rgba(175, 74, 255, 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) ;\n}\n\n.pw-to-\\\\[\\\\#DD53FF\\\\] {\n --tw-gradient-to: #DD53FF var(--tw-gradient-to-position) ;\n}\n\n.pw-object-contain {\n -o-object-fit: contain;\n object-fit: contain;\n}\n\n.\\\\!pw-p-0 {\n padding: 0px !important;\n}\n\n.pw-p-0 {\n padding: 0px;\n}\n\n.pw-p-4 {\n padding: 1rem;\n}\n\n.pw-p-5 {\n padding: 1.25rem;\n}\n\n.pw-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.pw-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.pw-px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.pw-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.pw-py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.pw-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.pw-pl-8 {\n padding-left: 2rem;\n}\n\n.pw-pt-1 {\n padding-top: 0.25rem;\n}\n\n.pw-pt-3 {\n padding-top: 0.75rem;\n}\n\n.pw-pt-4 {\n padding-top: 1rem;\n}\n\n.pw-text-center {\n text-align: center;\n}\n\n.pw-align-\\\\[-0\\\\.125em\\\\] {\n vertical-align: -0.125em;\n}\n\n.pw-font-\\\\[\\\\'Roboto_Flex\\\\'\\\\] {\n font-family: \"Roboto Flex\";\n}\n\n.pw-font-pw {\n font-family: Roboto Flex;\n}\n\n.pw-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.pw-text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem;\n}\n\n.pw-text-4xl {\n font-size: 2.25rem;\n line-height: 2.5rem;\n}\n\n.pw-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.pw-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n\n.pw-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.pw-font-medium {\n font-weight: 500;\n}\n\n.pw-text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156, 163, 175);\n color: rgba(156, 163, 175, var(--tw-text-opacity));\n}\n\n.pw-text-green-500 {\n --tw-text-opacity: 1;\n color: rgb(34, 197, 94);\n color: rgba(34, 197, 94, var(--tw-text-opacity));\n}\n\n.pw-text-grey-10 {\n --tw-text-opacity: 1;\n color: rgb(29, 30, 34);\n color: rgba(29, 30, 34, var(--tw-text-opacity));\n}\n\n.pw-text-grey-5 {\n --tw-text-opacity: 1;\n color: rgb(201, 201, 201);\n color: rgba(201, 201, 201, var(--tw-text-opacity));\n}\n\n.pw-text-grey-6 {\n --tw-text-opacity: 1;\n color: rgb(158, 158, 158);\n color: rgba(158, 158, 158, var(--tw-text-opacity));\n}\n\n.pw-text-grey-7 {\n --tw-text-opacity: 1;\n color: rgb(117, 117, 117);\n color: rgba(117, 117, 117, var(--tw-text-opacity));\n}\n\n.pw-text-orange-400 {\n --tw-text-opacity: 1;\n color: rgb(251, 146, 60);\n color: rgba(251, 146, 60, var(--tw-text-opacity));\n}\n\n.pw-text-primary {\n --tw-text-opacity: 1;\n color: rgb(154, 45, 183);\n color: rgba(154, 45, 183, var(--tw-text-opacity));\n}\n\n.pw-text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239, 68, 68);\n color: rgba(239, 68, 68, var(--tw-text-opacity));\n}\n\n.pw-text-white {\n --tw-text-opacity: 1;\n color: rgb(255, 255, 255);\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.pw-no-underline {\n text-decoration-line: none;\n}\n\n.pw-shadow-footer-shadow {\n --tw-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);\n --tw-shadow-colored: 0px 0px 8px 0px var(--tw-shadow-color);\n box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0px 0px 8px 0px rgba(0, 0, 0, 0.15);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);\n}\n\n.pw-shadow-grey-5 {\n --tw-shadow-color: #C9C9C9;\n --tw-shadow: var(--tw-shadow-colored) ;\n}\n\n.pw-outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.pw-outline-dashed {\n outline-style: dashed;\n}\n\n.pw-outline-grey-6 {\n outline-color: #9E9E9E;\n}\n\n.pw-drop-shadow-\\\\[0_4px_8px_rgba\\\\(200\\\\,123\\\\,221\\\\,0\\\\.60\\\\)\\\\] {\n --tw-drop-shadow: drop-shadow(0 4px 8px rgba(200,123,221,0.60));\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) drop-shadow(0 4px 8px rgba(200, 123, 221, 0.6));\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.pw-transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.pw-transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.pw-duration-100 {\n transition-duration: 100ms;\n}\n\n.pw-duration-200 {\n transition-duration: 200ms;\n}\n\n.pw-duration-500 {\n transition-duration: 500ms;\n}\n\n.\\\\!\\\\[clip\\\\:pw-rect\\\\(0\\\\,0\\\\,0\\\\,0\\\\)\\\\] {\n clip: pw-rect(0, 0, 0, 0) !important;\n}\n\n.camera-bg {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n margin: 0;\n height: 100%;\n width: 100%;\n background-color: black;\n}\n.camera-header-area {\n position: absolute;\n text-align: center;\n z-index: 2;\n top: 5%;\n width: 100%;\n}\n.camera-header-area .title {\n color: white;\n}\n.camera-body-area {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n}\n.camera-body-area .video-container {\n z-index: -1;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.camera-body-area .video-element {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.camera-body-area .canvas-element {\n position: absolute;\n z-index: 9;\n}\n.camera-body-area .overlay-container {\n position: absolute;\n margin: auto;\n}\n.camera-body-area .overlay-element {\n position: relative;\n background-position: center center;\n background-repeat: no-repeat;\n background-size: cover;\n box-shadow: 0px -50px 200px rgba(60, 60, 58, 0.76), 0px 50px 200px rgba(60, 60, 58, 0.76), -100px 0px 100px 9999px rgba(25, 20, 20, 0.9);\n}\n.camera-body-area .border-element {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.camera-body-area .border-top-element:before,\n.camera-body-area .border-top-element:after,\n.camera-body-area .border-bottom-element:before,\n.camera-body-area .border-bottom-element:after {\n position: absolute;\n content: \"\";\n width: 10%;\n height: 15%;\n border-color: white;\n border-style: solid;\n}\n.camera-body-area .border-top-element:before {\n top: -2px;\n left: -2px;\n border-width: 4px 0 0 4px;\n border-top-left-radius: 15px;\n}\n.camera-body-area .border-top-element:after {\n top: -2px;\n right: -2px;\n border-width: 4px 4px 0 0;\n border-top-right-radius: 15px;\n}\n.camera-body-area .border-bottom-element:before {\n bottom: -2px;\n right: -2px;\n border-width: 0 4px 4px 0;\n border-bottom-right-radius: 15px;\n}\n.camera-body-area .border-bottom-element:after {\n bottom: -2px;\n left: -2px;\n border-width: 0 0 4px 4px;\n border-bottom-left-radius: 15px;\n}\n.camera-body-area .overlay-element--active {\n border-color: #8ede34 !important;\n}\n.camera-body-area .overlay-element--selfie-smile {\n background-size: contain;\n background-position: center center;\n background-image: url(${___CSS_LOADER_URL_REPLACEMENT_0___});\n}\n.camera-body-area .overlay-element--selfie-neutral {\n background-size: contain;\n background-position: center center;\n background-image: url(${___CSS_LOADER_URL_REPLACEMENT_1___});\n}\n.camera-footer-area {\n position: absolute;\n text-align: center;\n z-index: 2;\n bottom: 10%;\n width: 100%;\n}\n.camera-footer-area .instruction {\n color: white;\n}\n\n.active\\\\:pw-scale-90:active {\n --tw-scale-x: .9;\n --tw-scale-y: .9;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(0.9) scaleY(0.9);\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-visible {\n visibility: visible;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-visible {\n visibility: visible;\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-2\\\\/4 {\n top: 50%;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-2\\\\/4 {\n top: 50%;\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-7 {\n top: 1.75rem;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-7 {\n top: 1.75rem;\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:-pw-translate-y-2\\\\/4 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:-pw-translate-y-2\\\\/4 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.pw-peer:focus ~ .peer-focus\\\\:pw-invisible {\n visibility: hidden;\n}\n\n.pw-peer:focus ~ .peer-focus\\\\:pw-top-3 {\n top: 0.75rem;\n}\n\n.pw-peer:focus ~ .peer-focus\\\\:pw-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n@media (min-width: 384px) {\n .pw-min\\\\:pw-border-solid {\n border-style: solid;\n }\n .pw-min\\\\:pw-border-grey-4 {\n --tw-border-opacity: 1;\n border-color: rgb(231, 231, 236);\n border-color: rgba(231, 231, 236, var(--tw-border-opacity));\n }\n}\n.invalid\\\\:\\\\[\\\\&\\\\:not\\\\(\\\\:-moz-placeholder-shown\\\\)\\\\:not\\\\(\\\\:focus\\\\)\\\\]\\\\:pw-border-red-500:not(:-moz-placeholder-shown):not(:focus):invalid {\n --tw-border-opacity: 1;\n border-color: rgb(239, 68, 68);\n border-color: rgba(239, 68, 68, var(--tw-border-opacity));\n}\n\n.invalid\\\\:\\\\[\\\\&\\\\:not\\\\(\\\\:placeholder-shown\\\\)\\\\:not\\\\(\\\\:focus\\\\)\\\\]\\\\:pw-border-red-500:not(:placeholder-shown):not(:focus):invalid {\n --tw-border-opacity: 1;\n border-color: rgb(239, 68, 68);\n border-color: rgba(239, 68, 68, var(--tw-border-opacity));\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://PWUISDK/./src/assets/scss/index.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js");
|
|
29
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_pikaday_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../../node_modules/css-loader/dist/cjs.js!./pikaday.css */ \"./node_modules/css-loader/dist/cjs.js!./src/assets/scss/pikaday.css\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/getUrl.js */ \"./node_modules/css-loader/dist/runtime/getUrl.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3__);\n// Imports\n\n\n\n\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! ../img/mask-smile.png */ \"./src/assets/img/mask-smile.png\"), __webpack_require__.b);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(/* asset import */ __webpack_require__(/*! ../img/mask-neutral.png */ \"./src/assets/img/mask-neutral.png\"), __webpack_require__.b);\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Roboto+Flex:ital,wght@0,400;0,600;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/icon?family=Material+Icons);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_pikaday_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3___default()(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3___default()(___CSS_LOADER_URL_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgba(59, 130, 246, 0.5);\n --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);\n --tw-ring-shadow: 0 0 rgba(0,0,0,0);\n --tw-shadow: 0 0 rgba(0,0,0,0);\n --tw-shadow-colored: 0 0 rgba(0,0,0,0);\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgba(59, 130, 246, 0.5);\n --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);\n --tw-ring-shadow: 0 0 rgba(0,0,0,0);\n --tw-shadow: 0 0 rgba(0,0,0,0);\n --tw-shadow-colored: 0 0 rgba(0,0,0,0);\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n.pw-invisible {\n visibility: hidden;\n}\n\n.\\\\!pw-absolute {\n position: absolute !important;\n}\n\n.pw-absolute {\n position: absolute;\n}\n\n.pw-relative {\n position: relative;\n}\n\n.pw-inset-0 {\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n}\n\n.pw-bottom-0 {\n bottom: 0px;\n}\n\n.pw-bottom-16 {\n bottom: 4rem;\n}\n\n.pw-bottom-28 {\n bottom: 7rem;\n}\n\n.pw-bottom-\\\\[10\\\\%\\\\] {\n bottom: 10%;\n}\n\n.pw-left-0 {\n left: 0px;\n}\n\n.pw-left-1 {\n left: 0.25rem;\n}\n\n.pw-left-1\\\\/2 {\n left: 50%;\n}\n\n.pw-left-10 {\n left: 2.5rem;\n}\n\n.pw-left-2 {\n left: 0.5rem;\n}\n\n.pw-left-4 {\n left: 1rem;\n}\n\n.pw-left-8 {\n left: 2rem;\n}\n\n.pw-left-\\\\[100\\\\%\\\\] {\n left: 100%;\n}\n\n.pw-right-0 {\n right: 0px;\n}\n\n.pw-right-1 {\n right: 0.25rem;\n}\n\n.pw-right-2\\\\/4 {\n right: 50%;\n}\n\n.pw-right-3 {\n right: 0.75rem;\n}\n\n.pw-right-5 {\n right: 1.25rem;\n}\n\n.pw-top-0 {\n top: 0px;\n}\n\n.pw-top-1\\\\/2 {\n top: 50%;\n}\n\n.pw-top-1\\\\/3 {\n top: 33.333333%;\n}\n\n.pw-top-2 {\n top: 0.5rem;\n}\n\n.pw-top-2\\\\/4 {\n top: 50%;\n}\n\n.pw-top-3 {\n top: 0.75rem;\n}\n\n.pw-top-4 {\n top: 1rem;\n}\n\n.pw-top-5 {\n top: 1.25rem;\n}\n\n.pw-z-10 {\n z-index: 10;\n}\n\n.pw-z-30 {\n z-index: 30;\n}\n\n.pw-z-40 {\n z-index: 40;\n}\n\n.pw-z-50 {\n z-index: 50;\n}\n\n.pw-z-\\\\[2\\\\] {\n z-index: 2;\n}\n\n.pw-m-0 {\n margin: 0px;\n}\n\n.pw-mx-auto {\n margin-left: auto;\n margin-right: auto;\n}\n\n.pw-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.pw-mb-10 {\n margin-bottom: 2.5rem;\n}\n\n.pw-mb-16 {\n margin-bottom: 4rem;\n}\n\n.pw-mb-2 {\n margin-bottom: 0.5rem;\n}\n\n.pw-mb-3 {\n margin-bottom: 0.75rem;\n}\n\n.pw-mb-4 {\n margin-bottom: 1rem;\n}\n\n.pw-mb-5 {\n margin-bottom: 1.25rem;\n}\n\n.pw-mb-6 {\n margin-bottom: 1.5rem;\n}\n\n.pw-mb-7 {\n margin-bottom: 1.75rem;\n}\n\n.pw-mb-8 {\n margin-bottom: 2rem;\n}\n\n.pw-mb-9 {\n margin-bottom: 2.25rem;\n}\n\n.pw-ml-2 {\n margin-left: 0.5rem;\n}\n\n.pw-mt-16 {\n margin-top: 4rem;\n}\n\n.pw-mt-2 {\n margin-top: 0.5rem;\n}\n\n.pw-mt-4 {\n margin-top: 1rem;\n}\n\n.pw-mt-7 {\n margin-top: 1.75rem;\n}\n\n.pw-box-border {\n box-sizing: border-box;\n}\n\n.pw-block {\n display: block;\n}\n\n.pw-inline-block {\n display: inline-block;\n}\n\n.pw-flex {\n display: flex;\n}\n\n.pw-hidden {\n display: none;\n}\n\n.\\\\!pw-h-px {\n height: 1px !important;\n}\n\n.pw-h-1 {\n height: 0.25rem;\n}\n\n.pw-h-10 {\n height: 2.5rem;\n}\n\n.pw-h-11 {\n height: 2.75rem;\n}\n\n.pw-h-14 {\n height: 3.5rem;\n}\n\n.pw-h-16 {\n height: 4rem;\n}\n\n.pw-h-24 {\n height: 6rem;\n}\n\n.pw-h-3 {\n height: 0.75rem;\n}\n\n.pw-h-40 {\n height: 10rem;\n}\n\n.pw-h-52 {\n height: 13rem;\n}\n\n.pw-h-9 {\n height: 2.25rem;\n}\n\n.pw-h-\\\\[calc\\\\(100\\\\%-2\\\\*1rem\\\\)\\\\] {\n height: calc(100% - 2rem);\n}\n\n.pw-h-\\\\[calc\\\\(100vh-3rem\\\\)\\\\] {\n height: calc(100vh - 3rem);\n}\n\n.pw-h-full {\n height: 100%;\n}\n\n.pw-max-h-\\\\[51rem\\\\] {\n max-height: 51rem;\n}\n\n.pw-max-h-\\\\[90vh\\\\] {\n max-height: 90vh;\n}\n\n.\\\\!pw-w-px {\n width: 1px !important;\n}\n\n.pw-w-10\\\\/12 {\n width: 83.333333%;\n}\n\n.pw-w-11 {\n width: 2.75rem;\n}\n\n.pw-w-14 {\n width: 3.5rem;\n}\n\n.pw-w-16 {\n width: 4rem;\n}\n\n.pw-w-24 {\n width: 6rem;\n}\n\n.pw-w-36 {\n width: 9rem;\n}\n\n.pw-w-4\\\\/5 {\n width: 80%;\n}\n\n.pw-w-48 {\n width: 12rem;\n}\n\n.pw-w-6 {\n width: 1.5rem;\n}\n\n.pw-w-60 {\n width: 15rem;\n}\n\n.pw-w-72 {\n width: 18rem;\n}\n\n.pw-w-\\\\[calc\\\\(100\\\\%-2\\\\*1\\\\.25rem\\\\)\\\\] {\n width: calc(100% - 2.5rem);\n}\n\n.pw-w-full {\n width: 100%;\n}\n\n.pw-max-w-sm {\n max-width: 24rem;\n}\n\n.pw-flex-none {\n flex: none;\n}\n\n.pw-grow {\n flex-grow: 1;\n}\n\n.pw-basis-2\\\\/5 {\n flex-basis: 40%;\n}\n\n.pw-basis-3\\\\/5 {\n flex-basis: 60%;\n}\n\n.-pw-translate-x-1\\\\/2 {\n --tw-translate-x: -50%;\n transform: translate(-50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-y-1\\\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-y-1\\\\/3 {\n --tw-translate-y: -33.333333%;\n transform: translate(var(--tw-translate-x), -33.333333%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-y-2\\\\/4 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-translate-x-2\\\\/4 {\n --tw-translate-x: 50%;\n transform: translate(50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-translate-y-full {\n --tw-translate-y: 100%;\n transform: translate(var(--tw-translate-x), 100%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-scale-\\\\[1\\\\.7\\\\] {\n --tw-scale-x: 1.7;\n --tw-scale-y: 1.7;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1.7) scaleY(1.7);\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@keyframes pw-camera-rotation {\n 0% {\n transform: rotate3d(0, 1, 0, 0deg);\n }\n 100% {\n transform: rotate3d(0, 1, 0, 180deg);\n }\n}\n.pw-animate-camera {\n animation: pw-camera-rotation 1s ease-out 0.5s 1;\n}\n\n@keyframes pw-loading {\n 0% {\n transform: translateX(-100%);\n }\n 50% {\n transform: translateX(0%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n.pw-animate-loading {\n animation: pw-loading 1.25s linear infinite;\n}\n\n@keyframes pw-spin {\n to {\n transform: rotate(360deg);\n }\n}\n.pw-animate-spin {\n animation: pw-spin 1s linear infinite;\n}\n\n.pw-cursor-pointer {\n cursor: pointer;\n}\n\n.pw-resize-none {\n resize: none;\n}\n\n.pw-flex-row {\n flex-direction: row;\n}\n\n.pw-flex-col {\n flex-direction: column;\n}\n\n.pw-items-end {\n align-items: flex-end;\n}\n\n.pw-items-center {\n align-items: center;\n}\n\n.pw-justify-end {\n justify-content: flex-end;\n}\n\n.pw-justify-center {\n justify-content: center;\n}\n\n.pw-justify-between {\n justify-content: space-between;\n}\n\n.pw-gap-1 {\n gap: 0.25rem;\n}\n\n.pw-gap-x-1 {\n -moz-column-gap: 0.25rem;\n column-gap: 0.25rem;\n}\n\n.pw-gap-x-3 {\n -moz-column-gap: 0.75rem;\n column-gap: 0.75rem;\n}\n\n.pw-overflow-auto {\n overflow: auto;\n}\n\n.\\\\!pw-overflow-hidden {\n overflow: hidden !important;\n}\n\n.pw-overflow-hidden {\n overflow: hidden;\n}\n\n.pw-overflow-y-auto {\n overflow-y: auto;\n}\n\n.pw-overflow-x-hidden {\n overflow-x: hidden;\n}\n\n.pw-overflow-y-hidden {\n overflow-y: hidden;\n}\n\n.\\\\!pw-whitespace-nowrap {\n white-space: nowrap !important;\n}\n\n.pw-rounded-2xl {\n border-radius: 1rem;\n}\n\n.pw-rounded-\\\\[2\\\\.5rem\\\\] {\n border-radius: 2.5rem;\n}\n\n.pw-rounded-\\\\[40px\\\\] {\n border-radius: 40px;\n}\n\n.pw-rounded-full {\n border-radius: 9999px;\n}\n\n.pw-rounded-lg {\n border-radius: 0.5rem;\n}\n\n.pw-rounded-t-lg {\n border-top-left-radius: 0.5rem;\n border-top-right-radius: 0.5rem;\n}\n\n.\\\\!pw-border-0 {\n border-width: 0px !important;\n}\n\n.pw-border {\n border-width: 1px;\n}\n\n.pw-border-2 {\n border-width: 2px;\n}\n\n.pw-border-4 {\n border-width: 4px;\n}\n\n.pw-border-8 {\n border-width: 8px;\n}\n\n.pw-border-solid {\n border-style: solid;\n}\n\n.pw-border-none {\n border-style: none;\n}\n\n.pw-border-current {\n border-color: currentColor;\n}\n\n.pw-border-gray-200 {\n --tw-border-opacity: 1;\n border-color: rgb(229, 231, 235);\n border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n}\n\n.pw-border-grey-5 {\n --tw-border-opacity: 1;\n border-color: rgb(201, 201, 201);\n border-color: rgba(201, 201, 201, var(--tw-border-opacity));\n}\n\n.pw-border-primary {\n --tw-border-opacity: 1;\n border-color: rgb(154, 45, 183);\n border-color: rgba(154, 45, 183, var(--tw-border-opacity));\n}\n\n.pw-border-red-500 {\n --tw-border-opacity: 1;\n border-color: rgb(239, 68, 68);\n border-color: rgba(239, 68, 68, var(--tw-border-opacity));\n}\n\n.pw-border-white {\n --tw-border-opacity: 1;\n border-color: rgb(255, 255, 255);\n border-color: rgba(255, 255, 255, var(--tw-border-opacity));\n}\n\n.pw-border-r-transparent {\n border-right-color: transparent;\n}\n\n.pw-bg-black {\n --tw-bg-opacity: 1;\n background-color: rgb(0, 0, 0);\n background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.pw-bg-grey-2 {\n --tw-bg-opacity: 1;\n background-color: rgb(250, 250, 252);\n background-color: rgba(250, 250, 252, var(--tw-bg-opacity));\n}\n\n.pw-bg-grey-4 {\n --tw-bg-opacity: 1;\n background-color: rgb(231, 231, 236);\n background-color: rgba(231, 231, 236, var(--tw-bg-opacity));\n}\n\n.pw-bg-primary {\n --tw-bg-opacity: 1;\n background-color: rgb(154, 45, 183);\n background-color: rgba(154, 45, 183, var(--tw-bg-opacity));\n}\n\n.pw-bg-primary-light {\n --tw-bg-opacity: 1;\n background-color: rgb(251, 235, 255);\n background-color: rgba(251, 235, 255, var(--tw-bg-opacity));\n}\n\n.pw-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255, 255, 255);\n background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.pw-bg-opacity-70 {\n --tw-bg-opacity: 0.7 ;\n}\n\n.pw-bg-opacity-75 {\n --tw-bg-opacity: 0.75 ;\n}\n\n.pw-bg-opacity-80 {\n --tw-bg-opacity: 0.8 ;\n}\n\n.pw-bg-opacity-90 {\n --tw-bg-opacity: 0.9 ;\n}\n\n.pw-bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n\n.pw-from-\\\\[\\\\#AF4AFF\\\\] {\n --tw-gradient-from: #AF4AFF var(--tw-gradient-from-position);\n --tw-gradient-to: rgba(175, 74, 255, 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) ;\n}\n\n.pw-to-\\\\[\\\\#DD53FF\\\\] {\n --tw-gradient-to: #DD53FF var(--tw-gradient-to-position) ;\n}\n\n.pw-object-contain {\n -o-object-fit: contain;\n object-fit: contain;\n}\n\n.\\\\!pw-p-0 {\n padding: 0px !important;\n}\n\n.pw-p-0 {\n padding: 0px;\n}\n\n.pw-p-4 {\n padding: 1rem;\n}\n\n.pw-p-5 {\n padding: 1.25rem;\n}\n\n.pw-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.pw-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.pw-px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.pw-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.pw-py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.pw-py-4 {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.pw-pl-8 {\n padding-left: 2rem;\n}\n\n.pw-pt-1 {\n padding-top: 0.25rem;\n}\n\n.pw-pt-3 {\n padding-top: 0.75rem;\n}\n\n.pw-pt-4 {\n padding-top: 1rem;\n}\n\n.pw-text-center {\n text-align: center;\n}\n\n.pw-align-\\\\[-0\\\\.125em\\\\] {\n vertical-align: -0.125em;\n}\n\n.pw-font-\\\\[\\\\'Roboto_Flex\\\\'\\\\] {\n font-family: \"Roboto Flex\";\n}\n\n.pw-font-pw {\n font-family: Roboto Flex;\n}\n\n.pw-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.pw-text-3xl {\n font-size: 1.875rem;\n line-height: 2.25rem;\n}\n\n.pw-text-4xl {\n font-size: 2.25rem;\n line-height: 2.5rem;\n}\n\n.pw-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.pw-text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem;\n}\n\n.pw-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.pw-font-medium {\n font-weight: 500;\n}\n\n.pw-text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156, 163, 175);\n color: rgba(156, 163, 175, var(--tw-text-opacity));\n}\n\n.pw-text-green-500 {\n --tw-text-opacity: 1;\n color: rgb(34, 197, 94);\n color: rgba(34, 197, 94, var(--tw-text-opacity));\n}\n\n.pw-text-grey-10 {\n --tw-text-opacity: 1;\n color: rgb(29, 30, 34);\n color: rgba(29, 30, 34, var(--tw-text-opacity));\n}\n\n.pw-text-grey-5 {\n --tw-text-opacity: 1;\n color: rgb(201, 201, 201);\n color: rgba(201, 201, 201, var(--tw-text-opacity));\n}\n\n.pw-text-grey-6 {\n --tw-text-opacity: 1;\n color: rgb(158, 158, 158);\n color: rgba(158, 158, 158, var(--tw-text-opacity));\n}\n\n.pw-text-grey-7 {\n --tw-text-opacity: 1;\n color: rgb(117, 117, 117);\n color: rgba(117, 117, 117, var(--tw-text-opacity));\n}\n\n.pw-text-orange-400 {\n --tw-text-opacity: 1;\n color: rgb(251, 146, 60);\n color: rgba(251, 146, 60, var(--tw-text-opacity));\n}\n\n.pw-text-primary {\n --tw-text-opacity: 1;\n color: rgb(154, 45, 183);\n color: rgba(154, 45, 183, var(--tw-text-opacity));\n}\n\n.pw-text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239, 68, 68);\n color: rgba(239, 68, 68, var(--tw-text-opacity));\n}\n\n.pw-text-white {\n --tw-text-opacity: 1;\n color: rgb(255, 255, 255);\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.pw-no-underline {\n text-decoration-line: none;\n}\n\n.pw-shadow-footer-shadow {\n --tw-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);\n --tw-shadow-colored: 0px 0px 8px 0px var(--tw-shadow-color);\n box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0px 0px 8px 0px rgba(0, 0, 0, 0.15);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);\n}\n\n.pw-shadow-grey-5 {\n --tw-shadow-color: #C9C9C9;\n --tw-shadow: var(--tw-shadow-colored) ;\n}\n\n.pw-outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.pw-outline-dashed {\n outline-style: dashed;\n}\n\n.pw-outline-grey-6 {\n outline-color: #9E9E9E;\n}\n\n.pw-drop-shadow-\\\\[0_4px_8px_rgba\\\\(200\\\\,123\\\\,221\\\\,0\\\\.60\\\\)\\\\] {\n --tw-drop-shadow: drop-shadow(0 4px 8px rgba(200,123,221,0.60));\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) drop-shadow(0 4px 8px rgba(200, 123, 221, 0.6));\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.pw-transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.pw-transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n.pw-duration-100 {\n transition-duration: 100ms;\n}\n\n.pw-duration-200 {\n transition-duration: 200ms;\n}\n\n.pw-duration-500 {\n transition-duration: 500ms;\n}\n\n.\\\\!\\\\[clip\\\\:pw-rect\\\\(0\\\\,0\\\\,0\\\\,0\\\\)\\\\] {\n clip: pw-rect(0, 0, 0, 0) !important;\n}\n\n.pw-watermark {\n position: absolute;\n transform: rotate(-25deg);\n opacity: 0.5;\n font-weight: 500;\n font-size: 20px;\n text-transform: capitalize;\n color: #9e9e9e;\n white-space: nowrap;\n overflow: hidden;\n -webkit-text-stroke-width: 0.3px;\n -webkit-text-stroke-color: #1d1e22;\n}\n\n.camera-bg {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n margin: 0;\n height: 100%;\n width: 100%;\n background-color: black;\n}\n.camera-header-area {\n position: absolute;\n text-align: center;\n z-index: 2;\n top: 5%;\n width: 100%;\n}\n.camera-header-area .title {\n color: white;\n}\n.camera-body-area {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n}\n.camera-body-area .video-container {\n z-index: -1;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.camera-body-area .video-element {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.camera-body-area .canvas-element {\n position: absolute;\n z-index: 9;\n}\n.camera-body-area .overlay-container {\n position: absolute;\n margin: auto;\n z-index: 1;\n}\n.camera-body-area .overlay-element {\n position: relative;\n background-position: center center;\n background-repeat: no-repeat;\n background-size: cover;\n box-shadow: 0px -50px 200px rgba(60, 60, 58, 0.76), 0px 50px 200px rgba(60, 60, 58, 0.76), -100px 0px 100px 9999px rgba(25, 20, 20, 0.9);\n}\n.camera-body-area .border-element {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.camera-body-area .border-top-element:before,\n.camera-body-area .border-top-element:after,\n.camera-body-area .border-bottom-element:before,\n.camera-body-area .border-bottom-element:after {\n position: absolute;\n content: \"\";\n width: 10%;\n height: 15%;\n border-color: white;\n border-style: solid;\n}\n.camera-body-area .border-top-element:before {\n top: -2px;\n left: -2px;\n border-width: 4px 0 0 4px;\n border-top-left-radius: 15px;\n}\n.camera-body-area .border-top-element:after {\n top: -2px;\n right: -2px;\n border-width: 4px 4px 0 0;\n border-top-right-radius: 15px;\n}\n.camera-body-area .border-bottom-element:before {\n bottom: -2px;\n right: -2px;\n border-width: 0 4px 4px 0;\n border-bottom-right-radius: 15px;\n}\n.camera-body-area .border-bottom-element:after {\n bottom: -2px;\n left: -2px;\n border-width: 0 0 4px 4px;\n border-bottom-left-radius: 15px;\n}\n.camera-body-area .overlay-element--active {\n border-color: #8ede34 !important;\n}\n.camera-body-area .overlay-element--selfie-smile {\n background-size: contain;\n background-position: center center;\n background-image: url(${___CSS_LOADER_URL_REPLACEMENT_0___});\n}\n.camera-body-area .overlay-element--selfie-neutral {\n background-size: contain;\n background-position: center center;\n background-image: url(${___CSS_LOADER_URL_REPLACEMENT_1___});\n}\n.camera-footer-area {\n position: absolute;\n text-align: center;\n z-index: 2;\n bottom: 10%;\n width: 100%;\n}\n.camera-footer-area .instruction {\n color: white;\n}\n\n.active\\\\:pw-scale-90:active {\n --tw-scale-x: .9;\n --tw-scale-y: .9;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(0.9) scaleY(0.9);\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-visible {\n visibility: visible;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-visible {\n visibility: visible;\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-2\\\\/4 {\n top: 50%;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-2\\\\/4 {\n top: 50%;\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-7 {\n top: 1.75rem;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-7 {\n top: 1.75rem;\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:-pw-translate-y-2\\\\/4 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:-pw-translate-y-2\\\\/4 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.pw-peer:focus ~ .peer-focus\\\\:pw-invisible {\n visibility: hidden;\n}\n\n.pw-peer:focus ~ .peer-focus\\\\:pw-top-3 {\n top: 0.75rem;\n}\n\n.pw-peer:focus ~ .peer-focus\\\\:pw-text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n@media (min-width: 384px) {\n .pw-min\\\\:pw-border-solid {\n border-style: solid;\n }\n .pw-min\\\\:pw-border-grey-4 {\n --tw-border-opacity: 1;\n border-color: rgb(231, 231, 236);\n border-color: rgba(231, 231, 236, var(--tw-border-opacity));\n }\n}\n.invalid\\\\:\\\\[\\\\&\\\\:not\\\\(\\\\:-moz-placeholder-shown\\\\)\\\\:not\\\\(\\\\:focus\\\\)\\\\]\\\\:pw-border-red-500:not(:-moz-placeholder-shown):not(:focus):invalid {\n --tw-border-opacity: 1;\n border-color: rgb(239, 68, 68);\n border-color: rgba(239, 68, 68, var(--tw-border-opacity));\n}\n\n.invalid\\\\:\\\\[\\\\&\\\\:not\\\\(\\\\:placeholder-shown\\\\)\\\\:not\\\\(\\\\:focus\\\\)\\\\]\\\\:pw-border-red-500:not(:placeholder-shown):not(:focus):invalid {\n --tw-border-opacity: 1;\n border-color: rgb(239, 68, 68);\n border-color: rgba(239, 68, 68, var(--tw-border-opacity));\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://PWUISDK/./src/assets/scss/index.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js");
|
|
30
30
|
|
|
31
31
|
/***/ }),
|
|
32
32
|
|
|
@@ -3473,7 +3473,7 @@ eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElem
|
|
|
3473
3473
|
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
|
|
3474
3474
|
|
|
3475
3475
|
"use strict";
|
|
3476
|
-
eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.displayMode = exports.mainScreenId = void 0;\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nclass MainPage {\n get mainScreenId() {\n return exports.mainScreenId;\n }\n get displayMode() {\n return exports.displayMode;\n }\n set mainScreenId(value) {\n exports.mainScreenId = value;\n }\n set displayMode(value) {\n exports.displayMode = value;\n }\n constructor(mainScreenId, displayMode) {\n this.mainScreenId = mainScreenId;\n this.displayMode = displayMode;\n }\n renderLoadingScreen() {\n this.overlayElement = document.createElement(\"div\");\n this.overlayElement.classList.add(\"pw-bg-black\", \"pw-bg-opacity-70\", \"pw-absolute\", \"pw-top-0\", \"pw-bottom-0\", \"pw-left-0\", \"pw-right-0\", \"pw-z-50\");\n this.overlayContent = document.createElement(\"div\");\n this.overlayContent.classList.add(\"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\");\n const spinner = (0, components_1.createSpinner)(4, \"grey-5\", 8);\n this.overlayContent.appendChild(spinner);\n this.overlayElement.appendChild(this.overlayContent);\n const screen = document.getElementById(this.mainScreenId);\n screen === null || screen === void 0 ? void 0 : screen.appendChild(this.overlayElement);\n }\n updateOverlayContent(content) {\n var _a, _b;\n (_a = this.overlayContent) === null || _a === void 0 ? void 0 : _a.remove();\n this.overlayContent = content;\n (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.appendChild(this.overlayContent);\n }\n removeOverlayElement() {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.remove();\n }\n proceedNextMainstep(nextStep) { }\n closeMainPage() {\n const mainScreen = document.getElementById(this.mainScreenId);\n const event = new CustomEvent(\"close:ekyc\");\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.remove();\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.dispatchEvent(event);\n }\n renderContent(content) {\n const screen = document.getElementById(this.mainScreenId);\n screen === null || screen === void 0 ? void 0 : screen.appendChild(content);\n }\n clearScreen() {\n const screen = document.getElementById(this.mainScreenId);\n screen === null || screen === void 0 ? void 0 : screen.replaceChildren();\n }\n finishEkyc() {\n const mainScreen = document.getElementById(this.mainScreenId);\n const event = new CustomEvent(\"finish:ekyc\");\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.remove();\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.dispatchEvent(event);\n }\n openImageFullScreen(img) {\n this.overlayElement = document.createElement(\"div\");\n this.overlayElement.classList.add(\"pw-bg-black\", \"pw-bg-opacity-90\", \"pw-absolute\", \"pw-top-0\", \"pw-bottom-0\", \"pw-left-0\", \"pw-right-0\", \"pw-z-50\", \"pw-transition-all\", \"pw-duration-500\");\n const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n closeIcon.classList.add(\"pw-absolute\", \"pw-top-5\", \"pw-right-5\");\n closeIcon.addEventListener(\"click\", () => {\n this.removeOverlayElement();\n });\n this.overlayElement.appendChild(closeIcon);\n this.overlayContent = document.createElement(\"div\");\n this.overlayContent.classList.add(\"pw-absolute\", \"pw-left-1\", \"pw-right-1\", \"pw-top-1/3\", \"pw-text-white\");\n const image = document.createElement(\"img\");\n image.classList.add(\"pw-w-full\");\n image.setAttribute(\"src\", img);\n this.overlayContent.appendChild(
|
|
3476
|
+
eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.displayMode = exports.mainScreenId = void 0;\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nclass MainPage {\n get mainScreenId() {\n return exports.mainScreenId;\n }\n get displayMode() {\n return exports.displayMode;\n }\n set mainScreenId(value) {\n exports.mainScreenId = value;\n }\n set displayMode(value) {\n exports.displayMode = value;\n }\n constructor(mainScreenId, displayMode) {\n this.mainScreenId = mainScreenId;\n this.displayMode = displayMode;\n }\n renderLoadingScreen() {\n this.overlayElement = document.createElement(\"div\");\n this.overlayElement.classList.add(\"pw-bg-black\", \"pw-bg-opacity-70\", \"pw-absolute\", \"pw-top-0\", \"pw-bottom-0\", \"pw-left-0\", \"pw-right-0\", \"pw-z-50\");\n this.overlayContent = document.createElement(\"div\");\n this.overlayContent.classList.add(\"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\");\n const spinner = (0, components_1.createSpinner)(4, \"grey-5\", 8);\n this.overlayContent.appendChild(spinner);\n this.overlayElement.appendChild(this.overlayContent);\n const screen = document.getElementById(this.mainScreenId);\n screen === null || screen === void 0 ? void 0 : screen.appendChild(this.overlayElement);\n }\n updateOverlayContent(content) {\n var _a, _b;\n (_a = this.overlayContent) === null || _a === void 0 ? void 0 : _a.remove();\n this.overlayContent = content;\n (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.appendChild(this.overlayContent);\n }\n removeOverlayElement() {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.remove();\n }\n proceedNextMainstep(nextStep) { }\n closeMainPage() {\n const mainScreen = document.getElementById(this.mainScreenId);\n const event = new CustomEvent(\"close:ekyc\");\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.remove();\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.dispatchEvent(event);\n }\n renderContent(content) {\n const screen = document.getElementById(this.mainScreenId);\n screen === null || screen === void 0 ? void 0 : screen.appendChild(content);\n }\n clearScreen() {\n const screen = document.getElementById(this.mainScreenId);\n screen === null || screen === void 0 ? void 0 : screen.replaceChildren();\n }\n finishEkyc() {\n const mainScreen = document.getElementById(this.mainScreenId);\n const event = new CustomEvent(\"finish:ekyc\");\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.remove();\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.dispatchEvent(event);\n }\n openImageFullScreen(img, watermarkText) {\n this.overlayElement = document.createElement(\"div\");\n this.overlayElement.classList.add(\"pw-bg-black\", \"pw-bg-opacity-90\", \"pw-absolute\", \"pw-top-0\", \"pw-bottom-0\", \"pw-left-0\", \"pw-right-0\", \"pw-z-50\", \"pw-transition-all\", \"pw-duration-500\");\n const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n closeIcon.classList.add(\"pw-absolute\", \"pw-top-5\", \"pw-right-5\");\n closeIcon.addEventListener(\"click\", () => {\n this.removeOverlayElement();\n });\n this.overlayElement.appendChild(closeIcon);\n this.overlayContent = document.createElement(\"div\");\n this.overlayContent.classList.add(\"pw-absolute\", \"pw-left-1\", \"pw-right-1\", \"pw-top-1/3\", \"pw-text-white\");\n const imageDiv = document.createElement(\"div\");\n imageDiv.classList.add(\"pw-relative\", \"pw-flex\", \"pw-justify-center\", \"pw-items-center\", \"pw-overflow-hidden\");\n const image = document.createElement(\"img\");\n image.classList.add(\"pw-w-full\");\n image.setAttribute(\"src\", img);\n if (watermarkText && watermarkText.trim() !== \"\") {\n const imgWatermark = document.createElement(\"div\");\n imgWatermark.classList.add(\"pw-watermark\");\n imgWatermark.innerHTML = watermarkText;\n imageDiv.appendChild(imgWatermark);\n }\n imageDiv.appendChild(image);\n this.overlayContent.appendChild(imageDiv);\n this.overlayElement.appendChild(this.overlayContent);\n const screen = document.getElementById(this.mainScreenId);\n screen === null || screen === void 0 ? void 0 : screen.appendChild(this.overlayElement);\n // this.overlayElement.classList.add(\"pw-bg-opacity-80\");\n }\n openErrorPage() {\n this.clearScreen();\n const errorDiv = document.createElement(\"div\");\n errorDiv.classList.add(\"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-h-full\");\n const contentDiv = document.createElement(\"div\");\n errorDiv.appendChild(contentDiv);\n const navigationDiv = document.createElement(\"div\");\n navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-16\");\n const closeButton = document.createElement(\"div\");\n closeButton.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n closeButton.appendChild(closeIcon);\n navigationDiv.appendChild(closeButton);\n contentDiv.appendChild(navigationDiv);\n const errorContainer = document.createElement(\"div\");\n errorContainer.classList.add(\"pw-relative\", \"pw-h-full\");\n const errorContentDiv = document.createElement(\"div\");\n errorContentDiv.classList.add(\"pw-absolute\", \"pw-top-1/3\", \"pw-text-center\", \"-pw-translate-y-1/3\");\n const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n warningIcon.classList.add(\"pw-text-orange-400\");\n warningIcon.style.fontSize = \"60px\";\n errorContentDiv.appendChild(warningIcon);\n const errorTitle = document.createElement(\"div\");\n errorTitle.classList.add(\"pw-text-xl\", \"pw-mb-4\");\n errorTitle.innerHTML = \"Something went wrong\";\n errorContentDiv.appendChild(errorTitle);\n const errorDescription = document.createElement(\"div\");\n errorDescription.innerHTML =\n \"Please contact customer support for assistance or retry.\";\n errorContentDiv.appendChild(errorDescription);\n errorContainer.appendChild(errorContentDiv);\n errorDiv.appendChild(errorContainer);\n const screen = document.getElementById(this.mainScreenId);\n screen === null || screen === void 0 ? void 0 : screen.appendChild(errorDiv);\n }\n}\nexports[\"default\"] = MainPage;\n\n\n//# sourceURL=webpack://PWUISDK/./src/classes/MainPage.ts?");
|
|
3477
3477
|
|
|
3478
3478
|
/***/ }),
|
|
3479
3479
|
|
|
@@ -3638,7 +3638,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
|
|
|
3638
3638
|
/***/ ((__unused_webpack_module, exports) => {
|
|
3639
3639
|
|
|
3640
3640
|
"use strict";
|
|
3641
|
-
eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.setSelfieImg = exports.getSelfieImg = exports.setBackImg = exports.getBackImg = exports.setFrontImg = exports.getFrontImg = void 0;\nlet frontImg;\nlet backImg;\nlet selfieImg;\nfunction getFrontImg() {\n return frontImg;\n}\nexports.getFrontImg = getFrontImg;\nfunction setFrontImg(img) {\n frontImg = img;\n}\nexports.setFrontImg = setFrontImg;\nfunction getBackImg() {\n return backImg;\n}\nexports.getBackImg = getBackImg;\nfunction setBackImg(img) {\n backImg = img;\n}\nexports.setBackImg = setBackImg;\nfunction getSelfieImg() {\n return selfieImg;\n}\nexports.getSelfieImg = getSelfieImg;\nfunction setSelfieImg() {\n return selfieImg;\n}\nexports.setSelfieImg = setSelfieImg;\n\n\n//# sourceURL=webpack://PWUISDK/./src/helper/imagesHelper.ts?");
|
|
3641
|
+
eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.getWatermarkText = exports.setSelfieImg = exports.getSelfieImg = exports.setBackImg = exports.getBackImg = exports.setFrontImg = exports.getFrontImg = void 0;\nlet frontImg;\nlet backImg;\nlet selfieImg;\nfunction getFrontImg() {\n return frontImg;\n}\nexports.getFrontImg = getFrontImg;\nfunction setFrontImg(img) {\n frontImg = img;\n}\nexports.setFrontImg = setFrontImg;\nfunction getBackImg() {\n return backImg;\n}\nexports.getBackImg = getBackImg;\nfunction setBackImg(img) {\n backImg = img;\n}\nexports.setBackImg = setBackImg;\nfunction getSelfieImg() {\n return selfieImg;\n}\nexports.getSelfieImg = getSelfieImg;\nfunction setSelfieImg() {\n return selfieImg;\n}\nexports.setSelfieImg = setSelfieImg;\nfunction getWatermarkText(name) {\n const capitalName = name.toUpperCase();\n return `FOR ${capitalName} USE ONLY`;\n}\nexports.getWatermarkText = getWatermarkText;\n\n\n//# sourceURL=webpack://PWUISDK/./src/helper/imagesHelper.ts?");
|
|
3642
3642
|
|
|
3643
3643
|
/***/ }),
|
|
3644
3644
|
|
|
@@ -3682,7 +3682,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3682
3682
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
3683
3683
|
|
|
3684
3684
|
"use strict";
|
|
3685
|
-
eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst CardError_1 = __importDefault(__webpack_require__(/*! ./CardError */ \"./src/pageClass/CardError.ts\"));\nconst StartSelfie_1 = __importDefault(__webpack_require__(/*! ./StartSelfie */ \"./src/pageClass/StartSelfie.ts\"));\nconst ReviewEkyc_1 = __importDefault(__webpack_require__(/*! ./ReviewEkyc */ \"./src/pageClass/ReviewEkyc.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nclass ConfirmDoc extends MainPage_1.default {\n constructor(mainScreenId, displayMode, defaultCountry, docType, frontImg, backImg) {\n super(mainScreenId, displayMode);\n this.defaultCountry = defaultCountry;\n this.docType = docType;\n this.frontImg = frontImg;\n if (backImg) {\n this.backImg = backImg;\n }\n }\n render() {\n this.renderContent(this.createPage());\n }\n createPage() {\n const mainDiv = document.createElement(\"div\");\n mainDiv.classList.add(\"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-right-0\", \"pw-bottom-0\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-between\");\n const confirmIdDiv = document.createElement(\"div\");\n confirmIdDiv.classList.add(\"pw-overflow-y-auto\", \"pw-p-5\");\n const navigationDiv = document.createElement(\"div\");\n navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-6\");\n const stepper = new stepper_1.default();\n const stepperElement = stepper.render(3, 5);\n navigationDiv.classList.add(\"pw-pt-3\");\n navigationDiv.appendChild(stepperElement);\n const closeButtonDiv = document.createElement(\"div\");\n closeButtonDiv.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n const closeButton = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n closeButtonDiv.appendChild(closeButton);\n closeButton.addEventListener(\"click\", () => this.closeMainPage());\n navigationDiv.appendChild(closeButtonDiv);\n confirmIdDiv.appendChild(navigationDiv);\n const titleDiv = document.createElement(\"div\");\n titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-6\", \"pw-text-center\");\n titleDiv.innerHTML = \"Confirm your document\";\n confirmIdDiv.appendChild(titleDiv);\n const descriptionDiv = document.createElement(\"div\");\n descriptionDiv.classList.add(\"pw-mb-4\", \"pw-text-center\");\n descriptionDiv.innerHTML =\n \"Submit front and back of the same document, make sure it's clear and not expired.\";\n confirmIdDiv.appendChild(descriptionDiv);\n const frontIdDiv = document.createElement(\"div\");\n frontIdDiv.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-3\");\n const frontIdContentDiv = document.createElement(\"div\");\n frontIdContentDiv.classList.add(\"pw-relative\", \"pw-flex\", \"pw-justify-end\", \"pw-mb-5\");\n frontIdDiv.appendChild(frontIdContentDiv);\n const frontIdWording = document.createElement(\"div\");\n frontIdWording.classList.add(\"pw-text-center\", \"pw-absolute\", \"pw-top-2\", \"pw-right-2/4\", \"pw-translate-x-2/4\");\n frontIdWording.innerHTML = \"Front\";\n const rotateContentDiv = document.createElement(\"div\");\n const rotateButton = document.createElement(\"div\");\n rotateButton.classList.add(\"pw-box-border\", \"pw-w-14\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\");\n const rotateLeft = (0, getGoogleIcon_1.getGoogleIcon)(\"rotate_left\");\n rotateButton.appendChild(rotateLeft);\n rotateContentDiv.appendChild(rotateButton);\n frontIdContentDiv.appendChild(frontIdWording);\n frontIdContentDiv.appendChild(rotateContentDiv);\n confirmIdDiv.appendChild(frontIdDiv);\n const frontImgDiv = document.createElement(\"div\");\n frontImgDiv.classList.add(\"pw-mx-auto\", \"pw-w-36\", \"pw-h-24\", \"pw-rounded-lg\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-transition-all\", \"pw-duration-500\");\n const frontImg = document.createElement(\"img\");\n frontImg.classList.add(\"pw-rounded-lg\", \"pw-object-contain\");\n frontImg.setAttribute(\"src\", this.frontImg);\n frontImgDiv.appendChild(frontImg);\n frontImgDiv.addEventListener(\"click\", () => {\n this.openImageFullScreen(this.frontImg);\n });\n frontIdDiv.appendChild(frontImgDiv);\n let rotation = 0;\n const angle = 90;\n rotateContentDiv.addEventListener(\"click\", () => {\n rotation = rotation + angle;\n frontImgDiv.style.transform = `rotate(-${rotation}deg)`;\n });\n const retakeFrontIdButton = document.createElement(\"div\");\n retakeFrontIdButton.classList.add(\"pw-mx-auto\", \"pw-box-border\", \"pw-w-36\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\", \"pw-cursor-pointer\");\n retakeFrontIdButton.innerHTML = \"Retake\";\n retakeFrontIdButton.addEventListener(\"click\", () => { });\n frontIdDiv.appendChild(retakeFrontIdButton);\n // confirmIdDiv\n const backIdDiv = document.createElement(\"div\");\n backIdDiv.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-3\");\n const backIdContentDiv = document.createElement(\"div\");\n backIdContentDiv.classList.add(\"pw-relative\", \"pw-flex\", \"pw-justify-end\", \"pw-mb-5\");\n backIdDiv.appendChild(backIdContentDiv);\n const backIdWording = document.createElement(\"div\");\n backIdWording.classList.add(\"pw-text-center\", \"pw-absolute\", \"pw-top-2\", \"pw-right-2/4\", \"pw-translate-x-2/4\");\n backIdWording.innerHTML = \"Back\";\n backIdContentDiv.appendChild(backIdWording);\n // rotate content is from above\n const rotateContentBackId = document.createElement(\"div\");\n // rotateContentBackId.classList.add(\"pw-flex-none\");\n const rotateButtonBackId = document.createElement(\"div\");\n rotateButtonBackId.classList.add(\"pw-box-border\", \"pw-w-14\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\");\n const roateLeftBackId = (0, getGoogleIcon_1.getGoogleIcon)(\"rotate_left\");\n rotateButtonBackId.appendChild(roateLeftBackId);\n rotateContentBackId.appendChild(rotateButtonBackId);\n backIdContentDiv.appendChild(rotateContentBackId);\n if (this.backImg) {\n const backImgDiv = document.createElement(\"div\");\n backImgDiv.classList.add(\"pw-mx-auto\", \"pw-w-36\", \"pw-h-24\", \"pw-rounded-lg\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-transition-all\", \"pw-duration-500\");\n const backImg = document.createElement(\"img\");\n backImg.classList.add(\"pw-rounded-lg\");\n backImg.setAttribute(\"src\", this.backImg);\n backImgDiv.appendChild(backImg);\n backIdDiv.appendChild(backImgDiv);\n backImgDiv.addEventListener(\"click\", () => {\n this.openImageFullScreen(this.backImg);\n });\n const retakeBackIdButton = document.createElement(\"div\");\n retakeBackIdButton.classList.add(\"pw-mx-auto\", \"pw-box-border\", \"pw-w-36\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\", \"pw-cursor-pointer\");\n retakeBackIdButton.innerHTML = \"Retake\";\n backIdDiv.appendChild(retakeBackIdButton);\n confirmIdDiv.appendChild(backIdDiv);\n let backRotation = 0;\n const backAngle = 90;\n rotateContentBackId.addEventListener(\"click\", () => {\n backRotation = backRotation + backAngle;\n backImgDiv.style.transform = `rotate(-${backRotation}deg)`;\n });\n }\n const proceedButtonDiv = document.createElement(\"div\");\n proceedButtonDiv.classList.add(\"pw-p-5\", \"pw-shadow-footer-shadow\");\n const proceedButton = (0, components_1.createPrimaryButton)(\"Proceed\");\n proceedButton.addEventListener(\"click\", () => this.onClickProceed(proceedButton));\n proceedButtonDiv.appendChild(proceedButton);\n mainDiv.appendChild(confirmIdDiv);\n mainDiv.appendChild(proceedButtonDiv);\n return mainDiv;\n }\n onClickProceed(proceedButton) {\n return __awaiter(this, void 0, void 0, function* () {\n // on loading btn\n const loadingSpinner = (0, components_1.createSpinner)();\n proceedButton.innerHTML = \"\";\n proceedButton.appendChild(loadingSpinner);\n try {\n const req = Object.assign(Object.assign({ front_doc_base64: this.frontImg }, (this.backImg && { back_doc_base64: this.backImg })), { doc_type: this.docType, issuing_country: this.defaultCountry });\n yield uisdk_1.pwInstance.uploadDoc(req);\n const startSelfie = new StartSelfie_1.default(this.mainScreenId, this.displayMode);\n this.clearScreen();\n startSelfie.render();\n }\n catch (err) {\n if ([\"PwError\", \"PwReqError\"].includes(err.name) && err.type) {\n if ([\n \"openApi/verification-type-invalid\",\n \"openApi/issuing-country-invalid\",\n \"openApi/doc-type-invalid\",\n \"openApi/doc-unpair\",\n \"openApi/doc-empty\",\n \"openApi/doc-front-back-img-unsimilar\",\n \"openApi/doc-not-positioned-proper\",\n \"openApi/img-exposed\",\n ].includes(err.type)) {\n this.clearScreen();\n const failPage = new CardError_1.default(this.mainScreenId, this.displayMode);\n return failPage.render();\n }\n if ([\n \"openApi/max-doc-attempt\",\n \"openApi/limit-exceed\",\n \"openApi/max-session-attempt\",\n \"openApi/session-id-expired\",\n \"session-id-expired\",\n ].includes(err.type)) {\n this.clearScreen();\n // redirect to thank you page\n const reviewEkyc = new ReviewEkyc_1.default(this.mainScreenId, this.displayMode);\n return reviewEkyc.render();\n }\n }\n this.openErrorPage();\n }\n finally {\n // off loading btn\n if (loadingSpinner.hasChildNodes())\n proceedButton.removeChild(loadingSpinner);\n proceedButton.innerHTML = \"Proceed\";\n }\n });\n }\n}\nexports[\"default\"] = ConfirmDoc;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/ConfirmDoc.ts?");
|
|
3685
|
+
eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst CardError_1 = __importDefault(__webpack_require__(/*! ./CardError */ \"./src/pageClass/CardError.ts\"));\nconst StartSelfie_1 = __importDefault(__webpack_require__(/*! ./StartSelfie */ \"./src/pageClass/StartSelfie.ts\"));\nconst ReviewEkyc_1 = __importDefault(__webpack_require__(/*! ./ReviewEkyc */ \"./src/pageClass/ReviewEkyc.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nclass ConfirmDoc extends MainPage_1.default {\n constructor(mainScreenId, displayMode, defaultCountry, docType, frontImg, backImg) {\n super(mainScreenId, displayMode);\n this.defaultCountry = defaultCountry;\n this.docType = docType;\n this.frontImg = frontImg;\n if (backImg) {\n this.backImg = backImg;\n }\n }\n render() {\n this.renderContent(this.createPage());\n }\n createPage() {\n const mainDiv = document.createElement(\"div\");\n mainDiv.classList.add(\"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-right-0\", \"pw-bottom-0\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-between\");\n const confirmIdDiv = document.createElement(\"div\");\n confirmIdDiv.classList.add(\"pw-overflow-y-auto\", \"pw-p-5\");\n const navigationDiv = document.createElement(\"div\");\n navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-6\");\n const stepper = new stepper_1.default();\n const stepperElement = stepper.render(3, 5);\n navigationDiv.classList.add(\"pw-pt-3\");\n navigationDiv.appendChild(stepperElement);\n const closeButtonDiv = document.createElement(\"div\");\n closeButtonDiv.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n const closeButton = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n closeButtonDiv.appendChild(closeButton);\n closeButton.addEventListener(\"click\", () => this.closeMainPage());\n navigationDiv.appendChild(closeButtonDiv);\n confirmIdDiv.appendChild(navigationDiv);\n const titleDiv = document.createElement(\"div\");\n titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-6\", \"pw-text-center\");\n titleDiv.innerHTML = \"Confirm your document\";\n confirmIdDiv.appendChild(titleDiv);\n const descriptionDiv = document.createElement(\"div\");\n descriptionDiv.classList.add(\"pw-mb-4\", \"pw-text-center\");\n descriptionDiv.innerHTML =\n \"Submit front and back of the same document, make sure it's clear and not expired.\";\n confirmIdDiv.appendChild(descriptionDiv);\n const frontIdDiv = document.createElement(\"div\");\n frontIdDiv.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-3\");\n const frontIdContentDiv = document.createElement(\"div\");\n frontIdContentDiv.classList.add(\"pw-relative\", \"pw-flex\", \"pw-justify-end\", \"pw-mb-5\");\n frontIdDiv.appendChild(frontIdContentDiv);\n const frontIdWording = document.createElement(\"div\");\n frontIdWording.classList.add(\"pw-text-center\", \"pw-absolute\", \"pw-top-2\", \"pw-right-2/4\", \"pw-translate-x-2/4\");\n frontIdWording.innerHTML = \"Front\";\n const rotateContentDiv = document.createElement(\"div\");\n const rotateButton = document.createElement(\"div\");\n rotateButton.classList.add(\"pw-box-border\", \"pw-w-14\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\");\n const rotateLeft = (0, getGoogleIcon_1.getGoogleIcon)(\"rotate_left\");\n rotateButton.appendChild(rotateLeft);\n rotateContentDiv.appendChild(rotateButton);\n frontIdContentDiv.appendChild(frontIdWording);\n frontIdContentDiv.appendChild(rotateContentDiv);\n confirmIdDiv.appendChild(frontIdDiv);\n const frontImgDiv = document.createElement(\"div\");\n frontImgDiv.classList.add(\"pw-mx-auto\", \"pw-w-36\", \"pw-h-24\", \"pw-rounded-lg\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-transition-all\", \"pw-duration-500\");\n const frontImg = document.createElement(\"img\");\n frontImg.classList.add(\"pw-rounded-lg\", \"pw-object-contain\");\n frontImg.setAttribute(\"src\", this.frontImg);\n frontImgDiv.appendChild(frontImg);\n frontImgDiv.addEventListener(\"click\", () => {\n this.openImageFullScreen(this.frontImg);\n });\n frontIdDiv.appendChild(frontImgDiv);\n const angle = 90;\n let rotation = 0;\n let totalRotation = 0;\n rotateContentDiv.addEventListener(\"click\", () => {\n rotation = rotation + angle;\n totalRotation = (totalRotation + angle) % 360;\n frontImgDiv.style.transform = `rotate(-${rotation}deg)`;\n });\n const retakeFrontIdButton = document.createElement(\"div\");\n retakeFrontIdButton.classList.add(\"pw-mx-auto\", \"pw-box-border\", \"pw-w-36\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\", \"pw-cursor-pointer\");\n retakeFrontIdButton.innerHTML = \"Retake\";\n retakeFrontIdButton.addEventListener(\"click\", () => { });\n frontIdDiv.appendChild(retakeFrontIdButton);\n // confirmIdDiv\n const backIdDiv = document.createElement(\"div\");\n backIdDiv.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-3\");\n const backIdContentDiv = document.createElement(\"div\");\n backIdContentDiv.classList.add(\"pw-relative\", \"pw-flex\", \"pw-justify-end\", \"pw-mb-5\");\n backIdDiv.appendChild(backIdContentDiv);\n const backIdWording = document.createElement(\"div\");\n backIdWording.classList.add(\"pw-text-center\", \"pw-absolute\", \"pw-top-2\", \"pw-right-2/4\", \"pw-translate-x-2/4\");\n backIdWording.innerHTML = \"Back\";\n backIdContentDiv.appendChild(backIdWording);\n // rotate content is from above\n const rotateContentBackId = document.createElement(\"div\");\n // rotateContentBackId.classList.add(\"pw-flex-none\");\n const rotateButtonBackId = document.createElement(\"div\");\n rotateButtonBackId.classList.add(\"pw-box-border\", \"pw-w-14\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\");\n const roateLeftBackId = (0, getGoogleIcon_1.getGoogleIcon)(\"rotate_left\");\n rotateButtonBackId.appendChild(roateLeftBackId);\n rotateContentBackId.appendChild(rotateButtonBackId);\n backIdContentDiv.appendChild(rotateContentBackId);\n let backRotation = 0;\n let totalbackRotation = 0;\n if (this.backImg) {\n const backImgDiv = document.createElement(\"div\");\n backImgDiv.classList.add(\"pw-mx-auto\", \"pw-w-36\", \"pw-h-24\", \"pw-rounded-lg\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-transition-all\", \"pw-duration-500\");\n const backImg = document.createElement(\"img\");\n backImg.classList.add(\"pw-rounded-lg\");\n backImg.setAttribute(\"src\", this.backImg);\n backImgDiv.appendChild(backImg);\n backIdDiv.appendChild(backImgDiv);\n backImgDiv.addEventListener(\"click\", () => {\n this.openImageFullScreen(this.backImg);\n });\n const retakeBackIdButton = document.createElement(\"div\");\n retakeBackIdButton.classList.add(\"pw-mx-auto\", \"pw-box-border\", \"pw-w-36\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\", \"pw-cursor-pointer\");\n retakeBackIdButton.innerHTML = \"Retake\";\n backIdDiv.appendChild(retakeBackIdButton);\n confirmIdDiv.appendChild(backIdDiv);\n rotateContentBackId.addEventListener(\"click\", () => {\n backRotation = backRotation + angle;\n totalbackRotation = (totalbackRotation + angle) % 360;\n backImgDiv.style.transform = `rotate(-${backRotation}deg)`;\n });\n }\n const proceedButtonDiv = document.createElement(\"div\");\n proceedButtonDiv.classList.add(\"pw-p-5\", \"pw-shadow-footer-shadow\");\n const proceedButton = (0, components_1.createPrimaryButton)(\"Proceed\");\n proceedButton.addEventListener(\"click\", () => {\n this.onClickProceed(proceedButton, totalRotation, totalbackRotation);\n });\n proceedButtonDiv.appendChild(proceedButton);\n mainDiv.appendChild(confirmIdDiv);\n mainDiv.appendChild(proceedButtonDiv);\n return mainDiv;\n }\n createRotateImg(base64Image, degree) {\n return __awaiter(this, void 0, void 0, function* () {\n return new Promise(function (resolve) {\n // Create an Image element\n const img = new Image();\n img.src = base64Image;\n // Wait for the image to load\n img.onload = () => {\n // Create a canvas element\n const canvas = document.createElement(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n // Set canvas dimensions\n if ([0, 180].includes(degree)) {\n canvas.width = img.width;\n canvas.height = img.height;\n }\n else {\n // Swap width and height for rotation\n canvas.width = img.height;\n canvas.height = img.width;\n }\n // Rotate the image on the canvas\n if (ctx) {\n const radians = {\n 0: 0,\n 90: (Math.PI * 3) / 2,\n 180: Math.PI,\n 270: Math.PI / 2,\n };\n const radian = radians[degree] || 0;\n ctx.translate(canvas.width / 2, canvas.height / 2);\n ctx.rotate(radian); // Rotate n degrees\n ctx.drawImage(img, -img.width / 2, -img.height / 2);\n }\n // Get the rotated image data from the canvas\n resolve(canvas.toDataURL(\"image/jpeg\"));\n };\n setTimeout(() => {\n resolve(base64Image);\n }, 3000);\n });\n });\n }\n onClickProceed(proceedButton, frontRotateDegree, backRotateDegree) {\n return __awaiter(this, void 0, void 0, function* () {\n // on loading btn\n const loadingSpinner = (0, components_1.createSpinner)();\n proceedButton.innerHTML = \"\";\n proceedButton.appendChild(loadingSpinner);\n try {\n let frontImg = this.frontImg;\n let backImg = this.backImg;\n if (frontRotateDegree) {\n frontImg = yield this.createRotateImg(this.frontImg, frontRotateDegree);\n (0, imagesHelper_1.setFrontImg)(frontImg);\n }\n if (this.backImg && backRotateDegree) {\n backImg = yield this.createRotateImg(this.backImg, backRotateDegree);\n (0, imagesHelper_1.setBackImg)(backImg);\n }\n const req = Object.assign(Object.assign({ front_doc_base64: frontImg }, (backImg && { back_doc_base64: backImg })), { doc_type: this.docType, issuing_country: this.defaultCountry });\n yield uisdk_1.pwInstance.uploadDoc(req);\n const startSelfie = new StartSelfie_1.default(this.mainScreenId, this.displayMode);\n this.clearScreen();\n startSelfie.render();\n }\n catch (err) {\n if ([\"PwError\", \"PwReqError\"].includes(err.name) && err.type) {\n if ([\n \"openApi/verification-type-invalid\",\n \"openApi/issuing-country-invalid\",\n \"openApi/doc-type-invalid\",\n \"openApi/doc-unpair\",\n \"openApi/doc-empty\",\n \"openApi/doc-front-back-img-unsimilar\",\n \"openApi/doc-not-positioned-proper\",\n \"openApi/img-exposed\",\n ].includes(err.type)) {\n this.clearScreen();\n const failPage = new CardError_1.default(this.mainScreenId, this.displayMode);\n return failPage.render();\n }\n if ([\n \"openApi/max-doc-attempt\",\n \"openApi/limit-exceed\",\n \"openApi/max-session-attempt\",\n \"openApi/session-id-expired\",\n \"session-id-expired\",\n ].includes(err.type)) {\n this.clearScreen();\n // redirect to thank you page\n const reviewEkyc = new ReviewEkyc_1.default(this.mainScreenId, this.displayMode);\n return reviewEkyc.render();\n }\n }\n this.openErrorPage();\n }\n finally {\n // off loading btn\n if (loadingSpinner.hasChildNodes())\n proceedButton.removeChild(loadingSpinner);\n proceedButton.innerHTML = \"Proceed\";\n }\n });\n }\n}\nexports[\"default\"] = ConfirmDoc;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/ConfirmDoc.ts?");
|
|
3686
3686
|
|
|
3687
3687
|
/***/ }),
|
|
3688
3688
|
|
|
@@ -3726,7 +3726,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3726
3726
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
3727
3727
|
|
|
3728
3728
|
"use strict";
|
|
3729
|
-
eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst FormEkyc_1 = __importDefault(__webpack_require__(/*! ./FormEkyc */ \"./src/pageClass/FormEkyc.ts\"));\n// constant\nconst doc_1 = __webpack_require__(/*! ../constant/doc */ \"./src/constant/doc.ts\");\n// components\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst footer_1 = __importDefault(__webpack_require__(/*! ../components/footer */ \"./src/components/footer.ts\"));\nclass ReviewEkyc extends MainPage_1.default {\n constructor(mainScreenId, displayMode) {\n super(mainScreenId, displayMode);\n }\n render(payload) {\n return __awaiter(this, void 0, void 0, function* () {\n const element = yield this.createPage(payload);\n this.renderContent(element);\n });\n }\n createContentHeader(title, description) {\n const headerDiv = document.createElement(\"div\");\n headerDiv.classList.add(\"pw-p-5\");\n // icon\n const iconDiv = document.createElement(\"div\");\n iconDiv.classList.add(\"pw-text-center\", \"pw-mb-3\");\n const icon = (0, getGoogleIcon_1.getGoogleIcon)(\"check_circle\");\n icon.classList.add(\"pw-text-primary\");\n icon.style.fontSize = \"60px\";\n iconDiv.appendChild(icon);\n headerDiv.appendChild(iconDiv);\n // title\n const wordingDiv = document.createElement(\"div\");\n wordingDiv.classList.add(\"pw-text-center\", \"pw-mb-4\");\n const titleDiv = document.createElement(\"div\");\n titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-3\");\n titleDiv.innerHTML = title;\n wordingDiv.appendChild(titleDiv);\n headerDiv.appendChild(wordingDiv);\n // description\n if (description) {\n const descriptionDiv = document.createElement(\"div\");\n descriptionDiv.classList.add(\"pw-text-center\", \"pw-mb-3\");\n descriptionDiv.innerHTML = description;\n wordingDiv.appendChild(descriptionDiv);\n headerDiv.appendChild(wordingDiv);\n }\n return headerDiv;\n }\n createContentBody(payload) {\n const { result, id_type, filepaths } = payload;\n if (!result)\n return;\n const bodyDiv = document.createElement(\"div\");\n bodyDiv.classList.add(\"pw-bg-grey-2\", \"pw-p-5\");\n let resultCopy = Object.assign({}, result);\n const arrangement = Object.keys(doc_1.formLabelMapping);\n for (let i = 0; i < arrangement.length; i++) {\n const key = arrangement[i];\n if (result[key] === undefined)\n continue;\n const formGroup = this.createFormGroup(doc_1.formLabelMapping[key], result[key] || \"\");\n bodyDiv.appendChild(formGroup);\n delete resultCopy[key];\n }\n for (const [key, value] of Object.entries(resultCopy)) {\n if ([\"state_iso\", \"country_iso2\"].includes(key))\n continue;\n const formGroup = this.createFormGroup(doc_1.formLabelMapping[key], value);\n bodyDiv.appendChild(formGroup);\n }\n // images\n const frontImgSrc = filepaths === null || filepaths === void 0 ? void 0 : filepaths.front_doc_key;\n const backImageSrc = filepaths === null || filepaths === void 0 ? void 0 : filepaths.back_doc_key;\n if (id_type && (frontImgSrc || backImageSrc)) {\n const idTypeLabel = document.createElement(\"div\");\n idTypeLabel.classList.add(\"pw-mt-7\", \"pw-mb-2\");\n idTypeLabel.innerHTML = `ID Type: ${doc_1.idTypeMapping[id_type] || \"\"}`;\n bodyDiv.appendChild(idTypeLabel);\n }\n if (frontImgSrc) {\n const frontCard = document.createElement(\"div\");\n frontCard.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-4\");\n const frontTitle = document.createElement(\"div\");\n frontTitle.classList.add(\"pw-text-center\", \"pw-mb-4\");\n frontTitle.innerHTML = \"Front\";\n frontCard.appendChild(frontTitle);\n const frontImgContainer = document.createElement(\"div\");\n frontImgContainer.classList.add(\"pw-mx-auto\", \"pw-w-full\", \"pw-rounded-lg\", \"pw-outline-grey-6\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\");\n const frontImage = document.createElement(\"img\");\n frontImage.classList.add(\"pw-rounded-lg\", \"pw-cursor-pointer\");\n frontImage.setAttribute(\"src\", frontImgSrc);\n frontImage.setAttribute(\"alt\", \"Front Image\");\n frontImage.addEventListener(\"click\", () => {\n this.openImageFullScreen(frontImgSrc);\n });\n frontImgContainer.appendChild(frontImage);\n frontCard.appendChild(frontImgContainer);\n bodyDiv.appendChild(frontCard);\n }\n if (backImageSrc) {\n const backCard = document.createElement(\"div\");\n backCard.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-4\");\n const backTitle = document.createElement(\"div\");\n backTitle.classList.add(\"pw-text-center\", \"pw-mb-4\");\n backTitle.innerHTML = \"Back\";\n backCard.appendChild(backTitle);\n const backImgContainer = document.createElement(\"div\");\n backImgContainer.classList.add(\"pw-mx-auto\", \"pw-w-full\", \"pw-rounded-lg\", \"pw-outline-grey-6\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\");\n const backImage = document.createElement(\"img\");\n backImage.classList.add(\"pw-rounded-lg\", \"pw-cursor-pointer\");\n backImage.setAttribute(\"src\", backImageSrc);\n backImage.setAttribute(\"alt\", \"Front Image\");\n backImage.addEventListener(\"click\", () => {\n this.openImageFullScreen(backImageSrc);\n });\n backImgContainer.appendChild(backImage);\n backCard.appendChild(backImgContainer);\n bodyDiv.appendChild(backCard);\n }\n return bodyDiv;\n }\n createPage(payload) {\n return __awaiter(this, void 0, void 0, function* () {\n const reviewEkycDiv = document.createElement(\"div\");\n reviewEkycDiv.classList.add(\"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-right-0\", \"pw-bottom-0\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-overflow-y-hidden\");\n const contentDiv = document.createElement(\"div\");\n contentDiv.classList.add(\"pw-overflow-auto\");\n reviewEkycDiv.appendChild(contentDiv);\n const firstSectionDiv = document.createElement(\"div\");\n firstSectionDiv.classList.add(\"pw-p-5\");\n contentDiv.appendChild(firstSectionDiv);\n const footerDiv = document.createElement(\"div\");\n footerDiv.classList.add(\"pw-p-5\", \"pw-shadow-footer-shadow\");\n reviewEkycDiv.appendChild(footerDiv);\n // dialog header - first section\n const navigationDiv = document.createElement(\"div\");\n navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\");\n const stepper = new stepper_1.default();\n const stepperElement = stepper.render(5, 5);\n navigationDiv.classList.add(\"pw-pt-3\");\n navigationDiv.appendChild(stepperElement);\n const closeButton = document.createElement(\"div\");\n closeButton.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n closeButton.addEventListener(\"click\", () => this.closeMainPage());\n closeButton.appendChild(closeIcon);\n navigationDiv.appendChild(closeButton);\n firstSectionDiv.appendChild(navigationDiv);\n // dialog content - header + content\n // 1. header of the dialog content\n const isEditable = !!(payload === null || payload === void 0 ? void 0 : payload.result);\n const description = isEditable\n ? \"Update your submission details on this page or simply close it if no changes are necessary.\"\n : \"\";\n const headerDiv = this.createContentHeader(\"Thank you, your eKYC is completed\", description);\n contentDiv.appendChild(headerDiv);\n // 2. content of the dialog content\n if (isEditable) {\n const body = this.createContentBody(payload);\n if (body)\n contentDiv.appendChild(body);\n }\n // dialog footer\n const confirmButton = (0, components_1.createPrimaryButton)(\"All good\");\n confirmButton.classList.add(\"pw-mb-3\");\n confirmButton.addEventListener(\"click\", () => {\n this.finishEkyc();\n });\n footerDiv.appendChild(confirmButton);\n if (isEditable) {\n const updateInfoButton = (0, components_1.createSecondaryButton)(\"Update info\");\n updateInfoButton.classList.add(\"pw-mb-5\");\n footerDiv.appendChild(updateInfoButton);\n updateInfoButton.addEventListener(\"click\", () => {\n this.onClickUpdateInfo(payload);\n });\n }\n const footer = new footer_1.default();\n const footerPw = footer.render();\n footerPw.classList.add(\"pw-text-grey-6\");\n footerDiv.appendChild(footerPw);\n return reviewEkycDiv;\n });\n }\n createFormGroup(formLabel, formValue) {\n const formGroup = document.createElement(\"div\");\n formGroup.classList.add(\"pw-flex\", \"pw-flex-row\", \"pw-mb-5\");\n const label = document.createElement(\"div\");\n label.classList.add(\"pw-basis-2/5\");\n label.innerHTML = formLabel;\n const value = document.createElement(\"div\");\n value.classList.add(\"pw-basis-3/5\");\n value.innerHTML = formValue;\n formGroup.appendChild(label);\n formGroup.appendChild(value);\n return formGroup;\n }\n onClickUpdateInfo(payload) {\n const { result } = payload;\n if (!result)\n return;\n if (!this.formEkyc) {\n this.formEkyc = new FormEkyc_1.default(this.mainScreenId, this.displayMode);\n this.formEkyc.createForm(result);\n }\n this.formEkyc.openFormEkycDialog();\n }\n}\nexports[\"default\"] = ReviewEkyc;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/ReviewEkyc.ts?");
|
|
3729
|
+
eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst FormEkyc_1 = __importDefault(__webpack_require__(/*! ./FormEkyc */ \"./src/pageClass/FormEkyc.ts\"));\n// constant\nconst doc_1 = __webpack_require__(/*! ../constant/doc */ \"./src/constant/doc.ts\");\n// components\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst footer_1 = __importDefault(__webpack_require__(/*! ../components/footer */ \"./src/components/footer.ts\"));\nclass ReviewEkyc extends MainPage_1.default {\n constructor(mainScreenId, displayMode) {\n super(mainScreenId, displayMode);\n }\n render(payload) {\n return __awaiter(this, void 0, void 0, function* () {\n const element = yield this.createPage(payload);\n this.renderContent(element);\n });\n }\n createContentHeader(title, description) {\n const headerDiv = document.createElement(\"div\");\n headerDiv.classList.add(\"pw-p-5\");\n // icon\n const iconDiv = document.createElement(\"div\");\n iconDiv.classList.add(\"pw-text-center\", \"pw-mb-3\");\n const icon = (0, getGoogleIcon_1.getGoogleIcon)(\"check_circle\");\n icon.classList.add(\"pw-text-primary\");\n icon.style.fontSize = \"60px\";\n iconDiv.appendChild(icon);\n headerDiv.appendChild(iconDiv);\n // title\n const wordingDiv = document.createElement(\"div\");\n wordingDiv.classList.add(\"pw-text-center\", \"pw-mb-4\");\n const titleDiv = document.createElement(\"div\");\n titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-3\");\n titleDiv.innerHTML = title;\n wordingDiv.appendChild(titleDiv);\n headerDiv.appendChild(wordingDiv);\n // description\n if (description) {\n const descriptionDiv = document.createElement(\"div\");\n descriptionDiv.classList.add(\"pw-text-center\", \"pw-mb-3\");\n descriptionDiv.innerHTML = description;\n wordingDiv.appendChild(descriptionDiv);\n headerDiv.appendChild(wordingDiv);\n }\n return headerDiv;\n }\n createContentBody(payload) {\n var _a;\n const { result, id_type, filepaths } = payload;\n if (!result)\n return;\n const bodyDiv = document.createElement(\"div\");\n bodyDiv.classList.add(\"pw-bg-grey-2\", \"pw-p-5\");\n let resultCopy = Object.assign({}, result);\n const arrangement = Object.keys(doc_1.formLabelMapping);\n for (let i = 0; i < arrangement.length; i++) {\n const key = arrangement[i];\n if (result[key] === undefined)\n continue;\n const formGroup = this.createFormGroup(doc_1.formLabelMapping[key], result[key] || \"\");\n bodyDiv.appendChild(formGroup);\n delete resultCopy[key];\n }\n for (const [key, value] of Object.entries(resultCopy)) {\n if ([\"state_iso\", \"country_iso2\"].includes(key))\n continue;\n const formGroup = this.createFormGroup(doc_1.formLabelMapping[key], value);\n bodyDiv.appendChild(formGroup);\n }\n // images\n // use image from api\n // const frontImgSrc = filepaths?.front_doc_key;\n // const backImageSrc = filepaths?.back_doc_key;\n // temp - use image from FE\n const frontImgSrc = (0, imagesHelper_1.getFrontImg)();\n const backImageSrc = (0, imagesHelper_1.getBackImg)();\n const merchantName = ((_a = uisdk_1.pwInstance.merchantDetail) === null || _a === void 0 ? void 0 : _a.biz_name) || \"merchant\";\n const watermarkTxt = (0, imagesHelper_1.getWatermarkText)(merchantName);\n if (id_type && (frontImgSrc || backImageSrc)) {\n const idTypeLabel = document.createElement(\"div\");\n idTypeLabel.classList.add(\"pw-mt-7\", \"pw-mb-2\");\n idTypeLabel.innerHTML = `ID Type: ${doc_1.idTypeMapping[id_type] || \"\"}`;\n bodyDiv.appendChild(idTypeLabel);\n }\n if (frontImgSrc) {\n const frontCard = document.createElement(\"div\");\n frontCard.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-4\");\n const frontTitle = document.createElement(\"div\");\n frontTitle.classList.add(\"pw-text-center\", \"pw-mb-4\");\n frontTitle.innerHTML = \"Front\";\n frontCard.appendChild(frontTitle);\n const frontImgContainer = document.createElement(\"div\");\n frontImgContainer.classList.add(\"pw-mx-auto\", \"pw-w-full\", \"pw-rounded-lg\", \"pw-outline-grey-6\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-relative\", \"pw-overflow-hidden\");\n const frontImage = document.createElement(\"img\");\n frontImage.classList.add(\"pw-rounded-lg\", \"pw-cursor-pointer\");\n frontImage.setAttribute(\"src\", frontImgSrc);\n frontImage.setAttribute(\"alt\", \"Front Image\");\n frontImage.addEventListener(\"click\", () => {\n this.openImageFullScreen(frontImgSrc, watermarkTxt);\n });\n frontImgContainer.appendChild(frontImage);\n const frontImgWatermark = document.createElement(\"div\");\n frontImgWatermark.classList.add(\"pw-w-full\", \"pw-watermark\");\n frontImgWatermark.innerHTML = watermarkTxt;\n frontImgContainer.appendChild(frontImgWatermark);\n frontCard.appendChild(frontImgContainer);\n bodyDiv.appendChild(frontCard);\n }\n if (backImageSrc) {\n const backCard = document.createElement(\"div\");\n backCard.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-4\");\n const backTitle = document.createElement(\"div\");\n backTitle.classList.add(\"pw-text-center\", \"pw-mb-4\");\n backTitle.innerHTML = \"Back\";\n backCard.appendChild(backTitle);\n const backImgContainer = document.createElement(\"div\");\n backImgContainer.classList.add(\"pw-mx-auto\", \"pw-w-full\", \"pw-rounded-lg\", \"pw-outline-grey-6\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-relative\", \"pw-overflow-hidden\");\n const backImage = document.createElement(\"img\");\n backImage.classList.add(\"pw-rounded-lg\", \"pw-cursor-pointer\");\n backImage.setAttribute(\"src\", backImageSrc);\n backImage.setAttribute(\"alt\", \"Front Image\");\n backImage.addEventListener(\"click\", () => {\n this.openImageFullScreen(backImageSrc, watermarkTxt);\n });\n backImgContainer.appendChild(backImage);\n const backImgWatermark = document.createElement(\"div\");\n backImgWatermark.classList.add(\"pw-w-full\", \"pw-watermark\");\n backImgWatermark.innerHTML = watermarkTxt;\n backImgContainer.appendChild(backImgWatermark);\n backCard.appendChild(backImgContainer);\n bodyDiv.appendChild(backCard);\n }\n return bodyDiv;\n }\n createPage(payload) {\n return __awaiter(this, void 0, void 0, function* () {\n const reviewEkycDiv = document.createElement(\"div\");\n reviewEkycDiv.classList.add(\"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-right-0\", \"pw-bottom-0\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-overflow-y-hidden\");\n const contentDiv = document.createElement(\"div\");\n contentDiv.classList.add(\"pw-overflow-auto\");\n reviewEkycDiv.appendChild(contentDiv);\n const firstSectionDiv = document.createElement(\"div\");\n firstSectionDiv.classList.add(\"pw-p-5\");\n contentDiv.appendChild(firstSectionDiv);\n const footerDiv = document.createElement(\"div\");\n footerDiv.classList.add(\"pw-p-5\", \"pw-shadow-footer-shadow\");\n reviewEkycDiv.appendChild(footerDiv);\n // dialog header - first section\n const navigationDiv = document.createElement(\"div\");\n navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\");\n const stepper = new stepper_1.default();\n const stepperElement = stepper.render(5, 5);\n navigationDiv.classList.add(\"pw-pt-3\");\n navigationDiv.appendChild(stepperElement);\n const closeButton = document.createElement(\"div\");\n closeButton.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n closeButton.addEventListener(\"click\", () => this.closeMainPage());\n closeButton.appendChild(closeIcon);\n navigationDiv.appendChild(closeButton);\n firstSectionDiv.appendChild(navigationDiv);\n // dialog content - header + content\n // 1. header of the dialog content\n const isEditable = !!(payload === null || payload === void 0 ? void 0 : payload.result);\n const description = isEditable\n ? \"Update your submission details on this page or simply close it if no changes are necessary.\"\n : \"\";\n const headerDiv = this.createContentHeader(\"Thank you, your eKYC is completed\", description);\n contentDiv.appendChild(headerDiv);\n // 2. content of the dialog content\n if (isEditable) {\n const body = this.createContentBody(payload);\n if (body)\n contentDiv.appendChild(body);\n }\n // dialog footer\n const confirmButton = (0, components_1.createPrimaryButton)(\"All good\");\n confirmButton.classList.add(\"pw-mb-3\");\n confirmButton.addEventListener(\"click\", () => {\n this.finishEkyc();\n });\n footerDiv.appendChild(confirmButton);\n if (isEditable) {\n const updateInfoButton = (0, components_1.createSecondaryButton)(\"Update info\");\n updateInfoButton.classList.add(\"pw-mb-5\");\n footerDiv.appendChild(updateInfoButton);\n updateInfoButton.addEventListener(\"click\", () => {\n this.onClickUpdateInfo(payload);\n });\n }\n const footer = new footer_1.default();\n const footerPw = footer.render();\n footerPw.classList.add(\"pw-text-grey-6\");\n footerDiv.appendChild(footerPw);\n return reviewEkycDiv;\n });\n }\n createFormGroup(formLabel, formValue) {\n const formGroup = document.createElement(\"div\");\n formGroup.classList.add(\"pw-flex\", \"pw-flex-row\", \"pw-mb-5\");\n const label = document.createElement(\"div\");\n label.classList.add(\"pw-basis-2/5\");\n label.innerHTML = formLabel;\n const value = document.createElement(\"div\");\n value.classList.add(\"pw-basis-3/5\");\n value.innerHTML = formValue;\n formGroup.appendChild(label);\n formGroup.appendChild(value);\n return formGroup;\n }\n onClickUpdateInfo(payload) {\n const { result } = payload;\n if (!result)\n return;\n if (!this.formEkyc) {\n this.formEkyc = new FormEkyc_1.default(this.mainScreenId, this.displayMode);\n this.formEkyc.createForm(result);\n }\n this.formEkyc.openFormEkycDialog();\n }\n}\nexports[\"default\"] = ReviewEkyc;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/ReviewEkyc.ts?");
|
|
3730
3730
|
|
|
3731
3731
|
/***/ }),
|
|
3732
3732
|
|
|
@@ -3748,7 +3748,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3748
3748
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
3749
3749
|
|
|
3750
3750
|
"use strict";
|
|
3751
|
-
eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst VerifyId_1 = __importDefault(__webpack_require__(/*! ./VerifyId */ \"./src/pageClass/VerifyId.ts\"));\nconst StartSelfie_1 = __importDefault(__webpack_require__(/*! ./StartSelfie */ \"./src/pageClass/StartSelfie.ts\"));\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst
|
|
3751
|
+
eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n// helper\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\n// pages\nconst VerifyId_1 = __importDefault(__webpack_require__(/*! ./VerifyId */ \"./src/pageClass/VerifyId.ts\"));\nconst StartSelfie_1 = __importDefault(__webpack_require__(/*! ./StartSelfie */ \"./src/pageClass/StartSelfie.ts\"));\n// components\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst footer_1 = __importDefault(__webpack_require__(/*! ../components/footer */ \"./src/components/footer.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\n// assets\nconst icon_png_1 = __importDefault(__webpack_require__(/*! ../assets/img/icon.png */ \"./src/assets/img/icon.png\"));\nconst icon_id_card_png_1 = __importDefault(__webpack_require__(/*! ../assets/img/icon-id-card.png */ \"./src/assets/img/icon-id-card.png\"));\nconst icon_id_take_selfie_png_1 = __importDefault(__webpack_require__(/*! ../assets/img/icon-id-take-selfie.png */ \"./src/assets/img/icon-id-take-selfie.png\"));\nclass StartPage extends MainPage_1.default {\n constructor(mainScreenId, displayMode, verificationTypes) {\n super(mainScreenId, displayMode);\n this.verificationTypes = verificationTypes;\n }\n render() {\n this.renderContent(this.createPage());\n }\n createPage() {\n const firstPageDiv = document.createElement(\"div\");\n firstPageDiv.classList.add(\"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-h-full\");\n const contentDiv = document.createElement(\"div\");\n firstPageDiv.appendChild(contentDiv);\n const navigationDiv = document.createElement(\"div\");\n navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-16\");\n const stepper = new stepper_1.default();\n const stepperElement = stepper.render(1, 5);\n navigationDiv.classList.add(\"pw-pt-3\");\n navigationDiv.appendChild(stepperElement);\n const closeButton = document.createElement(\"div\");\n closeButton.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n closeButton.appendChild(closeIcon);\n closeButton.addEventListener(\"click\", () => this.closeMainPage());\n navigationDiv.appendChild(closeButton);\n contentDiv.appendChild(navigationDiv);\n const iconDiv = document.createElement(\"div\");\n iconDiv.classList.add(\"pw-text-center\", \"pw-mb-9\");\n const icon = document.createElement(\"img\");\n icon.setAttribute(\"src\", icon_png_1.default);\n icon.setAttribute(\"alt\", \"eKYC Verification\");\n iconDiv.appendChild(icon);\n contentDiv.appendChild(iconDiv);\n const wordingDiv = document.createElement(\"div\");\n wordingDiv.classList.add(\"pw-text-center\", \"pw-mb-4\");\n const titleDiv = document.createElement(\"div\");\n titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-4\");\n titleDiv.innerHTML = \"eKYC Verification\";\n wordingDiv.appendChild(titleDiv);\n const descriptionDiv = document.createElement(\"div\");\n descriptionDiv.innerHTML =\n \"Please ensure your document is clear, readable and valid.\";\n wordingDiv.appendChild(descriptionDiv);\n contentDiv.appendChild(wordingDiv);\n if (this.verificationTypes.includes(\"national_identity_document\")) {\n const takeIdPhotoDiv = document.createElement(\"div\");\n takeIdPhotoDiv.classList.add(\"pw-flex\", \"pw-justify-center\", \"pw-items-center\", \"pw-gap-x-3\", \"pw-mb-2\");\n const iconIdImage = document.createElement(\"img\");\n iconIdImage.setAttribute(\"src\", icon_id_card_png_1.default);\n iconIdImage.setAttribute(\"alt\", \"Icon of id card\");\n takeIdPhotoDiv.appendChild(iconIdImage);\n const idWording = document.createElement(\"div\");\n idWording.classList.add(\"pw-font-medium\");\n idWording.innerHTML = \"Take ID photo\";\n takeIdPhotoDiv.appendChild(idWording);\n contentDiv.appendChild(takeIdPhotoDiv);\n }\n if (this.verificationTypes.includes(\"selfie\")) {\n const selfieDiv = document.createElement(\"div\");\n selfieDiv.classList.add(\"pw-flex\", \"pw-justify-center\", \"pw-items-center\", \"pw-gap-x-3\", \"pw-mb-2\");\n const selfieImage = document.createElement(\"img\");\n selfieImage.setAttribute(\"src\", icon_id_take_selfie_png_1.default);\n selfieImage.setAttribute(\"alt\", \"Icon of selfie\");\n selfieDiv.appendChild(selfieImage);\n const selfieWording = document.createElement(\"div\");\n selfieWording.classList.add(\"pw-font-medium\");\n selfieWording.innerHTML = \"Take a selfie\";\n selfieDiv.appendChild(selfieWording);\n contentDiv.appendChild(selfieDiv);\n }\n const footerDiv = document.createElement(\"div\");\n firstPageDiv.appendChild(footerDiv);\n const startNowButton = (0, components_1.createPrimaryButton)(\"Start now\");\n startNowButton.classList.add(\"pw-mb-5\");\n startNowButton.addEventListener(\"click\", () => {\n this.onStartNow(startNowButton);\n });\n footerDiv.appendChild(startNowButton);\n const footer = new footer_1.default().render();\n footerDiv.appendChild(footer);\n return firstPageDiv;\n }\n onStartNow(startNowButton) {\n this.clearScreen();\n if (this.verificationTypes.includes(\"national_identity_document\")) {\n const verifyId = new VerifyId_1.default(this.mainScreenId, this.displayMode);\n verifyId.render();\n }\n else if (this.verificationTypes.includes(\"selfie\")) {\n const startSelfie = new StartSelfie_1.default(this.mainScreenId, this.displayMode);\n startSelfie.render();\n }\n }\n}\nexports[\"default\"] = StartPage;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/StartPage.ts?");
|
|
3752
3752
|
|
|
3753
3753
|
/***/ }),
|
|
3754
3754
|
|
|
@@ -3770,7 +3770,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
|
|
|
3770
3770
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
3771
3771
|
|
|
3772
3772
|
"use strict";
|
|
3773
|
-
eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\n// plugins\nconst card_camera_1 = __importDefault(__webpack_require__(/*! ../plugins/card-camera */ \"./src/plugins/card-camera.ts\"));\n// models\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\n// components\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst dropdownButton_1 = __importDefault(__webpack_require__(/*! ../components/dropdownButton */ \"./src/components/dropdownButton.ts\"));\n// assets\nconst icon_id_card_png_1 = __importDefault(__webpack_require__(/*! ../assets/img/icon-id-card.png */ \"./src/assets/img/icon-id-card.png\"));\nconst icon_passport_png_1 = __importDefault(__webpack_require__(/*! ../assets/img/icon-passport.png */ \"./src/assets/img/icon-passport.png\"));\n// pages\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst ConfirmDoc_1 = __importDefault(__webpack_require__(/*! ./ConfirmDoc */ \"./src/pageClass/ConfirmDoc.ts\"));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nclass VerifyId extends MainPage_1.default {\n get docTypeMapping() {\n return {\n national_identity_document: {\n front: camera_1.CARD_TYPES.ID,\n back: camera_1.CARD_TYPES.ID_BACK,\n },\n driving_license: {\n front: camera_1.CARD_TYPES.LICENSE,\n back: camera_1.CARD_TYPES.LICENSE_BACK,\n },\n passport: {\n front: camera_1.CARD_TYPES.PASSPORT,\n back: undefined,\n },\n };\n }\n constructor(mainScreenId, displayMode) {\n super(mainScreenId, displayMode);\n this.frontImg = \"\";\n this.backImg = \"\";\n }\n render() {\n this.renderContent(this.createPage());\n }\n createPage() {\n var _a;\n const verifyIdDiv = document.createElement(\"div\");\n const navigationDiv = document.createElement(\"div\");\n navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-6\");\n const stepper = new stepper_1.default();\n const stepperElement = stepper.render(2, 5);\n navigationDiv.classList.add(\"pw-pt-3\");\n navigationDiv.appendChild(stepperElement);\n const closeButton = document.createElement(\"div\");\n closeButton.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n closeButton.addEventListener(\"click\", () => this.closeMainPage());\n closeButton.appendChild(closeIcon);\n navigationDiv.appendChild(closeButton);\n verifyIdDiv.appendChild(navigationDiv);\n const titleDiv = document.createElement(\"div\");\n titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-6\");\n titleDiv.innerHTML = \"Verify your ID\";\n verifyIdDiv.appendChild(titleDiv);\n // issuing country/region\n const countries = uisdk_1.pwInstance.issuingCountries;\n this.defaultCountry = ((_a = uisdk_1.pwInstance.defaultCountry) === null || _a === void 0 ? void 0 : _a.iso_code) || \"\";\n const fieldName = \"Issuing country/region\";\n // - dropdown button label\n const country = document.createElement(\"div\");\n country.classList.add(\"pw-mb-3\");\n country.innerHTML = fieldName;\n verifyIdDiv.appendChild(country);\n // - dropdown button instance\n const countryDropdown = new dropdownButton_1.default(\"issuing-country\", fieldName, countries.map((country) => {\n return { value: country.iso_code, label: country.name };\n }), this.defaultCountry);\n // - dropdown button event listener\n countryDropdown.onUpdateValue = (value) => {\n this.defaultCountry = value;\n };\n // - dropdown button render\n const countryDropdownDiv = countryDropdown.render();\n countryDropdownDiv.classList.add(\"pw-mb-6\");\n verifyIdDiv.appendChild(countryDropdownDiv);\n // ID card\n const documentTypeDiv = document.createElement(\"div\");\n documentTypeDiv.classList.add(\"pw-mb-3\");\n documentTypeDiv.innerHTML = \"Document type\";\n verifyIdDiv.appendChild(documentTypeDiv);\n const idButton = (0, components_1.createOutlineButton)(\"ID Card\", icon_id_card_png_1.default);\n idButton.classList.add(\"pw-mb-3\");\n // ID card button click event\n idButton.addEventListener(\"click\", () => {\n this.createCameraDiv();\n this.onClickDoc(\"national_identity_document\");\n });\n verifyIdDiv.appendChild(idButton);\n // License button click event\n const driverLicense = (0, components_1.createOutlineButton)(\"Driver's License\", icon_id_card_png_1.default);\n driverLicense.classList.add(\"pw-mb-3\");\n driverLicense.addEventListener(\"click\", () => {\n this.createCameraDiv();\n this.onClickDoc(\"driving_license\");\n });\n verifyIdDiv.appendChild(driverLicense);\n // Passport button click event\n const passport = (0, components_1.createOutlineButton)(\"Passport\", icon_passport_png_1.default);\n passport.classList.add(\"pw-mb-3\");\n passport.addEventListener(\"click\", () => {\n this.createCameraDiv();\n this.onClickDoc(\"passport\");\n });\n verifyIdDiv.appendChild(passport);\n return verifyIdDiv;\n }\n createCameraDiv() {\n const screen = document.getElementById(this.mainScreenId);\n const cameraDiv = document.createElement(\"div\");\n cameraDiv.setAttribute(\"id\", \"pw-camera-container\");\n screen === null || screen === void 0 ? void 0 : screen.appendChild(cameraDiv);\n }\n onClickDoc(docType) {\n const typeMapping = this.docTypeMapping[docType];\n const idCam = new card_camera_1.default(\"pw-camera-container\", typeMapping.front, this.mainScreenId);\n idCam.init();\n idCam.
|
|
3773
|
+
eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\n// plugins\nconst card_camera_1 = __importDefault(__webpack_require__(/*! ../plugins/card-camera */ \"./src/plugins/card-camera.ts\"));\n// models\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\n// components\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst dropdownButton_1 = __importDefault(__webpack_require__(/*! ../components/dropdownButton */ \"./src/components/dropdownButton.ts\"));\n// assets\nconst icon_id_card_png_1 = __importDefault(__webpack_require__(/*! ../assets/img/icon-id-card.png */ \"./src/assets/img/icon-id-card.png\"));\nconst icon_passport_png_1 = __importDefault(__webpack_require__(/*! ../assets/img/icon-passport.png */ \"./src/assets/img/icon-passport.png\"));\n// pages\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst ConfirmDoc_1 = __importDefault(__webpack_require__(/*! ./ConfirmDoc */ \"./src/pageClass/ConfirmDoc.ts\"));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nclass VerifyId extends MainPage_1.default {\n get docTypeMapping() {\n return {\n national_identity_document: {\n front: camera_1.CARD_TYPES.ID,\n back: camera_1.CARD_TYPES.ID_BACK,\n },\n driving_license: {\n front: camera_1.CARD_TYPES.LICENSE,\n back: camera_1.CARD_TYPES.LICENSE_BACK,\n },\n passport: {\n front: camera_1.CARD_TYPES.PASSPORT,\n back: undefined,\n },\n };\n }\n constructor(mainScreenId, displayMode) {\n super(mainScreenId, displayMode);\n this.frontImg = \"\";\n this.backImg = \"\";\n }\n render() {\n this.renderContent(this.createPage());\n }\n createPage() {\n var _a;\n const verifyIdDiv = document.createElement(\"div\");\n const navigationDiv = document.createElement(\"div\");\n navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-6\");\n const stepper = new stepper_1.default();\n const stepperElement = stepper.render(2, 5);\n navigationDiv.classList.add(\"pw-pt-3\");\n navigationDiv.appendChild(stepperElement);\n const closeButton = document.createElement(\"div\");\n closeButton.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n closeButton.addEventListener(\"click\", () => this.closeMainPage());\n closeButton.appendChild(closeIcon);\n navigationDiv.appendChild(closeButton);\n verifyIdDiv.appendChild(navigationDiv);\n const titleDiv = document.createElement(\"div\");\n titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-6\");\n titleDiv.innerHTML = \"Verify your ID\";\n verifyIdDiv.appendChild(titleDiv);\n // issuing country/region\n const countries = uisdk_1.pwInstance.issuingCountries;\n this.defaultCountry = ((_a = uisdk_1.pwInstance.defaultCountry) === null || _a === void 0 ? void 0 : _a.iso_code) || \"\";\n const fieldName = \"Issuing country/region\";\n // - dropdown button label\n const country = document.createElement(\"div\");\n country.classList.add(\"pw-mb-3\");\n country.innerHTML = fieldName;\n verifyIdDiv.appendChild(country);\n // - dropdown button instance\n const countryDropdown = new dropdownButton_1.default(\"issuing-country\", fieldName, countries.map((country) => {\n return { value: country.iso_code, label: country.name };\n }), this.defaultCountry);\n // - dropdown button event listener\n countryDropdown.onUpdateValue = (value) => {\n this.defaultCountry = value;\n };\n // - dropdown button render\n const countryDropdownDiv = countryDropdown.render();\n countryDropdownDiv.classList.add(\"pw-mb-6\");\n verifyIdDiv.appendChild(countryDropdownDiv);\n // ID card\n const documentTypeDiv = document.createElement(\"div\");\n documentTypeDiv.classList.add(\"pw-mb-3\");\n documentTypeDiv.innerHTML = \"Document type\";\n verifyIdDiv.appendChild(documentTypeDiv);\n const idButton = (0, components_1.createOutlineButton)(\"ID Card\", icon_id_card_png_1.default);\n idButton.classList.add(\"pw-mb-3\");\n // ID card button click event\n idButton.addEventListener(\"click\", () => {\n this.createCameraDiv();\n this.onClickDoc(\"national_identity_document\");\n });\n verifyIdDiv.appendChild(idButton);\n // License button click event\n const driverLicense = (0, components_1.createOutlineButton)(\"Driver's License\", icon_id_card_png_1.default);\n driverLicense.classList.add(\"pw-mb-3\");\n driverLicense.addEventListener(\"click\", () => {\n this.createCameraDiv();\n this.onClickDoc(\"driving_license\");\n });\n verifyIdDiv.appendChild(driverLicense);\n // Passport button click event\n const passport = (0, components_1.createOutlineButton)(\"Passport\", icon_passport_png_1.default);\n passport.classList.add(\"pw-mb-3\");\n passport.addEventListener(\"click\", () => {\n this.createCameraDiv();\n this.onClickDoc(\"passport\");\n });\n verifyIdDiv.appendChild(passport);\n return verifyIdDiv;\n }\n createCameraDiv() {\n const screen = document.getElementById(this.mainScreenId);\n const cameraDiv = document.createElement(\"div\");\n cameraDiv.setAttribute(\"id\", \"pw-camera-container\");\n screen === null || screen === void 0 ? void 0 : screen.appendChild(cameraDiv);\n }\n onClickDoc(docType) {\n const typeMapping = this.docTypeMapping[docType];\n const idCam = new card_camera_1.default(\"pw-camera-container\", typeMapping.front, this.mainScreenId);\n idCam.init();\n idCam.listenToCardCapture((payload) => {\n const { type, image } = payload.detail;\n // only need front img\n if (type === typeMapping.front && !typeMapping.back) {\n this.frontImg = image;\n (0, imagesHelper_1.setFrontImg)(this.frontImg);\n idCam.stopVideoStream();\n this.onRedirectDocConfirmPg(docType);\n }\n // need both front and back img\n else if (type === typeMapping.front) {\n this.frontImg = image;\n (0, imagesHelper_1.setFrontImg)(this.frontImg);\n this.renderLoadingScreen();\n setTimeout(() => {\n this.updateOverlayContent(this.swapSideDisplay());\n // idCam.flipOverlayContainer();\n // this.flipCard();\n }, 200);\n setTimeout(() => {\n this.removeOverlayElement();\n idCam.updateType(typeMapping.back);\n }, 2000);\n }\n else if (type === typeMapping.back) {\n this.backImg = image;\n (0, imagesHelper_1.setBackImg)(this.backImg);\n idCam.stopVideoStream();\n this.onRedirectDocConfirmPg(docType);\n }\n });\n }\n onRedirectDocConfirmPg(docType) {\n const confirmDoc = new ConfirmDoc_1.default(this.mainScreenId, this.displayMode, this.defaultCountry || \"\", docType, this.frontImg, this.backImg);\n this.clearScreen();\n confirmDoc.render();\n }\n swapSideDisplay() {\n const swapSide = document.createElement(\"div\");\n swapSide.classList.add(\"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\");\n const cardDescription = document.createElement(\"div\");\n cardDescription.classList.add(\"pw-text-center\", \"pw-mb-5\", \"pw-text-2xl\", \"pw-text-white\");\n cardDescription.innerHTML = \"Flip the other side\";\n swapSide.appendChild(cardDescription);\n const cardContainer = document.createElement(\"div\");\n cardContainer.classList.add(\"pw-text-center\");\n const card = (0, getGoogleIcon_1.getGoogleIcon)(\"credit_card\");\n card.classList.add(\"pw-text-white\", \"pw-text-center\", \"pw-animate-camera\");\n card.style.fontSize = \"77px\";\n cardContainer.appendChild(card);\n swapSide.appendChild(cardContainer);\n return swapSide;\n }\n}\nexports[\"default\"] = VerifyId;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/VerifyId.ts?");
|
|
3774
3774
|
|
|
3775
3775
|
/***/ }),
|
|
3776
3776
|
|
|
@@ -3781,7 +3781,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3781
3781
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
3782
3782
|
|
|
3783
3783
|
"use strict";
|
|
3784
|
-
eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst card_detection_1 = __importDefault(__webpack_require__(/*! ./card-detection */ \"./src/plugins/card-detection.ts\"));\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nconst camera_instruction_1 = __importDefault(__webpack_require__(/*! ../constant/camera-instruction */ \"./src/constant/camera-instruction.ts\"));\nconst bottomDialog_1 = __importDefault(__webpack_require__(/*! ../components/bottomDialog */ \"./src/components/bottomDialog.ts\"));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nclass CardCamera {\n constructor(cameraId, cardType, mainScreenId = \"\") {\n this.cameraTimeLimit = 90000;\n this.videoElement = null;\n this.canvasElement = null;\n this.overlayElement = null;\n this.titleElement = null;\n this.footerElement = null;\n this.cameraId = cameraId;\n this.cardType = cardType;\n this.mainScreenId = mainScreenId;\n }\n isMobile() {\n const navigator = window.navigator.userAgent ||\n window.navigator.vendor ||\n window.opera;\n if (!navigator)\n return false;\n var isMobile = /(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(navigator) ||\n /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-/i.test(navigator.substr(0, 4));\n return isMobile;\n }\n captureImage() {\n if (!this.canvasElement || !this.videoElement || !this.overlayElement)\n return \"\";\n const canvas = document.createElement(\"canvas\");\n canvas.width = this.canvasElement.clientWidth;\n canvas.height = this.canvasElement.clientHeight;\n var ctx = canvas.getContext(\"2d\");\n if (!ctx)\n return \"\";\n //draw image to canvas. scale to target dimensions\n ctx.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);\n // crop the selected part image\n const x = (canvas.width - this.overlayElement.clientWidth) / 2;\n const y = (canvas.height - this.overlayElement.clientHeight) / 2;\n const imgData = ctx.getImageData(x, y, this.overlayElement.clientWidth, this.overlayElement.clientHeight);\n canvas.width = this.overlayElement.clientWidth;\n canvas.height = this.overlayElement.clientHeight;\n ctx.putImageData(imgData, 0, 0);\n //convert to desired file format\n return canvas.toDataURL(\"image/jpeg\");\n }\n init() {\n // 1. Draw the camera display\n this.drawCameraDisplay();\n // 2. Setup related SDK\n const { videoElement, canvasElement, overlayElement, titleElement } = this;\n this.cardDetectionSdk = new card_detection_1.default({\n videoElement,\n canvasElement,\n overlayElement,\n titleElement,\n });\n // 3. Get the camera permission and trigger the card detection\n this.cameraInit();\n // 4. Start timer to close camera\n this.timer = setTimeout(() => __awaiter(this, void 0, void 0, function* () {\n yield this.stopVideoStream();\n this.openIdleDialog();\n }), this.cameraTimeLimit);\n }\n openIdleDialog() {\n const mainScreen = document.getElementById(this.mainScreenId);\n const overlay = document.createElement(\"div\");\n overlay.classList.add(\"pw-bg-black\", \"pw-bg-opacity-70\", \"pw-absolute\", \"pw-inset-0\", \"pw-z-50\");\n const overlayContent = document.createElement(\"div\");\n overlayContent.classList.add(\"pw-box-sizing\", \"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\", \"pw-p-5\", \"pw-bg-white\", \"pw-rounded-lg\", \"pw-w-4/5\", \"pw-text-center\");\n overlay.appendChild(overlayContent);\n const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n warningIcon.classList.add(\"pw-text-orange-400\", \"pw-pt-1\", \"pw-mb-4\");\n warningIcon.style.fontSize = \"60px\";\n overlayContent.appendChild(warningIcon);\n const dialogWording = document.createElement(\"div\");\n dialogWording.classList.add(\"pw-text-center\", \"pw-mb-6\");\n dialogWording.innerHTML = \"You have been idle for too long.\";\n overlayContent.appendChild(dialogWording);\n const buttonContainer = document.createElement(\"div\");\n buttonContainer.classList.add(\"pw-w-36\", \"pw-mx-auto\");\n const okayButton = (0, components_1.createSecondaryButton)(\"Okay\");\n buttonContainer.appendChild(okayButton);\n overlayContent.appendChild(buttonContainer);\n okayButton.addEventListener(\"click\", () => {\n overlay.remove();\n });\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.appendChild(overlay);\n }\n drawCameraDisplay() {\n // 1. header section\n const header = document.createElement(\"div\");\n header.id = camera_1.ELEMENT_IDS.HEADER;\n // header.classList.add(\"camera-header-area\");\n header.classList.add(\"pw-absolute\", \"pw-z-[2]\", \"pw-w-full\", \"pw-text-white\");\n const navigationDiv = document.createElement(\"div\");\n navigationDiv.classList.add(\"pw-px-5\", \"pw-py-4\", \"pw-flex\", \"pw-justify-between\", \"pw-items-end\", \"pw-mb-4\");\n const backArrow = (0, getGoogleIcon_1.getGoogleIcon)(\"arrow_back_ios\");\n backArrow.classList.add(\"pw-cursor-pointer\");\n backArrow.addEventListener(\"click\", () => {\n this.stopVideoStream();\n });\n navigationDiv.appendChild(backArrow);\n header.appendChild(navigationDiv);\n const titleDiv = document.createElement(\"div\");\n titleDiv.id = \"pw-camera-title\";\n titleDiv.classList.add(\"pw-text-3xl\", \"pw-text-center\", \"pw-mb-4\", \"pw-px-5\");\n // Set title\n titleDiv.innerHTML = camera_instruction_1.default[this.cardType].title;\n header.appendChild(titleDiv);\n this.titleElement = titleDiv;\n // Set Description\n const descriptionDiv = document.createElement(\"div\");\n descriptionDiv.classList.add(\"pw-text-center\", \"pw-px-5\");\n descriptionDiv.innerHTML =\n \"Place your document within the frame and take photo.\";\n header.appendChild(descriptionDiv);\n const body = document.createElement(\"div\");\n body.id = camera_1.ELEMENT_IDS.BODY;\n body.classList.add(\"camera-body-area\");\n const videoContainer = document.createElement(\"div\");\n videoContainer.id = camera_1.ELEMENT_IDS.VIDEO_CONTAINER;\n videoContainer.classList.add(\"video-container\");\n const overlayContainer = document.createElement(\"div\");\n overlayContainer.id = camera_1.ELEMENT_IDS.OVERLAY_CONTAINER;\n overlayContainer.classList.add(\"overlay-container\");\n const overlayElement = document.createElement(\"div\");\n overlayElement.id = camera_1.ELEMENT_IDS.OVERLAY;\n overlayElement.classList.add(\"overlay-element\");\n overlayElement.classList.add(\"pw-hidden\");\n const topBorderElement = document.createElement(\"div\");\n topBorderElement.id = camera_1.ELEMENT_IDS.TOP_BORDER;\n topBorderElement.classList.add(\"border-element\");\n topBorderElement.classList.add(\"border-top-element\");\n const bottomBorderElement = document.createElement(\"div\");\n bottomBorderElement.id = camera_1.ELEMENT_IDS.BOTTOM_BORDER;\n bottomBorderElement.classList.add(\"border-element\");\n bottomBorderElement.classList.add(\"border-bottom-element\");\n const canvasElement = document.createElement(\"canvas\");\n canvasElement.id = camera_1.ELEMENT_IDS.CANVAS;\n canvasElement.classList.add(\"video-element\");\n canvasElement.classList.add(\"canvas-element\");\n const videoElement = document.createElement(\"video\");\n videoElement.id = camera_1.ELEMENT_IDS.VIDEO;\n videoElement.autoplay = true;\n videoElement.classList.add(\"video-element\");\n // 2.1\n this.videoElement = videoElement;\n this.overlayElement = overlayElement;\n this.canvasElement = canvasElement;\n overlayElement.appendChild(topBorderElement);\n overlayElement.appendChild(bottomBorderElement);\n overlayContainer.appendChild(overlayElement);\n videoContainer.appendChild(overlayContainer);\n videoContainer.appendChild(canvasElement);\n videoContainer.appendChild(videoElement);\n body.appendChild(videoContainer);\n // 3. append child\n const mainBody = document.getElementById(this.cameraId);\n if (!mainBody)\n return;\n mainBody.classList.add(\"camera-bg\", \"pw-overflow-y-hidden\");\n mainBody.appendChild(header);\n mainBody.appendChild(body);\n }\n listenToCaptureImage(cb) {\n const cameraBody = document.getElementById(this.cameraId);\n cameraBody === null || cameraBody === void 0 ? void 0 : cameraBody.addEventListener(\"captureImage\", (e) => {\n cb(e);\n });\n }\n // here also is where the take picture button resides\n renderCameraBottomUi() {\n const footer = document.createElement(\"div\");\n footer.id = camera_1.ELEMENT_IDS.FOOTER;\n footer.classList.add(\"pw-absolute\", \"pw-bottom-[10%]\", \"pw-z-[2]\", \"pw-w-full\", \"pw-text-white\", \"pw-relative\");\n const takePicButton = document.createElement(\"div\");\n takePicButton.id = \"takePicButton\";\n takePicButton.classList.add(\"pw-box-border\", \"pw-mx-auto\", \"pw-absolute\", \"pw-bottom-16\", \"pw-relative\", \"pw-rounded-full\", \"pw-h-16\", \"pw-w-16\", \"pw-border-solid\", \"pw-border-white\", \"pw-border-4\", \"pw-cursor-pointer\");\n const smallCircleContainer = document.createElement(\"div\");\n smallCircleContainer.classList.add(\"pw-absolute\", \"pw-top-1/2\", \"-pw-translate-y-1/2\", \"pw-left-1/2\", \"-pw-translate-x-1/2\");\n takePicButton.appendChild(smallCircleContainer);\n const smallCircle = document.createElement(\"div\");\n smallCircle.classList.add(\"pw-w-11\", \"pw-h-11\", \"pw-bg-white\", \"pw-rounded-full\", \"pw-transition-all\", \"pw-duration-100\", \"active:pw-scale-90\");\n smallCircleContainer.appendChild(smallCircle);\n footer.appendChild(takePicButton);\n takePicButton.addEventListener(\"click\", () => {\n const mainBody = document.getElementById(this.cameraId);\n const image = this.captureImage();\n const event = new CustomEvent(\"captureImage\", {\n detail: {\n image,\n type: this.cardType,\n },\n });\n mainBody === null || mainBody === void 0 ? void 0 : mainBody.dispatchEvent(event);\n });\n const mainBody = document.getElementById(this.cameraId);\n const helpDialog = new bottomDialog_1.default(\"pw-help-card-camera\");\n mainBody === null || mainBody === void 0 ? void 0 : mainBody.appendChild(helpDialog.render());\n const dialogContent = document.createElement(\"div\");\n const ul = document.createElement(\"ul\");\n ul.classList.add(\"pw-px-5\");\n const item_1 = document.createElement(\"li\");\n item_1.innerHTML = \"Position your face within the frame.\";\n ul.appendChild(item_1);\n const item_2 = document.createElement(\"li\");\n item_2.innerHTML = \"Make sure your face is not blur or cropped.\";\n ul.appendChild(item_2);\n const item_3 = document.createElement(\"li\");\n item_3.innerHTML = \"Avoid reflection and glare.\";\n ul.appendChild(item_3);\n dialogContent.appendChild(ul);\n helpDialog.addContent(dialogContent);\n const helpIcon = document.createElement(\"span\");\n helpIcon.classList.add(\"pw-absolute\", \"pw-bottom-28\", \"pw-left-10\", \"material-symbols-outlined\", \"pw-scale-[1.7]\");\n helpIcon.innerHTML = \"help\";\n helpIcon.addEventListener(\"click\", () => {\n helpDialog.openDialog();\n });\n footer.appendChild(helpIcon);\n this.footerElement = footer;\n mainBody === null || mainBody === void 0 ? void 0 : mainBody.appendChild(footer);\n }\n stopVideoStream() {\n if (!this.videoElement)\n return;\n const stream = this.videoElement.srcObject;\n if (!stream)\n return;\n const tracks = stream.getTracks();\n tracks.forEach(function (track) {\n track.stop();\n });\n if (this.timer) {\n clearTimeout(this.timer);\n }\n this.videoElement.srcObject = null;\n const cameraDiv = document.getElementById(this.cameraId);\n cameraDiv === null || cameraDiv === void 0 ? void 0 : cameraDiv.remove();\n }\n updateType(cardType) {\n this.cardType = cardType;\n const title = document.getElementById(\"pw-camera-title\");\n if (title) {\n title.innerHTML = camera_instruction_1.default[this.cardType].title;\n }\n }\n loadVideoStream(videoElement) {\n const initialConstraints = {\n width: {\n ideal: window.screen.width, // 1280, 1024, 640\n },\n height: {\n ideal: window.screen.height, // 960, 768, 480\n },\n video: true,\n };\n // Load the video stream\n const nav = window.navigator.mediaDevices\n ? window.navigator.mediaDevices\n : window.navigator;\n if (!nav)\n return;\n nav\n .getUserMedia(initialConstraints)\n .then((stream) => {\n videoElement.srcObject = stream;\n })\n .catch((err) => {\n console.error(\"Error accessing the camera:\", err);\n });\n }\n cameraInit() {\n if (!this.videoElement)\n return;\n this.loadVideoStream(this.videoElement);\n // video event listeners\n this.videoElement.addEventListener(\"loadedmetadata\", () => {\n var _a;\n this.cardDetectionSdk.init(this.cardType);\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.classList.remove(\"pw-hidden\");\n });\n this.videoElement.addEventListener(\"resize\", () => {\n const isFooterExist = document.getElementById(camera_1.ELEMENT_IDS.FOOTER);\n if (!isFooterExist) {\n this.renderCameraBottomUi();\n }\n this.resizeElement();\n });\n window.addEventListener(\"resize\", () => {\n this.resizeElement();\n });\n screen.orientation.addEventListener(\"change\", () => {\n const orientationType = screen.orientation.type;\n if (!orientationType || !this.isMobile)\n return;\n if ([\"landscape-primary\", \"landscape-secondary\"].includes(orientationType)) {\n // TO ADD DIALOG ASK USER TO USE POTRAIT VIEW\n }\n else if ([\"portrait-secondary\", \"portrait-primary\"].includes(orientationType)) {\n // TO BE CONFIRM IF NEED CLOSE DIALOG\n }\n });\n }\n resizeElement() {\n const videoContainer = document.getElementById(camera_1.ELEMENT_IDS.VIDEO_CONTAINER);\n if (window.screen.width < window.screen.height) {\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"width\", window.screen.width > 640 ? \"auto\" : \"100%\");\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"height\", \"auto\");\n }\n else {\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"width\", \"auto\");\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"height\", \"auto\");\n }\n this.cardDetectionSdk.resizeElement();\n }\n listenToClickHelp(cb) {\n const mainBody = document.getElementById(this.cameraId);\n mainBody === null || mainBody === void 0 ? void 0 : mainBody.addEventListener(\"click:helpIcon\", () => {\n cb();\n });\n }\n}\nexports[\"default\"] = CardCamera;\n\n\n//# sourceURL=webpack://PWUISDK/./src/plugins/card-camera.ts?");
|
|
3784
|
+
eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst card_detection_1 = __importDefault(__webpack_require__(/*! ./card-detection */ \"./src/plugins/card-detection.ts\"));\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nconst camera_instruction_1 = __importDefault(__webpack_require__(/*! ../constant/camera-instruction */ \"./src/constant/camera-instruction.ts\"));\nconst bottomDialog_1 = __importDefault(__webpack_require__(/*! ../components/bottomDialog */ \"./src/components/bottomDialog.ts\"));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nclass CardCamera {\n constructor(cameraId, cardType, mainScreenId = \"\") {\n this.cameraTimeLimit = 90000;\n this.videoElement = null;\n this.canvasElement = null;\n this.overlayElement = null;\n this.titleElement = null;\n this.footerElement = null;\n this.cameraId = cameraId;\n this.cardType = cardType;\n this.mainScreenId = mainScreenId;\n }\n isMobile() {\n const navigator = window.navigator.userAgent ||\n window.navigator.vendor ||\n window.opera;\n if (!navigator)\n return false;\n const isMobile = /(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(navigator) ||\n /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-/i.test(navigator.substr(0, 4));\n return isMobile;\n }\n captureImage() {\n return __awaiter(this, void 0, void 0, function* () {\n let canvas = document.createElement(\"canvas\");\n let context = canvas.getContext(\"2d\");\n const bitmap = (yield this.imageCapture.grabFrame()) || this.videoElement;\n const { width, height } = this.cardDetectionSdk.calculateHeightNWidth(bitmap.width, bitmap.height);\n if (!context)\n return \"\";\n //draw image to canvas, scale to target dimensions\n canvas.width = bitmap.width;\n canvas.height = bitmap.height;\n context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);\n // crop the selected part image\n const x = (bitmap.width - width) / 2;\n const y = (bitmap.height - height) / 2;\n const imgData = context.getImageData(x, y, width, height);\n canvas.width = width;\n canvas.height = height;\n context.putImageData(imgData, 0, 0);\n //convert to desired file format\n return canvas.toDataURL(\"image/jpeg\");\n });\n }\n init() {\n // 1. Draw the camera display\n this.drawCameraDisplay();\n // 2. Setup related SDK\n const { videoElement, canvasElement, overlayElement, titleElement } = this;\n this.cardDetectionSdk = new card_detection_1.default({\n videoElement,\n canvasElement,\n overlayElement,\n titleElement,\n });\n // 3. Get the camera permission and trigger the card detection\n this.cameraInit();\n // 4. Start timer to close camera\n this.timer = setTimeout(() => __awaiter(this, void 0, void 0, function* () {\n yield this.stopVideoStream();\n this.openIdleDialog();\n }), this.cameraTimeLimit);\n }\n openIdleDialog() {\n const mainScreen = document.getElementById(this.mainScreenId);\n const overlay = document.createElement(\"div\");\n overlay.classList.add(\"pw-bg-black\", \"pw-bg-opacity-70\", \"pw-absolute\", \"pw-inset-0\", \"pw-z-50\");\n const overlayContent = document.createElement(\"div\");\n overlayContent.classList.add(\"pw-box-sizing\", \"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\", \"pw-p-5\", \"pw-bg-white\", \"pw-rounded-lg\", \"pw-w-4/5\", \"pw-text-center\");\n overlay.appendChild(overlayContent);\n const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n warningIcon.classList.add(\"pw-text-orange-400\", \"pw-pt-1\", \"pw-mb-4\");\n warningIcon.style.fontSize = \"60px\";\n overlayContent.appendChild(warningIcon);\n const dialogWording = document.createElement(\"div\");\n dialogWording.classList.add(\"pw-text-center\", \"pw-mb-6\");\n dialogWording.innerHTML = \"You have been idle for too long.\";\n overlayContent.appendChild(dialogWording);\n const buttonContainer = document.createElement(\"div\");\n buttonContainer.classList.add(\"pw-w-36\", \"pw-mx-auto\");\n const okayButton = (0, components_1.createSecondaryButton)(\"Okay\");\n buttonContainer.appendChild(okayButton);\n overlayContent.appendChild(buttonContainer);\n okayButton.addEventListener(\"click\", () => {\n overlay.remove();\n });\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.appendChild(overlay);\n }\n drawCameraDisplay() {\n // 1. header section\n const header = document.createElement(\"div\");\n header.id = camera_1.ELEMENT_IDS.HEADER;\n // header.classList.add(\"camera-header-area\");\n header.classList.add(\"pw-absolute\", \"pw-z-[2]\", \"pw-w-full\", \"pw-text-white\");\n const navigationDiv = document.createElement(\"div\");\n navigationDiv.classList.add(\"pw-px-5\", \"pw-py-4\", \"pw-flex\", \"pw-justify-between\", \"pw-items-end\", \"pw-mb-4\");\n const backArrow = (0, getGoogleIcon_1.getGoogleIcon)(\"arrow_back_ios\");\n backArrow.classList.add(\"pw-cursor-pointer\");\n backArrow.addEventListener(\"click\", () => {\n this.stopVideoStream();\n });\n navigationDiv.appendChild(backArrow);\n header.appendChild(navigationDiv);\n const titleDiv = document.createElement(\"div\");\n titleDiv.id = \"pw-camera-title\";\n titleDiv.classList.add(\"pw-text-3xl\", \"pw-text-center\", \"pw-mb-4\", \"pw-px-5\");\n // Set title\n titleDiv.innerHTML = camera_instruction_1.default[this.cardType].title;\n header.appendChild(titleDiv);\n this.titleElement = titleDiv;\n // Set Description\n const descriptionDiv = document.createElement(\"div\");\n descriptionDiv.classList.add(\"pw-text-center\", \"pw-px-5\");\n descriptionDiv.innerHTML =\n \"Place your document within the frame and take photo.\";\n header.appendChild(descriptionDiv);\n const body = document.createElement(\"div\");\n body.id = camera_1.ELEMENT_IDS.BODY;\n body.classList.add(\"camera-body-area\");\n const videoContainer = document.createElement(\"div\");\n videoContainer.id = camera_1.ELEMENT_IDS.VIDEO_CONTAINER;\n videoContainer.classList.add(\"video-container\");\n const overlayContainer = document.createElement(\"div\");\n overlayContainer.id = camera_1.ELEMENT_IDS.OVERLAY_CONTAINER;\n overlayContainer.classList.add(\"overlay-container\");\n const overlayElement = document.createElement(\"div\");\n overlayElement.id = camera_1.ELEMENT_IDS.OVERLAY;\n overlayElement.classList.add(\"overlay-element\");\n overlayElement.classList.add(\"pw-hidden\");\n const topBorderElement = document.createElement(\"div\");\n topBorderElement.id = camera_1.ELEMENT_IDS.TOP_BORDER;\n topBorderElement.classList.add(\"border-element\");\n topBorderElement.classList.add(\"border-top-element\");\n const bottomBorderElement = document.createElement(\"div\");\n bottomBorderElement.id = camera_1.ELEMENT_IDS.BOTTOM_BORDER;\n bottomBorderElement.classList.add(\"border-element\");\n bottomBorderElement.classList.add(\"border-bottom-element\");\n const canvasElement = document.createElement(\"canvas\");\n canvasElement.id = camera_1.ELEMENT_IDS.CANVAS;\n canvasElement.classList.add(\"video-element\");\n canvasElement.classList.add(\"canvas-element\");\n const videoElement = document.createElement(\"video\");\n videoElement.id = camera_1.ELEMENT_IDS.VIDEO;\n videoElement.autoplay = true;\n videoElement.classList.add(\"video-element\");\n // 2.1\n this.videoElement = videoElement;\n this.overlayElement = overlayElement;\n this.canvasElement = canvasElement;\n overlayElement.appendChild(topBorderElement);\n overlayElement.appendChild(bottomBorderElement);\n overlayContainer.appendChild(overlayElement);\n videoContainer.appendChild(overlayContainer);\n videoContainer.appendChild(canvasElement);\n videoContainer.appendChild(videoElement);\n body.appendChild(videoContainer);\n // 3. append child\n const mainBody = document.getElementById(this.cameraId);\n if (!mainBody)\n return;\n mainBody.classList.add(\"camera-bg\", \"pw-overflow-y-hidden\");\n mainBody.appendChild(header);\n mainBody.appendChild(body);\n }\n listenToCardCapture(cb) {\n const cameraBody = document.getElementById(this.cameraId);\n cameraBody === null || cameraBody === void 0 ? void 0 : cameraBody.addEventListener(\"captureImage\", (e) => {\n cb(e);\n });\n }\n // here also is where the take picture button resides\n renderCameraBottomUi() {\n const footer = document.createElement(\"div\");\n footer.id = camera_1.ELEMENT_IDS.FOOTER;\n footer.classList.add(\"pw-absolute\", \"pw-bottom-[10%]\", \"pw-z-[2]\", \"pw-w-full\", \"pw-text-white\", \"pw-relative\");\n const takePicButton = document.createElement(\"div\");\n takePicButton.id = \"takePicButton\";\n takePicButton.classList.add(\"pw-box-border\", \"pw-mx-auto\", \"pw-absolute\", \"pw-bottom-16\", \"pw-relative\", \"pw-rounded-full\", \"pw-h-16\", \"pw-w-16\", \"pw-border-solid\", \"pw-border-white\", \"pw-border-4\", \"pw-cursor-pointer\");\n const smallCircleContainer = document.createElement(\"div\");\n smallCircleContainer.classList.add(\"pw-absolute\", \"pw-top-1/2\", \"-pw-translate-y-1/2\", \"pw-left-1/2\", \"-pw-translate-x-1/2\");\n takePicButton.appendChild(smallCircleContainer);\n const smallCircle = document.createElement(\"div\");\n smallCircle.classList.add(\"pw-w-11\", \"pw-h-11\", \"pw-bg-white\", \"pw-rounded-full\", \"pw-transition-all\", \"pw-duration-100\", \"active:pw-scale-90\");\n smallCircleContainer.appendChild(smallCircle);\n footer.appendChild(takePicButton);\n takePicButton.addEventListener(\"click\", () => __awaiter(this, void 0, void 0, function* () {\n const mainBody = document.getElementById(this.cameraId);\n const image = yield this.captureImage();\n const event = new CustomEvent(\"captureImage\", {\n detail: {\n image,\n type: this.cardType,\n },\n });\n mainBody === null || mainBody === void 0 ? void 0 : mainBody.dispatchEvent(event);\n }));\n const mainBody = document.getElementById(this.cameraId);\n const helpDialog = new bottomDialog_1.default(\"pw-help-card-camera\");\n mainBody === null || mainBody === void 0 ? void 0 : mainBody.appendChild(helpDialog.render());\n const dialogContent = document.createElement(\"div\");\n const ul = document.createElement(\"ul\");\n ul.classList.add(\"pw-px-5\");\n const item_1 = document.createElement(\"li\");\n item_1.innerHTML = \"Position your face within the frame.\";\n ul.appendChild(item_1);\n const item_2 = document.createElement(\"li\");\n item_2.innerHTML = \"Make sure your face is not blur or cropped.\";\n ul.appendChild(item_2);\n const item_3 = document.createElement(\"li\");\n item_3.innerHTML = \"Avoid reflection and glare.\";\n ul.appendChild(item_3);\n dialogContent.appendChild(ul);\n helpDialog.addContent(dialogContent);\n const helpIcon = document.createElement(\"span\");\n helpIcon.classList.add(\"pw-absolute\", \"pw-bottom-28\", \"pw-left-10\", \"material-symbols-outlined\", \"pw-scale-[1.7]\");\n helpIcon.innerHTML = \"help\";\n helpIcon.addEventListener(\"click\", () => {\n helpDialog.openDialog();\n });\n footer.appendChild(helpIcon);\n this.footerElement = footer;\n mainBody === null || mainBody === void 0 ? void 0 : mainBody.appendChild(footer);\n }\n stopVideoStream() {\n if (!this.videoElement)\n return;\n const stream = this.videoElement.srcObject;\n if (!stream)\n return;\n const tracks = stream.getTracks();\n tracks.forEach(function (track) {\n track.stop();\n });\n if (this.timer) {\n clearTimeout(this.timer);\n }\n this.videoElement.srcObject = null;\n const cameraDiv = document.getElementById(this.cameraId);\n cameraDiv === null || cameraDiv === void 0 ? void 0 : cameraDiv.remove();\n }\n updateType(cardType) {\n this.cardType = cardType;\n const title = document.getElementById(\"pw-camera-title\");\n if (title) {\n title.innerHTML = camera_instruction_1.default[this.cardType].title;\n }\n }\n loadVideoStream(videoElement) {\n const initialConstraints = {\n facingMode: \"environment\",\n width: {\n ideal: 1280, // 1280, 1024, 640\n },\n height: {\n ideal: 960, // 960, 768, 480\n },\n video: true,\n };\n // Load the video stream\n const nav = window.navigator.mediaDevices\n ? window.navigator.mediaDevices\n : window.navigator;\n if (!nav)\n return;\n nav\n .getUserMedia({ video: initialConstraints })\n .then((stream) => {\n videoElement.srcObject = stream;\n const videoTrack = stream.getVideoTracks()[0];\n this.imageCapture = new ImageCapture(videoTrack);\n })\n .catch((err) => {\n console.error(\"Error accessing the camera:\", err);\n });\n }\n cameraInit() {\n if (!this.videoElement)\n return;\n this.loadVideoStream(this.videoElement);\n // video event listeners\n this.videoElement.addEventListener(\"loadedmetadata\", () => {\n var _a;\n this.cardDetectionSdk.init(this.cardType);\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.classList.remove(\"pw-hidden\");\n });\n this.videoElement.addEventListener(\"resize\", () => {\n const isFooterExist = document.getElementById(camera_1.ELEMENT_IDS.FOOTER);\n if (!isFooterExist) {\n this.renderCameraBottomUi();\n }\n this.resizeElement();\n });\n window.addEventListener(\"resize\", () => {\n this.resizeElement();\n });\n screen.orientation.addEventListener(\"change\", () => {\n const orientationType = screen.orientation.type;\n if (!orientationType || !this.isMobile)\n return;\n if ([\"landscape-primary\", \"landscape-secondary\"].includes(orientationType)) {\n // TO ADD DIALOG ASK USER TO USE POTRAIT VIEW\n }\n else if ([\"portrait-secondary\", \"portrait-primary\"].includes(orientationType)) {\n // TO BE CONFIRM IF NEED CLOSE DIALOG\n }\n });\n }\n resizeElement() {\n const videoContainer = document.getElementById(camera_1.ELEMENT_IDS.VIDEO_CONTAINER);\n if (window.screen.width < window.screen.height) {\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"width\", window.screen.width > 640 ? \"auto\" : \"100%\");\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"height\", \"auto\");\n }\n else {\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"width\", \"auto\");\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"height\", \"auto\");\n }\n this.cardDetectionSdk.resizeElement();\n }\n listenToClickHelp(cb) {\n const mainBody = document.getElementById(this.cameraId);\n mainBody === null || mainBody === void 0 ? void 0 : mainBody.addEventListener(\"click:helpIcon\", () => {\n cb();\n });\n }\n}\nexports[\"default\"] = CardCamera;\n\n\n//# sourceURL=webpack://PWUISDK/./src/plugins/card-camera.ts?");
|
|
3785
3785
|
|
|
3786
3786
|
/***/ }),
|
|
3787
3787
|
|
|
@@ -3792,7 +3792,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
|
|
|
3792
3792
|
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
|
|
3793
3793
|
|
|
3794
3794
|
"use strict";
|
|
3795
|
-
eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nclass CARDDETECTIONSDK {\n constructor(val) {\n this.type = camera_1.CARD_TYPES.ID;\n // html element\n this.videoElement = null;\n this.canvasElement = null;\n this.overlayElement = null;\n this.titleElement = null;\n Object.assign(this, val);\n }\n resizeElement() {\n var _a, _b, _c, _d, _e, _f;\n if (!this.videoElement || !this.canvasElement)\n return;\n const videoWidth = this.videoElement.clientWidth;\n const videoHeight = this.videoElement.clientHeight;\n // 1. resize canvas to match video size\n this.canvasElement.width = videoWidth;\n this.canvasElement.height = videoHeight;\n // 2. resize square overlay to match video size\n
|
|
3795
|
+
eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nclass CARDDETECTIONSDK {\n constructor(val) {\n this.type = camera_1.CARD_TYPES.ID;\n // html element\n this.videoElement = null;\n this.canvasElement = null;\n this.overlayElement = null;\n this.titleElement = null;\n Object.assign(this, val);\n }\n // use to calculate the cropped image size / ratio\n // from ui or exact image src\n calculateHeightNWidth(width, height) {\n var _a, _b;\n const videoWidth = ((_a = this.videoElement) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;\n const videoHeight = ((_b = this.videoElement) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;\n const maxSize = videoHeight > videoWidth ? width : height;\n const squareSize = maxSize * 0.8;\n const ratio = this.type === camera_1.CARD_TYPES.PASSPORT ? 1.333 : 1.568;\n const newWidth = squareSize;\n const newHeight = squareSize / ratio;\n return { width: newWidth, height: newHeight };\n }\n resizeElement() {\n var _a, _b, _c, _d, _e, _f;\n if (!this.videoElement || !this.canvasElement)\n return;\n const videoWidth = this.videoElement.clientWidth;\n const videoHeight = this.videoElement.clientHeight;\n // 1. resize canvas to match video size\n this.canvasElement.width = videoWidth;\n this.canvasElement.height = videoHeight;\n // 2. resize square overlay to match video size\n const { width, height } = this.calculateHeightNWidth(videoWidth, videoHeight);\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.style.setProperty(\"border-radius\", \"15px\");\n (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.style.setProperty(\"border\", \"0px\");\n (_c = this.overlayElement) === null || _c === void 0 ? void 0 : _c.style.setProperty(\"width\", `${width}px`);\n (_d = this.overlayElement) === null || _d === void 0 ? void 0 : _d.style.setProperty(\"height\", `${height}px`);\n // 3. show border corner\n const topBorder = (_e = this.overlayElement) === null || _e === void 0 ? void 0 : _e.querySelector(`#${camera_1.ELEMENT_IDS.TOP_BORDER}`);\n topBorder === null || topBorder === void 0 ? void 0 : topBorder.style.setProperty(\"display\", \"inherit\");\n const bottomBorder = (_f = this.overlayElement) === null || _f === void 0 ? void 0 : _f.querySelector(`#${camera_1.ELEMENT_IDS.BOTTOM_BORDER}`);\n bottomBorder === null || bottomBorder === void 0 ? void 0 : bottomBorder.style.setProperty(\"display\", \"inherit\");\n }\n disableDetection() {\n var _a, _b;\n const topBorder = (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.querySelector(`#${camera_1.ELEMENT_IDS.TOP_BORDER}`);\n topBorder === null || topBorder === void 0 ? void 0 : topBorder.style.setProperty(\"display\", \"none\");\n const bottomBorder = (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.querySelector(`#${camera_1.ELEMENT_IDS.BOTTOM_BORDER}`);\n bottomBorder === null || bottomBorder === void 0 ? void 0 : bottomBorder.style.setProperty(\"display\", \"none\");\n }\n init(type) {\n if (type)\n this.type = type;\n this.resizeElement();\n // if (this.titleElement)\n // this.titleElement.innerHTML = `Card Type - ${this.type}`;\n }\n}\nexports[\"default\"] = CARDDETECTIONSDK;\n\n\n//# sourceURL=webpack://PWUISDK/./src/plugins/card-detection.ts?");
|
|
3796
3796
|
|
|
3797
3797
|
/***/ }),
|
|
3798
3798
|
|
|
@@ -3803,7 +3803,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncons
|
|
|
3803
3803
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
3804
3804
|
|
|
3805
3805
|
"use strict";
|
|
3806
|
-
eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst face_detection_1 = __importDefault(__webpack_require__(/*! ./face-detection */ \"./src/plugins/face-detection.ts\"));\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nclass FaceCamera {\n constructor(cameraId, mainScreenId = \"\") {\n this.cameraTimeLimit = 90000;\n this.videoElement = null;\n this.canvasElement = null;\n this.overlayElement = null;\n this.titleElement = null;\n this.cameraId = cameraId;\n this.mainScreenId = mainScreenId;\n }\n isMobile() {\n const navigator = window.navigator.userAgent ||\n window.navigator.vendor ||\n window.opera;\n if (!navigator)\n return false;\n var isMobile = /(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(navigator) ||\n /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-/i.test(navigator.substr(0, 4));\n return isMobile;\n }\n captureImage() {\n if (!this.canvasElement || !this.videoElement || !this.overlayElement)\n return \"\";\n const canvas = document.createElement(\"canvas\");\n canvas.width = this.canvasElement.clientWidth;\n canvas.height = this.canvasElement.clientHeight;\n var ctx = canvas.getContext(\"2d\");\n if (!ctx)\n return \"\";\n //draw image to canvas. scale to target dimensions\n ctx.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);\n // crop the selected part image\n const x = (canvas.width - this.overlayElement.clientWidth) / 2;\n const y = (canvas.height - this.overlayElement.clientHeight) / 2;\n const imgData = ctx.getImageData(x, y, this.overlayElement.clientWidth, this.overlayElement.clientHeight);\n canvas.width = this.overlayElement.clientWidth;\n canvas.height = this.overlayElement.clientHeight;\n ctx.putImageData(imgData, 0, 0);\n //convert to desired file format\n return canvas.toDataURL(\"image/jpeg\");\n }\n init() {\n // 1. Draw the camera display\n this.drawCameraDisplay();\n // 2. Setup related SDK\n const { videoElement, canvasElement, overlayElement, titleElement } = this;\n this.faceDetectionSdk = new face_detection_1.default({\n videoElement,\n canvasElement,\n overlayElement,\n titleElement,\n });\n // 3. Get the camera permission and trigger the selfie detection\n this.cameraInit();\n // 4. Trigger event after 3 seconds of face detection\n this.faceDetectionSdk.setCaptureImage((livenessScore) => {\n var _a;\n const image = this.captureImage();\n const event = new CustomEvent(\"selfieCapture\", {\n detail: { image, livenessScore },\n });\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);\n });\n // 5. Face camera custom events listeners\n const description = document.getElementById(\"pw-camera-description\");\n this.faceDetectionSdk.listenToUserNoSmile(() => {\n if (description) {\n description.innerHTML = \"Please smile at the camera\";\n }\n });\n this.faceDetectionSdk.listenToUserSmiled(() => {\n if (description) {\n description.innerHTML = \"Please keep smiling for 3 seconds\";\n }\n });\n this.faceDetectionSdk.listenToUserSmiledButNotLiveness(() => {\n if (description) {\n description.innerHTML =\n \"Please show a neutral expression at the camera.\";\n }\n });\n this.faceDetectionSdk.listenToLookStraight(() => {\n if (description) {\n description.innerHTML = \"Please look straight at the camera\";\n }\n });\n this.faceDetectionSdk.listenToPlaceFace(() => {\n if (description) {\n description.innerHTML = \"Place your face within the rounded frame.\";\n }\n });\n // 6. Start timer to close camera\n this.timer = setTimeout(() => __awaiter(this, void 0, void 0, function* () {\n yield this.stopVideoStream();\n this.openIdleDialog();\n }), this.cameraTimeLimit);\n }\n openIdleDialog() {\n const mainScreen = document.getElementById(this.mainScreenId);\n const overlay = document.createElement(\"div\");\n overlay.classList.add(\"pw-bg-black\", \"pw-bg-opacity-70\", \"pw-absolute\", \"pw-inset-0\", \"pw-z-50\");\n const overlayContent = document.createElement(\"div\");\n overlayContent.classList.add(\"pw-box-sizing\", \"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\", \"pw-p-5\", \"pw-bg-white\", \"pw-rounded-lg\", \"pw-w-4/5\", \"pw-text-center\");\n overlay.appendChild(overlayContent);\n const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n warningIcon.classList.add(\"pw-text-orange-400\", \"pw-pt-1\", \"pw-mb-4\");\n warningIcon.style.fontSize = \"60px\";\n overlayContent.appendChild(warningIcon);\n const dialogWording = document.createElement(\"div\");\n dialogWording.classList.add(\"pw-text-center\", \"pw-mb-6\");\n dialogWording.innerHTML = \"You have been idle for too long.\";\n overlayContent.appendChild(dialogWording);\n const buttonContainer = document.createElement(\"div\");\n buttonContainer.classList.add(\"pw-w-36\", \"pw-mx-auto\");\n const okayButton = (0, components_1.createSecondaryButton)(\"Okay\");\n buttonContainer.appendChild(okayButton);\n overlayContent.appendChild(buttonContainer);\n okayButton.addEventListener(\"click\", () => {\n overlay.remove();\n });\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.appendChild(overlay);\n }\n drawCameraDisplay() {\n // 1. header section\n const header = document.createElement(\"div\");\n header.id = camera_1.ELEMENT_IDS.HEADER;\n // header.classList.add(\"camera-header-area\");\n header.classList.add(\"pw-absolute\", \"pw-z-[2]\", \"pw-w-full\", \"pw-text-white\");\n const navigationDiv = document.createElement(\"div\");\n navigationDiv.classList.add(\"pw-px-5\", \"pw-py-4\", \"pw-flex\", \"pw-justify-between\", \"pw-items-end\", \"pw-mb-4\");\n const backArrow = document.createElement(\"span\");\n backArrow.classList.add(\"material-symbols-outlined\");\n backArrow.innerHTML = \"arrow_back_ios\";\n backArrow.addEventListener(\"click\", () => {\n this.stopVideoStream();\n });\n navigationDiv.appendChild(backArrow);\n // const close = document.createElement(\"span\");\n // close.classList.add(\"material-symbols-outlined\");\n // close.innerHTML = \"close\";\n // navigationDiv.appendChild(close);\n header.appendChild(navigationDiv);\n const titleDiv = document.createElement(\"div\");\n titleDiv.id = \"pw-camera-title\";\n titleDiv.classList.add(\"pw-text-3xl\", \"pw-text-center\", \"pw-mb-4\", \"pw-px-5\");\n // Set Description\n const descriptionDiv = document.createElement(\"div\");\n descriptionDiv.classList.add(\"pw-text-center\", \"pw-px-5\");\n descriptionDiv.id = \"pw-camera-description\";\n descriptionDiv.innerHTML = \"Place your face within the rounded frame\";\n this.descriptionElement = descriptionDiv;\n header.appendChild(descriptionDiv);\n const body = document.createElement(\"div\");\n body.id = camera_1.ELEMENT_IDS.BODY;\n body.classList.add(\"camera-body-area\");\n const videoContainer = document.createElement(\"div\");\n videoContainer.id = camera_1.ELEMENT_IDS.VIDEO_CONTAINER;\n videoContainer.classList.add(\"video-container\");\n const overlayContainer = document.createElement(\"div\");\n overlayContainer.id = camera_1.ELEMENT_IDS.OVERLAY_CONTAINER;\n overlayContainer.classList.add(\"overlay-container\");\n const overlayElement = document.createElement(\"div\");\n overlayElement.id = camera_1.ELEMENT_IDS.OVERLAY;\n overlayElement.classList.add(\"overlay-element\");\n overlayElement.classList.add(\"pw-hidden\");\n const canvasElement = document.createElement(\"canvas\");\n canvasElement.id = camera_1.ELEMENT_IDS.CANVAS;\n canvasElement.classList.add(\"video-element\");\n canvasElement.classList.add(\"canvas-element\");\n const videoElement = document.createElement(\"video\");\n videoElement.id = camera_1.ELEMENT_IDS.VIDEO;\n videoElement.autoplay = true;\n videoElement.classList.add(\"video-element\");\n // green tick icon\n const iconElement = document.createElement(\"span\");\n iconElement.id = \"pw-camera-check-icon\";\n iconElement.classList.add(\"pw-hidden\", \"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-w-full\", \"pw-h-full\", \"pw-flex\", \"pw-items-center\", \"pw-justify-center\");\n const checkIcon = document.createElement(\"span\");\n checkIcon.classList.add(\"material-icons\", \"pw-text-green-500\", \"pw-text-4xl\", \"pw-rounded-full\");\n checkIcon.style.fontSize = \"48px\";\n checkIcon.innerHTML = \"check_circle\";\n iconElement.appendChild(checkIcon);\n // 2.1\n this.videoElement = videoElement;\n this.overlayElement = overlayElement;\n this.canvasElement = canvasElement;\n overlayContainer.appendChild(overlayElement);\n overlayContainer.appendChild(iconElement);\n videoContainer.appendChild(overlayContainer);\n videoContainer.appendChild(canvasElement);\n videoContainer.appendChild(videoElement);\n body.appendChild(videoContainer);\n // 3. append child\n const mainBody = document.getElementById(this.cameraId);\n if (!mainBody)\n return;\n mainBody.classList.add(\"camera-bg\");\n mainBody.appendChild(header);\n mainBody.appendChild(body);\n }\n loadVideoStream(videoElement) {\n const initialConstraints = {\n width: {\n ideal: window.screen.width, // 1280, 1024, 640\n },\n height: {\n ideal: window.screen.height, // 960, 768, 480\n },\n video: true,\n };\n // Load the video stream\n const nav = window.navigator.mediaDevices\n ? window.navigator.mediaDevices\n : window.navigator;\n if (!nav)\n return;\n nav\n .getUserMedia(initialConstraints)\n .then((stream) => {\n videoElement.srcObject = stream;\n })\n .catch((err) => {\n console.error(\"Error accessing the camera:\", err);\n });\n }\n cameraInit() {\n if (!this.videoElement)\n return;\n this.loadVideoStream(this.videoElement);\n // video event listeners\n this.videoElement.addEventListener(\"loadedmetadata\", () => __awaiter(this, void 0, void 0, function* () {\n var _a;\n this.faceDetectionSdk.init();\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.classList.remove(\"pw-hidden\");\n }));\n this.videoElement.addEventListener(\"resize\", () => {\n this.resizeElement();\n });\n window.addEventListener(\"resize\", () => {\n this.resizeElement();\n });\n screen.orientation.addEventListener(\"change\", () => {\n const orientationType = screen.orientation.type;\n if (!orientationType || !this.isMobile)\n return;\n if ([\"landscape-primary\", \"landscape-secondary\"].includes(orientationType)) {\n // TO ADD DIALOG ASK USER TO USE POTRAIT VIEW\n }\n else if ([\"portrait-secondary\", \"portrait-primary\"].includes(orientationType)) {\n // TO BE CONFIRM IF NEED CLOSE DIALOG\n }\n });\n }\n stopVideoStream() {\n if (!this.videoElement)\n return;\n const stream = this.videoElement.srcObject;\n if (!stream)\n return;\n const tracks = stream.getTracks();\n tracks.forEach(function (track) {\n track.stop();\n });\n if (this.timer) {\n clearTimeout(this.timer);\n }\n this.videoElement.srcObject = null;\n const cameraDiv = document.getElementById(this.cameraId);\n cameraDiv === null || cameraDiv === void 0 ? void 0 : cameraDiv.remove();\n }\n resizeElement() {\n const videoContainer = document.getElementById(camera_1.ELEMENT_IDS.VIDEO_CONTAINER);\n if (window.screen.width < window.screen.height) {\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"width\", window.screen.width > 640 ? \"auto\" : \"100%\");\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"height\", \"auto\");\n }\n else {\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"width\", \"auto\");\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"height\", \"auto\");\n }\n this.faceDetectionSdk.resizeElement();\n }\n listenToSelfieCapture(cb) {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.addEventListener(\"selfieCapture\", (e) => {\n cb(e);\n });\n }\n pauseSmileFace() {\n var _a, _b;\n return __awaiter(this, void 0, void 0, function* () {\n // stop the video\n (_a = this.videoElement) === null || _a === void 0 ? void 0 : _a.pause();\n yield ((_b = this.faceDetectionSdk) === null || _b === void 0 ? void 0 : _b.disableDetection());\n // clear description\n const description = document.getElementById(\"pw-camera-description\");\n if (description)\n description.innerHTML = \"\";\n // show green tick icon\n const checkIcon = document.getElementById(\"pw-camera-check-icon\");\n checkIcon === null || checkIcon === void 0 ? void 0 : checkIcon.classList.remove(\"pw-hidden\");\n // remove those smile and neutral img\n const overlayElement = document.getElementById(\"overlayElement\");\n if (overlayElement) {\n overlayElement.classList.remove(\"overlay-element--selfie-smile\");\n overlayElement.classList.remove(\"overlay-element--selfie-neutral\");\n overlayElement.classList.add(\"overlay-element--active\");\n }\n });\n }\n}\nexports[\"default\"] = FaceCamera;\n\n\n//# sourceURL=webpack://PWUISDK/./src/plugins/face-camera.ts?");
|
|
3806
|
+
eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst face_detection_1 = __importDefault(__webpack_require__(/*! ./face-detection */ \"./src/plugins/face-detection.ts\"));\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nclass FaceCamera {\n constructor(cameraId, mainScreenId = \"\") {\n this.cameraTimeLimit = 90000;\n this.videoElement = null;\n this.canvasElement = null;\n this.overlayElement = null;\n this.titleElement = null;\n this.cameraId = cameraId;\n this.mainScreenId = mainScreenId;\n }\n isMobile() {\n const navigator = window.navigator.userAgent ||\n window.navigator.vendor ||\n window.opera;\n if (!navigator)\n return false;\n const isMobile = /(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(navigator) ||\n /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-/i.test(navigator.substr(0, 4));\n return isMobile;\n }\n captureImage() {\n return __awaiter(this, void 0, void 0, function* () {\n let canvas = document.createElement(\"canvas\");\n let context = canvas.getContext(\"2d\");\n const bitmap = (yield this.imageCapture.grabFrame()) || this.videoElement;\n const { width, height } = this.faceDetectionSdk.calculateHeightNWidth(bitmap.width, bitmap.height);\n if (!context)\n return \"\";\n //draw image to canvas, scale to target dimensions\n canvas.width = bitmap.width;\n canvas.height = bitmap.height;\n context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);\n // crop the selected part image\n const x = (bitmap.width - width) / 2;\n const y = (bitmap.height - height) / 2;\n const imgData = context.getImageData(x, y, width, height);\n canvas.width = width;\n canvas.height = height;\n context.putImageData(imgData, 0, 0);\n //convert to desired file format\n return canvas.toDataURL(\"image/jpeg\");\n });\n }\n init() {\n // 1. Draw the camera display\n this.drawCameraDisplay();\n // 2. Setup related SDK\n const { videoElement, canvasElement, overlayElement, titleElement } = this;\n this.faceDetectionSdk = new face_detection_1.default({\n videoElement,\n canvasElement,\n overlayElement,\n titleElement,\n });\n // 3. Get the camera permission and trigger the selfie detection\n this.cameraInit();\n // 4. Trigger event after 3 seconds of face detection\n this.faceDetectionSdk.setCaptureImage((livenessScore) => __awaiter(this, void 0, void 0, function* () {\n var _a;\n const image = yield this.captureImage();\n const event = new CustomEvent(\"selfieCapture\", {\n detail: { image, livenessScore },\n });\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);\n }));\n // 5. Face camera custom events listeners\n const description = document.getElementById(\"pw-camera-description\");\n this.faceDetectionSdk.listenToUserNoSmile(() => {\n if (description) {\n description.innerHTML = \"Please smile at the camera\";\n }\n });\n this.faceDetectionSdk.listenToUserSmiled(() => {\n if (description) {\n description.innerHTML = \"Please keep smiling for 3 seconds\";\n }\n });\n this.faceDetectionSdk.listenToUserSmiledButNotLiveness(() => {\n if (description) {\n description.innerHTML =\n \"Please show a neutral expression at the camera.\";\n }\n });\n this.faceDetectionSdk.listenToLookStraight(() => {\n if (description) {\n description.innerHTML = \"Please look straight at the camera\";\n }\n });\n this.faceDetectionSdk.listenToPlaceFace(() => {\n if (description) {\n description.innerHTML = \"Place your face within the rounded frame.\";\n }\n });\n // 6. Start timer to close camera\n this.timer = setTimeout(() => __awaiter(this, void 0, void 0, function* () {\n yield this.stopVideoStream();\n this.openIdleDialog();\n }), this.cameraTimeLimit);\n }\n openIdleDialog() {\n const mainScreen = document.getElementById(this.mainScreenId);\n const overlay = document.createElement(\"div\");\n overlay.classList.add(\"pw-bg-black\", \"pw-bg-opacity-70\", \"pw-absolute\", \"pw-inset-0\", \"pw-z-50\");\n const overlayContent = document.createElement(\"div\");\n overlayContent.classList.add(\"pw-box-sizing\", \"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\", \"pw-p-5\", \"pw-bg-white\", \"pw-rounded-lg\", \"pw-w-4/5\", \"pw-text-center\");\n overlay.appendChild(overlayContent);\n const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n warningIcon.classList.add(\"pw-text-orange-400\", \"pw-pt-1\", \"pw-mb-4\");\n warningIcon.style.fontSize = \"60px\";\n overlayContent.appendChild(warningIcon);\n const dialogWording = document.createElement(\"div\");\n dialogWording.classList.add(\"pw-text-center\", \"pw-mb-6\");\n dialogWording.innerHTML = \"You have been idle for too long.\";\n overlayContent.appendChild(dialogWording);\n const buttonContainer = document.createElement(\"div\");\n buttonContainer.classList.add(\"pw-w-36\", \"pw-mx-auto\");\n const okayButton = (0, components_1.createSecondaryButton)(\"Okay\");\n buttonContainer.appendChild(okayButton);\n overlayContent.appendChild(buttonContainer);\n okayButton.addEventListener(\"click\", () => {\n overlay.remove();\n });\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.appendChild(overlay);\n }\n drawCameraDisplay() {\n // 1. header section\n const header = document.createElement(\"div\");\n header.id = camera_1.ELEMENT_IDS.HEADER;\n // header.classList.add(\"camera-header-area\");\n header.classList.add(\"pw-absolute\", \"pw-z-[2]\", \"pw-w-full\", \"pw-text-white\");\n const navigationDiv = document.createElement(\"div\");\n navigationDiv.classList.add(\"pw-px-5\", \"pw-py-4\", \"pw-flex\", \"pw-justify-between\", \"pw-items-end\", \"pw-mb-4\");\n const backArrow = document.createElement(\"span\");\n backArrow.classList.add(\"material-symbols-outlined\");\n backArrow.innerHTML = \"arrow_back_ios\";\n backArrow.addEventListener(\"click\", () => {\n this.stopVideoStream();\n });\n navigationDiv.appendChild(backArrow);\n // const close = document.createElement(\"span\");\n // close.classList.add(\"material-symbols-outlined\");\n // close.innerHTML = \"close\";\n // navigationDiv.appendChild(close);\n header.appendChild(navigationDiv);\n const titleDiv = document.createElement(\"div\");\n titleDiv.id = \"pw-camera-title\";\n titleDiv.classList.add(\"pw-text-3xl\", \"pw-text-center\", \"pw-mb-4\", \"pw-px-5\");\n // Set Description\n const descriptionDiv = document.createElement(\"div\");\n descriptionDiv.classList.add(\"pw-text-center\", \"pw-px-5\");\n descriptionDiv.id = \"pw-camera-description\";\n descriptionDiv.innerHTML = \"Place your face within the rounded frame\";\n this.descriptionElement = descriptionDiv;\n header.appendChild(descriptionDiv);\n const body = document.createElement(\"div\");\n body.id = camera_1.ELEMENT_IDS.BODY;\n body.classList.add(\"camera-body-area\");\n const videoContainer = document.createElement(\"div\");\n videoContainer.id = camera_1.ELEMENT_IDS.VIDEO_CONTAINER;\n videoContainer.classList.add(\"video-container\");\n const overlayContainer = document.createElement(\"div\");\n overlayContainer.id = camera_1.ELEMENT_IDS.OVERLAY_CONTAINER;\n overlayContainer.classList.add(\"overlay-container\");\n const overlayElement = document.createElement(\"div\");\n overlayElement.id = camera_1.ELEMENT_IDS.OVERLAY;\n overlayElement.classList.add(\"overlay-element\");\n overlayElement.classList.add(\"pw-hidden\");\n const canvasElement = document.createElement(\"canvas\");\n canvasElement.id = camera_1.ELEMENT_IDS.CANVAS;\n canvasElement.classList.add(\"video-element\");\n canvasElement.classList.add(\"canvas-element\");\n canvasElement.style.transform = \"scaleX(-1)\";\n const videoElement = document.createElement(\"video\");\n videoElement.id = camera_1.ELEMENT_IDS.VIDEO;\n videoElement.autoplay = true;\n videoElement.classList.add(\"video-element\");\n videoElement.style.transform = \"scaleX(-1)\";\n // green tick icon\n const iconElement = document.createElement(\"span\");\n iconElement.id = \"pw-camera-check-icon\";\n iconElement.classList.add(\"pw-hidden\", \"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-w-full\", \"pw-h-full\", \"pw-flex\", \"pw-items-center\", \"pw-justify-center\");\n const checkIcon = document.createElement(\"span\");\n checkIcon.classList.add(\"material-icons\", \"pw-text-green-500\", \"pw-text-4xl\", \"pw-rounded-full\");\n checkIcon.style.fontSize = \"48px\";\n checkIcon.innerHTML = \"check_circle\";\n iconElement.appendChild(checkIcon);\n // 2.1\n this.videoElement = videoElement;\n this.overlayElement = overlayElement;\n this.canvasElement = canvasElement;\n overlayContainer.appendChild(overlayElement);\n overlayContainer.appendChild(iconElement);\n videoContainer.appendChild(overlayContainer);\n videoContainer.appendChild(canvasElement);\n videoContainer.appendChild(videoElement);\n body.appendChild(videoContainer);\n // 3. append child\n const mainBody = document.getElementById(this.cameraId);\n if (!mainBody)\n return;\n mainBody.classList.add(\"camera-bg\");\n mainBody.appendChild(header);\n mainBody.appendChild(body);\n }\n loadVideoStream(videoElement) {\n const initialConstraints = {\n facingMode: \"user\",\n width: {\n ideal: 1280, // 1280, 1024, 640\n },\n height: {\n ideal: 960, // 960, 768, 480\n },\n video: true,\n };\n // Load the video stream\n const nav = window.navigator.mediaDevices\n ? window.navigator.mediaDevices\n : window.navigator;\n if (!nav)\n return;\n nav\n .getUserMedia({ video: initialConstraints })\n .then((stream) => {\n videoElement.srcObject = stream;\n const videoTrack = stream.getVideoTracks()[0];\n this.imageCapture = new ImageCapture(videoTrack);\n })\n .catch((err) => {\n console.error(\"Error accessing the camera:\", err);\n });\n }\n cameraInit() {\n if (!this.videoElement)\n return;\n this.loadVideoStream(this.videoElement);\n // video event listeners\n this.videoElement.addEventListener(\"loadedmetadata\", () => __awaiter(this, void 0, void 0, function* () {\n var _a;\n this.faceDetectionSdk.init();\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.classList.remove(\"pw-hidden\");\n }));\n this.videoElement.addEventListener(\"resize\", () => {\n this.resizeElement();\n });\n window.addEventListener(\"resize\", () => {\n this.resizeElement();\n });\n screen.orientation.addEventListener(\"change\", () => {\n const orientationType = screen.orientation.type;\n if (!orientationType || !this.isMobile)\n return;\n if ([\"landscape-primary\", \"landscape-secondary\"].includes(orientationType)) {\n // TO ADD DIALOG ASK USER TO USE POTRAIT VIEW\n }\n else if ([\"portrait-secondary\", \"portrait-primary\"].includes(orientationType)) {\n // TO BE CONFIRM IF NEED CLOSE DIALOG\n }\n });\n }\n stopVideoStream() {\n if (!this.videoElement)\n return;\n const stream = this.videoElement.srcObject;\n if (!stream)\n return;\n const tracks = stream.getTracks();\n tracks.forEach(function (track) {\n track.stop();\n });\n if (this.timer) {\n clearTimeout(this.timer);\n }\n this.videoElement.srcObject = null;\n const cameraDiv = document.getElementById(this.cameraId);\n cameraDiv === null || cameraDiv === void 0 ? void 0 : cameraDiv.remove();\n }\n resizeElement() {\n const videoContainer = document.getElementById(camera_1.ELEMENT_IDS.VIDEO_CONTAINER);\n if (window.screen.width < window.screen.height) {\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"width\", window.screen.width > 640 ? \"auto\" : \"100%\");\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"height\", \"auto\");\n }\n else {\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"width\", \"auto\");\n videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"height\", \"auto\");\n }\n this.faceDetectionSdk.resizeElement();\n }\n listenToSelfieCapture(cb) {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.addEventListener(\"selfieCapture\", (e) => {\n cb(e);\n });\n }\n pauseSmileFace() {\n var _a, _b;\n return __awaiter(this, void 0, void 0, function* () {\n // stop the video\n (_a = this.videoElement) === null || _a === void 0 ? void 0 : _a.pause();\n yield ((_b = this.faceDetectionSdk) === null || _b === void 0 ? void 0 : _b.disableDetection());\n // clear description\n const description = document.getElementById(\"pw-camera-description\");\n if (description)\n description.innerHTML = \"\";\n // show green tick icon\n const checkIcon = document.getElementById(\"pw-camera-check-icon\");\n checkIcon === null || checkIcon === void 0 ? void 0 : checkIcon.classList.remove(\"pw-hidden\");\n // remove those smile and neutral img\n const overlayElement = document.getElementById(\"overlayElement\");\n if (overlayElement) {\n overlayElement.classList.remove(\"overlay-element--selfie-smile\");\n overlayElement.classList.remove(\"overlay-element--selfie-neutral\");\n overlayElement.classList.add(\"overlay-element--active\");\n }\n });\n }\n}\nexports[\"default\"] = FaceCamera;\n\n\n//# sourceURL=webpack://PWUISDK/./src/plugins/face-camera.ts?");
|
|
3807
3807
|
|
|
3808
3808
|
/***/ }),
|
|
3809
3809
|
|
|
@@ -3814,7 +3814,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
|
|
|
3814
3814
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
3815
3815
|
|
|
3816
3816
|
"use strict";
|
|
3817
|
-
eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst faceapi = __importStar(__webpack_require__(/*! face-api.js */ \"./node_modules/face-api.js/build/es6/index.js\"));\nclass FACEDETECTIONSDK {\n constructor(val) {\n this.isDone = false; // use to check if the face detection is done\n // === use as vuex state ===\n this.prevEmotionalState = \"\";\n this.currenEmotionaltState = \"\";\n this.isLiveness = false;\n // === constant variable ===\n this.face_api_detection_options = new faceapi.TinyFaceDetectorOptions({\n inputSize: 224,\n });\n this.faceTrack_settings = {\n contrast: 3,\n brightness: 0.5,\n threshold: 100,\n minCorrelation: 0.17,\n minScore: 0.6,\n };\n // html element\n this.videoElement = null;\n this.canvasElement = null;\n this.overlayElement = null;\n this.titleElement = null;\n this.instructionElement = null;\n Object.assign(this, val);\n }\n setCaptureImage(captureImage) {\n this.captureImage = captureImage;\n }\n // get the face position\n getFaceXY(pos) {\n var posF = {\n top: Math.min.apply(Math, pos.map(function (o) {\n return o.y;\n })),\n bottom: Math.max.apply(Math, pos.map(function (o) {\n return o.y;\n })),\n left: Math.min.apply(Math, pos.map(function (o) {\n return o.x;\n })),\n right: Math.max.apply(Math, pos.map(function (o) {\n return o.x;\n })),\n };\n return {\n x: posF[\"left\"],\n y: posF[\"top\"],\n w: posF[\"right\"] - posF[\"left\"],\n h: posF[\"bottom\"] - posF[\"top\"],\n };\n }\n // get the circle area position\n getCircleXY() {\n if (!this.canvasElement || !this.overlayElement)\n return { x: 0, y: 0, w: 0, h: 0 };\n // canvas rectangle position\n const posR = this.canvasElement.getBoundingClientRect();\n // circle position\n const posC = this.overlayElement.getBoundingClientRect();\n return {\n // get the coord x and y of the circle inside the canvas rectangle\n x: posC.x - posR.x,\n y: posC.y - posR.y,\n w: posC.width,\n h: posC.height,\n };\n }\n // to detect if your face is looking straight at the camera\n isAngleDetected(pos) {\n var angleOne = (Math.atan2(Math.abs(pos[7][\"y\"] - pos[33][\"y\"]), Math.abs(pos[7][\"x\"] - pos[33][\"x\"])) *\n 180) /\n Math.PI;\n var angleTwo = (Math.atan2(Math.abs(pos[60][\"y\"] - pos[33][\"y\"]), Math.abs(pos[60][\"x\"] - pos[33][\"x\"])) *\n 180) /\n Math.PI;\n var distance1 = Math.abs(pos[0][\"x\"] - pos[33][\"x\"]);\n var distance2 = Math.abs(pos[14][\"x\"] - pos[33][\"x\"]);\n const isAngle = !((angleOne > 40 && angleOne < 93) ||\n (angleTwo > 40 && angleTwo < 93));\n const isDistance = Math.abs(distance1 - distance2) / distance1 > 0.5;\n return isAngle || isDistance;\n }\n // check if the face is inside the circle area\n isFaceDetected(pos) {\n const posCircle = this.getCircleXY();\n const posFace = this.getFaceXY(pos);\n if (posFace.x + posFace.w < posCircle.x + posCircle.w &&\n posFace.x > posCircle.x &&\n posFace.y > posCircle.y &&\n posFace.y + posFace.h < posCircle.y + posCircle.h)\n return true;\n return false;\n }\n // check if the face emotional is changing\n detectLiveness(current) {\n this.prevEmotionalState = this.currenEmotionaltState;\n this.currenEmotionaltState = current;\n return (this.prevEmotionalState &&\n this.currenEmotionaltState &&\n this.prevEmotionalState != this.currenEmotionaltState);\n }\n // check if the face in the video is similar to the previous face\n detectSimilarFace(current) {\n this.prevFaceDescriptor = this.currentFaceDescriptor;\n this.currentFaceDescriptor = current;\n if (!this.prevFaceDescriptor || !this.currentFaceDescriptor)\n return 1;\n // the smaller the distance, the more similar the faces are\n return faceapi.euclideanDistance(this.prevFaceDescriptor, this.currentFaceDescriptor);\n }\n // reset instruction html text and all those checking\n resetInstructions() {\n var _a, _b, _c;\n this.isLiveness = false;\n this.currenEmotionaltState = \"\";\n this.prevEmotionalState = \"\";\n this.prevFaceDescriptor = undefined;\n this.currentFaceDescriptor = undefined;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.classList.remove(\"overlay-element--selfie-smile\");\n (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.classList.remove(\"overlay-element--selfie-neutral\");\n (_c = this.overlayElement) === null || _c === void 0 ? void 0 : _c.classList.remove(\"overlay-element--active\");\n }\n checkFace(livenessScore, pos, currentExpression, currentFaceDescriptor) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;\n const isFace = this.isFaceDetected(pos);\n // 1. check if the face is inside the circle area\n if (!isFace) {\n this.resetInstructions();\n return;\n }\n // 2. check if the face is looking straight at the camera\n else if (this.isAngleDetected(pos)) {\n this.resetInstructions();\n const event = new CustomEvent(\"lookStraight\");\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);\n if (this.instructionElement)\n this.instructionElement.innerHTML = \"Look straight at the camera.\";\n return;\n }\n // 3. check the liveness of the face\n if (this.detectLiveness(currentExpression))\n this.isLiveness = true;\n // 4. check the similarity of the face\n const isSimilarFace = this.detectSimilarFace(currentFaceDescriptor) < 0.6;\n if (this.isLiveness && !isSimilarFace) {\n this.resetInstructions();\n return;\n }\n if (currentExpression !== \"happy\") {\n const event = new CustomEvent(\"userNoSmile\");\n (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.dispatchEvent(event);\n (_c = this.overlayElement) === null || _c === void 0 ? void 0 : _c.classList.add(\"overlay-element--selfie-smile\");\n (_d = this.overlayElement) === null || _d === void 0 ? void 0 : _d.classList.remove(\"overlay-element--selfie-neutral\");\n (_e = this.overlayElement) === null || _e === void 0 ? void 0 : _e.classList.remove(\"overlay-element--active\");\n }\n else if (this.isLiveness) {\n // emit event here STAY 3 seconds\n const event = new CustomEvent(\"userSmiled\");\n (_f = this.overlayElement) === null || _f === void 0 ? void 0 : _f.dispatchEvent(event);\n (_g = this.overlayElement) === null || _g === void 0 ? void 0 : _g.classList.remove(\"overlay-element--selfie-smile\");\n (_h = this.overlayElement) === null || _h === void 0 ? void 0 : _h.classList.remove(\"overlay-element--selfie-neutral\");\n (_j = this.overlayElement) === null || _j === void 0 ? void 0 : _j.classList.add(\"overlay-element--active\");\n if (isSimilarFace &&\n this.isLiveness &&\n this.currenEmotionaltState === \"happy\" &&\n this.captureImage) {\n this.captureImage(livenessScore);\n }\n }\n else if (!this.isDone) {\n const event = new CustomEvent(\"userSmiledButNotLiveness\");\n (_k = this.overlayElement) === null || _k === void 0 ? void 0 : _k.dispatchEvent(event);\n (_l = this.overlayElement) === null || _l === void 0 ? void 0 : _l.classList.remove(\"overlay-element--selfie-smile\");\n (_m = this.overlayElement) === null || _m === void 0 ? void 0 : _m.classList.add(\"overlay-element--selfie-neutral\");\n (_o = this.overlayElement) === null || _o === void 0 ? void 0 : _o.classList.remove(\"overlay-element--active\");\n }\n }\n detectFace() {\n var _a, _b;\n return __awaiter(this, void 0, void 0, function* () {\n if (!this.videoElement || !this.canvasElement || !this.overlayElement)\n return;\n const displaySize = {\n width: this.canvasElement.width,\n height: this.canvasElement.height,\n };\n const detections = yield faceapi\n .detectSingleFace(this.videoElement, this.face_api_detection_options)\n .withFaceLandmarks()\n .withFaceExpressions()\n .withFaceDescriptor();\n const event = new CustomEvent(\"placeFace\");\n if (typeof detections !== \"undefined\") {\n const expressions = detections.expressions;\n const currentExpression = Object.keys(expressions).reduce((a, b) => {\n return expressions[a] >\n expressions[b]\n ? a\n : b;\n });\n const resizedDetections = faceapi.resizeResults(detections, displaySize);\n const pos = resizedDetections.landmarks.positions;\n const score = detections.detection.score;\n if (score > this.faceTrack_settings.minScore && pos) {\n this.checkFace(score, pos, currentExpression, detections.descriptor);\n }\n else {\n this.resetInstructions();\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);\n }\n // draw canvas points for developer view only\n // if (typeof resizedDetections !== \"undefined\" && this.canvasElement) {\n // this.canvasElement\n // .getContext(\"2d\")\n // ?.clearRect(\n // 0,\n // 0,\n // this.canvasElement.width,\n // this.canvasElement.height\n // );\n // if (resizedDetections) {\n // faceapi.draw.drawDetections(this.canvasElement, resizedDetections);\n // faceapi.draw.drawFaceLandmarks(this.canvasElement, resizedDetections);\n // faceapi.draw.drawFaceExpressions(\n // this.canvasElement,\n // resizedDetections\n // );\n // }\n // }\n }\n else {\n this.resetInstructions();\n (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.dispatchEvent(event);\n }\n if (!this.isDone)\n this.iFrameRef = requestAnimationFrame(() => this.detectFace());\n });\n }\n disableDetection() {\n return __awaiter(this, void 0, void 0, function* () {\n this.isDone = true;\n if (this.iFrameRef)\n cancelAnimationFrame(this.iFrameRef);\n this.iFrameRef = undefined;\n this.resetInstructions();\n });\n }\n resizeElement() {\n var _a, _b, _c, _d;\n if (!this.videoElement || !this.canvasElement)\n return;\n // 1. resize canvas to match video size\n this.canvasElement.width = this.videoElement.clientWidth;\n this.canvasElement.height = this.videoElement.clientHeight;\n // 2. resize circle overlay to match video size\n var circleSize = this.videoElement.clientHeight > this.videoElement.clientWidth\n ? this.videoElement.clientWidth - this.videoElement.clientWidth / 6\n : this.videoElement.clientHeight - this.videoElement.clientHeight / 6;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.style.setProperty(\"border-radius\", \"50%\");\n (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.style.setProperty(\"border\", \"solid white 3px\");\n (_c = this.overlayElement) === null || _c === void 0 ? void 0 : _c.style.setProperty(\"width\", `${(circleSize / 5) * 4.5}px`);\n (_d = this.overlayElement) === null || _d === void 0 ? void 0 : _d.style.setProperty(\"height\", `${circleSize}px`);\n }\n // train face-api models\n loadModel() {\n return __awaiter(this, void 0, void 0, function* () {\n const url = \"https://assets.pipwave.com/ekyc/sdk/face-models\" || 0;\n this.loadedModel = yield Promise.all([\n faceapi.loadTinyFaceDetectorModel(url),\n faceapi.loadFaceLandmarkModel(url),\n faceapi.loadFaceRecognitionModel(url),\n faceapi.loadFaceExpressionModel(url),\n ]);\n });\n }\n init() {\n return __awaiter(this, void 0, void 0, function* () {\n this.isDone = false;\n this.resizeElement();\n if (!this.loadedModel)\n yield this.loadModel();\n if (!this.iFrameRef)\n yield this.detectFace();\n });\n }\n listenToUserNoSmile(cb) {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.addEventListener(\"userNoSmile\", () => {\n cb();\n });\n }\n listenToUserSmiled(cb) {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.addEventListener(\"userSmiled\", () => {\n cb();\n });\n }\n listenToUserSmiledButNotLiveness(cb) {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.addEventListener(\"userSmiledButNotLiveness\", () => {\n cb();\n });\n }\n listenToLookStraight(cb) {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.addEventListener(\"lookStraight\", () => {\n cb();\n });\n }\n listenToPlaceFace(cb) {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.addEventListener(\"placeFace\", () => {\n cb();\n });\n }\n}\nexports[\"default\"] = FACEDETECTIONSDK;\n\n\n//# sourceURL=webpack://PWUISDK/./src/plugins/face-detection.ts?");
|
|
3817
|
+
eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst faceapi = __importStar(__webpack_require__(/*! face-api.js */ \"./node_modules/face-api.js/build/es6/index.js\"));\nclass FACEDETECTIONSDK {\n constructor(val) {\n this.isDone = false; // use to check if the face detection is done\n // === use as vuex state ===\n this.prevEmotionalState = \"\";\n this.currenEmotionaltState = \"\";\n this.isLiveness = false;\n // === constant variable ===\n this.face_api_detection_options = new faceapi.TinyFaceDetectorOptions({\n inputSize: 224,\n });\n this.faceTrack_settings = {\n contrast: 3,\n brightness: 0.5,\n threshold: 100,\n minCorrelation: 0.17,\n minScore: 0.6,\n };\n // html element\n this.videoElement = null;\n this.canvasElement = null;\n this.overlayElement = null;\n this.titleElement = null;\n this.instructionElement = null;\n Object.assign(this, val);\n }\n setCaptureImage(captureImage) {\n this.captureImage = captureImage;\n }\n // get the face position\n getFaceXY(pos) {\n const posF = {\n top: Math.min.apply(Math, pos.map(function (o) {\n return o.y;\n })),\n bottom: Math.max.apply(Math, pos.map(function (o) {\n return o.y;\n })),\n left: Math.min.apply(Math, pos.map(function (o) {\n return o.x;\n })),\n right: Math.max.apply(Math, pos.map(function (o) {\n return o.x;\n })),\n };\n return {\n x: posF[\"left\"],\n y: posF[\"top\"],\n w: posF[\"right\"] - posF[\"left\"],\n h: posF[\"bottom\"] - posF[\"top\"],\n };\n }\n // get the circle area position\n getCircleXY() {\n if (!this.canvasElement || !this.overlayElement)\n return { x: 0, y: 0, w: 0, h: 0 };\n // canvas rectangle position\n const posR = this.canvasElement.getBoundingClientRect();\n // circle position\n const posC = this.overlayElement.getBoundingClientRect();\n return {\n // get the coord x and y of the circle inside the canvas rectangle\n x: posC.x - posR.x,\n y: posC.y - posR.y,\n w: posC.width,\n h: posC.height,\n };\n }\n // to detect if your face is looking straight at the camera\n isAngleDetected(pos) {\n const angleOne = (Math.atan2(Math.abs(pos[7][\"y\"] - pos[33][\"y\"]), Math.abs(pos[7][\"x\"] - pos[33][\"x\"])) *\n 180) /\n Math.PI;\n const angleTwo = (Math.atan2(Math.abs(pos[60][\"y\"] - pos[33][\"y\"]), Math.abs(pos[60][\"x\"] - pos[33][\"x\"])) *\n 180) /\n Math.PI;\n const distance1 = Math.abs(pos[0][\"x\"] - pos[33][\"x\"]);\n const distance2 = Math.abs(pos[14][\"x\"] - pos[33][\"x\"]);\n const isAngle = !((angleOne > 40 && angleOne < 93) ||\n (angleTwo > 40 && angleTwo < 93));\n const isDistance = Math.abs(distance1 - distance2) / distance1 > 0.5;\n return isAngle || isDistance;\n }\n // check if the face is inside the circle area\n isFaceDetected(pos) {\n const posCircle = this.getCircleXY();\n const posFace = this.getFaceXY(pos);\n if (posFace.x + posFace.w < posCircle.x + posCircle.w &&\n posFace.x > posCircle.x &&\n posFace.y > posCircle.y &&\n posFace.y + posFace.h < posCircle.y + posCircle.h)\n return true;\n return false;\n }\n // check if the face emotional is changing\n detectLiveness(current) {\n this.prevEmotionalState = this.currenEmotionaltState;\n this.currenEmotionaltState = current;\n return (this.prevEmotionalState &&\n this.currenEmotionaltState &&\n this.prevEmotionalState != this.currenEmotionaltState);\n }\n // check if the face in the video is similar to the previous face\n detectSimilarFace(current) {\n this.prevFaceDescriptor = this.currentFaceDescriptor;\n this.currentFaceDescriptor = current;\n if (!this.prevFaceDescriptor || !this.currentFaceDescriptor)\n return 1;\n // the smaller the distance, the more similar the faces are\n return faceapi.euclideanDistance(this.prevFaceDescriptor, this.currentFaceDescriptor);\n }\n // reset instruction html text and all those checking\n resetInstructions() {\n var _a, _b, _c;\n this.isLiveness = false;\n this.currenEmotionaltState = \"\";\n this.prevEmotionalState = \"\";\n this.prevFaceDescriptor = undefined;\n this.currentFaceDescriptor = undefined;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.classList.remove(\"overlay-element--selfie-smile\");\n (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.classList.remove(\"overlay-element--selfie-neutral\");\n (_c = this.overlayElement) === null || _c === void 0 ? void 0 : _c.classList.remove(\"overlay-element--active\");\n }\n checkFace(livenessScore, pos, currentExpression, currentFaceDescriptor) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;\n const isFace = this.isFaceDetected(pos);\n // 1. check if the face is inside the circle area\n if (!isFace) {\n this.resetInstructions();\n return;\n }\n // 2. check if the face is looking straight at the camera\n else if (this.isAngleDetected(pos)) {\n this.resetInstructions();\n const event = new CustomEvent(\"lookStraight\");\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);\n if (this.instructionElement)\n this.instructionElement.innerHTML = \"Look straight at the camera.\";\n return;\n }\n // 3. check the liveness of the face\n if (this.detectLiveness(currentExpression))\n this.isLiveness = true;\n // 4. check the similarity of the face\n const isSimilarFace = this.detectSimilarFace(currentFaceDescriptor) < 0.6;\n if (this.isLiveness && !isSimilarFace) {\n this.resetInstructions();\n return;\n }\n if (currentExpression !== \"happy\") {\n const event = new CustomEvent(\"userNoSmile\");\n (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.dispatchEvent(event);\n (_c = this.overlayElement) === null || _c === void 0 ? void 0 : _c.classList.add(\"overlay-element--selfie-smile\");\n (_d = this.overlayElement) === null || _d === void 0 ? void 0 : _d.classList.remove(\"overlay-element--selfie-neutral\");\n (_e = this.overlayElement) === null || _e === void 0 ? void 0 : _e.classList.remove(\"overlay-element--active\");\n }\n else if (this.isLiveness) {\n // emit event here STAY 3 seconds\n const event = new CustomEvent(\"userSmiled\");\n (_f = this.overlayElement) === null || _f === void 0 ? void 0 : _f.dispatchEvent(event);\n (_g = this.overlayElement) === null || _g === void 0 ? void 0 : _g.classList.remove(\"overlay-element--selfie-smile\");\n (_h = this.overlayElement) === null || _h === void 0 ? void 0 : _h.classList.remove(\"overlay-element--selfie-neutral\");\n (_j = this.overlayElement) === null || _j === void 0 ? void 0 : _j.classList.add(\"overlay-element--active\");\n if (isSimilarFace &&\n this.isLiveness &&\n this.currenEmotionaltState === \"happy\" &&\n this.captureImage) {\n this.captureImage(livenessScore);\n }\n }\n else if (!this.isDone) {\n const event = new CustomEvent(\"userSmiledButNotLiveness\");\n (_k = this.overlayElement) === null || _k === void 0 ? void 0 : _k.dispatchEvent(event);\n (_l = this.overlayElement) === null || _l === void 0 ? void 0 : _l.classList.remove(\"overlay-element--selfie-smile\");\n (_m = this.overlayElement) === null || _m === void 0 ? void 0 : _m.classList.add(\"overlay-element--selfie-neutral\");\n (_o = this.overlayElement) === null || _o === void 0 ? void 0 : _o.classList.remove(\"overlay-element--active\");\n }\n }\n detectFace() {\n var _a, _b;\n return __awaiter(this, void 0, void 0, function* () {\n if (!this.videoElement || !this.canvasElement || !this.overlayElement)\n return;\n const displaySize = {\n width: this.canvasElement.width,\n height: this.canvasElement.height,\n };\n const detections = yield faceapi\n .detectSingleFace(this.videoElement, this.face_api_detection_options)\n .withFaceLandmarks()\n .withFaceExpressions()\n .withFaceDescriptor();\n const event = new CustomEvent(\"placeFace\");\n if (typeof detections !== \"undefined\") {\n const expressions = detections.expressions;\n const currentExpression = Object.keys(expressions).reduce((a, b) => {\n return expressions[a] >\n expressions[b]\n ? a\n : b;\n });\n const resizedDetections = faceapi.resizeResults(detections, displaySize);\n const pos = resizedDetections.landmarks.positions;\n const score = detections.detection.score;\n if (score > this.faceTrack_settings.minScore && pos) {\n this.checkFace(score, pos, currentExpression, detections.descriptor);\n }\n else {\n this.resetInstructions();\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);\n }\n // draw canvas points for developer view only\n // if (typeof resizedDetections !== \"undefined\" && this.canvasElement) {\n // this.canvasElement\n // .getContext(\"2d\")\n // ?.clearRect(\n // 0,\n // 0,\n // this.canvasElement.width,\n // this.canvasElement.height\n // );\n // if (resizedDetections) {\n // faceapi.draw.drawDetections(this.canvasElement, resizedDetections);\n // faceapi.draw.drawFaceLandmarks(this.canvasElement, resizedDetections);\n // faceapi.draw.drawFaceExpressions(\n // this.canvasElement,\n // resizedDetections\n // );\n // }\n // }\n }\n else {\n this.resetInstructions();\n (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.dispatchEvent(event);\n }\n if (!this.isDone)\n this.iFrameRef = requestAnimationFrame(() => this.detectFace());\n });\n }\n disableDetection() {\n return __awaiter(this, void 0, void 0, function* () {\n this.isDone = true;\n if (this.iFrameRef)\n cancelAnimationFrame(this.iFrameRef);\n this.iFrameRef = undefined;\n this.resetInstructions();\n });\n }\n // use to calculate the cropped image size / ratio\n // from ui or exact image src\n calculateHeightNWidth(width, height) {\n var _a, _b;\n const videoWidth = ((_a = this.videoElement) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;\n const videoHeight = ((_b = this.videoElement) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;\n // calculate the circle size for the image\n // based on which has the largest size: height or width\n // then the circle will be 5/6 from that smaller size\n const circleSize = videoHeight > videoWidth ? width - width / 6 : height - height / 6;\n const newWidth = (circleSize / 5) * 4.5;\n const newHeight = circleSize;\n return { width: newWidth, height: newHeight };\n }\n resizeElement() {\n var _a, _b, _c, _d;\n if (!this.videoElement || !this.canvasElement)\n return;\n // 1. resize canvas to match video size\n this.canvasElement.width = this.videoElement.clientWidth;\n this.canvasElement.height = this.videoElement.clientHeight;\n // 2. resize circle overlay to match video size\n const { width, height } = this.calculateHeightNWidth(this.videoElement.clientWidth, this.videoElement.clientHeight);\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.style.setProperty(\"border-radius\", \"50%\");\n (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.style.setProperty(\"border\", \"solid white 3px\");\n (_c = this.overlayElement) === null || _c === void 0 ? void 0 : _c.style.setProperty(\"width\", `${width}px`);\n (_d = this.overlayElement) === null || _d === void 0 ? void 0 : _d.style.setProperty(\"height\", `${height}px`);\n }\n // train face-api models\n loadModel() {\n return __awaiter(this, void 0, void 0, function* () {\n const url = \"https://assets.pipwave.com/ekyc/sdk/face-models\" || 0;\n this.loadedModel = yield Promise.all([\n faceapi.loadTinyFaceDetectorModel(url),\n faceapi.loadFaceLandmarkModel(url),\n faceapi.loadFaceRecognitionModel(url),\n faceapi.loadFaceExpressionModel(url),\n ]);\n });\n }\n init() {\n return __awaiter(this, void 0, void 0, function* () {\n this.isDone = false;\n this.resizeElement();\n if (!this.loadedModel)\n yield this.loadModel();\n if (!this.iFrameRef)\n yield this.detectFace();\n });\n }\n listenToUserNoSmile(cb) {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.addEventListener(\"userNoSmile\", () => {\n cb();\n });\n }\n listenToUserSmiled(cb) {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.addEventListener(\"userSmiled\", () => {\n cb();\n });\n }\n listenToUserSmiledButNotLiveness(cb) {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.addEventListener(\"userSmiledButNotLiveness\", () => {\n cb();\n });\n }\n listenToLookStraight(cb) {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.addEventListener(\"lookStraight\", () => {\n cb();\n });\n }\n listenToPlaceFace(cb) {\n var _a;\n (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.addEventListener(\"placeFace\", () => {\n cb();\n });\n }\n}\nexports[\"default\"] = FACEDETECTIONSDK;\n\n\n//# sourceURL=webpack://PWUISDK/./src/plugins/face-detection.ts?");
|
|
3818
3818
|
|
|
3819
3819
|
/***/ }),
|
|
3820
3820
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pipwave-ekyc-uikit",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.6",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/pw-bundle.js",
|
|
6
6
|
"scripts": {
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@tensorflow/tfjs-node": "^4.9.0",
|
|
34
|
+
"@types/w3c-image-capture": "^1.0.7",
|
|
34
35
|
"dotenv": "^16.3.1",
|
|
35
36
|
"dotenv-webpack": "^8.0.1",
|
|
36
37
|
"face-api.js": "^0.22.2",
|