{"version":3,"file":"app-c433bc6f.d152cf98c45d962fa693.bundle.js","mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAiBA;AACA;AACA;AAEA;AAAA;AAnBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;;;;;;;;;;;;;AC1LA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sources":["webpack://HRMSPortal/./src/components/performancereview/employeeperformancelist/viewassignkra/viewperformancereviewmanagerview.js","webpack://HRMSPortal/./src/components/performancereview/employeeperformancelist/viewassignkra/viewperformancereviewmanagerview.html"],"sourcesContent":["import {inject} from 'aurelia-framework';\r\nimport {Router} from 'aurelia-router';\r\nimport {JwtService} from '../../../../shared/services/jwtservice';\r\nimport {DialogController} from 'aurelia-dialog';\r\nimport {DialogService} from 'aurelia-dialog';\r\nimport {config} from \"../../../../shared/services/config\";\r\nimport {KraPerformanceReviewService} from \"../../../../shared/services/kraperformancereviewservice\";\r\nimport {ValidationControllerFactory, ValidationRules} from \"aurelia-validation\";\r\nimport {PerformanceMangemantService} from \"../../../../shared/services/performancereviewservice\";\r\n\r\n@inject(DialogController, JwtService, Router, ValidationControllerFactory, DialogService, KraPerformanceReviewService, PerformanceMangemantService)\r\nexport class ViewPerformanceReview {\r\n    pageSize = config.kra_PazeSize;\r\n    topicsPageSize = config.kra_PazeSize;\r\n    ViewID = 2;\r\n    isOpen = null;\r\n    Successmessages = false;\r\n    kraCategories = [];\r\n    markascompleted = false;\r\n    markascompletachivementpopup = false;\r\n    activeTab = 'tab1';\r\n    KraSuccessMessage = false;\r\n    finalsubmitvalidation = false;\r\n    openedIndex = 0;\r\n    kraTitleExit = false;\r\n\r\n\r\n    activateTab(tab) {\r\n        this.activeTab = tab;\r\n    }\r\n\r\n    constructor(controller, JwtService, router, controllerFactory, DialogService, KraPerformanceReviewService, PerformanceMangemantService) {\r\n        this.controller = controller;\r\n        this.jwtService = JwtService;\r\n        this.empid = this.jwtService.getEmployeeId();\r\n        this.dialogService = DialogService;\r\n        this.KraPerformanceReview = KraPerformanceReviewService;\r\n        this.controllerFactory = controllerFactory.createForCurrentScope();\r\n        this.router = router;\r\n        this.performancereviewservice = PerformanceMangemantService;\r\n    }\r\n\r\n    activate(params) {\r\n        // Access the value from the URL query parameter\r\n        this.employeePerformanceReviewID = params.EmployeePerformanceReviewID;\r\n        this.assignedBulkData = params.bulkData;\r\n    }\r\n\r\n    attached() {\r\n        this.KraPerformanceReview.GetEmployeePerformanceKRADetails(this.employeePerformanceReviewID)\r\n            .then(data => {\r\n                this.employeeAssignedKraDetails = data.CategoryList;\r\n                this.employeeModel=data.employeeModel;\r\n                this.krasamedata = data.CategoryList.EmployeePerformanceKRAList;\r\n            })\r\n    }\r\n\r\n\r\n    deleteBulkAssignEmployee(bulkdata) {\r\n        this.finalsubmitvalidation = false;\r\n        const AssignEmployeeID = bulkdata.EmployeePerformanceReviewID;\r\n        const deletebulkids = {\r\n            EmployeeID: this.empid,\r\n            EmployeePerformanceReviewID: AssignEmployeeID\r\n\r\n        };\r\n        this.performancereviewservice.DeleteBulkAssignData(deletebulkids).then(data => {\r\n            this.DeletebulkResponce = data;\r\n        });\r\n    }\r\n\r\n\r\n    performanceClicks(event) {\r\n        event.preventDefault();\r\n        const parentDiv = event.target.closest('.parent-div');\r\n\r\n        // Close all open categories except the clicked one\r\n        const allOpenCategories = document.querySelectorAll('.parent-div.performance-open');\r\n        allOpenCategories.forEach(openCategory => {\r\n            if (openCategory !== parentDiv) {\r\n                openCategory.classList.remove('performance-open');\r\n            }\r\n        });\r\n\r\n        // Toggle the clicked category\r\n        if (parentDiv) {\r\n            parentDiv.classList.toggle('performance-open');\r\n        }\r\n    }\r\n\r\n    performanceClicks(event, index) {\r\n        event.preventDefault();\r\n        if (this.openedIndex === index) {\r\n            this.openedIndex = -1; // Close the currently open array\r\n        } else {\r\n            this.openedIndex = index; // Open the clicked array\r\n        }\r\n    }\r\n\r\n\r\n    /* markAsComplete(event, EmployeeGoalID, MarkAsCompletedIND, category) {\r\n         const result = this.dialogService.open({\r\n             viewModel: Markascompletemodel,\r\n             model: '',\r\n         }).whenClosed(response => {\r\n             if (response.wasCancelled) {\r\n                 this.markascompleted = false;\r\n                 return;\r\n             } else {\r\n                 this.markascompleted = true;\r\n                 this.markascompletachivementpopup = true;\r\n                 const checkbox = document.querySelector(`input[name=\"achievement_${MarkAsCompletedIND == true}\"]`);\r\n                 if (checkbox) {\r\n                     checkbox.checked = true;\r\n                     const markascompletedata = {\r\n                         EmployeeGoalID: EmployeeGoalID,\r\n                         EmployeeID: this.empid\r\n                     };\r\n                     this.performaceService.MarkasCompletedKraCategories(markascompletedata)\r\n                         .then(data => {\r\n                             this.performaceService.KraCategories(this.empid, this.PeriodID, this.ReviewTypeID, this.ViewID)\r\n                                 .then(data => {\r\n                                     this.kraCategories = data.EmployeeCategoryList;\r\n                                     const result = this.kraCategories?.find(item => item.EmployeeCategoryID === category.EmployeeCategoryID);\r\n                                     const defaultCategory = result;\r\n                                     this.toggleDisplay(defaultCategory);\r\n                                 });\r\n                         });\r\n                 }\r\n             }\r\n         })\r\n     }*/\r\n\r\n    openFileDialog() {\r\n        document.getElementById('attachments').click();\r\n    }\r\n\r\n    handleFileSelect(files) {\r\n        const file = files[0];\r\n        const maxSize = 2.5 * 1024 * 1024;\r\n        if (file.size > maxSize) {\r\n            this.fileMessage = 'File size should be less than 2.5 MB.';\r\n            setTimeout(() => {\r\n                this.fileMessage = null;\r\n            }, 4000);\r\n            this.removeFile();\r\n            return;\r\n        }\r\n        else if (file.size <= maxSize) {\r\n            this.files = file;\r\n            let reader = new FileReader();\r\n            reader.readAsDataURL(file);\r\n            this.DocumentNames = file.name;\r\n            reader.onload = () => {\r\n                this.files = reader.result;\r\n            };\r\n        }\r\n    }\r\n\r\n    removeFile() {\r\n        this.files = null;\r\n        this.DocumentNames = '';\r\n        const fileInput = document.getElementById('attachments');\r\n        if (fileInput) {\r\n            fileInput.value = '';\r\n        }\r\n    }\r\n\r\n    toggleDisplay(category) {\r\n        this.kraCategories.forEach(cat => {\r\n            if (cat !== category) {\r\n                cat.showDiv = false;\r\n            }\r\n        });\r\n        category.showDiv = true;\r\n    }\r\n\r\n\r\n    openCategory(index) {\r\n        this.isOpen = index;\r\n    }\r\n\r\n    BackPage() {\r\n      //  const performancereviewURLBackPage = `/#/KRAPerformanceReview/employeeperformancelist`;\r\n       // window.location.href = performancereviewURLBackPage;\r\n    }\r\n}\r\n","// Imports\nimport ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from \"../../../../../node_modules/html-loader/dist/runtime/getUrl.js\";\nvar ___HTML_LOADER_IMPORT_0___ = new URL(\"../../../../images/performance-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_1___ = new URL(\"../../../../images/key.svg\", import.meta.url);\n// Module\nvar ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);\nvar ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___);\nvar code = \"<template>\\r\\n    <require from=\\\"../../../../shared/styles/performance.css\\\"></require>\\r\\n    <require from=\\\"../../../../shared/styles/au-tablePagination.css\\\"></require>\\r\\n    <main>\\r\\n        <div class=\\\"performance-banner !bg-cover w-full h-[120px] !bg-center md:h-[250px] relative mb-7\\\">\\r\\n            <div class=\\\"xl:max-w-[1226px] 2xl:max-w-[1600px] mx-auto px-3 md:px-5 flex pb-4 absolute bottom-0 left-0 right-0 md:pb-6\\\">\\r\\n                <img\\r\\n                        src=\\\"\" + ___HTML_LOADER_REPLACEMENT_0___ + \"\\\"\\r\\n                        alt=\\\"performance-icon\\\"\\r\\n                />\\r\\n                <h1 class=\\\"text-3xl lg:text-4xl xl:text-5xl text-white ml-2.5\\\">\\r\\n                    Performance Review\\r\\n                </h1>\\r\\n            </div>\\r\\n        </div>\\r\\n        <div class=\\\"performance-section px-3 md:px-6 pb-6 xl:max-w-[1226px] 2xl:max-w-[1600px] mx-auto\\\">\\r\\n            <h3 class=\\\"text-2xl text-[#1B2738] mb-5\\\">\\r\\n                Goals and KRA (Key Results Area) Sheet\\r\\n            </h3>\\r\\n            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et\\r\\n                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip\\r\\n                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu\\r\\n                fugiat</p>\\r\\n<!--\\r\\n            <div class=\\\"flex justify-between flex-wrap\\\" if.bind=\\\"employeePerformanceReviewID.length>0\\\">\\r\\n                <div class=\\\"md:basis-[30%] basis-full grow-0 shrink-0\\\">\\r\\n                    <strong class=\\\"block mb-[10px]\\\">Employee</strong>\\r\\n                    <div class=\\\"text-black text-[14px] font-['Avenir-Medium']\\\">${employeeModel.EmployeeName}\\r\\n                    </div>\\r\\n                </div>\\r\\n                <div class=\\\"md:basis-[30%] basis-full grow-0 shrink-0\\\">\\r\\n                    <strong class=\\\"block mb-[10px]\\\">Department</strong>\\r\\n                    <div class=\\\"text-black text-[14px] font-['Avenir-Medium']\\\">${employeeModel.DepartmentName}\\r\\n                    </div>\\r\\n                </div>\\r\\n                <div class=\\\"flex items-center\\\">\\r\\n                    <img class=\\\"md:mr-2 block rounded-full w-[20px] h-[20px] md:w-[40px] md:h-[40px]\\\" src=\\\"${employeeModel.PhotoPath}\\\" title=\\\"img\\\" alt=\\\"Employee Image\\\">\\r\\n                </div>\\r\\n            </div>\\r\\n-->\\r\\n            <div if.bind=\\\"!employeePerformanceReviewID.length>0\\\"\\r\\n                 class=\\\"bg-white rounded-[16px] flex flex-wrap p-[40px] mt-[30px]\\\">\\r\\n                <div class=\\\"basis-[30%] grow-0 shrink-0 border-r-[2px] border-grey pr-[40px] pt-[30px]\\\">\\r\\n                    <div class=\\\"mb-[10px]\\\">\\r\\n                        <svg width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\r\\n                            <path d=\\\"M7 6C7 3.23858 9.23858 1 12 1C14.7614 1 17 3.23858 17 6C17 8.76142 14.7614 11 12 11C9.23858 11 7 8.76142 7 6Z\\\"\\r\\n                                  fill=\\\"#1B2738\\\"/>\\r\\n                            <path d=\\\"M12 12C6.47717 12 2 16.4772 2 22C2 22.5523 2.44772 23 3 23C3.55228 23 4 22.5523 4 22C4 17.5817 7.58173 14 12 14C16.4183 14 20 17.5817 20 22C20 22.5523 20.4477 23 21 23C21.5523 23 22 22.5523 22 22C22 16.4772 17.5228 12 12 12Z\\\"\\r\\n                                  fill=\\\"#1B2738\\\"/>\\r\\n                        </svg>\\r\\n                    </div>\\r\\n                    <h2 class=\\\"text-[24px] font-['Avenir-Black'] mb-[10px]\\\">\\r\\n                        Employee List\\r\\n                    </h2>\\r\\n                    <p class=\\\"font-['Avenir-Medium'] text-[16px]\\\">\\r\\n                        This is the list of employees to which these KRAs are being assigned\\r\\n                    </p>\\r\\n                </div>\\r\\n                <div class=\\\"basis-[70%] grow-0 shrink-0 flex flex-wrap justify-between pl-[40px]\\\">\\r\\n                    <div>\\r\\n                        <h3 class=\\\"text-[#898989] font-['Avenir-Black'] mb-[20px] pl-[70px]\\\">Employee </h3>\\r\\n                        <ul>\\r\\n                            <li class=\\\"flex items-center gap-[40px] mb-[15px]\\\"\\r\\n                                repeat.for=\\\"assignemployee of assignedBulkData\\\">\\r\\n                    <span>\\r\\n                        <svg width=\\\"35\\\" height=\\\"35\\\" viewBox=\\\"0 0 35 35\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\r\\n                            <circle cx=\\\"17.5\\\" cy=\\\"17.5\\\" r=\\\"17.5\\\" fill=\\\"#D9D9D9\\\"/>\\r\\n                        </svg>\\r\\n                    </span>\\r\\n                                <span>${assignemployee.EmployeeName}</span>\\r\\n                            </li>\\r\\n                        </ul>\\r\\n                    </div>\\r\\n                    <div>\\r\\n                        <h3 class=\\\"text-[#898989] font-['Avenir-Black'] mb-[20px]\\\">Department</h3>\\r\\n                        <ul>\\r\\n                            <li class=\\\"mb-[28px]\\\" repeat.for=\\\"assignemployee of assignedBulkData\\\">\\r\\n                                <span>${assignemployee.DepartmentName}</span>\\r\\n\\r\\n                            </li>\\r\\n\\r\\n                        </ul>\\r\\n                    </div>\\r\\n                    <div>\\r\\n                        <h3 class=\\\"text-[#898989] font-['Avenir-Black'] mb-[20px]\\\">Position</h3>\\r\\n                        <ul>\\r\\n                            <li class=\\\"flex items-center gap-[80px] mb-[28px]\\\"\\r\\n                                repeat.for=\\\"assignemployee of assignedBulkData\\\">\\r\\n                                <!--<a href=\\\"#\\\">DepartmentName</a>-->\\r\\n                                <span>${assignemployee.PositionLevelName}</span>\\r\\n                                <span click.delegate=\\\"deleteBulkAssignEmployee(assignemployee)\\\"><svg width=\\\"22\\\"\\r\\n                                                                                                     height=\\\"23\\\"\\r\\n                                                                                                     viewBox=\\\"0 0 22 23\\\"\\r\\n                                                                                                     fill=\\\"none\\\"\\r\\n                                                                                                     xmlns=\\\"http://www.w3.org/2000/svg\\\">\\r\\n                                  <path d=\\\"M10.0842 11.9594C10.0842 11.4531 9.67383 11.0427 9.16756 11.0427C8.6613 11.0427 8.2509 11.4531 8.2509 11.9594V16.5428C8.2509 17.0491 8.6613 17.4595 9.16756 17.4595C9.67383 17.4595 10.0842 17.0491 10.0842 16.5428V11.9594Z\\\"\\r\\n                                        fill=\\\"#1B2738\\\"/>\\r\\n                                  <path d=\\\"M12.8345 11.0418C13.3407 11.0418 13.7511 11.4522 13.7511 11.9585V16.5408C13.7511 17.047 13.3407 17.4574 12.8345 17.4574C12.3282 17.4574 11.9178 17.047 11.9178 16.5408V11.9585C11.9178 11.4522 12.3282 11.0418 12.8345 11.0418Z\\\"\\r\\n                                        fill=\\\"#1B2738\\\"/>\\r\\n                                  <path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\"\\r\\n                                        d=\\\"M13.7541 1.38123C13.6176 1.16774 13.3987 1.02031 13.1496 0.973961C12.9004 0.927613 12.6432 0.986483 12.439 1.13659L5.19927 6.4585H3.66667C3.40714 6.4585 3.15977 6.56851 2.98596 6.76124C2.81214 6.95397 2.72816 7.21134 2.75487 7.46949L4.12987 20.7612C4.17821 21.2284 4.57193 21.5835 5.04167 21.5835H16.9583C17.4281 21.5835 17.8218 21.2284 17.8701 20.7612L19.2451 7.46949C19.2718 7.21134 19.1879 6.95397 19.014 6.76124C18.8402 6.56851 18.5929 6.4585 18.3333 6.4585H17.0018L13.7541 1.38123ZM16.4864 8.29183C16.4961 8.29199 16.5057 8.29199 16.5153 8.29183H17.3169L16.1316 19.7502H5.8684L4.68306 8.29183H5.49552C5.499 8.29185 5.50248 8.29185 5.50596 8.29183H16.4864ZM14.8255 6.4585L12.7368 3.19307L8.29461 6.4585H14.8255Z\\\"\\r\\n                                        fill=\\\"#1B2738\\\"/>\\r\\n                                  </svg>\\r\\n                                </span>\\r\\n                            </li>\\r\\n                        </ul>\\r\\n                    </div>\\r\\n\\r\\n                </div>\\r\\n            </div>\\r\\n            <div>\\r\\n                <div class=\\\"flex items-center gap-[20px] mt-[30px] mb-[14px] flex-wrap\\\">\\r\\n                    <select class=\\\"appearance-none border-[1.5px] border-[#e0e0e0] w-[96px] px-[15px] py-[8px] rounded-[6px] bg-white\\\"\\r\\n                            name=\\\"\\\" id=\\\"\\\">\\r\\n                        <option value=\\\"2024\\\">2024</option>\\r\\n                        <option value=\\\"2024\\\">2023</option>\\r\\n                        <option value=\\\"2024\\\">2022</option>\\r\\n                    </select>\\r\\n                    <div class=\\\"tab-header rounded-[9px] bg-white h-[40px] leading-[40px] px-[8px]\\\"\\r\\n                         click.delegate=\\\"activateTab('tab1')\\\" class=\\\"${activeTab === 'tab1' ? 'active' : ''}\\\">First\\r\\n                        Quarter\\r\\n                    </div>\\r\\n                    <div class=\\\"tab-header\\\" click.delegate=\\\"activateTab('tab2')\\\"\\r\\n                         class=\\\"${activeTab === 'tab2' ? 'active' : ''}\\\">Second Quarter\\r\\n                    </div>\\r\\n                </div>\\r\\n                <div  class=\\\"scrolltoerrorsuccess class=\\\"tab-content bg-white rounded-[16px]\\\" if.bind=\\\"activeTab === 'tab1'\\\">\\r\\n                    <div class=\\\"flex mb-2 md:mb-0 items-center flex-wrap pb-[35px] pl-[18px] pr-[45px] pt-[25px]\\\">\\r\\n                        <div class=\\\"flex items-center\\\">\\r\\n                            <img src=\\\"\" + ___HTML_LOADER_REPLACEMENT_1___ + \"\\\" alt=\\\"key\\\"/>\\r\\n                            <strong class=\\\"text-2xl mx-2.5 block\\\">KRA (Key Results Area)</strong>\\r\\n                        </div>\\r\\n                        <p class=\\\"basis-full grow-0 shrink-0 mt-[15px]\\\">These are actions that will enable the employee\\r\\n                            to meet/achieve the Job's overall purpose. They are a measure of the key responsibilities on\\r\\n                            the job.</p>\\r\\n\\r\\n                    </div>\\r\\n                <div if.bind=\\\"isrequiredMessage\\\"\\r\\n                     class=\\\"error-messages !text-[16px] !m-[20px] font-['Avenir-Medium']\\\"></div>\\r\\n\\r\\n                    <div repeat.for=\\\"category of employeeAssignedKraDetails\\\"\\r\\n                         class=\\\"bg-[#fafafa] py-[18px] px-[22px] relative parent-div ${openedIndex === $index ? 'performance-open' : ''}\\\" >\\r\\n                        <strong click.delegate=\\\"performanceClicks($event, $index)\\\"\\r\\n                                class=\\\"cursor-pointer block relative text-[24px]\\\">\\r\\n                            <svg class=\\\"inline align-middle\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"25\\\" height=\\\"25\\\"\\r\\n                                 viewBox=\\\"0 0 25 25\\\" fill=\\\"none\\\">\\r\\n                                <path d=\\\"M6.21605 9.375H18.7795C19.6487 9.375 20.0832 10.4248 19.468 11.04L13.1887 17.3242C12.8079 17.7051 12.1877 17.7051 11.8069 17.3242L5.52758 11.04C4.91234 10.4248 5.34691 9.375 6.21605 9.375Z\\\"\\r\\n                                      fill=\\\"#1B2738\\\"/>\\r\\n                            </svg>\\r\\n                            <span class=\\\"inline align-middle\\\">${category.CategoryName}\\r\\n                                <!--<span class=\\\"text-[#4C9076]\\\">(${category.TotalScore}/${category.TotalWeightage})</span>-->\\r\\n                            </span>\\r\\n                        </strong>\\r\\n\\r\\n                        <!-- Rest of your dynamic content here -->\\r\\n                        <div class=\\\"hidden\\\">\\r\\n                            <div class=\\\"\\\">\\r\\n                                <div if.bind=\\\"isrequiredMessage\\\"\\r\\n                                     class=\\\"error-messages !text-[16px] !m-[20px] font-['Avenir-Medium']\\\">${isrequiredMessage}\\r\\n                                </div>\\r\\n                                <div if.bind=\\\"category.EmployeePerformanceKRAList.length === 0\\\">\\r\\n                                    <p>No records found</p>\\r\\n                                </div>\\r\\n\\r\\n                                <div class=\\\"w-full\\\"\\r\\n                                     repeat.for=\\\"employeeperformance of  category.EmployeePerformanceKRAList\\\">\\r\\n\\r\\n                                    <div class=\\\"flex justify-between flex-wrap pt-[15px] pb-[35px] border-b-[1px] border-[#898989]\\\">\\r\\n\\r\\n\\r\\n                                        <div class=\\\"xl:basis-[30%] mb-[30px] md:mb-0 px-8 basis-full grow-0 shrink-0\\\"\\r\\n                                           >\\r\\n                                            <label class=\\\"text-[#898989] text-[16px] font-['Avenir-Black'] mb-[12px] block\\\">KRA title</label>\\r\\n                                            <p class=\\\"text-black font-['Avenir-Medium']\\\"\\r\\n                                               if.bind=\\\"!employeeperformance.isEditing\\\">\\r\\n                                                ${employeeperformance.KRATitle}</p>\\r\\n\\r\\n                                            <input type=\\\"text\\\" class=\\\"w-full border h-9 rounded-md px-2.5\\\"\\r\\n                                                   value.bind=\\\"employeeperformance.KRATitle\\\"\\r\\n                                                   if.bind=\\\"employeeperformance.isEditing\\\"/>\\r\\n\\r\\n\\r\\n                                        </div>\\r\\n\\r\\n                                        <div class=\\\"xl:basis-[30%] mb-[30px] md:mb-0 px-8 basis-full grow-0 shrink-0\\\"\\r\\n                                            >\\r\\n                                            <label class=\\\"text-[#898989] text-[16px] font-['Avenir-Black'] mb-[12px] block\\\">Criteria</label>\\r\\n                                            <p class=\\\"text-black font-['Avenir-Medium']\\\"\\r\\n                                               if.bind=\\\"!employeeperformance.isEditing\\\">\\r\\n                                                ${employeeperformance.Criteria}</p>\\r\\n                                            <input class=\\\"w-full border h-9 rounded-md px-2.5\\\" type=\\\"text\\\"\\r\\n                                                   value.bind=\\\"employeeperformance.Criteria \\\"\\r\\n                                                   if.bind=\\\"employeeperformance.isEditing\\\"/>\\r\\n                                             <span if.bind=\\\"employeeperformance.Criteria.length > 500\\\" class=\\\"error-messages text-sm\\\" style=\\\"color: red;\\\">Criteria length should not be more than 500 characters</span>\\r\\n\\r\\n                                        </div>\\r\\n                                         <div class=\\\"xl:basis-[20%] mb-[30px] md:mb-0 px-8 basis-full grow-0 shrink-0\\\"\\r\\n                                             validation-errors.bind=\\\"CriteriaErrors\\\"\\r\\n                                             class.bind=\\\"CriteriaErrors.length ? 'has-error' : 'Criteriafield'\\\">\\r\\n                                            <label class=\\\"text-[#898989] text-[16px] font-['Avenir-Black'] mb-[12px] block\\\">Weightage</label>\\r\\n                                            <strong class=\\\"block text-[#4C9076] font-['Avenir-Black']\\\"\\r\\n                                                    if.bind=\\\"!employeeperformance.isEditing\\\">${employeeperformance.Weightage}</strong>\\r\\n                                            <input class=\\\"w-[100px] border h-9 rounded-md px-2.5\\\" type=\\\"text\\\"\\r\\n                                                   oninput=\\\"this.value = this.value.replace(/[^0-9]/g, '')\\\"\\r\\n                                                   value.bind=\\\"employeeperformance.Weightage\\\"\\r\\n                                                   if.bind=\\\"employeeperformance.isEditing\\\"/>\\r\\n                                            <span if.bind=\\\"employeeperformance.Weightage > 100\\\" class=\\\"error-messages text-sm\\\" style=\\\"color: red;\\\">Weightage can't exceed more than 100</span>\\r\\n                                        </div>\\r\\n                                    </div>\\r\\n                                </div>\\r\\n                            </div>\\r\\n                            </div>\\r\\n                    </div>\\r\\n\\r\\n                    <div class=\\\"px-[55px] pb-[55px] pt-[35px] border-t-[1px] border-[#898989]\\\">\\r\\n                        <strong class=\\\"text-[24px] mb-[27px] block\\\">\\r\\n                            Total\\r\\n                            <span class=\\\"text-[#4C9076]\\\">\\r\\n                <!--(70/100)-->\\r\\n              </span>\\r\\n                        </strong>\\r\\n                        <div class=\\\"flex justify-between flex-wrap\\\">\\r\\n                            <div class=\\\"md:basis-[30%] basis-full grow-0 shrink-0\\\">\\r\\n                                <strong class=\\\"block mb-[10px]\\\">Achievements or failures</strong>\\r\\n                                <div class=\\\"text-black text-[14px] font-['Avenir-Medium']\\\">Lorem ipsum dolor sit amet,\\r\\n                                    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo\\r\\n                                </div>\\r\\n                            </div>\\r\\n                            <div class=\\\"md:basis-[30%] basis-full grow-0 shrink-0\\\">\\r\\n                                <strong class=\\\"block mb-[10px]\\\">Areas for improvement</strong>\\r\\n                                <div class=\\\"text-black text-[14px] font-['Avenir-Medium']\\\">Lorem ipsum dolor sit amet,\\r\\n                                    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo\\r\\n                                </div>\\r\\n                            </div>\\r\\n                            <div class=\\\"md:basis-[30%] basis-full grow-0 shrink-0\\\">\\r\\n                                <strong class=\\\"block mb-[10px]\\\">Additional Items</strong>\\r\\n                                <div class=\\\"text-black text-[14px] font-['Avenir-Medium']\\\">Lorem ipsum dolor sit amet,\\r\\n                                    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo\\r\\n                                </div>\\r\\n                            </div>\\r\\n                        </div>\\r\\n\\r\\n                        <div class=\\\"flex items-center mt-[35px] gap-[15px]\\\">\\r\\n                            <button class=\\\"transition !bg-[#efefef] !text-[#1B2738] hover:!bg-[#dcdcdc]\\\"\\r\\n                                    click.trigger=\\\"BackPage()\\\">Back\\r\\n                            </button>\\r\\n                        </div>\\r\\n                    </div>\\r\\n                </div>\\r\\n                <div class=\\\"tab-content\\\" if.bind=\\\"activeTab === 'tab2'\\\">\\r\\n                    Tab 2 content goes here\\r\\n                </div>\\r\\n            </div>\\r\\n\\r\\n        </div>\\r\\n    </main>\\r\\n</template>\\r\\n\";\n// Exports\nexport default code;"],"names":[],"sourceRoot":""}