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

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?");
 
 /***/ }),
 

package/package.json

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