@sunbird-cb/cbp-ai 0.1.104 → 0.1.105

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.
Files changed (12) hide show
  1. package/esm2022/lib/components/generate-course-recommendation/generate-course-recommendation.component.mjs +69 -23
  2. package/esm2022/lib/components/suggest-more-courses/suggest-more-courses.component.mjs +3 -3
  3. package/esm2022/lib/components/view-course-recommendation/view-course-recommendation.component.mjs +3 -3
  4. package/esm2022/lib/components/view-final-cbp-plan/view-final-cbp-plan.component.mjs +4 -1
  5. package/fesm2022/sunbird-cb-cbp-ai.mjs +75 -26
  6. package/fesm2022/sunbird-cb-cbp-ai.mjs.map +1 -1
  7. package/lib/components/generate-course-recommendation/generate-course-recommendation.component.d.ts +10 -2
  8. package/lib/components/generate-course-recommendation/generate-course-recommendation.component.d.ts.map +1 -1
  9. package/lib/components/view-final-cbp-plan/view-final-cbp-plan.component.d.ts.map +1 -1
  10. package/package.json +1 -1
  11. package/sunbird-cb-cbp-ai-0.1.105.tgz +0 -0
  12. package/sunbird-cb-cbp-ai-0.1.104.tgz +0 -0
package/fesm2022/sunbird-cb-cbp-ai.mjs CHANGED
@@ -3163,11 +3163,11 @@ class SuggestMoreCoursesComponent {
3163
3163
  }
3164
3164
  }
