pipwave-ekyc-uikit 0.0.1-beta.7 → 0.0.1-beta.9

package/README.md

@@ -73,3 +73,25 @@ pw.onClose(() => {
   // do your own handling here
 });
 ```
+
+### Configuration
+
+#### Installation on Angular Base Project
+
+For Angular-based projects, you'll need to include the `face-api.js` library in your project's `angular.json` configuration:
+
+```
+"architect": {
+  "build": {
+    "options": {
+      "scripts": ["./node_modules/face-api.js/dist/face-api.min.js"]
+    }
+   }
+}
+```
+
+## Acknowledgements
+
+We extend our gratitude to the following open-source projects that greatly contributed to the development of the Pipwave Ekyc Uikit: `pipwave-ekyc-sdk`,`webpack`, `face-api.js`, `moment`, `pikaday`
+
+Thank you to these remarkable projects and their dedicated teams for making our Uikit possible. Your efforts are truly appreciated.

package/dist/pw-bundle.js

@@ -3781,7 +3781,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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        try {\n            // show loading spinner in full pg\n            (0, components_1.createFullLoading)(this.cameraId, \"Initializing Camera...\");\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        finally {\n            // hide loading spinner in full pg\n            (0, components_1.hideFullLoading)(this.cameraId);\n        }\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        (0, components_1.hideFullLoading)(this.cameraId);\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?");
+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 = this.videoElement;\n            const { width, height } = this.cardDetectionSdk.calculateHeightNWidth(bitmap.videoWidth, bitmap.videoHeight);\n            if (!context)\n                return \"\";\n            //draw image to canvas, scale to target dimensions\n            canvas.width = bitmap.videoWidth;\n            canvas.height = bitmap.videoHeight;\n            context.drawImage(bitmap, 0, 0, bitmap.videoWidth, bitmap.videoHeight);\n            // crop the selected part image\n            const x = (bitmap.videoWidth - width) / 2;\n            const y = (bitmap.videoHeight - 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        try {\n            // show loading spinner in full pg\n            (0, components_1.createFullLoading)(this.cameraId, \"Initializing Camera...\");\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        finally {\n            // hide loading spinner in full pg\n            (0, components_1.hideFullLoading)(this.cameraId);\n        }\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.playsInline = true;\n        videoElement.preload = \"auto\";\n        videoElement.loop = 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        (0, components_1.hideFullLoading)(this.cameraId);\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        })\n            .catch((err) => {\n            console.error(\"Error accessing the camera:\", err);\n        });\n    }\n    cameraInit() {\n        var _a;\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        (_a = screen.orientation) === null || _a === void 0 ? void 0 : _a.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?");
 
 /***/ }),
 
@@ -3803,7 +3803,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncons
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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        try {\n            // show loading spinner in full pg\n            (0, components_1.createFullLoading)(this.cameraId, \"Initializing Camera...\");\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                cameraId: this.cameraId,\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        finally {\n            if (!this.faceDetectionSdk ||\n                this.faceDetectionSdk.getLoadedModelState() !== \"LOADING\")\n                (0, components_1.hideFullLoading)(this.cameraId);\n        }\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        (0, components_1.hideFullLoading)(this.cameraId);\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?");
+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 = this.videoElement;\n            const { width, height } = this.faceDetectionSdk.calculateHeightNWidth(bitmap.videoWidth, bitmap.videoHeight);\n            if (!context)\n                return \"\";\n            //draw image to canvas, scale to target dimensions\n            canvas.width = bitmap.videoWidth;\n            canvas.height = bitmap.videoHeight;\n            context.drawImage(bitmap, 0, 0, bitmap.videoWidth, bitmap.videoHeight);\n            // crop the selected part image\n            const x = (bitmap.videoWidth - width) / 2;\n            const y = (bitmap.videoHeight - 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        try {\n            // show loading spinner in full pg\n            (0, components_1.createFullLoading)(this.cameraId, \"Initializing Camera...\");\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                cameraId: this.cameraId,\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        finally {\n            if (!this.faceDetectionSdk ||\n                this.faceDetectionSdk.getLoadedModelState() !== \"LOADING\")\n                (0, components_1.hideFullLoading)(this.cameraId);\n        }\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.playsInline = true;\n        videoElement.preload = \"auto\";\n        videoElement.loop = 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        })\n            .catch((err) => {\n            console.error(\"Error accessing the camera:\", err);\n        });\n    }\n    cameraInit() {\n        var _a;\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 _b;\n            this.faceDetectionSdk.init();\n            (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.classList.remove(\"pw-hidden\");\n        }));\n        this.videoElement.addEventListener(\"resize\", () => {\n            this.resizeElement();\n        });\n        window.addEventListener(\"resize\", () => {\n            this.resizeElement();\n        });\n        (_a = screen.orientation) === null || _a === void 0 ? void 0 : _a.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        (0, components_1.hideFullLoading)(this.cameraId);\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?");
 
 /***/ }),
 
@@ -3814,7 +3814,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nlet loadedModelState = \"NOT_LOADED\";\nclass FACEDETECTIONSDK {\n    constructor(val) {\n        this.cameraId = \"\";\n        this.isDone = false; // use to check if the face detection is done\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    getLoadedModelState() {\n        return loadedModelState;\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    loadFaceModel() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                if (loadedModelState !== \"NOT_LOADED\")\n                    return;\n                const url = \"https://assets.pipwave.com/ekyc/sdk/face-models\" || 0;\n                loadedModelState = \"LOADING\";\n                yield Promise.all([\n                    faceapi.loadTinyFaceDetectorModel(url),\n                    faceapi.loadFaceLandmarkModel(url),\n                    faceapi.loadFaceRecognitionModel(url),\n                    faceapi.loadFaceExpressionModel(url),\n                ]);\n                loadedModelState = \"LOADED\";\n            }\n            catch (err) {\n                loadedModelState = \"NOT_LOADED\";\n                return Promise.reject(err);\n            }\n        });\n    }\n    init() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                // show loading spinner in full pg\n                (0, components_1.createFullLoading)(this.cameraId, \"Initializing Camera...\");\n                this.isDone = false;\n                this.resizeElement();\n                if (loadedModelState === \"NOT_LOADED\")\n                    yield this.loadFaceModel();\n                // Wait until loadFaceModel is LOADED\n                while (loadedModelState === \"LOADING\") {\n                    yield new Promise((resolve) => setTimeout(resolve, 500));\n                }\n                if (!this.iFrameRef)\n                    yield this.detectFace();\n            }\n            finally {\n                // hide loading spinner in full pg\n                (0, components_1.hideFullLoading)(this.cameraId);\n            }\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?");
+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 }));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nlet loadedModelState = \"NOT_LOADED\";\nlet faceApiInstance;\n// direct use faceapi if it is already import in client's project (especially angular)\nfaceApiInstance =\n    typeof faceapi !== \"undefined\" ? faceapi : __webpack_require__(/*! face-api.js */ \"./node_modules/face-api.js/build/es6/index.js\");\nclass FACEDETECTIONSDK {\n    constructor(val) {\n        this.cameraId = \"\";\n        this.isDone = false; // use to check if the face detection is done\n        this.prevEmotionalState = \"\";\n        this.currenEmotionaltState = \"\";\n        this.isLiveness = false;\n        // constant variable\n        this.face_api_detection_options = new faceApiInstance.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    getLoadedModelState() {\n        return loadedModelState;\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 faceApiInstance.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 faceApiInstance\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 = faceApiInstance.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                //     faceApiInstance.draw.drawDetections(this.canvasElement, resizedDetections);\n                //     faceApiInstance.draw.drawFaceLandmarks(this.canvasElement, resizedDetections);\n                //     faceApiInstance.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    loadFaceModel() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                if (loadedModelState !== \"NOT_LOADED\")\n                    return;\n                const url = \"https://assets.pipwave.com/ekyc/sdk/face-models\" || 0;\n                loadedModelState = \"LOADING\";\n                yield Promise.all([\n                    faceApiInstance.loadTinyFaceDetectorModel(url),\n                    faceApiInstance.loadFaceLandmarkModel(url),\n                    faceApiInstance.loadFaceRecognitionModel(url),\n                    faceApiInstance.loadFaceExpressionModel(url),\n                ]);\n                loadedModelState = \"LOADED\";\n            }\n            catch (err) {\n                loadedModelState = \"NOT_LOADED\";\n                return Promise.reject(err);\n            }\n        });\n    }\n    init() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                // show loading spinner in full pg\n                (0, components_1.createFullLoading)(this.cameraId, \"Initializing Camera...\");\n                this.isDone = false;\n                this.resizeElement();\n                if (loadedModelState === \"NOT_LOADED\")\n                    yield this.loadFaceModel();\n                // Wait until loadFaceModel is LOADED\n                while (loadedModelState === \"LOADING\") {\n                    yield new Promise((resolve) => setTimeout(resolve, 500));\n                }\n                if (!this.iFrameRef)\n                    yield this.detectFace();\n            }\n            finally {\n                // hide loading spinner in full pg\n                (0, components_1.hideFullLoading)(this.cameraId);\n            }\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?");
 
 /***/ }),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pipwave-ekyc-uikit",
-  "version": "0.0.1-beta.7",
+  "version": "0.0.1-beta.9",
   "description": "",
   "main": "dist/pw-bundle.js",
   "scripts": {