pipwave-ekyc-uikit 2.0.0-4 → 2.0.0-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 +2 -2
- package/package.json +2 -2
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.webp */ \"./src/assets/img/mask-smile.webp\"), __webpack_require__.b);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(/* asset import */ __webpack_require__(/*! ../img/mask-neutral.webp */ \"./src/assets/img/mask-neutral.webp\"), __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-visible {\n visibility: visible;\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-3 {\n right: 0.75rem;\n}\n\n.pw-top-0 {\n top: 0px;\n}\n\n.pw-top-1 {\n top: 0.25rem;\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-7 {\n top: 1.75rem;\n}\n\n.pw-z-10 {\n z-index: 10;\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-m-5 {\n margin: 1.25rem;\n}\n\n.pw-mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\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-9 {\n margin-bottom: 2.25rem;\n}\n\n.pw-mb-\\\\[0\\\\.3rem\\\\] {\n margin-bottom: 0.3rem;\n}\n\n.pw-ml-2 {\n margin-left: 0.5rem;\n}\n\n.pw-mr-4 {\n margin-right: 1rem;\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-5 {\n margin-top: 1.25rem;\n}\n\n.pw-mt-6 {\n margin-top: 1.5rem;\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-11 {\n height: 2.75rem;\n}\n\n.pw-h-12 {\n height: 3rem;\n}\n\n.pw-h-14 {\n height: 3.5rem;\n}\n\n.pw-h-16 {\n height: 4rem;\n}\n\n.pw-h-3 {\n height: 0.75rem;\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-w-px {\n width: 1px !important;\n}\n\n.pw-w-10 {\n width: 2.5rem;\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-16 {\n width: 4rem;\n}\n\n.pw-w-36 {\n width: 9rem;\n}\n\n.pw-w-4 {\n width: 1rem;\n}\n\n.pw-w-4\\\\/5 {\n width: 80%;\n}\n\n.pw-w-6 {\n width: 1.5rem;\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-grow {\n flex-grow: 1;\n}\n\n.-pw-translate-x-1 {\n --tw-translate-x: -0.25rem;\n transform: translate(-0.25rem, 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-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 {\n --tw-translate-y: -0.25rem;\n transform: translate(var(--tw-translate-x), -0.25rem) 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 {\n --tw-translate-y: -0.5rem;\n transform: translate(var(--tw-translate-x), -0.5rem) 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-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-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-full {\n border-radius: 9999px;\n}\n\n.pw-rounded-lg {\n border-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-4 {\n border-width: 4px;\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-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.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(210, 28, 62);\n border-color: rgba(210, 28, 62, 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-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(29, 30, 34);\n background-color: rgba(29, 30, 34, 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-3 {\n --tw-bg-opacity: 1;\n background-color: rgb(247, 247, 250);\n background-color: rgba(247, 247, 250, 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-grey-6 {\n --tw-bg-opacity: 1;\n background-color: rgb(158, 158, 158);\n background-color: rgba(158, 158, 158, var(--tw-bg-opacity));\n}\n\n.pw-bg-primary {\n --tw-bg-opacity: 1;\n background-color: rgb(210, 28, 62);\n background-color: rgba(210, 28, 62, 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-20 {\n --tw-bg-opacity: 0.2 ;\n}\n\n.pw-bg-opacity-70 {\n --tw-bg-opacity: 0.7 ;\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-\\\\[\\\\#D21C3E\\\\] {\n --tw-gradient-from: #D21C3E var(--tw-gradient-from-position);\n --tw-gradient-to: rgba(210, 28, 62, 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) ;\n}\n\n.pw-to-\\\\[\\\\#D03C58\\\\] {\n --tw-gradient-to: #D03C58 var(--tw-gradient-to-position) ;\n}\n\n.\\\\!pw-p-0 {\n padding: 0px !important;\n}\n\n.pw-p-0 {\n padding: 0px;\n}\n\n.pw-p-2 {\n padding: 0.5rem;\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-px-9 {\n padding-left: 2.25rem;\n padding-right: 2.25rem;\n}\n\n.pw-py-10 {\n padding-top: 2.5rem;\n padding-bottom: 2.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-pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pw-pl-8 {\n padding-left: 2rem;\n}\n\n.pw-pr-2 {\n padding-right: 0.5rem;\n}\n\n.pw-pt-1 {\n padding-top: 0.25rem;\n}\n\n.pw-pt-2 {\n padding-top: 0.5rem;\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-pt-5 {\n padding-top: 1.25rem;\n}\n\n.pw-pt-8 {\n padding-top: 2rem;\n}\n\n.pw-pt-9 {\n padding-top: 2.25rem;\n}\n\n.pw-text-center {\n text-align: center;\n}\n\n.pw-text-right {\n text-align: right;\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-6xl {\n font-size: 3.75rem;\n line-height: 1;\n}\n\n.pw-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.pw-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\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-capitalize {\n text-transform: capitalize;\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-2 {\n --tw-text-opacity: 1;\n color: rgb(250, 250, 252);\n color: rgba(250, 250, 252, 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-info {\n --tw-text-opacity: 1;\n color: rgb(81, 139, 255);\n color: rgba(81, 139, 255, 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(210, 28, 62);\n color: rgba(210, 28, 62, 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-shadow-button-shadow {\n --tw-shadow: 0px 3px 5px 0px rgba(115,115,123,0.30196);\n --tw-shadow-colored: 0px 3px 5px 0px var(--tw-shadow-color);\n box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0px 3px 5px 0px rgba(115, 115, 123, 0.30196);\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-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-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-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-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-bg-disabled,\ninput:disabled {\n background: #f0f0f5;\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.pw-drag-drop.highlight {\n outline-color: #d21c3e;\n}\n\n/* Chrome, Safari, Edge, Opera */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n/* Firefox */\ninput[type=number] {\n -moz-appearance: textfield;\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-bg-color {\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-id-element:before,\n.camera-body-area .border-id-element:after {\n top: -2px;\n left: -2px;\n position: absolute;\n content: \"\";\n width: 100%;\n height: calc(100% + 50px);\n border-radius: 16px;\n border: 2px solid white;\n}\n.camera-body-area .outlide-id-bottom {\n position: absolute;\n top: 100%;\n width: 100%;\n background-color: white;\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\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-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// 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.webp */ \"./src/assets/img/mask-smile.webp\"), __webpack_require__.b);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(/* asset import */ __webpack_require__(/*! ../img/mask-neutral.webp */ \"./src/assets/img/mask-neutral.webp\"), __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\\\\/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-3 {\n right: 0.75rem;\n}\n\n.pw-top-0 {\n top: 0px;\n}\n\n.pw-top-1 {\n top: 0.25rem;\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\\\\/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-z-10 {\n z-index: 10;\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-m-5 {\n margin: 1.25rem;\n}\n\n.pw-mx-2 {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\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-9 {\n margin-bottom: 2.25rem;\n}\n\n.pw-mb-\\\\[0\\\\.3rem\\\\] {\n margin-bottom: 0.3rem;\n}\n\n.pw-ml-2 {\n margin-left: 0.5rem;\n}\n\n.pw-mr-4 {\n margin-right: 1rem;\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-5 {\n margin-top: 1.25rem;\n}\n\n.pw-mt-6 {\n margin-top: 1.5rem;\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-11 {\n height: 2.75rem;\n}\n\n.pw-h-12 {\n height: 3rem;\n}\n\n.pw-h-14 {\n height: 3.5rem;\n}\n\n.pw-h-16 {\n height: 4rem;\n}\n\n.pw-h-3 {\n height: 0.75rem;\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-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-16 {\n width: 4rem;\n}\n\n.pw-w-36 {\n width: 9rem;\n}\n\n.pw-w-4\\\\/5 {\n width: 80%;\n}\n\n.pw-w-6 {\n width: 1.5rem;\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-grow {\n flex-grow: 1;\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-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-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-full {\n border-radius: 9999px;\n}\n\n.pw-rounded-lg {\n border-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-4 {\n border-width: 4px;\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-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-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(29, 30, 34);\n background-color: rgba(29, 30, 34, 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-3 {\n --tw-bg-opacity: 1;\n background-color: rgb(247, 247, 250);\n background-color: rgba(247, 247, 250, 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-grey-6 {\n --tw-bg-opacity: 1;\n background-color: rgb(158, 158, 158);\n background-color: rgba(158, 158, 158, var(--tw-bg-opacity));\n}\n\n.pw-bg-primary {\n --tw-bg-opacity: 1;\n background-color: rgb(210, 28, 62);\n background-color: rgba(210, 28, 62, 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-20 {\n --tw-bg-opacity: 0.2 ;\n}\n\n.pw-bg-opacity-70 {\n --tw-bg-opacity: 0.7 ;\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-\\\\[\\\\#D21C3E\\\\] {\n --tw-gradient-from: #D21C3E var(--tw-gradient-from-position);\n --tw-gradient-to: rgba(210, 28, 62, 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) ;\n}\n\n.pw-to-\\\\[\\\\#D03C58\\\\] {\n --tw-gradient-to: #D03C58 var(--tw-gradient-to-position) ;\n}\n\n.\\\\!pw-p-0 {\n padding: 0px !important;\n}\n\n.pw-p-0 {\n padding: 0px;\n}\n\n.pw-p-2 {\n padding: 0.5rem;\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-px-9 {\n padding-left: 2.25rem;\n padding-right: 2.25rem;\n}\n\n.pw-py-10 {\n padding-top: 2.5rem;\n padding-bottom: 2.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-pb-3 {\n padding-bottom: 0.75rem;\n}\n\n.pw-pl-8 {\n padding-left: 2rem;\n}\n\n.pw-pr-2 {\n padding-right: 0.5rem;\n}\n\n.pw-pt-1 {\n padding-top: 0.25rem;\n}\n\n.pw-pt-2 {\n padding-top: 0.5rem;\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-pt-5 {\n padding-top: 1.25rem;\n}\n\n.pw-pt-8 {\n padding-top: 2rem;\n}\n\n.pw-pt-9 {\n padding-top: 2.25rem;\n}\n\n.pw-text-center {\n text-align: center;\n}\n\n.pw-text-right {\n text-align: right;\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-6xl {\n font-size: 3.75rem;\n line-height: 1;\n}\n\n.pw-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n\n.pw-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\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-2 {\n --tw-text-opacity: 1;\n color: rgb(250, 250, 252);\n color: rgba(250, 250, 252, 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-info {\n --tw-text-opacity: 1;\n color: rgb(81, 139, 255);\n color: rgba(81, 139, 255, 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(210, 28, 62);\n color: rgba(210, 28, 62, 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-shadow-button-shadow {\n --tw-shadow: 0px 3px 5px 0px rgba(115,115,123,0.30196);\n --tw-shadow-colored: 0px 3px 5px 0px var(--tw-shadow-color);\n box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0px 3px 5px 0px rgba(115, 115, 123, 0.30196);\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-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-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-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-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-bg-disabled,\ninput:disabled {\n background: #f0f0f5;\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.pw-drag-drop.highlight {\n outline-color: #d21c3e;\n}\n\n/* Chrome, Safari, Edge, Opera */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n/* Firefox */\ninput[type=number] {\n -moz-appearance: textfield;\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-bg-color {\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-id-element:before,\n.camera-body-area .border-id-element:after {\n top: -2px;\n left: -2px;\n position: absolute;\n content: \"\";\n width: 100%;\n height: calc(100% + 50px);\n border-radius: 16px;\n border: 2px solid white;\n}\n.camera-body-area .outlide-id-bottom {\n position: absolute;\n top: 100%;\n width: 100%;\n background-color: white;\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\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-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// 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
|
|
|
@@ -3979,7 +3979,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncons
|
|
|
3979
3979
|
/***/ (function(__unused_webpack_module, exports) {
|
|
3980
3980
|
|
|
3981
3981
|
"use strict";
|
|
3982
|
-
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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nclass CardMaskingPlugin {\n constructor(elementId) {\n this.elementId = \"\";\n this.lineOffset = 10;\n this.mousedown = false;\n this.clickedArea = { box: -1, pos: \"o\" };\n this.selectedArea = -1;\n this.currentCoordinate = { x: -1, y: -1 };\n this.boxes = [];\n this.elementId = elementId;\n }\n initCard(htmlCanvas, img, maskedCoordinates = []) {\n this.canvas = htmlCanvas;\n this.originalImg = img;\n // convert the masked coordinates from original image to canvas image\n const scaleX = this.canvas.width / this.originalImg.width;\n const scaleY = this.canvas.height / this.originalImg.height;\n this.boxes = maskedCoordinates.map((box) => ({\n x1: box.x1 * scaleX,\n y1: box.y1 * scaleY,\n x2: box.x2 * scaleX,\n y2: box.y2 * scaleY,\n }));\n // add mouse/touch event\n this.canvas.addEventListener(\"mousedown\", (e) => this.onMousedown(e, this));\n this.canvas.addEventListener(\"touchstart\", (e) => this.onMousedown(e, this));\n this.canvas.addEventListener(\"mouseup\", (e) => this.onMouseup(e, this));\n this.canvas.addEventListener(\"touchend\", (e) => this.onMouseup(e, this));\n this.canvas.addEventListener(\"mouseout\", (e) => this.onMouseOut(e, this));\n this.canvas.addEventListener(\"mousemove\", (e) => this.onMouseMove(e, this));\n this.canvas.addEventListener(\"touchmove\", (e) => {\n if (!this.isTouchEventWithinEl(e))\n return this.onMouseOut(e, this);\n this.onMouseMove(e, this);\n });\n }\n downloadImage(fullImageSrc) {\n return __awaiter(this, void 0, void 0, function* () {\n if (!this.originalImg || !this.canvas)\n return;\n // Create an Image element\n const flattenedImg = new Image();\n flattenedImg.src = fullImageSrc || this.originalImg.src;\n const self = this;\n // Wait for the image to load\n return yield new Promise(function (resolve) {\n flattenedImg.onload = () => {\n if (!self.originalImg || !self.canvas)\n return resolve(\"\");\n // Calculate the cropped dimensions and offsets\n let cropOffsetX = 0;\n let cropOffsetY = 0;\n if (fullImageSrc) {\n cropOffsetX = (flattenedImg.width - self.originalImg.width) / 2;\n cropOffsetY = (flattenedImg.height - self.originalImg.height) / 2;\n }\n // Create a canvas element\n const flattenedCanvas = document.createElement(\"canvas\");\n const flattenedCtx = flattenedCanvas.getContext(\"2d\");\n // Set canvas dimensions\n flattenedCanvas.width = flattenedImg.width;\n flattenedCanvas.height = flattenedImg.height;\n // Draw the original image on the canvas\n flattenedCtx.drawImage(flattenedImg, 0, 0);\n const scaleX = self.originalImg.width / self.canvas.width;\n const scaleY = self.originalImg.height / self.canvas.height;\n // Draw the boxes on the canvas\n for (let i = 0; i < self.boxes.length; i++) {\n const box = self.boxes[i];\n const boxX1 = box.x1 * scaleX;\n const boxY1 = box.y1 * scaleY;\n const height = (box.x2 - box.x1) * scaleX;\n const width = (box.y2 - box.y1) * scaleY;\n flattenedCtx.fillStyle = \"black\";\n flattenedCtx.fillRect(boxX1 + cropOffsetX, boxY1 + cropOffsetY, height, width);\n }\n // Get the combined image data from the canvas\n return resolve(flattenedCanvas.toDataURL(\"image/jpeg\"));\n };\n });\n });\n }\n createRectangle() {\n if (!this.canvas)\n return;\n const width = this.canvas.width / 3 > 80 ? 80 : this.canvas.width / 4;\n const height = this.canvas.height / 4 > 40 ? 40 : this.canvas.height / 8;\n const w = this.canvas.width / 2;\n const h = this.canvas.height / 2;\n const tempBox = this.newBox(w - width / 2, h - height / 2, w + width / 2, h + height / 2);\n if (tempBox) {\n this.boxes.push(tempBox);\n this.updateSelectedArea(this.boxes.length - 1);\n this.redraw();\n }\n }\n removeAllRectangles() {\n if (!this.canvas || !this.originalImg)\n return;\n this.boxes = [];\n const ctx = this.canvas.getContext(\"2d\");\n ctx.drawImage(this.originalImg, 0, 0, this.canvas.width, this.canvas.height);\n }\n removeRectangle() {\n if (this.selectedArea > -1) {\n this.boxes.splice(this.selectedArea, 1);\n const selectedArea = this.boxes.length > 0 ? this.boxes.length - 1 : -1;\n this.updateSelectedArea(selectedArea);\n this.redraw();\n }\n }\n getOffsetX(e) {\n var _a;\n const elBoundingClientRect = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n return (e.offsetX ||\n e.touches[0].clientX - elBoundingClientRect.left);\n }\n getOffsetY(e) {\n var _a;\n const elBoundingClientRect = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n return (e.offsetY ||\n e.touches[0].clientY - elBoundingClientRect.top);\n }\n redraw() {\n if (!this.canvas || !this.originalImg)\n return;\n const context = this.canvas.getContext(\"2d\");\n context.drawImage(this.originalImg, 0, 0, this.canvas.width, this.canvas.height);\n context.beginPath();\n for (let i = 0; i < this.boxes.length; i++) {\n this.drawMasking(this.boxes[i], context);\n }\n }\n findArea(x, y, box, i) {\n const xCenter = box.x1 + (box.x2 - box.x1) / 2;\n const yCenter = box.y1 + (box.y2 - box.y1) / 2;\n if (box.x1 - this.lineOffset < x && x < box.x1 + this.lineOffset) {\n if (box.y1 - this.lineOffset < y && y < box.y1 + this.lineOffset) {\n return { box: i, pos: \"tl\" };\n }\n else if (box.y2 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n return { box: i, pos: \"bl\" };\n }\n else if (yCenter - this.lineOffset < y &&\n y < yCenter + this.lineOffset) {\n return { box: i, pos: \"l\" };\n }\n }\n else if (box.x2 - this.lineOffset < x && x < box.x2 + this.lineOffset) {\n if (box.y1 - this.lineOffset < y && y < box.y1 + this.lineOffset) {\n return { box: i, pos: \"tr\" };\n }\n else if (box.y2 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n return { box: i, pos: \"br\" };\n }\n else if (yCenter - this.lineOffset < y &&\n y < yCenter + this.lineOffset) {\n return { box: i, pos: \"r\" };\n }\n }\n else if (xCenter - this.lineOffset < x && x < xCenter + this.lineOffset) {\n if (box.y1 - this.lineOffset < y && y < box.y1 + this.lineOffset) {\n return { box: i, pos: \"t\" };\n }\n else if (box.y2 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n return { box: i, pos: \"b\" };\n }\n else if (box.y1 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n return { box: i, pos: \"i\" };\n }\n }\n else if (box.x1 - this.lineOffset < x && x < box.x2 + this.lineOffset) {\n if (box.y1 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n return { box: i, pos: \"i\" };\n }\n }\n }\n findCurrentArea(x, y) {\n if (this.clickedArea.box != -1) {\n const box = this.boxes[this.clickedArea.box];\n const currentArea = this.findArea(x, y, box, this.clickedArea.box);\n if (currentArea)\n return currentArea;\n }\n for (let i = 0; i < this.boxes.length; i++) {\n const box = this.boxes[i];\n const currentArea = this.findArea(x, y, box, i);\n if (currentArea)\n return currentArea;\n }\n return { box: -1, pos: \"o\" };\n }\n newBox(x1, y1, x2, y2) {\n const boxX1 = x1 < x2 ? x1 : x2;\n const boxY1 = y1 < y2 ? y1 : y2;\n const boxX2 = x1 > x2 ? x1 : x2;\n const boxY2 = y1 > y2 ? y1 : y2;\n const isNewBox = boxX2 - boxX1 > this.lineOffset * 2 &&\n boxY2 - boxY1 > this.lineOffset * 2;\n return isNewBox\n ? { x1: boxX1, y1: boxY1, x2: boxX2, y2: boxY2 }\n : undefined;\n }\n drawAnchor(context, x, y) {\n context.beginPath();\n context.arc(x, y, 3, 0, 2 * Math.PI);\n context.fillStyle = \"white\";\n context.fill();\n context.stroke();\n }\n drawMasking(box, context) {\n if (!this.canvas)\n return;\n // draw black rectangle\n const ctx = this.canvas.getContext(\"2d\");\n ctx.fillStyle = \"black\";\n ctx.fillRect(box.x1, box.y1, box.x2 - box.x1, box.y2 - box.y1);\n // draw the resize rectangle at selected box\n if (this.selectedArea !== this.boxes.indexOf(box))\n return;\n const x1 = box.x1;\n const y1 = box.y1;\n const x2 = box.x2;\n const y2 = box.y2;\n const xCenter = x1 + (x2 - x1) / 2;\n const yCenter = y1 + (y2 - y1) / 2;\n // draw the line\n context.strokeStyle = \"#E78BFF\";\n context.rect(x1, y1, x2 - x1, y2 - y1);\n context.lineWidth = 2;\n context.stroke();\n // draw the circle anchor\n this.drawAnchor(context, x1, y1);\n this.drawAnchor(context, x1, yCenter);\n this.drawAnchor(context, x1, y2);\n this.drawAnchor(context, xCenter, y1);\n this.drawAnchor(context, xCenter, y2);\n this.drawAnchor(context, x2, y1);\n this.drawAnchor(context, x2, yCenter);\n this.drawAnchor(context, x2, y2);\n }\n updateSelectedArea(newVal) {\n this.selectedArea = newVal;\n const mainScreen = document.getElementById(this.elementId);\n const event = new CustomEvent(\"updateSelectedArea\", {\n detail: { val: newVal },\n });\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.dispatchEvent(event);\n }\n resetSelectedArea() {\n this.updateSelectedArea(-1);\n this.redraw();\n }\n onMousedown(e, self) {\n e.preventDefault();\n self.mousedown = true;\n self.clickedArea = self.findCurrentArea(self.getOffsetX(e), self.getOffsetY(e));\n if (self.clickedArea)\n self.updateSelectedArea(self.clickedArea.box);\n self.currentCoordinate = {\n x: self.getOffsetX(e),\n y: self.getOffsetY(e),\n };\n self.redraw();\n }\n onMouseup(e, self) {\n e.preventDefault();\n this.updateSelectedArea(self.clickedArea.box);\n if (self.clickedArea.box != -1) {\n let selectedBox = self.boxes[self.clickedArea.box];\n if (selectedBox.x1 > selectedBox.x2) {\n const previousX1 = selectedBox.x1;\n selectedBox.x1 = selectedBox.x2;\n selectedBox.x2 = previousX1;\n }\n if (selectedBox.y1 > selectedBox.y2) {\n const previousY1 = selectedBox.y1;\n selectedBox.y1 = selectedBox.y2;\n selectedBox.y2 = previousY1;\n }\n }\n self.redraw();\n self.clickedArea = { box: -1, pos: \"o\" };\n self.mousedown = false;\n }\n isTouchEventWithinEl(e) {\n var _a;\n const item = e.clientX\n ? e\n : e.changedTouches.item(0);\n const elBoundingClientRect = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n if (elBoundingClientRect == null || item == null)\n return false;\n return (elBoundingClientRect.right > item.clientX &&\n elBoundingClientRect.left < item.clientX &&\n elBoundingClientRect.top < item.clientY &&\n elBoundingClientRect.bottom > item.clientY);\n }\n onMouseOut(e, self) {\n e.preventDefault();\n if (self.clickedArea.box !== -1) {\n let selectedBox = self.boxes[self.clickedArea.box];\n if (selectedBox.x1 > selectedBox.x2) {\n const previousX1 = selectedBox.x1;\n selectedBox.x1 = selectedBox.x2;\n selectedBox.x2 > previousX1;\n }\n if (selectedBox.y1 > selectedBox.y2) {\n const previousY1 = selectedBox.y1;\n selectedBox.y1 = selectedBox.y2;\n selectedBox.y2 > previousY1;\n }\n }\n self.mousedown = false;\n self.clickedArea = { box: -1, pos: \"o\" };\n }\n onMouseMove(e, self) {\n e.preventDefault();\n if (!self.mousedown || self.clickedArea.box === -1)\n return;\n const x = self.getOffsetX(e);\n const y = self.getOffsetY(e);\n const xOffset = x - self.currentCoordinate.x;\n const yOffset = y - self.currentCoordinate.y;\n self.currentCoordinate = { x, y };\n if (self.clickedArea.pos == \"i\" ||\n self.clickedArea.pos == \"tl\" ||\n self.clickedArea.pos == \"l\" ||\n self.clickedArea.pos == \"bl\") {\n self.boxes[self.clickedArea.box].x1 += xOffset;\n }\n if (self.clickedArea.pos == \"i\" ||\n self.clickedArea.pos == \"tl\" ||\n self.clickedArea.pos == \"t\" ||\n self.clickedArea.pos == \"tr\") {\n self.boxes[self.clickedArea.box].y1 += yOffset;\n }\n if (self.clickedArea.pos == \"i\" ||\n self.clickedArea.pos == \"tr\" ||\n self.clickedArea.pos == \"r\" ||\n self.clickedArea.pos == \"br\") {\n self.boxes[self.clickedArea.box].x2 += xOffset;\n }\n if (self.clickedArea.pos == \"i\" ||\n self.clickedArea.pos == \"bl\" ||\n self.clickedArea.pos == \"b\" ||\n self.clickedArea.pos == \"br\") {\n self.boxes[self.clickedArea.box].y2 += yOffset;\n }\n self.redraw();\n }\n}\nexports[\"default\"] = CardMaskingPlugin;\n\n\n//# sourceURL=webpack://PWUISDK/./src/plugins/card-masking.ts?");
|
|
3982
|
+
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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nclass CardMaskingPlugin {\n constructor(elementId) {\n this.elementId = \"\";\n this.lineOffset = 10;\n this.mousedown = false;\n this.clickedArea = { box: -1, pos: \"o\" };\n this.selectedArea = -1;\n this.currentCoordinate = { x: -1, y: -1 };\n this.boxes = [];\n this.elementId = elementId;\n }\n initCard(htmlCanvas, img, maskedCoordinates = []) {\n this.canvas = htmlCanvas;\n this.originalImg = img;\n // convert the masked coordinates from original image to canvas image\n const scaleX = this.canvas.width / this.originalImg.width;\n const scaleY = this.canvas.height / this.originalImg.height;\n this.boxes = maskedCoordinates.map((box) => ({\n x1: box.x1 * scaleX,\n y1: box.y1 * scaleY,\n x2: box.x2 * scaleX,\n y2: box.y2 * scaleY,\n }));\n // add mouse/touch event\n this.canvas.addEventListener(\"mousedown\", (e) => this.onMousedown(e, this));\n this.canvas.addEventListener(\"touchstart\", (e) => this.onMousedown(e, this));\n this.canvas.addEventListener(\"mouseup\", (e) => this.onMouseup(e, this));\n this.canvas.addEventListener(\"touchend\", (e) => this.onMouseup(e, this));\n this.canvas.addEventListener(\"mouseout\", (e) => this.onMouseOut(e, this));\n this.canvas.addEventListener(\"mousemove\", (e) => this.onMouseMove(e, this));\n this.canvas.addEventListener(\"touchmove\", (e) => {\n if (!this.isTouchEventWithinEl(e))\n return this.onMouseOut(e, this);\n this.onMouseMove(e, this);\n });\n }\n downloadImage(fullImageSrc) {\n return __awaiter(this, void 0, void 0, function* () {\n if (!this.originalImg || !this.canvas)\n return;\n // Create an Image element\n const flattenedImg = new Image();\n flattenedImg.src = fullImageSrc || this.originalImg.src;\n const self = this;\n // Wait for the image to load\n return yield new Promise(function (resolve) {\n flattenedImg.onload = () => {\n if (!self.originalImg || !self.canvas)\n return resolve(\"\");\n // Calculate the cropped dimensions and offsets\n let cropOffsetX = 0;\n let cropOffsetY = 0;\n if (fullImageSrc) {\n cropOffsetX = (flattenedImg.width - self.originalImg.width) / 2;\n cropOffsetY = (flattenedImg.height - self.originalImg.height) / 2;\n }\n // Create a canvas element\n const flattenedCanvas = document.createElement(\"canvas\");\n const flattenedCtx = flattenedCanvas.getContext(\"2d\");\n // Set canvas dimensions\n flattenedCanvas.width = flattenedImg.width;\n flattenedCanvas.height = flattenedImg.height;\n // Draw the original image on the canvas\n flattenedCtx.drawImage(flattenedImg, 0, 0);\n const scaleX = self.originalImg.width / self.canvas.width;\n const scaleY = self.originalImg.height / self.canvas.height;\n // Draw the boxes on the canvas\n for (let i = 0; i < self.boxes.length; i++) {\n const box = self.boxes[i];\n const boxX1 = box.x1 * scaleX;\n const boxY1 = box.y1 * scaleY;\n const height = (box.x2 - box.x1) * scaleX;\n const width = (box.y2 - box.y1) * scaleY;\n flattenedCtx.fillStyle = \"black\";\n flattenedCtx.fillRect(boxX1 + cropOffsetX, boxY1 + cropOffsetY, height, width);\n }\n // Get the combined image data from the canvas\n return resolve(flattenedCanvas.toDataURL(\"image/jpeg\"));\n };\n });\n });\n }\n createRectangle() {\n if (!this.canvas)\n return;\n const width = this.canvas.width / 3 > 80 ? 80 : this.canvas.width / 3;\n const height = this.canvas.height / 4 > 40 ? 40 : this.canvas.height / 4;\n const w = this.canvas.width / 2;\n const h = this.canvas.height / 2;\n const tempBox = this.newBox(w - width / 2, h - height / 2, w + width / 2, h + height / 2);\n if (tempBox) {\n this.boxes.push(tempBox);\n this.updateSelectedArea(this.boxes.length - 1);\n this.redraw();\n }\n }\n removeAllRectangles() {\n if (!this.canvas || !this.originalImg)\n return;\n this.boxes = [];\n const ctx = this.canvas.getContext(\"2d\");\n ctx.drawImage(this.originalImg, 0, 0, this.canvas.width, this.canvas.height);\n }\n removeRectangle() {\n if (this.selectedArea > -1) {\n this.boxes.splice(this.selectedArea, 1);\n const selectedArea = this.boxes.length > 0 ? this.boxes.length - 1 : -1;\n this.updateSelectedArea(selectedArea);\n this.redraw();\n }\n }\n getOffsetX(e) {\n var _a;\n const elBoundingClientRect = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n return (e.offsetX ||\n e.touches[0].clientX - elBoundingClientRect.left);\n }\n getOffsetY(e) {\n var _a;\n const elBoundingClientRect = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n return (e.offsetY ||\n e.touches[0].clientY - elBoundingClientRect.top);\n }\n redraw() {\n if (!this.canvas || !this.originalImg)\n return;\n const context = this.canvas.getContext(\"2d\");\n context.drawImage(this.originalImg, 0, 0, this.canvas.width, this.canvas.height);\n context.beginPath();\n for (let i = 0; i < this.boxes.length; i++) {\n this.drawMasking(this.boxes[i], context);\n }\n }\n findArea(x, y, box, i) {\n const xCenter = box.x1 + (box.x2 - box.x1) / 2;\n const yCenter = box.y1 + (box.y2 - box.y1) / 2;\n if (box.x1 - this.lineOffset < x && x < box.x1 + this.lineOffset) {\n if (box.y1 - this.lineOffset < y && y < box.y1 + this.lineOffset) {\n return { box: i, pos: \"tl\" };\n }\n else if (box.y2 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n return { box: i, pos: \"bl\" };\n }\n else if (yCenter - this.lineOffset < y &&\n y < yCenter + this.lineOffset) {\n return { box: i, pos: \"l\" };\n }\n }\n else if (box.x2 - this.lineOffset < x && x < box.x2 + this.lineOffset) {\n if (box.y1 - this.lineOffset < y && y < box.y1 + this.lineOffset) {\n return { box: i, pos: \"tr\" };\n }\n else if (box.y2 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n return { box: i, pos: \"br\" };\n }\n else if (yCenter - this.lineOffset < y &&\n y < yCenter + this.lineOffset) {\n return { box: i, pos: \"r\" };\n }\n }\n else if (xCenter - this.lineOffset < x && x < xCenter + this.lineOffset) {\n if (box.y1 - this.lineOffset < y && y < box.y1 + this.lineOffset) {\n return { box: i, pos: \"t\" };\n }\n else if (box.y2 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n return { box: i, pos: \"b\" };\n }\n else if (box.y1 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n return { box: i, pos: \"i\" };\n }\n }\n else if (box.x1 - this.lineOffset < x && x < box.x2 + this.lineOffset) {\n if (box.y1 - this.lineOffset < y && y < box.y2 + this.lineOffset) {\n return { box: i, pos: \"i\" };\n }\n }\n }\n findCurrentArea(x, y) {\n if (this.clickedArea.box != -1) {\n const box = this.boxes[this.clickedArea.box];\n const currentArea = this.findArea(x, y, box, this.clickedArea.box);\n if (currentArea)\n return currentArea;\n }\n for (let i = 0; i < this.boxes.length; i++) {\n const box = this.boxes[i];\n const currentArea = this.findArea(x, y, box, i);\n if (currentArea)\n return currentArea;\n }\n return { box: -1, pos: \"o\" };\n }\n newBox(x1, y1, x2, y2) {\n const boxX1 = x1 < x2 ? x1 : x2;\n const boxY1 = y1 < y2 ? y1 : y2;\n const boxX2 = x1 > x2 ? x1 : x2;\n const boxY2 = y1 > y2 ? y1 : y2;\n const isNewBox = boxX2 - boxX1 > this.lineOffset * 2 &&\n boxY2 - boxY1 > this.lineOffset * 2;\n return isNewBox\n ? { x1: boxX1, y1: boxY1, x2: boxX2, y2: boxY2 }\n : undefined;\n }\n drawAnchor(context, x, y) {\n context.beginPath();\n context.arc(x, y, 3, 0, 2 * Math.PI);\n context.fillStyle = \"white\";\n context.fill();\n context.stroke();\n }\n drawMasking(box, context) {\n if (!this.canvas)\n return;\n // draw black rectangle\n const ctx = this.canvas.getContext(\"2d\");\n ctx.fillStyle = \"black\";\n ctx.fillRect(box.x1, box.y1, box.x2 - box.x1, box.y2 - box.y1);\n // draw the resize rectangle at selected box\n if (this.selectedArea !== this.boxes.indexOf(box))\n return;\n const x1 = box.x1;\n const y1 = box.y1;\n const x2 = box.x2;\n const y2 = box.y2;\n const xCenter = x1 + (x2 - x1) / 2;\n const yCenter = y1 + (y2 - y1) / 2;\n // draw the line\n context.strokeStyle = \"#E78BFF\";\n context.rect(x1, y1, x2 - x1, y2 - y1);\n context.lineWidth = 2;\n context.stroke();\n // draw the circle anchor\n this.drawAnchor(context, x1, y1);\n this.drawAnchor(context, x1, yCenter);\n this.drawAnchor(context, x1, y2);\n this.drawAnchor(context, xCenter, y1);\n this.drawAnchor(context, xCenter, y2);\n this.drawAnchor(context, x2, y1);\n this.drawAnchor(context, x2, yCenter);\n this.drawAnchor(context, x2, y2);\n }\n updateSelectedArea(newVal) {\n this.selectedArea = newVal;\n const mainScreen = document.getElementById(this.elementId);\n const event = new CustomEvent(\"updateSelectedArea\", {\n detail: { val: newVal },\n });\n mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.dispatchEvent(event);\n }\n resetSelectedArea() {\n this.updateSelectedArea(-1);\n this.redraw();\n }\n onMousedown(e, self) {\n e.preventDefault();\n self.mousedown = true;\n self.clickedArea = self.findCurrentArea(self.getOffsetX(e), self.getOffsetY(e));\n if (self.clickedArea)\n self.updateSelectedArea(self.clickedArea.box);\n self.currentCoordinate = {\n x: self.getOffsetX(e),\n y: self.getOffsetY(e),\n };\n self.redraw();\n }\n onMouseup(e, self) {\n e.preventDefault();\n this.updateSelectedArea(self.clickedArea.box);\n if (self.clickedArea.box != -1) {\n let selectedBox = self.boxes[self.clickedArea.box];\n if (selectedBox.x1 > selectedBox.x2) {\n const previousX1 = selectedBox.x1;\n selectedBox.x1 = selectedBox.x2;\n selectedBox.x2 = previousX1;\n }\n if (selectedBox.y1 > selectedBox.y2) {\n const previousY1 = selectedBox.y1;\n selectedBox.y1 = selectedBox.y2;\n selectedBox.y2 = previousY1;\n }\n }\n self.redraw();\n self.clickedArea = { box: -1, pos: \"o\" };\n self.mousedown = false;\n }\n isTouchEventWithinEl(e) {\n var _a;\n const item = e.clientX\n ? e\n : e.changedTouches.item(0);\n const elBoundingClientRect = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();\n if (elBoundingClientRect == null || item == null)\n return false;\n return (elBoundingClientRect.right > item.clientX &&\n elBoundingClientRect.left < item.clientX &&\n elBoundingClientRect.top < item.clientY &&\n elBoundingClientRect.bottom > item.clientY);\n }\n onMouseOut(e, self) {\n e.preventDefault();\n if (self.clickedArea.box !== -1) {\n let selectedBox = self.boxes[self.clickedArea.box];\n if (selectedBox.x1 > selectedBox.x2) {\n const previousX1 = selectedBox.x1;\n selectedBox.x1 = selectedBox.x2;\n selectedBox.x2 > previousX1;\n }\n if (selectedBox.y1 > selectedBox.y2) {\n const previousY1 = selectedBox.y1;\n selectedBox.y1 = selectedBox.y2;\n selectedBox.y2 > previousY1;\n }\n }\n self.mousedown = false;\n self.clickedArea = { box: -1, pos: \"o\" };\n }\n onMouseMove(e, self) {\n e.preventDefault();\n if (!self.mousedown || self.clickedArea.box === -1)\n return;\n const x = self.getOffsetX(e);\n const y = self.getOffsetY(e);\n const xOffset = x - self.currentCoordinate.x;\n const yOffset = y - self.currentCoordinate.y;\n self.currentCoordinate = { x, y };\n if (self.clickedArea.pos == \"i\" ||\n self.clickedArea.pos == \"tl\" ||\n self.clickedArea.pos == \"l\" ||\n self.clickedArea.pos == \"bl\") {\n self.boxes[self.clickedArea.box].x1 += xOffset;\n }\n if (self.clickedArea.pos == \"i\" ||\n self.clickedArea.pos == \"tl\" ||\n self.clickedArea.pos == \"t\" ||\n self.clickedArea.pos == \"tr\") {\n self.boxes[self.clickedArea.box].y1 += yOffset;\n }\n if (self.clickedArea.pos == \"i\" ||\n self.clickedArea.pos == \"tr\" ||\n self.clickedArea.pos == \"r\" ||\n self.clickedArea.pos == \"br\") {\n self.boxes[self.clickedArea.box].x2 += xOffset;\n }\n if (self.clickedArea.pos == \"i\" ||\n self.clickedArea.pos == \"bl\" ||\n self.clickedArea.pos == \"b\" ||\n self.clickedArea.pos == \"br\") {\n self.boxes[self.clickedArea.box].y2 += yOffset;\n }\n self.redraw();\n }\n}\nexports[\"default\"] = CardMaskingPlugin;\n\n\n//# sourceURL=webpack://PWUISDK/./src/plugins/card-masking.ts?");
|
|
3983
3983
|
|
|
3984
3984
|
/***/ }),
|
|
3985
3985
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pipwave-ekyc-uikit",
|
|
3
|
-
"version": "2.0.0-
|
|
3
|
+
"version": "2.0.0-6",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/pw-bundle.js",
|
|
6
6
|
"scripts": {
|
|
@@ -40,6 +40,6 @@
|
|
|
40
40
|
"moment": "^2.29.4",
|
|
41
41
|
"pdfjs-dist": "^4.4.168",
|
|
42
42
|
"pikaday": "^1.8.2",
|
|
43
|
-
"pipwave-ekyc-sdk": "
|
|
43
|
+
"pipwave-ekyc-sdk": "^2.0.0-2"
|
|
44
44
|
}
|
|
45
45
|
}
|