3165
3165
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuggestMoreCoursesComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }, { token: SharedService }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
3166
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuggestMoreCoursesComponent, selector: "app-suggest-more-courses", ngImport: i0, template: "<div class=\"suggest-courses-plan\">\n <div class=\"container\">\n <mat-card class=\"mt-2\">\n <div class=\"suggest-courses-header\">\n <div>\n <div class=\"heading\">\n Suggest Courses from iGOT\n </div>\n <div class=\"sub-heading-text\">\n <p>These courses is coming from the iGOT platform</p>\n </div>\n </div>\n <div>\n <div class=\"suggest-course-control\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancel()\" />\n </div>\n <div>\n <input [disabled]=\"selectFilterCourses?.length ? false : true\"\n [ngClass]=\"selectFilterCourses?.length ? 'btn-active':'btn-disable'\" type=\"button\"\n value=\"Add\" (click)=\"addCourses()\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"search-filter-section\">\n <form [formGroup]=\"filterForm\" class=\"filters-container\">\n <div class=\"container\">\n\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\" [value]=\"searchText\"\n (input)=\"onSearchChange($any($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 formControlName=\"competency\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredCompetency\" [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 formControlName=\"rating\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredRatings\" [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 formControlName=\"language\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredLanguages\" [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 formControlName=\"duration\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let d of durations\" [value]=\"d.value\">\n {{ d.label }}\n </mat-option>\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\n {{ filterForm.value.provider?.length ? '' : 'Provider' }}\n </mat-label>\n\n <mat-select formControlName=\"provider\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredProviders\" [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\n\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 \">\n <p>No Data Found</p>\n </div> -->\n </div>\n </form>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"suggestedCourses?.length > 0\">\n <div class=\"results-header\" style=\"display: flex; justify-content: space-between; align-items: center;\">\n <div>\n <mat-checkbox [checked]=\"false\" (change)=\"selectAllCourses($event)\">Select All\n Courses</mat-checkbox>\n </div>\n <div class=\"results-info\" *ngIf=\"totalCount > 0\">\n <span class=\"text-muted\">Showing {{ startItem }} - {{ endItem }} of {{ totalCount }}\n courses</span>\n </div>\n </div>\n </div>\n <div class=\"course-card-list\">\n <div class=\"course-card-container mt-2\" *ngFor=\"let item of suggestedCourses\">\n <div>\n <div class=\"image-container\">\n <!-- \u2705 Checkbox -->\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\" class=\"image-checkbox\"\n (change)=\"selectedFilterCourses($event, item)\">\n </mat-checkbox>\n\n <!-- \u2705 Image -->\n <img [src]=\"item?.posterImage\" (error)=\"onImgError($event)\" />\n </div>\n\n <div class=\"mt-2\" style=\"width: 100px\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img src=\"assets/icons/course.svg\"></span>&nbsp;<span>Course</span>\n </div>\n </div>\n </div>\n\n <div class=\"sub-heading mt-2 cursor-pointer\" (click)=\"redirectToCoure(item)\">\n <p>{{ item?.name }}</p>\n </div>\n <div class=\"mt-2 desc\">\n <p>{{ item?.description | slice: 0:200 }}</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Pagination Controls -->\n <div class=\"pagination-controls mt-4\" *ngIf=\"totalPages > 1\"\n style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\n <button mat-icon-button [disabled]=\"!hasPreviousPage\" (click)=\"goToFirstPage()\" title=\"First Page\">\n <mat-icon>first_page</mat-icon>\n </button>\n\n <button mat-icon-button [disabled]=\"!hasPreviousPage\" (click)=\"goToPreviousPage()\"\n title=\"Previous Page\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n\n <span class=\"pagination-info\" style=\"margin: 0 15px;\">\n Page {{ currentPage + 1 }} of {{ totalPages }}\n </span>\n\n <button mat-icon-button [disabled]=\"!hasNextPage\" (click)=\"goToNextPage()\" title=\"Next Page\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n\n <button mat-icon-button [disabled]=\"!hasNextPage\" (click)=\"goToLastPage()\" title=\"Last Page\">\n <mat-icon>last_page</mat-icon>\n </button>\n </div>\n\n <!-- No Results Message -->\n <div class=\"no-results mt-4\" *ngIf=\"!loading && suggestedCourses.length === 0\"\n style=\"text-align: center; padding: 20px;\">\n <p class=\"text-muted\">{{ searchText.trim() ? 'No courses found for your search.' : 'No courses\n available.' }}</p>\n <button mat-button color=\"primary\" *ngIf=\"searchText.trim()\" (click)=\"clearSearch()\">Clear\n Search</button>\n </div>\n </mat-card>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto;width:100%;max-width:1400px;overflow:hidden}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.sub-heading-text p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:400;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:14px;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:10px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:10px;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: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;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;width:auto}.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;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;gap:16px}.course-card-container{flex:0 0 calc(25% - 12px);width:calc(25% - 12px);min-width:280px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff;padding:15px;min-height:320px;box-sizing:border-box;display:flex;flex-direction:column}.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:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.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:16px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:700;line-height:normal}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:12px;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}.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}.course-card-list{display:flex;flex-wrap:wrap;flex-direction:row;gap:16px;justify-content:flex-start;align-items:stretch}@media (max-width: 1400px){.course-card-list{justify-content:center}}.image-container img{height:150px;width:100%;object-fit:cover}.image-container{position:relative;width:100%;height:auto}.image-container img{width:100%;height:150px;border-radius:6px}.image-container .image-checkbox{position:absolute;top:8px;right:8px;background:#fff;border-radius:4px;z-index:10}.desc{word-wrap:break-word}@media (max-width: 1400px){.course-card-container{flex:0 0 calc(33.333% - 10.667px);width:calc(33.333% - 10.667px);min-width:280px}}@media (max-width: 1024px){.course-card-container{flex:0 0 calc(50% - 8px);width:calc(50% - 8px);min-width:300px}}@media (max-width: 768px){.course-card-container{flex:0 0 100%;width:100%;min-width:auto}}.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}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;align-items:flex-start;gap:16px}::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: "component", type: i6.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: "pipe", type: i5.SlicePipe, name: "slice" }] }); }
3166
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuggestMoreCoursesComponent, selector: "app-suggest-more-courses", ngImport: i0, template: "<div class=\"suggest-courses-plan\">\n <div class=\"container\">\n <mat-card class=\"mt-2\">\n <div class=\"suggest-courses-header\">\n <div>\n <div class=\"heading\">\n Suggest Courses from iGOT\n </div>\n <div class=\"sub-heading-text\">\n <p>These courses are coming from the iGOT platform</p>\n </div>\n </div>\n <div>\n <div class=\"suggest-course-control\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancel()\" />\n </div>\n <div>\n <input [disabled]=\"selectFilterCourses?.length ? false : true\"\n [ngClass]=\"selectFilterCourses?.length ? 'btn-active':'btn-disable'\" type=\"button\"\n value=\"Add\" (click)=\"addCourses()\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"search-filter-section\">\n <form [formGroup]=\"filterForm\" class=\"filters-container\">\n <div class=\"container\">\n\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\" [value]=\"searchText\"\n (input)=\"onSearchChange($any($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 formControlName=\"competency\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredCompetency\" [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 formControlName=\"rating\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredRatings\" [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 formControlName=\"language\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredLanguages\" [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 formControlName=\"duration\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let d of durations\" [value]=\"d.value\">\n {{ d.label }}\n </mat-option>\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\n {{ filterForm.value.provider?.length ? '' : 'Provider' }}\n </mat-label>\n\n <mat-select formControlName=\"provider\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredProviders\" [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\n\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 \">\n <p>No Data Found</p>\n </div> -->\n </div>\n </form>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"suggestedCourses?.length > 0\">\n <div class=\"results-header\" style=\"display: flex; justify-content: space-between; align-items: center;\">\n <div>\n <mat-checkbox [checked]=\"false\" (change)=\"selectAllCourses($event)\">Select All\n Courses</mat-checkbox>\n </div>\n <div class=\"results-info\" *ngIf=\"totalCount > 0\">\n <span class=\"text-muted\">Showing {{ startItem }} - {{ endItem }} of {{ totalCount }}\n courses</span>\n </div>\n </div>\n </div>\n <div class=\"course-card-list\">\n <div class=\"course-card-container mt-2\" *ngFor=\"let item of suggestedCourses\">\n <div>\n <div class=\"image-container\">\n <!-- \u2705 Checkbox -->\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\" class=\"image-checkbox\"\n (change)=\"selectedFilterCourses($event, item)\">\n </mat-checkbox>\n\n <!-- \u2705 Image -->\n <img [src]=\"item?.posterImage\" (error)=\"onImgError($event)\" />\n </div>\n\n <div class=\"mt-2\" style=\"width: 100px\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img src=\"assets/icons/course.svg\"></span>&nbsp;<span>Course</span>\n </div>\n </div>\n </div>\n\n <div class=\"sub-heading mt-2 cursor-pointer\" (click)=\"redirectToCoure(item)\">\n <p>{{ item?.name }}</p>\n </div>\n <div class=\"mt-2 desc\">\n <p>{{ item?.description | slice: 0:200 }}</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Pagination Controls -->\n <div class=\"pagination-controls mt-4\" *ngIf=\"totalPages > 1\"\n style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\n <button mat-icon-button [disabled]=\"!hasPreviousPage\" (click)=\"goToFirstPage()\" title=\"First Page\">\n <mat-icon>first_page</mat-icon>\n </button>\n\n <button mat-icon-button [disabled]=\"!hasPreviousPage\" (click)=\"goToPreviousPage()\"\n title=\"Previous Page\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n\n <span class=\"pagination-info\" style=\"margin: 0 15px;\">\n Page {{ currentPage + 1 }} of {{ totalPages }}\n </span>\n\n <button mat-icon-button [disabled]=\"!hasNextPage\" (click)=\"goToNextPage()\" title=\"Next Page\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n\n <button mat-icon-button [disabled]=\"!hasNextPage\" (click)=\"goToLastPage()\" title=\"Last Page\">\n <mat-icon>last_page</mat-icon>\n </button>\n </div>\n\n <!-- No Results Message -->\n <div class=\"no-results mt-4\" *ngIf=\"!loading && suggestedCourses.length === 0\"\n style=\"text-align: center; padding: 20px;\">\n <p class=\"text-muted\">{{ searchText.trim() ? 'No courses found for your search.' : 'No courses\n available.' }}</p>\n <button mat-button color=\"primary\" *ngIf=\"searchText.trim()\" (click)=\"clearSearch()\">Clear\n Search</button>\n </div>\n </mat-card>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto;width:100%;max-width:1400px;overflow:hidden}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.sub-heading-text p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:400;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:14px;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:10px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:10px;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: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;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;width:auto}.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;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;gap:16px}.course-card-container{flex:0 0 calc(25% - 12px);width:calc(25% - 12px);min-width:280px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff;padding:15px;min-height:320px;box-sizing:border-box;display:flex;flex-direction:column}.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:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.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:16px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:700;line-height:normal}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:12px;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}.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}.course-card-list{display:flex;flex-wrap:wrap;flex-direction:row;gap:16px;justify-content:flex-start;align-items:stretch}@media (max-width: 1400px){.course-card-list{justify-content:center}}.image-container img{height:150px;width:100%;object-fit:cover}.image-container{position:relative;width:100%;height:auto}.image-container img{width:100%;height:150px;border-radius:6px}.image-container .image-checkbox{position:absolute;top:8px;right:8px;background:#fff;border-radius:4px;z-index:10}.desc{word-wrap:break-word}@media (max-width: 1400px){.course-card-container{flex:0 0 calc(33.333% - 10.667px);width:calc(33.333% - 10.667px);min-width:280px}}@media (max-width: 1024px){.course-card-container{flex:0 0 calc(50% - 8px);width:calc(50% - 8px);min-width:300px}}@media (max-width: 768px){.course-card-container{flex:0 0 100%;width:100%;min-width:auto}}.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}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;align-items:flex-start;gap:16px}::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: "component", type: i6.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: "pipe", type: i5.SlicePipe, name: "slice" }] }); }
3167
3167
  }
