@sunbird-cb/cbp-ai 0.1.122 → 0.1.124
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/ai-cbp.module.mjs +6 -1
- package/esm2022/lib/components/generate-course-recommendation/generate-course-recommendation.component.mjs +65 -7
- package/esm2022/lib/components/marketplace-courses-alert/marketplace-courses-alert.component.mjs +47 -0
- package/esm2022/lib/components/role-mapping-list/role-mapping-list.component.mjs +29 -1
- package/esm2022/lib/components/view-course-recommendation/view-course-recommendation.component.mjs +3 -3
- package/esm2022/lib/components/view-final-cbp-plan/view-final-cbp-plan.component.mjs +35 -17
- package/esm2022/lib/modules/shared/services/shared.service.mjs +31 -7
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/sunbird-cb-cbp-ai.mjs +202 -32
- package/fesm2022/sunbird-cb-cbp-ai.mjs.map +1 -1
- package/lib/ai-cbp.module.d.ts +53 -52
- package/lib/ai-cbp.module.d.ts.map +1 -1
- package/lib/components/generate-course-recommendation/generate-course-recommendation.component.d.ts +6 -0
- package/lib/components/generate-course-recommendation/generate-course-recommendation.component.d.ts.map +1 -1
- package/lib/components/marketplace-courses-alert/marketplace-courses-alert.component.d.ts +31 -0
- package/lib/components/marketplace-courses-alert/marketplace-courses-alert.component.d.ts.map +1 -0
- package/lib/components/role-mapping-list/role-mapping-list.component.d.ts +1 -0
- package/lib/components/role-mapping-list/role-mapping-list.component.d.ts.map +1 -1
- package/lib/components/view-final-cbp-plan/view-final-cbp-plan.component.d.ts +1 -0
- package/lib/components/view-final-cbp-plan/view-final-cbp-plan.component.d.ts.map +1 -1
- package/lib/modules/shared/services/shared.service.d.ts +13 -2
- package/lib/modules/shared/services/shared.service.d.ts.map +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/public-api.d.ts.map +1 -1
- package/sunbird-cb-cbp-ai-0.1.124.tgz +0 -0
- package/sunbird-cb-cbp-ai-0.1.122.tgz +0 -0
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, HostListener, ElementRef, Inject, ViewChild, Input, EventEmitter, ChangeDetectionStrategy, Output, Pipe, NgModule, Directive } from '@angular/core';
|
|
2
|
+
import { Injectable, Component, HostListener, ElementRef, Inject, ViewChild, ViewEncapsulation, Input, EventEmitter, ChangeDetectionStrategy, Output, Pipe, NgModule, Directive } from '@angular/core';
|
|
3
3
|
import * as i3 from '@angular/router';
|
|
4
4
|
import { RouterModule } from '@angular/router';
|
|
5
5
|
import * as i1$1 from '@angular/material/dialog';
|
|
6
6
|
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
7
7
|
import * as i2 from '@angular/forms';
|
|
8
8
|
import { Validators, FormControl, FormGroup, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
9
|
-
import { map, debounceTime, distinctUntilChanged, startWith, finalize, switchMap, catchError,
|
|
9
|
+
import { map, tap, debounceTime, distinctUntilChanged, startWith, finalize, switchMap, catchError, takeWhile, takeUntil, take } from 'rxjs/operators';
|
|
10
10
|
import * as _ from 'lodash';
|
|
11
11
|
import * as i1 from '@angular/common/http';
|
|
12
12
|
import { HttpHeaders, HttpParams } from '@angular/common/http';
|
|
@@ -233,6 +233,28 @@ class SharedService {
|
|
|
233
233
|
'Authorization': `Bearer ${storageData?.access_token}`
|
|
234
234
|
});
|
|
235
235
|
}
|
|
236
|
+
/**
|
|
237
|
+
* Marketplace courses come with course_type 'Paid' or 'Free'.
|
|
238
|
+
* Any other value (null, 'User Added', etc.) means it is not a marketplace course.
|
|
239
|
+
*/
|
|
240
|
+
getMarketplaceCourseType(course) {
|
|
241
|
+
const type = course?.course_type?.toString().trim().toLowerCase();
|
|
242
|
+
return type === 'paid' || type === 'free' ? type : null;
|
|
243
|
+
}
|
|
244
|
+
isMarketplaceCourse(course) {
|
|
245
|
+
return this.getMarketplaceCourseType(course) !== null;
|
|
246
|
+
}
|
|
247
|
+
countMarketplaceCourses(courses) {
|
|
248
|
+
const counts = { marketplace: 0, free: 0, paid: 0 };
|
|
249
|
+
(courses || []).forEach(course => {
|
|
250
|
+
const type = this.getMarketplaceCourseType(course);
|
|
251
|
+
if (type) {
|
|
252
|
+
counts.marketplace++;
|
|
253
|
+
counts[type]++;
|
|
254
|
+
}
|
|
255
|
+
});
|
|
256
|
+
return counts;
|
|
257
|
+
}
|
|
236
258
|
setConfiDetails(configDetails = null) {
|
|
237
259
|
if (configDetails) {
|
|
238
260
|
this.configDetails = configDetails;
|
|
@@ -822,11 +844,12 @@ class SharedService {
|
|
|
822
844
|
: API_END_POINTS$1.DOWNLOAD_PDF;
|
|
823
845
|
const url = `${this.baseUrl}${endpoint}?state_center_id=${state_center_id}&language=${language}`;
|
|
824
846
|
const headers = this.headers;
|
|
847
|
+
// Returns an observable so the caller can keep the loader visible until the file is saved
|
|
825
848
|
return this.http.get(url, {
|
|
826
849
|
headers,
|
|
827
850
|
observe: 'response',
|
|
828
851
|
responseType: 'blob'
|
|
829
|
-
}).
|
|
852
|
+
}).pipe(tap((res) => {
|
|
830
853
|
const contentDisposition = res.headers.get('content-disposition');
|
|
831
854
|
console.log('contentDisposition', res.headers);
|
|
832
855
|
let filename = `CBP_Report_${state_center_id}.pdf`;
|
|
@@ -844,7 +867,7 @@ class SharedService {
|
|
|
844
867
|
a.download = filename;
|
|
845
868
|
a.click();
|
|
846
869
|
URL.revokeObjectURL(downloadUrl);
|
|
847
|
-
});
|
|
870
|
+
}));
|
|
848
871
|
}
|
|
849
872
|
downloadPdfForDepartment(state_center_id, department_id, context, language) {
|
|
850
873
|
const endpoint = context === 'acbp'
|
|
@@ -852,11 +875,12 @@ class SharedService {
|
|
|
852
875
|
: API_END_POINTS$1.DOWNLOAD_PDF;
|
|
853
876
|
const url = `${this.baseUrl}${endpoint}?state_center_id=${state_center_id}&department_id=${department_id}&language=${language}`;
|
|
854
877
|
const headers = this.headers;
|
|
878
|
+
// Returns an observable so the caller can keep the loader visible until the file is saved
|
|
855
879
|
return this.http.get(url, {
|
|
856
880
|
headers,
|
|
857
881
|
observe: 'response',
|
|
858
882
|
responseType: 'blob'
|
|
859
|
-
}).
|
|
883
|
+
}).pipe(tap((res) => {
|
|
860
884
|
const contentDisposition = res.headers.get('content-disposition');
|
|
861
885
|
console.log('contentDisposition', res.headers);
|
|
862
886
|
let filename = `CBP_Report_${state_center_id}_${department_id}.pdf`;
|
|
@@ -874,7 +898,7 @@ class SharedService {
|
|
|
874
898
|
a.download = filename;
|
|
875
899
|
a.click();
|
|
876
900
|
URL.revokeObjectURL(downloadUrl);
|
|
877
|
-
});
|
|
901
|
+
}));
|
|
878
902
|
}
|
|
879
903
|
getCenterBasedDepartment(state_center_id, options) {
|
|
880
904
|
const headers = this.headers;
|
|
@@ -1029,7 +1053,7 @@ class SharedService {
|
|
|
1029
1053
|
"identifier",
|
|
1030
1054
|
"avgRating"
|
|
1031
1055
|
],
|
|
1032
|
-
"limit":
|
|
1056
|
+
"limit": identifiers?.length || 0,
|
|
1033
1057
|
"offset": 0,
|
|
1034
1058
|
"sort_by": {}
|
|
1035
1059
|
}
|
|
@@ -3686,6 +3710,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3686
3710
|
args: [MAT_DIALOG_DATA]
|
|
3687
3711
|
}] }, { type: SharedService }]; } });
|
|
3688
3712
|
|
|
3713
|
+
const MARKETPLACE_ALERT_PANEL_CLASS = 'marketplace-alert-panel';
|
|
3714
|
+
/**
|
|
3715
|
+
* Confirmation shown before saving / sending courses for approval when marketplace courses are included.
|
|
3716
|
+
* Closes with `true` only when the user acknowledges and confirms.
|
|
3717
|
+
*/
|
|
3718
|
+
class MarketplaceCoursesAlertComponent {
|
|
3719
|
+
constructor(dialogRef, data) {
|
|
3720
|
+
this.dialogRef = dialogRef;
|
|
3721
|
+
this.data = data;
|
|
3722
|
+
this.rows = [];
|
|
3723
|
+
this.total = { marketplace: 0, free: 0, paid: 0 };
|
|
3724
|
+
this.confirmLabel = 'Proceed';
|
|
3725
|
+
this.acknowledged = false;
|
|
3726
|
+
this.rows = (data?.rows || []).filter(row => row.marketplace > 0);
|
|
3727
|
+
this.confirmLabel = data?.confirmLabel || this.confirmLabel;
|
|
3728
|
+
this.rows.forEach(row => {
|
|
3729
|
+
this.total.marketplace += row.marketplace;
|
|
3730
|
+
this.total.free += row.free;
|
|
3731
|
+
this.total.paid += row.paid;
|
|
3732
|
+
});
|
|
3733
|
+
}
|
|
3734
|
+
confirm() {
|
|
3735
|
+
if (this.acknowledged) {
|
|
3736
|
+
this.dialogRef.close(true);
|
|
3737
|
+
}
|
|
3738
|
+
}
|
|
3739
|
+
cancel() {
|
|
3740
|
+
this.dialogRef.close(false);
|
|
3741
|
+
}
|
|
3742
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarketplaceCoursesAlertComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3743
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MarketplaceCoursesAlertComponent, selector: "app-marketplace-courses-alert", ngImport: i0, template: "<div class=\"mkt-alert\" role=\"alertdialog\" aria-modal=\"true\" aria-labelledby=\"mkt-alert-title\" aria-describedby=\"mkt-alert-msg\">\n <div class=\"mkt-alert-header\">\n <span class=\"mkt-alert-icon\" aria-hidden=\"true\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#B45309\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"></path>\n <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line>\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n </svg>\n </span>\n <h2 id=\"mkt-alert-title\" class=\"mkt-alert-title\">Marketplace courses included</h2>\n <button type=\"button\" class=\"mkt-alert-close\" aria-label=\"Close\" (click)=\"cancel()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"mkt-alert-body\">\n <p id=\"mkt-alert-msg\" class=\"mkt-alert-msg\">\n This plan includes\n <strong class=\"mkt-strong\">{{ total.marketplace }} marketplace {{ total.marketplace === 1 ? 'course' : 'courses' }}</strong>\n (<strong class=\"mkt-free-text\">{{ total.free }} Free</strong> and\n <strong class=\"mkt-paid-text\">{{ total.paid }} Paid</strong>).\n The availability of enrolment licences is subject to availability and confirmation by Karmayogi Bharat.\n Do you want to proceed?\n </p>\n\n <div class=\"mkt-table-wrap\" *ngIf=\"rows.length\">\n <table class=\"mkt-table\">\n <thead>\n <tr>\n <th scope=\"col\" class=\"text-left\">Designation</th>\n <th scope=\"col\">Marketplace</th>\n <th scope=\"col\">Free</th>\n <th scope=\"col\">Paid</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of rows\">\n <td class=\"text-left\">{{ row.name || '-' }}</td>\n <td class=\"mkt-count\">{{ row.marketplace }}</td>\n <td><ng-container *ngTemplateOutlet=\"countBadge; context: { count: row.free, type: 'free' }\"></ng-container></td>\n <td><ng-container *ngTemplateOutlet=\"countBadge; context: { count: row.paid, type: 'paid' }\"></ng-container></td>\n </tr>\n </tbody>\n <tfoot *ngIf=\"rows.length > 1\">\n <tr>\n <th scope=\"row\" class=\"text-left\">Total ({{ rows.length }} designations)</th>\n <td class=\"mkt-count\">{{ total.marketplace }}</td>\n <td><ng-container *ngTemplateOutlet=\"countBadge; context: { count: total.free, type: 'free' }\"></ng-container></td>\n <td><ng-container *ngTemplateOutlet=\"countBadge; context: { count: total.paid, type: 'paid' }\"></ng-container></td>\n </tr>\n </tfoot>\n </table>\n </div>\n\n <label class=\"mkt-ack\" [class.checked]=\"acknowledged\">\n <input type=\"checkbox\" [(ngModel)]=\"acknowledged\">\n <span>I acknowledge that licence availability for marketplace courses is subject to confirmation by Karmayogi Bharat.</span>\n </label>\n </div>\n\n <div class=\"mkt-alert-footer\">\n <span class=\"mkt-hint\">{{ acknowledged ? '' : 'Tick the acknowledgement to continue' }}</span>\n <button type=\"button\" class=\"mkt-btn mkt-btn-cancel\" (click)=\"cancel()\">Cancel</button>\n <button type=\"button\" class=\"mkt-btn mkt-btn-confirm\" [disabled]=\"!acknowledged\" (click)=\"confirm()\">{{ confirmLabel }}</button>\n </div>\n</div>\n\n<ng-template #countBadge let-count=\"count\" let-type=\"type\">\n <span *ngIf=\"count > 0\" class=\"mkt-badge\" [ngClass]=\"type\">{{ count }}</span>\n <span *ngIf=\"!count\" class=\"mkt-zero\">0</span>\n</ng-template>\n", styles: [".marketplace-alert-panel .mat-mdc-dialog-surface,.marketplace-alert-panel .mat-dialog-container{padding:0;border-radius:14px;overflow:hidden;box-shadow:0 24px 64px #0f172a47}.mkt-alert{display:flex;flex-direction:column;background:#fff;color:#1a2433;font-family:inherit}.mkt-alert-header{display:flex;align-items:center;gap:12px;padding:18px 20px 18px 24px;border-bottom:1px solid #EEF1F5}.mkt-alert-icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#fff1d6;display:flex;align-items:center;justify-content:center}.mkt-alert-title{flex:1;margin:0;font-size:18px;font-weight:700}.mkt-alert-close{width:44px;height:44px;border:none;border-radius:8px;background:transparent;color:#5a6473;cursor:pointer;display:flex;align-items:center;justify-content:center}.mkt-alert-body{padding:20px 24px;display:flex;flex-direction:column;gap:16px}.mkt-alert-msg{margin:0;font-size:14px;line-height:1.65;color:#3a4452}.mkt-strong{color:#1a2433}.mkt-free-text{color:#006400}.mkt-paid-text{color:#8b1a1a}.mkt-table-wrap{border:1px solid #DDE3EC;border-radius:10px;overflow:hidden}.mkt-table{width:100%;border-collapse:collapse}.mkt-table th,.mkt-table td{padding:10px 14px;font-size:13px;text-align:center}.mkt-table .text-left{text-align:left}.mkt-table thead th{background:#f8fafc;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5a6473;border-bottom:1px solid #DDE3EC}.mkt-table tbody td{border-bottom:1px solid #EEF1F5}.mkt-table tfoot tr{background:#f4f6fa}.mkt-table tfoot th,.mkt-count{font-weight:700}.mkt-badge{display:inline-block;min-width:28px;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:700;box-sizing:border-box}.mkt-badge.free{background:#0080001c;color:#006400}.mkt-badge.paid{background:#d32f2f1c;color:#8b1a1a}.mkt-zero{font-size:12px;color:#6b7280}.mkt-ack{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid #C3CBD8;border-radius:10px;background:#fff;cursor:pointer;font-size:13px;line-height:1.5}.mkt-ack input{width:18px;height:18px;margin:1px 0 0;accent-color:#1B4CA1;flex-shrink:0;cursor:pointer}.mkt-ack.checked{border-color:#1b4ca1;background:#f0f5ff}.mkt-alert-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 24px;background:#f8fafc;border-top:1px solid #EEF1F5}.mkt-hint{flex:1;min-width:160px;font-size:12px;color:#5a6473}.mkt-btn{min-height:40px;padding:0 18px;border-radius:8px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}.mkt-btn-cancel{border:1px solid #C3CBD8;background:#fff;color:#1a2433}.mkt-btn-confirm{border:none;background:#1b4ca1;color:#fff}.mkt-btn-confirm:disabled{background:#d5dae2;color:#5a6473;cursor:not-allowed}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3744
|
+
}
|
|
3745
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarketplaceCoursesAlertComponent, decorators: [{
|
|
3746
|
+
type: Component,
|
|
3747
|
+
args: [{ selector: 'app-marketplace-courses-alert', encapsulation: ViewEncapsulation.None, template: "<div class=\"mkt-alert\" role=\"alertdialog\" aria-modal=\"true\" aria-labelledby=\"mkt-alert-title\" aria-describedby=\"mkt-alert-msg\">\n <div class=\"mkt-alert-header\">\n <span class=\"mkt-alert-icon\" aria-hidden=\"true\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#B45309\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"></path>\n <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line>\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line>\n </svg>\n </span>\n <h2 id=\"mkt-alert-title\" class=\"mkt-alert-title\">Marketplace courses included</h2>\n <button type=\"button\" class=\"mkt-alert-close\" aria-label=\"Close\" (click)=\"cancel()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"mkt-alert-body\">\n <p id=\"mkt-alert-msg\" class=\"mkt-alert-msg\">\n This plan includes\n <strong class=\"mkt-strong\">{{ total.marketplace }} marketplace {{ total.marketplace === 1 ? 'course' : 'courses' }}</strong>\n (<strong class=\"mkt-free-text\">{{ total.free }} Free</strong> and\n <strong class=\"mkt-paid-text\">{{ total.paid }} Paid</strong>).\n The availability of enrolment licences is subject to availability and confirmation by Karmayogi Bharat.\n Do you want to proceed?\n </p>\n\n <div class=\"mkt-table-wrap\" *ngIf=\"rows.length\">\n <table class=\"mkt-table\">\n <thead>\n <tr>\n <th scope=\"col\" class=\"text-left\">Designation</th>\n <th scope=\"col\">Marketplace</th>\n <th scope=\"col\">Free</th>\n <th scope=\"col\">Paid</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of rows\">\n <td class=\"text-left\">{{ row.name || '-' }}</td>\n <td class=\"mkt-count\">{{ row.marketplace }}</td>\n <td><ng-container *ngTemplateOutlet=\"countBadge; context: { count: row.free, type: 'free' }\"></ng-container></td>\n <td><ng-container *ngTemplateOutlet=\"countBadge; context: { count: row.paid, type: 'paid' }\"></ng-container></td>\n </tr>\n </tbody>\n <tfoot *ngIf=\"rows.length > 1\">\n <tr>\n <th scope=\"row\" class=\"text-left\">Total ({{ rows.length }} designations)</th>\n <td class=\"mkt-count\">{{ total.marketplace }}</td>\n <td><ng-container *ngTemplateOutlet=\"countBadge; context: { count: total.free, type: 'free' }\"></ng-container></td>\n <td><ng-container *ngTemplateOutlet=\"countBadge; context: { count: total.paid, type: 'paid' }\"></ng-container></td>\n </tr>\n </tfoot>\n </table>\n </div>\n\n <label class=\"mkt-ack\" [class.checked]=\"acknowledged\">\n <input type=\"checkbox\" [(ngModel)]=\"acknowledged\">\n <span>I acknowledge that licence availability for marketplace courses is subject to confirmation by Karmayogi Bharat.</span>\n </label>\n </div>\n\n <div class=\"mkt-alert-footer\">\n <span class=\"mkt-hint\">{{ acknowledged ? '' : 'Tick the acknowledgement to continue' }}</span>\n <button type=\"button\" class=\"mkt-btn mkt-btn-cancel\" (click)=\"cancel()\">Cancel</button>\n <button type=\"button\" class=\"mkt-btn mkt-btn-confirm\" [disabled]=\"!acknowledged\" (click)=\"confirm()\">{{ confirmLabel }}</button>\n </div>\n</div>\n\n<ng-template #countBadge let-count=\"count\" let-type=\"type\">\n <span *ngIf=\"count > 0\" class=\"mkt-badge\" [ngClass]=\"type\">{{ count }}</span>\n <span *ngIf=\"!count\" class=\"mkt-zero\">0</span>\n</ng-template>\n", styles: [".marketplace-alert-panel .mat-mdc-dialog-surface,.marketplace-alert-panel .mat-dialog-container{padding:0;border-radius:14px;overflow:hidden;box-shadow:0 24px 64px #0f172a47}.mkt-alert{display:flex;flex-direction:column;background:#fff;color:#1a2433;font-family:inherit}.mkt-alert-header{display:flex;align-items:center;gap:12px;padding:18px 20px 18px 24px;border-bottom:1px solid #EEF1F5}.mkt-alert-icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#fff1d6;display:flex;align-items:center;justify-content:center}.mkt-alert-title{flex:1;margin:0;font-size:18px;font-weight:700}.mkt-alert-close{width:44px;height:44px;border:none;border-radius:8px;background:transparent;color:#5a6473;cursor:pointer;display:flex;align-items:center;justify-content:center}.mkt-alert-body{padding:20px 24px;display:flex;flex-direction:column;gap:16px}.mkt-alert-msg{margin:0;font-size:14px;line-height:1.65;color:#3a4452}.mkt-strong{color:#1a2433}.mkt-free-text{color:#006400}.mkt-paid-text{color:#8b1a1a}.mkt-table-wrap{border:1px solid #DDE3EC;border-radius:10px;overflow:hidden}.mkt-table{width:100%;border-collapse:collapse}.mkt-table th,.mkt-table td{padding:10px 14px;font-size:13px;text-align:center}.mkt-table .text-left{text-align:left}.mkt-table thead th{background:#f8fafc;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5a6473;border-bottom:1px solid #DDE3EC}.mkt-table tbody td{border-bottom:1px solid #EEF1F5}.mkt-table tfoot tr{background:#f4f6fa}.mkt-table tfoot th,.mkt-count{font-weight:700}.mkt-badge{display:inline-block;min-width:28px;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:700;box-sizing:border-box}.mkt-badge.free{background:#0080001c;color:#006400}.mkt-badge.paid{background:#d32f2f1c;color:#8b1a1a}.mkt-zero{font-size:12px;color:#6b7280}.mkt-ack{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid #C3CBD8;border-radius:10px;background:#fff;cursor:pointer;font-size:13px;line-height:1.5}.mkt-ack input{width:18px;height:18px;margin:1px 0 0;accent-color:#1B4CA1;flex-shrink:0;cursor:pointer}.mkt-ack.checked{border-color:#1b4ca1;background:#f0f5ff}.mkt-alert-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 24px;background:#f8fafc;border-top:1px solid #EEF1F5}.mkt-hint{flex:1;min-width:160px;font-size:12px;color:#5a6473}.mkt-btn{min-height:40px;padding:0 18px;border-radius:8px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}.mkt-btn-cancel{border:1px solid #C3CBD8;background:#fff;color:#1a2433}.mkt-btn-confirm{border:none;background:#1b4ca1;color:#fff}.mkt-btn-confirm:disabled{background:#d5dae2;color:#5a6473;cursor:not-allowed}\n"] }]
|
|
3748
|
+
}], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
3749
|
+
type: Inject,
|
|
3750
|
+
args: [MAT_DIALOG_DATA]
|
|
3751
|
+
}] }]; } });
|
|
3752
|
+
|
|
3689
3753
|
class GapAnalysisRecommendedCourseComponent {
|
|
3690
3754
|
constructor(sharedService, dialog, snackBar) {
|
|
3691
3755
|
this.sharedService = sharedService;
|
|
@@ -4206,6 +4270,14 @@ class GenerateCourseRecommendationComponent {
|
|
|
4206
4270
|
this.languages = ['English', 'Hindi', 'Tamil', 'Kannada', 'Telugu', 'Malayalam', 'Assamese', 'Bengali', 'Gujarati', 'Marathi', 'Odia', 'Punjabi', 'Konkani', 'Bodo', 'Dogri', 'Kashmiri', 'Maithili', 'Manipuri', 'Nepali', 'Sanskrit', 'Santali', 'Sindhi', 'Urdu'];
|
|
4207
4271
|
this.durations = ['< 1 Hour', '1-5 Hours', '5+ Hours'];
|
|
4208
4272
|
this.providers = [];
|
|
4273
|
+
this.sourceOptions = [
|
|
4274
|
+
{ value: 'all', label: 'All sources' },
|
|
4275
|
+
{ value: 'igot', label: 'iGOT' },
|
|
4276
|
+
{ value: 'public', label: 'Public' },
|
|
4277
|
+
{ value: 'marketplace', label: 'Marketplace (all)' },
|
|
4278
|
+
{ value: 'free', label: 'Marketplace - Free' },
|
|
4279
|
+
{ value: 'paid', label: 'Marketplace - Paid' }
|
|
4280
|
+
];
|
|
4209
4281
|
this.filteredCompetency = [...this.competenciesType];
|
|
4210
4282
|
this.filteredRatings = [...this.ratings];
|
|
4211
4283
|
this.filteredLanguages = [...this.languages];
|
|
@@ -4233,7 +4305,8 @@ class GenerateCourseRecommendationComponent {
|
|
|
4233
4305
|
rating: [[]],
|
|
4234
4306
|
language: [[]],
|
|
4235
4307
|
duration: [[]],
|
|
4236
|
-
provider: [[]]
|
|
4308
|
+
provider: [[]],
|
|
4309
|
+
source: ['all']
|
|
4237
4310
|
});
|
|
4238
4311
|
this.loadComponentData();
|
|
4239
4312
|
}
|
|
@@ -4280,6 +4353,38 @@ class GenerateCourseRecommendationComponent {
|
|
|
4280
4353
|
}
|
|
4281
4354
|
}
|
|
4282
4355
|
saveCourses() {
|
|
4356
|
+
// Read-only lookup (getAllAvailableCourses() mutates courses/provider filters)
|
|
4357
|
+
const countedIdentifiers = new Set();
|
|
4358
|
+
const selectedMarketplaceCourses = [...(this.originalData || []), ...(this.suggestedCourses || []), ...(this.userAddedCourses || [])].filter(course => {
|
|
4359
|
+
const courseId = course?.identifier || course?.id;
|
|
4360
|
+
if (!courseId || countedIdentifiers.has(courseId) || !this.selectFilterCourses.includes(courseId)) {
|
|
4361
|
+
return false;
|
|
4362
|
+
}
|
|
4363
|
+
countedIdentifiers.add(courseId);
|
|
4364
|
+
return this.sharedService.isMarketplaceCourse(course);
|
|
4365
|
+
});
|
|
4366
|
+
if (!selectedMarketplaceCourses.length) {
|
|
4367
|
+
this.persistCourses();
|
|
4368
|
+
return;
|
|
4369
|
+
}
|
|
4370
|
+
const dialogRef = this.dialog.open(MarketplaceCoursesAlertComponent, {
|
|
4371
|
+
width: '620px',
|
|
4372
|
+
maxWidth: '95vw',
|
|
4373
|
+
data: {
|
|
4374
|
+
rows: [{ name: this.planData?.designation_name, ...this.sharedService.countMarketplaceCourses(selectedMarketplaceCourses) }],
|
|
4375
|
+
confirmLabel: this.mode === 'add' ? 'Save Courses' : 'Update Courses'
|
|
4376
|
+
},
|
|
4377
|
+
panelClass: MARKETPLACE_ALERT_PANEL_CLASS,
|
|
4378
|
+
maxHeight: '90vh',
|
|
4379
|
+
disableClose: true
|
|
4380
|
+
});
|
|
4381
|
+
dialogRef.afterClosed().subscribe(confirmed => {
|
|
4382
|
+
if (confirmed) {
|
|
4383
|
+
this.persistCourses();
|
|
4384
|
+
}
|
|
4385
|
+
});
|
|
4386
|
+
}
|
|
4387
|
+
persistCourses() {
|
|
4283
4388
|
this.loading = true;
|
|
4284
4389
|
console.log('this.planData', this.planData);
|
|
4285
4390
|
let reqBody = {
|
|
@@ -6063,7 +6168,8 @@ class GenerateCourseRecommendationComponent {
|
|
|
6063
6168
|
rating: [],
|
|
6064
6169
|
language: [],
|
|
6065
6170
|
duration: [],
|
|
6066
|
-
provider: []
|
|
6171
|
+
provider: [],
|
|
6172
|
+
source: 'all'
|
|
6067
6173
|
});
|
|
6068
6174
|
// Reset filtered dropdown lists
|
|
6069
6175
|
this.filteredCompetency = [...this.competenciesType];
|
|
@@ -6117,7 +6223,7 @@ class GenerateCourseRecommendationComponent {
|
|
|
6117
6223
|
return '';
|
|
6118
6224
|
}
|
|
6119
6225
|
applyFilters() {
|
|
6120
|
-
const { competency = [], rating = [], language = [], duration = [], provider = [] } = this.filterForm.value;
|
|
6226
|
+
const { competency = [], rating = [], language = [], duration = [], provider = [], source = 'all' } = this.filterForm.value;
|
|
6121
6227
|
console.log('this.fullCourseList--', this.fullCourseList);
|
|
6122
6228
|
this.filterdCourses = this.fullCourseList.filter(course => {
|
|
6123
6229
|
/* ---------------- Competency ---------------- */
|
|
@@ -6145,14 +6251,29 @@ class GenerateCourseRecommendationComponent {
|
|
|
6145
6251
|
/* ---------------- Provider ---------------- */
|
|
6146
6252
|
const providerMatch = provider.length === 0 ||
|
|
6147
6253
|
provider.some((p) => course.organisation?.includes(p));
|
|
6254
|
+
/* ---------------- Source ---------------- */
|
|
6255
|
+
const sourceMatch = this.matchSource(course, source);
|
|
6148
6256
|
return (competencyMatch &&
|
|
6149
6257
|
ratingMatch &&
|
|
6150
6258
|
languageMatch &&
|
|
6151
6259
|
durationMatch &&
|
|
6152
|
-
providerMatch
|
|
6260
|
+
providerMatch &&
|
|
6261
|
+
sourceMatch);
|
|
6153
6262
|
});
|
|
6154
6263
|
this.filterdCourses = this.sortCoursesByCategoryAndRelevancy(this.filterdCourses);
|
|
6155
6264
|
}
|
|
6265
|
+
// iGOT / Public exclude marketplace courses so the source options don't overlap
|
|
6266
|
+
matchSource(course, source) {
|
|
6267
|
+
const marketplaceType = this.sharedService.getMarketplaceCourseType(course);
|
|
6268
|
+
switch (source) {
|
|
6269
|
+
case 'igot': return !marketplaceType && !course?.is_public;
|
|
6270
|
+
case 'public': return !marketplaceType && !!course?.is_public;
|
|
6271
|
+
case 'marketplace': return !!marketplaceType;
|
|
6272
|
+
case 'free':
|
|
6273
|
+
case 'paid': return marketplaceType === source;
|
|
6274
|
+
default: return true;
|
|
6275
|
+
}
|
|
6276
|
+
}
|
|
6156
6277
|
matchRating(course, selectedRatings) {
|
|
6157
6278
|
if (!selectedRatings || selectedRatings.length === 0) {
|
|
6158
6279
|
return true; // no filter selected → match everything
|
|
@@ -6207,11 +6328,11 @@ class GenerateCourseRecommendationComponent {
|
|
|
6207
6328
|
});
|
|
6208
6329
|
}
|
|
6209
6330
|
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 }); }
|
|
6210
|
-
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> <span>Course</span>\n </div>\n </div>\n <div class=\"course-pill proficiency-tag\" [ngClass]=\"item.course_level?.toLowerCase()\" *ngIf=\"item?.course_level\">\n <div class=\"course-pill-text\">\n <span>{{item?.course_level}}</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- <div>\n <div class=\"ai-recommened-pill\">\n <div class=\"ai-recommened-pill-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n\n <span *ngIf=\"item?.rationale\">AI Recommended\n <span *ngIf=\"item?.is_public\"> - Public</span>\n <span *ngIf=\"!item?.is_public\"> - iGOT</span>\n </span>\n <span *ngIf=\"!item?.rationale\">Manually Suggested - iGOT</span>\n\n </div>\n </div>\n </div> -->\n <div *ngIf=\"item?.rationale && !item?.is_public\">\n <div class=\"ai-recommened-pill-green\">\n <div class=\"ai-recommened-pill-green-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"item?.rationale && item?.is_public\">\n <div class=\"ai-recommened-pill-public\">\n <div class=\"ai-recommened-pill-public-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - Public </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!item?.rationale\">\n <div class=\"ai-recommened-pill-gray\">\n <div class=\"ai-recommened-pill-gray-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>Manually Suggested - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"course-title mt-3 cursor-pointer\" (click)=\"redirectToToc(item)\">\n <span *ngIf=\"item?.course\">{{item?.course}}</span>\n <!-- <span *ngIf=\"item?.name\">{{item?.name}}****</span> -->\n <span style=\"margin-left:10px;\" (click)=\"redirectToToc(item)\"><img\n height=\"18px\" width=\"18px\"\n src=\"assets/icons/redirect.png\" /></span>\n </div>\n <div class=\"course-desc mt-2\">\n <!-- <span *ngIf=\"item?.rationale\">{{item?.rationale}}</span> -->\n <span *ngIf=\"item?.description\">{{item?.description}}</span>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioural Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',i)\">\n {{ isExpanded('Behavioural',i) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Functional',i)?.length\">\n <div class=\"competency-sub-heading\">Functional Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Functional',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',i)\">\n {{ isExpanded('Functional',i) ? 'Show Less' : '+' +\n getRemainingCount('Functional',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',i)?.length\">\n <div class=\"competency-sub-heading\">Domain Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Domain',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',i)\" class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n\n\n </div>\n\n <!-- Relevancy and Duration section -->\n <div class=\"course-footer\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">{{item?.relevancy}}%</div>\n </div>\n </div>\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Duration</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">\n <span\n *ngIf=\"item?.duration\">{{getDuration(item?.duration)}}</span>\n <span *ngIf=\"!(item?.duration)\">N/A</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- General No Data Message (only when no theme filter is active) -->\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 && !selectedThemeFilter\">\n <p>No Data Found</p>\n </div>\n </div>\n </div>\n </form>\n <div class=\"role-mapping-container\" *ngIf=\"outerTabActiveIndex === 1\">\n <div id=\"gap-analysis-content\">\n\n <div class=\"download-pdf mt-4 mb-2\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\" />\n </div>\n </div>\n <div>\n <!-- <div *ngIf=\"isPDFDownload\">\n <div class=\"pdf-heading\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}} <span\n *ngIf=\"planData?.designation_name \">_{{planData?.designation_name}}_Gap_Analysis</span>\n </div>\n </div> -->\n <div class=\"d-flex vh-100\" [ngClass]=\"isPDFDownload ? 'mt-4':''\">\n <!-- Sidebar -->\n <div class=\"d-flex flex-column p-3 bg-light border-end\" style=\"width: 250px;\">\n <h5 class=\"mb-4\">Analyze by Category</h5>\n <button *ngFor=\"let item of menuItems\"\n class=\"btn btn-outline-primary mb-2 text-start menu-list-item\"\n [class.active]=\"selectedCategory === item.key\" (click)=\"selectCategory(item.key)\">\n {{ item.label }}\n </button>\n </div>\n\n <!-- Main Content -->\n <div class=\"flex-grow-1 p-4\">\n <div class=\"d-flex justify-content-between gap-3 \">\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p>Competencies Covered</p>\n </div>\n <div class=\"div-count\">{{competencyCoveredCount}}</div>\n </div>\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p *ngIf=\"selectedCategory === 'all'\">Total Competencies</p>\n <p *ngIf=\"selectedCategory === 'behavioral'\">Total Behavioural Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'functional'\">Total Functional Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'domain'\">Total Domain Competencies</p>\n </div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'all'\">\n {{this.planData?.competencies?.length}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainTotalCompetencies}}</div>\n </div>\n <div class=\"p-3 green-bg\">\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'all'\">Overall Coverage\n </div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'behavioral'\">\n Behavioural Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'functional'\">\n Functional Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'domain'\">Domain\n Coverage</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'all'\">\n {{overallCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainCoverage}}</div>\n </div>\n </div>\n <div class=\"mt-4 all-category-list\" [ngSwitch]=\"selectedCategory\">\n <div *ngSwitchCase=\"'all'\">\n <h4>All Categories</h4>\n\n <!-- Show Behavioural section only if there are unmatched behavioural competencies -->\n <div class=\"mt-4\"\n *ngIf=\"behaviouralNotMatched && behaviouralNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show Functional section only if there are unmatched functional competencies -->\n <div class=\"mt-4\"\n *ngIf=\"functionalNotMatched && functionalNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Functional</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show Domain section only if there are unmatched domain competencies -->\n <div class=\"mt-4\" *ngIf=\"domainNotMatched && domainNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Domain</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show message when all competencies are covered -->\n <div class=\"mt-4 text-center\"\n *ngIf=\"(!behaviouralNotMatched || behaviouralNotMatched.length === 0) && \n (!functionalNotMatched || functionalNotMatched.length === 0) && \n (!domainNotMatched || domainNotMatched.length === 0)\">\n <div class=\"no-gaps-message\">\n <mat-icon class=\"success-icon\">check_circle</mat-icon>\n <h4>Excellent! All competencies are covered</h4>\n <p>All required competencies have been addressed by the selected\n courses.</p>\n </div>\n </div>\n\n </div>\n\n <div *ngSwitchCase=\"'behavioral'\">\n <h4>Behavioural</h4>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All behavioral competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'functional'\">\n <h4>Functional</h4>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Functional</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course</span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All functional competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'domain'\">\n <h4>Domain</h4>\n <div class=\"mt-4\" *ngIf=\"domainCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Domain</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"domainCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All domain competencies are covered by the selected\n courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchDefault>\n <p>Please select a category.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> <!-- Close main-content div -->\n\n </div>\n</div>\n\n\n<div [hidden]=\"!isPDFDownload\" class=\"gap-analysis-pdf-container\" #pdfContent>\n <div class=\"gap-analysis-pdf-header\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"logo\" />\n <h1><span>\n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.department_name?.name}}</span> \n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}}</span> \n <span *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span>\n </span></h1>\n <p class=\"subtitle\">A detailed breakdown of competencies Gap Analysis</p>\n \n </div>\n \n <div class=\"competency-snapshot\">\n <h2>Competency Snapshot</h2>\n <div class=\"snapshot-content\">\n <div class=\"circle-wrapper\">\n <svg class=\"progress-ring\" width=\"120\" height=\"120\">\n <circle class=\"progress-ring-bg\" cx=\"60\" cy=\"60\" r=\"52\" />\n <circle class=\"progress-ring-circle\" cx=\"60\" cy=\"60\" r=\"52\" />\n </svg>\n <div class=\"percentage-text\">{{overallCoverage}}<br /><span>Overall Coverage</span></div>\n </div>\n \n <div class=\"competency-container\">\n <!-- Total Competencies Box -->\n <div class=\"total-box\">\n <div class=\"title\">Total Competencies</div>\n <div class=\"count\">{{this.planData?.competencies?.length}}</div>\n </div>\n \n <!-- Progress Bars -->\n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text behavioral\">Behavioural</span>\n <span class=\"covered-text\">{{behavioralCompetencyCoveredCount}} / {{behavioralTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill behavioral\" [style.width.%]=\"(behavioralCompetencyCoveredCount / behavioralTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text functional\">Functional</span>\n <span class=\"covered-text\">{{functionalCompetencyCoveredCount}} / {{functionalTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill functional\" [style.width.%]=\"(functionalCompetencyCoveredCount / functionalTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text domain\">Domain</span>\n <span class=\"covered-text\">{{domainCompetencyCoveredCount}} / {{domainTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill domain\" [style.width.%]=\"(domainCompetencyCoveredCount / domainTotalCompetencies) * 100\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"gap-section mb-4\">\n <h2>Detailed Competency Analysis</h2>\n <div class=\"gap-box\">\n Bridge Your Competencies Gap\n <p class=\"subtitle\">Here are {{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}} key areas for development.</p>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Gap to Address <span *ngIf=\"(this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)) > 0\">({{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}})</span></p>\n \n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Covered Competencies <span>({{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}})</span></p> \n </div>\n <div class=\"gap-section mb-4\">\n \n <div class=\"green-bg\">\n <div class=\"div-green-label mb-2\">\n Congratulations!\n </div> \n <p>You have successfully covered </p>\n <p class=\"subtitle\">{{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}} key competencies, forming a strong professional foundation.</p>\n </div>\n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n {{item?.sub_theme}} \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"gap-section mb-4\">\n <h2>Recommended Courses</h2>\n </div>\n <app-gap-analysis-recommended-course [planData]=\"planData\"></app-gap-analysis-recommended-course>\n</div>\n \n\n\n<div class=\"overlay-loader\" *ngIf=\"loading && dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || 'Preparing course recommendation generation...' }}</p>\n <div class=\"progress-details\">\n <div class=\"progress-indicator\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";.container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;width:100%;gap:8px}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.relevancy,.competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.course-list-item:hover{box-shadow:0 4px 8px #00000026}.course-list-item:only-child{flex:1 1 auto;max-width:800px}.checked-course-container{display:flex;width:60%}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex;justify-content:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.header-left{flex:1}.header-actions{display:flex;align-items:center;gap:12px}.regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.regenerate-btn .mat-spinner{margin:0}.regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.close-btn:hover{background-color:#f5f5f5}.close-btn .mat-icon{font-size:20px;width:20px;height:20px}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.initial-loading-container{display:flex;justify-content:center;align-items:center;min-height:400px;width:100%}.initial-loading-container .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 2rem}.initial-loading-container .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.initial-loading-container .loading-content .loading-text .main-message{font-size:16px;font-weight:600;margin-bottom:1rem;color:#1b4ca1}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:300px;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#4caf50);border-radius:4px;transition:width .3s ease-in-out}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:12px;color:#666;font-weight:500}.initial-loading-container .loading-content .loading-text .progress-details .time-estimate{font-size:12px;color:#888;font-style:italic}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.overlay-loader .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 12px #00000026}.overlay-loader .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.overlay-loader .loading-content .loading-text .main-message{margin:0 0 16px;font-size:18px;font-weight:600;text-align:center}.overlay-loader .loading-content .loading-text .progress-details{margin-top:16px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:12px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#2563eb);border-radius:4px;transition:width .5s ease-in-out}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:14px;font-weight:500;color:#1b4ca1;display:block;text-align:center}.overlay-loader .loading-content .loading-text .progress-details .time-estimate{color:#666;font-size:12px;font-style:italic;display:block;text-align:center;margin-top:8px}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.competencies-grid-3{width:33%}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.grid-list-item div{padding:5px 10px;margin:10px 0}.course-pill-container{display:flex;gap:8px}.relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.show-more-competency{display:inline-flex;align-items:center}.show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.show-more-link:hover{text-decoration:underline}.course-content{flex:1;display:flex;flex-direction:column}.course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.menu-list-item.active{background-color:#1b4ca1;color:#fff}.menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.div-count{font-family:Lato;font-size:20px;font-weight:700}.green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.list-flex{display:flex;flex-direction:row;justify-content:space-between}.all-category-list .mat-icon{vertical-align:middle}.course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.left-panel{flex:0 0 250px;font-weight:700;text-align:left}.right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.course-list-container-right-flex{display:flex}.no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;gap:0px;width:100%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:5px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}.search-container-compact{flex:0 0 auto;min-width:180px}.search-container-compact .rsearch{position:relative;display:flex;align-items:center}.search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.search-container-compact .sinput-compact{border-radius:25px;border:2px solid #ccc;padding:20px 12px 20px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.search-container-compact .sinput-compact::placeholder{color:#999}.btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.theme-filter-controls{margin-bottom:8px}.clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.no-course-card .no-course-icon{margin-bottom:20px}.no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.no-course-card .suggest-course-btn:active{transform:translateY(0)}.no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.search-and-buttons-container{flex-direction:column;align-items:stretch}.search-container-compact{min-width:auto;width:100%}.btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.course-list-container-flex{flex-direction:column}.left-panel{flex:none!important;max-height:300px}.course-list-item{flex:0 0 100%;max-width:100%}.no-course-card{padding:20px}.no-course-card .no-course-content h4{font-size:20px}.no-course-card .no-course-content p{font-size:14px}}::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.download-pdf{justify-content:end;display:flex;flex-direction:row}.gap-analysis-pdf-container{font-family:Lato;max-width:900px;margin:auto;color:#212121}.gap-analysis-pdf-header{text-align:center;margin-bottom:2rem}.gap-analysis-pdf-header .logo{height:60px;margin-bottom:.5rem}.gap-analysis-pdf-header h1{font-size:1.8rem;font-weight:600;margin:.5rem 0}.gap-analysis-pdf-header .subtitle{color:#555;font-size:.95rem}.gap-analysis-pdf-header .download-btn{background:#5e00ff;color:#fff;border:none;padding:10px 20px;border-radius:6px;margin-top:1rem;font-weight:500;cursor:pointer}.competency-snapshot{background:#fafafa;border-radius:12px;padding:2rem;margin-bottom:2rem}.competency-snapshot h2{font-size:1.4rem;font-weight:600;margin-bottom:1.5rem}.competency-snapshot .snapshot-content{display:flex;gap:2rem;align-items:center;justify-content:space-between}.competency-snapshot .snapshot-content .circle-wrapper{position:relative;width:120px;height:120px}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-bg{fill:none;stroke:#eee;stroke-width:10}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-circle{fill:none;stroke:#6c63ff;stroke-width:10;stroke-linecap:round;stroke-dasharray:326.72;stroke-dashoffset:117.6192;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .35s}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:1.4rem;text-align:center}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text span{display:block;font-size:.75rem;font-weight:400;color:#555}.competency-snapshot .snapshot-content .details{flex-grow:1}.competency-snapshot .snapshot-content .details .total-competencies{font-size:1.2rem;margin-bottom:1rem}.competency-snapshot .snapshot-content .details .bar{margin:.5rem 0;padding:.6rem 1rem;border-radius:6px;font-weight:500;display:flex;justify-content:space-between;color:#fff}.competency-snapshot .snapshot-content .details .bar.behavioral{background:#7b1fa2}.competency-snapshot .snapshot-content .details .bar.functional{background:#0288d1}.competency-snapshot .snapshot-content .details .bar.domain{background:#f57c00}.gap-section{margin-top:2rem}.gap-section h2{font-size:1.3rem;margin-bottom:1rem}.gap-section .gap-box{background:#eef1ff;border-left:5px solid #6c63ff;padding:1rem;border-radius:6px;font-weight:500;color:#333}.gap-section .green-bg{background-color:#0080001c;border-left:5px solid #2d9b2d;padding:1rem;border-radius:6px;font-weight:500;color:#006400}.competency-container{width:100%;margin:0 auto;font-family:Segoe UI,sans-serif;color:#212121;display:flex;flex-direction:column}.total-box{background:#f8f9fc;border-radius:10px;padding:1.5rem;text-align:center;border:1px solid #e0e0e0;margin-bottom:1.5rem}.total-box .title{font-size:1rem;color:#666}.total-box .count{font-size:2rem;font-weight:700;color:#111;margin-top:.5rem}.progress-group{margin-bottom:1.5rem}.progress-group .progress-label{display:flex;justify-content:space-between;margin-bottom:6px}.progress-group .progress-label .label-text{font-weight:600}.progress-group .progress-label .covered-text{font-size:.9rem;color:#444}.progress-group .progress-label .behavioral{color:#f8b861}.progress-group .progress-label .functional{color:#e24577}.progress-group .progress-label .domain{color:#7b47a4}.progress-group .progress-bar{height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden}.progress-group .progress-bar .progress-fill{height:100%;border-radius:5px;transition:width .5s ease-in-out}.progress-group .progress-bar .progress-fill.behavioral{background:#f8b861}.progress-group .progress-bar .progress-fill.functional{background:#e24577}.progress-group .progress-bar .progress-fill.domain{background:#7b47a4}.competency-card{border-radius:8px;padding:1rem 1.5rem;margin-bottom:1rem;border:1px solid transparent}.competency-card .title{font-weight:600;font-size:1.1rem;color:#222;margin-bottom:.4rem}.competency-card .subtitle{font-size:.95rem;color:#555}.competency-card .subtitle .tag{font-weight:500}.competency-card .subtitle .behavioral,.competency-card .subtitle .domain,.competency-card .subtitle .functional{color:#000}.competency-card.behavioral{background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;border-color:#f8b861}.competency-card.functional{background:linear-gradient(0deg,#e245773d 0% 100%),#fff;border-color:#e24577}.competency-card.domain{background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;border-color:#7b47a4}.disclaimer-container{margin:8px 16px 0}.disclaimer-message{background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:20px;padding:8px 16px;font-family:Lato;font-size:14px;color:#333;line-height:1.2}.disclaimer-message strong{color:#000;font-weight:600}.select-all-container{display:flex;flex-direction:row;justify-content:space-between}::ng-deep .search-and-buttons-container .mat-form-field-infix{padding:10px!important}::ng-deep .search-and-buttons-container .mat-form-field-wrapper{width:100%!important}::ng-deep .select-search-panel{border:1px solid #ccc!important;border-radius:12px!important;box-shadow:0 8px 20px #0000001f}:host ::ng-deep .mat-select-arrow-wrapper{margin-top:5px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:#ccc}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#1b4ca1;border-color:#1b4ca1!important}::ng-deep .select-search-panel .mat-option.mat-selected:not(.mat-option-disabled){background-color:#1b4ca1!important;color:#fff!important}:host ::ng-deep .mat-form-field-appearance-outline{border-radius:25px;border:1px solid #ccc}:host ::ng-deep .mat-form-field-focused .mat-form-field-appearance-outline{border-color:#1b4ca1!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start{border-radius:25px 0 0 25px;border:none!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-right:none!important;border:none!important;border-radius:0 25px 25px 0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap{border:none!important;border-radius:25px}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{background-color:transparent!important}:host ::ng-deep .search-and-buttons-container .mat-option-text{color:#fff!important}.proficiency-tag.strategic{background:#1b4ca1;color:#fff!important;border:none}.proficiency-tag.strategic .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.tactical{background:#5b8def;color:#fff!important;border:none}.proficiency-tag.tactical .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1!important;border:none}.proficiency-tag.operational .course-pill-text{color:#1b4ca1!important;font-size:14px!important;font-weight:500!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" }] }); }
|
|
6331
|
+
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 class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Source</label>\n </div>\n <div>\n <mat-form-field appearance=\"outline\">\n <mat-select\n formControlName=\"source\"\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n <mat-option *ngFor=\"let s of sourceOptions\" [value]=\"s.value\">\n {{ s.label }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n <div class=\"mt-4 filtered-count-row\">\n <div style=\"font-size:16px;font-weight:bold;color:#000\">\n Filtered Course Count : {{filterdCourses?.length}}\n </div>\n <ng-container *ngIf=\"sharedService.countMarketplaceCourses(filterdCourses) as marketplaceCount\">\n <span class=\"marketplace-count\" *ngIf=\"marketplaceCount.marketplace\">\n Marketplace : {{ marketplaceCount.marketplace }}\n <span class=\"marketplace-tag free\">{{ marketplaceCount.free }} Free</span>\n <span class=\"marketplace-tag paid\">{{ marketplaceCount.paid }} Paid</span>\n </span>\n </ng-container>\n <span class=\"filtered-count-spacer\"></span>\n <input class=\"btn-active\" type=\"button\" value=\"Reset All Filters\"\n (click)=\"resetFilters()\" />\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 courses before adding them to the plan.\n Marketplace courses need a licence; availability is confirmed by Karmayogi Bharat.\n </div>\n </div>\n <div class=\"mt-2\">\n\n <div class=\"course-list-container\">\n <div\n [ngClass]=\"innerTabActiveIndex > 0 ? 'course-list-container-flex':'course-list-container-right-flex' \">\n <div *ngIf=\"innerTabActiveIndex > 0\"\n [ngClass]=\"innerTabActiveIndex > 0 ? 'left-panel':''\">\n <ng-container *ngIf=\"innerTabActiveIndex === 1\">\n <div class=\"sub-heading\">\n <p>Competencies in Behavioural</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 2\">\n <div class=\"sub-heading\">\n <p>Competencies in Functional</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 3\">\n <div class=\"sub-heading\">\n <p>Competencies in Domain</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n </div>\n <div [ngClass]=\"innerTabActiveIndex > 0 ? 'right-panel':'right-panel-flex'\">\n <!-- No Course Found Message in Right Panel -->\n <div class=\"no-course-found-container\"\n *ngIf=\"filterdCourses?.length === 0 && selectedThemeFilter\">\n <div class=\"no-course-card\">\n <div class=\"no-course-icon\">\n <mat-icon>search_off</mat-icon>\n </div>\n <div class=\"no-course-content\">\n <h4>No Courses Found</h4>\n <p>No courses found for the selected theme:\n <strong>{{selectedThemeFilter}}</strong></p>\n <p>Would you like to add a course for this competency?</p>\n <button class=\"suggest-course-btn\"\n (click)=\"addCourseForSelectedTheme()\">\n <mat-icon>add_circle</mat-icon>\n Add Course\n </button>\n </div>\n </div>\n </div>\n\n <!-- Courses List -->\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n\n <div class=\"course-content\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n <div>\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\"\n (change)=\"selectedFilterCourses($event, item)\"></mat-checkbox>\n </div>\n <div class=\"ml-2\">\n <div class=\"course-pill-container\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img\n src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n <div class=\"course-pill proficiency-tag\" [ngClass]=\"item.course_level?.toLowerCase()\" *ngIf=\"item?.course_level\">\n <div class=\"course-pill-text\">\n <span>{{item?.course_level}}</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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"course-title mt-3 cursor-pointer\" (click)=\"redirectToToc(item)\">\n <span *ngIf=\"item?.course\">{{item?.course}}</span>\n <!-- <span *ngIf=\"item?.name\">{{item?.name}}****</span> -->\n <span style=\"margin-left:10px;\" (click)=\"redirectToToc(item)\"><img\n height=\"18px\" width=\"18px\"\n src=\"assets/icons/redirect.png\" /></span>\n </div>\n <div class=\"course-desc mt-2\">\n <!-- <span *ngIf=\"item?.rationale\">{{item?.rationale}}</span> -->\n <span *ngIf=\"item?.description\">{{item?.description}}</span>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioural Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',i)\">\n {{ isExpanded('Behavioural',i) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Functional',i)?.length\">\n <div class=\"competency-sub-heading\">Functional Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Functional',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',i)\">\n {{ isExpanded('Functional',i) ? 'Show Less' : '+' +\n getRemainingCount('Functional',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',i)?.length\">\n <div class=\"competency-sub-heading\">Domain Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Domain',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',i)\" class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n\n\n </div>\n\n <!-- Relevancy and Duration section -->\n <div class=\"course-footer\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">{{item?.relevancy}}%</div>\n </div>\n </div>\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Duration</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">\n <span\n *ngIf=\"item?.duration\">{{getDuration(item?.duration)}}</span>\n <span *ngIf=\"!(item?.duration)\">N/A</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- General No Data Message (only when no theme filter is active) -->\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 && !selectedThemeFilter\">\n <p>No Data Found</p>\n </div>\n </div>\n </div>\n </form>\n <div class=\"role-mapping-container\" *ngIf=\"outerTabActiveIndex === 1\">\n <div id=\"gap-analysis-content\">\n\n <div class=\"download-pdf mt-4 mb-2\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\" />\n </div>\n </div>\n <div>\n <!-- <div *ngIf=\"isPDFDownload\">\n <div class=\"pdf-heading\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}} <span\n *ngIf=\"planData?.designation_name \">_{{planData?.designation_name}}_Gap_Analysis</span>\n </div>\n </div> -->\n <div class=\"d-flex vh-100\" [ngClass]=\"isPDFDownload ? 'mt-4':''\">\n <!-- Sidebar -->\n <div class=\"d-flex flex-column p-3 bg-light border-end\" style=\"width: 250px;\">\n <h5 class=\"mb-4\">Analyze by Category</h5>\n <button *ngFor=\"let item of menuItems\"\n class=\"btn btn-outline-primary mb-2 text-start menu-list-item\"\n [class.active]=\"selectedCategory === item.key\" (click)=\"selectCategory(item.key)\">\n {{ item.label }}\n </button>\n </div>\n\n <!-- Main Content -->\n <div class=\"flex-grow-1 p-4\">\n <div class=\"d-flex justify-content-between gap-3 \">\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p>Competencies Covered</p>\n </div>\n <div class=\"div-count\">{{competencyCoveredCount}}</div>\n </div>\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p *ngIf=\"selectedCategory === 'all'\">Total Competencies</p>\n <p *ngIf=\"selectedCategory === 'behavioral'\">Total Behavioural Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'functional'\">Total Functional Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'domain'\">Total Domain Competencies</p>\n </div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'all'\">\n {{this.planData?.competencies?.length}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainTotalCompetencies}}</div>\n </div>\n <div class=\"p-3 green-bg\">\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'all'\">Overall Coverage\n </div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'behavioral'\">\n Behavioural Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'functional'\">\n Functional Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'domain'\">Domain\n Coverage</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'all'\">\n {{overallCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainCoverage}}</div>\n </div>\n </div>\n <div class=\"mt-4 all-category-list\" [ngSwitch]=\"selectedCategory\">\n <div *ngSwitchCase=\"'all'\">\n <h4>All Categories</h4>\n\n <!-- Show Behavioural section only if there are unmatched behavioural competencies -->\n <div class=\"mt-4\"\n *ngIf=\"behaviouralNotMatched && behaviouralNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show Functional section only if there are unmatched functional competencies -->\n <div class=\"mt-4\"\n *ngIf=\"functionalNotMatched && functionalNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Functional</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show Domain section only if there are unmatched domain competencies -->\n <div class=\"mt-4\" *ngIf=\"domainNotMatched && domainNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Domain</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show message when all competencies are covered -->\n <div class=\"mt-4 text-center\"\n *ngIf=\"(!behaviouralNotMatched || behaviouralNotMatched.length === 0) && \n (!functionalNotMatched || functionalNotMatched.length === 0) && \n (!domainNotMatched || domainNotMatched.length === 0)\">\n <div class=\"no-gaps-message\">\n <mat-icon class=\"success-icon\">check_circle</mat-icon>\n <h4>Excellent! All competencies are covered</h4>\n <p>All required competencies have been addressed by the selected\n courses.</p>\n </div>\n </div>\n\n </div>\n\n <div *ngSwitchCase=\"'behavioral'\">\n <h4>Behavioural</h4>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All behavioral competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'functional'\">\n <h4>Functional</h4>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Functional</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course</span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All functional competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'domain'\">\n <h4>Domain</h4>\n <div class=\"mt-4\" *ngIf=\"domainCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Domain</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"domainCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All domain competencies are covered by the selected\n courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchDefault>\n <p>Please select a category.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> <!-- Close main-content div -->\n\n </div>\n</div>\n\n\n<div [hidden]=\"!isPDFDownload\" class=\"gap-analysis-pdf-container\" #pdfContent>\n <div class=\"gap-analysis-pdf-header\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"logo\" />\n <h1><span>\n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.department_name?.name}}</span> \n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}}</span> \n <span *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span>\n </span></h1>\n <p class=\"subtitle\">A detailed breakdown of competencies Gap Analysis</p>\n \n </div>\n \n <div class=\"competency-snapshot\">\n <h2>Competency Snapshot</h2>\n <div class=\"snapshot-content\">\n <div class=\"circle-wrapper\">\n <svg class=\"progress-ring\" width=\"120\" height=\"120\">\n <circle class=\"progress-ring-bg\" cx=\"60\" cy=\"60\" r=\"52\" />\n <circle class=\"progress-ring-circle\" cx=\"60\" cy=\"60\" r=\"52\" />\n </svg>\n <div class=\"percentage-text\">{{overallCoverage}}<br /><span>Overall Coverage</span></div>\n </div>\n \n <div class=\"competency-container\">\n <!-- Total Competencies Box -->\n <div class=\"total-box\">\n <div class=\"title\">Total Competencies</div>\n <div class=\"count\">{{this.planData?.competencies?.length}}</div>\n </div>\n \n <!-- Progress Bars -->\n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text behavioral\">Behavioural</span>\n <span class=\"covered-text\">{{behavioralCompetencyCoveredCount}} / {{behavioralTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill behavioral\" [style.width.%]=\"(behavioralCompetencyCoveredCount / behavioralTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text functional\">Functional</span>\n <span class=\"covered-text\">{{functionalCompetencyCoveredCount}} / {{functionalTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill functional\" [style.width.%]=\"(functionalCompetencyCoveredCount / functionalTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text domain\">Domain</span>\n <span class=\"covered-text\">{{domainCompetencyCoveredCount}} / {{domainTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill domain\" [style.width.%]=\"(domainCompetencyCoveredCount / domainTotalCompetencies) * 100\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"gap-section mb-4\">\n <h2>Detailed Competency Analysis</h2>\n <div class=\"gap-box\">\n Bridge Your Competencies Gap\n <p class=\"subtitle\">Here are {{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}} key areas for development.</p>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Gap to Address <span *ngIf=\"(this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)) > 0\">({{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}})</span></p>\n \n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Covered Competencies <span>({{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}})</span></p> \n </div>\n <div class=\"gap-section mb-4\">\n \n <div class=\"green-bg\">\n <div class=\"div-green-label mb-2\">\n Congratulations!\n </div> \n <p>You have successfully covered </p>\n <p class=\"subtitle\">{{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}} key competencies, forming a strong professional foundation.</p>\n </div>\n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n {{item?.sub_theme}} \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"gap-section mb-4\">\n <h2>Recommended Courses</h2>\n </div>\n <app-gap-analysis-recommended-course [planData]=\"planData\"></app-gap-analysis-recommended-course>\n</div>\n \n\n\n<div class=\"overlay-loader\" *ngIf=\"loading && dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || 'Preparing course recommendation generation...' }}</p>\n <div class=\"progress-details\">\n <div class=\"progress-indicator\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Marketplace tags (shown under the AI Recommended / Manually Suggested pill) -->\n<ng-template #marketplaceTags let-course>\n <div class=\"marketplace-tags mt-2\" *ngIf=\"sharedService.getMarketplaceCourseType(course) as marketplaceType\">\n <span class=\"marketplace-tag marketplace\">Marketplace</span>\n <span class=\"marketplace-tag\" [ngClass]=\"marketplaceType\">{{ marketplaceType === 'paid' ? 'Paid' : 'Free' }}</span>\n </div>\n</ng-template>\n", 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}.proficiency-tag.strategic{background:#1b4ca1;color:#fff!important;border:none}.proficiency-tag.strategic .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.tactical{background:#5b8def;color:#fff!important;border:none}.proficiency-tag.tactical .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1!important;border:none}.proficiency-tag.operational .course-pill-text{color:#1b4ca1!important;font-size:14px!important;font-weight:500!important}.marketplace-tags{display:flex;flex-wrap:wrap;gap:8px}.marketplace-tag{display:inline-flex;align-items:center;padding:4px 8px;border-radius:4px;font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap}.marketplace-tag.marketplace{background:#3f51b51f;color:#1a237e}.marketplace-tag.free{background:#0080001c;color:#006400}.marketplace-tag.paid{background:#d32f2f1c;color:#8b1a1a}.filtered-count-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.filtered-count-spacer{flex:1}.marketplace-count{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:4px;background:#3f51b51f;color:#1a237e;font-size:14px;font-weight:600}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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" }] }); }
|
|
6211
6332
|
}
|
|
6212
6333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GenerateCourseRecommendationComponent, decorators: [{
|
|
6213
6334
|
type: Component,
|
|
6214
|
-
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> <span>Course</span>\n </div>\n </div>\n <div class=\"course-pill proficiency-tag\" [ngClass]=\"item.course_level?.toLowerCase()\" *ngIf=\"item?.course_level\">\n <div class=\"course-pill-text\">\n <span>{{item?.course_level}}</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- <div>\n <div class=\"ai-recommened-pill\">\n <div class=\"ai-recommened-pill-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n\n <span *ngIf=\"item?.rationale\">AI Recommended\n <span *ngIf=\"item?.is_public\"> - Public</span>\n <span *ngIf=\"!item?.is_public\"> - iGOT</span>\n </span>\n <span *ngIf=\"!item?.rationale\">Manually Suggested - iGOT</span>\n\n </div>\n </div>\n </div> -->\n <div *ngIf=\"item?.rationale && !item?.is_public\">\n <div class=\"ai-recommened-pill-green\">\n <div class=\"ai-recommened-pill-green-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"item?.rationale && item?.is_public\">\n <div class=\"ai-recommened-pill-public\">\n <div class=\"ai-recommened-pill-public-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - Public </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!item?.rationale\">\n <div class=\"ai-recommened-pill-gray\">\n <div class=\"ai-recommened-pill-gray-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>Manually Suggested - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"course-title mt-3 cursor-pointer\" (click)=\"redirectToToc(item)\">\n <span *ngIf=\"item?.course\">{{item?.course}}</span>\n <!-- <span *ngIf=\"item?.name\">{{item?.name}}****</span> -->\n <span style=\"margin-left:10px;\" (click)=\"redirectToToc(item)\"><img\n height=\"18px\" width=\"18px\"\n src=\"assets/icons/redirect.png\" /></span>\n </div>\n <div class=\"course-desc mt-2\">\n <!-- <span *ngIf=\"item?.rationale\">{{item?.rationale}}</span> -->\n <span *ngIf=\"item?.description\">{{item?.description}}</span>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioural Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',i)\">\n {{ isExpanded('Behavioural',i) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Functional',i)?.length\">\n <div class=\"competency-sub-heading\">Functional Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Functional',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',i)\">\n {{ isExpanded('Functional',i) ? 'Show Less' : '+' +\n getRemainingCount('Functional',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',i)?.length\">\n <div class=\"competency-sub-heading\">Domain Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Domain',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',i)\" class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n\n\n </div>\n\n <!-- Relevancy and Duration section -->\n <div class=\"course-footer\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">{{item?.relevancy}}%</div>\n </div>\n </div>\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Duration</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">\n <span\n *ngIf=\"item?.duration\">{{getDuration(item?.duration)}}</span>\n <span *ngIf=\"!(item?.duration)\">N/A</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- General No Data Message (only when no theme filter is active) -->\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 && !selectedThemeFilter\">\n <p>No Data Found</p>\n </div>\n </div>\n </div>\n </form>\n <div class=\"role-mapping-container\" *ngIf=\"outerTabActiveIndex === 1\">\n <div id=\"gap-analysis-content\">\n\n <div class=\"download-pdf mt-4 mb-2\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\" />\n </div>\n </div>\n <div>\n <!-- <div *ngIf=\"isPDFDownload\">\n <div class=\"pdf-heading\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}} <span\n *ngIf=\"planData?.designation_name \">_{{planData?.designation_name}}_Gap_Analysis</span>\n </div>\n </div> -->\n <div class=\"d-flex vh-100\" [ngClass]=\"isPDFDownload ? 'mt-4':''\">\n <!-- Sidebar -->\n <div class=\"d-flex flex-column p-3 bg-light border-end\" style=\"width: 250px;\">\n <h5 class=\"mb-4\">Analyze by Category</h5>\n <button *ngFor=\"let item of menuItems\"\n class=\"btn btn-outline-primary mb-2 text-start menu-list-item\"\n [class.active]=\"selectedCategory === item.key\" (click)=\"selectCategory(item.key)\">\n {{ item.label }}\n </button>\n </div>\n\n <!-- Main Content -->\n <div class=\"flex-grow-1 p-4\">\n <div class=\"d-flex justify-content-between gap-3 \">\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p>Competencies Covered</p>\n </div>\n <div class=\"div-count\">{{competencyCoveredCount}}</div>\n </div>\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p *ngIf=\"selectedCategory === 'all'\">Total Competencies</p>\n <p *ngIf=\"selectedCategory === 'behavioral'\">Total Behavioural Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'functional'\">Total Functional Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'domain'\">Total Domain Competencies</p>\n </div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'all'\">\n {{this.planData?.competencies?.length}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainTotalCompetencies}}</div>\n </div>\n <div class=\"p-3 green-bg\">\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'all'\">Overall Coverage\n </div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'behavioral'\">\n Behavioural Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'functional'\">\n Functional Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'domain'\">Domain\n Coverage</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'all'\">\n {{overallCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainCoverage}}</div>\n </div>\n </div>\n <div class=\"mt-4 all-category-list\" [ngSwitch]=\"selectedCategory\">\n <div *ngSwitchCase=\"'all'\">\n <h4>All Categories</h4>\n\n <!-- Show Behavioural section only if there are unmatched behavioural competencies -->\n <div class=\"mt-4\"\n *ngIf=\"behaviouralNotMatched && behaviouralNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show Functional section only if there are unmatched functional competencies -->\n <div class=\"mt-4\"\n *ngIf=\"functionalNotMatched && functionalNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Functional</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show Domain section only if there are unmatched domain competencies -->\n <div class=\"mt-4\" *ngIf=\"domainNotMatched && domainNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Domain</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show message when all competencies are covered -->\n <div class=\"mt-4 text-center\"\n *ngIf=\"(!behaviouralNotMatched || behaviouralNotMatched.length === 0) && \n (!functionalNotMatched || functionalNotMatched.length === 0) && \n (!domainNotMatched || domainNotMatched.length === 0)\">\n <div class=\"no-gaps-message\">\n <mat-icon class=\"success-icon\">check_circle</mat-icon>\n <h4>Excellent! All competencies are covered</h4>\n <p>All required competencies have been addressed by the selected\n courses.</p>\n </div>\n </div>\n\n </div>\n\n <div *ngSwitchCase=\"'behavioral'\">\n <h4>Behavioural</h4>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All behavioral competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'functional'\">\n <h4>Functional</h4>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Functional</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course</span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All functional competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'domain'\">\n <h4>Domain</h4>\n <div class=\"mt-4\" *ngIf=\"domainCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Domain</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"domainCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All domain competencies are covered by the selected\n courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchDefault>\n <p>Please select a category.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> <!-- Close main-content div -->\n\n </div>\n</div>\n\n\n<div [hidden]=\"!isPDFDownload\" class=\"gap-analysis-pdf-container\" #pdfContent>\n <div class=\"gap-analysis-pdf-header\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"logo\" />\n <h1><span>\n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.department_name?.name}}</span> \n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}}</span> \n <span *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span>\n </span></h1>\n <p class=\"subtitle\">A detailed breakdown of competencies Gap Analysis</p>\n \n </div>\n \n <div class=\"competency-snapshot\">\n <h2>Competency Snapshot</h2>\n <div class=\"snapshot-content\">\n <div class=\"circle-wrapper\">\n <svg class=\"progress-ring\" width=\"120\" height=\"120\">\n <circle class=\"progress-ring-bg\" cx=\"60\" cy=\"60\" r=\"52\" />\n <circle class=\"progress-ring-circle\" cx=\"60\" cy=\"60\" r=\"52\" />\n </svg>\n <div class=\"percentage-text\">{{overallCoverage}}<br /><span>Overall Coverage</span></div>\n </div>\n \n <div class=\"competency-container\">\n <!-- Total Competencies Box -->\n <div class=\"total-box\">\n <div class=\"title\">Total Competencies</div>\n <div class=\"count\">{{this.planData?.competencies?.length}}</div>\n </div>\n \n <!-- Progress Bars -->\n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text behavioral\">Behavioural</span>\n <span class=\"covered-text\">{{behavioralCompetencyCoveredCount}} / {{behavioralTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill behavioral\" [style.width.%]=\"(behavioralCompetencyCoveredCount / behavioralTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text functional\">Functional</span>\n <span class=\"covered-text\">{{functionalCompetencyCoveredCount}} / {{functionalTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill functional\" [style.width.%]=\"(functionalCompetencyCoveredCount / functionalTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text domain\">Domain</span>\n <span class=\"covered-text\">{{domainCompetencyCoveredCount}} / {{domainTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill domain\" [style.width.%]=\"(domainCompetencyCoveredCount / domainTotalCompetencies) * 100\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"gap-section mb-4\">\n <h2>Detailed Competency Analysis</h2>\n <div class=\"gap-box\">\n Bridge Your Competencies Gap\n <p class=\"subtitle\">Here are {{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}} key areas for development.</p>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Gap to Address <span *ngIf=\"(this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)) > 0\">({{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}})</span></p>\n \n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Covered Competencies <span>({{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}})</span></p> \n </div>\n <div class=\"gap-section mb-4\">\n \n <div class=\"green-bg\">\n <div class=\"div-green-label mb-2\">\n Congratulations!\n </div> \n <p>You have successfully covered </p>\n <p class=\"subtitle\">{{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}} key competencies, forming a strong professional foundation.</p>\n </div>\n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n {{item?.sub_theme}} \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"gap-section mb-4\">\n <h2>Recommended Courses</h2>\n </div>\n <app-gap-analysis-recommended-course [planData]=\"planData\"></app-gap-analysis-recommended-course>\n</div>\n \n\n\n<div class=\"overlay-loader\" *ngIf=\"loading && dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || 'Preparing course recommendation generation...' }}</p>\n <div class=\"progress-details\">\n <div class=\"progress-indicator\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";.container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;width:100%;gap:8px}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.relevancy,.competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.course-list-item:hover{box-shadow:0 4px 8px #00000026}.course-list-item:only-child{flex:1 1 auto;max-width:800px}.checked-course-container{display:flex;width:60%}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex;justify-content:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.header-left{flex:1}.header-actions{display:flex;align-items:center;gap:12px}.regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.regenerate-btn .mat-spinner{margin:0}.regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.close-btn:hover{background-color:#f5f5f5}.close-btn .mat-icon{font-size:20px;width:20px;height:20px}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.initial-loading-container{display:flex;justify-content:center;align-items:center;min-height:400px;width:100%}.initial-loading-container .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 2rem}.initial-loading-container .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.initial-loading-container .loading-content .loading-text .main-message{font-size:16px;font-weight:600;margin-bottom:1rem;color:#1b4ca1}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:300px;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#4caf50);border-radius:4px;transition:width .3s ease-in-out}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:12px;color:#666;font-weight:500}.initial-loading-container .loading-content .loading-text .progress-details .time-estimate{font-size:12px;color:#888;font-style:italic}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.overlay-loader .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 12px #00000026}.overlay-loader .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.overlay-loader .loading-content .loading-text .main-message{margin:0 0 16px;font-size:18px;font-weight:600;text-align:center}.overlay-loader .loading-content .loading-text .progress-details{margin-top:16px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:12px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#2563eb);border-radius:4px;transition:width .5s ease-in-out}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:14px;font-weight:500;color:#1b4ca1;display:block;text-align:center}.overlay-loader .loading-content .loading-text .progress-details .time-estimate{color:#666;font-size:12px;font-style:italic;display:block;text-align:center;margin-top:8px}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.competencies-grid-3{width:33%}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.grid-list-item div{padding:5px 10px;margin:10px 0}.course-pill-container{display:flex;gap:8px}.relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.show-more-competency{display:inline-flex;align-items:center}.show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.show-more-link:hover{text-decoration:underline}.course-content{flex:1;display:flex;flex-direction:column}.course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.menu-list-item.active{background-color:#1b4ca1;color:#fff}.menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.div-count{font-family:Lato;font-size:20px;font-weight:700}.green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.list-flex{display:flex;flex-direction:row;justify-content:space-between}.all-category-list .mat-icon{vertical-align:middle}.course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.left-panel{flex:0 0 250px;font-weight:700;text-align:left}.right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.course-list-container-right-flex{display:flex}.no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;gap:0px;width:100%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:5px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}.search-container-compact{flex:0 0 auto;min-width:180px}.search-container-compact .rsearch{position:relative;display:flex;align-items:center}.search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.search-container-compact .sinput-compact{border-radius:25px;border:2px solid #ccc;padding:20px 12px 20px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.search-container-compact .sinput-compact::placeholder{color:#999}.btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.theme-filter-controls{margin-bottom:8px}.clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.no-course-card .no-course-icon{margin-bottom:20px}.no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.no-course-card .suggest-course-btn:active{transform:translateY(0)}.no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.search-and-buttons-container{flex-direction:column;align-items:stretch}.search-container-compact{min-width:auto;width:100%}.btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.course-list-container-flex{flex-direction:column}.left-panel{flex:none!important;max-height:300px}.course-list-item{flex:0 0 100%;max-width:100%}.no-course-card{padding:20px}.no-course-card .no-course-content h4{font-size:20px}.no-course-card .no-course-content p{font-size:14px}}::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.download-pdf{justify-content:end;display:flex;flex-direction:row}.gap-analysis-pdf-container{font-family:Lato;max-width:900px;margin:auto;color:#212121}.gap-analysis-pdf-header{text-align:center;margin-bottom:2rem}.gap-analysis-pdf-header .logo{height:60px;margin-bottom:.5rem}.gap-analysis-pdf-header h1{font-size:1.8rem;font-weight:600;margin:.5rem 0}.gap-analysis-pdf-header .subtitle{color:#555;font-size:.95rem}.gap-analysis-pdf-header .download-btn{background:#5e00ff;color:#fff;border:none;padding:10px 20px;border-radius:6px;margin-top:1rem;font-weight:500;cursor:pointer}.competency-snapshot{background:#fafafa;border-radius:12px;padding:2rem;margin-bottom:2rem}.competency-snapshot h2{font-size:1.4rem;font-weight:600;margin-bottom:1.5rem}.competency-snapshot .snapshot-content{display:flex;gap:2rem;align-items:center;justify-content:space-between}.competency-snapshot .snapshot-content .circle-wrapper{position:relative;width:120px;height:120px}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-bg{fill:none;stroke:#eee;stroke-width:10}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-circle{fill:none;stroke:#6c63ff;stroke-width:10;stroke-linecap:round;stroke-dasharray:326.72;stroke-dashoffset:117.6192;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .35s}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:1.4rem;text-align:center}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text span{display:block;font-size:.75rem;font-weight:400;color:#555}.competency-snapshot .snapshot-content .details{flex-grow:1}.competency-snapshot .snapshot-content .details .total-competencies{font-size:1.2rem;margin-bottom:1rem}.competency-snapshot .snapshot-content .details .bar{margin:.5rem 0;padding:.6rem 1rem;border-radius:6px;font-weight:500;display:flex;justify-content:space-between;color:#fff}.competency-snapshot .snapshot-content .details .bar.behavioral{background:#7b1fa2}.competency-snapshot .snapshot-content .details .bar.functional{background:#0288d1}.competency-snapshot .snapshot-content .details .bar.domain{background:#f57c00}.gap-section{margin-top:2rem}.gap-section h2{font-size:1.3rem;margin-bottom:1rem}.gap-section .gap-box{background:#eef1ff;border-left:5px solid #6c63ff;padding:1rem;border-radius:6px;font-weight:500;color:#333}.gap-section .green-bg{background-color:#0080001c;border-left:5px solid #2d9b2d;padding:1rem;border-radius:6px;font-weight:500;color:#006400}.competency-container{width:100%;margin:0 auto;font-family:Segoe UI,sans-serif;color:#212121;display:flex;flex-direction:column}.total-box{background:#f8f9fc;border-radius:10px;padding:1.5rem;text-align:center;border:1px solid #e0e0e0;margin-bottom:1.5rem}.total-box .title{font-size:1rem;color:#666}.total-box .count{font-size:2rem;font-weight:700;color:#111;margin-top:.5rem}.progress-group{margin-bottom:1.5rem}.progress-group .progress-label{display:flex;justify-content:space-between;margin-bottom:6px}.progress-group .progress-label .label-text{font-weight:600}.progress-group .progress-label .covered-text{font-size:.9rem;color:#444}.progress-group .progress-label .behavioral{color:#f8b861}.progress-group .progress-label .functional{color:#e24577}.progress-group .progress-label .domain{color:#7b47a4}.progress-group .progress-bar{height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden}.progress-group .progress-bar .progress-fill{height:100%;border-radius:5px;transition:width .5s ease-in-out}.progress-group .progress-bar .progress-fill.behavioral{background:#f8b861}.progress-group .progress-bar .progress-fill.functional{background:#e24577}.progress-group .progress-bar .progress-fill.domain{background:#7b47a4}.competency-card{border-radius:8px;padding:1rem 1.5rem;margin-bottom:1rem;border:1px solid transparent}.competency-card .title{font-weight:600;font-size:1.1rem;color:#222;margin-bottom:.4rem}.competency-card .subtitle{font-size:.95rem;color:#555}.competency-card .subtitle .tag{font-weight:500}.competency-card .subtitle .behavioral,.competency-card .subtitle .domain,.competency-card .subtitle .functional{color:#000}.competency-card.behavioral{background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;border-color:#f8b861}.competency-card.functional{background:linear-gradient(0deg,#e245773d 0% 100%),#fff;border-color:#e24577}.competency-card.domain{background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;border-color:#7b47a4}.disclaimer-container{margin:8px 16px 0}.disclaimer-message{background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:20px;padding:8px 16px;font-family:Lato;font-size:14px;color:#333;line-height:1.2}.disclaimer-message strong{color:#000;font-weight:600}.select-all-container{display:flex;flex-direction:row;justify-content:space-between}::ng-deep .search-and-buttons-container .mat-form-field-infix{padding:10px!important}::ng-deep .search-and-buttons-container .mat-form-field-wrapper{width:100%!important}::ng-deep .select-search-panel{border:1px solid #ccc!important;border-radius:12px!important;box-shadow:0 8px 20px #0000001f}:host ::ng-deep .mat-select-arrow-wrapper{margin-top:5px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:#ccc}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#1b4ca1;border-color:#1b4ca1!important}::ng-deep .select-search-panel .mat-option.mat-selected:not(.mat-option-disabled){background-color:#1b4ca1!important;color:#fff!important}:host ::ng-deep .mat-form-field-appearance-outline{border-radius:25px;border:1px solid #ccc}:host ::ng-deep .mat-form-field-focused .mat-form-field-appearance-outline{border-color:#1b4ca1!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start{border-radius:25px 0 0 25px;border:none!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-right:none!important;border:none!important;border-radius:0 25px 25px 0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap{border:none!important;border-radius:25px}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{background-color:transparent!important}:host ::ng-deep .search-and-buttons-container .mat-option-text{color:#fff!important}.proficiency-tag.strategic{background:#1b4ca1;color:#fff!important;border:none}.proficiency-tag.strategic .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.tactical{background:#5b8def;color:#fff!important;border:none}.proficiency-tag.tactical .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1!important;border:none}.proficiency-tag.operational .course-pill-text{color:#1b4ca1!important;font-size:14px!important;font-weight:500!important}\n"] }]
|
|
6335
|
+
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 class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Source</label>\n </div>\n <div>\n <mat-form-field appearance=\"outline\">\n <mat-select\n formControlName=\"source\"\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n <mat-option *ngFor=\"let s of sourceOptions\" [value]=\"s.value\">\n {{ s.label }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n <div class=\"mt-4 filtered-count-row\">\n <div style=\"font-size:16px;font-weight:bold;color:#000\">\n Filtered Course Count : {{filterdCourses?.length}}\n </div>\n <ng-container *ngIf=\"sharedService.countMarketplaceCourses(filterdCourses) as marketplaceCount\">\n <span class=\"marketplace-count\" *ngIf=\"marketplaceCount.marketplace\">\n Marketplace : {{ marketplaceCount.marketplace }}\n <span class=\"marketplace-tag free\">{{ marketplaceCount.free }} Free</span>\n <span class=\"marketplace-tag paid\">{{ marketplaceCount.paid }} Paid</span>\n </span>\n </ng-container>\n <span class=\"filtered-count-spacer\"></span>\n <input class=\"btn-active\" type=\"button\" value=\"Reset All Filters\"\n (click)=\"resetFilters()\" />\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 courses before adding them to the plan.\n Marketplace courses need a licence; availability is confirmed by Karmayogi Bharat.\n </div>\n </div>\n <div class=\"mt-2\">\n\n <div class=\"course-list-container\">\n <div\n [ngClass]=\"innerTabActiveIndex > 0 ? 'course-list-container-flex':'course-list-container-right-flex' \">\n <div *ngIf=\"innerTabActiveIndex > 0\"\n [ngClass]=\"innerTabActiveIndex > 0 ? 'left-panel':''\">\n <ng-container *ngIf=\"innerTabActiveIndex === 1\">\n <div class=\"sub-heading\">\n <p>Competencies in Behavioural</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 2\">\n <div class=\"sub-heading\">\n <p>Competencies in Functional</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 3\">\n <div class=\"sub-heading\">\n <p>Competencies in Domain</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n </div>\n <div [ngClass]=\"innerTabActiveIndex > 0 ? 'right-panel':'right-panel-flex'\">\n <!-- No Course Found Message in Right Panel -->\n <div class=\"no-course-found-container\"\n *ngIf=\"filterdCourses?.length === 0 && selectedThemeFilter\">\n <div class=\"no-course-card\">\n <div class=\"no-course-icon\">\n <mat-icon>search_off</mat-icon>\n </div>\n <div class=\"no-course-content\">\n <h4>No Courses Found</h4>\n <p>No courses found for the selected theme:\n <strong>{{selectedThemeFilter}}</strong></p>\n <p>Would you like to add a course for this competency?</p>\n <button class=\"suggest-course-btn\"\n (click)=\"addCourseForSelectedTheme()\">\n <mat-icon>add_circle</mat-icon>\n Add Course\n </button>\n </div>\n </div>\n </div>\n\n <!-- Courses List -->\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n\n <div class=\"course-content\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n <div>\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\"\n (change)=\"selectedFilterCourses($event, item)\"></mat-checkbox>\n </div>\n <div class=\"ml-2\">\n <div class=\"course-pill-container\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img\n src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n <div class=\"course-pill proficiency-tag\" [ngClass]=\"item.course_level?.toLowerCase()\" *ngIf=\"item?.course_level\">\n <div class=\"course-pill-text\">\n <span>{{item?.course_level}}</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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation}}</span>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"course-title mt-3 cursor-pointer\" (click)=\"redirectToToc(item)\">\n <span *ngIf=\"item?.course\">{{item?.course}}</span>\n <!-- <span *ngIf=\"item?.name\">{{item?.name}}****</span> -->\n <span style=\"margin-left:10px;\" (click)=\"redirectToToc(item)\"><img\n height=\"18px\" width=\"18px\"\n src=\"assets/icons/redirect.png\" /></span>\n </div>\n <div class=\"course-desc mt-2\">\n <!-- <span *ngIf=\"item?.rationale\">{{item?.rationale}}</span> -->\n <span *ngIf=\"item?.description\">{{item?.description}}</span>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioural Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',i)\">\n {{ isExpanded('Behavioural',i) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Functional',i)?.length\">\n <div class=\"competency-sub-heading\">Functional Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Functional',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',i)\">\n {{ isExpanded('Functional',i) ? 'Show Less' : '+' +\n getRemainingCount('Functional',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',i)?.length\">\n <div class=\"competency-sub-heading\">Domain Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Domain',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',i)\" class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n\n\n </div>\n\n <!-- Relevancy and Duration section -->\n <div class=\"course-footer\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">{{item?.relevancy}}%</div>\n </div>\n </div>\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Duration</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">\n <span\n *ngIf=\"item?.duration\">{{getDuration(item?.duration)}}</span>\n <span *ngIf=\"!(item?.duration)\">N/A</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- General No Data Message (only when no theme filter is active) -->\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 && !selectedThemeFilter\">\n <p>No Data Found</p>\n </div>\n </div>\n </div>\n </form>\n <div class=\"role-mapping-container\" *ngIf=\"outerTabActiveIndex === 1\">\n <div id=\"gap-analysis-content\">\n\n <div class=\"download-pdf mt-4 mb-2\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\" />\n </div>\n </div>\n <div>\n <!-- <div *ngIf=\"isPDFDownload\">\n <div class=\"pdf-heading\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}} <span\n *ngIf=\"planData?.designation_name \">_{{planData?.designation_name}}_Gap_Analysis</span>\n </div>\n </div> -->\n <div class=\"d-flex vh-100\" [ngClass]=\"isPDFDownload ? 'mt-4':''\">\n <!-- Sidebar -->\n <div class=\"d-flex flex-column p-3 bg-light border-end\" style=\"width: 250px;\">\n <h5 class=\"mb-4\">Analyze by Category</h5>\n <button *ngFor=\"let item of menuItems\"\n class=\"btn btn-outline-primary mb-2 text-start menu-list-item\"\n [class.active]=\"selectedCategory === item.key\" (click)=\"selectCategory(item.key)\">\n {{ item.label }}\n </button>\n </div>\n\n <!-- Main Content -->\n <div class=\"flex-grow-1 p-4\">\n <div class=\"d-flex justify-content-between gap-3 \">\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p>Competencies Covered</p>\n </div>\n <div class=\"div-count\">{{competencyCoveredCount}}</div>\n </div>\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p *ngIf=\"selectedCategory === 'all'\">Total Competencies</p>\n <p *ngIf=\"selectedCategory === 'behavioral'\">Total Behavioural Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'functional'\">Total Functional Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'domain'\">Total Domain Competencies</p>\n </div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'all'\">\n {{this.planData?.competencies?.length}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainTotalCompetencies}}</div>\n </div>\n <div class=\"p-3 green-bg\">\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'all'\">Overall Coverage\n </div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'behavioral'\">\n Behavioural Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'functional'\">\n Functional Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'domain'\">Domain\n Coverage</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'all'\">\n {{overallCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainCoverage}}</div>\n </div>\n </div>\n <div class=\"mt-4 all-category-list\" [ngSwitch]=\"selectedCategory\">\n <div *ngSwitchCase=\"'all'\">\n <h4>All Categories</h4>\n\n <!-- Show Behavioural section only if there are unmatched behavioural competencies -->\n <div class=\"mt-4\"\n *ngIf=\"behaviouralNotMatched && behaviouralNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show Functional section only if there are unmatched functional competencies -->\n <div class=\"mt-4\"\n *ngIf=\"functionalNotMatched && functionalNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Functional</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show Domain section only if there are unmatched domain competencies -->\n <div class=\"mt-4\" *ngIf=\"domainNotMatched && domainNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Domain</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div> -->\n </div>\n </div>\n </div>\n\n <!-- Show message when all competencies are covered -->\n <div class=\"mt-4 text-center\"\n *ngIf=\"(!behaviouralNotMatched || behaviouralNotMatched.length === 0) && \n (!functionalNotMatched || functionalNotMatched.length === 0) && \n (!domainNotMatched || domainNotMatched.length === 0)\">\n <div class=\"no-gaps-message\">\n <mat-icon class=\"success-icon\">check_circle</mat-icon>\n <h4>Excellent! All competencies are covered</h4>\n <p>All required competencies have been addressed by the selected\n courses.</p>\n </div>\n </div>\n\n </div>\n\n <div *ngSwitchCase=\"'behavioral'\">\n <h4>Behavioural</h4>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All behavioral competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'functional'\">\n <h4>Functional</h4>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Functional</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course</span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All functional competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'domain'\">\n <h4>Domain</h4>\n <div class=\"mt-4\" *ngIf=\"domainCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Domain</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <!-- <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div> -->\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"domainCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All domain competencies are covered by the selected\n courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchDefault>\n <p>Please select a category.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> <!-- Close main-content div -->\n\n </div>\n</div>\n\n\n<div [hidden]=\"!isPDFDownload\" class=\"gap-analysis-pdf-container\" #pdfContent>\n <div class=\"gap-analysis-pdf-header\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"logo\" />\n <h1><span>\n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.department_name?.name}}</span> \n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}}</span> \n <span *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span>\n </span></h1>\n <p class=\"subtitle\">A detailed breakdown of competencies Gap Analysis</p>\n \n </div>\n \n <div class=\"competency-snapshot\">\n <h2>Competency Snapshot</h2>\n <div class=\"snapshot-content\">\n <div class=\"circle-wrapper\">\n <svg class=\"progress-ring\" width=\"120\" height=\"120\">\n <circle class=\"progress-ring-bg\" cx=\"60\" cy=\"60\" r=\"52\" />\n <circle class=\"progress-ring-circle\" cx=\"60\" cy=\"60\" r=\"52\" />\n </svg>\n <div class=\"percentage-text\">{{overallCoverage}}<br /><span>Overall Coverage</span></div>\n </div>\n \n <div class=\"competency-container\">\n <!-- Total Competencies Box -->\n <div class=\"total-box\">\n <div class=\"title\">Total Competencies</div>\n <div class=\"count\">{{this.planData?.competencies?.length}}</div>\n </div>\n \n <!-- Progress Bars -->\n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text behavioral\">Behavioural</span>\n <span class=\"covered-text\">{{behavioralCompetencyCoveredCount}} / {{behavioralTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill behavioral\" [style.width.%]=\"(behavioralCompetencyCoveredCount / behavioralTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text functional\">Functional</span>\n <span class=\"covered-text\">{{functionalCompetencyCoveredCount}} / {{functionalTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill functional\" [style.width.%]=\"(functionalCompetencyCoveredCount / functionalTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text domain\">Domain</span>\n <span class=\"covered-text\">{{domainCompetencyCoveredCount}} / {{domainTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill domain\" [style.width.%]=\"(domainCompetencyCoveredCount / domainTotalCompetencies) * 100\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"gap-section mb-4\">\n <h2>Detailed Competency Analysis</h2>\n <div class=\"gap-box\">\n Bridge Your Competencies Gap\n <p class=\"subtitle\">Here are {{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}} key areas for development.</p>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Gap to Address <span *ngIf=\"(this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)) > 0\">({{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}})</span></p>\n \n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Covered Competencies <span>({{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}})</span></p> \n </div>\n <div class=\"gap-section mb-4\">\n \n <div class=\"green-bg\">\n <div class=\"div-green-label mb-2\">\n Congratulations!\n </div> \n <p>You have successfully covered </p>\n <p class=\"subtitle\">{{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}} key competencies, forming a strong professional foundation.</p>\n </div>\n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n {{item?.sub_theme}} \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"gap-section mb-4\">\n <h2>Recommended Courses</h2>\n </div>\n <app-gap-analysis-recommended-course [planData]=\"planData\"></app-gap-analysis-recommended-course>\n</div>\n \n\n\n<div class=\"overlay-loader\" *ngIf=\"loading && dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || 'Preparing course recommendation generation...' }}</p>\n <div class=\"progress-details\">\n <div class=\"progress-indicator\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Marketplace tags (shown under the AI Recommended / Manually Suggested pill) -->\n<ng-template #marketplaceTags let-course>\n <div class=\"marketplace-tags mt-2\" *ngIf=\"sharedService.getMarketplaceCourseType(course) as marketplaceType\">\n <span class=\"marketplace-tag marketplace\">Marketplace</span>\n <span class=\"marketplace-tag\" [ngClass]=\"marketplaceType\">{{ marketplaceType === 'paid' ? 'Paid' : 'Free' }}</span>\n </div>\n</ng-template>\n", 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}.proficiency-tag.strategic{background:#1b4ca1;color:#fff!important;border:none}.proficiency-tag.strategic .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.tactical{background:#5b8def;color:#fff!important;border:none}.proficiency-tag.tactical .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1!important;border:none}.proficiency-tag.operational .course-pill-text{color:#1b4ca1!important;font-size:14px!important;font-weight:500!important}.marketplace-tags{display:flex;flex-wrap:wrap;gap:8px}.marketplace-tag{display:inline-flex;align-items:center;padding:4px 8px;border-radius:4px;font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap}.marketplace-tag.marketplace{background:#3f51b51f;color:#1a237e}.marketplace-tag.free{background:#0080001c;color:#006400}.marketplace-tag.paid{background:#d32f2f1c;color:#8b1a1a}.filtered-count-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.filtered-count-spacer{flex:1}.marketplace-count{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:4px;background:#3f51b51f;color:#1a237e;font-size:14px;font-weight:600}\n"] }]
|
|
6215
6336
|
}], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
6216
6337
|
type: Inject,
|
|
6217
6338
|
args: [MAT_DIALOG_DATA]
|
|
@@ -7044,11 +7165,11 @@ class ViewCourseRecommendationComponent {
|
|
|
7044
7165
|
});
|
|
7045
7166
|
}
|
|
7046
7167
|
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 }); }
|
|
7047
|
-
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> <span>Course</span>\n </div>\n </div>\n \n </div>\n <div class=\"ml-2\">\n <div class=\"course-pill proficiency-tag\" [ngClass]=\"item.course_level?.toLowerCase()\" *ngIf=\"item?.course_level\">\n <div class=\"course-pill-text\">\n <span>{{item?.course_level}}</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}.proficiency-tag.strategic{background:#1b4ca1;color:#fff!important;border:none}.proficiency-tag.strategic .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.tactical{background:#5b8def;color:#fff!important;border:none}.proficiency-tag.tactical .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1!important;border:none}.proficiency-tag.operational .course-pill-text{color:#1b4ca1!important;font-size:14px!important;font-weight:500!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: 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: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
7168
|
+
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> <span>Course</span>\n </div>\n </div>\n \n </div>\n <div class=\"ml-2\">\n <div class=\"course-pill proficiency-tag\" [ngClass]=\"item.course_level?.toLowerCase()\" *ngIf=\"item?.course_level\">\n <div class=\"course-pill-text\">\n <span>{{item?.course_level}}</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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\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>\n\n<!-- Marketplace tags (shown under the AI Recommended / Manually Suggested pill) -->\n<ng-template #marketplaceTags let-course>\n <div class=\"marketplace-tags mt-2\" *ngIf=\"sharedService.getMarketplaceCourseType(course) as marketplaceType\">\n <span class=\"marketplace-tag marketplace\">Marketplace</span>\n <span class=\"marketplace-tag\" [ngClass]=\"marketplaceType\">{{ marketplaceType === 'paid' ? 'Paid' : 'Free' }}</span>\n </div>\n</ng-template>\n", 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}.proficiency-tag.strategic{background:#1b4ca1;color:#fff!important;border:none}.proficiency-tag.strategic .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.tactical{background:#5b8def;color:#fff!important;border:none}.proficiency-tag.tactical .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1!important;border:none}.proficiency-tag.operational .course-pill-text{color:#1b4ca1!important;font-size:14px!important;font-weight:500!important}.marketplace-tags{display:flex;flex-wrap:wrap;gap:8px}.marketplace-tag{display:inline-flex;align-items:center;padding:4px 8px;border-radius:4px;font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap}.marketplace-tag.marketplace{background:#3f51b51f;color:#1a237e}.marketplace-tag.free{background:#0080001c;color:#006400}.marketplace-tag.paid{background:#d32f2f1c;color:#8b1a1a}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
7048
7169
|
}
|
|
7049
7170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewCourseRecommendationComponent, decorators: [{
|
|
7050
7171
|
type: Component,
|
|
7051
|
-
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> <span>Course</span>\n </div>\n </div>\n \n </div>\n <div class=\"ml-2\">\n <div class=\"course-pill proficiency-tag\" [ngClass]=\"item.course_level?.toLowerCase()\" *ngIf=\"item?.course_level\">\n <div class=\"course-pill-text\">\n <span>{{item?.course_level}}</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}.proficiency-tag.strategic{background:#1b4ca1;color:#fff!important;border:none}.proficiency-tag.strategic .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.tactical{background:#5b8def;color:#fff!important;border:none}.proficiency-tag.tactical .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1!important;border:none}.proficiency-tag.operational .course-pill-text{color:#1b4ca1!important;font-size:14px!important;font-weight:500!important}\n"] }]
|
|
7172
|
+
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> <span>Course</span>\n </div>\n </div>\n \n </div>\n <div class=\"ml-2\">\n <div class=\"course-pill proficiency-tag\" [ngClass]=\"item.course_level?.toLowerCase()\" *ngIf=\"item?.course_level\">\n <div class=\"course-pill-text\">\n <span>{{item?.course_level}}</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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\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>\n\n<!-- Marketplace tags (shown under the AI Recommended / Manually Suggested pill) -->\n<ng-template #marketplaceTags let-course>\n <div class=\"marketplace-tags mt-2\" *ngIf=\"sharedService.getMarketplaceCourseType(course) as marketplaceType\">\n <span class=\"marketplace-tag marketplace\">Marketplace</span>\n <span class=\"marketplace-tag\" [ngClass]=\"marketplaceType\">{{ marketplaceType === 'paid' ? 'Paid' : 'Free' }}</span>\n </div>\n</ng-template>\n", 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}.proficiency-tag.strategic{background:#1b4ca1;color:#fff!important;border:none}.proficiency-tag.strategic .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.tactical{background:#5b8def;color:#fff!important;border:none}.proficiency-tag.tactical .course-pill-text{color:#fff!important;font-size:14px!important;font-weight:500!important}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1!important;border:none}.proficiency-tag.operational .course-pill-text{color:#1b4ca1!important;font-size:14px!important;font-weight:500!important}.marketplace-tags{display:flex;flex-wrap:wrap;gap:8px}.marketplace-tag{display:inline-flex;align-items:center;padding:4px 8px;border-radius:4px;font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap}.marketplace-tag.marketplace{background:#3f51b51f;color:#1a237e}.marketplace-tag.free{background:#0080001c;color:#006400}.marketplace-tag.paid{background:#d32f2f1c;color:#8b1a1a}\n"] }]
|
|
7052
7173
|
}], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
7053
7174
|
type: Inject,
|
|
7054
7175
|
args: [MAT_DIALOG_DATA]
|
|
@@ -12886,6 +13007,7 @@ class ViewFinalCbpPlanComponent {
|
|
|
12886
13007
|
{ "code": "bn", label: "Bengali" },];
|
|
12887
13008
|
this.filteredLanguages = [...this.languages];
|
|
12888
13009
|
this.loading = false;
|
|
13010
|
+
this.downloadInProgress = false;
|
|
12889
13011
|
this.designationData = [];
|
|
12890
13012
|
this.totalCompetencieObj = { total: 0, behavioral: 0, functional: 0, domain: 0 };
|
|
12891
13013
|
this.pdfTrigger = false;
|
|
@@ -13680,7 +13802,6 @@ class ViewFinalCbpPlanComponent {
|
|
|
13680
13802
|
}, 2000);
|
|
13681
13803
|
}
|
|
13682
13804
|
generateExcel(jsonArray, filename = "final.xlsx") {
|
|
13683
|
-
this.loading = true;
|
|
13684
13805
|
if (!jsonArray || jsonArray.length === 0)
|
|
13685
13806
|
return;
|
|
13686
13807
|
const excelCellTextLimit = 32000;
|
|
@@ -13817,9 +13938,6 @@ class ViewFinalCbpPlanComponent {
|
|
|
13817
13938
|
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
|
|
13818
13939
|
// Export Excel
|
|
13819
13940
|
XLSX.writeFile(wb, filename);
|
|
13820
|
-
setTimeout(() => {
|
|
13821
|
-
this.loading = false;
|
|
13822
|
-
}, 5000);
|
|
13823
13941
|
}
|
|
13824
13942
|
downloadCSV() {
|
|
13825
13943
|
let fileName = '';
|
|
@@ -13829,21 +13947,42 @@ class ViewFinalCbpPlanComponent {
|
|
|
13829
13947
|
else {
|
|
13830
13948
|
fileName = `CBP_Report_${this.sharedService?.cbpPlanFinalObj.ministry.identifier}.xlsx`;
|
|
13831
13949
|
}
|
|
13832
|
-
this.
|
|
13950
|
+
this.loading = true;
|
|
13951
|
+
this.downloadInProgress = true;
|
|
13952
|
+
// Let the loader render before the synchronous Excel generation blocks the UI thread
|
|
13953
|
+
setTimeout(() => {
|
|
13954
|
+
try {
|
|
13955
|
+
this.generateExcel(this.jsonData, fileName);
|
|
13956
|
+
}
|
|
13957
|
+
finally {
|
|
13958
|
+
this.loading = false;
|
|
13959
|
+
this.downloadInProgress = false;
|
|
13960
|
+
}
|
|
13961
|
+
});
|
|
13833
13962
|
}
|
|
13834
13963
|
downloadPdfFromBE(context) {
|
|
13835
13964
|
let selectedLanguage = this.filterForm.get('language')?.value || 'en';
|
|
13836
13965
|
this.loading = true;
|
|
13966
|
+
this.downloadInProgress = true;
|
|
13837
13967
|
// this.sharedService.downloadPdf(this.sharedService?.cbpPlanFinalObj.ministry.identifier)
|
|
13838
|
-
|
|
13839
|
-
this.sharedService.downloadPdf(this.sharedService?.cbpPlanFinalObj.ministry.identifier, context, selectedLanguage)
|
|
13840
|
-
|
|
13841
|
-
|
|
13842
|
-
|
|
13843
|
-
|
|
13844
|
-
|
|
13845
|
-
|
|
13846
|
-
|
|
13968
|
+
const download$ = !this.sharedService?.cbpPlanFinalObj.departments
|
|
13969
|
+
? this.sharedService.downloadPdf(this.sharedService?.cbpPlanFinalObj.ministry.identifier, context, selectedLanguage)
|
|
13970
|
+
: this.sharedService.downloadPdfForDepartment(this.sharedService?.cbpPlanFinalObj.ministry.identifier, this.sharedService?.cbpPlanFinalObj.departments, context, selectedLanguage);
|
|
13971
|
+
// Keep the loader until the file has actually been received and saved
|
|
13972
|
+
download$.subscribe({
|
|
13973
|
+
next: () => {
|
|
13974
|
+
this.loading = false;
|
|
13975
|
+
this.downloadInProgress = false;
|
|
13976
|
+
},
|
|
13977
|
+
error: () => {
|
|
13978
|
+
this.loading = false;
|
|
13979
|
+
this.downloadInProgress = false;
|
|
13980
|
+
this.snackBar.open('Unable to download PDF', 'X', {
|
|
13981
|
+
duration: 3000,
|
|
13982
|
+
panelClass: ['snackbar-error']
|
|
13983
|
+
});
|
|
13984
|
+
}
|
|
13985
|
+
});
|
|
13847
13986
|
}
|
|
13848
13987
|
getSelectedCourses(department) {
|
|
13849
13988
|
if (!department?.cbp_plans?.length) {
|
|
@@ -13864,11 +14003,11 @@ class ViewFinalCbpPlanComponent {
|
|
|
13864
14003
|
}
|
|
13865
14004
|
}
|
|
13866
14005
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewFinalCbpPlanComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$1.MatDialog }, { token: i0.ChangeDetectorRef }, { token: SharedService }, { token: i3$1.MatSnackBar }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13867
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewFinalCbpPlanComponent, selector: "app-view-final-cbp-plan", viewQueries: [{ propertyName: "pdfContent", first: true, predicate: ["pdfContent"], descendants: true }, { propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true }], ngImport: i0, template: "<div class=\"view-cbp-plan\" #dialogContent style=\"max-height: 80vh; overflow: auto;\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div class=\"header-container\">\n <div>\n <div class=\"heading\">View Final <span *ngIf=\"openedFrom === 'cbp'\">CBP</span><span\n *ngIf=\"openedFrom === 'acbp'\">ACBP</span></div>\n </div>\n <div class=\"right-side-container\">\n <div class=\"search-and-buttons-container\">\n <form [formGroup]=\"filterForm\">\n <div>\n <mat-form-field appearance=\"outline\" class=\"language-select\" style=\" height: 34px;\">\n <mat-label style=\"font-weight: normal;\">\n {{ filterForm.get('language')?.value ? '' : 'Select Language' }}\n </mat-label>\n\n <mat-select formControlName=\"language\" 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 placeholder=\"Search Languages\" (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?.code\">\n {{ r?.label }}\n </mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n </form>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n\n\n\n </div>\n <div class=\"section-container\" #pdfContent>\n <header class=\"bg-white header-border\">\n <div class=\"header-flex justify-between\" style=\"width:100%\">\n <div class=\"flex items-center space-x-4\" style=\"width:50%\">\n <div class=\"image-container\">\n <div>\n <img src=\"assets/icons/dopt-logo.png\" alt=\"Department of Personnel & Training\"\n class=\"h-15\" />\n </div>\n <div>\n <img src=\"assets/icons/CBC_logo.svg\" alt=\"Capacity Building Commission Logo\"\n class=\"h-10\" />\n </div>\n <div>\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\"\n class=\"h-10\" />\n </div>\n </div>\n </div>\n <div class=\"text-right\" style=\"width:50%\">\n <h1 class=\"text-2xl font-bold text-gray-900\">\n <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">/{{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n - Capacity Building Plan\n </h1>\n <p class=\"text-gray-600\">Comprehensive Role-Based Competency Analysis</p>\n </div>\n </div>\n </header>\n <div class=\"min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100\">\n <!-- Header -->\n\n\n <div class=\"max-w-7xl mx-auto px-6 py-8 mt-4\">\n <!-- KPI Dashboard -->\n <div class=\"competency-container mt-2\">\n <div class=\"outside-layer-total\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n <path d=\"M14 2v6h6\" />\n <path d=\"M16 13H8\" />\n <path d=\"M16 17H8\" />\n <path d=\"M10 9H8\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.total}}</div>\n </div>\n </div>\n\n <div class=\"mt-4\">\n <div class=\"sub-heading\">\n <p>Total Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Total Competencies: {{totalCompetencieObj?.total}}</div>\n </div>\n <div class=\"count\">\n <!-- {{competenciesCount?.total}} -->\n </div>\n </div>\n <div class=\"outside-layer-behavioral\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M15.5 17a4 4 0 0 1-5 0\" />\n <path d=\"M13 14h.01\" />\n <path d=\"M11 11h.01\" />\n <path d=\"M17 14h.01\" />\n <path d=\"M13 10h.01\" />\n <path d=\"M13 18h.01\" />\n <path d=\"M13 6h.01\" />\n <path d=\"M17 18h.01\" />\n <path d=\"M17 6h.01\" />\n <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.behavioral}}</div>\n </div>\n </div>\n\n <div class=\"mt-2\">\n <div class=\"sub-heading\">\n <p>Behavioral Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill-behavioural\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Behavioral Competencies: {{totalCompetencieObj?.behavioral}}\n </div>\n </div>\n\n </div>\n <div class=\"outside-layer-functional\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.functional}}</div>\n </div>\n </div>\n\n <div class=\"mt-2\">\n <div class=\"sub-heading\">\n <p>Functional Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill-functional\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Functional Competencies: {{totalCompetencieObj?.functional}}</div>\n </div>\n\n\n </div>\n <div class=\"outside-layer-domain\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <circle cx=\"12\" cy=\"12\" r=\"6\" />\n <circle cx=\"12\" cy=\"12\" r=\"2\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.domain}}</div>\n </div>\n </div>\n\n <div class=\"mt-2\">\n <div class=\"sub-heading\">\n <p>Domain Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill-domain\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Domain Competencies: {{totalCompetencieObj?.domain}}</div>\n </div>\n\n </div>\n </div>\n <!-- <div class=\"mb-8\">\n <h2 class=\"text-2xl font-bold text-gray-900 mb-6nheading\">Competency Overview</h2>\n <div class=\"competency-grid\">\n <ng-container *ngFor=\"let kpi of overallKPIs;\">\n <div class=\"bg-white rounded-xl outside-layer-total p-6 border-l-4 hover:shadow-xl transition-shadow\" [style.border-left-color]=\"kpi.color\">\n <div class=\"flex items-center justify-between mb-4 inside-layer\">\n <div [class]=\"'p-3 rounded-lg ' + kpi.bgColor\">\n <ng-container [ngSwitch]=\"kpi.name\">\n <svg *ngSwitchCase=\"'Behavioral Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M15.5 17a4 4 0 0 1-5 0\"/>\n <path d=\"M13 14h.01\"/><path d=\"M11 11h.01\"/><path d=\"M17 14h.01\"/><path d=\"M13 10h.01\"/>\n <path d=\"M13 18h.01\"/><path d=\"M13 6h.01\"/><path d=\"M17 18h.01\"/><path d=\"M17 6h.01\"/>\n <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\"/>\n </svg>\n \n <svg *ngSwitchCase=\"'Functional Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"/>\n </svg>\n \n <svg *ngSwitchCase=\"'Domain Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/><circle cx=\"12\" cy=\"12\" r=\"6\"/><circle cx=\"12\" cy=\"12\" r=\"2\"/>\n </svg>\n \n <svg *ngSwitchCase=\"'Total Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/>\n <path d=\"M14 2v6h6\"/><path d=\"M16 13H8\"/><path d=\"M16 17H8\"/><path d=\"M10 9H8\"/>\n </svg>\n \n </ng-container>\n </div>\n <div class=\"text-right\">\n <div class=\"text-2xl font-bold text-gray-900\">{{kpi.total}}</div>\n </div>\n </div>\n <h3 class=\"text-gray-900 font-semibold mb-2 heading\">{{kpi.name}}</h3>\n <div class=\"w-full bg-gray-200 rounded-full h-3\">\n <div class=\"h-3 rounded-full transition-all duration-500\"\n [style.width.%]=\"kpi.avgCompletion\"\n [style.background-color]=\"kpi.color\">\n </div>\n </div>\n <p class=\"text-sm text-gray-500 mt-2\">Total Competencies: {{kpi.total}}</p>\n </div>\n </ng-container>\n </div>\n </div> -->\n\n <!-- Designation Reports -->\n <div class=\"space-y-8 mt-4\">\n <h2 class=\"text-2xl font-bold text-gray-900 mb-6 heading\">Detailed Competency Framework by\n Designation</h2>\n\n <ng-container *ngFor=\"let designation of designationData;\">\n <div class=\"bg-white rounded-xl overflow-hidden section-shadow\">\n <!-- Header -->\n <div\n class=\"bg-gradient-to-r from-indigo-600 to-blue-600 text-white p-6 heading-with-bg\">\n <div class=\"flex items-center justify-between\">\n <div>\n <h3 class=\"text-2xl font-bold mb-2 heading-bg\">{{designation.designation}}\n </h3>\n <p class=\"text-indigo-100 mb-1\">Wing/Division: {{designation.wing}}</p>\n </div>\n <div class=\"flex items-center space-x-4 competency-count-by-designation\">\n <span class=\"font-semibold text-sm\">Behavioral:\n {{designation.behavioralCompetencies.length}} total</span>\n <span class=\"font-semibold text-sm\">Functional:\n {{designation.functionalCompetencies.length}} total</span>\n <span class=\"font-semibold text-sm\">Domain:\n {{designation.domainCompetencies.length}} total</span>\n </div>\n </div>\n </div>\n\n <!-- Body -->\n <div class=\"p-4 section-shadow\">\n <!-- Roles -->\n <div class=\"mb-6\">\n <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n </svg>\n Roles & Responsibilities\n </h4>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n <div *ngFor=\"let role of designation.rolesResponsibilities; let i = index\"\n class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n </div>\n </div>\n </div>\n <!-- Activities -->\n <div class=\"mb-6 mt-4\">\n <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n </svg>\n Activities\n </h4>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n <div *ngFor=\"let role of designation.activities; let i = index\"\n class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n </div>\n </div>\n </div>\n <div class=\"page-break\"></div>\n <!-- Competencies -->\n <div class=\"competencis-grid mt-4\">\n <!-- Behavioral -->\n <div class=\"bg-blue-50 rounded-lg p-3 competencies-grid-3\">\n <h4 class=\"font-semibold text-blue-800 text-base mb-2\">Behavioral</h4>\n <div class=\"space-y-1 grid-list-item grid-list-item-behavioral\">\n <div *ngFor=\"let comp of designation.behavioralCompetencies; let i = index\"\n class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-blue-400\">\n {{comp}}\n <div class=\"flex-col-theme\">\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.behavioralSetForProficiencyLevel[i]\"\n class=\"proficiency-tag\"\n [ngClass]=\"designation.behavioralSetForProficiencyLevel[i]?.toLowerCase()\"\n [matTooltip]=\"designation.behavioralSetForProficiencyLevelRationale[i]\"\n >\n {{ designation.behavioralSetForProficiencyLevel[i] }}\n </span>\n\n \n </span>\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.behavioralSetForDeliveryMode[i]\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"designation.behavioralSetForDeliveryMode[i]?.toLowerCase()\"\n [matTooltip]=\"designation.behavioralSetForDeliveryModeRationale[i]\"\n >\n {{ designation.behavioralSetForDeliveryMode[i] }}\n </span>\n\n \n </span>\n </div>\n </div>\n \n </div>\n \n <div class=\"mt-2 text-sm text-blue-600 font-medium\">\n {{designation.behavioralCompetencies.length}} total\n </div>\n </div>\n\n <!-- Functional -->\n <div class=\"bg-green-50 rounded-lg p-3 competencies-grid-3\">\n <h4 class=\"font-semibold text-green-800 text-base mb-2\">Functional</h4>\n <div class=\"space-y-1 grid-list-item grid-list-item-functional\">\n <div *ngFor=\"let comp of designation.functionalCompetencies; let i = index\"\n class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-green-400\">\n {{comp}}\n <div class=\"flex-col-theme\">\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.functionalSetForProficiencyLevel[i]\"\n class=\"proficiency-tag\"\n [ngClass]=\"designation.functionalSetForProficiencyLevel[i]?.toLowerCase()\"\n [matTooltip]=\"designation.functionalSetForProficiencyLevelRationale[i]\"\n >\n {{ designation.functionalSetForProficiencyLevel[i] }}\n </span>\n\n \n </span>\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.functionalSetForDeliveryMode[i]\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"designation.functionalSetForDeliveryMode[i]?.toLowerCase()\"\n [matTooltip]=\"designation.functionalSetForDeliveryModeRationale[i]\"\n >\n {{ designation.functionalSetForDeliveryMode[i] }}\n </span>\n\n \n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-2 text-sm text-green-600 font-medium\">\n {{designation.functionalCompetencies.length}} total\n </div>\n </div>\n\n <!-- Domain -->\n <div class=\"bg-purple-50 rounded-lg p-3 competencies-grid-3\">\n <h4 class=\"font-semibold text-purple-800 text-base mb-2\">Domain</h4>\n <div class=\"space-y-1 grid-list-item grid-list-item-domain\">\n <div *ngFor=\"let comp of designation.domainCompetencies; let i = index\"\n class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-purple-400\">\n {{comp}}\n <div class=\"flex-col-theme\">\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.domainSetForProficiencyLevel[i]\"\n class=\"proficiency-tag\"\n [ngClass]=\"designation.domainSetForProficiencyLevel[i]?.toLowerCase()\"\n [matTooltip]=\"designation.domainSetForProficiencyLevelRationale[i]\"\n >\n {{ designation.domainSetForProficiencyLevel[i] }}\n </span>\n\n \n </span>\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.domainSetForDeliveryMode[i]\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"designation.domainSetForDeliveryMode[i]?.toLowerCase()\"\n [matTooltip]=\"designation.domainSetForDeliveryModeRationale[i]\"\n >\n {{ designation.domainSetForDeliveryMode[i] }}\n </span>\n\n \n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-2 text-sm text-purple-600 font-medium\">\n {{designation.domainCompetencies.length}} total\n </div>\n </div>\n </div>\n <!-- Adding courses -->\n <div class=\"cbp mt-4\"\n *ngIf=\"designation.selectedCourses?.length && openedFrom === 'acbp'\">\n <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n </svg>\n Courses\n </h4>\n <div class=\"course-list-container\">\n <div class=\"course-list-item\"\n *ngFor=\"let item of designation.selectedCourses; 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\n src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n\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\"\n *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\"\n *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[0]}}</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\"\n *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\"\n *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[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\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\"\n *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\"\n *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[0]}}</span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title mt-4\">\n <div>\n <div *ngIf=\"item?.course\">{{item?.course}}</div>\n <div *ngIf=\"item?.name\">{{item?.name}}</div>\n </div>\n </div>\n <div class=\"course-desc mt-2\">\n <div *ngIf=\"isPDFDownload\">\n <div>{{item?.rationale}}</div>\n </div>\n </div>\n <div class=\"mt-3\"\n *ngIf=\"getCompetenciesByType('Behavioural',item)?.length\">\n <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',item)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName\n }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',item)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',item)\">\n {{ isExpanded('Behavioural',item) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',item) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\"\n *ngIf=\"getCompetenciesByType('Functional',item)?.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',item)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName\n }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',item)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',item)\">\n {{ isExpanded('Functional',item) ? 'Show Less' : '+' +\n getRemainingCount('Functional',item) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',item)?.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',item)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName\n }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',item)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',item)\">\n {{ isExpanded('Domain',item) ? 'Show Less' : '+' +\n getRemainingCount('Domain',item) + ' 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\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\" *ngIf=\"item?.relevancy\">\n {{item?.relevancy}}%</div>\n <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n\n <!-- adding courses -->\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Footer -->\n\n </div>\n <footer class=\"org-footer\">\n <div class=\"max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between\">\n <div class=\"flex items-center space-x-4 mb-4 mt-4 md:mb-0 footer-container\">\n <div class=\"footer-logo-container\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"h-10\"\n style=\"margin-left:20px\" />\n </div>\n <div style=\"margin-left: 100px;\">\n <a href=\"https://karmayogibharat.gov.in\" target=\"_blank\" rel=\"noopener noreferrer\"\n class=\"text-sm font-semibold transition-colors\">\n karmayogibharat.gov.in\n </a>\n </div>\n\n\n </div>\n <div class=\"text-sm text-center md:text-right mb-4\" style=\"margin-left: 100px;\">\n <p>© 2025 All Rights Reserved.</p>\n </div>\n </div>\n </footer>\n </div>\n <div class=\"popup-footer\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download as Excel\" (click)=\"downloadCSV()\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download as PDF\"\n (click)=\"downloadPdfFromBE(openedFrom)\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancelForm()\" />\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}.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: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{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:normal;flex-direction:row;gap:16px}.outside-layer-total{display:flex;padding:4px 20px;justify-content:left;align-items:left;gap:6px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8;flex-direction:column;width:25%}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;flex-direction:column;width:25%}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;flex-direction:column;width:25%}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #F8B861;border-right:2px solid #F8B861;background:#fde8cc;flex-direction:column;width:25%}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;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:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.heading-bg{color:#fff;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:center}.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:center;gap:16px;padding:16px 24px;background-color:#fff;flex-shrink:0;position:sticky;bottom:-15px}.section-container{overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.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}.grid{display:grid;gap:1.5rem}.grid-cols-1{grid-template-columns:repeat(1,1fr)}@media (min-width: 768px){.md\\:grid-cols-2{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4,1fr)}}.kpi-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 14px #0000000d;border-left:4px solid transparent;transition:box-shadow .3s ease}.kpi-card:hover{box-shadow:0 8px 24px #0000001a}.kpi-icon{padding:.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.kpi-text{font-size:1.25rem;font-weight:700}.progress-container{background:#e5e7eb;height:.75rem;border-radius:9999px;margin-top:.5rem}.progress-bar{height:100%;border-radius:9999px;transition:width .4s ease}.competency-block{background-color:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000f;overflow:hidden}.competency-header{padding:1.5rem;background:linear-gradient(to right,#4f46e5,#3b82f6);color:#fff}.competency-header h3{font-size:1.25rem;font-weight:600}.competency-body{padding:1rem}.role-card{background-color:#f9fafb;padding:.5rem;border-left:4px solid #6366f1;border-radius:6px}.role-title{font-size:1rem;font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;color:#1e40af}.comp-section{border-radius:.5rem;padding:.75rem;background-color:#f0f9ff;margin-bottom:1rem}.comp-section h4{font-weight:600;margin-bottom:.5rem}.comp-item{background-color:#fff;border-left:3px solid #3b82f6;padding:.5rem;border-radius:4px;margin-bottom:.25rem;font-size:.875rem}.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}.text-blue-800{color:#1e3a8a}.text-green-800{color:#ff1493}.text-purple-800{color:#6b21a8}.border-blue-400{border-color:#60a5fa}.border-green-400{border-color:#34d399}.border-purple-400{border-color:#c084fc}.text-sm{font-size:.875rem}.text-gray-700{color:#374151}.icon-sm{width:24px;height:24px}.heading-with-bg{background:#4f46e5;padding:24px;border-radius:8px 8px 0 0}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.section-shadow{padding:16px;border-radius:4px;background:#fff;box-shadow:0 2px 4px #0000001a,0 1px 10px #0000000f}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.competency-grid{display:flex;flex-direction:row;gap:16px;justify-content:space-between}.text-blue-600{color:#1b4ca1;font-weight:600}.text-green-600{color:#ff1493;font-weight:600}.text-purple-600{color:#6b21a8;font-weight:600}.horizontal-flex{display:flex;align-items:center;justify-content:space-between;width:100%}.progress-bar{width:100%;height:10px;background-color:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 3px #0003}.progress-bar-fill{height:100%;background-color:#1b4ca1;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-behavioural{height:100%;background-color:#f8b861;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-functional{height:100%;background-color:#e24577;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-domain{height:100%;background-color:#7b47a4;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.sub-text{font-size:12px;font-weight:600;font-family:Lato}.competency-count-by-designation{display:flex;gap:10px;flex-direction:row}.competencies-grid-3{width:33%}.grid-list-item div{padding:5px 10px;margin:10px 0}.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}.header-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;gap:30px}.header-border{border-bottom:1px solid #ccc;margin:10px;padding:10px}.text-gray-600{font-family:Lato;font-size:14px;font-weight:600}.image-container .h-10,.image-container .h-15{height:50px}.image-container{display:flex;gap:10px;flex-direction:row}.org-footer{display:flex;flex-direction:row;background:#fff;gap:16px;color:#000;width:100%;justify-content:center;align-items:center;border-top:1px solid #ccc;border-bottom:1px solid #ccc}.dialog-scrollable-content{max-height:70vh;overflow-y:auto}.org-footer a{color:#000!important}h1{font-size:1.75rem!important}@media print{.org-footer,.header-border{page-break-inside:avoid}}.header-border{padding-top:10px;padding-bottom:10px;background-color:#fff}.footer-container{display:flex;justify-content:center;align-items:center;flex-direction:column}.footer-logo-container{display:flex;justify-content:center;align-items:center;flex-direction:row;width:30%}.avoid-page-break{page-break-inside:avoid;break-inside:avoid}.pdf-clean *{box-shadow:none!important;filter:none!important;transform:none!important}.view-cbp-plan.pdf-clean{overflow:visible!important;max-height:none!important}.section-container,.popup-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.section-shadow{page-break-inside:avoid!important;break-inside:avoid!important}.bg-gradient-to-br{background:none!important}.section-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.competencis-grid{page-break-inside:avoid}.page-break{page-break-before:always}.cbp .container{margin:10px auto}.cbp .sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal}.cbp .radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.cbp .label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}.cbp ::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}.cbp ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}.cbp ::ng-deep .mat-select-panel{background-color:#fff!important}.cbp ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}.cbp ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}.cbp ::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp ::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}.cbp ::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.cbp .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}.cbp .section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.cbp .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}.cbp .btn-group{display:flex;flex-direction:row;justify-content:space-between}.cbp .pl-2{padding-left:5px}.cbp .search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.cbp .search .rsearch{position:relative}.cbp .search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.cbp .search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.cbp .select-map-route-container{display:flex;flex-direction:row}.cbp .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}.cbp .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}.cbp .search-container{display:flex;flex-direction:row}.cbp .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}.cbp .course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.cbp .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}.cbp .ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.cbp .ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.cbp .ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.cbp .ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.cbp .ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .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}.cbp .course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.cbp .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}.cbp .relevancy,.cbp .competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.cbp .percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .delete-button input{background-color:#b60a0a;border-radius:10px}.cbp .relevancy-container,.cbp .competencies-matched-container{display:flex;flex-direction:row;align-items:center}.cbp .dash{padding:0 5px}.cbp ::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.cbp .course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.cbp .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}.cbp .course-list-item:hover{box-shadow:0 4px 8px #00000026}.cbp .course-list-item:only-child{flex:1 1 auto;max-width:800px}.cbp .checked-course-container{display:flex;width:60%}.cbp .ml-2{margin-left:8px}.cbp ::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.cbp .igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.cbp .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}.cbp .ai-loader-icon img,.cbp .igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.cbp .competency-container{display:flex;justify-content:normal;gap:16px;flex-direction:row}.cbp .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}.cbp .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}.cbp .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}.cbp .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}.cbp .inside-layer{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .count{color:#1b4ca1;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.cbp .suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .suggest-course-control{display:flex;flex-direction:row}.cbp .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}.cbp .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}.cbp .ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.cbp .heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.cbp .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}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.cbp .header-left{flex:1}.cbp .header-actions{display:flex;align-items:center;gap:12px}.cbp .regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.cbp .regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.cbp .regenerate-btn .mat-spinner{margin:0}.cbp .regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.cbp .close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.cbp .close-btn:hover{background-color:#f5f5f5}.cbp .close-btn .mat-icon{font-size:20px;width:20px;height:20px}.cbp .progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.cbp .progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .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}.cbp .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}.cbp .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}.cbp .popup-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .popup-footer{display:flex;flex-direction:row;justify-content:end}.cbp .view-cbp-plan{margin:10px;padding:10px}.cbp .view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.cbp .section{border-radius:8px;background:#1b4ca114;padding:16px}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.cbp .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}.cbp .section-container{overflow-y:auto;flex:1 1 auto}.cbp .competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.cbp .competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.cbp .competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .cursor-pointer{cursor:pointer}.cbp .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}.cbp .custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .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}.cbp .competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.cbp .grid-list-item-behavioral div{border-left:2px solid darkorange}.cbp .grid-list-item-functional div{border-left:2px solid #ff1493}.cbp .grid-list-item-domain div{border-left:2px solid #6b21a8}.cbp .competencies-grid-3{width:33%}.cbp .bg-blue-50{background-color:#fde8cc;border-radius:4px}.cbp .bg-green-50{background-color:#f8d2de;border-radius:4px}.cbp .bg-purple-50{background-color:#dfd3e9;border-radius:4px}.cbp .grid-list-item div{padding:5px 10px;margin:10px 0}.cbp .course-pill-container{display:flex;gap:8px}.cbp .relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.cbp .mt-1{margin-top:.25rem}.cbp .mt-2{margin-top:.5rem}.cbp .mt-3{margin-top:.75rem}.cbp .show-more-competency{display:inline-flex;align-items:center}.cbp .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}.cbp .show-more-link:hover{text-decoration:underline}.cbp .course-content{flex:1;display:flex;flex-direction:column}.cbp .course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}.cbp ::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.cbp .competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.cbp .menu-list-item.active{background-color:#1b4ca1;color:#fff}.cbp .menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.cbp .gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.cbp .div-count{font-family:Lato;font-size:20px;font-weight:700}.cbp .green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.cbp .div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.cbp .div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .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}.cbp .add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.cbp .list-flex{display:flex;flex-direction:row;justify-content:space-between}.cbp .all-category-list .mat-icon{vertical-align:middle}.cbp .course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.cbp .left-panel{flex:0 0 250px;font-weight:700;text-align:left}.cbp .right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.cbp .category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.cbp .right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.cbp .course-list-container-right-flex{display:flex}.cbp .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}.cbp .no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.cbp .no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.cbp .no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.cbp .section-header-improved{display:flex;flex-direction:column;gap:16px}.cbp .search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.cbp .search-container-compact{flex:0 0 auto;min-width:280px}.cbp .search-container-compact .rsearch{position:relative;display:flex;align-items:center}.cbp .search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.cbp .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}.cbp .search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.cbp .search-container-compact .sinput-compact::placeholder{color:#999}.cbp .btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.cbp .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}.cbp .category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.cbp .category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.cbp .category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.cbp .theme-filter-controls{margin-bottom:8px}.cbp .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}.cbp .clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.cbp .clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.cbp .no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.cbp .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}.cbp .no-course-card .no-course-icon{margin-bottom:20px}.cbp .no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.cbp .no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.cbp .no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.cbp .no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.cbp .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}.cbp .no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.cbp .no-course-card .suggest-course-btn:active{transform:translateY(0)}.cbp .no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.cbp .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){.cbp .search-and-buttons-container{flex-direction:column;align-items:stretch}.cbp .search-container-compact{min-width:auto;width:100%}.cbp .btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.cbp .course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.cbp .course-list-container-flex{flex-direction:column}.cbp .left-panel{flex:none!important;max-height:300px}.cbp .course-list-item{flex:0 0 100%;max-width:100%}.cbp .no-course-card{padding:20px}.cbp .no-course-card .no-course-content h4{font-size:20px}.cbp .no-course-card .no-course-content p{font-size:14px}}.cbp ::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}.cbp ::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}.cbp ::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}.cbp ::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.cbp .download-pdf{justify-content:end;display:flex;flex-direction:row}.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:4px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}::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}.header-container{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:10px 0}.right-side-container{display:flex;justify-content:space-between;gap:64px}::ng-deep .language-select .mat-select-trigger{font-weight:400!important}::ng-deep .language-select .mat-select-value{color:#fff!important}:host ::ng-deep .select-search-panel .mat-option-text{color:#fff!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:16px;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap}.delivery-mode-tag.online{background:#e6f4ea;color:#1a7f45;border:1px solid #9BD3B0}.delivery-mode-tag.offline{background:#fdf0e3;color:#a2590a;border:1px solid #F0C48A}.delivery-mode-tag.blended{background:#efe9fb;color:#5b21b6;border:1px solid #C9B6F0}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:row;gap:6px}\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: 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: 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: "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: "directive", type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
14006
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewFinalCbpPlanComponent, selector: "app-view-final-cbp-plan", viewQueries: [{ propertyName: "pdfContent", first: true, predicate: ["pdfContent"], descendants: true }, { propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true }], ngImport: i0, template: "<div class=\"view-cbp-plan\" #dialogContent style=\"max-height: 80vh; overflow: auto;\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div class=\"header-container\">\n <div>\n <div class=\"heading\">View Final <span *ngIf=\"openedFrom === 'cbp'\">CBP</span><span\n *ngIf=\"openedFrom === 'acbp'\">ACBP</span></div>\n </div>\n <div class=\"right-side-container\">\n <div class=\"search-and-buttons-container\">\n <form [formGroup]=\"filterForm\">\n <div>\n <mat-form-field appearance=\"outline\" class=\"language-select\" style=\" height: 34px;\">\n <mat-label style=\"font-weight: normal;\">\n {{ filterForm.get('language')?.value ? '' : 'Select Language' }}\n </mat-label>\n\n <mat-select formControlName=\"language\" 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 placeholder=\"Search Languages\" (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?.code\">\n {{ r?.label }}\n </mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n </form>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n\n\n\n </div>\n <div class=\"section-container\" #pdfContent>\n <header class=\"bg-white header-border\">\n <div class=\"header-flex justify-between\" style=\"width:100%\">\n <div class=\"flex items-center space-x-4\" style=\"width:50%\">\n <div class=\"image-container\">\n <div>\n <img src=\"assets/icons/dopt-logo.png\" alt=\"Department of Personnel & Training\"\n class=\"h-15\" />\n </div>\n <div>\n <img src=\"assets/icons/CBC_logo.svg\" alt=\"Capacity Building Commission Logo\"\n class=\"h-10\" />\n </div>\n <div>\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\"\n class=\"h-10\" />\n </div>\n </div>\n </div>\n <div class=\"text-right\" style=\"width:50%\">\n <h1 class=\"text-2xl font-bold text-gray-900\">\n <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">/{{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n - Capacity Building Plan\n </h1>\n <p class=\"text-gray-600\">Comprehensive Role-Based Competency Analysis</p>\n </div>\n </div>\n </header>\n <div class=\"min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100\">\n <!-- Header -->\n\n\n <div class=\"max-w-7xl mx-auto px-6 py-8 mt-4\">\n <!-- KPI Dashboard -->\n <div class=\"competency-container mt-2\">\n <div class=\"outside-layer-total\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n <path d=\"M14 2v6h6\" />\n <path d=\"M16 13H8\" />\n <path d=\"M16 17H8\" />\n <path d=\"M10 9H8\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.total}}</div>\n </div>\n </div>\n\n <div class=\"mt-4\">\n <div class=\"sub-heading\">\n <p>Total Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Total Competencies: {{totalCompetencieObj?.total}}</div>\n </div>\n <div class=\"count\">\n <!-- {{competenciesCount?.total}} -->\n </div>\n </div>\n <div class=\"outside-layer-behavioral\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M15.5 17a4 4 0 0 1-5 0\" />\n <path d=\"M13 14h.01\" />\n <path d=\"M11 11h.01\" />\n <path d=\"M17 14h.01\" />\n <path d=\"M13 10h.01\" />\n <path d=\"M13 18h.01\" />\n <path d=\"M13 6h.01\" />\n <path d=\"M17 18h.01\" />\n <path d=\"M17 6h.01\" />\n <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.behavioral}}</div>\n </div>\n </div>\n\n <div class=\"mt-2\">\n <div class=\"sub-heading\">\n <p>Behavioral Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill-behavioural\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Behavioral Competencies: {{totalCompetencieObj?.behavioral}}\n </div>\n </div>\n\n </div>\n <div class=\"outside-layer-functional\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.functional}}</div>\n </div>\n </div>\n\n <div class=\"mt-2\">\n <div class=\"sub-heading\">\n <p>Functional Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill-functional\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Functional Competencies: {{totalCompetencieObj?.functional}}</div>\n </div>\n\n\n </div>\n <div class=\"outside-layer-domain\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <circle cx=\"12\" cy=\"12\" r=\"6\" />\n <circle cx=\"12\" cy=\"12\" r=\"2\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.domain}}</div>\n </div>\n </div>\n\n <div class=\"mt-2\">\n <div class=\"sub-heading\">\n <p>Domain Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill-domain\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Domain Competencies: {{totalCompetencieObj?.domain}}</div>\n </div>\n\n </div>\n </div>\n <!-- <div class=\"mb-8\">\n <h2 class=\"text-2xl font-bold text-gray-900 mb-6nheading\">Competency Overview</h2>\n <div class=\"competency-grid\">\n <ng-container *ngFor=\"let kpi of overallKPIs;\">\n <div class=\"bg-white rounded-xl outside-layer-total p-6 border-l-4 hover:shadow-xl transition-shadow\" [style.border-left-color]=\"kpi.color\">\n <div class=\"flex items-center justify-between mb-4 inside-layer\">\n <div [class]=\"'p-3 rounded-lg ' + kpi.bgColor\">\n <ng-container [ngSwitch]=\"kpi.name\">\n <svg *ngSwitchCase=\"'Behavioral Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M15.5 17a4 4 0 0 1-5 0\"/>\n <path d=\"M13 14h.01\"/><path d=\"M11 11h.01\"/><path d=\"M17 14h.01\"/><path d=\"M13 10h.01\"/>\n <path d=\"M13 18h.01\"/><path d=\"M13 6h.01\"/><path d=\"M17 18h.01\"/><path d=\"M17 6h.01\"/>\n <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\"/>\n </svg>\n \n <svg *ngSwitchCase=\"'Functional Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"/>\n </svg>\n \n <svg *ngSwitchCase=\"'Domain Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/><circle cx=\"12\" cy=\"12\" r=\"6\"/><circle cx=\"12\" cy=\"12\" r=\"2\"/>\n </svg>\n \n <svg *ngSwitchCase=\"'Total Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/>\n <path d=\"M14 2v6h6\"/><path d=\"M16 13H8\"/><path d=\"M16 17H8\"/><path d=\"M10 9H8\"/>\n </svg>\n \n </ng-container>\n </div>\n <div class=\"text-right\">\n <div class=\"text-2xl font-bold text-gray-900\">{{kpi.total}}</div>\n </div>\n </div>\n <h3 class=\"text-gray-900 font-semibold mb-2 heading\">{{kpi.name}}</h3>\n <div class=\"w-full bg-gray-200 rounded-full h-3\">\n <div class=\"h-3 rounded-full transition-all duration-500\"\n [style.width.%]=\"kpi.avgCompletion\"\n [style.background-color]=\"kpi.color\">\n </div>\n </div>\n <p class=\"text-sm text-gray-500 mt-2\">Total Competencies: {{kpi.total}}</p>\n </div>\n </ng-container>\n </div>\n </div> -->\n\n <!-- Designation Reports -->\n <div class=\"space-y-8 mt-4\">\n <h2 class=\"text-2xl font-bold text-gray-900 mb-6 heading\">Detailed Competency Framework by\n Designation</h2>\n\n <ng-container *ngFor=\"let designation of designationData;\">\n <div class=\"bg-white rounded-xl overflow-hidden section-shadow\">\n <!-- Header -->\n <div\n class=\"bg-gradient-to-r from-indigo-600 to-blue-600 text-white p-6 heading-with-bg\">\n <div class=\"flex items-center justify-between\">\n <div>\n <h3 class=\"text-2xl font-bold mb-2 heading-bg\">{{designation.designation}}\n </h3>\n <p class=\"text-indigo-100 mb-1\">Wing/Division: {{designation.wing}}</p>\n </div>\n <div class=\"flex items-center space-x-4 competency-count-by-designation\">\n <span class=\"font-semibold text-sm\">Behavioral:\n {{designation.behavioralCompetencies.length}} total</span>\n <span class=\"font-semibold text-sm\">Functional:\n {{designation.functionalCompetencies.length}} total</span>\n <span class=\"font-semibold text-sm\">Domain:\n {{designation.domainCompetencies.length}} total</span>\n </div>\n </div>\n </div>\n\n <!-- Body -->\n <div class=\"p-4 section-shadow\">\n <!-- Roles -->\n <div class=\"mb-6\">\n <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n </svg>\n Roles & Responsibilities\n </h4>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n <div *ngFor=\"let role of designation.rolesResponsibilities; let i = index\"\n class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n </div>\n </div>\n </div>\n <!-- Activities -->\n <div class=\"mb-6 mt-4\">\n <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n </svg>\n Activities\n </h4>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n <div *ngFor=\"let role of designation.activities; let i = index\"\n class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n </div>\n </div>\n </div>\n <div class=\"page-break\"></div>\n <!-- Competencies -->\n <div class=\"competencis-grid mt-4\">\n <!-- Behavioral -->\n <div class=\"bg-blue-50 rounded-lg p-3 competencies-grid-3\">\n <h4 class=\"font-semibold text-blue-800 text-base mb-2\">Behavioral</h4>\n <div class=\"space-y-1 grid-list-item grid-list-item-behavioral\">\n <div *ngFor=\"let comp of designation.behavioralCompetencies; let i = index\"\n class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-blue-400\">\n {{comp}}\n <div class=\"flex-col-theme\">\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.behavioralSetForProficiencyLevel[i]\"\n class=\"proficiency-tag\"\n [ngClass]=\"designation.behavioralSetForProficiencyLevel[i]?.toLowerCase()\"\n [matTooltip]=\"designation.behavioralSetForProficiencyLevelRationale[i]\"\n >\n {{ designation.behavioralSetForProficiencyLevel[i] }}\n </span>\n\n \n </span>\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.behavioralSetForDeliveryMode[i]\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"designation.behavioralSetForDeliveryMode[i]?.toLowerCase()\"\n [matTooltip]=\"designation.behavioralSetForDeliveryModeRationale[i]\"\n >\n {{ designation.behavioralSetForDeliveryMode[i] }}\n </span>\n\n \n </span>\n </div>\n </div>\n \n </div>\n \n <div class=\"mt-2 text-sm text-blue-600 font-medium\">\n {{designation.behavioralCompetencies.length}} total\n </div>\n </div>\n\n <!-- Functional -->\n <div class=\"bg-green-50 rounded-lg p-3 competencies-grid-3\">\n <h4 class=\"font-semibold text-green-800 text-base mb-2\">Functional</h4>\n <div class=\"space-y-1 grid-list-item grid-list-item-functional\">\n <div *ngFor=\"let comp of designation.functionalCompetencies; let i = index\"\n class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-green-400\">\n {{comp}}\n <div class=\"flex-col-theme\">\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.functionalSetForProficiencyLevel[i]\"\n class=\"proficiency-tag\"\n [ngClass]=\"designation.functionalSetForProficiencyLevel[i]?.toLowerCase()\"\n [matTooltip]=\"designation.functionalSetForProficiencyLevelRationale[i]\"\n >\n {{ designation.functionalSetForProficiencyLevel[i] }}\n </span>\n\n \n </span>\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.functionalSetForDeliveryMode[i]\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"designation.functionalSetForDeliveryMode[i]?.toLowerCase()\"\n [matTooltip]=\"designation.functionalSetForDeliveryModeRationale[i]\"\n >\n {{ designation.functionalSetForDeliveryMode[i] }}\n </span>\n\n \n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-2 text-sm text-green-600 font-medium\">\n {{designation.functionalCompetencies.length}} total\n </div>\n </div>\n\n <!-- Domain -->\n <div class=\"bg-purple-50 rounded-lg p-3 competencies-grid-3\">\n <h4 class=\"font-semibold text-purple-800 text-base mb-2\">Domain</h4>\n <div class=\"space-y-1 grid-list-item grid-list-item-domain\">\n <div *ngFor=\"let comp of designation.domainCompetencies; let i = index\"\n class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-purple-400\">\n {{comp}}\n <div class=\"flex-col-theme\">\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.domainSetForProficiencyLevel[i]\"\n class=\"proficiency-tag\"\n [ngClass]=\"designation.domainSetForProficiencyLevel[i]?.toLowerCase()\"\n [matTooltip]=\"designation.domainSetForProficiencyLevelRationale[i]\"\n >\n {{ designation.domainSetForProficiencyLevel[i] }}\n </span>\n\n \n </span>\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.domainSetForDeliveryMode[i]\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"designation.domainSetForDeliveryMode[i]?.toLowerCase()\"\n [matTooltip]=\"designation.domainSetForDeliveryModeRationale[i]\"\n >\n {{ designation.domainSetForDeliveryMode[i] }}\n </span>\n\n \n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-2 text-sm text-purple-600 font-medium\">\n {{designation.domainCompetencies.length}} total\n </div>\n </div>\n </div>\n <!-- Adding courses -->\n <div class=\"cbp mt-4\"\n *ngIf=\"designation.selectedCourses?.length && openedFrom === 'acbp'\">\n <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n </svg>\n Courses\n </h4>\n <div class=\"course-list-container\">\n <div class=\"course-list-item\"\n *ngFor=\"let item of designation.selectedCourses; 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\n src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n\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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\n <div class=\"ai-recommened-pill-orange mt-2\"\n *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\"\n *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[0]}}</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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\n <div class=\"ai-recommened-pill-orange mt-2\"\n *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\"\n *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[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\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>Manually Suggested - iGOT </span>\n\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\n <div class=\"ai-recommened-pill-orange mt-2\"\n *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\"\n *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[0]}}</span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title mt-4\">\n <div>\n <div *ngIf=\"item?.course\">{{item?.course}}</div>\n <div *ngIf=\"item?.name\">{{item?.name}}</div>\n </div>\n </div>\n <div class=\"course-desc mt-2\">\n <div *ngIf=\"isPDFDownload\">\n <div>{{item?.rationale}}</div>\n </div>\n </div>\n <div class=\"mt-3\"\n *ngIf=\"getCompetenciesByType('Behavioural',item)?.length\">\n <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',item)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName\n }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',item)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',item)\">\n {{ isExpanded('Behavioural',item) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',item) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\"\n *ngIf=\"getCompetenciesByType('Functional',item)?.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',item)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName\n }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',item)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',item)\">\n {{ isExpanded('Functional',item) ? 'Show Less' : '+' +\n getRemainingCount('Functional',item) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',item)?.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',item)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName\n }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',item)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',item)\">\n {{ isExpanded('Domain',item) ? 'Show Less' : '+' +\n getRemainingCount('Domain',item) + ' 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\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\" *ngIf=\"item?.relevancy\">\n {{item?.relevancy}}%</div>\n <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n\n <!-- adding courses -->\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Footer -->\n\n </div>\n <footer class=\"org-footer\">\n <div class=\"max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between\">\n <div class=\"flex items-center space-x-4 mb-4 mt-4 md:mb-0 footer-container\">\n <div class=\"footer-logo-container\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"h-10\"\n style=\"margin-left:20px\" />\n </div>\n <div style=\"margin-left: 100px;\">\n <a href=\"https://karmayogibharat.gov.in\" target=\"_blank\" rel=\"noopener noreferrer\"\n class=\"text-sm font-semibold transition-colors\">\n karmayogibharat.gov.in\n </a>\n </div>\n\n\n </div>\n <div class=\"text-sm text-center md:text-right mb-4\" style=\"margin-left: 100px;\">\n <p>© 2025 All Rights Reserved.</p>\n </div>\n </div>\n </footer>\n </div>\n <div class=\"popup-footer\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download as Excel\" (click)=\"downloadCSV()\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download as PDF\"\n (click)=\"downloadPdfFromBE(openedFrom)\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancelForm()\" />\n </div>\n </div>\n </div>\n <div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loader-message\" *ngIf=\"downloadInProgress\">\n Download is in progress. Please wait, this may take a while for large files...\n </div>\n </div>\n\n<!-- Marketplace tags (shown under the AI Recommended / Manually Suggested pill) -->\n<ng-template #marketplaceTags let-course>\n <div class=\"marketplace-tags mt-2\" *ngIf=\"sharedService.getMarketplaceCourseType(course) as marketplaceType\">\n <span class=\"marketplace-tag marketplace\">Marketplace</span>\n <span class=\"marketplace-tag\" [ngClass]=\"marketplaceType\">{{ marketplaceType === 'paid' ? 'Paid' : 'Free' }}</span>\n </div>\n</ng-template>\n", 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: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: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{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:normal;flex-direction:row;gap:16px}.outside-layer-total{display:flex;padding:4px 20px;justify-content:left;align-items:left;gap:6px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8;flex-direction:column;width:25%}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;flex-direction:column;width:25%}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;flex-direction:column;width:25%}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #F8B861;border-right:2px solid #F8B861;background:#fde8cc;flex-direction:column;width:25%}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;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:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.heading-bg{color:#fff;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:center}.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:center;gap:16px;padding:16px 24px;background-color:#fff;flex-shrink:0;position:sticky;bottom:-15px}.section-container{overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.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}.grid{display:grid;gap:1.5rem}.grid-cols-1{grid-template-columns:repeat(1,1fr)}@media (min-width: 768px){.md\\:grid-cols-2{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4,1fr)}}.kpi-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 14px #0000000d;border-left:4px solid transparent;transition:box-shadow .3s ease}.kpi-card:hover{box-shadow:0 8px 24px #0000001a}.kpi-icon{padding:.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.kpi-text{font-size:1.25rem;font-weight:700}.progress-container{background:#e5e7eb;height:.75rem;border-radius:9999px;margin-top:.5rem}.progress-bar{height:100%;border-radius:9999px;transition:width .4s ease}.competency-block{background-color:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000f;overflow:hidden}.competency-header{padding:1.5rem;background:linear-gradient(to right,#4f46e5,#3b82f6);color:#fff}.competency-header h3{font-size:1.25rem;font-weight:600}.competency-body{padding:1rem}.role-card{background-color:#f9fafb;padding:.5rem;border-left:4px solid #6366f1;border-radius:6px}.role-title{font-size:1rem;font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;color:#1e40af}.comp-section{border-radius:.5rem;padding:.75rem;background-color:#f0f9ff;margin-bottom:1rem}.comp-section h4{font-weight:600;margin-bottom:.5rem}.comp-item{background-color:#fff;border-left:3px solid #3b82f6;padding:.5rem;border-radius:4px;margin-bottom:.25rem;font-size:.875rem}.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}.text-blue-800{color:#1e3a8a}.text-green-800{color:#ff1493}.text-purple-800{color:#6b21a8}.border-blue-400{border-color:#60a5fa}.border-green-400{border-color:#34d399}.border-purple-400{border-color:#c084fc}.text-sm{font-size:.875rem}.text-gray-700{color:#374151}.icon-sm{width:24px;height:24px}.heading-with-bg{background:#4f46e5;padding:24px;border-radius:8px 8px 0 0}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.section-shadow{padding:16px;border-radius:4px;background:#fff;box-shadow:0 2px 4px #0000001a,0 1px 10px #0000000f}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.competency-grid{display:flex;flex-direction:row;gap:16px;justify-content:space-between}.text-blue-600{color:#1b4ca1;font-weight:600}.text-green-600{color:#ff1493;font-weight:600}.text-purple-600{color:#6b21a8;font-weight:600}.horizontal-flex{display:flex;align-items:center;justify-content:space-between;width:100%}.progress-bar{width:100%;height:10px;background-color:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 3px #0003}.progress-bar-fill{height:100%;background-color:#1b4ca1;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-behavioural{height:100%;background-color:#f8b861;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-functional{height:100%;background-color:#e24577;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-domain{height:100%;background-color:#7b47a4;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.sub-text{font-size:12px;font-weight:600;font-family:Lato}.competency-count-by-designation{display:flex;gap:10px;flex-direction:row}.competencies-grid-3{width:33%}.grid-list-item div{padding:5px 10px;margin:10px 0}.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}.header-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;gap:30px}.header-border{border-bottom:1px solid #ccc;margin:10px;padding:10px}.text-gray-600{font-family:Lato;font-size:14px;font-weight:600}.image-container .h-10,.image-container .h-15{height:50px}.image-container{display:flex;gap:10px;flex-direction:row}.org-footer{display:flex;flex-direction:row;background:#fff;gap:16px;color:#000;width:100%;justify-content:center;align-items:center;border-top:1px solid #ccc;border-bottom:1px solid #ccc}.dialog-scrollable-content{max-height:70vh;overflow-y:auto}.org-footer a{color:#000!important}h1{font-size:1.75rem!important}@media print{.org-footer,.header-border{page-break-inside:avoid}}.header-border{padding-top:10px;padding-bottom:10px;background-color:#fff}.footer-container{display:flex;justify-content:center;align-items:center;flex-direction:column}.footer-logo-container{display:flex;justify-content:center;align-items:center;flex-direction:row;width:30%}.avoid-page-break{page-break-inside:avoid;break-inside:avoid}.pdf-clean *{box-shadow:none!important;filter:none!important;transform:none!important}.view-cbp-plan.pdf-clean{overflow:visible!important;max-height:none!important}.section-container,.popup-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.section-shadow{page-break-inside:avoid!important;break-inside:avoid!important}.bg-gradient-to-br{background:none!important}.section-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.competencis-grid{page-break-inside:avoid}.page-break{page-break-before:always}.cbp .container{margin:10px auto}.cbp .sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal}.cbp .radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.cbp .label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}.cbp ::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}.cbp ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}.cbp ::ng-deep .mat-select-panel{background-color:#fff!important}.cbp ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}.cbp ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}.cbp ::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp ::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}.cbp ::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.cbp .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}.cbp .section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.cbp .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}.cbp .btn-group{display:flex;flex-direction:row;justify-content:space-between}.cbp .pl-2{padding-left:5px}.cbp .search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.cbp .search .rsearch{position:relative}.cbp .search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.cbp .search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.cbp .select-map-route-container{display:flex;flex-direction:row}.cbp .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}.cbp .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}.cbp .search-container{display:flex;flex-direction:row}.cbp .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}.cbp .course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.cbp .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}.cbp .ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.cbp .ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.cbp .ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.cbp .ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.cbp .ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .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}.cbp .course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.cbp .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}.cbp .relevancy,.cbp .competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.cbp .percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .delete-button input{background-color:#b60a0a;border-radius:10px}.cbp .relevancy-container,.cbp .competencies-matched-container{display:flex;flex-direction:row;align-items:center}.cbp .dash{padding:0 5px}.cbp ::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.cbp .course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.cbp .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}.cbp .course-list-item:hover{box-shadow:0 4px 8px #00000026}.cbp .course-list-item:only-child{flex:1 1 auto;max-width:800px}.cbp .checked-course-container{display:flex;width:60%}.cbp .ml-2{margin-left:8px}.cbp ::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.cbp .igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.cbp .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}.cbp .ai-loader-icon img,.cbp .igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.cbp .competency-container{display:flex;justify-content:normal;gap:16px;flex-direction:row}.cbp .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}.cbp .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}.cbp .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}.cbp .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}.cbp .inside-layer{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .count{color:#1b4ca1;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.cbp .suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .suggest-course-control{display:flex;flex-direction:row}.cbp .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}.cbp .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}.cbp .ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.cbp .heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.cbp .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}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.cbp .header-left{flex:1}.cbp .header-actions{display:flex;align-items:center;gap:12px}.cbp .regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.cbp .regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.cbp .regenerate-btn .mat-spinner{margin:0}.cbp .regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.cbp .close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.cbp .close-btn:hover{background-color:#f5f5f5}.cbp .close-btn .mat-icon{font-size:20px;width:20px;height:20px}.cbp .progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.cbp .progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .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}.cbp .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}.cbp .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}.cbp .popup-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .popup-footer{display:flex;flex-direction:row;justify-content:end}.cbp .view-cbp-plan{margin:10px;padding:10px}.cbp .view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.cbp .section{border-radius:8px;background:#1b4ca114;padding:16px}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.cbp .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}.cbp .section-container{overflow-y:auto;flex:1 1 auto}.cbp .competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.cbp .competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.cbp .competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .cursor-pointer{cursor:pointer}.cbp .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}.cbp .custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .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;gap:16px}.cbp .loader-message{color:#1b4ca1;font-family:Lato;font-size:16px;font-weight:600;text-align:center;padding:0 16px}.cbp .competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.cbp .grid-list-item-behavioral div{border-left:2px solid darkorange}.cbp .grid-list-item-functional div{border-left:2px solid #ff1493}.cbp .grid-list-item-domain div{border-left:2px solid #6b21a8}.cbp .competencies-grid-3{width:33%}.cbp .bg-blue-50{background-color:#fde8cc;border-radius:4px}.cbp .bg-green-50{background-color:#f8d2de;border-radius:4px}.cbp .bg-purple-50{background-color:#dfd3e9;border-radius:4px}.cbp .grid-list-item div{padding:5px 10px;margin:10px 0}.cbp .course-pill-container{display:flex;gap:8px}.cbp .relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.cbp .mt-1{margin-top:.25rem}.cbp .mt-2{margin-top:.5rem}.cbp .mt-3{margin-top:.75rem}.cbp .show-more-competency{display:inline-flex;align-items:center}.cbp .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}.cbp .show-more-link:hover{text-decoration:underline}.cbp .course-content{flex:1;display:flex;flex-direction:column}.cbp .course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}.cbp ::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.cbp .competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.cbp .menu-list-item.active{background-color:#1b4ca1;color:#fff}.cbp .menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.cbp .gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.cbp .div-count{font-family:Lato;font-size:20px;font-weight:700}.cbp .green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.cbp .div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.cbp .div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .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}.cbp .add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.cbp .list-flex{display:flex;flex-direction:row;justify-content:space-between}.cbp .all-category-list .mat-icon{vertical-align:middle}.cbp .course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.cbp .left-panel{flex:0 0 250px;font-weight:700;text-align:left}.cbp .right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.cbp .category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.cbp .right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.cbp .course-list-container-right-flex{display:flex}.cbp .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}.cbp .no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.cbp .no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.cbp .no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.cbp .section-header-improved{display:flex;flex-direction:column;gap:16px}.cbp .search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.cbp .search-container-compact{flex:0 0 auto;min-width:280px}.cbp .search-container-compact .rsearch{position:relative;display:flex;align-items:center}.cbp .search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.cbp .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}.cbp .search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.cbp .search-container-compact .sinput-compact::placeholder{color:#999}.cbp .btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.cbp .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}.cbp .category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.cbp .category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.cbp .category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.cbp .theme-filter-controls{margin-bottom:8px}.cbp .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}.cbp .clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.cbp .clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.cbp .no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.cbp .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}.cbp .no-course-card .no-course-icon{margin-bottom:20px}.cbp .no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.cbp .no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.cbp .no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.cbp .no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.cbp .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}.cbp .no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.cbp .no-course-card .suggest-course-btn:active{transform:translateY(0)}.cbp .no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.cbp .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){.cbp .search-and-buttons-container{flex-direction:column;align-items:stretch}.cbp .search-container-compact{min-width:auto;width:100%}.cbp .btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.cbp .course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.cbp .course-list-container-flex{flex-direction:column}.cbp .left-panel{flex:none!important;max-height:300px}.cbp .course-list-item{flex:0 0 100%;max-width:100%}.cbp .no-course-card{padding:20px}.cbp .no-course-card .no-course-content h4{font-size:20px}.cbp .no-course-card .no-course-content p{font-size:14px}}.cbp ::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}.cbp ::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}.cbp ::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}.cbp ::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.cbp .download-pdf{justify-content:end;display:flex;flex-direction:row}.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:4px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}::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}.header-container{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:10px 0}.right-side-container{display:flex;justify-content:space-between;gap:64px}::ng-deep .language-select .mat-select-trigger{font-weight:400!important}::ng-deep .language-select .mat-select-value{color:#fff!important}:host ::ng-deep .select-search-panel .mat-option-text{color:#fff!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:16px;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap}.delivery-mode-tag.online{background:#e6f4ea;color:#1a7f45;border:1px solid #9BD3B0}.delivery-mode-tag.offline{background:#fdf0e3;color:#a2590a;border:1px solid #F0C48A}.delivery-mode-tag.blended{background:#efe9fb;color:#5b21b6;border:1px solid #C9B6F0}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:row;gap:6px}.marketplace-tags{display:flex;flex-wrap:wrap;gap:8px}.marketplace-tag{display:inline-flex;align-items:center;padding:4px 8px;border-radius:4px;font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap}.marketplace-tag.marketplace{background:#3f51b51f;color:#1a237e}.marketplace-tag.free{background:#0080001c;color:#006400}.marketplace-tag.paid{background:#d32f2f1c;color:#8b1a1a}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: 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: "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: "directive", type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
13868
14007
|
}
|
|
13869
14008
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewFinalCbpPlanComponent, decorators: [{
|
|
13870
14009
|
type: Component,
|
|
13871
|
-
args: [{ selector: 'app-view-final-cbp-plan', template: "<div class=\"view-cbp-plan\" #dialogContent style=\"max-height: 80vh; overflow: auto;\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div class=\"header-container\">\n <div>\n <div class=\"heading\">View Final <span *ngIf=\"openedFrom === 'cbp'\">CBP</span><span\n *ngIf=\"openedFrom === 'acbp'\">ACBP</span></div>\n </div>\n <div class=\"right-side-container\">\n <div class=\"search-and-buttons-container\">\n <form [formGroup]=\"filterForm\">\n <div>\n <mat-form-field appearance=\"outline\" class=\"language-select\" style=\" height: 34px;\">\n <mat-label style=\"font-weight: normal;\">\n {{ filterForm.get('language')?.value ? '' : 'Select Language' }}\n </mat-label>\n\n <mat-select formControlName=\"language\" 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 placeholder=\"Search Languages\" (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?.code\">\n {{ r?.label }}\n </mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n </form>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n\n\n\n </div>\n <div class=\"section-container\" #pdfContent>\n <header class=\"bg-white header-border\">\n <div class=\"header-flex justify-between\" style=\"width:100%\">\n <div class=\"flex items-center space-x-4\" style=\"width:50%\">\n <div class=\"image-container\">\n <div>\n <img src=\"assets/icons/dopt-logo.png\" alt=\"Department of Personnel & Training\"\n class=\"h-15\" />\n </div>\n <div>\n <img src=\"assets/icons/CBC_logo.svg\" alt=\"Capacity Building Commission Logo\"\n class=\"h-10\" />\n </div>\n <div>\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\"\n class=\"h-10\" />\n </div>\n </div>\n </div>\n <div class=\"text-right\" style=\"width:50%\">\n <h1 class=\"text-2xl font-bold text-gray-900\">\n <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">/{{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n - Capacity Building Plan\n </h1>\n <p class=\"text-gray-600\">Comprehensive Role-Based Competency Analysis</p>\n </div>\n </div>\n </header>\n <div class=\"min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100\">\n <!-- Header -->\n\n\n <div class=\"max-w-7xl mx-auto px-6 py-8 mt-4\">\n <!-- KPI Dashboard -->\n <div class=\"competency-container mt-2\">\n <div class=\"outside-layer-total\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n <path d=\"M14 2v6h6\" />\n <path d=\"M16 13H8\" />\n <path d=\"M16 17H8\" />\n <path d=\"M10 9H8\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.total}}</div>\n </div>\n </div>\n\n <div class=\"mt-4\">\n <div class=\"sub-heading\">\n <p>Total Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Total Competencies: {{totalCompetencieObj?.total}}</div>\n </div>\n <div class=\"count\">\n <!-- {{competenciesCount?.total}} -->\n </div>\n </div>\n <div class=\"outside-layer-behavioral\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M15.5 17a4 4 0 0 1-5 0\" />\n <path d=\"M13 14h.01\" />\n <path d=\"M11 11h.01\" />\n <path d=\"M17 14h.01\" />\n <path d=\"M13 10h.01\" />\n <path d=\"M13 18h.01\" />\n <path d=\"M13 6h.01\" />\n <path d=\"M17 18h.01\" />\n <path d=\"M17 6h.01\" />\n <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.behavioral}}</div>\n </div>\n </div>\n\n <div class=\"mt-2\">\n <div class=\"sub-heading\">\n <p>Behavioral Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill-behavioural\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Behavioral Competencies: {{totalCompetencieObj?.behavioral}}\n </div>\n </div>\n\n </div>\n <div class=\"outside-layer-functional\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.functional}}</div>\n </div>\n </div>\n\n <div class=\"mt-2\">\n <div class=\"sub-heading\">\n <p>Functional Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill-functional\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Functional Competencies: {{totalCompetencieObj?.functional}}</div>\n </div>\n\n\n </div>\n <div class=\"outside-layer-domain\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <circle cx=\"12\" cy=\"12\" r=\"6\" />\n <circle cx=\"12\" cy=\"12\" r=\"2\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.domain}}</div>\n </div>\n </div>\n\n <div class=\"mt-2\">\n <div class=\"sub-heading\">\n <p>Domain Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill-domain\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Domain Competencies: {{totalCompetencieObj?.domain}}</div>\n </div>\n\n </div>\n </div>\n <!-- <div class=\"mb-8\">\n <h2 class=\"text-2xl font-bold text-gray-900 mb-6nheading\">Competency Overview</h2>\n <div class=\"competency-grid\">\n <ng-container *ngFor=\"let kpi of overallKPIs;\">\n <div class=\"bg-white rounded-xl outside-layer-total p-6 border-l-4 hover:shadow-xl transition-shadow\" [style.border-left-color]=\"kpi.color\">\n <div class=\"flex items-center justify-between mb-4 inside-layer\">\n <div [class]=\"'p-3 rounded-lg ' + kpi.bgColor\">\n <ng-container [ngSwitch]=\"kpi.name\">\n <svg *ngSwitchCase=\"'Behavioral Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M15.5 17a4 4 0 0 1-5 0\"/>\n <path d=\"M13 14h.01\"/><path d=\"M11 11h.01\"/><path d=\"M17 14h.01\"/><path d=\"M13 10h.01\"/>\n <path d=\"M13 18h.01\"/><path d=\"M13 6h.01\"/><path d=\"M17 18h.01\"/><path d=\"M17 6h.01\"/>\n <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\"/>\n </svg>\n \n <svg *ngSwitchCase=\"'Functional Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"/>\n </svg>\n \n <svg *ngSwitchCase=\"'Domain Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/><circle cx=\"12\" cy=\"12\" r=\"6\"/><circle cx=\"12\" cy=\"12\" r=\"2\"/>\n </svg>\n \n <svg *ngSwitchCase=\"'Total Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/>\n <path d=\"M14 2v6h6\"/><path d=\"M16 13H8\"/><path d=\"M16 17H8\"/><path d=\"M10 9H8\"/>\n </svg>\n \n </ng-container>\n </div>\n <div class=\"text-right\">\n <div class=\"text-2xl font-bold text-gray-900\">{{kpi.total}}</div>\n </div>\n </div>\n <h3 class=\"text-gray-900 font-semibold mb-2 heading\">{{kpi.name}}</h3>\n <div class=\"w-full bg-gray-200 rounded-full h-3\">\n <div class=\"h-3 rounded-full transition-all duration-500\"\n [style.width.%]=\"kpi.avgCompletion\"\n [style.background-color]=\"kpi.color\">\n </div>\n </div>\n <p class=\"text-sm text-gray-500 mt-2\">Total Competencies: {{kpi.total}}</p>\n </div>\n </ng-container>\n </div>\n </div> -->\n\n <!-- Designation Reports -->\n <div class=\"space-y-8 mt-4\">\n <h2 class=\"text-2xl font-bold text-gray-900 mb-6 heading\">Detailed Competency Framework by\n Designation</h2>\n\n <ng-container *ngFor=\"let designation of designationData;\">\n <div class=\"bg-white rounded-xl overflow-hidden section-shadow\">\n <!-- Header -->\n <div\n class=\"bg-gradient-to-r from-indigo-600 to-blue-600 text-white p-6 heading-with-bg\">\n <div class=\"flex items-center justify-between\">\n <div>\n <h3 class=\"text-2xl font-bold mb-2 heading-bg\">{{designation.designation}}\n </h3>\n <p class=\"text-indigo-100 mb-1\">Wing/Division: {{designation.wing}}</p>\n </div>\n <div class=\"flex items-center space-x-4 competency-count-by-designation\">\n <span class=\"font-semibold text-sm\">Behavioral:\n {{designation.behavioralCompetencies.length}} total</span>\n <span class=\"font-semibold text-sm\">Functional:\n {{designation.functionalCompetencies.length}} total</span>\n <span class=\"font-semibold text-sm\">Domain:\n {{designation.domainCompetencies.length}} total</span>\n </div>\n </div>\n </div>\n\n <!-- Body -->\n <div class=\"p-4 section-shadow\">\n <!-- Roles -->\n <div class=\"mb-6\">\n <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n </svg>\n Roles & Responsibilities\n </h4>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n <div *ngFor=\"let role of designation.rolesResponsibilities; let i = index\"\n class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n </div>\n </div>\n </div>\n <!-- Activities -->\n <div class=\"mb-6 mt-4\">\n <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n </svg>\n Activities\n </h4>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n <div *ngFor=\"let role of designation.activities; let i = index\"\n class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n </div>\n </div>\n </div>\n <div class=\"page-break\"></div>\n <!-- Competencies -->\n <div class=\"competencis-grid mt-4\">\n <!-- Behavioral -->\n <div class=\"bg-blue-50 rounded-lg p-3 competencies-grid-3\">\n <h4 class=\"font-semibold text-blue-800 text-base mb-2\">Behavioral</h4>\n <div class=\"space-y-1 grid-list-item grid-list-item-behavioral\">\n <div *ngFor=\"let comp of designation.behavioralCompetencies; let i = index\"\n class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-blue-400\">\n {{comp}}\n <div class=\"flex-col-theme\">\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.behavioralSetForProficiencyLevel[i]\"\n class=\"proficiency-tag\"\n [ngClass]=\"designation.behavioralSetForProficiencyLevel[i]?.toLowerCase()\"\n [matTooltip]=\"designation.behavioralSetForProficiencyLevelRationale[i]\"\n >\n {{ designation.behavioralSetForProficiencyLevel[i] }}\n </span>\n\n \n </span>\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.behavioralSetForDeliveryMode[i]\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"designation.behavioralSetForDeliveryMode[i]?.toLowerCase()\"\n [matTooltip]=\"designation.behavioralSetForDeliveryModeRationale[i]\"\n >\n {{ designation.behavioralSetForDeliveryMode[i] }}\n </span>\n\n \n </span>\n </div>\n </div>\n \n </div>\n \n <div class=\"mt-2 text-sm text-blue-600 font-medium\">\n {{designation.behavioralCompetencies.length}} total\n </div>\n </div>\n\n <!-- Functional -->\n <div class=\"bg-green-50 rounded-lg p-3 competencies-grid-3\">\n <h4 class=\"font-semibold text-green-800 text-base mb-2\">Functional</h4>\n <div class=\"space-y-1 grid-list-item grid-list-item-functional\">\n <div *ngFor=\"let comp of designation.functionalCompetencies; let i = index\"\n class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-green-400\">\n {{comp}}\n <div class=\"flex-col-theme\">\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.functionalSetForProficiencyLevel[i]\"\n class=\"proficiency-tag\"\n [ngClass]=\"designation.functionalSetForProficiencyLevel[i]?.toLowerCase()\"\n [matTooltip]=\"designation.functionalSetForProficiencyLevelRationale[i]\"\n >\n {{ designation.functionalSetForProficiencyLevel[i] }}\n </span>\n\n \n </span>\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.functionalSetForDeliveryMode[i]\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"designation.functionalSetForDeliveryMode[i]?.toLowerCase()\"\n [matTooltip]=\"designation.functionalSetForDeliveryModeRationale[i]\"\n >\n {{ designation.functionalSetForDeliveryMode[i] }}\n </span>\n\n \n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-2 text-sm text-green-600 font-medium\">\n {{designation.functionalCompetencies.length}} total\n </div>\n </div>\n\n <!-- Domain -->\n <div class=\"bg-purple-50 rounded-lg p-3 competencies-grid-3\">\n <h4 class=\"font-semibold text-purple-800 text-base mb-2\">Domain</h4>\n <div class=\"space-y-1 grid-list-item grid-list-item-domain\">\n <div *ngFor=\"let comp of designation.domainCompetencies; let i = index\"\n class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-purple-400\">\n {{comp}}\n <div class=\"flex-col-theme\">\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.domainSetForProficiencyLevel[i]\"\n class=\"proficiency-tag\"\n [ngClass]=\"designation.domainSetForProficiencyLevel[i]?.toLowerCase()\"\n [matTooltip]=\"designation.domainSetForProficiencyLevelRationale[i]\"\n >\n {{ designation.domainSetForProficiencyLevel[i] }}\n </span>\n\n \n </span>\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.domainSetForDeliveryMode[i]\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"designation.domainSetForDeliveryMode[i]?.toLowerCase()\"\n [matTooltip]=\"designation.domainSetForDeliveryModeRationale[i]\"\n >\n {{ designation.domainSetForDeliveryMode[i] }}\n </span>\n\n \n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-2 text-sm text-purple-600 font-medium\">\n {{designation.domainCompetencies.length}} total\n </div>\n </div>\n </div>\n <!-- Adding courses -->\n <div class=\"cbp mt-4\"\n *ngIf=\"designation.selectedCourses?.length && openedFrom === 'acbp'\">\n <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n </svg>\n Courses\n </h4>\n <div class=\"course-list-container\">\n <div class=\"course-list-item\"\n *ngFor=\"let item of designation.selectedCourses; 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\n src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n\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\"\n *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\"\n *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[0]}}</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\"\n *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\"\n *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[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\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\"\n *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\"\n *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[0]}}</span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title mt-4\">\n <div>\n <div *ngIf=\"item?.course\">{{item?.course}}</div>\n <div *ngIf=\"item?.name\">{{item?.name}}</div>\n </div>\n </div>\n <div class=\"course-desc mt-2\">\n <div *ngIf=\"isPDFDownload\">\n <div>{{item?.rationale}}</div>\n </div>\n </div>\n <div class=\"mt-3\"\n *ngIf=\"getCompetenciesByType('Behavioural',item)?.length\">\n <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',item)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName\n }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',item)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',item)\">\n {{ isExpanded('Behavioural',item) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',item) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\"\n *ngIf=\"getCompetenciesByType('Functional',item)?.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',item)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName\n }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',item)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',item)\">\n {{ isExpanded('Functional',item) ? 'Show Less' : '+' +\n getRemainingCount('Functional',item) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',item)?.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',item)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName\n }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',item)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',item)\">\n {{ isExpanded('Domain',item) ? 'Show Less' : '+' +\n getRemainingCount('Domain',item) + ' 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\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\" *ngIf=\"item?.relevancy\">\n {{item?.relevancy}}%</div>\n <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n\n <!-- adding courses -->\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Footer -->\n\n </div>\n <footer class=\"org-footer\">\n <div class=\"max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between\">\n <div class=\"flex items-center space-x-4 mb-4 mt-4 md:mb-0 footer-container\">\n <div class=\"footer-logo-container\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"h-10\"\n style=\"margin-left:20px\" />\n </div>\n <div style=\"margin-left: 100px;\">\n <a href=\"https://karmayogibharat.gov.in\" target=\"_blank\" rel=\"noopener noreferrer\"\n class=\"text-sm font-semibold transition-colors\">\n karmayogibharat.gov.in\n </a>\n </div>\n\n\n </div>\n <div class=\"text-sm text-center md:text-right mb-4\" style=\"margin-left: 100px;\">\n <p>© 2025 All Rights Reserved.</p>\n </div>\n </div>\n </footer>\n </div>\n <div class=\"popup-footer\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download as Excel\" (click)=\"downloadCSV()\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download as PDF\"\n (click)=\"downloadPdfFromBE(openedFrom)\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancelForm()\" />\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}.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: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{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:normal;flex-direction:row;gap:16px}.outside-layer-total{display:flex;padding:4px 20px;justify-content:left;align-items:left;gap:6px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8;flex-direction:column;width:25%}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;flex-direction:column;width:25%}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;flex-direction:column;width:25%}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #F8B861;border-right:2px solid #F8B861;background:#fde8cc;flex-direction:column;width:25%}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;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:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.heading-bg{color:#fff;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:center}.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:center;gap:16px;padding:16px 24px;background-color:#fff;flex-shrink:0;position:sticky;bottom:-15px}.section-container{overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.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}.grid{display:grid;gap:1.5rem}.grid-cols-1{grid-template-columns:repeat(1,1fr)}@media (min-width: 768px){.md\\:grid-cols-2{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4,1fr)}}.kpi-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 14px #0000000d;border-left:4px solid transparent;transition:box-shadow .3s ease}.kpi-card:hover{box-shadow:0 8px 24px #0000001a}.kpi-icon{padding:.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.kpi-text{font-size:1.25rem;font-weight:700}.progress-container{background:#e5e7eb;height:.75rem;border-radius:9999px;margin-top:.5rem}.progress-bar{height:100%;border-radius:9999px;transition:width .4s ease}.competency-block{background-color:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000f;overflow:hidden}.competency-header{padding:1.5rem;background:linear-gradient(to right,#4f46e5,#3b82f6);color:#fff}.competency-header h3{font-size:1.25rem;font-weight:600}.competency-body{padding:1rem}.role-card{background-color:#f9fafb;padding:.5rem;border-left:4px solid #6366f1;border-radius:6px}.role-title{font-size:1rem;font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;color:#1e40af}.comp-section{border-radius:.5rem;padding:.75rem;background-color:#f0f9ff;margin-bottom:1rem}.comp-section h4{font-weight:600;margin-bottom:.5rem}.comp-item{background-color:#fff;border-left:3px solid #3b82f6;padding:.5rem;border-radius:4px;margin-bottom:.25rem;font-size:.875rem}.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}.text-blue-800{color:#1e3a8a}.text-green-800{color:#ff1493}.text-purple-800{color:#6b21a8}.border-blue-400{border-color:#60a5fa}.border-green-400{border-color:#34d399}.border-purple-400{border-color:#c084fc}.text-sm{font-size:.875rem}.text-gray-700{color:#374151}.icon-sm{width:24px;height:24px}.heading-with-bg{background:#4f46e5;padding:24px;border-radius:8px 8px 0 0}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.section-shadow{padding:16px;border-radius:4px;background:#fff;box-shadow:0 2px 4px #0000001a,0 1px 10px #0000000f}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.competency-grid{display:flex;flex-direction:row;gap:16px;justify-content:space-between}.text-blue-600{color:#1b4ca1;font-weight:600}.text-green-600{color:#ff1493;font-weight:600}.text-purple-600{color:#6b21a8;font-weight:600}.horizontal-flex{display:flex;align-items:center;justify-content:space-between;width:100%}.progress-bar{width:100%;height:10px;background-color:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 3px #0003}.progress-bar-fill{height:100%;background-color:#1b4ca1;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-behavioural{height:100%;background-color:#f8b861;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-functional{height:100%;background-color:#e24577;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-domain{height:100%;background-color:#7b47a4;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.sub-text{font-size:12px;font-weight:600;font-family:Lato}.competency-count-by-designation{display:flex;gap:10px;flex-direction:row}.competencies-grid-3{width:33%}.grid-list-item div{padding:5px 10px;margin:10px 0}.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}.header-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;gap:30px}.header-border{border-bottom:1px solid #ccc;margin:10px;padding:10px}.text-gray-600{font-family:Lato;font-size:14px;font-weight:600}.image-container .h-10,.image-container .h-15{height:50px}.image-container{display:flex;gap:10px;flex-direction:row}.org-footer{display:flex;flex-direction:row;background:#fff;gap:16px;color:#000;width:100%;justify-content:center;align-items:center;border-top:1px solid #ccc;border-bottom:1px solid #ccc}.dialog-scrollable-content{max-height:70vh;overflow-y:auto}.org-footer a{color:#000!important}h1{font-size:1.75rem!important}@media print{.org-footer,.header-border{page-break-inside:avoid}}.header-border{padding-top:10px;padding-bottom:10px;background-color:#fff}.footer-container{display:flex;justify-content:center;align-items:center;flex-direction:column}.footer-logo-container{display:flex;justify-content:center;align-items:center;flex-direction:row;width:30%}.avoid-page-break{page-break-inside:avoid;break-inside:avoid}.pdf-clean *{box-shadow:none!important;filter:none!important;transform:none!important}.view-cbp-plan.pdf-clean{overflow:visible!important;max-height:none!important}.section-container,.popup-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.section-shadow{page-break-inside:avoid!important;break-inside:avoid!important}.bg-gradient-to-br{background:none!important}.section-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.competencis-grid{page-break-inside:avoid}.page-break{page-break-before:always}.cbp .container{margin:10px auto}.cbp .sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal}.cbp .radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.cbp .label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}.cbp ::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}.cbp ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}.cbp ::ng-deep .mat-select-panel{background-color:#fff!important}.cbp ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}.cbp ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}.cbp ::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp ::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}.cbp ::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.cbp .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}.cbp .section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.cbp .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}.cbp .btn-group{display:flex;flex-direction:row;justify-content:space-between}.cbp .pl-2{padding-left:5px}.cbp .search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.cbp .search .rsearch{position:relative}.cbp .search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.cbp .search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.cbp .select-map-route-container{display:flex;flex-direction:row}.cbp .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}.cbp .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}.cbp .search-container{display:flex;flex-direction:row}.cbp .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}.cbp .course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.cbp .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}.cbp .ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.cbp .ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.cbp .ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.cbp .ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.cbp .ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .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}.cbp .course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.cbp .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}.cbp .relevancy,.cbp .competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.cbp .percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .delete-button input{background-color:#b60a0a;border-radius:10px}.cbp .relevancy-container,.cbp .competencies-matched-container{display:flex;flex-direction:row;align-items:center}.cbp .dash{padding:0 5px}.cbp ::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.cbp .course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.cbp .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}.cbp .course-list-item:hover{box-shadow:0 4px 8px #00000026}.cbp .course-list-item:only-child{flex:1 1 auto;max-width:800px}.cbp .checked-course-container{display:flex;width:60%}.cbp .ml-2{margin-left:8px}.cbp ::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.cbp .igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.cbp .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}.cbp .ai-loader-icon img,.cbp .igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.cbp .competency-container{display:flex;justify-content:normal;gap:16px;flex-direction:row}.cbp .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}.cbp .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}.cbp .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}.cbp .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}.cbp .inside-layer{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .count{color:#1b4ca1;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.cbp .suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .suggest-course-control{display:flex;flex-direction:row}.cbp .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}.cbp .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}.cbp .ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.cbp .heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.cbp .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}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.cbp .header-left{flex:1}.cbp .header-actions{display:flex;align-items:center;gap:12px}.cbp .regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.cbp .regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.cbp .regenerate-btn .mat-spinner{margin:0}.cbp .regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.cbp .close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.cbp .close-btn:hover{background-color:#f5f5f5}.cbp .close-btn .mat-icon{font-size:20px;width:20px;height:20px}.cbp .progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.cbp .progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .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}.cbp .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}.cbp .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}.cbp .popup-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .popup-footer{display:flex;flex-direction:row;justify-content:end}.cbp .view-cbp-plan{margin:10px;padding:10px}.cbp .view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.cbp .section{border-radius:8px;background:#1b4ca114;padding:16px}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.cbp .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}.cbp .section-container{overflow-y:auto;flex:1 1 auto}.cbp .competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.cbp .competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.cbp .competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .cursor-pointer{cursor:pointer}.cbp .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}.cbp .custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .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}.cbp .competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.cbp .grid-list-item-behavioral div{border-left:2px solid darkorange}.cbp .grid-list-item-functional div{border-left:2px solid #ff1493}.cbp .grid-list-item-domain div{border-left:2px solid #6b21a8}.cbp .competencies-grid-3{width:33%}.cbp .bg-blue-50{background-color:#fde8cc;border-radius:4px}.cbp .bg-green-50{background-color:#f8d2de;border-radius:4px}.cbp .bg-purple-50{background-color:#dfd3e9;border-radius:4px}.cbp .grid-list-item div{padding:5px 10px;margin:10px 0}.cbp .course-pill-container{display:flex;gap:8px}.cbp .relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.cbp .mt-1{margin-top:.25rem}.cbp .mt-2{margin-top:.5rem}.cbp .mt-3{margin-top:.75rem}.cbp .show-more-competency{display:inline-flex;align-items:center}.cbp .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}.cbp .show-more-link:hover{text-decoration:underline}.cbp .course-content{flex:1;display:flex;flex-direction:column}.cbp .course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}.cbp ::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.cbp .competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.cbp .menu-list-item.active{background-color:#1b4ca1;color:#fff}.cbp .menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.cbp .gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.cbp .div-count{font-family:Lato;font-size:20px;font-weight:700}.cbp .green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.cbp .div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.cbp .div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .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}.cbp .add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.cbp .list-flex{display:flex;flex-direction:row;justify-content:space-between}.cbp .all-category-list .mat-icon{vertical-align:middle}.cbp .course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.cbp .left-panel{flex:0 0 250px;font-weight:700;text-align:left}.cbp .right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.cbp .category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.cbp .right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.cbp .course-list-container-right-flex{display:flex}.cbp .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}.cbp .no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.cbp .no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.cbp .no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.cbp .section-header-improved{display:flex;flex-direction:column;gap:16px}.cbp .search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.cbp .search-container-compact{flex:0 0 auto;min-width:280px}.cbp .search-container-compact .rsearch{position:relative;display:flex;align-items:center}.cbp .search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.cbp .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}.cbp .search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.cbp .search-container-compact .sinput-compact::placeholder{color:#999}.cbp .btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.cbp .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}.cbp .category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.cbp .category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.cbp .category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.cbp .theme-filter-controls{margin-bottom:8px}.cbp .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}.cbp .clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.cbp .clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.cbp .no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.cbp .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}.cbp .no-course-card .no-course-icon{margin-bottom:20px}.cbp .no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.cbp .no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.cbp .no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.cbp .no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.cbp .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}.cbp .no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.cbp .no-course-card .suggest-course-btn:active{transform:translateY(0)}.cbp .no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.cbp .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){.cbp .search-and-buttons-container{flex-direction:column;align-items:stretch}.cbp .search-container-compact{min-width:auto;width:100%}.cbp .btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.cbp .course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.cbp .course-list-container-flex{flex-direction:column}.cbp .left-panel{flex:none!important;max-height:300px}.cbp .course-list-item{flex:0 0 100%;max-width:100%}.cbp .no-course-card{padding:20px}.cbp .no-course-card .no-course-content h4{font-size:20px}.cbp .no-course-card .no-course-content p{font-size:14px}}.cbp ::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}.cbp ::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}.cbp ::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}.cbp ::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.cbp .download-pdf{justify-content:end;display:flex;flex-direction:row}.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:4px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}::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}.header-container{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:10px 0}.right-side-container{display:flex;justify-content:space-between;gap:64px}::ng-deep .language-select .mat-select-trigger{font-weight:400!important}::ng-deep .language-select .mat-select-value{color:#fff!important}:host ::ng-deep .select-search-panel .mat-option-text{color:#fff!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:16px;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap}.delivery-mode-tag.online{background:#e6f4ea;color:#1a7f45;border:1px solid #9BD3B0}.delivery-mode-tag.offline{background:#fdf0e3;color:#a2590a;border:1px solid #F0C48A}.delivery-mode-tag.blended{background:#efe9fb;color:#5b21b6;border:1px solid #C9B6F0}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:row;gap:6px}\n"] }]
|
|
14010
|
+
args: [{ selector: 'app-view-final-cbp-plan', template: "<div class=\"view-cbp-plan\" #dialogContent style=\"max-height: 80vh; overflow: auto;\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div class=\"header-container\">\n <div>\n <div class=\"heading\">View Final <span *ngIf=\"openedFrom === 'cbp'\">CBP</span><span\n *ngIf=\"openedFrom === 'acbp'\">ACBP</span></div>\n </div>\n <div class=\"right-side-container\">\n <div class=\"search-and-buttons-container\">\n <form [formGroup]=\"filterForm\">\n <div>\n <mat-form-field appearance=\"outline\" class=\"language-select\" style=\" height: 34px;\">\n <mat-label style=\"font-weight: normal;\">\n {{ filterForm.get('language')?.value ? '' : 'Select Language' }}\n </mat-label>\n\n <mat-select formControlName=\"language\" 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 placeholder=\"Search Languages\" (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?.code\">\n {{ r?.label }}\n </mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n </form>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n\n\n\n </div>\n <div class=\"section-container\" #pdfContent>\n <header class=\"bg-white header-border\">\n <div class=\"header-flex justify-between\" style=\"width:100%\">\n <div class=\"flex items-center space-x-4\" style=\"width:50%\">\n <div class=\"image-container\">\n <div>\n <img src=\"assets/icons/dopt-logo.png\" alt=\"Department of Personnel & Training\"\n class=\"h-15\" />\n </div>\n <div>\n <img src=\"assets/icons/CBC_logo.svg\" alt=\"Capacity Building Commission Logo\"\n class=\"h-10\" />\n </div>\n <div>\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\"\n class=\"h-10\" />\n </div>\n </div>\n </div>\n <div class=\"text-right\" style=\"width:50%\">\n <h1 class=\"text-2xl font-bold text-gray-900\">\n <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}}</span>\n <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">/{{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n - Capacity Building Plan\n </h1>\n <p class=\"text-gray-600\">Comprehensive Role-Based Competency Analysis</p>\n </div>\n </div>\n </header>\n <div class=\"min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100\">\n <!-- Header -->\n\n\n <div class=\"max-w-7xl mx-auto px-6 py-8 mt-4\">\n <!-- KPI Dashboard -->\n <div class=\"competency-container mt-2\">\n <div class=\"outside-layer-total\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n <path d=\"M14 2v6h6\" />\n <path d=\"M16 13H8\" />\n <path d=\"M16 17H8\" />\n <path d=\"M10 9H8\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.total}}</div>\n </div>\n </div>\n\n <div class=\"mt-4\">\n <div class=\"sub-heading\">\n <p>Total Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Total Competencies: {{totalCompetencieObj?.total}}</div>\n </div>\n <div class=\"count\">\n <!-- {{competenciesCount?.total}} -->\n </div>\n </div>\n <div class=\"outside-layer-behavioral\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M15.5 17a4 4 0 0 1-5 0\" />\n <path d=\"M13 14h.01\" />\n <path d=\"M11 11h.01\" />\n <path d=\"M17 14h.01\" />\n <path d=\"M13 10h.01\" />\n <path d=\"M13 18h.01\" />\n <path d=\"M13 6h.01\" />\n <path d=\"M17 18h.01\" />\n <path d=\"M17 6h.01\" />\n <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.behavioral}}</div>\n </div>\n </div>\n\n <div class=\"mt-2\">\n <div class=\"sub-heading\">\n <p>Behavioral Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill-behavioural\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Behavioral Competencies: {{totalCompetencieObj?.behavioral}}\n </div>\n </div>\n\n </div>\n <div class=\"outside-layer-functional\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.functional}}</div>\n </div>\n </div>\n\n <div class=\"mt-2\">\n <div class=\"sub-heading\">\n <p>Functional Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill-functional\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Functional Competencies: {{totalCompetencieObj?.functional}}</div>\n </div>\n\n\n </div>\n <div class=\"outside-layer-domain\">\n <div class=\"horizontal-flex mt-2\">\n <div>\n <svg class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <circle cx=\"12\" cy=\"12\" r=\"6\" />\n <circle cx=\"12\" cy=\"12\" r=\"2\" />\n </svg>\n </div>\n <div>\n <div class=\"count\">{{totalCompetencieObj?.domain}}</div>\n </div>\n </div>\n\n <div class=\"mt-2\">\n <div class=\"sub-heading\">\n <p>Domain Competencies</p>\n </div>\n </div>\n <div class=\"progress-bar mt-2\">\n <div class=\"progress-bar-fill-domain\" style=\"width: 60%;\"></div>\n </div>\n <div>\n <div class=\"sub-text\">Domain Competencies: {{totalCompetencieObj?.domain}}</div>\n </div>\n\n </div>\n </div>\n <!-- <div class=\"mb-8\">\n <h2 class=\"text-2xl font-bold text-gray-900 mb-6nheading\">Competency Overview</h2>\n <div class=\"competency-grid\">\n <ng-container *ngFor=\"let kpi of overallKPIs;\">\n <div class=\"bg-white rounded-xl outside-layer-total p-6 border-l-4 hover:shadow-xl transition-shadow\" [style.border-left-color]=\"kpi.color\">\n <div class=\"flex items-center justify-between mb-4 inside-layer\">\n <div [class]=\"'p-3 rounded-lg ' + kpi.bgColor\">\n <ng-container [ngSwitch]=\"kpi.name\">\n <svg *ngSwitchCase=\"'Behavioral Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M15.5 17a4 4 0 0 1-5 0\"/>\n <path d=\"M13 14h.01\"/><path d=\"M11 11h.01\"/><path d=\"M17 14h.01\"/><path d=\"M13 10h.01\"/>\n <path d=\"M13 18h.01\"/><path d=\"M13 6h.01\"/><path d=\"M17 18h.01\"/><path d=\"M17 6h.01\"/>\n <path d=\"M21 12a9 9 0 0 1-9 9a9 9 0 0 1-9-9a9 9 0 0 1 9-9a9 9 0 0 1 9 9z\"/>\n </svg>\n \n <svg *ngSwitchCase=\"'Functional Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"/>\n </svg>\n \n <svg *ngSwitchCase=\"'Domain Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"/><circle cx=\"12\" cy=\"12\" r=\"6\"/><circle cx=\"12\" cy=\"12\" r=\"2\"/>\n </svg>\n \n <svg *ngSwitchCase=\"'Total Competencies'\" class=\"h-8 w-8 icon-sm\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"/>\n <path d=\"M14 2v6h6\"/><path d=\"M16 13H8\"/><path d=\"M16 17H8\"/><path d=\"M10 9H8\"/>\n </svg>\n \n </ng-container>\n </div>\n <div class=\"text-right\">\n <div class=\"text-2xl font-bold text-gray-900\">{{kpi.total}}</div>\n </div>\n </div>\n <h3 class=\"text-gray-900 font-semibold mb-2 heading\">{{kpi.name}}</h3>\n <div class=\"w-full bg-gray-200 rounded-full h-3\">\n <div class=\"h-3 rounded-full transition-all duration-500\"\n [style.width.%]=\"kpi.avgCompletion\"\n [style.background-color]=\"kpi.color\">\n </div>\n </div>\n <p class=\"text-sm text-gray-500 mt-2\">Total Competencies: {{kpi.total}}</p>\n </div>\n </ng-container>\n </div>\n </div> -->\n\n <!-- Designation Reports -->\n <div class=\"space-y-8 mt-4\">\n <h2 class=\"text-2xl font-bold text-gray-900 mb-6 heading\">Detailed Competency Framework by\n Designation</h2>\n\n <ng-container *ngFor=\"let designation of designationData;\">\n <div class=\"bg-white rounded-xl overflow-hidden section-shadow\">\n <!-- Header -->\n <div\n class=\"bg-gradient-to-r from-indigo-600 to-blue-600 text-white p-6 heading-with-bg\">\n <div class=\"flex items-center justify-between\">\n <div>\n <h3 class=\"text-2xl font-bold mb-2 heading-bg\">{{designation.designation}}\n </h3>\n <p class=\"text-indigo-100 mb-1\">Wing/Division: {{designation.wing}}</p>\n </div>\n <div class=\"flex items-center space-x-4 competency-count-by-designation\">\n <span class=\"font-semibold text-sm\">Behavioral:\n {{designation.behavioralCompetencies.length}} total</span>\n <span class=\"font-semibold text-sm\">Functional:\n {{designation.functionalCompetencies.length}} total</span>\n <span class=\"font-semibold text-sm\">Domain:\n {{designation.domainCompetencies.length}} total</span>\n </div>\n </div>\n </div>\n\n <!-- Body -->\n <div class=\"p-4 section-shadow\">\n <!-- Roles -->\n <div class=\"mb-6\">\n <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n </svg>\n Roles & Responsibilities\n </h4>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n <div *ngFor=\"let role of designation.rolesResponsibilities; let i = index\"\n class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n </div>\n </div>\n </div>\n <!-- Activities -->\n <div class=\"mb-6 mt-4\">\n <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n </svg>\n Activities\n </h4>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2\">\n <div *ngFor=\"let role of designation.activities; let i = index\"\n class=\"bg-gray-50 p-2 rounded border-l-3 border-indigo-500\">\n <p class=\"text-sm text-gray-700 leading-relaxed\">{{role}}</p>\n </div>\n </div>\n </div>\n <div class=\"page-break\"></div>\n <!-- Competencies -->\n <div class=\"competencis-grid mt-4\">\n <!-- Behavioral -->\n <div class=\"bg-blue-50 rounded-lg p-3 competencies-grid-3\">\n <h4 class=\"font-semibold text-blue-800 text-base mb-2\">Behavioral</h4>\n <div class=\"space-y-1 grid-list-item grid-list-item-behavioral\">\n <div *ngFor=\"let comp of designation.behavioralCompetencies; let i = index\"\n class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-blue-400\">\n {{comp}}\n <div class=\"flex-col-theme\">\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.behavioralSetForProficiencyLevel[i]\"\n class=\"proficiency-tag\"\n [ngClass]=\"designation.behavioralSetForProficiencyLevel[i]?.toLowerCase()\"\n [matTooltip]=\"designation.behavioralSetForProficiencyLevelRationale[i]\"\n >\n {{ designation.behavioralSetForProficiencyLevel[i] }}\n </span>\n\n \n </span>\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.behavioralSetForDeliveryMode[i]\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"designation.behavioralSetForDeliveryMode[i]?.toLowerCase()\"\n [matTooltip]=\"designation.behavioralSetForDeliveryModeRationale[i]\"\n >\n {{ designation.behavioralSetForDeliveryMode[i] }}\n </span>\n\n \n </span>\n </div>\n </div>\n \n </div>\n \n <div class=\"mt-2 text-sm text-blue-600 font-medium\">\n {{designation.behavioralCompetencies.length}} total\n </div>\n </div>\n\n <!-- Functional -->\n <div class=\"bg-green-50 rounded-lg p-3 competencies-grid-3\">\n <h4 class=\"font-semibold text-green-800 text-base mb-2\">Functional</h4>\n <div class=\"space-y-1 grid-list-item grid-list-item-functional\">\n <div *ngFor=\"let comp of designation.functionalCompetencies; let i = index\"\n class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-green-400\">\n {{comp}}\n <div class=\"flex-col-theme\">\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.functionalSetForProficiencyLevel[i]\"\n class=\"proficiency-tag\"\n [ngClass]=\"designation.functionalSetForProficiencyLevel[i]?.toLowerCase()\"\n [matTooltip]=\"designation.functionalSetForProficiencyLevelRationale[i]\"\n >\n {{ designation.functionalSetForProficiencyLevel[i] }}\n </span>\n\n \n </span>\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.functionalSetForDeliveryMode[i]\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"designation.functionalSetForDeliveryMode[i]?.toLowerCase()\"\n [matTooltip]=\"designation.functionalSetForDeliveryModeRationale[i]\"\n >\n {{ designation.functionalSetForDeliveryMode[i] }}\n </span>\n\n \n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-2 text-sm text-green-600 font-medium\">\n {{designation.functionalCompetencies.length}} total\n </div>\n </div>\n\n <!-- Domain -->\n <div class=\"bg-purple-50 rounded-lg p-3 competencies-grid-3\">\n <h4 class=\"font-semibold text-purple-800 text-base mb-2\">Domain</h4>\n <div class=\"space-y-1 grid-list-item grid-list-item-domain\">\n <div *ngFor=\"let comp of designation.domainCompetencies; let i = index\"\n class=\"bg-white p-1.5 rounded text-sm text-gray-700 border-l-2 border-purple-400\">\n {{comp}}\n <div class=\"flex-col-theme\">\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.domainSetForProficiencyLevel[i]\"\n class=\"proficiency-tag\"\n [ngClass]=\"designation.domainSetForProficiencyLevel[i]?.toLowerCase()\"\n [matTooltip]=\"designation.domainSetForProficiencyLevelRationale[i]\"\n >\n {{ designation.domainSetForProficiencyLevel[i] }}\n </span>\n\n \n </span>\n \n <span class=\"competency-tags\">\n <span *ngIf=\"designation.domainSetForDeliveryMode[i]\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"designation.domainSetForDeliveryMode[i]?.toLowerCase()\"\n [matTooltip]=\"designation.domainSetForDeliveryModeRationale[i]\"\n >\n {{ designation.domainSetForDeliveryMode[i] }}\n </span>\n\n \n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-2 text-sm text-purple-600 font-medium\">\n {{designation.domainCompetencies.length}} total\n </div>\n </div>\n </div>\n <!-- Adding courses -->\n <div class=\"cbp mt-4\"\n *ngIf=\"designation.selectedCourses?.length && openedFrom === 'acbp'\">\n <h4 class=\"text-xl font-semibold text-gray-900 mb-3 flex items-center\">\n <svg class=\"h-5 w-5 mr-2 text-indigo-600 icon-sm\" fill=\"none\"\n viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" />\n </svg>\n Courses\n </h4>\n <div class=\"course-list-container\">\n <div class=\"course-list-item\"\n *ngFor=\"let item of designation.selectedCourses; 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\n src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n\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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\n <div class=\"ai-recommened-pill-orange mt-2\"\n *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\"\n *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[0]}}</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 <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\n <div class=\"ai-recommened-pill-orange mt-2\"\n *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\"\n *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[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\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>Manually Suggested - iGOT </span>\n\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"marketplaceTags; context: { $implicit: item }\"></ng-container>\n <div class=\"ai-recommened-pill-orange mt-2\"\n *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\"\n *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[0]}}</span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title mt-4\">\n <div>\n <div *ngIf=\"item?.course\">{{item?.course}}</div>\n <div *ngIf=\"item?.name\">{{item?.name}}</div>\n </div>\n </div>\n <div class=\"course-desc mt-2\">\n <div *ngIf=\"isPDFDownload\">\n <div>{{item?.rationale}}</div>\n </div>\n </div>\n <div class=\"mt-3\"\n *ngIf=\"getCompetenciesByType('Behavioural',item)?.length\">\n <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',item)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName\n }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',item)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',item)\">\n {{ isExpanded('Behavioural',item) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',item) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\"\n *ngIf=\"getCompetenciesByType('Functional',item)?.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',item)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName\n }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',item)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',item)\">\n {{ isExpanded('Functional',item) ? 'Show Less' : '+' +\n getRemainingCount('Functional',item) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',item)?.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',item)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName\n }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',item)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',item)\">\n {{ isExpanded('Domain',item) ? 'Show Less' : '+' +\n getRemainingCount('Domain',item) + ' 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\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\" *ngIf=\"item?.relevancy\">\n {{item?.relevancy}}%</div>\n <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n\n <!-- adding courses -->\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <!-- Footer -->\n\n </div>\n <footer class=\"org-footer\">\n <div class=\"max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-between\">\n <div class=\"flex items-center space-x-4 mb-4 mt-4 md:mb-0 footer-container\">\n <div class=\"footer-logo-container\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"h-10\"\n style=\"margin-left:20px\" />\n </div>\n <div style=\"margin-left: 100px;\">\n <a href=\"https://karmayogibharat.gov.in\" target=\"_blank\" rel=\"noopener noreferrer\"\n class=\"text-sm font-semibold transition-colors\">\n karmayogibharat.gov.in\n </a>\n </div>\n\n\n </div>\n <div class=\"text-sm text-center md:text-right mb-4\" style=\"margin-left: 100px;\">\n <p>© 2025 All Rights Reserved.</p>\n </div>\n </div>\n </footer>\n </div>\n <div class=\"popup-footer\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download as Excel\" (click)=\"downloadCSV()\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download as PDF\"\n (click)=\"downloadPdfFromBE(openedFrom)\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancelForm()\" />\n </div>\n </div>\n </div>\n <div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loader-message\" *ngIf=\"downloadInProgress\">\n Download is in progress. Please wait, this may take a while for large files...\n </div>\n </div>\n\n<!-- Marketplace tags (shown under the AI Recommended / Manually Suggested pill) -->\n<ng-template #marketplaceTags let-course>\n <div class=\"marketplace-tags mt-2\" *ngIf=\"sharedService.getMarketplaceCourseType(course) as marketplaceType\">\n <span class=\"marketplace-tag marketplace\">Marketplace</span>\n <span class=\"marketplace-tag\" [ngClass]=\"marketplaceType\">{{ marketplaceType === 'paid' ? 'Paid' : 'Free' }}</span>\n </div>\n</ng-template>\n", 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: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: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{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:normal;flex-direction:row;gap:16px}.outside-layer-total{display:flex;padding:4px 20px;justify-content:left;align-items:left;gap:6px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8;flex-direction:column;width:25%}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;flex-direction:column;width:25%}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;flex-direction:column;width:25%}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:left;align-items:left;gap:16px;border-radius:12px;border-left:2px solid #F8B861;border-right:2px solid #F8B861;background:#fde8cc;flex-direction:column;width:25%}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;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:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.heading-bg{color:#fff;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:center}.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:center;gap:16px;padding:16px 24px;background-color:#fff;flex-shrink:0;position:sticky;bottom:-15px}.section-container{overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.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}.grid{display:grid;gap:1.5rem}.grid-cols-1{grid-template-columns:repeat(1,1fr)}@media (min-width: 768px){.md\\:grid-cols-2{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4,1fr)}}.kpi-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 14px #0000000d;border-left:4px solid transparent;transition:box-shadow .3s ease}.kpi-card:hover{box-shadow:0 8px 24px #0000001a}.kpi-icon{padding:.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.kpi-text{font-size:1.25rem;font-weight:700}.progress-container{background:#e5e7eb;height:.75rem;border-radius:9999px;margin-top:.5rem}.progress-bar{height:100%;border-radius:9999px;transition:width .4s ease}.competency-block{background-color:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000f;overflow:hidden}.competency-header{padding:1.5rem;background:linear-gradient(to right,#4f46e5,#3b82f6);color:#fff}.competency-header h3{font-size:1.25rem;font-weight:600}.competency-body{padding:1rem}.role-card{background-color:#f9fafb;padding:.5rem;border-left:4px solid #6366f1;border-radius:6px}.role-title{font-size:1rem;font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;color:#1e40af}.comp-section{border-radius:.5rem;padding:.75rem;background-color:#f0f9ff;margin-bottom:1rem}.comp-section h4{font-weight:600;margin-bottom:.5rem}.comp-item{background-color:#fff;border-left:3px solid #3b82f6;padding:.5rem;border-radius:4px;margin-bottom:.25rem;font-size:.875rem}.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}.text-blue-800{color:#1e3a8a}.text-green-800{color:#ff1493}.text-purple-800{color:#6b21a8}.border-blue-400{border-color:#60a5fa}.border-green-400{border-color:#34d399}.border-purple-400{border-color:#c084fc}.text-sm{font-size:.875rem}.text-gray-700{color:#374151}.icon-sm{width:24px;height:24px}.heading-with-bg{background:#4f46e5;padding:24px;border-radius:8px 8px 0 0}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.section-shadow{padding:16px;border-radius:4px;background:#fff;box-shadow:0 2px 4px #0000001a,0 1px 10px #0000000f}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.competency-grid{display:flex;flex-direction:row;gap:16px;justify-content:space-between}.text-blue-600{color:#1b4ca1;font-weight:600}.text-green-600{color:#ff1493;font-weight:600}.text-purple-600{color:#6b21a8;font-weight:600}.horizontal-flex{display:flex;align-items:center;justify-content:space-between;width:100%}.progress-bar{width:100%;height:10px;background-color:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 3px #0003}.progress-bar-fill{height:100%;background-color:#1b4ca1;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-behavioural{height:100%;background-color:#f8b861;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-functional{height:100%;background-color:#e24577;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.progress-bar-fill-domain{height:100%;background-color:#7b47a4;width:0;border-radius:10px 0 0 10px;transition:width .5s ease-in-out}.sub-text{font-size:12px;font-weight:600;font-family:Lato}.competency-count-by-designation{display:flex;gap:10px;flex-direction:row}.competencies-grid-3{width:33%}.grid-list-item div{padding:5px 10px;margin:10px 0}.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}.header-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;gap:30px}.header-border{border-bottom:1px solid #ccc;margin:10px;padding:10px}.text-gray-600{font-family:Lato;font-size:14px;font-weight:600}.image-container .h-10,.image-container .h-15{height:50px}.image-container{display:flex;gap:10px;flex-direction:row}.org-footer{display:flex;flex-direction:row;background:#fff;gap:16px;color:#000;width:100%;justify-content:center;align-items:center;border-top:1px solid #ccc;border-bottom:1px solid #ccc}.dialog-scrollable-content{max-height:70vh;overflow-y:auto}.org-footer a{color:#000!important}h1{font-size:1.75rem!important}@media print{.org-footer,.header-border{page-break-inside:avoid}}.header-border{padding-top:10px;padding-bottom:10px;background-color:#fff}.footer-container{display:flex;justify-content:center;align-items:center;flex-direction:column}.footer-logo-container{display:flex;justify-content:center;align-items:center;flex-direction:row;width:30%}.avoid-page-break{page-break-inside:avoid;break-inside:avoid}.pdf-clean *{box-shadow:none!important;filter:none!important;transform:none!important}.view-cbp-plan.pdf-clean{overflow:visible!important;max-height:none!important}.section-container,.popup-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.section-shadow{page-break-inside:avoid!important;break-inside:avoid!important}.bg-gradient-to-br{background:none!important}.section-container,.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain,.competencis-grid{page-break-inside:avoid}.page-break{page-break-before:always}.cbp .container{margin:10px auto}.cbp .sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal}.cbp .radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.cbp .label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}.cbp ::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}.cbp ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}.cbp ::ng-deep .mat-select-panel{background-color:#fff!important}.cbp ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}.cbp ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}.cbp ::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp ::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}.cbp ::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.cbp .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}.cbp .section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.cbp .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}.cbp .btn-group{display:flex;flex-direction:row;justify-content:space-between}.cbp .pl-2{padding-left:5px}.cbp .search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.cbp .search .rsearch{position:relative}.cbp .search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.cbp .search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.cbp .select-map-route-container{display:flex;flex-direction:row}.cbp .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}.cbp .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}.cbp .search-container{display:flex;flex-direction:row}.cbp .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}.cbp .course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.cbp .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}.cbp .ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.cbp .ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.cbp .ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.cbp .ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.cbp .ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.cbp .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}.cbp .course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.cbp .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}.cbp .relevancy,.cbp .competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.cbp .percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .delete-button input{background-color:#b60a0a;border-radius:10px}.cbp .relevancy-container,.cbp .competencies-matched-container{display:flex;flex-direction:row;align-items:center}.cbp .dash{padding:0 5px}.cbp ::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.cbp .course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.cbp .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}.cbp .course-list-item:hover{box-shadow:0 4px 8px #00000026}.cbp .course-list-item:only-child{flex:1 1 auto;max-width:800px}.cbp .checked-course-container{display:flex;width:60%}.cbp .ml-2{margin-left:8px}.cbp ::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.cbp .igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.cbp .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}.cbp .ai-loader-icon img,.cbp .igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.cbp .competency-container{display:flex;justify-content:normal;gap:16px;flex-direction:row}.cbp .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}.cbp .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}.cbp .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}.cbp .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}.cbp .inside-layer{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.cbp .count{color:#1b4ca1;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.cbp .suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .suggest-course-control{display:flex;flex-direction:row}.cbp .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}.cbp .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}.cbp .ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.cbp .heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.cbp .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}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.cbp .header-left{flex:1}.cbp .header-actions{display:flex;align-items:center;gap:12px}.cbp .regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.cbp .regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.cbp .regenerate-btn .mat-spinner{margin:0}.cbp .regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.cbp .close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.cbp .close-btn:hover{background-color:#f5f5f5}.cbp .close-btn .mat-icon{font-size:20px;width:20px;height:20px}.cbp .progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.cbp .progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .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}.cbp .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}.cbp .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}.cbp .popup-header{display:flex;flex-direction:row;justify-content:space-between}.cbp .popup-footer{display:flex;flex-direction:row;justify-content:end}.cbp .view-cbp-plan{margin:10px;padding:10px}.cbp .view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.cbp .section{border-radius:8px;background:#1b4ca114;padding:16px}.cbp .popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.cbp .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}.cbp .section-container{overflow-y:auto;flex:1 1 auto}.cbp .competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.cbp .competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.cbp .competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.cbp .competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cbp .cursor-pointer{cursor:pointer}.cbp .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}.cbp .custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.cbp .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;gap:16px}.cbp .loader-message{color:#1b4ca1;font-family:Lato;font-size:16px;font-weight:600;text-align:center;padding:0 16px}.cbp .competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.cbp .grid-list-item-behavioral div{border-left:2px solid darkorange}.cbp .grid-list-item-functional div{border-left:2px solid #ff1493}.cbp .grid-list-item-domain div{border-left:2px solid #6b21a8}.cbp .competencies-grid-3{width:33%}.cbp .bg-blue-50{background-color:#fde8cc;border-radius:4px}.cbp .bg-green-50{background-color:#f8d2de;border-radius:4px}.cbp .bg-purple-50{background-color:#dfd3e9;border-radius:4px}.cbp .grid-list-item div{padding:5px 10px;margin:10px 0}.cbp .course-pill-container{display:flex;gap:8px}.cbp .relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.cbp .mt-1{margin-top:.25rem}.cbp .mt-2{margin-top:.5rem}.cbp .mt-3{margin-top:.75rem}.cbp .show-more-competency{display:inline-flex;align-items:center}.cbp .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}.cbp .show-more-link:hover{text-decoration:underline}.cbp .course-content{flex:1;display:flex;flex-direction:column}.cbp .course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}.cbp ::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.cbp .competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.cbp .menu-list-item.active{background-color:#1b4ca1;color:#fff}.cbp .menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.cbp .gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.cbp .div-count{font-family:Lato;font-size:20px;font-weight:700}.cbp .green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.cbp .div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.cbp .div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.cbp .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}.cbp .add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.cbp .list-flex{display:flex;flex-direction:row;justify-content:space-between}.cbp .all-category-list .mat-icon{vertical-align:middle}.cbp .course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.cbp .left-panel{flex:0 0 250px;font-weight:700;text-align:left}.cbp .right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.cbp .category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.cbp .right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.cbp .course-list-container-right-flex{display:flex}.cbp .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}.cbp .no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.cbp .no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.cbp .no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.cbp .section-header-improved{display:flex;flex-direction:column;gap:16px}.cbp .search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.cbp .search-container-compact{flex:0 0 auto;min-width:280px}.cbp .search-container-compact .rsearch{position:relative;display:flex;align-items:center}.cbp .search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.cbp .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}.cbp .search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.cbp .search-container-compact .sinput-compact::placeholder{color:#999}.cbp .btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.cbp .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}.cbp .category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.cbp .category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.cbp .category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.cbp .theme-filter-controls{margin-bottom:8px}.cbp .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}.cbp .clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.cbp .clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.cbp .no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.cbp .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}.cbp .no-course-card .no-course-icon{margin-bottom:20px}.cbp .no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.cbp .no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.cbp .no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.cbp .no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.cbp .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}.cbp .no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.cbp .no-course-card .suggest-course-btn:active{transform:translateY(0)}.cbp .no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.cbp .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){.cbp .search-and-buttons-container{flex-direction:column;align-items:stretch}.cbp .search-container-compact{min-width:auto;width:100%}.cbp .btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.cbp .course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.cbp .course-list-container-flex{flex-direction:column}.cbp .left-panel{flex:none!important;max-height:300px}.cbp .course-list-item{flex:0 0 100%;max-width:100%}.cbp .no-course-card{padding:20px}.cbp .no-course-card .no-course-content h4{font-size:20px}.cbp .no-course-card .no-course-content p{font-size:14px}}.cbp ::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}.cbp ::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}.cbp ::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}.cbp ::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.cbp .download-pdf{justify-content:end;display:flex;flex-direction:row}.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:4px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}::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}.header-container{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin:10px 0}.right-side-container{display:flex;justify-content:space-between;gap:64px}::ng-deep .language-select .mat-select-trigger{font-weight:400!important}::ng-deep .language-select .mat-select-value{color:#fff!important}:host ::ng-deep .select-search-panel .mat-option-text{color:#fff!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:16px;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap}.delivery-mode-tag.online{background:#e6f4ea;color:#1a7f45;border:1px solid #9BD3B0}.delivery-mode-tag.offline{background:#fdf0e3;color:#a2590a;border:1px solid #F0C48A}.delivery-mode-tag.blended{background:#efe9fb;color:#5b21b6;border:1px solid #C9B6F0}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:row;gap:6px}.marketplace-tags{display:flex;flex-wrap:wrap;gap:8px}.marketplace-tag{display:inline-flex;align-items:center;padding:4px 8px;border-radius:4px;font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap}.marketplace-tag.marketplace{background:#3f51b51f;color:#1a237e}.marketplace-tag.free{background:#0080001c;color:#006400}.marketplace-tag.paid{background:#d32f2f1c;color:#8b1a1a}\n"] }]
|
|
13872
14011
|
}], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
13873
14012
|
type: Inject,
|
|
13874
14013
|
args: [MAT_DIALOG_DATA]
|
|
@@ -15614,6 +15753,33 @@ class RoleMappingListComponent {
|
|
|
15614
15753
|
// });
|
|
15615
15754
|
}
|
|
15616
15755
|
sendForApprovalForm() {
|
|
15756
|
+
if (!this.selection.selected.length) {
|
|
15757
|
+
return;
|
|
15758
|
+
}
|
|
15759
|
+
// Same plan the Final CBP shows: the latest cbp_plan of each designation
|
|
15760
|
+
const rows = this.selection.selected.map(row => ({
|
|
15761
|
+
name: row?.designation_name,
|
|
15762
|
+
...this.sharedService.countMarketplaceCourses(row?.cbp_plans?.at(-1)?.selected_courses)
|
|
15763
|
+
}));
|
|
15764
|
+
if (!rows.some(row => row.marketplace > 0)) {
|
|
15765
|
+
this.openApprovalRequestForm();
|
|
15766
|
+
return;
|
|
15767
|
+
}
|
|
15768
|
+
const alertRef = this.dialog.open(MarketplaceCoursesAlertComponent, {
|
|
15769
|
+
width: '680px',
|
|
15770
|
+
maxWidth: '95vw',
|
|
15771
|
+
data: { rows, confirmLabel: 'Proceed' },
|
|
15772
|
+
panelClass: MARKETPLACE_ALERT_PANEL_CLASS,
|
|
15773
|
+
maxHeight: '90vh',
|
|
15774
|
+
disableClose: true
|
|
15775
|
+
});
|
|
15776
|
+
alertRef.afterClosed().subscribe(confirmed => {
|
|
15777
|
+
if (confirmed) {
|
|
15778
|
+
this.openApprovalRequestForm();
|
|
15779
|
+
}
|
|
15780
|
+
});
|
|
15781
|
+
}
|
|
15782
|
+
openApprovalRequestForm() {
|
|
15617
15783
|
console.log('this.selection--', this.selection.selected);
|
|
15618
15784
|
if (this.selection.selected.length) {
|
|
15619
15785
|
const dialogRef = this.dialog.open(ApprovalRequestFormComponent, {
|
|
@@ -15992,6 +16158,7 @@ class AiCbpModule {
|
|
|
15992
16158
|
InitialScreenComponent,
|
|
15993
16159
|
ProgressDialogComponent,
|
|
15994
16160
|
DeleteRoleMappingPopupComponent,
|
|
16161
|
+
MarketplaceCoursesAlertComponent,
|
|
15995
16162
|
ListPopupComponent,
|
|
15996
16163
|
SuggestMoreCoursesComponent,
|
|
15997
16164
|
AddDesignationComponent,
|
|
@@ -16040,6 +16207,7 @@ class AiCbpModule {
|
|
|
16040
16207
|
InitialScreenComponent,
|
|
16041
16208
|
ProgressDialogComponent,
|
|
16042
16209
|
DeleteRoleMappingPopupComponent,
|
|
16210
|
+
MarketplaceCoursesAlertComponent,
|
|
16043
16211
|
ListPopupComponent,
|
|
16044
16212
|
SuggestMoreCoursesComponent,
|
|
16045
16213
|
AddDesignationComponent,
|
|
@@ -16103,6 +16271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
16103
16271
|
InitialScreenComponent,
|
|
16104
16272
|
ProgressDialogComponent,
|
|
16105
16273
|
DeleteRoleMappingPopupComponent,
|
|
16274
|
+
MarketplaceCoursesAlertComponent,
|
|
16106
16275
|
ListPopupComponent,
|
|
16107
16276
|
SuggestMoreCoursesComponent,
|
|
16108
16277
|
AddDesignationComponent,
|
|
@@ -16163,6 +16332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
16163
16332
|
InitialScreenComponent,
|
|
16164
16333
|
ProgressDialogComponent,
|
|
16165
16334
|
DeleteRoleMappingPopupComponent,
|
|
16335
|
+
MarketplaceCoursesAlertComponent,
|
|
16166
16336
|
ListPopupComponent,
|
|
16167
16337
|
SuggestMoreCoursesComponent,
|
|
16168
16338
|
AddDesignationComponent,
|
|
@@ -16195,5 +16365,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
16195
16365
|
* Generated bundle index. Do not edit.
|
|
16196
16366
|
*/
|
|
16197
16367
|
|
|
16198
|
-
export { AddCourseComponent, AddDesignationComponent, AddPersonalisationComponent, AiCbpComponent, AiCbpModule, AiCbpService, ApprovalRequestFormComponent, ApprovalRequestsComponent, DashboardComponent, DeleteRoleMappingComponent, DeleteRoleMappingPopupComponent, DesignationApprovalRequestFormComponent, EditCbpPlanComponent, GapAnalysisRecommendedCourseComponent, GenerateCourseRecommendationComponent, InitialScreenComponent, ListPopupComponent, OrderByNamePipe, ProgressDialogComponent, PublishApproveRequestFormComponent, RegenerateConfirmationDialog, RejectItemRequestFormComponent, RejectRequestFormComponent, ReviewRequestComponent, RoleMappingGenerationComponent, RoleMappingListComponent, SuggestMoreCoursesComponent, UpdateDesignationHierarchyComponent, UploadDialogComponent, UploadDocumentPageComponent, ViewCbpPlanComponent, ViewCourseRecommendationComponent, ViewFinalCbpPlanComponent, futureDateValidator };
|
|
16368
|
+
export { AddCourseComponent, AddDesignationComponent, AddPersonalisationComponent, AiCbpComponent, AiCbpModule, AiCbpService, ApprovalRequestFormComponent, ApprovalRequestsComponent, DashboardComponent, DeleteRoleMappingComponent, DeleteRoleMappingPopupComponent, DesignationApprovalRequestFormComponent, EditCbpPlanComponent, GapAnalysisRecommendedCourseComponent, GenerateCourseRecommendationComponent, InitialScreenComponent, ListPopupComponent, MARKETPLACE_ALERT_PANEL_CLASS, MarketplaceCoursesAlertComponent, OrderByNamePipe, ProgressDialogComponent, PublishApproveRequestFormComponent, RegenerateConfirmationDialog, RejectItemRequestFormComponent, RejectRequestFormComponent, ReviewRequestComponent, RoleMappingGenerationComponent, RoleMappingListComponent, SuggestMoreCoursesComponent, UpdateDesignationHierarchyComponent, UploadDialogComponent, UploadDocumentPageComponent, ViewCbpPlanComponent, ViewCourseRecommendationComponent, ViewFinalCbpPlanComponent, futureDateValidator };
|
|
16199
16369
|
//# sourceMappingURL=sunbird-cb-cbp-ai.mjs.map
|