@sunbird-cb/cbp-ai 0.1.110 → 0.1.111
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -15146,11 +15146,11 @@ class RoleMappingListComponent {
|
|
|
15146
15146
|
// this.getData(this.offset, this.pageSize);
|
|
15147
15147
|
}
|
|
15148
15148
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoleMappingListComponent, deps: [{ token: SharedService }, { token: i1$1.MatDialog }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15149
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RoleMappingListComponent, selector: "app-role-mapping-list", inputs: { formData: "formData" }, outputs: { moveToInitialScreen: "moveToInitialScreen" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"role-mapping-container\">\n <div class=\"container-fluid\">\n\n <mat-card class=\"mt-0 pt-0\">\n <div class=\"section-header\">\n\n </div>\n <div class=\"edit-section mt-4\">\n <div class=\"select-map-route-container\">\n <div class=\"select-map-flex-container\">\n <div class=\"select-map-flex\">\n <div class=\"selected-mapping-route\">\n <p>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name\">\n / {{ sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name }}\n </span>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"moveToInitialScreenLayout('edit')\">\n <mat-icon>edit</mat-icon>Edit\n </div>\n <!-- <div class=\"cursor-pointer ml-10\">-->\n <!-- <button class=\"btn-active cursor-pointer\" (click)=\"moveToInitialScreenLayout('add')\">-->\n <!-- <mat-icon>add</mat-icon>-->\n <!-- Create New CBP-->\n <!-- </button>-->\n <!-- </div>-->\n </div>\n <div>\n <div class=\"view-final-cbp-plan\">\n <!-- <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('cbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div> -->\n\n <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('acbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"search-filter-section mt-2\">\n <div class=\"search flex margin-right-m search-flex\">\n <div class=\"mt-2\">\n <div class=\"search-container\">\n <div class=\"rsearch\">\n <mat-icon\n class=\"color-60 search-icon mat-icon notranslate material-icons mat-icon-no-color\">search</mat-icon>\n <input class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\" label=\"\"\n (input)=\"applyFilter()\" placeholder=\"Search by designation name\" type=\"Standard\">\n <mat-icon *ngIf=\"searchText.trim().length > 0\"\n class=\"color-60 clear-icon mat-icon notranslate material-icons mat-icon-no-color cursor-pointer\"\n (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n <div class=\"pl-2 mt-2\">\n <input [disabled]=\"searchText.trim()?.length === 0\"\n [ngClass]=\"searchText.trim()?.length === 0 ? 'btn-disable':'btn-active'\"\n type=\"button\" value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n <div class=\"filter-section flex margin-top-15\">\n <!-- <div>\n <label class=\"label\">Filter by competency type</label>\n <div>\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select [(value)]=\"selectedValue\" placeholder=\"Select Ministry\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"'test'\">Test</mat-option>\n <mat-option [value]=\"'another'\">Another</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div> -->\n <div class=\"btn-group\">\n <div class=\"ml-2\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Designation\"\n (click)=\"addMoreDesignation()\" />\n </div>\n <div class=\"ml-2\" *ngIf=\"activeTab === 'matched'\">\n <button\n [ngClass]=\"selection.selected.length ? 'btn-active-outline' : 'btn-active-outline-disable'\"\n (click)=\"sendForApprovalForm()\">\n <mat-icon>send</mat-icon>\n Send For Approval\n <span *ngIf=\"selection.selected.length\">({{selection.selected.length}})</span>\n </button>\n </div>\n\n\n </div>\n </div>\n </div>\n <div class=\"role-mapping-tabs mt-3\">\n <button class=\"role-tab\" [class.active]=\"activeTab === 'matched'\" (click)=\"setDataSoure('matched')\">\n <span class=\"dot\"></span>\n Matched role mappings\n <span class=\"badge blue\">{{matchedRoleMapping}}</span>\n </button>\n\n <button class=\"role-tab table-body-unmatched\" [class.active]=\"activeTab === 'unmatched'\"\n (click)=\"setDataSoure('unmatched')\">\n <span class=\"dot red\"></span>\n Unmatched role mapping\n <span class=\"badge red\">{{unMatchedRoleMapping}}</span>\n </button>\n </div>\n <div class=\"nav-container\">\n <div class=\"sidenav-content\">\n <div class=\"table-class\">\n <ng-container *ngIf=\"dataSource?.filteredData?.length > 0\">\n <!-- <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"RequestId\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request ID </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.demand_id}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"title\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Title </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.title}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestor\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requestor </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.ownerName}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestType\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Type </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.requestType}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestStatus\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Status </th>\n\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <span [ngClass]=\"getStatusClass(element?.status)\">{{element?.status ===\n statusKey.fullfill ? 'Fulfilled'\n : element?.status}}</span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"assignee\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Assignee </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n {{element?.assignedProvider ?\n element?.assignedProvider : 'Not Assigned' }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestedOn\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requested On </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.createdOn |\n date}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"interests\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Interests</th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <a class=\"action-btn-view\" *ngIf=\"element?.interestCount!== 0\"\n href=\"javascript:void(0)\" [ngStyle]=\"getPointerEventsStyle(element)\">\n <span (click)=\"handleClick(element)\">\n {{element?.interestCount}}\n </span></a>\n <a class=\"\" *ngIf=\"element?.interestCount === 0\"\n href=\"javascript:void(0)\">{{element?.requestType ==\n 'Single' ? 'N/A' : element?.interestCount}}</a>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"details\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Details</th>\n <td mat-cell *matCellDef=\"let element\">\n <mat-icon (click)=\"navigateToDetails(element?.demand_id)\"\n class=\"cursor-pointer\">visibility</mat-icon>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\"></th>\n <td mat-cell *matCellDef=\"let element\">\n\n\n <span>\n <button mat-icon-button [matMenuTriggerFor]=\"menu\"\n aria-label=\"Example icon-button with a menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"onClickMenu(element,'viewContent')\">\n <span>View</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Unassigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid \"\n mat-menu-item (click)=\"onClickMenu(element,'invalidContent')\">\n <span>Mark as invalid</span>\n </button>\n <button mat-menu-item\n *ngIf=\"element?.status!== statusKey.Assigned && element?.interestCount >0 && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill\"\n (click)=\"onClickMenu(element,'assignContent')\">\n <span>Assign</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Assigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill \"\n mat-menu-item (click)=\"onClickMenu(element,'reAssignContent')\">\n <span> Re-Assign</span>\n </button>\n <button mat-menu-item (click)=\"onClickMenu(element,'copyContent')\">\n <span>Copy</span>\n </button>\n </mat-menu>\n </span>\n </td>\n\n\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\" class=\"table-row-data\"></tr>\n <tr mat-row *matRowDef=\"let row;columns:displayedColumns\"></tr>\n\n\n </table> -->\n <div class=\"table-container mt-4\" style=\"overflow: auto;\">\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z1\"\n [ngClass]=\"activeTab === 'matched'? 'table-body': 'table-body-unmatched'\">\n <!-- Selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef [hidden]=\"activeTab !== 'matched'\">\n <mat-checkbox class=\"radio-style-checkbox\" (change)=\"toggleAllRows($event)\"\n [checked]=\"isAllSelected()\" [indeterminate]=\"isSomeSelected()\"\n [disabled]=\"!hasSelectableRows()\">\n </mat-checkbox>\n </th>\n\n <td mat-cell *matCellDef=\"let row\" [hidden]=\"activeTab !== 'matched'\">\n <span matTooltip=\"Please generate & save course recommendation to select. Course recommendation generation & save is pending.\"\n [matTooltipDisabled]=\"!getActivateCbpPlan(row)\">\n <mat-checkbox class=\"radio-style-checkbox\"\n (click)=\"$event.stopPropagation()\" (change)=\"toggleRow(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"getActivateCbpPlan(row)\" [ngClass]=\" getActivateCbpPlan(row)? 'grayd-disable':''\">\n </mat-checkbox>\n </span>\n </td>\n </ng-container>\n <!-- Designation Name -->\n <ng-container matColumnDef=\"designation_name\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Designation\n </th>\n <td class=\"cursor-pointer\" mat-cell *matCellDef=\"let element\"\n (click)=\"viewCBPPlan(element)\">\n <div\n [ngClass]=\"activeTab === 'matched'? 'designation-text': 'designation-text-unmatched'\">\n <p class=\"designation\">{{ element?.designation_name }} </p>\n <p class=\"wing-text mt-2\">Wing/Division - {{\n element?.wing_division_section }} </p>\n </div>\n\n </td>\n </ng-container>\n\n <!-- Role & Responsibilities -->\n <ng-container matColumnDef=\"role_responsibilities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Role &\n Responsibilities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let role of (isResponisbilityExpanded(element.id) ? element.role_responsibilities : element.role_responsibilities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ role }}</li>\n <li *ngIf=\"element.role_responsibilities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'role_responsibilities')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n <!-- {{ isResponisbilityExpanded(element.id) ? 'View Less' : 'View More' }} -->\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n <!-- Activities -->\n <ng-container matColumnDef=\"activities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Activities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let activity of (isActivityExpanded(element.id) ? element.activities : element.activities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ activity }}</li>\n <li *ngIf=\"element.activities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'activity')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Behavioral Competencies -->\n <ng-container matColumnDef=\"behavioral\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Behavioral\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of (isBehavioralExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Behavioral') : getCompetenciesByType(element.competencies, 'Behavioral').slice(0, 4))\">\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Behavioral').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'behavioral')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Functional Competencies -->\n <ng-container matColumnDef=\"functional\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Functional\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of (isFunctionalExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Functional') : getCompetenciesByType(element.competencies, 'Functional').slice(0, 4))\">\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Functional').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'functional')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Domain Competencies -->\n <ng-container matColumnDef=\"domain\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Domain\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of (isDomainExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Domain') : getCompetenciesByType(element.competencies, 'Domain').slice(0, 4))\">\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Domain').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'domain')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Actions -->\n <ng-container matColumnDef=\"action\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #actionMenu=\"matMenu\">\n <button mat-menu-item (click)=\"editRoleMapping(element)\">\n <mat-icon>edit</mat-icon>\n <span>Edit Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"viewCBPPlan(element)\">\n <mat-icon>visibility</mat-icon>\n <span>View Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"generateCourseRecommendation(element)\">\n <mat-icon>school</mat-icon>\n <span>Generate Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"viewCourseRecommendation(element)\">\n <mat-icon>preview</mat-icon>\n <span>View Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"deleteRoleMapping(element)\">\n <mat-icon>delete</mat-icon>\n <span>Delete Role Mapping</span>\n </button>\n <button *ngIf=\"activeTab !== 'matched'\" mat-menu-item (click)=\"sendForDesignationNameApproval(element)\">\n <mat-icon>send</mat-icon>\n <span>Send for Designation Name Approval</span>\n </button>\n </mat-menu>\n </td>\n </ng-container>\n\n <!-- Header & Rows -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n\n <!-- Pagination -->\n <mat-paginator [length]=\"totalRoleMappingListCount\" [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\" (page)=\"pageChangeEvent($event)\"\n [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons>\n </mat-paginator>\n </div>\n\n </ng-container>\n\n <div class=\"no-cbp-data\" *ngIf=\"dataSource?.filteredData?.length === 0\">\n <!-- <div><img src=\"/mdo-assets/images/no-content-data.svg\" alt=\"no-content\"></div> -->\n <div class=\"sub-heading mt-4\">\n <p>No role mappings available in this category</p>\n </div>\n <!-- <div class=\" margin-top-m no-content-create\">\n <button mat-button type=\"button\" class=\"search-btns\"\n [routerLink]=\"['/app/home/create-request-form']\">Request Content</button>\n </div> -->\n\n </div>\n\n <!-- <mat-paginator *ngIf=\"dataSource?.filteredData?.length > 0\" [pageSize]=\"pageSize\"\n [length]=\"this.requestCount\" [pageSizeOptions]=\"[10,20,40]\"\n (page)=\"onChangePage($event)\"></mat-paginator> -->\n\n\n </div>\n\n\n\n </div>\n </div>\n </mat-card>\n </div>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;font-style:normal;font-weight:700;line-height:150%}:host ::ng-deep input.mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}:host ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}:host ::ng-deep .mat-select-panel{background-color:#fff!important}:host ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:10px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:600px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px 10px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex}.outside-layer{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.designation{color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:700;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.wing-text{color:#000000e0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal}.role-item{color:#000000e0;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.view-final-cbp-plan{display:flex;justify-content:end;align-items:center;gap:8px}.view-final-cbp-plan-text{padding:4px 16px;border-radius:24px;border:2px solid #F3962F;background:var(--white-kb-white-100, #FFF);box-shadow:0 1px 10px #276de599;color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:normal}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cursor-pointer{cursor:pointer}.ml-10{margin-left:10px}.table-container{border-top-left-radius:16px;border-top-right-radius:16px;overflow:auto;background:#fff;max-height:70vh}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;background:#fff;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child):after{content:\"\";position:absolute;top:12px;bottom:12px;right:0;width:1px;background-color:#e0e0e0}.table-header{font-size:16px;font-weight:600;background:#fff!important;color:#333}.table-header-unmatched{font-size:16px;font-weight:600;background:#f4dcde!important;color:#b42318}.table-body{background-color:#fff!important}.table-body-unmatched{background-color:#faf6f7!important}.designation-text-unmatched p{color:#b42318!important}.select-map-flex-container{display:flex;flex-direction:row;justify-content:space-between;width:100%}.select-map-flex{display:flex}.search-container-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;align-items:flex-start}.mt-6{margin-top:1.7rem}.mat-elevation-z1 .mat-mdc-cell{vertical-align:top!important;padding-top:8px;padding-bottom:8px}::ng-deep .radio-style-checkbox .mat-checkbox-frame{border-radius:50%}::ng-deep .radio-style-checkbox .mat-checkbox-background{border-radius:50%}.search-flex{display:flex;flex-direction:row;width:100%}.margin-top-15{margin-top:15px}.btn-active-outline{border-radius:10px;opacity:1;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;width:240px;border:none;background-color:transparent;cursor:pointer}.btn-active-outline-disable{border-radius:10px;opacity:.5;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;width:auto;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:240px;background-color:transparent;cursor:not-allowed}.role-mapping-tabs{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif}.role-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;border:1px solid #d0d5dd;background-color:#f9fafb;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease-in-out}.role-tab.active{border-color:#1b4ca1;background-color:#eff6ff;color:#1b4ca1}.dot{width:10px;height:10px;border-radius:50%;background-color:#1b4ca1}.dot.red{background-color:#b42318}.badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}.badge.blue{background-color:#dbeafe;color:#1b4ca1}.badge.red{background-color:#fee2e2;color:#b42318}.grayd-disable{color:#d3d3d3!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i14$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
15149
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RoleMappingListComponent, selector: "app-role-mapping-list", inputs: { formData: "formData" }, outputs: { moveToInitialScreen: "moveToInitialScreen" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"role-mapping-container\">\n <div class=\"container-fluid\">\n\n <mat-card class=\"mt-0 pt-0\">\n <div class=\"section-header\">\n\n </div>\n <div class=\"edit-section mt-4\">\n <div class=\"select-map-route-container\">\n <div class=\"select-map-flex-container\">\n <div class=\"select-map-flex\">\n <div class=\"selected-mapping-route\">\n <p>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name\">\n / {{ sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name }}\n </span>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"moveToInitialScreenLayout('edit')\">\n <mat-icon>edit</mat-icon>Edit\n </div>\n <!-- <div class=\"cursor-pointer ml-10\">-->\n <!-- <button class=\"btn-active cursor-pointer\" (click)=\"moveToInitialScreenLayout('add')\">-->\n <!-- <mat-icon>add</mat-icon>-->\n <!-- Create New CBP-->\n <!-- </button>-->\n <!-- </div>-->\n </div>\n <div>\n <div class=\"view-final-cbp-plan\">\n <!-- <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('cbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div> -->\n\n <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('acbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"search-filter-section mt-2\">\n <div class=\"search flex margin-right-m search-flex\">\n <div class=\"mt-2\">\n <div class=\"search-container\">\n <div class=\"rsearch\">\n <mat-icon\n class=\"color-60 search-icon mat-icon notranslate material-icons mat-icon-no-color\">search</mat-icon>\n <input class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\" label=\"\"\n (input)=\"applyFilter()\" placeholder=\"Search by designation name\" type=\"Standard\">\n <mat-icon *ngIf=\"searchText.trim().length > 0\"\n class=\"color-60 clear-icon mat-icon notranslate material-icons mat-icon-no-color cursor-pointer\"\n (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n <div class=\"pl-2 mt-2\">\n <input [disabled]=\"searchText.trim()?.length === 0\"\n [ngClass]=\"searchText.trim()?.length === 0 ? 'btn-disable':'btn-active'\"\n type=\"button\" value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n <div class=\"filter-section flex margin-top-15\">\n <!-- <div>\n <label class=\"label\">Filter by competency type</label>\n <div>\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select [(value)]=\"selectedValue\" placeholder=\"Select Ministry\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"'test'\">Test</mat-option>\n <mat-option [value]=\"'another'\">Another</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div> -->\n <div class=\"btn-group\">\n <div class=\"ml-2\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Designation\"\n (click)=\"addMoreDesignation()\" />\n </div>\n <div class=\"ml-2\" *ngIf=\"activeTab === 'matched'\">\n <button\n [ngClass]=\"selection.selected.length ? 'btn-active-outline' : 'btn-active-outline-disable'\"\n (click)=\"sendForApprovalForm()\">\n <mat-icon>send</mat-icon>\n Send For Approval\n <span *ngIf=\"selection.selected.length\">({{selection.selected.length}})</span>\n </button>\n </div>\n\n\n </div>\n </div>\n </div>\n <div class=\"role-mapping-tabs mt-3\">\n <button class=\"role-tab\" [class.active]=\"activeTab === 'matched'\" (click)=\"setDataSoure('matched')\">\n <span class=\"dot\"></span>\n Matched role mappings\n <span class=\"badge blue\">{{matchedRoleMapping}}</span>\n </button>\n\n <button class=\"role-tab table-body-unmatched\" [class.active]=\"activeTab === 'unmatched'\"\n (click)=\"setDataSoure('unmatched')\">\n <span class=\"dot red\"></span>\n Unmatched role mapping\n <span class=\"badge red\">{{unMatchedRoleMapping}}</span>\n </button>\n </div>\n <div class=\"nav-container\">\n <div class=\"sidenav-content\">\n <div class=\"table-class\">\n <ng-container *ngIf=\"dataSource?.filteredData?.length > 0\">\n <!-- <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"RequestId\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request ID </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.demand_id}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"title\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Title </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.title}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestor\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requestor </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.ownerName}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestType\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Type </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.requestType}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestStatus\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Status </th>\n\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <span [ngClass]=\"getStatusClass(element?.status)\">{{element?.status ===\n statusKey.fullfill ? 'Fulfilled'\n : element?.status}}</span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"assignee\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Assignee </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n {{element?.assignedProvider ?\n element?.assignedProvider : 'Not Assigned' }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestedOn\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requested On </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.createdOn |\n date}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"interests\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Interests</th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <a class=\"action-btn-view\" *ngIf=\"element?.interestCount!== 0\"\n href=\"javascript:void(0)\" [ngStyle]=\"getPointerEventsStyle(element)\">\n <span (click)=\"handleClick(element)\">\n {{element?.interestCount}}\n </span></a>\n <a class=\"\" *ngIf=\"element?.interestCount === 0\"\n href=\"javascript:void(0)\">{{element?.requestType ==\n 'Single' ? 'N/A' : element?.interestCount}}</a>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"details\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Details</th>\n <td mat-cell *matCellDef=\"let element\">\n <mat-icon (click)=\"navigateToDetails(element?.demand_id)\"\n class=\"cursor-pointer\">visibility</mat-icon>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\"></th>\n <td mat-cell *matCellDef=\"let element\">\n\n\n <span>\n <button mat-icon-button [matMenuTriggerFor]=\"menu\"\n aria-label=\"Example icon-button with a menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"onClickMenu(element,'viewContent')\">\n <span>View</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Unassigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid \"\n mat-menu-item (click)=\"onClickMenu(element,'invalidContent')\">\n <span>Mark as invalid</span>\n </button>\n <button mat-menu-item\n *ngIf=\"element?.status!== statusKey.Assigned && element?.interestCount >0 && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill\"\n (click)=\"onClickMenu(element,'assignContent')\">\n <span>Assign</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Assigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill \"\n mat-menu-item (click)=\"onClickMenu(element,'reAssignContent')\">\n <span> Re-Assign</span>\n </button>\n <button mat-menu-item (click)=\"onClickMenu(element,'copyContent')\">\n <span>Copy</span>\n </button>\n </mat-menu>\n </span>\n </td>\n\n\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\" class=\"table-row-data\"></tr>\n <tr mat-row *matRowDef=\"let row;columns:displayedColumns\"></tr>\n\n\n </table> -->\n <div class=\"table-container mt-4\" style=\"overflow: auto;\">\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z1\"\n [ngClass]=\"activeTab === 'matched'? 'table-body': 'table-body-unmatched'\">\n <!-- Selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef [hidden]=\"activeTab !== 'matched'\">\n <mat-checkbox class=\"radio-style-checkbox\" (change)=\"toggleAllRows($event)\"\n [checked]=\"isAllSelected()\" [indeterminate]=\"isSomeSelected()\"\n [disabled]=\"!hasSelectableRows()\">\n </mat-checkbox>\n </th>\n\n <td mat-cell *matCellDef=\"let row\" [hidden]=\"activeTab !== 'matched'\">\n <span matTooltip=\"Please generate & save course recommendation to select. Course recommendation generation & save is pending.\"\n [matTooltipDisabled]=\"!getActivateCbpPlan(row)\">\n <mat-checkbox class=\"radio-style-checkbox\"\n (click)=\"$event.stopPropagation()\" (change)=\"toggleRow(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"getActivateCbpPlan(row)\" [ngClass]=\" getActivateCbpPlan(row)? 'grayd-disable':''\">\n </mat-checkbox>\n </span>\n </td>\n </ng-container>\n <!-- Designation Name -->\n <ng-container matColumnDef=\"designation_name\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Designation\n </th>\n <td class=\"cursor-pointer\" mat-cell *matCellDef=\"let element\"\n (click)=\"viewCBPPlan(element)\">\n <div\n [ngClass]=\"activeTab === 'matched'? 'designation-text': 'designation-text-unmatched'\">\n <p class=\"designation\">{{ element?.designation_name }} </p>\n <p class=\"wing-text mt-2\">Wing/Division - {{\n element?.wing_division_section }} </p>\n </div>\n\n </td>\n </ng-container>\n\n <!-- Role & Responsibilities -->\n <ng-container matColumnDef=\"role_responsibilities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Role &\n Responsibilities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let role of (isResponisbilityExpanded(element.id) ? element.role_responsibilities : element.role_responsibilities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ role }}</li>\n <li *ngIf=\"element.role_responsibilities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'role_responsibilities')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n <!-- {{ isResponisbilityExpanded(element.id) ? 'View Less' : 'View More' }} -->\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n <!-- Activities -->\n <ng-container matColumnDef=\"activities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Activities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let activity of (isActivityExpanded(element.id) ? element.activities : element.activities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ activity }}</li>\n <li *ngIf=\"element.activities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'activity')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Behavioral Competencies -->\n <ng-container matColumnDef=\"behavioral\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Behavioral\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of (isBehavioralExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Behavioral') : getCompetenciesByType(element.competencies, 'Behavioral').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Behavioral').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'behavioral')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Functional Competencies -->\n <ng-container matColumnDef=\"functional\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Functional\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of (isFunctionalExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Functional') : getCompetenciesByType(element.competencies, 'Functional').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </div>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Functional').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'functional')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Domain Competencies -->\n <ng-container matColumnDef=\"domain\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Domain\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of (isDomainExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Domain') : getCompetenciesByType(element.competencies, 'Domain').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </div>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Domain').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'domain')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Actions -->\n <ng-container matColumnDef=\"action\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #actionMenu=\"matMenu\">\n <button mat-menu-item (click)=\"editRoleMapping(element)\">\n <mat-icon>edit</mat-icon>\n <span>Edit Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"viewCBPPlan(element)\">\n <mat-icon>visibility</mat-icon>\n <span>View Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"generateCourseRecommendation(element)\">\n <mat-icon>school</mat-icon>\n <span>Generate Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"viewCourseRecommendation(element)\">\n <mat-icon>preview</mat-icon>\n <span>View Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"deleteRoleMapping(element)\">\n <mat-icon>delete</mat-icon>\n <span>Delete Role Mapping</span>\n </button>\n <button *ngIf=\"activeTab !== 'matched'\" mat-menu-item (click)=\"sendForDesignationNameApproval(element)\">\n <mat-icon>send</mat-icon>\n <span>Send for Designation Name Approval</span>\n </button>\n </mat-menu>\n </td>\n </ng-container>\n\n <!-- Header & Rows -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n\n <!-- Pagination -->\n <mat-paginator [length]=\"totalRoleMappingListCount\" [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\" (page)=\"pageChangeEvent($event)\"\n [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons>\n </mat-paginator>\n </div>\n\n </ng-container>\n\n <div class=\"no-cbp-data\" *ngIf=\"dataSource?.filteredData?.length === 0\">\n <!-- <div><img src=\"/mdo-assets/images/no-content-data.svg\" alt=\"no-content\"></div> -->\n <div class=\"sub-heading mt-4\">\n <p>No role mappings available in this category</p>\n </div>\n <!-- <div class=\" margin-top-m no-content-create\">\n <button mat-button type=\"button\" class=\"search-btns\"\n [routerLink]=\"['/app/home/create-request-form']\">Request Content</button>\n </div> -->\n\n </div>\n\n <!-- <mat-paginator *ngIf=\"dataSource?.filteredData?.length > 0\" [pageSize]=\"pageSize\"\n [length]=\"this.requestCount\" [pageSizeOptions]=\"[10,20,40]\"\n (page)=\"onChangePage($event)\"></mat-paginator> -->\n\n\n </div>\n\n\n\n </div>\n </div>\n </mat-card>\n </div>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;font-style:normal;font-weight:700;line-height:150%}:host ::ng-deep input.mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}:host ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}:host ::ng-deep .mat-select-panel{background-color:#fff!important}:host ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:10px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:600px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px 10px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex}.outside-layer{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.designation{color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:700;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.wing-text{color:#000000e0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal}.role-item{color:#000000e0;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.view-final-cbp-plan{display:flex;justify-content:end;align-items:center;gap:8px}.view-final-cbp-plan-text{padding:4px 16px;border-radius:24px;border:2px solid #F3962F;background:var(--white-kb-white-100, #FFF);box-shadow:0 1px 10px #276de599;color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:normal}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cursor-pointer{cursor:pointer}.ml-10{margin-left:10px}.table-container{border-top-left-radius:16px;border-top-right-radius:16px;overflow:auto;background:#fff;max-height:70vh}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;background:#fff;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child):after{content:\"\";position:absolute;top:12px;bottom:12px;right:0;width:1px;background-color:#e0e0e0}.table-header{font-size:16px;font-weight:600;background:#fff!important;color:#333}.table-header-unmatched{font-size:16px;font-weight:600;background:#f4dcde!important;color:#b42318}.table-body{background-color:#fff!important}.table-body-unmatched{background-color:#faf6f7!important}.designation-text-unmatched p{color:#b42318!important}.select-map-flex-container{display:flex;flex-direction:row;justify-content:space-between;width:100%}.select-map-flex{display:flex}.search-container-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;align-items:flex-start}.mt-6{margin-top:1.7rem}.mat-elevation-z1 .mat-mdc-cell{vertical-align:top!important;padding-top:8px;padding-bottom:8px}::ng-deep .radio-style-checkbox .mat-checkbox-frame{border-radius:50%}::ng-deep .radio-style-checkbox .mat-checkbox-background{border-radius:50%}.search-flex{display:flex;flex-direction:row;width:100%}.margin-top-15{margin-top:15px}.btn-active-outline{border-radius:10px;opacity:1;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;width:240px;border:none;background-color:transparent;cursor:pointer}.btn-active-outline-disable{border-radius:10px;opacity:.5;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;width:auto;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:240px;background-color:transparent;cursor:not-allowed}.role-mapping-tabs{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif}.role-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;border:1px solid #d0d5dd;background-color:#f9fafb;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease-in-out}.role-tab.active{border-color:#1b4ca1;background-color:#eff6ff;color:#1b4ca1}.dot{width:10px;height:10px;border-radius:50%;background-color:#1b4ca1}.dot.red{background-color:#b42318}.badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}.badge.blue{background-color:#dbeafe;color:#1b4ca1}.badge.red{background-color:#fee2e2;color:#b42318}.grayd-disable{color:#d3d3d3!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:4px;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap}.delivery-mode-tag.online{background:#e6f4ea;color:#1a7f45;border:1px solid #9BD3B0}.delivery-mode-tag.offline{background:#fdf0e3;color:#a2590a;border:1px solid #F0C48A}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i14$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
15150
15150
|
}
|
|
15151
15151
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoleMappingListComponent, decorators: [{
|
|
15152
15152
|
type: Component,
|
|
15153
|
-
args: [{ selector: 'app-role-mapping-list', template: "<div class=\"role-mapping-container\">\n <div class=\"container-fluid\">\n\n <mat-card class=\"mt-0 pt-0\">\n <div class=\"section-header\">\n\n </div>\n <div class=\"edit-section mt-4\">\n <div class=\"select-map-route-container\">\n <div class=\"select-map-flex-container\">\n <div class=\"select-map-flex\">\n <div class=\"selected-mapping-route\">\n <p>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name\">\n / {{ sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name }}\n </span>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"moveToInitialScreenLayout('edit')\">\n <mat-icon>edit</mat-icon>Edit\n </div>\n <!-- <div class=\"cursor-pointer ml-10\">-->\n <!-- <button class=\"btn-active cursor-pointer\" (click)=\"moveToInitialScreenLayout('add')\">-->\n <!-- <mat-icon>add</mat-icon>-->\n <!-- Create New CBP-->\n <!-- </button>-->\n <!-- </div>-->\n </div>\n <div>\n <div class=\"view-final-cbp-plan\">\n <!-- <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('cbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div> -->\n\n <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('acbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"search-filter-section mt-2\">\n <div class=\"search flex margin-right-m search-flex\">\n <div class=\"mt-2\">\n <div class=\"search-container\">\n <div class=\"rsearch\">\n <mat-icon\n class=\"color-60 search-icon mat-icon notranslate material-icons mat-icon-no-color\">search</mat-icon>\n <input class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\" label=\"\"\n (input)=\"applyFilter()\" placeholder=\"Search by designation name\" type=\"Standard\">\n <mat-icon *ngIf=\"searchText.trim().length > 0\"\n class=\"color-60 clear-icon mat-icon notranslate material-icons mat-icon-no-color cursor-pointer\"\n (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n <div class=\"pl-2 mt-2\">\n <input [disabled]=\"searchText.trim()?.length === 0\"\n [ngClass]=\"searchText.trim()?.length === 0 ? 'btn-disable':'btn-active'\"\n type=\"button\" value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n <div class=\"filter-section flex margin-top-15\">\n <!-- <div>\n <label class=\"label\">Filter by competency type</label>\n <div>\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select [(value)]=\"selectedValue\" placeholder=\"Select Ministry\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"'test'\">Test</mat-option>\n <mat-option [value]=\"'another'\">Another</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div> -->\n <div class=\"btn-group\">\n <div class=\"ml-2\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Designation\"\n (click)=\"addMoreDesignation()\" />\n </div>\n <div class=\"ml-2\" *ngIf=\"activeTab === 'matched'\">\n <button\n [ngClass]=\"selection.selected.length ? 'btn-active-outline' : 'btn-active-outline-disable'\"\n (click)=\"sendForApprovalForm()\">\n <mat-icon>send</mat-icon>\n Send For Approval\n <span *ngIf=\"selection.selected.length\">({{selection.selected.length}})</span>\n </button>\n </div>\n\n\n </div>\n </div>\n </div>\n <div class=\"role-mapping-tabs mt-3\">\n <button class=\"role-tab\" [class.active]=\"activeTab === 'matched'\" (click)=\"setDataSoure('matched')\">\n <span class=\"dot\"></span>\n Matched role mappings\n <span class=\"badge blue\">{{matchedRoleMapping}}</span>\n </button>\n\n <button class=\"role-tab table-body-unmatched\" [class.active]=\"activeTab === 'unmatched'\"\n (click)=\"setDataSoure('unmatched')\">\n <span class=\"dot red\"></span>\n Unmatched role mapping\n <span class=\"badge red\">{{unMatchedRoleMapping}}</span>\n </button>\n </div>\n <div class=\"nav-container\">\n <div class=\"sidenav-content\">\n <div class=\"table-class\">\n <ng-container *ngIf=\"dataSource?.filteredData?.length > 0\">\n <!-- <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"RequestId\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request ID </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.demand_id}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"title\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Title </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.title}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestor\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requestor </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.ownerName}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestType\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Type </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.requestType}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestStatus\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Status </th>\n\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <span [ngClass]=\"getStatusClass(element?.status)\">{{element?.status ===\n statusKey.fullfill ? 'Fulfilled'\n : element?.status}}</span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"assignee\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Assignee </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n {{element?.assignedProvider ?\n element?.assignedProvider : 'Not Assigned' }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestedOn\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requested On </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.createdOn |\n date}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"interests\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Interests</th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <a class=\"action-btn-view\" *ngIf=\"element?.interestCount!== 0\"\n href=\"javascript:void(0)\" [ngStyle]=\"getPointerEventsStyle(element)\">\n <span (click)=\"handleClick(element)\">\n {{element?.interestCount}}\n </span></a>\n <a class=\"\" *ngIf=\"element?.interestCount === 0\"\n href=\"javascript:void(0)\">{{element?.requestType ==\n 'Single' ? 'N/A' : element?.interestCount}}</a>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"details\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Details</th>\n <td mat-cell *matCellDef=\"let element\">\n <mat-icon (click)=\"navigateToDetails(element?.demand_id)\"\n class=\"cursor-pointer\">visibility</mat-icon>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\"></th>\n <td mat-cell *matCellDef=\"let element\">\n\n\n <span>\n <button mat-icon-button [matMenuTriggerFor]=\"menu\"\n aria-label=\"Example icon-button with a menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"onClickMenu(element,'viewContent')\">\n <span>View</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Unassigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid \"\n mat-menu-item (click)=\"onClickMenu(element,'invalidContent')\">\n <span>Mark as invalid</span>\n </button>\n <button mat-menu-item\n *ngIf=\"element?.status!== statusKey.Assigned && element?.interestCount >0 && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill\"\n (click)=\"onClickMenu(element,'assignContent')\">\n <span>Assign</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Assigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill \"\n mat-menu-item (click)=\"onClickMenu(element,'reAssignContent')\">\n <span> Re-Assign</span>\n </button>\n <button mat-menu-item (click)=\"onClickMenu(element,'copyContent')\">\n <span>Copy</span>\n </button>\n </mat-menu>\n </span>\n </td>\n\n\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\" class=\"table-row-data\"></tr>\n <tr mat-row *matRowDef=\"let row;columns:displayedColumns\"></tr>\n\n\n </table> -->\n <div class=\"table-container mt-4\" style=\"overflow: auto;\">\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z1\"\n [ngClass]=\"activeTab === 'matched'? 'table-body': 'table-body-unmatched'\">\n <!-- Selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef [hidden]=\"activeTab !== 'matched'\">\n <mat-checkbox class=\"radio-style-checkbox\" (change)=\"toggleAllRows($event)\"\n [checked]=\"isAllSelected()\" [indeterminate]=\"isSomeSelected()\"\n [disabled]=\"!hasSelectableRows()\">\n </mat-checkbox>\n </th>\n\n <td mat-cell *matCellDef=\"let row\" [hidden]=\"activeTab !== 'matched'\">\n <span matTooltip=\"Please generate & save course recommendation to select. Course recommendation generation & save is pending.\"\n [matTooltipDisabled]=\"!getActivateCbpPlan(row)\">\n <mat-checkbox class=\"radio-style-checkbox\"\n (click)=\"$event.stopPropagation()\" (change)=\"toggleRow(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"getActivateCbpPlan(row)\" [ngClass]=\" getActivateCbpPlan(row)? 'grayd-disable':''\">\n </mat-checkbox>\n </span>\n </td>\n </ng-container>\n <!-- Designation Name -->\n <ng-container matColumnDef=\"designation_name\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Designation\n </th>\n <td class=\"cursor-pointer\" mat-cell *matCellDef=\"let element\"\n (click)=\"viewCBPPlan(element)\">\n <div\n [ngClass]=\"activeTab === 'matched'? 'designation-text': 'designation-text-unmatched'\">\n <p class=\"designation\">{{ element?.designation_name }} </p>\n <p class=\"wing-text mt-2\">Wing/Division - {{\n element?.wing_division_section }} </p>\n </div>\n\n </td>\n </ng-container>\n\n <!-- Role & Responsibilities -->\n <ng-container matColumnDef=\"role_responsibilities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Role &\n Responsibilities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let role of (isResponisbilityExpanded(element.id) ? element.role_responsibilities : element.role_responsibilities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ role }}</li>\n <li *ngIf=\"element.role_responsibilities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'role_responsibilities')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n <!-- {{ isResponisbilityExpanded(element.id) ? 'View Less' : 'View More' }} -->\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n <!-- Activities -->\n <ng-container matColumnDef=\"activities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Activities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let activity of (isActivityExpanded(element.id) ? element.activities : element.activities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ activity }}</li>\n <li *ngIf=\"element.activities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'activity')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Behavioral Competencies -->\n <ng-container matColumnDef=\"behavioral\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Behavioral\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of (isBehavioralExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Behavioral') : getCompetenciesByType(element.competencies, 'Behavioral').slice(0, 4))\">\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Behavioral').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'behavioral')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Functional Competencies -->\n <ng-container matColumnDef=\"functional\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Functional\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of (isFunctionalExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Functional') : getCompetenciesByType(element.competencies, 'Functional').slice(0, 4))\">\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Functional').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'functional')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Domain Competencies -->\n <ng-container matColumnDef=\"domain\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Domain\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of (isDomainExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Domain') : getCompetenciesByType(element.competencies, 'Domain').slice(0, 4))\">\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Domain').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'domain')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Actions -->\n <ng-container matColumnDef=\"action\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #actionMenu=\"matMenu\">\n <button mat-menu-item (click)=\"editRoleMapping(element)\">\n <mat-icon>edit</mat-icon>\n <span>Edit Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"viewCBPPlan(element)\">\n <mat-icon>visibility</mat-icon>\n <span>View Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"generateCourseRecommendation(element)\">\n <mat-icon>school</mat-icon>\n <span>Generate Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"viewCourseRecommendation(element)\">\n <mat-icon>preview</mat-icon>\n <span>View Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"deleteRoleMapping(element)\">\n <mat-icon>delete</mat-icon>\n <span>Delete Role Mapping</span>\n </button>\n <button *ngIf=\"activeTab !== 'matched'\" mat-menu-item (click)=\"sendForDesignationNameApproval(element)\">\n <mat-icon>send</mat-icon>\n <span>Send for Designation Name Approval</span>\n </button>\n </mat-menu>\n </td>\n </ng-container>\n\n <!-- Header & Rows -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n\n <!-- Pagination -->\n <mat-paginator [length]=\"totalRoleMappingListCount\" [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\" (page)=\"pageChangeEvent($event)\"\n [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons>\n </mat-paginator>\n </div>\n\n </ng-container>\n\n <div class=\"no-cbp-data\" *ngIf=\"dataSource?.filteredData?.length === 0\">\n <!-- <div><img src=\"/mdo-assets/images/no-content-data.svg\" alt=\"no-content\"></div> -->\n <div class=\"sub-heading mt-4\">\n <p>No role mappings available in this category</p>\n </div>\n <!-- <div class=\" margin-top-m no-content-create\">\n <button mat-button type=\"button\" class=\"search-btns\"\n [routerLink]=\"['/app/home/create-request-form']\">Request Content</button>\n </div> -->\n\n </div>\n\n <!-- <mat-paginator *ngIf=\"dataSource?.filteredData?.length > 0\" [pageSize]=\"pageSize\"\n [length]=\"this.requestCount\" [pageSizeOptions]=\"[10,20,40]\"\n (page)=\"onChangePage($event)\"></mat-paginator> -->\n\n\n </div>\n\n\n\n </div>\n </div>\n </mat-card>\n </div>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;font-style:normal;font-weight:700;line-height:150%}:host ::ng-deep input.mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}:host ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}:host ::ng-deep .mat-select-panel{background-color:#fff!important}:host ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:10px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:600px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px 10px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex}.outside-layer{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.designation{color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:700;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.wing-text{color:#000000e0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal}.role-item{color:#000000e0;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.view-final-cbp-plan{display:flex;justify-content:end;align-items:center;gap:8px}.view-final-cbp-plan-text{padding:4px 16px;border-radius:24px;border:2px solid #F3962F;background:var(--white-kb-white-100, #FFF);box-shadow:0 1px 10px #276de599;color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:normal}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cursor-pointer{cursor:pointer}.ml-10{margin-left:10px}.table-container{border-top-left-radius:16px;border-top-right-radius:16px;overflow:auto;background:#fff;max-height:70vh}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;background:#fff;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child):after{content:\"\";position:absolute;top:12px;bottom:12px;right:0;width:1px;background-color:#e0e0e0}.table-header{font-size:16px;font-weight:600;background:#fff!important;color:#333}.table-header-unmatched{font-size:16px;font-weight:600;background:#f4dcde!important;color:#b42318}.table-body{background-color:#fff!important}.table-body-unmatched{background-color:#faf6f7!important}.designation-text-unmatched p{color:#b42318!important}.select-map-flex-container{display:flex;flex-direction:row;justify-content:space-between;width:100%}.select-map-flex{display:flex}.search-container-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;align-items:flex-start}.mt-6{margin-top:1.7rem}.mat-elevation-z1 .mat-mdc-cell{vertical-align:top!important;padding-top:8px;padding-bottom:8px}::ng-deep .radio-style-checkbox .mat-checkbox-frame{border-radius:50%}::ng-deep .radio-style-checkbox .mat-checkbox-background{border-radius:50%}.search-flex{display:flex;flex-direction:row;width:100%}.margin-top-15{margin-top:15px}.btn-active-outline{border-radius:10px;opacity:1;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;width:240px;border:none;background-color:transparent;cursor:pointer}.btn-active-outline-disable{border-radius:10px;opacity:.5;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;width:auto;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:240px;background-color:transparent;cursor:not-allowed}.role-mapping-tabs{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif}.role-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;border:1px solid #d0d5dd;background-color:#f9fafb;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease-in-out}.role-tab.active{border-color:#1b4ca1;background-color:#eff6ff;color:#1b4ca1}.dot{width:10px;height:10px;border-radius:50%;background-color:#1b4ca1}.dot.red{background-color:#b42318}.badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}.badge.blue{background-color:#dbeafe;color:#1b4ca1}.badge.red{background-color:#fee2e2;color:#b42318}.grayd-disable{color:#d3d3d3!important}\n"] }]
|
|
15153
|
+
args: [{ selector: 'app-role-mapping-list', template: "<div class=\"role-mapping-container\">\n <div class=\"container-fluid\">\n\n <mat-card class=\"mt-0 pt-0\">\n <div class=\"section-header\">\n\n </div>\n <div class=\"edit-section mt-4\">\n <div class=\"select-map-route-container\">\n <div class=\"select-map-flex-container\">\n <div class=\"select-map-flex\">\n <div class=\"selected-mapping-route\">\n <p>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name\">\n / {{ sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name }}\n </span>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"moveToInitialScreenLayout('edit')\">\n <mat-icon>edit</mat-icon>Edit\n </div>\n <!-- <div class=\"cursor-pointer ml-10\">-->\n <!-- <button class=\"btn-active cursor-pointer\" (click)=\"moveToInitialScreenLayout('add')\">-->\n <!-- <mat-icon>add</mat-icon>-->\n <!-- Create New CBP-->\n <!-- </button>-->\n <!-- </div>-->\n </div>\n <div>\n <div class=\"view-final-cbp-plan\">\n <!-- <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('cbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div> -->\n\n <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('acbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"search-filter-section mt-2\">\n <div class=\"search flex margin-right-m search-flex\">\n <div class=\"mt-2\">\n <div class=\"search-container\">\n <div class=\"rsearch\">\n <mat-icon\n class=\"color-60 search-icon mat-icon notranslate material-icons mat-icon-no-color\">search</mat-icon>\n <input class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\" label=\"\"\n (input)=\"applyFilter()\" placeholder=\"Search by designation name\" type=\"Standard\">\n <mat-icon *ngIf=\"searchText.trim().length > 0\"\n class=\"color-60 clear-icon mat-icon notranslate material-icons mat-icon-no-color cursor-pointer\"\n (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n <div class=\"pl-2 mt-2\">\n <input [disabled]=\"searchText.trim()?.length === 0\"\n [ngClass]=\"searchText.trim()?.length === 0 ? 'btn-disable':'btn-active'\"\n type=\"button\" value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n <div class=\"filter-section flex margin-top-15\">\n <!-- <div>\n <label class=\"label\">Filter by competency type</label>\n <div>\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select [(value)]=\"selectedValue\" placeholder=\"Select Ministry\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"'test'\">Test</mat-option>\n <mat-option [value]=\"'another'\">Another</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div> -->\n <div class=\"btn-group\">\n <div class=\"ml-2\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Designation\"\n (click)=\"addMoreDesignation()\" />\n </div>\n <div class=\"ml-2\" *ngIf=\"activeTab === 'matched'\">\n <button\n [ngClass]=\"selection.selected.length ? 'btn-active-outline' : 'btn-active-outline-disable'\"\n (click)=\"sendForApprovalForm()\">\n <mat-icon>send</mat-icon>\n Send For Approval\n <span *ngIf=\"selection.selected.length\">({{selection.selected.length}})</span>\n </button>\n </div>\n\n\n </div>\n </div>\n </div>\n <div class=\"role-mapping-tabs mt-3\">\n <button class=\"role-tab\" [class.active]=\"activeTab === 'matched'\" (click)=\"setDataSoure('matched')\">\n <span class=\"dot\"></span>\n Matched role mappings\n <span class=\"badge blue\">{{matchedRoleMapping}}</span>\n </button>\n\n <button class=\"role-tab table-body-unmatched\" [class.active]=\"activeTab === 'unmatched'\"\n (click)=\"setDataSoure('unmatched')\">\n <span class=\"dot red\"></span>\n Unmatched role mapping\n <span class=\"badge red\">{{unMatchedRoleMapping}}</span>\n </button>\n </div>\n <div class=\"nav-container\">\n <div class=\"sidenav-content\">\n <div class=\"table-class\">\n <ng-container *ngIf=\"dataSource?.filteredData?.length > 0\">\n <!-- <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"RequestId\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request ID </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.demand_id}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"title\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Title </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.title}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestor\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requestor </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.ownerName}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestType\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Type </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.requestType}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestStatus\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Status </th>\n\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <span [ngClass]=\"getStatusClass(element?.status)\">{{element?.status ===\n statusKey.fullfill ? 'Fulfilled'\n : element?.status}}</span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"assignee\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Assignee </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n {{element?.assignedProvider ?\n element?.assignedProvider : 'Not Assigned' }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestedOn\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requested On </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.createdOn |\n date}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"interests\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Interests</th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <a class=\"action-btn-view\" *ngIf=\"element?.interestCount!== 0\"\n href=\"javascript:void(0)\" [ngStyle]=\"getPointerEventsStyle(element)\">\n <span (click)=\"handleClick(element)\">\n {{element?.interestCount}}\n </span></a>\n <a class=\"\" *ngIf=\"element?.interestCount === 0\"\n href=\"javascript:void(0)\">{{element?.requestType ==\n 'Single' ? 'N/A' : element?.interestCount}}</a>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"details\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Details</th>\n <td mat-cell *matCellDef=\"let element\">\n <mat-icon (click)=\"navigateToDetails(element?.demand_id)\"\n class=\"cursor-pointer\">visibility</mat-icon>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\"></th>\n <td mat-cell *matCellDef=\"let element\">\n\n\n <span>\n <button mat-icon-button [matMenuTriggerFor]=\"menu\"\n aria-label=\"Example icon-button with a menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"onClickMenu(element,'viewContent')\">\n <span>View</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Unassigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid \"\n mat-menu-item (click)=\"onClickMenu(element,'invalidContent')\">\n <span>Mark as invalid</span>\n </button>\n <button mat-menu-item\n *ngIf=\"element?.status!== statusKey.Assigned && element?.interestCount >0 && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill\"\n (click)=\"onClickMenu(element,'assignContent')\">\n <span>Assign</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Assigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill \"\n mat-menu-item (click)=\"onClickMenu(element,'reAssignContent')\">\n <span> Re-Assign</span>\n </button>\n <button mat-menu-item (click)=\"onClickMenu(element,'copyContent')\">\n <span>Copy</span>\n </button>\n </mat-menu>\n </span>\n </td>\n\n\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\" class=\"table-row-data\"></tr>\n <tr mat-row *matRowDef=\"let row;columns:displayedColumns\"></tr>\n\n\n </table> -->\n <div class=\"table-container mt-4\" style=\"overflow: auto;\">\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z1\"\n [ngClass]=\"activeTab === 'matched'? 'table-body': 'table-body-unmatched'\">\n <!-- Selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef [hidden]=\"activeTab !== 'matched'\">\n <mat-checkbox class=\"radio-style-checkbox\" (change)=\"toggleAllRows($event)\"\n [checked]=\"isAllSelected()\" [indeterminate]=\"isSomeSelected()\"\n [disabled]=\"!hasSelectableRows()\">\n </mat-checkbox>\n </th>\n\n <td mat-cell *matCellDef=\"let row\" [hidden]=\"activeTab !== 'matched'\">\n <span matTooltip=\"Please generate & save course recommendation to select. Course recommendation generation & save is pending.\"\n [matTooltipDisabled]=\"!getActivateCbpPlan(row)\">\n <mat-checkbox class=\"radio-style-checkbox\"\n (click)=\"$event.stopPropagation()\" (change)=\"toggleRow(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"getActivateCbpPlan(row)\" [ngClass]=\" getActivateCbpPlan(row)? 'grayd-disable':''\">\n </mat-checkbox>\n </span>\n </td>\n </ng-container>\n <!-- Designation Name -->\n <ng-container matColumnDef=\"designation_name\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Designation\n </th>\n <td class=\"cursor-pointer\" mat-cell *matCellDef=\"let element\"\n (click)=\"viewCBPPlan(element)\">\n <div\n [ngClass]=\"activeTab === 'matched'? 'designation-text': 'designation-text-unmatched'\">\n <p class=\"designation\">{{ element?.designation_name }} </p>\n <p class=\"wing-text mt-2\">Wing/Division - {{\n element?.wing_division_section }} </p>\n </div>\n\n </td>\n </ng-container>\n\n <!-- Role & Responsibilities -->\n <ng-container matColumnDef=\"role_responsibilities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Role &\n Responsibilities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let role of (isResponisbilityExpanded(element.id) ? element.role_responsibilities : element.role_responsibilities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ role }}</li>\n <li *ngIf=\"element.role_responsibilities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'role_responsibilities')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n <!-- {{ isResponisbilityExpanded(element.id) ? 'View Less' : 'View More' }} -->\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n <!-- Activities -->\n <ng-container matColumnDef=\"activities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Activities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let activity of (isActivityExpanded(element.id) ? element.activities : element.activities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ activity }}</li>\n <li *ngIf=\"element.activities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'activity')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Behavioral Competencies -->\n <ng-container matColumnDef=\"behavioral\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Behavioral\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of (isBehavioralExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Behavioral') : getCompetenciesByType(element.competencies, 'Behavioral').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Behavioral').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'behavioral')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Functional Competencies -->\n <ng-container matColumnDef=\"functional\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Functional\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of (isFunctionalExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Functional') : getCompetenciesByType(element.competencies, 'Functional').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </div>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Functional').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'functional')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Domain Competencies -->\n <ng-container matColumnDef=\"domain\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Domain\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of (isDomainExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Domain') : getCompetenciesByType(element.competencies, 'Domain').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </div>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Domain').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'domain')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Actions -->\n <ng-container matColumnDef=\"action\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #actionMenu=\"matMenu\">\n <button mat-menu-item (click)=\"editRoleMapping(element)\">\n <mat-icon>edit</mat-icon>\n <span>Edit Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"viewCBPPlan(element)\">\n <mat-icon>visibility</mat-icon>\n <span>View Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"generateCourseRecommendation(element)\">\n <mat-icon>school</mat-icon>\n <span>Generate Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"viewCourseRecommendation(element)\">\n <mat-icon>preview</mat-icon>\n <span>View Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"deleteRoleMapping(element)\">\n <mat-icon>delete</mat-icon>\n <span>Delete Role Mapping</span>\n </button>\n <button *ngIf=\"activeTab !== 'matched'\" mat-menu-item (click)=\"sendForDesignationNameApproval(element)\">\n <mat-icon>send</mat-icon>\n <span>Send for Designation Name Approval</span>\n </button>\n </mat-menu>\n </td>\n </ng-container>\n\n <!-- Header & Rows -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n\n <!-- Pagination -->\n <mat-paginator [length]=\"totalRoleMappingListCount\" [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\" (page)=\"pageChangeEvent($event)\"\n [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons>\n </mat-paginator>\n </div>\n\n </ng-container>\n\n <div class=\"no-cbp-data\" *ngIf=\"dataSource?.filteredData?.length === 0\">\n <!-- <div><img src=\"/mdo-assets/images/no-content-data.svg\" alt=\"no-content\"></div> -->\n <div class=\"sub-heading mt-4\">\n <p>No role mappings available in this category</p>\n </div>\n <!-- <div class=\" margin-top-m no-content-create\">\n <button mat-button type=\"button\" class=\"search-btns\"\n [routerLink]=\"['/app/home/create-request-form']\">Request Content</button>\n </div> -->\n\n </div>\n\n <!-- <mat-paginator *ngIf=\"dataSource?.filteredData?.length > 0\" [pageSize]=\"pageSize\"\n [length]=\"this.requestCount\" [pageSizeOptions]=\"[10,20,40]\"\n (page)=\"onChangePage($event)\"></mat-paginator> -->\n\n\n </div>\n\n\n\n </div>\n </div>\n </mat-card>\n </div>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;font-style:normal;font-weight:700;line-height:150%}:host ::ng-deep input.mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}:host ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}:host ::ng-deep .mat-select-panel{background-color:#fff!important}:host ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:10px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:600px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px 10px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex}.outside-layer{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.designation{color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:700;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.wing-text{color:#000000e0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal}.role-item{color:#000000e0;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.view-final-cbp-plan{display:flex;justify-content:end;align-items:center;gap:8px}.view-final-cbp-plan-text{padding:4px 16px;border-radius:24px;border:2px solid #F3962F;background:var(--white-kb-white-100, #FFF);box-shadow:0 1px 10px #276de599;color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:normal}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cursor-pointer{cursor:pointer}.ml-10{margin-left:10px}.table-container{border-top-left-radius:16px;border-top-right-radius:16px;overflow:auto;background:#fff;max-height:70vh}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;background:#fff;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child):after{content:\"\";position:absolute;top:12px;bottom:12px;right:0;width:1px;background-color:#e0e0e0}.table-header{font-size:16px;font-weight:600;background:#fff!important;color:#333}.table-header-unmatched{font-size:16px;font-weight:600;background:#f4dcde!important;color:#b42318}.table-body{background-color:#fff!important}.table-body-unmatched{background-color:#faf6f7!important}.designation-text-unmatched p{color:#b42318!important}.select-map-flex-container{display:flex;flex-direction:row;justify-content:space-between;width:100%}.select-map-flex{display:flex}.search-container-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;align-items:flex-start}.mt-6{margin-top:1.7rem}.mat-elevation-z1 .mat-mdc-cell{vertical-align:top!important;padding-top:8px;padding-bottom:8px}::ng-deep .radio-style-checkbox .mat-checkbox-frame{border-radius:50%}::ng-deep .radio-style-checkbox .mat-checkbox-background{border-radius:50%}.search-flex{display:flex;flex-direction:row;width:100%}.margin-top-15{margin-top:15px}.btn-active-outline{border-radius:10px;opacity:1;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;width:240px;border:none;background-color:transparent;cursor:pointer}.btn-active-outline-disable{border-radius:10px;opacity:.5;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;width:auto;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:240px;background-color:transparent;cursor:not-allowed}.role-mapping-tabs{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif}.role-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;border:1px solid #d0d5dd;background-color:#f9fafb;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease-in-out}.role-tab.active{border-color:#1b4ca1;background-color:#eff6ff;color:#1b4ca1}.dot{width:10px;height:10px;border-radius:50%;background-color:#1b4ca1}.dot.red{background-color:#b42318}.badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}.badge.blue{background-color:#dbeafe;color:#1b4ca1}.badge.red{background-color:#fee2e2;color:#b42318}.grayd-disable{color:#d3d3d3!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:4px;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap}.delivery-mode-tag.online{background:#e6f4ea;color:#1a7f45;border:1px solid #9BD3B0}.delivery-mode-tag.offline{background:#fdf0e3;color:#a2590a;border:1px solid #F0C48A}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:column}\n"] }]
|
|
15154
15154
|
}], ctorParameters: function () { return [{ type: SharedService }, { type: i1$1.MatDialog }, { type: i3.Router }, { type: i3.ActivatedRoute }]; }, propDecorators: { formData: [{
|
|
15155
15155
|
type: Input
|
|
15156
15156
|
}], paginator: [{
|