3168
3168
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuggestMoreCoursesComponent, decorators: [{
3169
3169
  type: Component,
3170
- args: [{ selector: 'app-suggest-more-courses', template: "<div class=\"suggest-courses-plan\">\n <div class=\"container\">\n <mat-card class=\"mt-2\">\n <div class=\"suggest-courses-header\">\n <div>\n <div class=\"heading\">\n Suggest Courses from iGOT\n </div>\n <div class=\"sub-heading-text\">\n <p>These courses is coming from the iGOT platform</p>\n </div>\n </div>\n <div>\n <div class=\"suggest-course-control\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancel()\" />\n </div>\n <div>\n <input [disabled]=\"selectFilterCourses?.length ? false : true\"\n [ngClass]=\"selectFilterCourses?.length ? 'btn-active':'btn-disable'\" type=\"button\"\n value=\"Add\" (click)=\"addCourses()\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"search-filter-section\">\n <form [formGroup]=\"filterForm\" class=\"filters-container\">\n <div class=\"container\">\n\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\" [value]=\"searchText\"\n (input)=\"onSearchChange($any($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 formControlName=\"competency\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredCompetency\" [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 formControlName=\"rating\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredRatings\" [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 formControlName=\"language\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredLanguages\" [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 formControlName=\"duration\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let d of durations\" [value]=\"d.value\">\n {{ d.label }}\n </mat-option>\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\n {{ filterForm.value.provider?.length ? '' : 'Provider' }}\n </mat-label>\n\n <mat-select formControlName=\"provider\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredProviders\" [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\n\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 \">\n <p>No Data Found</p>\n </div> -->\n </div>\n </form>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"suggestedCourses?.length > 0\">\n <div class=\"results-header\" style=\"display: flex; justify-content: space-between; align-items: center;\">\n <div>\n <mat-checkbox [checked]=\"false\" (change)=\"selectAllCourses($event)\">Select All\n Courses</mat-checkbox>\n </div>\n <div class=\"results-info\" *ngIf=\"totalCount > 0\">\n <span class=\"text-muted\">Showing {{ startItem }} - {{ endItem }} of {{ totalCount }}\n courses</span>\n </div>\n </div>\n </div>\n <div class=\"course-card-list\">\n <div class=\"course-card-container mt-2\" *ngFor=\"let item of suggestedCourses\">\n <div>\n <div class=\"image-container\">\n <!-- \u2705 Checkbox -->\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\" class=\"image-checkbox\"\n (change)=\"selectedFilterCourses($event, item)\">\n </mat-checkbox>\n\n <!-- \u2705 Image -->\n <img [src]=\"item?.posterImage\" (error)=\"onImgError($event)\" />\n </div>\n\n <div class=\"mt-2\" style=\"width: 100px\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img src=\"assets/icons/course.svg\"></span>&nbsp;<span>Course</span>\n </div>\n </div>\n </div>\n\n <div class=\"sub-heading mt-2 cursor-pointer\" (click)=\"redirectToCoure(item)\">\n <p>{{ item?.name }}</p>\n </div>\n <div class=\"mt-2 desc\">\n <p>{{ item?.description | slice: 0:200 }}</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Pagination Controls -->\n <div class=\"pagination-controls mt-4\" *ngIf=\"totalPages > 1\"\n style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\n <button mat-icon-button [disabled]=\"!hasPreviousPage\" (click)=\"goToFirstPage()\" title=\"First Page\">\n <mat-icon>first_page</mat-icon>\n </button>\n\n <button mat-icon-button [disabled]=\"!hasPreviousPage\" (click)=\"goToPreviousPage()\"\n title=\"Previous Page\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n\n <span class=\"pagination-info\" style=\"margin: 0 15px;\">\n Page {{ currentPage + 1 }} of {{ totalPages }}\n </span>\n\n <button mat-icon-button [disabled]=\"!hasNextPage\" (click)=\"goToNextPage()\" title=\"Next Page\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n\n <button mat-icon-button [disabled]=\"!hasNextPage\" (click)=\"goToLastPage()\" title=\"Last Page\">\n <mat-icon>last_page</mat-icon>\n </button>\n </div>\n\n <!-- No Results Message -->\n <div class=\"no-results mt-4\" *ngIf=\"!loading && suggestedCourses.length === 0\"\n style=\"text-align: center; padding: 20px;\">\n <p class=\"text-muted\">{{ searchText.trim() ? 'No courses found for your search.' : 'No courses\n available.' }}</p>\n <button mat-button color=\"primary\" *ngIf=\"searchText.trim()\" (click)=\"clearSearch()\">Clear\n Search</button>\n </div>\n </mat-card>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto;width:100%;max-width:1400px;overflow:hidden}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.sub-heading-text p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:400;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:14px;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:10px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:10px;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: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;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;width:auto}.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;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;gap:16px}.course-card-container{flex:0 0 calc(25% - 12px);width:calc(25% - 12px);min-width:280px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff;padding:15px;min-height:320px;box-sizing:border-box;display:flex;flex-direction:column}.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:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.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:16px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:700;line-height:normal}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:12px;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}.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}.course-card-list{display:flex;flex-wrap:wrap;flex-direction:row;gap:16px;justify-content:flex-start;align-items:stretch}@media (max-width: 1400px){.course-card-list{justify-content:center}}.image-container img{height:150px;width:100%;object-fit:cover}.image-container{position:relative;width:100%;height:auto}.image-container img{width:100%;height:150px;border-radius:6px}.image-container .image-checkbox{position:absolute;top:8px;right:8px;background:#fff;border-radius:4px;z-index:10}.desc{word-wrap:break-word}@media (max-width: 1400px){.course-card-container{flex:0 0 calc(33.333% - 10.667px);width:calc(33.333% - 10.667px);min-width:280px}}@media (max-width: 1024px){.course-card-container{flex:0 0 calc(50% - 8px);width:calc(50% - 8px);min-width:300px}}@media (max-width: 768px){.course-card-container{flex:0 0 100%;width:100%;min-width:auto}}.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}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;align-items:flex-start;gap:16px}::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"] }]
3170
+ args: [{ selector: 'app-suggest-more-courses', template: "<div class=\"suggest-courses-plan\">\n <div class=\"container\">\n <mat-card class=\"mt-2\">\n <div class=\"suggest-courses-header\">\n <div>\n <div class=\"heading\">\n Suggest Courses from iGOT\n </div>\n <div class=\"sub-heading-text\">\n <p>These courses are coming from the iGOT platform</p>\n </div>\n </div>\n <div>\n <div class=\"suggest-course-control\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancel()\" />\n </div>\n <div>\n <input [disabled]=\"selectFilterCourses?.length ? false : true\"\n [ngClass]=\"selectFilterCourses?.length ? 'btn-active':'btn-disable'\" type=\"button\"\n value=\"Add\" (click)=\"addCourses()\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"search-filter-section\">\n <form [formGroup]=\"filterForm\" class=\"filters-container\">\n <div class=\"container\">\n\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\" [value]=\"searchText\"\n (input)=\"onSearchChange($any($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 formControlName=\"competency\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredCompetency\" [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 formControlName=\"rating\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredRatings\" [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 formControlName=\"language\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredLanguages\" [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 formControlName=\"duration\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let d of durations\" [value]=\"d.value\">\n {{ d.label }}\n </mat-option>\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\n {{ filterForm.value.provider?.length ? '' : 'Provider' }}\n </mat-label>\n\n <mat-select formControlName=\"provider\" multiple\n panelClass=\"select-search-panel\" (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input\n style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput 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 *ngFor=\"let r of filteredProviders\" [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\n\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 \">\n <p>No Data Found</p>\n </div> -->\n </div>\n </form>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"suggestedCourses?.length > 0\">\n <div class=\"results-header\" style=\"display: flex; justify-content: space-between; align-items: center;\">\n <div>\n <mat-checkbox [checked]=\"false\" (change)=\"selectAllCourses($event)\">Select All\n Courses</mat-checkbox>\n </div>\n <div class=\"results-info\" *ngIf=\"totalCount > 0\">\n <span class=\"text-muted\">Showing {{ startItem }} - {{ endItem }} of {{ totalCount }}\n courses</span>\n </div>\n </div>\n </div>\n <div class=\"course-card-list\">\n <div class=\"course-card-container mt-2\" *ngFor=\"let item of suggestedCourses\">\n <div>\n <div class=\"image-container\">\n <!-- \u2705 Checkbox -->\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\" class=\"image-checkbox\"\n (change)=\"selectedFilterCourses($event, item)\">\n </mat-checkbox>\n\n <!-- \u2705 Image -->\n <img [src]=\"item?.posterImage\" (error)=\"onImgError($event)\" />\n </div>\n\n <div class=\"mt-2\" style=\"width: 100px\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img src=\"assets/icons/course.svg\"></span>&nbsp;<span>Course</span>\n </div>\n </div>\n </div>\n\n <div class=\"sub-heading mt-2 cursor-pointer\" (click)=\"redirectToCoure(item)\">\n <p>{{ item?.name }}</p>\n </div>\n <div class=\"mt-2 desc\">\n <p>{{ item?.description | slice: 0:200 }}</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Pagination Controls -->\n <div class=\"pagination-controls mt-4\" *ngIf=\"totalPages > 1\"\n style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\n <button mat-icon-button [disabled]=\"!hasPreviousPage\" (click)=\"goToFirstPage()\" title=\"First Page\">\n <mat-icon>first_page</mat-icon>\n </button>\n\n <button mat-icon-button [disabled]=\"!hasPreviousPage\" (click)=\"goToPreviousPage()\"\n title=\"Previous Page\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n\n <span class=\"pagination-info\" style=\"margin: 0 15px;\">\n Page {{ currentPage + 1 }} of {{ totalPages }}\n </span>\n\n <button mat-icon-button [disabled]=\"!hasNextPage\" (click)=\"goToNextPage()\" title=\"Next Page\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n\n <button mat-icon-button [disabled]=\"!hasNextPage\" (click)=\"goToLastPage()\" title=\"Last Page\">\n <mat-icon>last_page</mat-icon>\n </button>\n </div>\n\n <!-- No Results Message -->\n <div class=\"no-results mt-4\" *ngIf=\"!loading && suggestedCourses.length === 0\"\n style=\"text-align: center; padding: 20px;\">\n <p class=\"text-muted\">{{ searchText.trim() ? 'No courses found for your search.' : 'No courses\n available.' }}</p>\n <button mat-button color=\"primary\" *ngIf=\"searchText.trim()\" (click)=\"clearSearch()\">Clear\n Search</button>\n </div>\n </mat-card>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto;width:100%;max-width:1400px;overflow:hidden}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.sub-heading-text p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:400;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:14px;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:10px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:10px;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: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;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;width:auto}.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;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;gap:16px}.course-card-container{flex:0 0 calc(25% - 12px);width:calc(25% - 12px);min-width:280px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff;padding:15px;min-height:320px;box-sizing:border-box;display:flex;flex-direction:column}.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:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.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:16px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:700;line-height:normal}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:12px;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}.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}.course-card-list{display:flex;flex-wrap:wrap;flex-direction:row;gap:16px;justify-content:flex-start;align-items:stretch}@media (max-width: 1400px){.course-card-list{justify-content:center}}.image-container img{height:150px;width:100%;object-fit:cover}.image-container{position:relative;width:100%;height:auto}.image-container img{width:100%;height:150px;border-radius:6px}.image-container .image-checkbox{position:absolute;top:8px;right:8px;background:#fff;border-radius:4px;z-index:10}.desc{word-wrap:break-word}@media (max-width: 1400px){.course-card-container{flex:0 0 calc(33.333% - 10.667px);width:calc(33.333% - 10.667px);min-width:280px}}@media (max-width: 1024px){.course-card-container{flex:0 0 calc(50% - 8px);width:calc(50% - 8px);min-width:300px}}@media (max-width: 768px){.course-card-container{flex:0 0 100%;width:100%;min-width:auto}}.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}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;align-items:flex-start;gap:16px}::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"] }]
3171
3171
  }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
