@sunbird-cb/cbp-ai 0.1.97 → 0.1.99
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/generate-course-recommendation/generate-course-recommendation.component.mjs +3 -3
- package/esm2022/lib/components/role-mapping-list/role-mapping-list.component.mjs +106 -103
- package/esm2022/lib/modules/shared/services/shared.service.mjs +4 -3
- package/fesm2022/sunbird-cb-cbp-ai.mjs +110 -106
- package/fesm2022/sunbird-cb-cbp-ai.mjs.map +1 -1
- package/lib/components/role-mapping-list/role-mapping-list.component.d.ts +1 -0
- package/lib/components/role-mapping-list/role-mapping-list.component.d.ts.map +1 -1
- package/lib/modules/shared/services/shared.service.d.ts.map +1 -1
- package/package.json +1 -1
- package/sunbird-cb-cbp-ai-0.1.97.tgz +0 -0
|
@@ -532,12 +532,13 @@ class SharedService {
|
|
|
532
532
|
"load_cbp_plans": true,
|
|
533
533
|
"filters": {
|
|
534
534
|
"state_center_id": state_center_id,
|
|
535
|
-
"match_status": match_status
|
|
535
|
+
"match_status": match_status,
|
|
536
|
+
"department_id": department_id
|
|
536
537
|
},
|
|
537
538
|
"sort_by": null
|
|
538
539
|
};
|
|
539
540
|
if (typeof department_id === 'string') {
|
|
540
|
-
reqBody
|
|
541
|
+
reqBody.filters.department_id = department_id;
|
|
541
542
|
return this.http.post(`${this.baseUrl}${API_END_POINTS$1.SEARCH_ROLE_MAPPING}`, reqBody, { headers })
|
|
542
543
|
.pipe(map((response) => {
|
|
543
544
|
return response;
|
|
@@ -5802,11 +5803,11 @@ class GenerateCourseRecommendationComponent {
|
|
|
5802
5803
|
});
|
|
5803
5804
|
}
|
|
5804
5805
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GenerateCourseRecommendationComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SharedService }, { token: i3$1.MatSnackBar }, { token: i1$1.MatDialog }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5805
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GenerateCourseRecommendationComponent, selector: "app-generate-course-recommendation", viewQueries: [{ propertyName: "pdfContent", first: true, predicate: ["pdfContent"], descendants: true }], ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n \n <!-- Initial Loading Screen (for initial load and regeneration) -->\n <div class=\"initial-loading-container\" *ngIf=\"!dataLoaded || isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || (isRegeneratingWithProgress ? 'Regenerating course recommendations...' : 'Loading course recommendations...') }}</p>\n <div class=\"progress-details\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-indicator\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Main Content -->\n <div class=\"main-content\" *ngIf=\"dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"popup-header\">\n <div class=\"header-left\">\n <div class=\"heading\">Save Courses (<span>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span\n *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span></span>)</div>\n </div>\n <div class=\"header-actions\">\n <button class=\"regenerate-btn\" (click)=\"regenerateCourseRecommendations()\"\n [disabled]=\"isRegenerating\"\n mat-raised-button color=\"primary\">\n <mat-icon *ngIf=\"!isRegenerating\">refresh</mat-icon>\n <mat-spinner *ngIf=\"isRegenerating\" diameter=\"20\"></mat-spinner>\n <span>{{isRegenerating ? 'Regenerating...' : 'Regenerate Recommendations'}}</span>\n </button>\n <div class=\"cursor-pointer close-btn\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-4\">\n <mat-tab-group (selectedTabChange)=\"onOuterTabChange($event)\">\n <!-- First Main Tab -->\n <mat-tab label=\"course recommendation\">\n <!-- Nested Tabs -->\n <!-- <mat-tab-group (selectedTabChange)=\"onInnerTabChange($event)\">\n <mat-tab label=\"all\">\n\n </mat-tab>\n <mat-tab label=\"behavioural\">\n\n </mat-tab>\n <mat-tab label=\"functional\">\n\n </mat-tab>\n <mat-tab label=\"domain\">\n\n </mat-tab>\n </mat-tab-group> -->\n </mat-tab>\n\n <!-- Second Main Tab -->\n <mat-tab label=\"gap analysis\">\n <!-- <p>Gap analysis content goes here</p> -->\n </mat-tab>\n </mat-tab-group>\n <form [formGroup]=\"filterForm\" class=\"filters-container\">\n <div class=\"role-mapping-container\"\n *ngIf=\"outerTabActiveIndex === 0 && (innerTabActiveIndex === 0 || innerTabActiveIndex === 1 || innerTabActiveIndex === 2 || innerTabActiveIndex === 3 )\">\n <div class=\"container\">\n <div class=\"section-header-improved mt-3\">\n <div class=\"search-and-buttons-container\">\n <div>\n <label>Search Courses</label>\n </div> \n <div class=\"search-container-compact\">\n <div class=\"rsearch\">\n <mat-icon class=\"search-icon\">search</mat-icon>\n <input class=\"sinput-compact\" [(ngModel)]=\"searchText\"\n (input)=\"applyFilter($event.target.value);\"\n placeholder=\"Search Courses\" type=\"text\">\n </div>\n </div>\n \n </div>\n \n\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Competency</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.competency?.length ? '' : 'Competency' }}\n </mat-label>\n \n <mat-select\n formControlName=\"competency\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Competency\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'competency')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredCompetency\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div> \n \n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Rating</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.rating?.length ? '' : 'Rating' }}\n </mat-label>\n \n <mat-select\n formControlName=\"rating\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Reatings\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'rating')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredRatings\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n \n \n \n \n </div>\n <div class=\"section-header-improved-sec-2 mt-4\">\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Language</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.language?.length ? '' : 'Language' }}\n </mat-label>\n \n <mat-select\n formControlName=\"language\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Languages\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'language')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredLanguages\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Duration</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.duration?.length ? '' : 'Duration' }}\n </mat-label>\n \n <mat-select\n formControlName=\"duration\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Duration\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'duration')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredDurations\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Provider</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.provider?.length ? '' : 'Provider' }}\n </mat-label>\n \n <mat-select\n formControlName=\"provider\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Provider\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'provider')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredProviders\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div style=\"margin-top: 45px;margin-left: 20px;\">\n <input class=\"btn-active\" type=\"button\" value=\"Reset All Filters\"\n (click)=\"resetFilters()\" />\n </div>\n </div>\n <div class=\"mt-4\">\n <div style=\"font-size:16px;font-weight:bold;color:#000\">\n Filtered Course Count : {{filterdCourses?.length}}\n </div>\n </div>\n <div class=\"mt-5 sub-heading select-all-container\" *ngIf=\"filterdCourses?.length\">\n <div style=\"margin-left: 16px;\">\n <mat-checkbox [checked]=\"false\" (change)=\"selectAllCourses($event)\">Select All\n Courses</mat-checkbox>\n </div>\n <div class=\"btn-group-compact\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add More Course From iGOT\"\n (click)=\"suggestMoreCourses()\" />\n </div>\n <div class=\"pl-2\">\n <input [disabled]=\"selectFilterCourses?.length > 0 ? false : true\"\n [ngClass]=\"selectFilterCourses?.length > 0 ? 'btn-active' : 'btn-disable'\"\n type=\"button\" [value]=\"mode === 'add' ? 'Save Courses' : 'Update Courses'\"\n (click)=\"saveCourses()\" />\n </div>\n </div>\n </div>\n <div class=\"disclaimer-container mt-2\" *ngIf=\"filterdCourses?.length\">\n <div class=\"disclaimer-message mt-4\">\n <strong>Disclaimer:</strong> Please verify the public course URL before adding it to the plan.\n </div>\n </div>\n <div class=\"mt-2\">\n\n <div class=\"course-list-container\">\n <div\n [ngClass]=\"innerTabActiveIndex > 0 ? 'course-list-container-flex':'course-list-container-right-flex' \">\n <div *ngIf=\"innerTabActiveIndex > 0\"\n [ngClass]=\"innerTabActiveIndex > 0 ? 'left-panel':''\">\n <ng-container *ngIf=\"innerTabActiveIndex === 1\">\n <div class=\"sub-heading\">\n <p>Competencies in Behavioural</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 2\">\n <div class=\"sub-heading\">\n <p>Competencies in Functional</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 3\">\n <div class=\"sub-heading\">\n <p>Competencies in Domain</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n </div>\n <div [ngClass]=\"innerTabActiveIndex > 0 ? 'right-panel':'right-panel-flex'\">\n <!-- No Course Found Message in Right Panel -->\n <div class=\"no-course-found-container\"\n *ngIf=\"filterdCourses?.length === 0 && selectedThemeFilter\">\n <div class=\"no-course-card\">\n <div class=\"no-course-icon\">\n <mat-icon>search_off</mat-icon>\n </div>\n <div class=\"no-course-content\">\n <h4>No Courses Found</h4>\n <p>No courses found for the selected theme:\n <strong>{{selectedThemeFilter}}</strong></p>\n <p>Would you like to add a course for this competency?</p>\n <button class=\"suggest-course-btn\"\n (click)=\"addCourseForSelectedTheme()\">\n <mat-icon>add_circle</mat-icon>\n Add Course\n </button>\n </div>\n </div>\n </div>\n\n <!-- Courses List -->\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n\n <div class=\"course-content\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n <div>\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\"\n (change)=\"selectedFilterCourses($event, item)\"></mat-checkbox>\n </div>\n <div class=\"ml-2\">\n <div class=\"course-pill-container\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img\n src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- <div>\n <div class=\"ai-recommened-pill\">\n <div class=\"ai-recommened-pill-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n\n <span *ngIf=\"item?.rationale\">AI Recommended\n <span *ngIf=\"item?.is_public\"> - Public</span>\n <span *ngIf=\"!item?.is_public\"> - iGOT</span>\n </span>\n <span *ngIf=\"!item?.rationale\">Manually Suggested - iGOT</span>\n\n </div>\n </div>\n </div> -->\n <div *ngIf=\"item?.rationale && !item?.is_public\">\n <div class=\"ai-recommened-pill-green\">\n <div class=\"ai-recommened-pill-green-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"item?.rationale && item?.is_public\">\n <div class=\"ai-recommened-pill-public\">\n <div class=\"ai-recommened-pill-public-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - Public </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!item?.rationale\">\n <div class=\"ai-recommened-pill-gray\">\n <div class=\"ai-recommened-pill-gray-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>Manually Suggested - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"course-title mt-3 cursor-pointer\" (click)=\"redirectToToc(item)\">\n <span *ngIf=\"item?.course\">{{item?.course}}</span>\n <!-- <span *ngIf=\"item?.name\">{{item?.name}}****</span> -->\n <span style=\"margin-left:10px;\" (click)=\"redirectToToc(item)\"><img\n height=\"18px\" width=\"18px\"\n src=\"assets/icons/redirect.png\" /></span>\n </div>\n <div class=\"course-desc mt-2\">\n <!-- <span *ngIf=\"item?.rationale\">{{item?.rationale}}</span> -->\n <span *ngIf=\"item?.description\">{{item?.description}}</span>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioural Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',i)\">\n {{ isExpanded('Behavioural',i) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Functional',i)?.length\">\n <div class=\"competency-sub-heading\">Functional Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Functional',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',i)\">\n {{ isExpanded('Functional',i) ? 'Show Less' : '+' +\n getRemainingCount('Functional',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',i)?.length\">\n <div class=\"competency-sub-heading\">Domain Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Domain',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',i)\" class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n\n\n </div>\n\n <!-- Relevancy and Duration section -->\n <div class=\"course-footer\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">{{item?.relevancy}}%</div>\n </div>\n </div>\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Duration</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">\n <span\n *ngIf=\"item?.duration\">{{getDuration(item?.duration)}}</span>\n <span *ngIf=\"!(item?.duration)\">N/A</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- General No Data Message (only when no theme filter is active) -->\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 && !selectedThemeFilter\">\n <p>No Data Found</p>\n </div>\n </div>\n </div>\n </form>\n <div class=\"role-mapping-container\" *ngIf=\"outerTabActiveIndex === 1\">\n <div id=\"gap-analysis-content\">\n\n <div class=\"download-pdf mt-4 mb-2\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\" />\n </div>\n </div>\n <div>\n <!-- <div *ngIf=\"isPDFDownload\">\n <div class=\"pdf-heading\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}} <span\n *ngIf=\"planData?.designation_name \">_{{planData?.designation_name}}_Gap_Analysis</span>\n </div>\n </div> -->\n <div class=\"d-flex vh-100\" [ngClass]=\"isPDFDownload ? 'mt-4':''\">\n <!-- Sidebar -->\n <div class=\"d-flex flex-column p-3 bg-light border-end\" style=\"width: 250px;\">\n <h5 class=\"mb-4\">Analyze by Category</h5>\n <button *ngFor=\"let item of menuItems\"\n class=\"btn btn-outline-primary mb-2 text-start menu-list-item\"\n [class.active]=\"selectedCategory === item.key\" (click)=\"selectCategory(item.key)\">\n {{ item.label }}\n </button>\n </div>\n\n <!-- Main Content -->\n <div class=\"flex-grow-1 p-4\">\n <div class=\"d-flex justify-content-between gap-3 \">\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p>Competencies Covered</p>\n </div>\n <div class=\"div-count\">{{competencyCoveredCount}}</div>\n </div>\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p *ngIf=\"selectedCategory === 'all'\">Total Competencies</p>\n <p *ngIf=\"selectedCategory === 'behavioral'\">Total Behavioural Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'functional'\">Total Functional Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'domain'\">Total Domain Competencies</p>\n </div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'all'\">\n {{this.planData?.competencies?.length}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainTotalCompetencies}}</div>\n </div>\n <div class=\"p-3 green-bg\">\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'all'\">Overall Coverage\n </div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'behavioral'\">\n Behavioural Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'functional'\">\n Functional Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'domain'\">Domain\n Coverage</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'all'\">\n {{overallCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainCoverage}}</div>\n </div>\n </div>\n <div class=\"mt-4 all-category-list\" [ngSwitch]=\"selectedCategory\">\n <div *ngSwitchCase=\"'all'\">\n <h4>All Categories</h4>\n\n <!-- Show Behavioural section only if there are unmatched behavioural competencies -->\n <div class=\"mt-4\"\n *ngIf=\"behaviouralNotMatched && behaviouralNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div>\n </div>\n </div>\n </div>\n\n <!-- Show Functional section only if there are unmatched functional competencies -->\n <div class=\"mt-4\"\n *ngIf=\"functionalNotMatched && functionalNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Functional</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div>\n </div>\n </div>\n </div>\n\n <!-- Show Domain section only if there are unmatched domain competencies -->\n <div class=\"mt-4\" *ngIf=\"domainNotMatched && domainNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Domain</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div>\n </div>\n </div>\n </div>\n\n <!-- Show message when all competencies are covered -->\n <div class=\"mt-4 text-center\"\n *ngIf=\"(!behaviouralNotMatched || behaviouralNotMatched.length === 0) && \n (!functionalNotMatched || functionalNotMatched.length === 0) && \n (!domainNotMatched || domainNotMatched.length === 0)\">\n <div class=\"no-gaps-message\">\n <mat-icon class=\"success-icon\">check_circle</mat-icon>\n <h4>Excellent! All competencies are covered</h4>\n <p>All required competencies have been addressed by the selected\n courses.</p>\n </div>\n </div>\n\n </div>\n\n <div *ngSwitchCase=\"'behavioral'\">\n <h4>Behavioural</h4>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All behavioral competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'functional'\">\n <h4>Functional</h4>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Functional</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course</span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All functional competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'domain'\">\n <h4>Domain</h4>\n <div class=\"mt-4\" *ngIf=\"domainCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Domain</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"domainCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All domain competencies are covered by the selected\n courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchDefault>\n <p>Please select a category.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> <!-- Close main-content div -->\n\n </div>\n</div>\n\n\n<div [hidden]=\"!isPDFDownload\" class=\"gap-analysis-pdf-container\" #pdfContent>\n <div class=\"gap-analysis-pdf-header\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"logo\" />\n <h1><span>\n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.department_name?.name}}</span> \n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}}</span> \n <span *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span>\n </span></h1>\n <p class=\"subtitle\">A detailed breakdown of competencies Gap Analysis</p>\n \n </div>\n \n <div class=\"competency-snapshot\">\n <h2>Competency Snapshot</h2>\n <div class=\"snapshot-content\">\n <div class=\"circle-wrapper\">\n <svg class=\"progress-ring\" width=\"120\" height=\"120\">\n <circle class=\"progress-ring-bg\" cx=\"60\" cy=\"60\" r=\"52\" />\n <circle class=\"progress-ring-circle\" cx=\"60\" cy=\"60\" r=\"52\" />\n </svg>\n <div class=\"percentage-text\">{{overallCoverage}}<br /><span>Overall Coverage</span></div>\n </div>\n \n <div class=\"competency-container\">\n <!-- Total Competencies Box -->\n <div class=\"total-box\">\n <div class=\"title\">Total Competencies</div>\n <div class=\"count\">{{this.planData?.competencies?.length}}</div>\n </div>\n \n <!-- Progress Bars -->\n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text behavioral\">Behavioural</span>\n <span class=\"covered-text\">{{behavioralCompetencyCoveredCount}} / {{behavioralTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill behavioral\" [style.width.%]=\"(behavioralCompetencyCoveredCount / behavioralTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text functional\">Functional</span>\n <span class=\"covered-text\">{{functionalCompetencyCoveredCount}} / {{functionalTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill functional\" [style.width.%]=\"(functionalCompetencyCoveredCount / functionalTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text domain\">Domain</span>\n <span class=\"covered-text\">{{domainCompetencyCoveredCount}} / {{domainTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill domain\" [style.width.%]=\"(domainCompetencyCoveredCount / domainTotalCompetencies) * 100\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"gap-section mb-4\">\n <h2>Detailed Competency Analysis</h2>\n <div class=\"gap-box\">\n Bridge Your Competencies Gap\n <p class=\"subtitle\">Here are {{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}} key areas for development.</p>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Gap to Address <span *ngIf=\"(this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)) > 0\">({{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}})</span></p>\n \n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Covered Competencies <span>({{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}})</span></p> \n </div>\n <div class=\"gap-section mb-4\">\n \n <div class=\"green-bg\">\n <div class=\"div-green-label mb-2\">\n Congratulations!\n </div> \n <p>You have successfully covered </p>\n <p class=\"subtitle\">{{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}} key competencies, forming a strong professional foundation.</p>\n </div>\n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n {{item?.sub_theme}} \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"gap-section mb-4\">\n <h2>Recommended Courses</h2>\n </div>\n <app-gap-analysis-recommended-course [planData]=\"planData\"></app-gap-analysis-recommended-course>\n</div>\n \n\n\n<div class=\"overlay-loader\" *ngIf=\"loading && dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || 'Preparing course recommendation generation...' }}</p>\n <div class=\"progress-details\">\n <div class=\"progress-indicator\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";.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:16px;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:16px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::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:#000;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:5px}.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 .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.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;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;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;align-items:flex-start;width:100%;gap:8px}.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-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.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:16px;font-style:normal;font-weight:600;line-height:22px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.relevancy,.competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;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;width:100%;padding:1rem}.course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.course-list-item:hover{box-shadow:0 4px 8px #00000026}.course-list-item:only-child{flex:1 1 auto;max-width:800px}.checked-course-container{display:flex;width:60%}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.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;justify-content:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{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}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.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:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.header-left{flex:1}.header-actions{display:flex;align-items:center;gap:12px}.regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.regenerate-btn .mat-spinner{margin:0}.regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.close-btn:hover{background-color:#f5f5f5}.close-btn .mat-icon{font-size:20px;width:20px;height:20px}.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:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.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}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.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}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.initial-loading-container{display:flex;justify-content:center;align-items:center;min-height:400px;width:100%}.initial-loading-container .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 2rem}.initial-loading-container .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.initial-loading-container .loading-content .loading-text .main-message{font-size:16px;font-weight:600;margin-bottom:1rem;color:#1b4ca1}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:300px;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#4caf50);border-radius:4px;transition:width .3s ease-in-out}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:12px;color:#666;font-weight:500}.initial-loading-container .loading-content .loading-text .progress-details .time-estimate{font-size:12px;color:#888;font-style:italic}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.overlay-loader .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 12px #00000026}.overlay-loader .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.overlay-loader .loading-content .loading-text .main-message{margin:0 0 16px;font-size:18px;font-weight:600;text-align:center}.overlay-loader .loading-content .loading-text .progress-details{margin-top:16px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:12px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#2563eb);border-radius:4px;transition:width .5s ease-in-out}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:14px;font-weight:500;color:#1b4ca1;display:block;text-align:center}.overlay-loader .loading-content .loading-text .progress-details .time-estimate{color:#666;font-size:12px;font-style:italic;display:block;text-align:center;margin-top:8px}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.competencies-grid-3{width:33%}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.grid-list-item div{padding:5px 10px;margin:10px 0}.course-pill-container{display:flex;gap:8px}.relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.show-more-competency{display:inline-flex;align-items:center}.show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.show-more-link:hover{text-decoration:underline}.course-content{flex:1;display:flex;flex-direction:column}.course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.menu-list-item.active{background-color:#1b4ca1;color:#fff}.menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.div-count{font-family:Lato;font-size:20px;font-weight:700}.green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.list-flex{display:flex;flex-direction:row;justify-content:space-between}.all-category-list .mat-icon{vertical-align:middle}.course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.left-panel{flex:0 0 250px;font-weight:700;text-align:left}.right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.course-list-container-right-flex{display:flex}.no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;gap:0px;width:100%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:5px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}.search-container-compact{flex:0 0 auto;min-width:180px}.search-container-compact .rsearch{position:relative;display:flex;align-items:center}.search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.search-container-compact .sinput-compact{border-radius:25px;border:2px solid #ccc;padding:20px 12px 20px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.search-container-compact .sinput-compact::placeholder{color:#999}.btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.theme-filter-controls{margin-bottom:8px}.clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.no-course-card .no-course-icon{margin-bottom:20px}.no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.no-course-card .suggest-course-btn:active{transform:translateY(0)}.no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.search-and-buttons-container{flex-direction:column;align-items:stretch}.search-container-compact{min-width:auto;width:100%}.btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.course-list-container-flex{flex-direction:column}.left-panel{flex:none!important;max-height:300px}.course-list-item{flex:0 0 100%;max-width:100%}.no-course-card{padding:20px}.no-course-card .no-course-content h4{font-size:20px}.no-course-card .no-course-content p{font-size:14px}}::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.download-pdf{justify-content:end;display:flex;flex-direction:row}.gap-analysis-pdf-container{font-family:Lato;max-width:900px;margin:auto;color:#212121}.gap-analysis-pdf-header{text-align:center;margin-bottom:2rem}.gap-analysis-pdf-header .logo{height:60px;margin-bottom:.5rem}.gap-analysis-pdf-header h1{font-size:1.8rem;font-weight:600;margin:.5rem 0}.gap-analysis-pdf-header .subtitle{color:#555;font-size:.95rem}.gap-analysis-pdf-header .download-btn{background:#5e00ff;color:#fff;border:none;padding:10px 20px;border-radius:6px;margin-top:1rem;font-weight:500;cursor:pointer}.competency-snapshot{background:#fafafa;border-radius:12px;padding:2rem;margin-bottom:2rem}.competency-snapshot h2{font-size:1.4rem;font-weight:600;margin-bottom:1.5rem}.competency-snapshot .snapshot-content{display:flex;gap:2rem;align-items:center;justify-content:space-between}.competency-snapshot .snapshot-content .circle-wrapper{position:relative;width:120px;height:120px}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-bg{fill:none;stroke:#eee;stroke-width:10}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-circle{fill:none;stroke:#6c63ff;stroke-width:10;stroke-linecap:round;stroke-dasharray:326.72;stroke-dashoffset:117.6192;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .35s}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:1.4rem;text-align:center}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text span{display:block;font-size:.75rem;font-weight:400;color:#555}.competency-snapshot .snapshot-content .details{flex-grow:1}.competency-snapshot .snapshot-content .details .total-competencies{font-size:1.2rem;margin-bottom:1rem}.competency-snapshot .snapshot-content .details .bar{margin:.5rem 0;padding:.6rem 1rem;border-radius:6px;font-weight:500;display:flex;justify-content:space-between;color:#fff}.competency-snapshot .snapshot-content .details .bar.behavioral{background:#7b1fa2}.competency-snapshot .snapshot-content .details .bar.functional{background:#0288d1}.competency-snapshot .snapshot-content .details .bar.domain{background:#f57c00}.gap-section{margin-top:2rem}.gap-section h2{font-size:1.3rem;margin-bottom:1rem}.gap-section .gap-box{background:#eef1ff;border-left:5px solid #6c63ff;padding:1rem;border-radius:6px;font-weight:500;color:#333}.gap-section .green-bg{background-color:#0080001c;border-left:5px solid #2d9b2d;padding:1rem;border-radius:6px;font-weight:500;color:#006400}.competency-container{width:100%;margin:0 auto;font-family:Segoe UI,sans-serif;color:#212121;display:flex;flex-direction:column}.total-box{background:#f8f9fc;border-radius:10px;padding:1.5rem;text-align:center;border:1px solid #e0e0e0;margin-bottom:1.5rem}.total-box .title{font-size:1rem;color:#666}.total-box .count{font-size:2rem;font-weight:700;color:#111;margin-top:.5rem}.progress-group{margin-bottom:1.5rem}.progress-group .progress-label{display:flex;justify-content:space-between;margin-bottom:6px}.progress-group .progress-label .label-text{font-weight:600}.progress-group .progress-label .covered-text{font-size:.9rem;color:#444}.progress-group .progress-label .behavioral{color:#f8b861}.progress-group .progress-label .functional{color:#e24577}.progress-group .progress-label .domain{color:#7b47a4}.progress-group .progress-bar{height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden}.progress-group .progress-bar .progress-fill{height:100%;border-radius:5px;transition:width .5s ease-in-out}.progress-group .progress-bar .progress-fill.behavioral{background:#f8b861}.progress-group .progress-bar .progress-fill.functional{background:#e24577}.progress-group .progress-bar .progress-fill.domain{background:#7b47a4}.competency-card{border-radius:8px;padding:1rem 1.5rem;margin-bottom:1rem;border:1px solid transparent}.competency-card .title{font-weight:600;font-size:1.1rem;color:#222;margin-bottom:.4rem}.competency-card .subtitle{font-size:.95rem;color:#555}.competency-card .subtitle .tag{font-weight:500}.competency-card .subtitle .behavioral,.competency-card .subtitle .domain,.competency-card .subtitle .functional{color:#000}.competency-card.behavioral{background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;border-color:#f8b861}.competency-card.functional{background:linear-gradient(0deg,#e245773d 0% 100%),#fff;border-color:#e24577}.competency-card.domain{background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;border-color:#7b47a4}.disclaimer-container{margin:8px 16px 0}.disclaimer-message{background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:20px;padding:8px 16px;font-family:Lato;font-size:14px;color:#333;line-height:1.2}.disclaimer-message strong{color:#000;font-weight:600}.select-all-container{display:flex;flex-direction:row;justify-content:space-between}::ng-deep .search-and-buttons-container .mat-form-field-infix{padding:10px!important}::ng-deep .search-and-buttons-container .mat-form-field-wrapper{width:100%!important}::ng-deep .select-search-panel{border:1px solid #ccc!important;border-radius:12px!important;box-shadow:0 8px 20px #0000001f}:host ::ng-deep .mat-select-arrow-wrapper{margin-top:5px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:#ccc}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#1b4ca1;border-color:#1b4ca1!important}::ng-deep .select-search-panel .mat-option.mat-selected:not(.mat-option-disabled){background-color:#1b4ca1!important;color:#fff!important}:host ::ng-deep .mat-form-field-appearance-outline{border-radius:25px;border:1px solid #ccc}:host ::ng-deep .mat-form-field-focused .mat-form-field-appearance-outline{border-color:#1b4ca1!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start{border-radius:25px 0 0 25px;border:none!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-right:none!important;border:none!important;border-radius:0 25px 25px 0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap{border:none!important;border-radius:25px}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{background-color:transparent!important}:host ::ng-deep .search-and-buttons-container .mat-option-text{color:#fff!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: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { 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: i10.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i13.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i14.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i14.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: GapAnalysisRecommendedCourseComponent, selector: "app-gap-analysis-recommended-course", inputs: ["planData"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
|
|
5806
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GenerateCourseRecommendationComponent, selector: "app-generate-course-recommendation", viewQueries: [{ propertyName: "pdfContent", first: true, predicate: ["pdfContent"], descendants: true }], ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n \n <!-- Initial Loading Screen (for initial load and regeneration) -->\n <div class=\"initial-loading-container\" *ngIf=\"!dataLoaded || isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || (isRegeneratingWithProgress ? 'Regenerating course recommendations...' : 'Loading course recommendations...') }}</p>\n <div class=\"progress-details\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-indicator\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Main Content -->\n <div class=\"main-content\" *ngIf=\"dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"popup-header\">\n <div class=\"header-left\">\n <div class=\"heading\">Save Courses (<span>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span\n *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span></span>)</div>\n </div>\n <div class=\"header-actions\">\n <button class=\"regenerate-btn\" (click)=\"regenerateCourseRecommendations()\"\n [disabled]=\"isRegenerating\"\n mat-raised-button color=\"primary\">\n <mat-icon *ngIf=\"!isRegenerating\">refresh</mat-icon>\n <mat-spinner *ngIf=\"isRegenerating\" diameter=\"20\"></mat-spinner>\n <span>{{isRegenerating ? 'Regenerating...' : 'Regenerate Recommendations'}}</span>\n </button>\n <div class=\"cursor-pointer close-btn\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-4\">\n <mat-tab-group (selectedTabChange)=\"onOuterTabChange($event)\">\n <!-- First Main Tab -->\n <mat-tab label=\"course recommendation\">\n <!-- Nested Tabs -->\n <!-- <mat-tab-group (selectedTabChange)=\"onInnerTabChange($event)\">\n <mat-tab label=\"all\">\n\n </mat-tab>\n <mat-tab label=\"behavioural\">\n\n </mat-tab>\n <mat-tab label=\"functional\">\n\n </mat-tab>\n <mat-tab label=\"domain\">\n\n </mat-tab>\n </mat-tab-group> -->\n </mat-tab>\n\n <!-- Second Main Tab -->\n <mat-tab label=\"gap analysis\">\n <!-- <p>Gap analysis content goes here</p> -->\n </mat-tab>\n </mat-tab-group>\n <form [formGroup]=\"filterForm\" class=\"filters-container\">\n <div class=\"role-mapping-container\"\n *ngIf=\"outerTabActiveIndex === 0 && (innerTabActiveIndex === 0 || innerTabActiveIndex === 1 || innerTabActiveIndex === 2 || innerTabActiveIndex === 3 )\">\n <div class=\"container\">\n <div class=\"section-header-improved mt-3\">\n <div class=\"search-and-buttons-container\">\n <div>\n <label>Search Courses</label>\n </div> \n <div class=\"search-container-compact\">\n <div class=\"rsearch\">\n <mat-icon class=\"search-icon\">search</mat-icon>\n <input class=\"sinput-compact\" [(ngModel)]=\"searchText\"\n (input)=\"applyFilter($event.target.value);\"\n placeholder=\"Search Courses\" type=\"text\">\n </div>\n </div>\n \n </div>\n \n\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Competency</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.competency?.length ? '' : 'Competency' }}\n </mat-label>\n \n <mat-select\n formControlName=\"competency\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Competency\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'competency')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredCompetency\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div> \n \n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Rating</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.rating?.length ? '' : 'Rating' }}\n </mat-label>\n \n <mat-select\n formControlName=\"rating\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Reatings\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'rating')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredRatings\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n \n \n \n \n </div>\n <div class=\"section-header-improved-sec-2 mt-4\">\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Language</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.language?.length ? '' : 'Language' }}\n </mat-label>\n \n <mat-select\n formControlName=\"language\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Languages\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'language')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredLanguages\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Duration</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.duration?.length ? '' : 'Duration' }}\n </mat-label>\n \n <mat-select\n formControlName=\"duration\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Duration\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'duration')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredDurations\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Provider</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.provider?.length ? '' : 'Provider' }}\n </mat-label>\n \n <mat-select\n formControlName=\"provider\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Provider\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'provider')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredProviders\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div style=\"margin-top: 45px;margin-left: 20px;\">\n <input class=\"btn-active\" type=\"button\" value=\"Reset All Filters\"\n (click)=\"resetFilters()\" />\n </div>\n </div>\n <div class=\"mt-4\">\n <div style=\"font-size:16px;font-weight:bold;color:#000\">\n Filtered Course Count : {{filterdCourses?.length}}\n </div>\n </div>\n <div class=\"mt-5 sub-heading select-all-container\" *ngIf=\"filterdCourses?.length\">\n <div style=\"margin-left: 16px;\">\n <mat-checkbox [checked]=\"false\" (change)=\"selectAllCourses($event)\">Select All\n Courses</mat-checkbox>\n </div>\n <div class=\"btn-group-compact\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add More Course From iGOT\"\n (click)=\"suggestMoreCourses()\" />\n </div>\n <div class=\"pl-2\">\n <input [disabled]=\"selectFilterCourses?.length > 0 ? false : true\"\n [ngClass]=\"selectFilterCourses?.length > 0 ? 'btn-active' : 'btn-disable'\"\n type=\"button\" [value]=\"mode === 'add' ? 'Save Courses' : 'Update Courses'\"\n (click)=\"saveCourses()\" />\n </div>\n </div>\n </div>\n <!-- <div class=\"disclaimer-container mt-2\" *ngIf=\"filterdCourses?.length\">\n <div class=\"disclaimer-message mt-4\">\n <strong>Disclaimer:</strong> Please verify the public course URL before adding it to the plan.\n </div>\n </div> -->\n <div class=\"mt-2\">\n\n <div class=\"course-list-container\">\n <div\n [ngClass]=\"innerTabActiveIndex > 0 ? 'course-list-container-flex':'course-list-container-right-flex' \">\n <div *ngIf=\"innerTabActiveIndex > 0\"\n [ngClass]=\"innerTabActiveIndex > 0 ? 'left-panel':''\">\n <ng-container *ngIf=\"innerTabActiveIndex === 1\">\n <div class=\"sub-heading\">\n <p>Competencies in Behavioural</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 2\">\n <div class=\"sub-heading\">\n <p>Competencies in Functional</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 3\">\n <div class=\"sub-heading\">\n <p>Competencies in Domain</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n </div>\n <div [ngClass]=\"innerTabActiveIndex > 0 ? 'right-panel':'right-panel-flex'\">\n <!-- No Course Found Message in Right Panel -->\n <div class=\"no-course-found-container\"\n *ngIf=\"filterdCourses?.length === 0 && selectedThemeFilter\">\n <div class=\"no-course-card\">\n <div class=\"no-course-icon\">\n <mat-icon>search_off</mat-icon>\n </div>\n <div class=\"no-course-content\">\n <h4>No Courses Found</h4>\n <p>No courses found for the selected theme:\n <strong>{{selectedThemeFilter}}</strong></p>\n <p>Would you like to add a course for this competency?</p>\n <button class=\"suggest-course-btn\"\n (click)=\"addCourseForSelectedTheme()\">\n <mat-icon>add_circle</mat-icon>\n Add Course\n </button>\n </div>\n </div>\n </div>\n\n <!-- Courses List -->\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n\n <div class=\"course-content\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n <div>\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\"\n (change)=\"selectedFilterCourses($event, item)\"></mat-checkbox>\n </div>\n <div class=\"ml-2\">\n <div class=\"course-pill-container\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img\n src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- <div>\n <div class=\"ai-recommened-pill\">\n <div class=\"ai-recommened-pill-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n\n <span *ngIf=\"item?.rationale\">AI Recommended\n <span *ngIf=\"item?.is_public\"> - Public</span>\n <span *ngIf=\"!item?.is_public\"> - iGOT</span>\n </span>\n <span *ngIf=\"!item?.rationale\">Manually Suggested - iGOT</span>\n\n </div>\n </div>\n </div> -->\n <div *ngIf=\"item?.rationale && !item?.is_public\">\n <div class=\"ai-recommened-pill-green\">\n <div class=\"ai-recommened-pill-green-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"item?.rationale && item?.is_public\">\n <div class=\"ai-recommened-pill-public\">\n <div class=\"ai-recommened-pill-public-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - Public </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!item?.rationale\">\n <div class=\"ai-recommened-pill-gray\">\n <div class=\"ai-recommened-pill-gray-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>Manually Suggested - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"course-title mt-3 cursor-pointer\" (click)=\"redirectToToc(item)\">\n <span *ngIf=\"item?.course\">{{item?.course}}</span>\n <!-- <span *ngIf=\"item?.name\">{{item?.name}}****</span> -->\n <span style=\"margin-left:10px;\" (click)=\"redirectToToc(item)\"><img\n height=\"18px\" width=\"18px\"\n src=\"assets/icons/redirect.png\" /></span>\n </div>\n <div class=\"course-desc mt-2\">\n <!-- <span *ngIf=\"item?.rationale\">{{item?.rationale}}</span> -->\n <span *ngIf=\"item?.description\">{{item?.description}}</span>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioural Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',i)\">\n {{ isExpanded('Behavioural',i) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Functional',i)?.length\">\n <div class=\"competency-sub-heading\">Functional Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Functional',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',i)\">\n {{ isExpanded('Functional',i) ? 'Show Less' : '+' +\n getRemainingCount('Functional',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',i)?.length\">\n <div class=\"competency-sub-heading\">Domain Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Domain',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',i)\" class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n\n\n </div>\n\n <!-- Relevancy and Duration section -->\n <div class=\"course-footer\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">{{item?.relevancy}}%</div>\n </div>\n </div>\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Duration</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">\n <span\n *ngIf=\"item?.duration\">{{getDuration(item?.duration)}}</span>\n <span *ngIf=\"!(item?.duration)\">N/A</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- General No Data Message (only when no theme filter is active) -->\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 && !selectedThemeFilter\">\n <p>No Data Found</p>\n </div>\n </div>\n </div>\n </form>\n <div class=\"role-mapping-container\" *ngIf=\"outerTabActiveIndex === 1\">\n <div id=\"gap-analysis-content\">\n\n <div class=\"download-pdf mt-4 mb-2\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\" />\n </div>\n </div>\n <div>\n <!-- <div *ngIf=\"isPDFDownload\">\n <div class=\"pdf-heading\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}} <span\n *ngIf=\"planData?.designation_name \">_{{planData?.designation_name}}_Gap_Analysis</span>\n </div>\n </div> -->\n <div class=\"d-flex vh-100\" [ngClass]=\"isPDFDownload ? 'mt-4':''\">\n <!-- Sidebar -->\n <div class=\"d-flex flex-column p-3 bg-light border-end\" style=\"width: 250px;\">\n <h5 class=\"mb-4\">Analyze by Category</h5>\n <button *ngFor=\"let item of menuItems\"\n class=\"btn btn-outline-primary mb-2 text-start menu-list-item\"\n [class.active]=\"selectedCategory === item.key\" (click)=\"selectCategory(item.key)\">\n {{ item.label }}\n </button>\n </div>\n\n <!-- Main Content -->\n <div class=\"flex-grow-1 p-4\">\n <div class=\"d-flex justify-content-between gap-3 \">\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p>Competencies Covered</p>\n </div>\n <div class=\"div-count\">{{competencyCoveredCount}}</div>\n </div>\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p *ngIf=\"selectedCategory === 'all'\">Total Competencies</p>\n <p *ngIf=\"selectedCategory === 'behavioral'\">Total Behavioural Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'functional'\">Total Functional Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'domain'\">Total Domain Competencies</p>\n </div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'all'\">\n {{this.planData?.competencies?.length}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainTotalCompetencies}}</div>\n </div>\n <div class=\"p-3 green-bg\">\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'all'\">Overall Coverage\n </div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'behavioral'\">\n Behavioural Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'functional'\">\n Functional Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'domain'\">Domain\n Coverage</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'all'\">\n {{overallCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainCoverage}}</div>\n </div>\n </div>\n <div class=\"mt-4 all-category-list\" [ngSwitch]=\"selectedCategory\">\n <div *ngSwitchCase=\"'all'\">\n <h4>All Categories</h4>\n\n <!-- Show Behavioural section only if there are unmatched behavioural competencies -->\n <div class=\"mt-4\"\n *ngIf=\"behaviouralNotMatched && behaviouralNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show Functional section only if there are unmatched functional competencies -->\n <div class=\"mt-4\"\n *ngIf=\"functionalNotMatched && functionalNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Functional</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show Domain section only if there are unmatched domain competencies -->\n <div class=\"mt-4\" *ngIf=\"domainNotMatched && domainNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Domain</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show message when all competencies are covered -->\n <div class=\"mt-4 text-center\"\n *ngIf=\"(!behaviouralNotMatched || behaviouralNotMatched.length === 0) && \n (!functionalNotMatched || functionalNotMatched.length === 0) && \n (!domainNotMatched || domainNotMatched.length === 0)\">\n <div class=\"no-gaps-message\">\n <mat-icon class=\"success-icon\">check_circle</mat-icon>\n <h4>Excellent! All competencies are covered</h4>\n <p>All required competencies have been addressed by the selected\n courses.</p>\n </div>\n </div>\n\n </div>\n\n <div *ngSwitchCase=\"'behavioral'\">\n <h4>Behavioural</h4>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All behavioral competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'functional'\">\n <h4>Functional</h4>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Functional</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course</span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All functional competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'domain'\">\n <h4>Domain</h4>\n <div class=\"mt-4\" *ngIf=\"domainCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Domain</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"domainCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All domain competencies are covered by the selected\n courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchDefault>\n <p>Please select a category.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> <!-- Close main-content div -->\n\n </div>\n</div>\n\n\n<div [hidden]=\"!isPDFDownload\" class=\"gap-analysis-pdf-container\" #pdfContent>\n <div class=\"gap-analysis-pdf-header\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"logo\" />\n <h1><span>\n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.department_name?.name}}</span> \n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}}</span> \n <span *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span>\n </span></h1>\n <p class=\"subtitle\">A detailed breakdown of competencies Gap Analysis</p>\n \n </div>\n \n <div class=\"competency-snapshot\">\n <h2>Competency Snapshot</h2>\n <div class=\"snapshot-content\">\n <div class=\"circle-wrapper\">\n <svg class=\"progress-ring\" width=\"120\" height=\"120\">\n <circle class=\"progress-ring-bg\" cx=\"60\" cy=\"60\" r=\"52\" />\n <circle class=\"progress-ring-circle\" cx=\"60\" cy=\"60\" r=\"52\" />\n </svg>\n <div class=\"percentage-text\">{{overallCoverage}}<br /><span>Overall Coverage</span></div>\n </div>\n \n <div class=\"competency-container\">\n <!-- Total Competencies Box -->\n <div class=\"total-box\">\n <div class=\"title\">Total Competencies</div>\n <div class=\"count\">{{this.planData?.competencies?.length}}</div>\n </div>\n \n <!-- Progress Bars -->\n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text behavioral\">Behavioural</span>\n <span class=\"covered-text\">{{behavioralCompetencyCoveredCount}} / {{behavioralTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill behavioral\" [style.width.%]=\"(behavioralCompetencyCoveredCount / behavioralTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text functional\">Functional</span>\n <span class=\"covered-text\">{{functionalCompetencyCoveredCount}} / {{functionalTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill functional\" [style.width.%]=\"(functionalCompetencyCoveredCount / functionalTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text domain\">Domain</span>\n <span class=\"covered-text\">{{domainCompetencyCoveredCount}} / {{domainTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill domain\" [style.width.%]=\"(domainCompetencyCoveredCount / domainTotalCompetencies) * 100\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"gap-section mb-4\">\n <h2>Detailed Competency Analysis</h2>\n <div class=\"gap-box\">\n Bridge Your Competencies Gap\n <p class=\"subtitle\">Here are {{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}} key areas for development.</p>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Gap to Address <span *ngIf=\"(this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)) > 0\">({{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}})</span></p>\n \n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Covered Competencies <span>({{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}})</span></p> \n </div>\n <div class=\"gap-section mb-4\">\n \n <div class=\"green-bg\">\n <div class=\"div-green-label mb-2\">\n Congratulations!\n </div> \n <p>You have successfully covered </p>\n <p class=\"subtitle\">{{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}} key competencies, forming a strong professional foundation.</p>\n </div>\n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n {{item?.sub_theme}} \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"gap-section mb-4\">\n <h2>Recommended Courses</h2>\n </div>\n <app-gap-analysis-recommended-course [planData]=\"planData\"></app-gap-analysis-recommended-course>\n</div>\n \n\n\n<div class=\"overlay-loader\" *ngIf=\"loading && dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || 'Preparing course recommendation generation...' }}</p>\n <div class=\"progress-details\">\n <div class=\"progress-indicator\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";.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:16px;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:16px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::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:#000;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:5px}.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 .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.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;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;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;align-items:flex-start;width:100%;gap:8px}.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-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.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:16px;font-style:normal;font-weight:600;line-height:22px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.relevancy,.competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;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;width:100%;padding:1rem}.course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.course-list-item:hover{box-shadow:0 4px 8px #00000026}.course-list-item:only-child{flex:1 1 auto;max-width:800px}.checked-course-container{display:flex;width:60%}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.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;justify-content:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{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}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.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:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.header-left{flex:1}.header-actions{display:flex;align-items:center;gap:12px}.regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.regenerate-btn .mat-spinner{margin:0}.regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.close-btn:hover{background-color:#f5f5f5}.close-btn .mat-icon{font-size:20px;width:20px;height:20px}.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:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.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}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.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}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.initial-loading-container{display:flex;justify-content:center;align-items:center;min-height:400px;width:100%}.initial-loading-container .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 2rem}.initial-loading-container .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.initial-loading-container .loading-content .loading-text .main-message{font-size:16px;font-weight:600;margin-bottom:1rem;color:#1b4ca1}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:300px;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#4caf50);border-radius:4px;transition:width .3s ease-in-out}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:12px;color:#666;font-weight:500}.initial-loading-container .loading-content .loading-text .progress-details .time-estimate{font-size:12px;color:#888;font-style:italic}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.overlay-loader .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 12px #00000026}.overlay-loader .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.overlay-loader .loading-content .loading-text .main-message{margin:0 0 16px;font-size:18px;font-weight:600;text-align:center}.overlay-loader .loading-content .loading-text .progress-details{margin-top:16px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:12px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#2563eb);border-radius:4px;transition:width .5s ease-in-out}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:14px;font-weight:500;color:#1b4ca1;display:block;text-align:center}.overlay-loader .loading-content .loading-text .progress-details .time-estimate{color:#666;font-size:12px;font-style:italic;display:block;text-align:center;margin-top:8px}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.competencies-grid-3{width:33%}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.grid-list-item div{padding:5px 10px;margin:10px 0}.course-pill-container{display:flex;gap:8px}.relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.show-more-competency{display:inline-flex;align-items:center}.show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.show-more-link:hover{text-decoration:underline}.course-content{flex:1;display:flex;flex-direction:column}.course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.menu-list-item.active{background-color:#1b4ca1;color:#fff}.menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.div-count{font-family:Lato;font-size:20px;font-weight:700}.green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.list-flex{display:flex;flex-direction:row;justify-content:space-between}.all-category-list .mat-icon{vertical-align:middle}.course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.left-panel{flex:0 0 250px;font-weight:700;text-align:left}.right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.course-list-container-right-flex{display:flex}.no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;gap:0px;width:100%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:5px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}.search-container-compact{flex:0 0 auto;min-width:180px}.search-container-compact .rsearch{position:relative;display:flex;align-items:center}.search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.search-container-compact .sinput-compact{border-radius:25px;border:2px solid #ccc;padding:20px 12px 20px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.search-container-compact .sinput-compact::placeholder{color:#999}.btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.theme-filter-controls{margin-bottom:8px}.clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.no-course-card .no-course-icon{margin-bottom:20px}.no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.no-course-card .suggest-course-btn:active{transform:translateY(0)}.no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.search-and-buttons-container{flex-direction:column;align-items:stretch}.search-container-compact{min-width:auto;width:100%}.btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.course-list-container-flex{flex-direction:column}.left-panel{flex:none!important;max-height:300px}.course-list-item{flex:0 0 100%;max-width:100%}.no-course-card{padding:20px}.no-course-card .no-course-content h4{font-size:20px}.no-course-card .no-course-content p{font-size:14px}}::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.download-pdf{justify-content:end;display:flex;flex-direction:row}.gap-analysis-pdf-container{font-family:Lato;max-width:900px;margin:auto;color:#212121}.gap-analysis-pdf-header{text-align:center;margin-bottom:2rem}.gap-analysis-pdf-header .logo{height:60px;margin-bottom:.5rem}.gap-analysis-pdf-header h1{font-size:1.8rem;font-weight:600;margin:.5rem 0}.gap-analysis-pdf-header .subtitle{color:#555;font-size:.95rem}.gap-analysis-pdf-header .download-btn{background:#5e00ff;color:#fff;border:none;padding:10px 20px;border-radius:6px;margin-top:1rem;font-weight:500;cursor:pointer}.competency-snapshot{background:#fafafa;border-radius:12px;padding:2rem;margin-bottom:2rem}.competency-snapshot h2{font-size:1.4rem;font-weight:600;margin-bottom:1.5rem}.competency-snapshot .snapshot-content{display:flex;gap:2rem;align-items:center;justify-content:space-between}.competency-snapshot .snapshot-content .circle-wrapper{position:relative;width:120px;height:120px}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-bg{fill:none;stroke:#eee;stroke-width:10}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-circle{fill:none;stroke:#6c63ff;stroke-width:10;stroke-linecap:round;stroke-dasharray:326.72;stroke-dashoffset:117.6192;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .35s}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:1.4rem;text-align:center}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text span{display:block;font-size:.75rem;font-weight:400;color:#555}.competency-snapshot .snapshot-content .details{flex-grow:1}.competency-snapshot .snapshot-content .details .total-competencies{font-size:1.2rem;margin-bottom:1rem}.competency-snapshot .snapshot-content .details .bar{margin:.5rem 0;padding:.6rem 1rem;border-radius:6px;font-weight:500;display:flex;justify-content:space-between;color:#fff}.competency-snapshot .snapshot-content .details .bar.behavioral{background:#7b1fa2}.competency-snapshot .snapshot-content .details .bar.functional{background:#0288d1}.competency-snapshot .snapshot-content .details .bar.domain{background:#f57c00}.gap-section{margin-top:2rem}.gap-section h2{font-size:1.3rem;margin-bottom:1rem}.gap-section .gap-box{background:#eef1ff;border-left:5px solid #6c63ff;padding:1rem;border-radius:6px;font-weight:500;color:#333}.gap-section .green-bg{background-color:#0080001c;border-left:5px solid #2d9b2d;padding:1rem;border-radius:6px;font-weight:500;color:#006400}.competency-container{width:100%;margin:0 auto;font-family:Segoe UI,sans-serif;color:#212121;display:flex;flex-direction:column}.total-box{background:#f8f9fc;border-radius:10px;padding:1.5rem;text-align:center;border:1px solid #e0e0e0;margin-bottom:1.5rem}.total-box .title{font-size:1rem;color:#666}.total-box .count{font-size:2rem;font-weight:700;color:#111;margin-top:.5rem}.progress-group{margin-bottom:1.5rem}.progress-group .progress-label{display:flex;justify-content:space-between;margin-bottom:6px}.progress-group .progress-label .label-text{font-weight:600}.progress-group .progress-label .covered-text{font-size:.9rem;color:#444}.progress-group .progress-label .behavioral{color:#f8b861}.progress-group .progress-label .functional{color:#e24577}.progress-group .progress-label .domain{color:#7b47a4}.progress-group .progress-bar{height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden}.progress-group .progress-bar .progress-fill{height:100%;border-radius:5px;transition:width .5s ease-in-out}.progress-group .progress-bar .progress-fill.behavioral{background:#f8b861}.progress-group .progress-bar .progress-fill.functional{background:#e24577}.progress-group .progress-bar .progress-fill.domain{background:#7b47a4}.competency-card{border-radius:8px;padding:1rem 1.5rem;margin-bottom:1rem;border:1px solid transparent}.competency-card .title{font-weight:600;font-size:1.1rem;color:#222;margin-bottom:.4rem}.competency-card .subtitle{font-size:.95rem;color:#555}.competency-card .subtitle .tag{font-weight:500}.competency-card .subtitle .behavioral,.competency-card .subtitle .domain,.competency-card .subtitle .functional{color:#000}.competency-card.behavioral{background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;border-color:#f8b861}.competency-card.functional{background:linear-gradient(0deg,#e245773d 0% 100%),#fff;border-color:#e24577}.competency-card.domain{background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;border-color:#7b47a4}.disclaimer-container{margin:8px 16px 0}.disclaimer-message{background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:20px;padding:8px 16px;font-family:Lato;font-size:14px;color:#333;line-height:1.2}.disclaimer-message strong{color:#000;font-weight:600}.select-all-container{display:flex;flex-direction:row;justify-content:space-between}::ng-deep .search-and-buttons-container .mat-form-field-infix{padding:10px!important}::ng-deep .search-and-buttons-container .mat-form-field-wrapper{width:100%!important}::ng-deep .select-search-panel{border:1px solid #ccc!important;border-radius:12px!important;box-shadow:0 8px 20px #0000001f}:host ::ng-deep .mat-select-arrow-wrapper{margin-top:5px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:#ccc}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#1b4ca1;border-color:#1b4ca1!important}::ng-deep .select-search-panel .mat-option.mat-selected:not(.mat-option-disabled){background-color:#1b4ca1!important;color:#fff!important}:host ::ng-deep .mat-form-field-appearance-outline{border-radius:25px;border:1px solid #ccc}:host ::ng-deep .mat-form-field-focused .mat-form-field-appearance-outline{border-color:#1b4ca1!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start{border-radius:25px 0 0 25px;border:none!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-right:none!important;border:none!important;border-radius:0 25px 25px 0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap{border:none!important;border-radius:25px}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{background-color:transparent!important}:host ::ng-deep .search-and-buttons-container .mat-option-text{color:#fff!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: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { 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: i10.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i13.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i14.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i14.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: GapAnalysisRecommendedCourseComponent, selector: "app-gap-analysis-recommended-course", inputs: ["planData"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
|
|
5806
5807
|
}
|
|
5807
5808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GenerateCourseRecommendationComponent, decorators: [{
|
|
5808
5809
|
type: Component,
|
|
5809
|
-
args: [{ selector: 'app-generate-course-recommendation', template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n \n <!-- Initial Loading Screen (for initial load and regeneration) -->\n <div class=\"initial-loading-container\" *ngIf=\"!dataLoaded || isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || (isRegeneratingWithProgress ? 'Regenerating course recommendations...' : 'Loading course recommendations...') }}</p>\n <div class=\"progress-details\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-indicator\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Main Content -->\n <div class=\"main-content\" *ngIf=\"dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"popup-header\">\n <div class=\"header-left\">\n <div class=\"heading\">Save Courses (<span>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span\n *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span></span>)</div>\n </div>\n <div class=\"header-actions\">\n <button class=\"regenerate-btn\" (click)=\"regenerateCourseRecommendations()\"\n [disabled]=\"isRegenerating\"\n mat-raised-button color=\"primary\">\n <mat-icon *ngIf=\"!isRegenerating\">refresh</mat-icon>\n <mat-spinner *ngIf=\"isRegenerating\" diameter=\"20\"></mat-spinner>\n <span>{{isRegenerating ? 'Regenerating...' : 'Regenerate Recommendations'}}</span>\n </button>\n <div class=\"cursor-pointer close-btn\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-4\">\n <mat-tab-group (selectedTabChange)=\"onOuterTabChange($event)\">\n <!-- First Main Tab -->\n <mat-tab label=\"course recommendation\">\n <!-- Nested Tabs -->\n <!-- <mat-tab-group (selectedTabChange)=\"onInnerTabChange($event)\">\n <mat-tab label=\"all\">\n\n </mat-tab>\n <mat-tab label=\"behavioural\">\n\n </mat-tab>\n <mat-tab label=\"functional\">\n\n </mat-tab>\n <mat-tab label=\"domain\">\n\n </mat-tab>\n </mat-tab-group> -->\n </mat-tab>\n\n <!-- Second Main Tab -->\n <mat-tab label=\"gap analysis\">\n <!-- <p>Gap analysis content goes here</p> -->\n </mat-tab>\n </mat-tab-group>\n <form [formGroup]=\"filterForm\" class=\"filters-container\">\n <div class=\"role-mapping-container\"\n *ngIf=\"outerTabActiveIndex === 0 && (innerTabActiveIndex === 0 || innerTabActiveIndex === 1 || innerTabActiveIndex === 2 || innerTabActiveIndex === 3 )\">\n <div class=\"container\">\n <div class=\"section-header-improved mt-3\">\n <div class=\"search-and-buttons-container\">\n <div>\n <label>Search Courses</label>\n </div> \n <div class=\"search-container-compact\">\n <div class=\"rsearch\">\n <mat-icon class=\"search-icon\">search</mat-icon>\n <input class=\"sinput-compact\" [(ngModel)]=\"searchText\"\n (input)=\"applyFilter($event.target.value);\"\n placeholder=\"Search Courses\" type=\"text\">\n </div>\n </div>\n \n </div>\n \n\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Competency</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.competency?.length ? '' : 'Competency' }}\n </mat-label>\n \n <mat-select\n formControlName=\"competency\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Competency\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'competency')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredCompetency\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div> \n \n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Rating</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.rating?.length ? '' : 'Rating' }}\n </mat-label>\n \n <mat-select\n formControlName=\"rating\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Reatings\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'rating')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredRatings\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n \n \n \n \n </div>\n <div class=\"section-header-improved-sec-2 mt-4\">\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Language</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.language?.length ? '' : 'Language' }}\n </mat-label>\n \n <mat-select\n formControlName=\"language\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Languages\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'language')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredLanguages\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Duration</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.duration?.length ? '' : 'Duration' }}\n </mat-label>\n \n <mat-select\n formControlName=\"duration\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Duration\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'duration')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredDurations\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Provider</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.provider?.length ? '' : 'Provider' }}\n </mat-label>\n \n <mat-select\n formControlName=\"provider\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Provider\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'provider')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredProviders\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div style=\"margin-top: 45px;margin-left: 20px;\">\n <input class=\"btn-active\" type=\"button\" value=\"Reset All Filters\"\n (click)=\"resetFilters()\" />\n </div>\n </div>\n <div class=\"mt-4\">\n <div style=\"font-size:16px;font-weight:bold;color:#000\">\n Filtered Course Count : {{filterdCourses?.length}}\n </div>\n </div>\n <div class=\"mt-5 sub-heading select-all-container\" *ngIf=\"filterdCourses?.length\">\n <div style=\"margin-left: 16px;\">\n <mat-checkbox [checked]=\"false\" (change)=\"selectAllCourses($event)\">Select All\n Courses</mat-checkbox>\n </div>\n <div class=\"btn-group-compact\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add More Course From iGOT\"\n (click)=\"suggestMoreCourses()\" />\n </div>\n <div class=\"pl-2\">\n <input [disabled]=\"selectFilterCourses?.length > 0 ? false : true\"\n [ngClass]=\"selectFilterCourses?.length > 0 ? 'btn-active' : 'btn-disable'\"\n type=\"button\" [value]=\"mode === 'add' ? 'Save Courses' : 'Update Courses'\"\n (click)=\"saveCourses()\" />\n </div>\n </div>\n </div>\n <div class=\"disclaimer-container mt-2\" *ngIf=\"filterdCourses?.length\">\n <div class=\"disclaimer-message mt-4\">\n <strong>Disclaimer:</strong> Please verify the public course URL before adding it to the plan.\n </div>\n </div>\n <div class=\"mt-2\">\n\n <div class=\"course-list-container\">\n <div\n [ngClass]=\"innerTabActiveIndex > 0 ? 'course-list-container-flex':'course-list-container-right-flex' \">\n <div *ngIf=\"innerTabActiveIndex > 0\"\n [ngClass]=\"innerTabActiveIndex > 0 ? 'left-panel':''\">\n <ng-container *ngIf=\"innerTabActiveIndex === 1\">\n <div class=\"sub-heading\">\n <p>Competencies in Behavioural</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 2\">\n <div class=\"sub-heading\">\n <p>Competencies in Functional</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 3\">\n <div class=\"sub-heading\">\n <p>Competencies in Domain</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n </div>\n <div [ngClass]=\"innerTabActiveIndex > 0 ? 'right-panel':'right-panel-flex'\">\n <!-- No Course Found Message in Right Panel -->\n <div class=\"no-course-found-container\"\n *ngIf=\"filterdCourses?.length === 0 && selectedThemeFilter\">\n <div class=\"no-course-card\">\n <div class=\"no-course-icon\">\n <mat-icon>search_off</mat-icon>\n </div>\n <div class=\"no-course-content\">\n <h4>No Courses Found</h4>\n <p>No courses found for the selected theme:\n <strong>{{selectedThemeFilter}}</strong></p>\n <p>Would you like to add a course for this competency?</p>\n <button class=\"suggest-course-btn\"\n (click)=\"addCourseForSelectedTheme()\">\n <mat-icon>add_circle</mat-icon>\n Add Course\n </button>\n </div>\n </div>\n </div>\n\n <!-- Courses List -->\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n\n <div class=\"course-content\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n <div>\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\"\n (change)=\"selectedFilterCourses($event, item)\"></mat-checkbox>\n </div>\n <div class=\"ml-2\">\n <div class=\"course-pill-container\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img\n src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- <div>\n <div class=\"ai-recommened-pill\">\n <div class=\"ai-recommened-pill-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n\n <span *ngIf=\"item?.rationale\">AI Recommended\n <span *ngIf=\"item?.is_public\"> - Public</span>\n <span *ngIf=\"!item?.is_public\"> - iGOT</span>\n </span>\n <span *ngIf=\"!item?.rationale\">Manually Suggested - iGOT</span>\n\n </div>\n </div>\n </div> -->\n <div *ngIf=\"item?.rationale && !item?.is_public\">\n <div class=\"ai-recommened-pill-green\">\n <div class=\"ai-recommened-pill-green-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"item?.rationale && item?.is_public\">\n <div class=\"ai-recommened-pill-public\">\n <div class=\"ai-recommened-pill-public-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - Public </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!item?.rationale\">\n <div class=\"ai-recommened-pill-gray\">\n <div class=\"ai-recommened-pill-gray-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>Manually Suggested - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"course-title mt-3 cursor-pointer\" (click)=\"redirectToToc(item)\">\n <span *ngIf=\"item?.course\">{{item?.course}}</span>\n <!-- <span *ngIf=\"item?.name\">{{item?.name}}****</span> -->\n <span style=\"margin-left:10px;\" (click)=\"redirectToToc(item)\"><img\n height=\"18px\" width=\"18px\"\n src=\"assets/icons/redirect.png\" /></span>\n </div>\n <div class=\"course-desc mt-2\">\n <!-- <span *ngIf=\"item?.rationale\">{{item?.rationale}}</span> -->\n <span *ngIf=\"item?.description\">{{item?.description}}</span>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioural Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',i)\">\n {{ isExpanded('Behavioural',i) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Functional',i)?.length\">\n <div class=\"competency-sub-heading\">Functional Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Functional',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',i)\">\n {{ isExpanded('Functional',i) ? 'Show Less' : '+' +\n getRemainingCount('Functional',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',i)?.length\">\n <div class=\"competency-sub-heading\">Domain Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Domain',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',i)\" class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n\n\n </div>\n\n <!-- Relevancy and Duration section -->\n <div class=\"course-footer\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">{{item?.relevancy}}%</div>\n </div>\n </div>\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Duration</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">\n <span\n *ngIf=\"item?.duration\">{{getDuration(item?.duration)}}</span>\n <span *ngIf=\"!(item?.duration)\">N/A</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- General No Data Message (only when no theme filter is active) -->\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 && !selectedThemeFilter\">\n <p>No Data Found</p>\n </div>\n </div>\n </div>\n </form>\n <div class=\"role-mapping-container\" *ngIf=\"outerTabActiveIndex === 1\">\n <div id=\"gap-analysis-content\">\n\n <div class=\"download-pdf mt-4 mb-2\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\" />\n </div>\n </div>\n <div>\n <!-- <div *ngIf=\"isPDFDownload\">\n <div class=\"pdf-heading\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}} <span\n *ngIf=\"planData?.designation_name \">_{{planData?.designation_name}}_Gap_Analysis</span>\n </div>\n </div> -->\n <div class=\"d-flex vh-100\" [ngClass]=\"isPDFDownload ? 'mt-4':''\">\n <!-- Sidebar -->\n <div class=\"d-flex flex-column p-3 bg-light border-end\" style=\"width: 250px;\">\n <h5 class=\"mb-4\">Analyze by Category</h5>\n <button *ngFor=\"let item of menuItems\"\n class=\"btn btn-outline-primary mb-2 text-start menu-list-item\"\n [class.active]=\"selectedCategory === item.key\" (click)=\"selectCategory(item.key)\">\n {{ item.label }}\n </button>\n </div>\n\n <!-- Main Content -->\n <div class=\"flex-grow-1 p-4\">\n <div class=\"d-flex justify-content-between gap-3 \">\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p>Competencies Covered</p>\n </div>\n <div class=\"div-count\">{{competencyCoveredCount}}</div>\n </div>\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p *ngIf=\"selectedCategory === 'all'\">Total Competencies</p>\n <p *ngIf=\"selectedCategory === 'behavioral'\">Total Behavioural Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'functional'\">Total Functional Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'domain'\">Total Domain Competencies</p>\n </div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'all'\">\n {{this.planData?.competencies?.length}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainTotalCompetencies}}</div>\n </div>\n <div class=\"p-3 green-bg\">\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'all'\">Overall Coverage\n </div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'behavioral'\">\n Behavioural Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'functional'\">\n Functional Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'domain'\">Domain\n Coverage</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'all'\">\n {{overallCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainCoverage}}</div>\n </div>\n </div>\n <div class=\"mt-4 all-category-list\" [ngSwitch]=\"selectedCategory\">\n <div *ngSwitchCase=\"'all'\">\n <h4>All Categories</h4>\n\n <!-- Show Behavioural section only if there are unmatched behavioural competencies -->\n <div class=\"mt-4\"\n *ngIf=\"behaviouralNotMatched && behaviouralNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div>\n </div>\n </div>\n </div>\n\n <!-- Show Functional section only if there are unmatched functional competencies -->\n <div class=\"mt-4\"\n *ngIf=\"functionalNotMatched && functionalNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Functional</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div>\n </div>\n </div>\n </div>\n\n <!-- Show Domain section only if there are unmatched domain competencies -->\n <div class=\"mt-4\" *ngIf=\"domainNotMatched && domainNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Domain</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div>\n </div>\n </div>\n </div>\n\n <!-- Show message when all competencies are covered -->\n <div class=\"mt-4 text-center\"\n *ngIf=\"(!behaviouralNotMatched || behaviouralNotMatched.length === 0) && \n (!functionalNotMatched || functionalNotMatched.length === 0) && \n (!domainNotMatched || domainNotMatched.length === 0)\">\n <div class=\"no-gaps-message\">\n <mat-icon class=\"success-icon\">check_circle</mat-icon>\n <h4>Excellent! All competencies are covered</h4>\n <p>All required competencies have been addressed by the selected\n courses.</p>\n </div>\n </div>\n\n </div>\n\n <div *ngSwitchCase=\"'behavioral'\">\n <h4>Behavioural</h4>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All behavioral competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'functional'\">\n <h4>Functional</h4>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Functional</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course</span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All functional competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'domain'\">\n <h4>Domain</h4>\n <div class=\"mt-4\" *ngIf=\"domainCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Domain</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"domainCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All domain competencies are covered by the selected\n courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchDefault>\n <p>Please select a category.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> <!-- Close main-content div -->\n\n </div>\n</div>\n\n\n<div [hidden]=\"!isPDFDownload\" class=\"gap-analysis-pdf-container\" #pdfContent>\n <div class=\"gap-analysis-pdf-header\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"logo\" />\n <h1><span>\n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.department_name?.name}}</span> \n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}}</span> \n <span *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span>\n </span></h1>\n <p class=\"subtitle\">A detailed breakdown of competencies Gap Analysis</p>\n \n </div>\n \n <div class=\"competency-snapshot\">\n <h2>Competency Snapshot</h2>\n <div class=\"snapshot-content\">\n <div class=\"circle-wrapper\">\n <svg class=\"progress-ring\" width=\"120\" height=\"120\">\n <circle class=\"progress-ring-bg\" cx=\"60\" cy=\"60\" r=\"52\" />\n <circle class=\"progress-ring-circle\" cx=\"60\" cy=\"60\" r=\"52\" />\n </svg>\n <div class=\"percentage-text\">{{overallCoverage}}<br /><span>Overall Coverage</span></div>\n </div>\n \n <div class=\"competency-container\">\n <!-- Total Competencies Box -->\n <div class=\"total-box\">\n <div class=\"title\">Total Competencies</div>\n <div class=\"count\">{{this.planData?.competencies?.length}}</div>\n </div>\n \n <!-- Progress Bars -->\n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text behavioral\">Behavioural</span>\n <span class=\"covered-text\">{{behavioralCompetencyCoveredCount}} / {{behavioralTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill behavioral\" [style.width.%]=\"(behavioralCompetencyCoveredCount / behavioralTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text functional\">Functional</span>\n <span class=\"covered-text\">{{functionalCompetencyCoveredCount}} / {{functionalTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill functional\" [style.width.%]=\"(functionalCompetencyCoveredCount / functionalTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text domain\">Domain</span>\n <span class=\"covered-text\">{{domainCompetencyCoveredCount}} / {{domainTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill domain\" [style.width.%]=\"(domainCompetencyCoveredCount / domainTotalCompetencies) * 100\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"gap-section mb-4\">\n <h2>Detailed Competency Analysis</h2>\n <div class=\"gap-box\">\n Bridge Your Competencies Gap\n <p class=\"subtitle\">Here are {{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}} key areas for development.</p>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Gap to Address <span *ngIf=\"(this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)) > 0\">({{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}})</span></p>\n \n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Covered Competencies <span>({{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}})</span></p> \n </div>\n <div class=\"gap-section mb-4\">\n \n <div class=\"green-bg\">\n <div class=\"div-green-label mb-2\">\n Congratulations!\n </div> \n <p>You have successfully covered </p>\n <p class=\"subtitle\">{{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}} key competencies, forming a strong professional foundation.</p>\n </div>\n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n {{item?.sub_theme}} \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"gap-section mb-4\">\n <h2>Recommended Courses</h2>\n </div>\n <app-gap-analysis-recommended-course [planData]=\"planData\"></app-gap-analysis-recommended-course>\n</div>\n \n\n\n<div class=\"overlay-loader\" *ngIf=\"loading && dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || 'Preparing course recommendation generation...' }}</p>\n <div class=\"progress-details\">\n <div class=\"progress-indicator\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";.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:16px;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:16px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::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:#000;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:5px}.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 .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.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;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;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;align-items:flex-start;width:100%;gap:8px}.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-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.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:16px;font-style:normal;font-weight:600;line-height:22px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.relevancy,.competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;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;width:100%;padding:1rem}.course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.course-list-item:hover{box-shadow:0 4px 8px #00000026}.course-list-item:only-child{flex:1 1 auto;max-width:800px}.checked-course-container{display:flex;width:60%}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.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;justify-content:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{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}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.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:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.header-left{flex:1}.header-actions{display:flex;align-items:center;gap:12px}.regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.regenerate-btn .mat-spinner{margin:0}.regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.close-btn:hover{background-color:#f5f5f5}.close-btn .mat-icon{font-size:20px;width:20px;height:20px}.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:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.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}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.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}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.initial-loading-container{display:flex;justify-content:center;align-items:center;min-height:400px;width:100%}.initial-loading-container .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 2rem}.initial-loading-container .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.initial-loading-container .loading-content .loading-text .main-message{font-size:16px;font-weight:600;margin-bottom:1rem;color:#1b4ca1}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:300px;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#4caf50);border-radius:4px;transition:width .3s ease-in-out}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:12px;color:#666;font-weight:500}.initial-loading-container .loading-content .loading-text .progress-details .time-estimate{font-size:12px;color:#888;font-style:italic}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.overlay-loader .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 12px #00000026}.overlay-loader .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.overlay-loader .loading-content .loading-text .main-message{margin:0 0 16px;font-size:18px;font-weight:600;text-align:center}.overlay-loader .loading-content .loading-text .progress-details{margin-top:16px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:12px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#2563eb);border-radius:4px;transition:width .5s ease-in-out}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:14px;font-weight:500;color:#1b4ca1;display:block;text-align:center}.overlay-loader .loading-content .loading-text .progress-details .time-estimate{color:#666;font-size:12px;font-style:italic;display:block;text-align:center;margin-top:8px}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.competencies-grid-3{width:33%}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.grid-list-item div{padding:5px 10px;margin:10px 0}.course-pill-container{display:flex;gap:8px}.relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.show-more-competency{display:inline-flex;align-items:center}.show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.show-more-link:hover{text-decoration:underline}.course-content{flex:1;display:flex;flex-direction:column}.course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.menu-list-item.active{background-color:#1b4ca1;color:#fff}.menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.div-count{font-family:Lato;font-size:20px;font-weight:700}.green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.list-flex{display:flex;flex-direction:row;justify-content:space-between}.all-category-list .mat-icon{vertical-align:middle}.course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.left-panel{flex:0 0 250px;font-weight:700;text-align:left}.right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.course-list-container-right-flex{display:flex}.no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;gap:0px;width:100%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:5px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}.search-container-compact{flex:0 0 auto;min-width:180px}.search-container-compact .rsearch{position:relative;display:flex;align-items:center}.search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.search-container-compact .sinput-compact{border-radius:25px;border:2px solid #ccc;padding:20px 12px 20px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.search-container-compact .sinput-compact::placeholder{color:#999}.btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.theme-filter-controls{margin-bottom:8px}.clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.no-course-card .no-course-icon{margin-bottom:20px}.no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.no-course-card .suggest-course-btn:active{transform:translateY(0)}.no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.search-and-buttons-container{flex-direction:column;align-items:stretch}.search-container-compact{min-width:auto;width:100%}.btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.course-list-container-flex{flex-direction:column}.left-panel{flex:none!important;max-height:300px}.course-list-item{flex:0 0 100%;max-width:100%}.no-course-card{padding:20px}.no-course-card .no-course-content h4{font-size:20px}.no-course-card .no-course-content p{font-size:14px}}::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.download-pdf{justify-content:end;display:flex;flex-direction:row}.gap-analysis-pdf-container{font-family:Lato;max-width:900px;margin:auto;color:#212121}.gap-analysis-pdf-header{text-align:center;margin-bottom:2rem}.gap-analysis-pdf-header .logo{height:60px;margin-bottom:.5rem}.gap-analysis-pdf-header h1{font-size:1.8rem;font-weight:600;margin:.5rem 0}.gap-analysis-pdf-header .subtitle{color:#555;font-size:.95rem}.gap-analysis-pdf-header .download-btn{background:#5e00ff;color:#fff;border:none;padding:10px 20px;border-radius:6px;margin-top:1rem;font-weight:500;cursor:pointer}.competency-snapshot{background:#fafafa;border-radius:12px;padding:2rem;margin-bottom:2rem}.competency-snapshot h2{font-size:1.4rem;font-weight:600;margin-bottom:1.5rem}.competency-snapshot .snapshot-content{display:flex;gap:2rem;align-items:center;justify-content:space-between}.competency-snapshot .snapshot-content .circle-wrapper{position:relative;width:120px;height:120px}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-bg{fill:none;stroke:#eee;stroke-width:10}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-circle{fill:none;stroke:#6c63ff;stroke-width:10;stroke-linecap:round;stroke-dasharray:326.72;stroke-dashoffset:117.6192;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .35s}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:1.4rem;text-align:center}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text span{display:block;font-size:.75rem;font-weight:400;color:#555}.competency-snapshot .snapshot-content .details{flex-grow:1}.competency-snapshot .snapshot-content .details .total-competencies{font-size:1.2rem;margin-bottom:1rem}.competency-snapshot .snapshot-content .details .bar{margin:.5rem 0;padding:.6rem 1rem;border-radius:6px;font-weight:500;display:flex;justify-content:space-between;color:#fff}.competency-snapshot .snapshot-content .details .bar.behavioral{background:#7b1fa2}.competency-snapshot .snapshot-content .details .bar.functional{background:#0288d1}.competency-snapshot .snapshot-content .details .bar.domain{background:#f57c00}.gap-section{margin-top:2rem}.gap-section h2{font-size:1.3rem;margin-bottom:1rem}.gap-section .gap-box{background:#eef1ff;border-left:5px solid #6c63ff;padding:1rem;border-radius:6px;font-weight:500;color:#333}.gap-section .green-bg{background-color:#0080001c;border-left:5px solid #2d9b2d;padding:1rem;border-radius:6px;font-weight:500;color:#006400}.competency-container{width:100%;margin:0 auto;font-family:Segoe UI,sans-serif;color:#212121;display:flex;flex-direction:column}.total-box{background:#f8f9fc;border-radius:10px;padding:1.5rem;text-align:center;border:1px solid #e0e0e0;margin-bottom:1.5rem}.total-box .title{font-size:1rem;color:#666}.total-box .count{font-size:2rem;font-weight:700;color:#111;margin-top:.5rem}.progress-group{margin-bottom:1.5rem}.progress-group .progress-label{display:flex;justify-content:space-between;margin-bottom:6px}.progress-group .progress-label .label-text{font-weight:600}.progress-group .progress-label .covered-text{font-size:.9rem;color:#444}.progress-group .progress-label .behavioral{color:#f8b861}.progress-group .progress-label .functional{color:#e24577}.progress-group .progress-label .domain{color:#7b47a4}.progress-group .progress-bar{height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden}.progress-group .progress-bar .progress-fill{height:100%;border-radius:5px;transition:width .5s ease-in-out}.progress-group .progress-bar .progress-fill.behavioral{background:#f8b861}.progress-group .progress-bar .progress-fill.functional{background:#e24577}.progress-group .progress-bar .progress-fill.domain{background:#7b47a4}.competency-card{border-radius:8px;padding:1rem 1.5rem;margin-bottom:1rem;border:1px solid transparent}.competency-card .title{font-weight:600;font-size:1.1rem;color:#222;margin-bottom:.4rem}.competency-card .subtitle{font-size:.95rem;color:#555}.competency-card .subtitle .tag{font-weight:500}.competency-card .subtitle .behavioral,.competency-card .subtitle .domain,.competency-card .subtitle .functional{color:#000}.competency-card.behavioral{background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;border-color:#f8b861}.competency-card.functional{background:linear-gradient(0deg,#e245773d 0% 100%),#fff;border-color:#e24577}.competency-card.domain{background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;border-color:#7b47a4}.disclaimer-container{margin:8px 16px 0}.disclaimer-message{background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:20px;padding:8px 16px;font-family:Lato;font-size:14px;color:#333;line-height:1.2}.disclaimer-message strong{color:#000;font-weight:600}.select-all-container{display:flex;flex-direction:row;justify-content:space-between}::ng-deep .search-and-buttons-container .mat-form-field-infix{padding:10px!important}::ng-deep .search-and-buttons-container .mat-form-field-wrapper{width:100%!important}::ng-deep .select-search-panel{border:1px solid #ccc!important;border-radius:12px!important;box-shadow:0 8px 20px #0000001f}:host ::ng-deep .mat-select-arrow-wrapper{margin-top:5px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:#ccc}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#1b4ca1;border-color:#1b4ca1!important}::ng-deep .select-search-panel .mat-option.mat-selected:not(.mat-option-disabled){background-color:#1b4ca1!important;color:#fff!important}:host ::ng-deep .mat-form-field-appearance-outline{border-radius:25px;border:1px solid #ccc}:host ::ng-deep .mat-form-field-focused .mat-form-field-appearance-outline{border-color:#1b4ca1!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start{border-radius:25px 0 0 25px;border:none!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-right:none!important;border:none!important;border-radius:0 25px 25px 0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap{border:none!important;border-radius:25px}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{background-color:transparent!important}:host ::ng-deep .search-and-buttons-container .mat-option-text{color:#fff!important}\n"] }]
|
|
5810
|
+
args: [{ selector: 'app-generate-course-recommendation', template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n \n <!-- Initial Loading Screen (for initial load and regeneration) -->\n <div class=\"initial-loading-container\" *ngIf=\"!dataLoaded || isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || (isRegeneratingWithProgress ? 'Regenerating course recommendations...' : 'Loading course recommendations...') }}</p>\n <div class=\"progress-details\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-indicator\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Main Content -->\n <div class=\"main-content\" *ngIf=\"dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"popup-header\">\n <div class=\"header-left\">\n <div class=\"heading\">Save Courses (<span>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span\n *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span></span>)</div>\n </div>\n <div class=\"header-actions\">\n <button class=\"regenerate-btn\" (click)=\"regenerateCourseRecommendations()\"\n [disabled]=\"isRegenerating\"\n mat-raised-button color=\"primary\">\n <mat-icon *ngIf=\"!isRegenerating\">refresh</mat-icon>\n <mat-spinner *ngIf=\"isRegenerating\" diameter=\"20\"></mat-spinner>\n <span>{{isRegenerating ? 'Regenerating...' : 'Regenerate Recommendations'}}</span>\n </button>\n <div class=\"cursor-pointer close-btn\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-4\">\n <mat-tab-group (selectedTabChange)=\"onOuterTabChange($event)\">\n <!-- First Main Tab -->\n <mat-tab label=\"course recommendation\">\n <!-- Nested Tabs -->\n <!-- <mat-tab-group (selectedTabChange)=\"onInnerTabChange($event)\">\n <mat-tab label=\"all\">\n\n </mat-tab>\n <mat-tab label=\"behavioural\">\n\n </mat-tab>\n <mat-tab label=\"functional\">\n\n </mat-tab>\n <mat-tab label=\"domain\">\n\n </mat-tab>\n </mat-tab-group> -->\n </mat-tab>\n\n <!-- Second Main Tab -->\n <mat-tab label=\"gap analysis\">\n <!-- <p>Gap analysis content goes here</p> -->\n </mat-tab>\n </mat-tab-group>\n <form [formGroup]=\"filterForm\" class=\"filters-container\">\n <div class=\"role-mapping-container\"\n *ngIf=\"outerTabActiveIndex === 0 && (innerTabActiveIndex === 0 || innerTabActiveIndex === 1 || innerTabActiveIndex === 2 || innerTabActiveIndex === 3 )\">\n <div class=\"container\">\n <div class=\"section-header-improved mt-3\">\n <div class=\"search-and-buttons-container\">\n <div>\n <label>Search Courses</label>\n </div> \n <div class=\"search-container-compact\">\n <div class=\"rsearch\">\n <mat-icon class=\"search-icon\">search</mat-icon>\n <input class=\"sinput-compact\" [(ngModel)]=\"searchText\"\n (input)=\"applyFilter($event.target.value);\"\n placeholder=\"Search Courses\" type=\"text\">\n </div>\n </div>\n \n </div>\n \n\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Competency</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.competency?.length ? '' : 'Competency' }}\n </mat-label>\n \n <mat-select\n formControlName=\"competency\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Competency\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'competency')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredCompetency\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div> \n \n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Rating</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.rating?.length ? '' : 'Rating' }}\n </mat-label>\n \n <mat-select\n formControlName=\"rating\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Reatings\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'rating')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredRatings\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n \n \n \n \n </div>\n <div class=\"section-header-improved-sec-2 mt-4\">\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Language</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.language?.length ? '' : 'Language' }}\n </mat-label>\n \n <mat-select\n formControlName=\"language\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Languages\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'language')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredLanguages\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Duration</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.duration?.length ? '' : 'Duration' }}\n </mat-label>\n \n <mat-select\n formControlName=\"duration\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Duration\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'duration')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredDurations\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Provider</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.provider?.length ? '' : 'Provider' }}\n </mat-label>\n \n <mat-select\n formControlName=\"provider\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Provider\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'provider')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredProviders\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div style=\"margin-top: 45px;margin-left: 20px;\">\n <input class=\"btn-active\" type=\"button\" value=\"Reset All Filters\"\n (click)=\"resetFilters()\" />\n </div>\n </div>\n <div class=\"mt-4\">\n <div style=\"font-size:16px;font-weight:bold;color:#000\">\n Filtered Course Count : {{filterdCourses?.length}}\n </div>\n </div>\n <div class=\"mt-5 sub-heading select-all-container\" *ngIf=\"filterdCourses?.length\">\n <div style=\"margin-left: 16px;\">\n <mat-checkbox [checked]=\"false\" (change)=\"selectAllCourses($event)\">Select All\n Courses</mat-checkbox>\n </div>\n <div class=\"btn-group-compact\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add More Course From iGOT\"\n (click)=\"suggestMoreCourses()\" />\n </div>\n <div class=\"pl-2\">\n <input [disabled]=\"selectFilterCourses?.length > 0 ? false : true\"\n [ngClass]=\"selectFilterCourses?.length > 0 ? 'btn-active' : 'btn-disable'\"\n type=\"button\" [value]=\"mode === 'add' ? 'Save Courses' : 'Update Courses'\"\n (click)=\"saveCourses()\" />\n </div>\n </div>\n </div>\n <!-- <div class=\"disclaimer-container mt-2\" *ngIf=\"filterdCourses?.length\">\n <div class=\"disclaimer-message mt-4\">\n <strong>Disclaimer:</strong> Please verify the public course URL before adding it to the plan.\n </div>\n </div> -->\n <div class=\"mt-2\">\n\n <div class=\"course-list-container\">\n <div\n [ngClass]=\"innerTabActiveIndex > 0 ? 'course-list-container-flex':'course-list-container-right-flex' \">\n <div *ngIf=\"innerTabActiveIndex > 0\"\n [ngClass]=\"innerTabActiveIndex > 0 ? 'left-panel':''\">\n <ng-container *ngIf=\"innerTabActiveIndex === 1\">\n <div class=\"sub-heading\">\n <p>Competencies in Behavioural</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 2\">\n <div class=\"sub-heading\">\n <p>Competencies in Functional</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 3\">\n <div class=\"sub-heading\">\n <p>Competencies in Domain</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n </div>\n <div [ngClass]=\"innerTabActiveIndex > 0 ? 'right-panel':'right-panel-flex'\">\n <!-- No Course Found Message in Right Panel -->\n <div class=\"no-course-found-container\"\n *ngIf=\"filterdCourses?.length === 0 && selectedThemeFilter\">\n <div class=\"no-course-card\">\n <div class=\"no-course-icon\">\n <mat-icon>search_off</mat-icon>\n </div>\n <div class=\"no-course-content\">\n <h4>No Courses Found</h4>\n <p>No courses found for the selected theme:\n <strong>{{selectedThemeFilter}}</strong></p>\n <p>Would you like to add a course for this competency?</p>\n <button class=\"suggest-course-btn\"\n (click)=\"addCourseForSelectedTheme()\">\n <mat-icon>add_circle</mat-icon>\n Add Course\n </button>\n </div>\n </div>\n </div>\n\n <!-- Courses List -->\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n\n <div class=\"course-content\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n <div>\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\"\n (change)=\"selectedFilterCourses($event, item)\"></mat-checkbox>\n </div>\n <div class=\"ml-2\">\n <div class=\"course-pill-container\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img\n src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- <div>\n <div class=\"ai-recommened-pill\">\n <div class=\"ai-recommened-pill-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n\n <span *ngIf=\"item?.rationale\">AI Recommended\n <span *ngIf=\"item?.is_public\"> - Public</span>\n <span *ngIf=\"!item?.is_public\"> - iGOT</span>\n </span>\n <span *ngIf=\"!item?.rationale\">Manually Suggested - iGOT</span>\n\n </div>\n </div>\n </div> -->\n <div *ngIf=\"item?.rationale && !item?.is_public\">\n <div class=\"ai-recommened-pill-green\">\n <div class=\"ai-recommened-pill-green-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"item?.rationale && item?.is_public\">\n <div class=\"ai-recommened-pill-public\">\n <div class=\"ai-recommened-pill-public-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - Public </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!item?.rationale\">\n <div class=\"ai-recommened-pill-gray\">\n <div class=\"ai-recommened-pill-gray-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>Manually Suggested - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"course-title mt-3 cursor-pointer\" (click)=\"redirectToToc(item)\">\n <span *ngIf=\"item?.course\">{{item?.course}}</span>\n <!-- <span *ngIf=\"item?.name\">{{item?.name}}****</span> -->\n <span style=\"margin-left:10px;\" (click)=\"redirectToToc(item)\"><img\n height=\"18px\" width=\"18px\"\n src=\"assets/icons/redirect.png\" /></span>\n </div>\n <div class=\"course-desc mt-2\">\n <!-- <span *ngIf=\"item?.rationale\">{{item?.rationale}}</span> -->\n <span *ngIf=\"item?.description\">{{item?.description}}</span>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioural Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',i)\">\n {{ isExpanded('Behavioural',i) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Functional',i)?.length\">\n <div class=\"competency-sub-heading\">Functional Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Functional',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',i)\">\n {{ isExpanded('Functional',i) ? 'Show Less' : '+' +\n getRemainingCount('Functional',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',i)?.length\">\n <div class=\"competency-sub-heading\">Domain Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Domain',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',i)\" class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n\n\n </div>\n\n <!-- Relevancy and Duration section -->\n <div class=\"course-footer\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">{{item?.relevancy}}%</div>\n </div>\n </div>\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Duration</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">\n <span\n *ngIf=\"item?.duration\">{{getDuration(item?.duration)}}</span>\n <span *ngIf=\"!(item?.duration)\">N/A</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- General No Data Message (only when no theme filter is active) -->\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 && !selectedThemeFilter\">\n <p>No Data Found</p>\n </div>\n </div>\n </div>\n </form>\n <div class=\"role-mapping-container\" *ngIf=\"outerTabActiveIndex === 1\">\n <div id=\"gap-analysis-content\">\n\n <div class=\"download-pdf mt-4 mb-2\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\" />\n </div>\n </div>\n <div>\n <!-- <div *ngIf=\"isPDFDownload\">\n <div class=\"pdf-heading\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}} <span\n *ngIf=\"planData?.designation_name \">_{{planData?.designation_name}}_Gap_Analysis</span>\n </div>\n </div> -->\n <div class=\"d-flex vh-100\" [ngClass]=\"isPDFDownload ? 'mt-4':''\">\n <!-- Sidebar -->\n <div class=\"d-flex flex-column p-3 bg-light border-end\" style=\"width: 250px;\">\n <h5 class=\"mb-4\">Analyze by Category</h5>\n <button *ngFor=\"let item of menuItems\"\n class=\"btn btn-outline-primary mb-2 text-start menu-list-item\"\n [class.active]=\"selectedCategory === item.key\" (click)=\"selectCategory(item.key)\">\n {{ item.label }}\n </button>\n </div>\n\n <!-- Main Content -->\n <div class=\"flex-grow-1 p-4\">\n <div class=\"d-flex justify-content-between gap-3 \">\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p>Competencies Covered</p>\n </div>\n <div class=\"div-count\">{{competencyCoveredCount}}</div>\n </div>\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p *ngIf=\"selectedCategory === 'all'\">Total Competencies</p>\n <p *ngIf=\"selectedCategory === 'behavioral'\">Total Behavioural Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'functional'\">Total Functional Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'domain'\">Total Domain Competencies</p>\n </div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'all'\">\n {{this.planData?.competencies?.length}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainTotalCompetencies}}</div>\n </div>\n <div class=\"p-3 green-bg\">\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'all'\">Overall Coverage\n </div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'behavioral'\">\n Behavioural Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'functional'\">\n Functional Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'domain'\">Domain\n Coverage</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'all'\">\n {{overallCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainCoverage}}</div>\n </div>\n </div>\n <div class=\"mt-4 all-category-list\" [ngSwitch]=\"selectedCategory\">\n <div *ngSwitchCase=\"'all'\">\n <h4>All Categories</h4>\n\n <!-- Show Behavioural section only if there are unmatched behavioural competencies -->\n <div class=\"mt-4\"\n *ngIf=\"behaviouralNotMatched && behaviouralNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show Functional section only if there are unmatched functional competencies -->\n <div class=\"mt-4\"\n *ngIf=\"functionalNotMatched && functionalNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Functional</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show Domain section only if there are unmatched domain competencies -->\n <div class=\"mt-4\" *ngIf=\"domainNotMatched && domainNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Domain</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show message when all competencies are covered -->\n <div class=\"mt-4 text-center\"\n *ngIf=\"(!behaviouralNotMatched || behaviouralNotMatched.length === 0) && \n (!functionalNotMatched || functionalNotMatched.length === 0) && \n (!domainNotMatched || domainNotMatched.length === 0)\">\n <div class=\"no-gaps-message\">\n <mat-icon class=\"success-icon\">check_circle</mat-icon>\n <h4>Excellent! All competencies are covered</h4>\n <p>All required competencies have been addressed by the selected\n courses.</p>\n </div>\n </div>\n\n </div>\n\n <div *ngSwitchCase=\"'behavioral'\">\n <h4>Behavioural</h4>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All behavioral competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'functional'\">\n <h4>Functional</h4>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Functional</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course</span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All functional competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'domain'\">\n <h4>Domain</h4>\n <div class=\"mt-4\" *ngIf=\"domainCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Domain</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"domainCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All domain competencies are covered by the selected\n courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchDefault>\n <p>Please select a category.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> <!-- Close main-content div -->\n\n </div>\n</div>\n\n\n<div [hidden]=\"!isPDFDownload\" class=\"gap-analysis-pdf-container\" #pdfContent>\n <div class=\"gap-analysis-pdf-header\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"logo\" />\n <h1><span>\n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.department_name?.name}}</span> \n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}}</span> \n <span *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span>\n </span></h1>\n <p class=\"subtitle\">A detailed breakdown of competencies Gap Analysis</p>\n \n </div>\n \n <div class=\"competency-snapshot\">\n <h2>Competency Snapshot</h2>\n <div class=\"snapshot-content\">\n <div class=\"circle-wrapper\">\n <svg class=\"progress-ring\" width=\"120\" height=\"120\">\n <circle class=\"progress-ring-bg\" cx=\"60\" cy=\"60\" r=\"52\" />\n <circle class=\"progress-ring-circle\" cx=\"60\" cy=\"60\" r=\"52\" />\n </svg>\n <div class=\"percentage-text\">{{overallCoverage}}<br /><span>Overall Coverage</span></div>\n </div>\n \n <div class=\"competency-container\">\n <!-- Total Competencies Box -->\n <div class=\"total-box\">\n <div class=\"title\">Total Competencies</div>\n <div class=\"count\">{{this.planData?.competencies?.length}}</div>\n </div>\n \n <!-- Progress Bars -->\n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text behavioral\">Behavioural</span>\n <span class=\"covered-text\">{{behavioralCompetencyCoveredCount}} / {{behavioralTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill behavioral\" [style.width.%]=\"(behavioralCompetencyCoveredCount / behavioralTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text functional\">Functional</span>\n <span class=\"covered-text\">{{functionalCompetencyCoveredCount}} / {{functionalTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill functional\" [style.width.%]=\"(functionalCompetencyCoveredCount / functionalTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text domain\">Domain</span>\n <span class=\"covered-text\">{{domainCompetencyCoveredCount}} / {{domainTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill domain\" [style.width.%]=\"(domainCompetencyCoveredCount / domainTotalCompetencies) * 100\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"gap-section mb-4\">\n <h2>Detailed Competency Analysis</h2>\n <div class=\"gap-box\">\n Bridge Your Competencies Gap\n <p class=\"subtitle\">Here are {{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}} key areas for development.</p>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Gap to Address <span *ngIf=\"(this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)) > 0\">({{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}})</span></p>\n \n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Covered Competencies <span>({{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}})</span></p> \n </div>\n <div class=\"gap-section mb-4\">\n \n <div class=\"green-bg\">\n <div class=\"div-green-label mb-2\">\n Congratulations!\n </div> \n <p>You have successfully covered </p>\n <p class=\"subtitle\">{{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}} key competencies, forming a strong professional foundation.</p>\n </div>\n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n {{item?.sub_theme}} \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"gap-section mb-4\">\n <h2>Recommended Courses</h2>\n </div>\n <app-gap-analysis-recommended-course [planData]=\"planData\"></app-gap-analysis-recommended-course>\n</div>\n \n\n\n<div class=\"overlay-loader\" *ngIf=\"loading && dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || 'Preparing course recommendation generation...' }}</p>\n <div class=\"progress-details\">\n <div class=\"progress-indicator\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";.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:16px;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:16px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::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:#000;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:5px}.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 .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.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;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;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;align-items:flex-start;width:100%;gap:8px}.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-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.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:16px;font-style:normal;font-weight:600;line-height:22px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.relevancy,.competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;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;width:100%;padding:1rem}.course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.course-list-item:hover{box-shadow:0 4px 8px #00000026}.course-list-item:only-child{flex:1 1 auto;max-width:800px}.checked-course-container{display:flex;width:60%}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.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;justify-content:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{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}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.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:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.header-left{flex:1}.header-actions{display:flex;align-items:center;gap:12px}.regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.regenerate-btn .mat-spinner{margin:0}.regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.close-btn:hover{background-color:#f5f5f5}.close-btn .mat-icon{font-size:20px;width:20px;height:20px}.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:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.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}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.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}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.initial-loading-container{display:flex;justify-content:center;align-items:center;min-height:400px;width:100%}.initial-loading-container .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 2rem}.initial-loading-container .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.initial-loading-container .loading-content .loading-text .main-message{font-size:16px;font-weight:600;margin-bottom:1rem;color:#1b4ca1}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:300px;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#4caf50);border-radius:4px;transition:width .3s ease-in-out}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:12px;color:#666;font-weight:500}.initial-loading-container .loading-content .loading-text .progress-details .time-estimate{font-size:12px;color:#888;font-style:italic}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.overlay-loader .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 12px #00000026}.overlay-loader .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.overlay-loader .loading-content .loading-text .main-message{margin:0 0 16px;font-size:18px;font-weight:600;text-align:center}.overlay-loader .loading-content .loading-text .progress-details{margin-top:16px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:12px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#2563eb);border-radius:4px;transition:width .5s ease-in-out}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:14px;font-weight:500;color:#1b4ca1;display:block;text-align:center}.overlay-loader .loading-content .loading-text .progress-details .time-estimate{color:#666;font-size:12px;font-style:italic;display:block;text-align:center;margin-top:8px}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.competencies-grid-3{width:33%}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.grid-list-item div{padding:5px 10px;margin:10px 0}.course-pill-container{display:flex;gap:8px}.relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.show-more-competency{display:inline-flex;align-items:center}.show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.show-more-link:hover{text-decoration:underline}.course-content{flex:1;display:flex;flex-direction:column}.course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.menu-list-item.active{background-color:#1b4ca1;color:#fff}.menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.div-count{font-family:Lato;font-size:20px;font-weight:700}.green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.list-flex{display:flex;flex-direction:row;justify-content:space-between}.all-category-list .mat-icon{vertical-align:middle}.course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.left-panel{flex:0 0 250px;font-weight:700;text-align:left}.right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.course-list-container-right-flex{display:flex}.no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;gap:0px;width:100%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:5px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}.search-container-compact{flex:0 0 auto;min-width:180px}.search-container-compact .rsearch{position:relative;display:flex;align-items:center}.search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.search-container-compact .sinput-compact{border-radius:25px;border:2px solid #ccc;padding:20px 12px 20px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.search-container-compact .sinput-compact::placeholder{color:#999}.btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.theme-filter-controls{margin-bottom:8px}.clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.no-course-card .no-course-icon{margin-bottom:20px}.no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.no-course-card .suggest-course-btn:active{transform:translateY(0)}.no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.search-and-buttons-container{flex-direction:column;align-items:stretch}.search-container-compact{min-width:auto;width:100%}.btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.course-list-container-flex{flex-direction:column}.left-panel{flex:none!important;max-height:300px}.course-list-item{flex:0 0 100%;max-width:100%}.no-course-card{padding:20px}.no-course-card .no-course-content h4{font-size:20px}.no-course-card .no-course-content p{font-size:14px}}::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.download-pdf{justify-content:end;display:flex;flex-direction:row}.gap-analysis-pdf-container{font-family:Lato;max-width:900px;margin:auto;color:#212121}.gap-analysis-pdf-header{text-align:center;margin-bottom:2rem}.gap-analysis-pdf-header .logo{height:60px;margin-bottom:.5rem}.gap-analysis-pdf-header h1{font-size:1.8rem;font-weight:600;margin:.5rem 0}.gap-analysis-pdf-header .subtitle{color:#555;font-size:.95rem}.gap-analysis-pdf-header .download-btn{background:#5e00ff;color:#fff;border:none;padding:10px 20px;border-radius:6px;margin-top:1rem;font-weight:500;cursor:pointer}.competency-snapshot{background:#fafafa;border-radius:12px;padding:2rem;margin-bottom:2rem}.competency-snapshot h2{font-size:1.4rem;font-weight:600;margin-bottom:1.5rem}.competency-snapshot .snapshot-content{display:flex;gap:2rem;align-items:center;justify-content:space-between}.competency-snapshot .snapshot-content .circle-wrapper{position:relative;width:120px;height:120px}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-bg{fill:none;stroke:#eee;stroke-width:10}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-circle{fill:none;stroke:#6c63ff;stroke-width:10;stroke-linecap:round;stroke-dasharray:326.72;stroke-dashoffset:117.6192;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .35s}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:1.4rem;text-align:center}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text span{display:block;font-size:.75rem;font-weight:400;color:#555}.competency-snapshot .snapshot-content .details{flex-grow:1}.competency-snapshot .snapshot-content .details .total-competencies{font-size:1.2rem;margin-bottom:1rem}.competency-snapshot .snapshot-content .details .bar{margin:.5rem 0;padding:.6rem 1rem;border-radius:6px;font-weight:500;display:flex;justify-content:space-between;color:#fff}.competency-snapshot .snapshot-content .details .bar.behavioral{background:#7b1fa2}.competency-snapshot .snapshot-content .details .bar.functional{background:#0288d1}.competency-snapshot .snapshot-content .details .bar.domain{background:#f57c00}.gap-section{margin-top:2rem}.gap-section h2{font-size:1.3rem;margin-bottom:1rem}.gap-section .gap-box{background:#eef1ff;border-left:5px solid #6c63ff;padding:1rem;border-radius:6px;font-weight:500;color:#333}.gap-section .green-bg{background-color:#0080001c;border-left:5px solid #2d9b2d;padding:1rem;border-radius:6px;font-weight:500;color:#006400}.competency-container{width:100%;margin:0 auto;font-family:Segoe UI,sans-serif;color:#212121;display:flex;flex-direction:column}.total-box{background:#f8f9fc;border-radius:10px;padding:1.5rem;text-align:center;border:1px solid #e0e0e0;margin-bottom:1.5rem}.total-box .title{font-size:1rem;color:#666}.total-box .count{font-size:2rem;font-weight:700;color:#111;margin-top:.5rem}.progress-group{margin-bottom:1.5rem}.progress-group .progress-label{display:flex;justify-content:space-between;margin-bottom:6px}.progress-group .progress-label .label-text{font-weight:600}.progress-group .progress-label .covered-text{font-size:.9rem;color:#444}.progress-group .progress-label .behavioral{color:#f8b861}.progress-group .progress-label .functional{color:#e24577}.progress-group .progress-label .domain{color:#7b47a4}.progress-group .progress-bar{height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden}.progress-group .progress-bar .progress-fill{height:100%;border-radius:5px;transition:width .5s ease-in-out}.progress-group .progress-bar .progress-fill.behavioral{background:#f8b861}.progress-group .progress-bar .progress-fill.functional{background:#e24577}.progress-group .progress-bar .progress-fill.domain{background:#7b47a4}.competency-card{border-radius:8px;padding:1rem 1.5rem;margin-bottom:1rem;border:1px solid transparent}.competency-card .title{font-weight:600;font-size:1.1rem;color:#222;margin-bottom:.4rem}.competency-card .subtitle{font-size:.95rem;color:#555}.competency-card .subtitle .tag{font-weight:500}.competency-card .subtitle .behavioral,.competency-card .subtitle .domain,.competency-card .subtitle .functional{color:#000}.competency-card.behavioral{background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;border-color:#f8b861}.competency-card.functional{background:linear-gradient(0deg,#e245773d 0% 100%),#fff;border-color:#e24577}.competency-card.domain{background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;border-color:#7b47a4}.disclaimer-container{margin:8px 16px 0}.disclaimer-message{background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:20px;padding:8px 16px;font-family:Lato;font-size:14px;color:#333;line-height:1.2}.disclaimer-message strong{color:#000;font-weight:600}.select-all-container{display:flex;flex-direction:row;justify-content:space-between}::ng-deep .search-and-buttons-container .mat-form-field-infix{padding:10px!important}::ng-deep .search-and-buttons-container .mat-form-field-wrapper{width:100%!important}::ng-deep .select-search-panel{border:1px solid #ccc!important;border-radius:12px!important;box-shadow:0 8px 20px #0000001f}:host ::ng-deep .mat-select-arrow-wrapper{margin-top:5px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:#ccc}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#1b4ca1;border-color:#1b4ca1!important}::ng-deep .select-search-panel .mat-option.mat-selected:not(.mat-option-disabled){background-color:#1b4ca1!important;color:#fff!important}:host ::ng-deep .mat-form-field-appearance-outline{border-radius:25px;border:1px solid #ccc}:host ::ng-deep .mat-form-field-focused .mat-form-field-appearance-outline{border-color:#1b4ca1!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start{border-radius:25px 0 0 25px;border:none!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-right:none!important;border:none!important;border-radius:0 25px 25px 0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap{border:none!important;border-radius:25px}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{background-color:transparent!important}:host ::ng-deep .search-and-buttons-container .mat-option-text{color:#fff!important}\n"] }]
|
|
5810
5811
|
}], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
5811
5812
|
type: Inject,
|
|
5812
5813
|
args: [MAT_DIALOG_DATA]
|
|
@@ -14604,44 +14605,46 @@ class RoleMappingListComponent {
|
|
|
14604
14605
|
if (this.formData.value.departments?.length) {
|
|
14605
14606
|
let department_id = this.formData.value.departments;
|
|
14606
14607
|
if (typeof department_id === 'string') {
|
|
14607
|
-
|
|
14608
|
-
|
|
14609
|
-
|
|
14610
|
-
|
|
14611
|
-
|
|
14612
|
-
|
|
14613
|
-
|
|
14614
|
-
|
|
14615
|
-
|
|
14616
|
-
|
|
14617
|
-
|
|
14618
|
-
|
|
14619
|
-
|
|
14620
|
-
|
|
14621
|
-
|
|
14608
|
+
let obj = {
|
|
14609
|
+
state_center_id: this.formData.value.ministry
|
|
14610
|
+
};
|
|
14611
|
+
if (this.formData.value.departments) {
|
|
14612
|
+
if (typeof this.formData.value.departments === 'string') {
|
|
14613
|
+
obj['department_id'] = this.formData.value.departments;
|
|
14614
|
+
}
|
|
14615
|
+
}
|
|
14616
|
+
this.sharedService.getMatchedRoleMapping(obj).subscribe((matchedRoleMapping) => {
|
|
14617
|
+
console.log('matchedRoleMapping', matchedRoleMapping);
|
|
14618
|
+
this.matchedRoleMappingData = matchedRoleMapping?.matched_details || [];
|
|
14619
|
+
const matchedRoleMappingIds = matchedRoleMapping?.matched_details?.map(x => x.role_mapping_id) || [];
|
|
14620
|
+
this.matchedDesignationSet = new Set(matchedRoleMappingIds);
|
|
14621
|
+
// this.matchedRoleMapping = matchedRoleMappingIds.length;
|
|
14622
|
+
this.sharedService.getRoleMappingByStateCenterAndDepartmentBySearch(state_center_id, department_id, this.searchText, this.pageSize, this.offset, this.activeTab).subscribe({
|
|
14623
|
+
next: (res) => {
|
|
14624
|
+
this.loading = false;
|
|
14622
14625
|
console.log('res', res);
|
|
14623
|
-
|
|
14624
|
-
this.
|
|
14626
|
+
this.sharedService.cbpPlanFinalObj['role_mapping_generation'] = res?.data;
|
|
14627
|
+
this.sharedService.roleMappingGenerationData = res?.data;
|
|
14628
|
+
localStorage.setItem('cbpPlanFinalObj', JSON.stringify(this.sharedService.cbpPlanFinalObj));
|
|
14625
14629
|
this.matchedRoleMapping = res?.total_matched;
|
|
14626
|
-
|
|
14627
|
-
this.matchedDesignationSet = new Set(matchedRoleMappingIds);
|
|
14628
|
-
// this.matchedRoleMapping = matchedRoleMappingIds.length;
|
|
14630
|
+
console.log('this.matchedRoleMapping', this.activeTab, this.matchedRoleMapping, this.unMatchedRoleMapping);
|
|
14629
14631
|
this.unMatchedRoleMapping = res?.total_unmatched;
|
|
14632
|
+
// add a condition if unmatched tab then send unmatched value in role mapping
|
|
14630
14633
|
// this.applyAllFilters();
|
|
14631
|
-
|
|
14632
|
-
|
|
14633
|
-
|
|
14634
|
-
|
|
14635
|
-
|
|
14636
|
-
|
|
14637
|
-
|
|
14638
|
-
|
|
14639
|
-
|
|
14640
|
-
|
|
14641
|
-
|
|
14642
|
-
|
|
14643
|
-
|
|
14644
|
-
}
|
|
14634
|
+
this.dataSource = new MatTableDataSource(res?.data);
|
|
14635
|
+
this.originalDataSource = new MatTableDataSource(res?.data);
|
|
14636
|
+
// setTimeout(() => {
|
|
14637
|
+
// this.dataSource.paginator = this.paginator;
|
|
14638
|
+
// }, 1000)
|
|
14639
|
+
this.originalData = res?.data;
|
|
14640
|
+
this.masterData = res?.data;
|
|
14641
|
+
this.setTotalRoleMappingListCount(res);
|
|
14642
|
+
console.log('this.dataSource', this.dataSource);
|
|
14643
|
+
},
|
|
14644
|
+
error: () => {
|
|
14645
|
+
this.loading = false;
|
|
14646
|
+
}
|
|
14647
|
+
});
|
|
14645
14648
|
});
|
|
14646
14649
|
}
|
|
14647
14650
|
else {
|
|
@@ -14649,38 +14652,37 @@ class RoleMappingListComponent {
|
|
|
14649
14652
|
}
|
|
14650
14653
|
}
|
|
14651
14654
|
else {
|
|
14652
|
-
|
|
14653
|
-
this.
|
|
14654
|
-
|
|
14655
|
-
|
|
14656
|
-
this.
|
|
14657
|
-
|
|
14658
|
-
|
|
14659
|
-
|
|
14660
|
-
|
|
14661
|
-
|
|
14662
|
-
|
|
14663
|
-
|
|
14664
|
-
this.sharedService.
|
|
14655
|
+
let obj = {
|
|
14656
|
+
state_center_id: this.formData.value.ministry
|
|
14657
|
+
};
|
|
14658
|
+
if (typeof this.formData.value.departments === 'string') {
|
|
14659
|
+
obj['department_id'] = this.formData.value.departments;
|
|
14660
|
+
}
|
|
14661
|
+
this.sharedService.getMatchedRoleMapping(obj).subscribe((matchedRoleMapping) => {
|
|
14662
|
+
console.log('matchedRoleMapping', matchedRoleMapping);
|
|
14663
|
+
this.matchedRoleMappingData = matchedRoleMapping?.matched_details || [];
|
|
14664
|
+
const matchedRoleMappingIds = matchedRoleMapping?.matched_details?.map(x => x.role_mapping_id) || [];
|
|
14665
|
+
this.matchedDesignationSet = new Set(matchedRoleMappingIds);
|
|
14666
|
+
// this.matchedRoleMapping = matchedRoleMappingIds.length;
|
|
14667
|
+
this.sharedService.getRoleMappingByStateCenterBySearch(state_center_id, this.searchText, this.pageSize, this.offset, this.activeTab).subscribe((res) => {
|
|
14668
|
+
this.loading = false;
|
|
14665
14669
|
console.log('res', res);
|
|
14666
|
-
|
|
14667
|
-
this.
|
|
14670
|
+
this.sharedService.cbpPlanFinalObj['role_mapping_generation'] = res?.data;
|
|
14671
|
+
this.sharedService.roleMappingGenerationData = res?.data;
|
|
14672
|
+
localStorage.setItem('cbpPlanFinalObj', JSON.stringify(this.sharedService.cbpPlanFinalObj));
|
|
14668
14673
|
this.matchedRoleMapping = res?.total_matched;
|
|
14669
|
-
const matchedRoleMappingIds = matchedRoleMapping?.matched_details?.map(x => x.role_mapping_id) || [];
|
|
14670
|
-
this.matchedDesignationSet = new Set(matchedRoleMappingIds);
|
|
14671
|
-
// this.matchedRoleMapping = matchedRoleMappingIds.length;
|
|
14672
14674
|
this.unMatchedRoleMapping = res?.total_unmatched;
|
|
14673
14675
|
// this.applyAllFilters();
|
|
14676
|
+
this.setTotalRoleMappingListCount(res);
|
|
14677
|
+
this.dataSource = new MatTableDataSource(res?.data);
|
|
14678
|
+
this.originalDataSource = new MatTableDataSource(res?.data);
|
|
14679
|
+
// setTimeout(() => {
|
|
14680
|
+
// this.dataSource.paginator = this.paginator;
|
|
14681
|
+
// }, 1000)
|
|
14682
|
+
this.originalData = res?.data;
|
|
14683
|
+
this.masterData = res?.data;
|
|
14684
|
+
console.log('this.dataSource', this.dataSource);
|
|
14674
14685
|
});
|
|
14675
|
-
this.totalRoleMappingListCount = res?.total || 0;
|
|
14676
|
-
this.dataSource = new MatTableDataSource(res?.data);
|
|
14677
|
-
this.originalDataSource = new MatTableDataSource(res?.data);
|
|
14678
|
-
// setTimeout(() => {
|
|
14679
|
-
// this.dataSource.paginator = this.paginator;
|
|
14680
|
-
// }, 1000)
|
|
14681
|
-
this.originalData = res?.data;
|
|
14682
|
-
this.masterData = res?.data;
|
|
14683
|
-
console.log('this.dataSource', this.dataSource);
|
|
14684
14686
|
});
|
|
14685
14687
|
}
|
|
14686
14688
|
}
|
|
@@ -14689,45 +14691,49 @@ class RoleMappingListComponent {
|
|
|
14689
14691
|
console.log('this.formData', this.formData);
|
|
14690
14692
|
let state_center_id = this.formData.value.ministry;
|
|
14691
14693
|
let department_id = this.formData.value.departments;
|
|
14692
|
-
|
|
14693
|
-
|
|
14694
|
-
|
|
14695
|
-
|
|
14696
|
-
|
|
14697
|
-
|
|
14698
|
-
|
|
14699
|
-
|
|
14700
|
-
|
|
14701
|
-
|
|
14702
|
-
|
|
14703
|
-
|
|
14704
|
-
|
|
14694
|
+
let obj = {
|
|
14695
|
+
state_center_id: this.formData.value.ministry
|
|
14696
|
+
};
|
|
14697
|
+
if (typeof this.formData.value.departments === 'string') {
|
|
14698
|
+
obj['department_id'] = this.formData.value.departments;
|
|
14699
|
+
}
|
|
14700
|
+
this.sharedService.getMatchedRoleMapping(obj).subscribe((matchedRoleMapping) => {
|
|
14701
|
+
console.log('matchedRoleMapping', matchedRoleMapping);
|
|
14702
|
+
this.matchedRoleMappingData = matchedRoleMapping?.matched_details || [];
|
|
14703
|
+
const matchedRoleMappingIds = matchedRoleMapping?.matched_details?.map(x => x.role_mapping_id) || [];
|
|
14704
|
+
this.matchedDesignationSet = new Set(matchedRoleMappingIds);
|
|
14705
|
+
// this.matchedRoleMapping = matchedRoleMappingIds.length;
|
|
14706
|
+
this.sharedService.getRoleMappingByStateCenterAndDepartmentBySearch(state_center_id, department_id, this.searchText, this.pageSize, this.offset, this.activeTab).subscribe({
|
|
14707
|
+
next: (res) => {
|
|
14708
|
+
this.loading = false;
|
|
14705
14709
|
console.log('res', res);
|
|
14706
|
-
|
|
14707
|
-
this.
|
|
14710
|
+
this.sharedService.cbpPlanFinalObj['role_mapping_generation'] = res?.data;
|
|
14711
|
+
this.sharedService.roleMappingGenerationData = res?.data;
|
|
14712
|
+
localStorage.setItem('cbpPlanFinalObj', JSON.stringify(this.sharedService.cbpPlanFinalObj));
|
|
14708
14713
|
this.matchedRoleMapping = res?.total_matched;
|
|
14709
|
-
const matchedRoleMappingIds = matchedRoleMapping?.matched_details?.map(x => x.role_mapping_id) || [];
|
|
14710
|
-
this.matchedDesignationSet = new Set(matchedRoleMappingIds);
|
|
14711
|
-
// this.matchedRoleMapping = matchedRoleMappingIds.length;
|
|
14712
14714
|
this.unMatchedRoleMapping = res?.total_unmatched;
|
|
14713
14715
|
// this.applyAllFilters();
|
|
14714
|
-
|
|
14715
|
-
|
|
14716
|
-
|
|
14717
|
-
|
|
14718
|
-
|
|
14719
|
-
|
|
14720
|
-
|
|
14721
|
-
|
|
14722
|
-
|
|
14723
|
-
|
|
14724
|
-
|
|
14725
|
-
|
|
14726
|
-
|
|
14727
|
-
}
|
|
14716
|
+
this.dataSource = new MatTableDataSource(res?.data);
|
|
14717
|
+
this.originalDataSource = new MatTableDataSource(res?.data);
|
|
14718
|
+
// setTimeout(() => {
|
|
14719
|
+
// this.dataSource.paginator = this.paginator;
|
|
14720
|
+
// }, 1000)
|
|
14721
|
+
this.originalData = res?.data;
|
|
14722
|
+
this.masterData = res?.data;
|
|
14723
|
+
this.setTotalRoleMappingListCount(res);
|
|
14724
|
+
console.log('this.dataSource', this.dataSource);
|
|
14725
|
+
},
|
|
14726
|
+
error: () => {
|
|
14727
|
+
this.loading = false;
|
|
14728
|
+
}
|
|
14729
|
+
});
|
|
14728
14730
|
});
|
|
14729
14731
|
}
|
|
14730
14732
|
}
|
|
14733
|
+
setTotalRoleMappingListCount(res) {
|
|
14734
|
+
const tabCount = this.activeTab === 'unmatched' ? res?.total_unmatched : res?.total_matched;
|
|
14735
|
+
this.totalRoleMappingListCount = tabCount ?? res?.total ?? 0;
|
|
14736
|
+
}
|
|
14731
14737
|
toggleRow(row) {
|
|
14732
14738
|
if (!row?.cbp_plans?.length)
|
|
14733
14739
|
return;
|
|
@@ -14778,14 +14784,12 @@ class RoleMappingListComponent {
|
|
|
14778
14784
|
// )
|
|
14779
14785
|
// );
|
|
14780
14786
|
// }
|
|
14781
|
-
|
|
14782
|
-
|
|
14783
|
-
|
|
14784
|
-
|
|
14785
|
-
// return terms.every(term => name.includes(term));
|
|
14786
|
-
// });
|
|
14787
|
-
this.loadRoleMappingList();
|
|
14787
|
+
this.pageIndex = 0;
|
|
14788
|
+
this.offset = 0;
|
|
14789
|
+
if (this.paginator) {
|
|
14790
|
+
this.paginator.pageIndex = 0;
|
|
14788
14791
|
}
|
|
14792
|
+
this.loadRoleMappingList();
|
|
14789
14793
|
// this.dataSource = new MatTableDataSource(data);
|
|
14790
14794
|
// setTimeout(() => {
|
|
14791
14795
|
// this.dataSource.paginator = this.paginator;
|
|
@@ -14856,11 +14860,11 @@ class RoleMappingListComponent {
|
|
|
14856
14860
|
// this.getData(this.offset, this.pageSize);
|
|
14857
14861
|
}
|
|
14858
14862
|
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 }); }
|
|
14859
|
-
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\n *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">\n / {{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n </p>\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 </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 </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 </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\" [pageSize]=\"5\" (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"] }] }); }
|
|
14863
|
+
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\n *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">\n / {{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n </p>\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 </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 </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 </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"] }] }); }
|
|
14860
14864
|
}
|
|
14861
14865
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoleMappingListComponent, decorators: [{
|
|
14862
14866
|
type: Component,
|
|
14863
|
-
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\n *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">\n / {{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n </p>\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 </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 </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 </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\" [pageSize]=\"5\" (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"] }]
|
|
14867
|
+
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\n *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">\n / {{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n </p>\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 </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 </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 </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"] }]
|
|
14864
14868
|
}], ctorParameters: function () { return [{ type: SharedService }, { type: i1$1.MatDialog }, { type: i3.Router }, { type: i3.ActivatedRoute }]; }, propDecorators: { formData: [{
|
|
14865
14869
|
type: Input
|
|
14866
14870
|
}], paginator: [{
|