3172
3172
  type: Inject,
3173
3173
  args: [MAT_DIALOG_DATA]
@@ -3860,6 +3860,13 @@ class GenerateCourseRecommendationComponent {
3860
3860
  'Finalizing course recommendation plan...'
3861
3861
  ];
3862
3862
  this.stageStartTime = 0;
3863
+ // Tracks the single active fake-progress ticker (normal generate or regenerate).
3864
+ // Must be explicitly cleared wherever the display is finalized/reset instead of
3865
+ // letting the interval infer completion from `loading`/`isRegeneratingWithProgress`
3866
+ // (those flags flip for reasons other than real completion, e.g. the
3867
+ // "recommendations already exist" pause, which previously caused the progress
3868
+ // display to jump to 100% and then reset back to 0%).
3869
+ this.progressTimerId = null;
3863
3870
  this.searchText = '';
3864
3871
  this.filterdCourses = [];
3865
3872
  this.originalData = [];
@@ -3964,8 +3971,23 @@ class GenerateCourseRecommendationComponent {
3964
3971
  console.log('this.selectFilterCourses', this.selectFilterCourses);
3965
3972
  }
3966
3973
  closeDialog() {
3974
+ this.stopProgressiveLoading();
3967
3975
  this.dialogRef.close();
3968
3976
  }
3977
+ ngOnDestroy() {
3978
+ this.stopProgressiveLoading();
3979
+ }
3980
+ /**
3981
+ * Stop the fake-progress ticker (shared by generate and regenerate flows).
3982
+ * Callers decide what progressPercentage/currentProcessingStage should be
3983
+ * afterwards - this only stops it from continuing to tick and overwrite them.
3984
+ */
3985
+ stopProgressiveLoading() {
3986
+ if (this.progressTimerId) {
3987
+ clearInterval(this.progressTimerId);
3988
+ this.progressTimerId = null;
3989
+ }
3990
+ }
3969
3991
  saveCourses() {
3970
3992
  this.loading = true;
3971
3993
  console.log('this.planData', this.planData);
@@ -4442,8 +4464,8 @@ class GenerateCourseRecommendationComponent {
4442
4464
  console.log('allCourses--', allCourses);
4443
4465
  allCourses.forEach((item) => {
4444
4466
  if (item && item.organisation && item.organisation.length) {
4445
- if (this.filteredProviders.indexOf(item.organisation[0]) < 0) {
4446
- this.filteredProviders.push(item.organisation[0]);
4467
+ if (this.filteredProviders.indexOf(item.organisation) < 0) {
4468
+ this.filteredProviders.push(item.organisation);
4447
4469
  }
4448
4470
  }
4449
4471
  });
@@ -5269,6 +5291,7 @@ class GenerateCourseRecommendationComponent {
5269
5291
  });
5270
5292
  }
5271
5293
  finally {
5294
+ this.stopProgressiveLoading();
5272
5295
  this.isRegenerating = false;
5273
5296
  this.isRegeneratingWithProgress = false;
5274
5297
  this.dataLoaded = true; // Ensure main content is shown after regeneration
@@ -5405,6 +5428,7 @@ class GenerateCourseRecommendationComponent {
5405
5428
  * SUCCESS CASE (status COMPLETED)
5406
5429
  -------------------------------- */
5407
5430
  if (res?.status === 'COMPLETED') {
5431
+ this.stopProgressiveLoading();
5408
5432
  this.isRegeneratingWithProgress = false;
5409
5433
  this.progressPercentage = 100;
5410
5434
  this.currentProcessingStage = 'Course recommendations regenerated successfully!';
@@ -5424,6 +5448,7 @@ class GenerateCourseRecommendationComponent {
5424
5448
  this.currentProcessingStage = 'Loading existing course recommendations...';
5425
5449
  this.sharedService.getRecommendedCourse(role_mapping_id).subscribe({
5426
5450
  next: (existingData) => {
5451
+ this.stopProgressiveLoading();
5427
5452
  this.progressPercentage = 100;
5428
5453
  this.currentProcessingStage = 'Loaded existing course recommendations successfully!';
5429
5454
  setTimeout(() => {
@@ -5437,6 +5462,7 @@ class GenerateCourseRecommendationComponent {
5437
5462
  return;
5438
5463
  }
5439
5464
  /** Any other error → stop & reject */
5465
+ this.stopProgressiveLoading();
5440
5466
  this.isRegeneratingWithProgress = false;
5441
5467
  this.currentProcessingStage = '';
5442
5468
  this.progressPercentage = 0;
@@ -5445,16 +5471,22 @@ class GenerateCourseRecommendationComponent {
5445
5471
  }
5446
5472
  /** ------------------------------
5447
5473
  * STILL PROCESSING (keep polling)
5474
+ * Progress/stage text is driven solely by
5475
+ * simulateRegenerativeProgressiveStages() (time-based);
5476
+ * do not also set it here or the display flickers
5477
+ * back and forth between the two sources.
5448
5478
  ------------------------------- */
5449
- this.progressPercentage = Math.min(this.progressPercentage + 10, 95);
5450
- this.currentProcessingStage = 'Still processing course recommendations...';
5451
5479
  },
5452
- error: err => reject(err)
5480
+ error: err => {
5481
+ this.stopProgressiveLoading();
5482
+ reject(err);
5483
+ }
5453
5484
  });
5454
5485
  });
5455
5486
  }
5456
5487
  // Progressive loading methods for regeneration
5457
5488
  startRegenerativeProgressiveLoading() {
5489
+ this.stopProgressiveLoading();
5458
5490
  this.currentProcessingStage = this.processingStages[0];
5459
5491
  this.progressPercentage = 0;
5460
5492
  this.stageStartTime = Date.now();
@@ -5464,12 +5496,10 @@ class GenerateCourseRecommendationComponent {
5464
5496
  let currentStageIndex = 0;
5465
5497
  const totalDuration = 60000; // 60 seconds estimated duration
5466
5498
  const stageInterval = totalDuration / this.processingStages.length;
5467
- const progressInterval = setInterval(() => {
5468
- // Stop if regeneration is complete
5469
- if (!this.isRegeneratingWithProgress) {
5470
- clearInterval(progressInterval);
5471
- return;
5472
- }
5499
+ // Completion/error/reset are all set explicitly by the caller (via
5500
+ // stopProgressiveLoading()); this ticker only ever ramps the display
5501
+ // up while active, it never infers completion on its own.
5502
+ this.progressTimerId = setInterval(() => {
5473
5503
  const elapsed = Date.now() - this.stageStartTime;
5474
5504
  const currentStageProgress = (elapsed % stageInterval) / stageInterval;
5475
5505
  const stageIndex = Math.min(Math.floor(elapsed / stageInterval), this.processingStages.length - 1);
@@ -5481,7 +5511,13 @@ class GenerateCourseRecommendationComponent {
5481
5511
  // Calculate overall progress (each stage is worth ~16.67%)
5482
5512
  const baseProgress = (stageIndex / this.processingStages.length) * 100;
5483
5513
  const stageProgress = (currentStageProgress / this.processingStages.length) * 100;
5484
- this.progressPercentage = Math.min(Math.round(baseProgress + stageProgress), 95);
5514
+ const computedProgress = Math.min(Math.round(baseProgress + stageProgress), 95);
5515
+ // Once the last stage is reached, `elapsed % stageInterval` keeps cycling
5516
+ // every `stageInterval` ms even though `stageIndex` is clamped - without
5517
+ // this guard the display would climb to 95% then drop back down and
5518
+ // repeat for as long as generation runs past the assumed 60s duration
5519
+ // (real generation commonly takes 1-2 minutes). Never let it regress.
5520
+ this.progressPercentage = Math.max(this.progressPercentage, computedProgress);
5485
5521
  }, 1000);
5486
5522
  }
5487
5523
  /**
@@ -5543,6 +5579,7 @@ class GenerateCourseRecommendationComponent {
5543
5579
  }
5544
5580
  // Progressive loading methods for course generation
5545
5581
  startProgressiveLoading() {
5582
+ this.stopProgressiveLoading();
5546
5583
  this.currentProcessingStage = this.processingStages[0];
5547
5584
  this.progressPercentage = 0;
5548
5585
  this.stageStartTime = Date.now();
@@ -5552,7 +5589,10 @@ class GenerateCourseRecommendationComponent {
5552
5589
  let currentStageIndex = 0;
5553
5590
  const totalDuration = 60000; // 60 seconds estimated duration
5554
5591
  const stageInterval = totalDuration / this.processingStages.length;
5555
- const progressInterval = setInterval(() => {
5592
+ // Completion/error/reset are all set explicitly by the caller (via
5593
+ // stopProgressiveLoading()); this ticker only ever ramps the display
5594
+ // up while active, it never infers completion on its own.
5595
+ this.progressTimerId = setInterval(() => {
5556
5596
  const elapsed = Date.now() - this.stageStartTime;
5557
5597
  const currentStageProgress = (elapsed % stageInterval) / stageInterval;
5558
5598
  const stageIndex = Math.min(Math.floor(elapsed / stageInterval), this.processingStages.length - 1);
@@ -5564,13 +5604,13 @@ class GenerateCourseRecommendationComponent {
5564
5604
  // Calculate overall progress (each stage is worth ~16.67%)
5565
5605
  const baseProgress = (stageIndex / this.processingStages.length) * 100;
5566
5606
  const stageProgress = (currentStageProgress / this.processingStages.length) * 100;
5567
- this.progressPercentage = Math.min(Math.round(baseProgress + stageProgress), 95);
5568
- // Clear interval when loading stops
5569
- if (!this.loading) {
5570
- clearInterval(progressInterval);
5571
- this.progressPercentage = 100;
5572
- this.currentProcessingStage = 'Course recommendations generated successfully!';
5573
- }
5607
+ const computedProgress = Math.min(Math.round(baseProgress + stageProgress), 95);
5608
+ // Once the last stage is reached, `elapsed % stageInterval` keeps cycling
5609
+ // every `stageInterval` ms even though `stageIndex` is clamped - without
5610
+ // this guard the display would climb to 95% then drop back down and
5611
+ // repeat for as long as generation runs past the assumed 60s duration
5612
+ // (real generation commonly takes 1-2 minutes). Never let it regress.
5613
+ this.progressPercentage = Math.max(this.progressPercentage, computedProgress);
5574
5614
  }, 1000);
5575
5615
  }
5576
5616
  // Enhanced course generation with progressive loading
@@ -5607,6 +5647,10 @@ class GenerateCourseRecommendationComponent {
5607
5647
  // EXISTING RECOMMENDATIONS
5608
5648
  // ===========================
5609
5649
  if (this.firstApiResponse?.is_existing && this.existingRecommendationFound) {
5650
+ // Not a real completion - just pausing for user input. Stop the
5651
+ // fake-progress ticker now so it can't wake up a second later,
5652
+ // see `loading` is false, and flash the display to 100%/"success".
5653
+ this.stopProgressiveLoading();
5610
5654
  const dialogRef = this.dialog.open(DeleteRoleMappingPopupComponent, {
5611
5655
  data: {
5612
5656
  from: 'generateCourseRecommendations' // index for UI removal
@@ -5651,6 +5695,7 @@ class GenerateCourseRecommendationComponent {
5651
5695
  // COMPLETED
5652
5696
  // ===========================
5653
5697
  if (response?.status === 'COMPLETED') {
5698
+ this.stopProgressiveLoading();
5654
5699
  this.progressPercentage = 100;
5655
5700
  this.dataLoaded = true;
5656
5701
  this.currentProcessingStage =
@@ -5667,6 +5712,7 @@ class GenerateCourseRecommendationComponent {
5667
5712
  }
5668
5713
  },
5669
5714
  error: (error) => {
5715
+ this.stopProgressiveLoading();
5670
5716
  this.loading = false;
5671
5717
  this.currentProcessingStage = '';
5672
5718
  this.progressPercentage = 0;
@@ -5830,11 +5876,11 @@ class GenerateCourseRecommendationComponent {
5830
5876
  });
5831
5877
  }
5832
5878
  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 }); }
5833
- 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>&nbsp;<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 &nbsp; \u2022 &nbsp;\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 &nbsp; \u2022 &nbsp;\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 &nbsp; \u2022 &nbsp;\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}}&nbsp; \u2022 &nbsp;\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}}&nbsp; \u2022 &nbsp;\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}}&nbsp; \u2022 &nbsp;\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" }] }); }
5879
+ 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 Courses 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>&nbsp;<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 &nbsp; \u2022 &nbsp;\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 &nbsp; \u2022 &nbsp;\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 &nbsp; \u2022 &nbsp;\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}}&nbsp; \u2022 &nbsp;\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}}&nbsp; \u2022 &nbsp;\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}}&nbsp; \u2022 &nbsp;\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" }] }); }
5834
5880
  }
5835
5881
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GenerateCourseRecommendationComponent, decorators: [{
5836
5882
  type: Component,
5837
- 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>&nbsp;<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 &nbsp; \u2022 &nbsp;\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 &nbsp; \u2022 &nbsp;\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 &nbsp; \u2022 &nbsp;\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}}&nbsp; \u2022 &nbsp;\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}}&nbsp; \u2022 &nbsp;\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}}&nbsp; \u2022 &nbsp;\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"] }]
5883
+ 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 Courses 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>&nbsp;<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 &nbsp; \u2022 &nbsp;\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 &nbsp; \u2022 &nbsp;\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 &nbsp; \u2022 &nbsp;\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}}&nbsp; \u2022 &nbsp;\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}}&nbsp; \u2022 &nbsp;\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}}&nbsp; \u2022 &nbsp;\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"] }]
5838
5884
  }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
5839
5885
  type: Inject,
5840
5886
  args: [MAT_DIALOG_DATA]
@@ -6667,11 +6713,11 @@ class ViewCourseRecommendationComponent {
6667
6713
  });
6668
6714
  }
6669
6715
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewCourseRecommendationComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SharedService }, { token: i1$1.MatDialog }, { token: i3$1.MatSnackBar }, { token: i3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
6670
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewCourseRecommendationComponent, selector: "app-view-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 <div class=\"popup-header\">\n <div>\n <div class=\"heading\">View Course Recommendation</div>\n </div>\n <div class=\"right-section\">\n <div class=\"btn-group-compact\">\n <div *ngIf=\"sharedService.fromMdoPortal && data?.requestStatus?.toLowerCase() == 'pending'\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Course From iGOT\"\n (click)=\"suggestMoreCourses()\" />\n </div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-2\" #pdfContent>\n <div class=\"ministry-heading mt-2\">\n <span *ngIf=\"!cbpPlanData?.department_name\">{{cbpPlanData?.ministry?.orgName}}</span>\n <span *ngIf=\"cbpPlanData?.department_name\">{{cbpPlanData?.department_name}}</span>\n <span *ngIf=\"planData?.designation_name\">\n <span *ngIf=\"!(sharedService.fromMdoPortal)\"> / </span>\n {{planData?.designation_name}}</span>\n </div>\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n iGOT Platform Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.igot}}\n </div>\n </div>\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Public Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.public_courses}}\n\n </div>\n </div>\n\n </div>\n <div class=\"my-4\">\n\n <div class=\"course-list-container\">\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n\n <div>\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img src=\"assets/icons/course.svg\"></span>&nbsp;<span>Course</span>\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 <span>AI Recommended</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 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 src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" 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 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 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 src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" 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 src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[0]}}</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 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 src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" 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 src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[0]}}</span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title mt-4\">\n <div class=\"cursor-pointer\">\n <div *ngIf=\"item?.course && (!sharedService?.fromMdoPortal)\" (click)=\"redirectToCoure(item)\">{{item?.course}}</div>\n <div *ngIf=\"item?.name && (sharedService?.fromMdoPortal)\" (click)=\"redirectToCoure(item)\">\n {{item?.name}}</div>\n </div>\n </div>\n <div class=\"course-desc mt-2\">\n <div *ngIf=\"isPDFDownload || sharedService?.fromMdoPortal\">\n <div>{{item?.rationale}}</div>\n </div>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\" *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)\" 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\" *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)\" 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\" *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\" (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2 d-flex justify-content-between item\">\n <div class=\"relevancy-container\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\" *ngIf=\"item?.relevancy\">{{item?.relevancy}}%</div>\n <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n </div>\n <div class=\"delete-button\" *ngIf=\"!(data?.fromRequestPage) || (sharedService?.fromMdoPortal && data?.requestStatus?.toLowerCase() === 'pending')\">\n <mat-icon matTooltip=\"Delete Course\" matTooltipPosition=\"above\"\n class=\"text-danger cursor-pointer\" (click)=\"deleteCard(item, i)\">delete</mat-icon>\n </div>\n </div>\n <!-- <div>\n <div class=\"competencies-matched-container\">\n <div class=\"competencies-matched\">Competencies Matched</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">80%</div>\n </div>\n </div> -->\n </div>\n <!-- <div class=\"course-list-item\">\n <div class=\"course-header\">\n <div>\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">Course</div>\n </div>\n </div>\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 <span>AI Recommended</span>\n\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title\">\n <div>\n <div>Maternal, Infant And Young Child Nutrition</div>\n </div>\n </div>\n <div class=\"course-desc\">\n <div>\n <div>This Course directly addresses a primary responsibility of Anganwandi Care takers,\n which is\n to provide and educate on nutrition for mother and young children</div>\n </div>\n </div>\n <div>\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">90%</div>\n </div>\n </div>\n <div>\n <div class=\"competencies-matched-container\">\n <div class=\"competencies-matched\">Competencies Matched</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">80%</div>\n </div>\n </div>\n </div> -->\n\n </div>\n </div>\n </div>\n <div class=\"popup-footer\" *ngIf=\"filterdCourses?.length\">\n <div *ngIf=\"!(data?.fromRequestPage)\">\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPdfFromBE()\" />\n </div>\n <!-- <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add Personalisation\" (click)=\"addPersonilisation()\"/>\n </div> -->\n <!-- <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add More Courses\" (click)=\"addMoreCourses()\"/>\n </div> -->\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\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}.ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:20px;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;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-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}.delete-button input{background-color:#b60a0a;border-radius:10px}.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:normal;gap:16px;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:16px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:18px;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}.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}.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{display:flex;flex-direction:column;gap:16px}.search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.search-container-compact{flex:0 0 auto;min-width:280px}.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:1px solid #d5d0d0;padding:8px 12px 8px 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}.right-section{display:flex;flex-direction:row;gap:16px}\n"], dependencies: [{ 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: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
6716
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewCourseRecommendationComponent, selector: "app-view-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 <div class=\"popup-header\">\n <div>\n <div class=\"heading\">View Course Recommendation</div>\n </div>\n <div class=\"right-section\">\n <div class=\"btn-group-compact\">\n <div *ngIf=\"sharedService.fromMdoPortal && data?.requestStatus?.toLowerCase() == 'pending'\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Courses from iGOT\"\n (click)=\"suggestMoreCourses()\" />\n </div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-2\" #pdfContent>\n <div class=\"ministry-heading mt-2\">\n <span *ngIf=\"!cbpPlanData?.department_name\">{{cbpPlanData?.ministry?.orgName}}</span>\n <span *ngIf=\"cbpPlanData?.department_name\">{{cbpPlanData?.department_name}}</span>\n <span *ngIf=\"planData?.designation_name\">\n <span *ngIf=\"!(sharedService.fromMdoPortal)\"> / </span>\n {{planData?.designation_name}}</span>\n </div>\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n iGOT Platform Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.igot}}\n </div>\n </div>\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Public Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.public_courses}}\n\n </div>\n </div>\n\n </div>\n <div class=\"my-4\">\n\n <div class=\"course-list-container\">\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n\n <div>\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img src=\"assets/icons/course.svg\"></span>&nbsp;<span>Course</span>\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 <span>AI Recommended</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 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 src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" 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 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 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 src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" 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 src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[0]}}</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 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 src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" 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 src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[0]}}</span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title mt-4\">\n <div class=\"cursor-pointer\">\n <div *ngIf=\"item?.course && (!sharedService?.fromMdoPortal)\" (click)=\"redirectToCoure(item)\">{{item?.course}}</div>\n <div *ngIf=\"item?.name && (sharedService?.fromMdoPortal)\" (click)=\"redirectToCoure(item)\">\n {{item?.name}}</div>\n </div>\n </div>\n <div class=\"course-desc mt-2\">\n <div *ngIf=\"isPDFDownload || sharedService?.fromMdoPortal\">\n <div>{{item?.rationale}}</div>\n </div>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\" *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)\" 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\" *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)\" 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\" *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\" (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2 d-flex justify-content-between item\">\n <div class=\"relevancy-container\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\" *ngIf=\"item?.relevancy\">{{item?.relevancy}}%</div>\n <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n </div>\n <div class=\"delete-button\" *ngIf=\"!(data?.fromRequestPage) || (sharedService?.fromMdoPortal && data?.requestStatus?.toLowerCase() === 'pending')\">\n <mat-icon matTooltip=\"Delete Course\" matTooltipPosition=\"above\"\n class=\"text-danger cursor-pointer\" (click)=\"deleteCard(item, i)\">delete</mat-icon>\n </div>\n </div>\n <!-- <div>\n <div class=\"competencies-matched-container\">\n <div class=\"competencies-matched\">Competencies Matched</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">80%</div>\n </div>\n </div> -->\n </div>\n <!-- <div class=\"course-list-item\">\n <div class=\"course-header\">\n <div>\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">Course</div>\n </div>\n </div>\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 <span>AI Recommended</span>\n\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title\">\n <div>\n <div>Maternal, Infant And Young Child Nutrition</div>\n </div>\n </div>\n <div class=\"course-desc\">\n <div>\n <div>This Course directly addresses a primary responsibility of Anganwandi Care takers,\n which is\n to provide and educate on nutrition for mother and young children</div>\n </div>\n </div>\n <div>\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">90%</div>\n </div>\n </div>\n <div>\n <div class=\"competencies-matched-container\">\n <div class=\"competencies-matched\">Competencies Matched</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">80%</div>\n </div>\n </div>\n </div> -->\n\n </div>\n </div>\n </div>\n <div class=\"popup-footer\" *ngIf=\"filterdCourses?.length\">\n <div *ngIf=\"!(data?.fromRequestPage)\">\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPdfFromBE()\" />\n </div>\n <!-- <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add Personalisation\" (click)=\"addPersonilisation()\"/>\n </div> -->\n <!-- <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add More Courses\" (click)=\"addMoreCourses()\"/>\n </div> -->\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\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}.ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:20px;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;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-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}.delete-button input{background-color:#b60a0a;border-radius:10px}.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:normal;gap:16px;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:16px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:18px;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}.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}.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{display:flex;flex-direction:column;gap:16px}.search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.search-container-compact{flex:0 0 auto;min-width:280px}.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:1px solid #d5d0d0;padding:8px 12px 8px 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}.right-section{display:flex;flex-direction:row;gap:16px}\n"], dependencies: [{ 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: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
6671
6717
  }
6672
6718
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewCourseRecommendationComponent, decorators: [{
6673
6719
  type: Component,
6674
- args: [{ selector: 'app-view-course-recommendation', template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">View Course Recommendation</div>\n </div>\n <div class=\"right-section\">\n <div class=\"btn-group-compact\">\n <div *ngIf=\"sharedService.fromMdoPortal && data?.requestStatus?.toLowerCase() == 'pending'\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Course From iGOT\"\n (click)=\"suggestMoreCourses()\" />\n </div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-2\" #pdfContent>\n <div class=\"ministry-heading mt-2\">\n <span *ngIf=\"!cbpPlanData?.department_name\">{{cbpPlanData?.ministry?.orgName}}</span>\n <span *ngIf=\"cbpPlanData?.department_name\">{{cbpPlanData?.department_name}}</span>\n <span *ngIf=\"planData?.designation_name\">\n <span *ngIf=\"!(sharedService.fromMdoPortal)\"> / </span>\n {{planData?.designation_name}}</span>\n </div>\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n iGOT Platform Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.igot}}\n </div>\n </div>\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Public Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.public_courses}}\n\n </div>\n </div>\n\n </div>\n <div class=\"my-4\">\n\n <div class=\"course-list-container\">\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n\n <div>\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img src=\"assets/icons/course.svg\"></span>&nbsp;<span>Course</span>\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 <span>AI Recommended</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 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 src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" 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 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 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 src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" 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 src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[0]}}</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 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 src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" 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 src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[0]}}</span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title mt-4\">\n <div class=\"cursor-pointer\">\n <div *ngIf=\"item?.course && (!sharedService?.fromMdoPortal)\" (click)=\"redirectToCoure(item)\">{{item?.course}}</div>\n <div *ngIf=\"item?.name && (sharedService?.fromMdoPortal)\" (click)=\"redirectToCoure(item)\">\n {{item?.name}}</div>\n </div>\n </div>\n <div class=\"course-desc mt-2\">\n <div *ngIf=\"isPDFDownload || sharedService?.fromMdoPortal\">\n <div>{{item?.rationale}}</div>\n </div>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\" *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)\" 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\" *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)\" 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\" *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\" (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2 d-flex justify-content-between item\">\n <div class=\"relevancy-container\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\" *ngIf=\"item?.relevancy\">{{item?.relevancy}}%</div>\n <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n </div>\n <div class=\"delete-button\" *ngIf=\"!(data?.fromRequestPage) || (sharedService?.fromMdoPortal && data?.requestStatus?.toLowerCase() === 'pending')\">\n <mat-icon matTooltip=\"Delete Course\" matTooltipPosition=\"above\"\n class=\"text-danger cursor-pointer\" (click)=\"deleteCard(item, i)\">delete</mat-icon>\n </div>\n </div>\n <!-- <div>\n <div class=\"competencies-matched-container\">\n <div class=\"competencies-matched\">Competencies Matched</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">80%</div>\n </div>\n </div> -->\n </div>\n <!-- <div class=\"course-list-item\">\n <div class=\"course-header\">\n <div>\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">Course</div>\n </div>\n </div>\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 <span>AI Recommended</span>\n\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title\">\n <div>\n <div>Maternal, Infant And Young Child Nutrition</div>\n </div>\n </div>\n <div class=\"course-desc\">\n <div>\n <div>This Course directly addresses a primary responsibility of Anganwandi Care takers,\n which is\n to provide and educate on nutrition for mother and young children</div>\n </div>\n </div>\n <div>\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">90%</div>\n </div>\n </div>\n <div>\n <div class=\"competencies-matched-container\">\n <div class=\"competencies-matched\">Competencies Matched</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">80%</div>\n </div>\n </div>\n </div> -->\n\n </div>\n </div>\n </div>\n <div class=\"popup-footer\" *ngIf=\"filterdCourses?.length\">\n <div *ngIf=\"!(data?.fromRequestPage)\">\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPdfFromBE()\" />\n </div>\n <!-- <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add Personalisation\" (click)=\"addPersonilisation()\"/>\n </div> -->\n <!-- <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add More Courses\" (click)=\"addMoreCourses()\"/>\n </div> -->\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\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}.ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:20px;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;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-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}.delete-button input{background-color:#b60a0a;border-radius:10px}.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:normal;gap:16px;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:16px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:18px;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}.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}.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{display:flex;flex-direction:column;gap:16px}.search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.search-container-compact{flex:0 0 auto;min-width:280px}.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:1px solid #d5d0d0;padding:8px 12px 8px 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}.right-section{display:flex;flex-direction:row;gap:16px}\n"] }]
6720
+ args: [{ selector: 'app-view-course-recommendation', template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">View Course Recommendation</div>\n </div>\n <div class=\"right-section\">\n <div class=\"btn-group-compact\">\n <div *ngIf=\"sharedService.fromMdoPortal && data?.requestStatus?.toLowerCase() == 'pending'\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Courses from iGOT\"\n (click)=\"suggestMoreCourses()\" />\n </div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-2\" #pdfContent>\n <div class=\"ministry-heading mt-2\">\n <span *ngIf=\"!cbpPlanData?.department_name\">{{cbpPlanData?.ministry?.orgName}}</span>\n <span *ngIf=\"cbpPlanData?.department_name\">{{cbpPlanData?.department_name}}</span>\n <span *ngIf=\"planData?.designation_name\">\n <span *ngIf=\"!(sharedService.fromMdoPortal)\"> / </span>\n {{planData?.designation_name}}</span>\n </div>\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n iGOT Platform Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.igot}}\n </div>\n </div>\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Public Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.public_courses}}\n\n </div>\n </div>\n\n </div>\n <div class=\"my-4\">\n\n <div class=\"course-list-container\">\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n\n <div>\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img src=\"assets/icons/course.svg\"></span>&nbsp;<span>Course</span>\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 <span>AI Recommended</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 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 src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" 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 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 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 src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" 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 src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[0]}}</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 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 src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" 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 src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[0]}}</span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title mt-4\">\n <div class=\"cursor-pointer\">\n <div *ngIf=\"item?.course && (!sharedService?.fromMdoPortal)\" (click)=\"redirectToCoure(item)\">{{item?.course}}</div>\n <div *ngIf=\"item?.name && (sharedService?.fromMdoPortal)\" (click)=\"redirectToCoure(item)\">\n {{item?.name}}</div>\n </div>\n </div>\n <div class=\"course-desc mt-2\">\n <div *ngIf=\"isPDFDownload || sharedService?.fromMdoPortal\">\n <div>{{item?.rationale}}</div>\n </div>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\" *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)\" 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\" *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)\" 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\" *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\" (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2 d-flex justify-content-between item\">\n <div class=\"relevancy-container\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\" *ngIf=\"item?.relevancy\">{{item?.relevancy}}%</div>\n <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n </div>\n <div class=\"delete-button\" *ngIf=\"!(data?.fromRequestPage) || (sharedService?.fromMdoPortal && data?.requestStatus?.toLowerCase() === 'pending')\">\n <mat-icon matTooltip=\"Delete Course\" matTooltipPosition=\"above\"\n class=\"text-danger cursor-pointer\" (click)=\"deleteCard(item, i)\">delete</mat-icon>\n </div>\n </div>\n <!-- <div>\n <div class=\"competencies-matched-container\">\n <div class=\"competencies-matched\">Competencies Matched</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">80%</div>\n </div>\n </div> -->\n </div>\n <!-- <div class=\"course-list-item\">\n <div class=\"course-header\">\n <div>\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">Course</div>\n </div>\n </div>\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 <span>AI Recommended</span>\n\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title\">\n <div>\n <div>Maternal, Infant And Young Child Nutrition</div>\n </div>\n </div>\n <div class=\"course-desc\">\n <div>\n <div>This Course directly addresses a primary responsibility of Anganwandi Care takers,\n which is\n to provide and educate on nutrition for mother and young children</div>\n </div>\n </div>\n <div>\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">90%</div>\n </div>\n </div>\n <div>\n <div class=\"competencies-matched-container\">\n <div class=\"competencies-matched\">Competencies Matched</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">80%</div>\n </div>\n </div>\n </div> -->\n\n </div>\n </div>\n </div>\n <div class=\"popup-footer\" *ngIf=\"filterdCourses?.length\">\n <div *ngIf=\"!(data?.fromRequestPage)\">\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPdfFromBE()\" />\n </div>\n <!-- <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add Personalisation\" (click)=\"addPersonilisation()\"/>\n </div> -->\n <!-- <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add More Courses\" (click)=\"addMoreCourses()\"/>\n </div> -->\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\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}.ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:20px;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;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-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}.delete-button input{background-color:#b60a0a;border-radius:10px}.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:normal;gap:16px;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:16px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:18px;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}.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}.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{display:flex;flex-direction:column;gap:16px}.search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.search-container-compact{flex:0 0 auto;min-width:280px}.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:1px solid #d5d0d0;padding:8px 12px 8px 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}.right-section{display:flex;flex-direction:row;gap:16px}\n"] }]
6675
6721
  }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
6676
6722
  type: Inject,
6677
6723
  args: [MAT_DIALOG_DATA]
@@ -12551,6 +12597,7 @@ class ViewFinalCbpPlanComponent {
12551
12597
  this.sharedService.getRoleMappingByStateCenterAndDepartment(state_center_id, department_id).subscribe({
12552
12598
  next: (res) => {
12553
12599
  this.loading = false;
12600
+ this.jsonData = res;
12554
12601
  this.totalCompetencieObj = { total: 0, behavioral: 0, functional: 0, domain: 0 };
12555
12602
  this.designationData = [];
12556
12603
  // ✅ GLOBAL UNIQUE SETS (for overall unique count)
@@ -12637,6 +12684,7 @@ class ViewFinalCbpPlanComponent {
12637
12684
  this.sharedService.getRoleMappingByStateCenter(state_center_id).subscribe({
12638
12685
  next: (res) => {
12639
12686
  this.loading = false;
12687
+ this.jsonData = res;
12640
12688
  console.log('res', res);
12641
12689
  this.totalCompetencieObj = { total: 0, behavioral: 0, functional: 0, domain: 0 };
12642
12690
  this.designationData = [];
@@ -12793,6 +12841,7 @@ class ViewFinalCbpPlanComponent {
12793
12841
  this.sharedService.getRoleMappingByStateCenterAndDepartment(state_center_id, department_id).subscribe({
12794
12842
  next: (res) => {
12795
12843
  this.loading = false;
12844
+ this.jsonData = res;
12796
12845
  console.log('res', res);
12797
12846
  this.totalCompetencieObj = { total: 0, behavioral: 0, functional: 0, domain: 0 };
12798
12847
  this.designationData = [];