@sunbird-cb/cbp-ai 0.1.112 → 0.1.114
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/edit-cbp-plan/edit-cbp-plan.component.mjs +3 -3
- package/esm2022/lib/components/role-mapping-list/role-mapping-list.component.mjs +3 -3
- package/esm2022/lib/components/view-cbp-plan/view-cbp-plan.component.mjs +3 -3
- package/esm2022/lib/components/view-final-cbp-plan/view-final-cbp-plan.component.mjs +58 -3
- package/fesm2022/sunbird-cb-cbp-ai.mjs +63 -8
- package/fesm2022/sunbird-cb-cbp-ai.mjs.map +1 -1
- package/lib/components/view-final-cbp-plan/view-final-cbp-plan.component.d.ts.map +1 -1
- package/package.json +1 -1
- package/sunbird-cb-cbp-ai-0.1.114.tgz +0 -0
- package/sunbird-cb-cbp-ai-0.1.112.tgz +0 -0
|
@@ -2496,11 +2496,11 @@ class EditCbpPlanComponent {
|
|
|
2496
2496
|
}
|
|
2497
2497
|
}
|
|
2498
2498
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCbpPlanComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: SharedService }, { token: i3$1.MatSnackBar }, { token: i1.HttpClient }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2499
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditCbpPlanComponent, selector: "app-edit-cbp-plan", viewQueries: [{ propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true }, { propertyName: "designationRef", first: true, predicate: ["designation"], descendants: true, read: ElementRef }, { propertyName: "editSection", first: true, predicate: ["editSection"], descendants: true }], ngImport: i0, template: "<div class=\"view-cbp-plan\" #dialogContent>\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">\n Edit Role Mapping\n <span class=\"text-sm\">\n ({{ cbpForm?.get('designation_name')?.value || planData?.designation_name }})\n </span>\n</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"cbpForm\">\n\n <!-- <div class=\"section-header mt-4\">\n <input type=\"text\" formControlName=\"designation_name\" [value]=\"planData?.designation_name\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width: 100%;font-size: 14px;font-family: 'Lato';\">\n\n\n </div> -->\n\n <mat-form-field appearance=\"outline\" class=\"mt-4 margin-top-s w-full required-select\" style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width: 100%;font-size: 14px;font-family: 'Lato';\">\n <mat-select #designation formControlName=\"designation_name\"\n placeholder=\"Select designation\" (closed)=\"onDesignationDropdownClosed()\"\n panelClass=\"search-panel\" (openedChange)=\"setupScrollListener($event)\"\n >\n\n <!-- Sticky search input container -->\n <div class=\"sticky-search-container\" (click)=\"$event.stopPropagation()\">\n <div class=\"search-input-wrapper\">\n <input type=\"text\" placeholder=\"Search designation\" style=\"width:100%\"\n formControlName=\"searchDesignation\" class=\"search-input\"\n (keydown)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation()\"\n autocomplete=\"off\">\n <!-- (keyup)=\"designationSearch($event)\" -->\n <div *ngIf=\"searchDesignationControl?.value\" type=\"button\" class=\"clear-icon\"\n (click)=\"clearDesignationSearch($event)\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <!-- Options list -->\n <!-- <ng-container *ngFor=\"let designation of masterData?.designation\">\n <mat-option\n *ngIf=\"designation?.name !== planData?.designation_name\"\n [value]=\"designation?.name\">\n {{ designation?.name }}\n </mat-option>\n</ng-container> -->\n<ng-container *ngFor=\"let designation of masterData?.designation\">\n <mat-option\n *ngIf=\"planData?.igot_designation_id || designation?.name !== planData?.designation_name\"\n [value]=\"designation?.name\">\n {{ designation?.name }}\n </mat-option>\n</ng-container>\n <!-- Loading indicator -->\n <div *ngIf=\"isLoadingMoreDesignations\" class=\"loading-indicator\">\n Load More...\n </div>\n <!-- No results message -->\n <mat-option *ngIf=\"(masterData?.designation)?.length === 0 || noMoreLegacyDesignations\" disabled class=\"no-data-option\">\n\n Designation Not Found.\n\n </mat-option>\n \n </mat-select>\n <!-- <mat-error class=\"text-xs\"\n *ngIf=\"designationForm?.get('designation_name')?.touched && designationForm?.get('designation_name')?.invalid\">\n Please select at least one designation.\n </mat-error> -->\n </mat-form-field>\n\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-behavioral\">\n <div class=\"inside-layer\">\n Behavioral Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.behavioral}}\n </div>\n </div>\n <div class=\"outside-layer-functional\">\n <div class=\"inside-layer\">\n Functional Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.functional}}\n </div>\n </div>\n <div class=\"outside-layer-domain\">\n <div class=\"inside-layer\">\n Domain Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.domain}}\n </div>\n </div>\n </div>\n <div class=\"mt-4 section\">\n <div class=\"sub-heading\">\n <p>Wing/Division</p>\n </div>\n <div class=\"mt-4\">\n <input type=\"text\" formControlName=\"wing_division_section\" [value]=\"planData?.wing_division_section\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width:100%;font-size: 14px;font-family: 'Lato';\">\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Roles & Responsibilities</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" formControlName=\"role_responsibilities_text\" rows=\"5\"\n placeholder=\"Roles & Responsibilities\"\n [value]=\"planData?.role_responsibilities?.join('\\n')\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Activities</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" formControlName=\"activities_text\" rows=\"5\"\n placeholder=\"Activities\" [value]=\"planData?.activities?.join('\\n')\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Competency</p>\n </div>\n <div #editSection class=\"enhanced-competency-section mt-2\">\n <!-- Step 1: Select Competency Type -->\n <div class=\"competency-step\">\n <label class=\"step-label\">1. Select Core Competency Type</label>\n <div class=\"competency-dropdown-container\">\n <mat-form-field appearance=\"outline\" class=\"competency-dropdown\">\n <mat-select formControlName=\"competencyType\" placeholder=\"Select Competency Type\"\n (selectionChange)=\"onCompetencyTypeChange($event.value)\">\n <mat-option value=\"Behavioral\">Behavioral</mat-option>\n <mat-option value=\"Functional\">Functional</mat-option>\n <mat-option value=\"Domain\">Domain</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n\n <!-- Step 2: Theme Selection (Behavioral/Functional from JSON, Domain manual) -->\n <div class=\"competency-step\" *ngIf=\"selectedCompetencyType\">\n <label class=\"step-label\">2. Select/Enter Theme</label>\n\n <!-- For Behavioral and Functional: Searchable Dropdown from JSON -->\n <div class=\"competency-dropdown-container\"\n *ngIf=\"selectedCompetencyType === 'Behavioral' || selectedCompetencyType === 'Functional'\">\n <mat-form-field appearance=\"outline\" class=\"competency-dropdown\">\n <mat-select formControlName=\"competencyTheme\" placeholder=\"Search and select theme\"\n (selectionChange)=\"onThemeChange($event.value)\">\n <!-- Search input inside dropdown -->\n <mat-option class=\"search-option\" disabled>\n <mat-form-field appearance=\"outline\" class=\"search-field\">\n <input matInput placeholder=\"Search themes...\" formControlName=\"themeSearch\"\n (input)=\"filterThemes($event.target?.value)\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n </mat-form-field>\n </mat-option>\n\n <!-- Theme options -->\n <mat-option *ngFor=\"let theme of filteredThemes\" [value]=\"theme.name\">\n {{theme.name}}\n </mat-option>\n\n <!-- No results message -->\n <mat-option *ngIf=\"filteredThemes.length === 0 && themeSearchText\" disabled>\n No themes found matching \"{{themeSearchText}}\"\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <!-- For Domain: Manual input -->\n <div class=\"manual-input-container\" *ngIf=\"selectedCompetencyType === 'Domain'\">\n <input type=\"text\" formControlName=\"manualThemeInput\" placeholder=\"Enter Theme manually\"\n class=\"manual-input\" />\n </div>\n </div>\n\n <!-- Step 3: Sub-theme Selection -->\n <div class=\"competency-step\" *ngIf=\"selectedTheme || (selectedCompetencyType === 'Domain')\">\n <label class=\"step-label\">3. Select/Enter Sub-theme</label>\n\n <!-- For Behavioral and Functional: Searchable Dropdown based on selected theme -->\n <div class=\"competency-dropdown-container\"\n *ngIf=\"selectedCompetencyType === 'Behavioral' || selectedCompetencyType === 'Functional'\">\n <mat-form-field appearance=\"outline\" class=\"competency-dropdown\">\n <mat-select formControlName=\"competencySubTheme\"\n placeholder=\"Search and select sub-theme\"\n (selectionChange)=\"onSubThemeChange($event.value)\">\n <!-- Search input inside dropdown -->\n <mat-option class=\"search-option\" disabled>\n <mat-form-field appearance=\"outline\" class=\"search-field\">\n <input matInput placeholder=\"Search sub-themes...\"\n formControlName=\"subThemeSearch\"\n (input)=\"filterSubThemes($event.target.value)\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n </mat-form-field>\n </mat-option>\n\n <!-- Sub-theme options -->\n <mat-option *ngFor=\"let subTheme of filteredSubThemes\" [value]=\"subTheme\">\n {{subTheme}}\n </mat-option>\n\n <!-- No results message -->\n <mat-option *ngIf=\"filteredSubThemes.length === 0 && subThemeSearchText\" disabled>\n No sub-themes found matching \"{{subThemeSearchText}}\"\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <!-- For Domain: Manual input -->\n <div class=\"manual-input-container\" *ngIf=\"selectedCompetencyType === 'Domain'\">\n <input type=\"text\" formControlName=\"manualSubThemeInput\"\n placeholder=\"Enter Sub-theme manually\" class=\"manual-input\" />\n </div>\n </div>\n\n <!-- Add Button -->\n <div class=\"add-button-section\" *ngIf=\"selectedCompetencyType \">\n <button type=\"button\" *ngIf=\"!editDomainCompetencyFlag\" class=\"add-competency-btn\"\n [disabled]=\"!canAddCompetency()\"\n [ngClass]=\"canAddCompetency() ? 'btn-active' : 'btn-disable'\" (click)=\"addCompetency()\">\n Add Competency\n </button>\n <button type=\"button\" *ngIf=\"editDomainCompetencyFlag\" class=\"add-competency-btn btn-active\"\n (click)=\"updateCompetency()\">\n Update Competency\n </button>\n <button type=\"button\" *ngIf=\"editDomainCompetencyFlag\" class=\"add-competency-btn btn-active\"\n style=\"margin-left: 5px;\" (click)=\"cancelUpdate()\">\n Cancel </button>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"competency-sub-heading mt-2\" *ngIf=\"getCompetenciesByType('Behavioral')?.length\">\n Behavioral Competencies\n </div>\n\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item behavioural-pill\"\n *ngFor=\"let comp of getCompetenciesByType('Behavioral')\">\n <span class=\"competency-text-behavioral\">\n {{ comp.theme }} - {{ comp.sub_theme }}\n </span>\n <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"competency-sub-heading mt-2\" *ngIf=\"getCompetenciesByType('Functional')?.length\">\n Functional Competencies</div>\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item functional-pill\"\n *ngFor=\"let comp of getCompetenciesByType('Functional')\">\n <span class=\"competency-text-functional\">\n {{ comp.theme }} - {{ comp.sub_theme }}\n </span>\n <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"competency-sub-heading mt-2\">Domain Competencies</div>\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item domain-pill\" *ngFor=\"let comp of getCompetenciesByType('Domain')\">\n <span class=\"competency-text-domain\">\n {{ comp.theme }} - {{ comp.sub_theme }}\n </span>\n <span class=\"cursor-pointer edit\" (click)=\"editCompetency(comp)\">\n <mat-icon>edit</mat-icon>\n </span>\n <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"popup-footer\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancelForm()\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Save\" (click)=\"saveRoleMapping()\" />\n </div>\n </div>\n </div>\n</div>\n\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 .legacy-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;gap:10px}.legacy-search-filter{display:none}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .sinput{border-radius:4px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato}.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:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8;margin:0 10px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;margin:0 10px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;margin:0 10px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #F8B861;border-right:2px solid #F8B861;background:#fde8cc;margin:0 10px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:24px;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: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:2px 8px;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:2px 8px;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:2px 8px;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:6px}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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:16px;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}.close .mat-icon{height:18px!important;width:18px!important}.edit .mat-icon{height:24px!important;width:24px!important;overflow:visible;vertical-align:middle}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}::ng-deep .filter-section .mat-form-field-appearance-fill .mat-form-field-flex{padding:.5em .75em 0!important}.competency-grid{display:flex;flex-wrap:wrap;gap:12px}.competency-item{flex:0 0 calc(33.333% - 12px);box-sizing:border-box;background-color:#f5f5f5;padding:4px 10px;border-radius:6px;display:flex;justify-content:space-between;align-items:center}.snackbar-success{background-color:#4caf50!important;color:#fff!important;font-weight:500;font-size:14px;border-radius:4px}.enhanced-competency-section{display:flex;flex-direction:column;gap:24px;padding:24px;background:linear-gradient(135deg,#1b4ca105,#1b4ca10f);border-radius:12px;border:1px solid rgba(27,76,161,.15);box-shadow:0 2px 8px #1b4ca114}.competency-step{display:flex;flex-direction:column;gap:12px}.step-label{color:#1b4ca1;font-family:Lato;font-size:15px;font-weight:600;margin-bottom:8px;display:flex;align-items:center}.step-label:before{content:\"\";width:4px;height:16px;background:#1b4ca1;border-radius:2px;margin-right:8px}.competency-dropdown-container,.manual-input-container{width:100%;position:relative}.competency-dropdown{width:100%}.competency-dropdown ::ng-deep .mat-form-field-wrapper{padding:0;margin:0}.competency-dropdown ::ng-deep .mat-form-field-flex{padding:0 16px 0 20px;height:48px;align-items:center;transition:all .3s ease;display:flex;justify-content:space-between}.competency-dropdown ::ng-deep .mat-form-field-flex:hover{border-color:#1b4ca1}.competency-dropdown ::ng-deep .mat-form-field-outline,.competency-dropdown ::ng-deep .mat-form-field-outline-start,.competency-dropdown ::ng-deep .mat-form-field-outline-gap,.competency-dropdown ::ng-deep .mat-form-field-outline-end{display:none}.competency-dropdown ::ng-deep .mat-form-field-infix{padding:0;border:none;height:48px;display:flex;align-items:center;flex:1;width:auto}.competency-dropdown ::ng-deep .mat-select{height:100%;display:flex;align-items:center;font-family:Lato;font-size:14px;color:#333;width:100%;flex:1}.competency-dropdown ::ng-deep .mat-select-value{display:flex;align-items:center;height:100%;color:#333;font-weight:400;flex:1;width:100%;justify-content:flex-start}.competency-dropdown ::ng-deep .mat-select-placeholder{color:#00000080;width:100%;display:flex;align-items:center}.competency-dropdown ::ng-deep .mat-select-value-text{width:100%;display:flex;align-items:center;font-weight:400}.competency-dropdown ::ng-deep .mat-select-arrow-wrapper{height:20px;display:flex;align-items:center;margin-left:8px;flex-shrink:0}.competency-dropdown ::ng-deep .mat-select-arrow-wrapper .mat-select-arrow{color:#1b4ca1;border-top-color:#1b4ca1;margin:0}.competency-dropdown ::ng-deep .mat-form-field-label{display:none}.competency-dropdown ::ng-deep .mat-focused .mat-form-field-flex{border-color:#1b4ca1;box-shadow:0 0 0 3px #1b4ca11a}.competency-dropdown ::ng-deep .mat-select-min-line{line-height:normal}.competency-dropdown ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{padding:0}.competency-dropdown ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0;padding:0}.search-option{pointer-events:auto!important;opacity:1!important}.search-option ::ng-deep .mat-option-text{width:100%;padding:0}.search-field{width:100%;margin:0}.search-field ::ng-deep .mat-form-field-wrapper{padding:0;margin:0}.search-field ::ng-deep .mat-form-field-flex{height:36px;padding:0 12px;align-items:center}.search-field ::ng-deep .mat-form-field-infix{padding:0;border:none;height:36px;display:flex;align-items:center}.search-field ::ng-deep .mat-form-field-underline,.search-field ::ng-deep .mat-form-field-outline{display:none}.search-field ::ng-deep input{font-family:Lato;font-size:13px;color:#495057}.search-field ::ng-deep input::placeholder{color:#6c757d}::ng-deep .mat-select-panel{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid #e0e0e0;max-height:320px;margin-top:4px}::ng-deep .mat-select-panel .mat-option{font-family:Lato;font-size:14px;padding:14px 16px;line-height:1.4;transition:all .2s ease;border-bottom:1px solid rgba(0,0,0,.05)}::ng-deep .mat-select-panel .mat-option:last-child{border-bottom:none}::ng-deep .mat-select-panel .mat-option:hover{background-color:#1b4ca10f;color:#1b4ca1}::ng-deep .mat-select-panel .mat-option.mat-selected{background-color:#1b4ca11a;color:#1b4ca1;font-weight:500;position:relative}::ng-deep .mat-select-panel .mat-option.mat-selected:after{content:\"\\2713\";position:absolute;right:16px;color:#1b4ca1;font-weight:700}::ng-deep .mat-select-panel .mat-option.search-option{padding:12px;background-color:#f8f9fa;border-bottom:2px solid #e9ecef;position:sticky;top:0;z-index:10}::ng-deep .mat-select-panel .mat-option.search-option:hover{background-color:#f8f9fa}.enhanced-competency-section ::ng-deep mat-select{border-radius:0!important;background-color:transparent!important}.enhanced-competency-section ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}.enhanced-competency-section ::ng-deep .mat-select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:auto}.enhanced-competency-section ::ng-deep .mat-form-field-suffix{margin:0;padding:0;display:flex;align-items:center}.manual-input{border-radius:25px;border:2px solid #e0e0e0;padding:12px 16px;width:100%;font-size:14px;font-family:Lato;background:#fff;height:48px;box-sizing:border-box;transition:all .3s ease;box-shadow:0 2px 4px #0000000d}.manual-input::placeholder{color:#00000080;font-family:Lato;font-size:14px}.manual-input:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 3px #1b4ca11a}.manual-input:hover{border-color:#1b4ca1;box-shadow:0 4px 8px #1b4ca11a}.add-button-section{display:flex;justify-content:flex-start;margin-top:20px;padding-top:20px;border-top:2px solid rgba(27,76,161,.1)}.add-competency-btn{border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #0000001a;min-width:140px}.add-competency-btn.btn-active{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff}.add-competency-btn.btn-active:hover{background:linear-gradient(135deg,#164080,#0f2f5f);box-shadow:0 4px 16px #1b4ca14d;transform:translateY(-1px)}.add-competency-btn.btn-active:active{transform:translateY(0);box-shadow:0 2px 8px #1b4ca133}.add-competency-btn.btn-disable{background:#e9ecef;color:#6c757d;cursor:not-allowed;opacity:.7;box-shadow:none;border:1px solid #ccc}:host ::ng-deep .mat-select-panel.search-panel{max-height:300px!important;overflow-y:auto!important;box-sizing:border-box}::ng-deep .search-panel .sticky-search-container{position:sticky;top:0;z-index:100;background:#fff;padding:8px;border-bottom:1px solid #eee}:host ::ng-deep .search-panel .search-input-wrapper{display:flex;gap:8px;align-items:center}:host ::ng-deep .search-panel .search-input{width:100%;height:32px;padding:6px 10px}:host ::ng-deep .search-panel .mat-option{padding:8px 16px!important}:host ::ng-deep .search-panel .mat-pseudo-checkbox{margin-right:8px}:host ::ng-deep .search-panel .no-data-option{padding:10px 16px;font-size:14px;color:#f44336}::ng-deep .search-panel .no-data-option .mat-pseudo-checkbox{display:none!important}.search-input-wrapper{position:relative;width:100%;display:flex;align-items:center}.search-input{width:100%;padding-right:40px;height:40px;line-height:40px;box-sizing:border-box}.clear-icon{position:absolute;right:10px;cursor:pointer;font-size:20px;color:#666;display:flex;align-items:center;height:100%}.clear-icon:hover{color:#000}:host ::ng-deep .search-panel .mat-option:first-child{margin-top:0}:host ::ng-deep .mat-notched-outline{border-radius:25px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:30px;align-items:center;padding:0 16px;background:#fff}\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.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: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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"] }] }); }
|
|
2499
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditCbpPlanComponent, selector: "app-edit-cbp-plan", viewQueries: [{ propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true }, { propertyName: "designationRef", first: true, predicate: ["designation"], descendants: true, read: ElementRef }, { propertyName: "editSection", first: true, predicate: ["editSection"], descendants: true }], ngImport: i0, template: "<div class=\"view-cbp-plan\" #dialogContent>\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">\n Edit Role Mapping\n <span class=\"text-sm\">\n ({{ cbpForm?.get('designation_name')?.value || planData?.designation_name }})\n </span>\n</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"cbpForm\">\n\n <!-- <div class=\"section-header mt-4\">\n <input type=\"text\" formControlName=\"designation_name\" [value]=\"planData?.designation_name\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width: 100%;font-size: 14px;font-family: 'Lato';\">\n\n\n </div> -->\n\n <mat-form-field appearance=\"outline\" class=\"mt-4 margin-top-s w-full required-select\" style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width: 100%;font-size: 14px;font-family: 'Lato';\">\n <mat-select #designation formControlName=\"designation_name\"\n placeholder=\"Select designation\" (closed)=\"onDesignationDropdownClosed()\"\n panelClass=\"search-panel\" (openedChange)=\"setupScrollListener($event)\"\n >\n\n <!-- Sticky search input container -->\n <div class=\"sticky-search-container\" (click)=\"$event.stopPropagation()\">\n <div class=\"search-input-wrapper\">\n <input type=\"text\" placeholder=\"Search designation\" style=\"width:100%\"\n formControlName=\"searchDesignation\" class=\"search-input\"\n (keydown)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation()\"\n autocomplete=\"off\">\n <!-- (keyup)=\"designationSearch($event)\" -->\n <div *ngIf=\"searchDesignationControl?.value\" type=\"button\" class=\"clear-icon\"\n (click)=\"clearDesignationSearch($event)\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <!-- Options list -->\n <!-- <ng-container *ngFor=\"let designation of masterData?.designation\">\n <mat-option\n *ngIf=\"designation?.name !== planData?.designation_name\"\n [value]=\"designation?.name\">\n {{ designation?.name }}\n </mat-option>\n</ng-container> -->\n<ng-container *ngFor=\"let designation of masterData?.designation\">\n <mat-option\n *ngIf=\"planData?.igot_designation_id || designation?.name !== planData?.designation_name\"\n [value]=\"designation?.name\">\n {{ designation?.name }}\n </mat-option>\n</ng-container>\n <!-- Loading indicator -->\n <div *ngIf=\"isLoadingMoreDesignations\" class=\"loading-indicator\">\n Load More...\n </div>\n <!-- No results message -->\n <mat-option *ngIf=\"(masterData?.designation)?.length === 0 || noMoreLegacyDesignations\" disabled class=\"no-data-option\">\n\n Designation Not Found.\n\n </mat-option>\n \n </mat-select>\n <!-- <mat-error class=\"text-xs\"\n *ngIf=\"designationForm?.get('designation_name')?.touched && designationForm?.get('designation_name')?.invalid\">\n Please select at least one designation.\n </mat-error> -->\n </mat-form-field>\n\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-behavioral\">\n <div class=\"inside-layer\">\n Behavioral Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.behavioral}}\n </div>\n </div>\n <div class=\"outside-layer-functional\">\n <div class=\"inside-layer\">\n Functional Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.functional}}\n </div>\n </div>\n <div class=\"outside-layer-domain\">\n <div class=\"inside-layer\">\n Domain Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.domain}}\n </div>\n </div>\n </div>\n <div class=\"mt-4 section\">\n <div class=\"sub-heading\">\n <p>Wing/Division</p>\n </div>\n <div class=\"mt-4\">\n <input type=\"text\" formControlName=\"wing_division_section\" [value]=\"planData?.wing_division_section\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width:100%;font-size: 14px;font-family: 'Lato';\">\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Roles & Responsibilities</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" formControlName=\"role_responsibilities_text\" rows=\"5\"\n placeholder=\"Roles & Responsibilities\"\n [value]=\"planData?.role_responsibilities?.join('\\n')\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Activities</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" formControlName=\"activities_text\" rows=\"5\"\n placeholder=\"Activities\" [value]=\"planData?.activities?.join('\\n')\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Competency</p>\n </div>\n <div #editSection class=\"enhanced-competency-section mt-2\">\n <!-- Step 1: Select Competency Type -->\n <div class=\"competency-step\">\n <label class=\"step-label\">1. Select Core Competency Type</label>\n <div class=\"competency-dropdown-container\">\n <mat-form-field appearance=\"outline\" class=\"competency-dropdown\">\n <mat-select formControlName=\"competencyType\" placeholder=\"Select Competency Type\"\n (selectionChange)=\"onCompetencyTypeChange($event.value)\">\n <mat-option value=\"Behavioral\">Behavioral</mat-option>\n <mat-option value=\"Functional\">Functional</mat-option>\n <mat-option value=\"Domain\">Domain</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n\n <!-- Step 2: Theme Selection (Behavioral/Functional from JSON, Domain manual) -->\n <div class=\"competency-step\" *ngIf=\"selectedCompetencyType\">\n <label class=\"step-label\">2. Select/Enter Theme</label>\n\n <!-- For Behavioral and Functional: Searchable Dropdown from JSON -->\n <div class=\"competency-dropdown-container\"\n *ngIf=\"selectedCompetencyType === 'Behavioral' || selectedCompetencyType === 'Functional'\">\n <mat-form-field appearance=\"outline\" class=\"competency-dropdown\">\n <mat-select formControlName=\"competencyTheme\" placeholder=\"Search and select theme\"\n (selectionChange)=\"onThemeChange($event.value)\">\n <!-- Search input inside dropdown -->\n <mat-option class=\"search-option\" disabled>\n <mat-form-field appearance=\"outline\" class=\"search-field\">\n <input matInput placeholder=\"Search themes...\" formControlName=\"themeSearch\"\n (input)=\"filterThemes($event.target?.value)\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n </mat-form-field>\n </mat-option>\n\n <!-- Theme options -->\n <mat-option *ngFor=\"let theme of filteredThemes\" [value]=\"theme.name\">\n {{theme.name}}\n </mat-option>\n\n <!-- No results message -->\n <mat-option *ngIf=\"filteredThemes.length === 0 && themeSearchText\" disabled>\n No themes found matching \"{{themeSearchText}}\"\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <!-- For Domain: Manual input -->\n <div class=\"manual-input-container\" *ngIf=\"selectedCompetencyType === 'Domain'\">\n <input type=\"text\" formControlName=\"manualThemeInput\" placeholder=\"Enter Theme manually\"\n class=\"manual-input\" />\n </div>\n </div>\n\n <!-- Step 3: Sub-theme Selection -->\n <div class=\"competency-step\" *ngIf=\"selectedTheme || (selectedCompetencyType === 'Domain')\">\n <label class=\"step-label\">3. Select/Enter Sub-theme</label>\n\n <!-- For Behavioral and Functional: Searchable Dropdown based on selected theme -->\n <div class=\"competency-dropdown-container\"\n *ngIf=\"selectedCompetencyType === 'Behavioral' || selectedCompetencyType === 'Functional'\">\n <mat-form-field appearance=\"outline\" class=\"competency-dropdown\">\n <mat-select formControlName=\"competencySubTheme\"\n placeholder=\"Search and select sub-theme\"\n (selectionChange)=\"onSubThemeChange($event.value)\">\n <!-- Search input inside dropdown -->\n <mat-option class=\"search-option\" disabled>\n <mat-form-field appearance=\"outline\" class=\"search-field\">\n <input matInput placeholder=\"Search sub-themes...\"\n formControlName=\"subThemeSearch\"\n (input)=\"filterSubThemes($event.target.value)\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n </mat-form-field>\n </mat-option>\n\n <!-- Sub-theme options -->\n <mat-option *ngFor=\"let subTheme of filteredSubThemes\" [value]=\"subTheme\">\n {{subTheme}}\n </mat-option>\n\n <!-- No results message -->\n <mat-option *ngIf=\"filteredSubThemes.length === 0 && subThemeSearchText\" disabled>\n No sub-themes found matching \"{{subThemeSearchText}}\"\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <!-- For Domain: Manual input -->\n <div class=\"manual-input-container\" *ngIf=\"selectedCompetencyType === 'Domain'\">\n <input type=\"text\" formControlName=\"manualSubThemeInput\"\n placeholder=\"Enter Sub-theme manually\" class=\"manual-input\" />\n </div>\n </div>\n\n <!-- Add Button -->\n <div class=\"add-button-section\" *ngIf=\"selectedCompetencyType \">\n <button type=\"button\" *ngIf=\"!editDomainCompetencyFlag\" class=\"add-competency-btn\"\n [disabled]=\"!canAddCompetency()\"\n [ngClass]=\"canAddCompetency() ? 'btn-active' : 'btn-disable'\" (click)=\"addCompetency()\">\n Add Competency\n </button>\n <button type=\"button\" *ngIf=\"editDomainCompetencyFlag\" class=\"add-competency-btn btn-active\"\n (click)=\"updateCompetency()\">\n Update Competency\n </button>\n <button type=\"button\" *ngIf=\"editDomainCompetencyFlag\" class=\"add-competency-btn btn-active\"\n style=\"margin-left: 5px;\" (click)=\"cancelUpdate()\">\n Cancel </button>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"competency-sub-heading mt-2\" *ngIf=\"getCompetenciesByType('Behavioral')?.length\">\n Behavioral Competencies\n </div>\n\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item behavioural-pill\"\n *ngFor=\"let comp of getCompetenciesByType('Behavioral')\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"competency-sub-heading mt-2\" *ngIf=\"getCompetenciesByType('Functional')?.length\">\n Functional Competencies</div>\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item functional-pill\"\n *ngFor=\"let comp of getCompetenciesByType('Functional')\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"competency-sub-heading mt-2\">Domain Competencies</div>\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item domain-pill\" *ngFor=\"let comp of getCompetenciesByType('Domain')\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n <span class=\"cursor-pointer edit\" (click)=\"editCompetency(comp)\">\n <mat-icon>edit</mat-icon>\n </span>\n <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"popup-footer\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancelForm()\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Save\" (click)=\"saveRoleMapping()\" />\n </div>\n </div>\n </div>\n</div>\n\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 .legacy-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;gap:10px}.legacy-search-filter{display:none}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .sinput{border-radius:4px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato}.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:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8;margin:0 10px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;margin:0 10px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;margin:0 10px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #F8B861;border-right:2px solid #F8B861;background:#fde8cc;margin:0 10px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:24px;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: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:2px 8px;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:2px 8px;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:2px 8px;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:6px}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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:16px;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}.close .mat-icon{height:18px!important;width:18px!important}.edit .mat-icon{height:24px!important;width:24px!important;overflow:visible;vertical-align:middle}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}::ng-deep .filter-section .mat-form-field-appearance-fill .mat-form-field-flex{padding:.5em .75em 0!important}.competency-grid{display:flex;flex-wrap:wrap;gap:12px}.competency-item{flex:0 0 calc(33.333% - 12px);box-sizing:border-box;background-color:#f5f5f5;padding:4px 10px;border-radius:6px;display:flex;justify-content:space-between;align-items:center}.snackbar-success{background-color:#4caf50!important;color:#fff!important;font-weight:500;font-size:14px;border-radius:4px}.enhanced-competency-section{display:flex;flex-direction:column;gap:24px;padding:24px;background:linear-gradient(135deg,#1b4ca105,#1b4ca10f);border-radius:12px;border:1px solid rgba(27,76,161,.15);box-shadow:0 2px 8px #1b4ca114}.competency-step{display:flex;flex-direction:column;gap:12px}.step-label{color:#1b4ca1;font-family:Lato;font-size:15px;font-weight:600;margin-bottom:8px;display:flex;align-items:center}.step-label:before{content:\"\";width:4px;height:16px;background:#1b4ca1;border-radius:2px;margin-right:8px}.competency-dropdown-container,.manual-input-container{width:100%;position:relative}.competency-dropdown{width:100%}.competency-dropdown ::ng-deep .mat-form-field-wrapper{padding:0;margin:0}.competency-dropdown ::ng-deep .mat-form-field-flex{padding:0 16px 0 20px;height:48px;align-items:center;transition:all .3s ease;display:flex;justify-content:space-between}.competency-dropdown ::ng-deep .mat-form-field-flex:hover{border-color:#1b4ca1}.competency-dropdown ::ng-deep .mat-form-field-outline,.competency-dropdown ::ng-deep .mat-form-field-outline-start,.competency-dropdown ::ng-deep .mat-form-field-outline-gap,.competency-dropdown ::ng-deep .mat-form-field-outline-end{display:none}.competency-dropdown ::ng-deep .mat-form-field-infix{padding:0;border:none;height:48px;display:flex;align-items:center;flex:1;width:auto}.competency-dropdown ::ng-deep .mat-select{height:100%;display:flex;align-items:center;font-family:Lato;font-size:14px;color:#333;width:100%;flex:1}.competency-dropdown ::ng-deep .mat-select-value{display:flex;align-items:center;height:100%;color:#333;font-weight:400;flex:1;width:100%;justify-content:flex-start}.competency-dropdown ::ng-deep .mat-select-placeholder{color:#00000080;width:100%;display:flex;align-items:center}.competency-dropdown ::ng-deep .mat-select-value-text{width:100%;display:flex;align-items:center;font-weight:400}.competency-dropdown ::ng-deep .mat-select-arrow-wrapper{height:20px;display:flex;align-items:center;margin-left:8px;flex-shrink:0}.competency-dropdown ::ng-deep .mat-select-arrow-wrapper .mat-select-arrow{color:#1b4ca1;border-top-color:#1b4ca1;margin:0}.competency-dropdown ::ng-deep .mat-form-field-label{display:none}.competency-dropdown ::ng-deep .mat-focused .mat-form-field-flex{border-color:#1b4ca1;box-shadow:0 0 0 3px #1b4ca11a}.competency-dropdown ::ng-deep .mat-select-min-line{line-height:normal}.competency-dropdown ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{padding:0}.competency-dropdown ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0;padding:0}.search-option{pointer-events:auto!important;opacity:1!important}.search-option ::ng-deep .mat-option-text{width:100%;padding:0}.search-field{width:100%;margin:0}.search-field ::ng-deep .mat-form-field-wrapper{padding:0;margin:0}.search-field ::ng-deep .mat-form-field-flex{height:36px;padding:0 12px;align-items:center}.search-field ::ng-deep .mat-form-field-infix{padding:0;border:none;height:36px;display:flex;align-items:center}.search-field ::ng-deep .mat-form-field-underline,.search-field ::ng-deep .mat-form-field-outline{display:none}.search-field ::ng-deep input{font-family:Lato;font-size:13px;color:#495057}.search-field ::ng-deep input::placeholder{color:#6c757d}::ng-deep .mat-select-panel{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid #e0e0e0;max-height:320px;margin-top:4px}::ng-deep .mat-select-panel .mat-option{font-family:Lato;font-size:14px;padding:14px 16px;line-height:1.4;transition:all .2s ease;border-bottom:1px solid rgba(0,0,0,.05)}::ng-deep .mat-select-panel .mat-option:last-child{border-bottom:none}::ng-deep .mat-select-panel .mat-option:hover{background-color:#1b4ca10f;color:#1b4ca1}::ng-deep .mat-select-panel .mat-option.mat-selected{background-color:#1b4ca11a;color:#1b4ca1;font-weight:500;position:relative}::ng-deep .mat-select-panel .mat-option.mat-selected:after{content:\"\\2713\";position:absolute;right:16px;color:#1b4ca1;font-weight:700}::ng-deep .mat-select-panel .mat-option.search-option{padding:12px;background-color:#f8f9fa;border-bottom:2px solid #e9ecef;position:sticky;top:0;z-index:10}::ng-deep .mat-select-panel .mat-option.search-option:hover{background-color:#f8f9fa}.enhanced-competency-section ::ng-deep mat-select{border-radius:0!important;background-color:transparent!important}.enhanced-competency-section ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}.enhanced-competency-section ::ng-deep .mat-select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:auto}.enhanced-competency-section ::ng-deep .mat-form-field-suffix{margin:0;padding:0;display:flex;align-items:center}.manual-input{border-radius:25px;border:2px solid #e0e0e0;padding:12px 16px;width:100%;font-size:14px;font-family:Lato;background:#fff;height:48px;box-sizing:border-box;transition:all .3s ease;box-shadow:0 2px 4px #0000000d}.manual-input::placeholder{color:#00000080;font-family:Lato;font-size:14px}.manual-input:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 3px #1b4ca11a}.manual-input:hover{border-color:#1b4ca1;box-shadow:0 4px 8px #1b4ca11a}.add-button-section{display:flex;justify-content:flex-start;margin-top:20px;padding-top:20px;border-top:2px solid rgba(27,76,161,.1)}.add-competency-btn{border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #0000001a;min-width:140px}.add-competency-btn.btn-active{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff}.add-competency-btn.btn-active:hover{background:linear-gradient(135deg,#164080,#0f2f5f);box-shadow:0 4px 16px #1b4ca14d;transform:translateY(-1px)}.add-competency-btn.btn-active:active{transform:translateY(0);box-shadow:0 2px 8px #1b4ca133}.add-competency-btn.btn-disable{background:#e9ecef;color:#6c757d;cursor:not-allowed;opacity:.7;box-shadow:none;border:1px solid #ccc}:host ::ng-deep .mat-select-panel.search-panel{max-height:300px!important;overflow-y:auto!important;box-sizing:border-box}::ng-deep .search-panel .sticky-search-container{position:sticky;top:0;z-index:100;background:#fff;padding:8px;border-bottom:1px solid #eee}:host ::ng-deep .search-panel .search-input-wrapper{display:flex;gap:8px;align-items:center}:host ::ng-deep .search-panel .search-input{width:100%;height:32px;padding:6px 10px}:host ::ng-deep .search-panel .mat-option{padding:8px 16px!important}:host ::ng-deep .search-panel .mat-pseudo-checkbox{margin-right:8px}:host ::ng-deep .search-panel .no-data-option{padding:10px 16px;font-size:14px;color:#f44336}::ng-deep .search-panel .no-data-option .mat-pseudo-checkbox{display:none!important}.search-input-wrapper{position:relative;width:100%;display:flex;align-items:center}.search-input{width:100%;padding-right:40px;height:40px;line-height:40px;box-sizing:border-box}.clear-icon{position:absolute;right:10px;cursor:pointer;font-size:20px;color:#666;display:flex;align-items:center;height:100%}.clear-icon:hover{color:#000}:host ::ng-deep .search-panel .mat-option:first-child{margin-top:0}:host ::ng-deep .mat-notched-outline{border-radius:25px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:30px;align-items:center;padding:0 16px;background:#fff}.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}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { 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"] }] }); }
|
|
2500
2500
|
}
|
|
2501
2501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCbpPlanComponent, decorators: [{
|
|
2502
2502
|
type: Component,
|
|
2503
|
-
args: [{ selector: 'app-edit-cbp-plan', template: "<div class=\"view-cbp-plan\" #dialogContent>\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">\n Edit Role Mapping\n <span class=\"text-sm\">\n ({{ cbpForm?.get('designation_name')?.value || planData?.designation_name }})\n </span>\n</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"cbpForm\">\n\n <!-- <div class=\"section-header mt-4\">\n <input type=\"text\" formControlName=\"designation_name\" [value]=\"planData?.designation_name\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width: 100%;font-size: 14px;font-family: 'Lato';\">\n\n\n </div> -->\n\n <mat-form-field appearance=\"outline\" class=\"mt-4 margin-top-s w-full required-select\" style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width: 100%;font-size: 14px;font-family: 'Lato';\">\n <mat-select #designation formControlName=\"designation_name\"\n placeholder=\"Select designation\" (closed)=\"onDesignationDropdownClosed()\"\n panelClass=\"search-panel\" (openedChange)=\"setupScrollListener($event)\"\n >\n\n <!-- Sticky search input container -->\n <div class=\"sticky-search-container\" (click)=\"$event.stopPropagation()\">\n <div class=\"search-input-wrapper\">\n <input type=\"text\" placeholder=\"Search designation\" style=\"width:100%\"\n formControlName=\"searchDesignation\" class=\"search-input\"\n (keydown)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation()\"\n autocomplete=\"off\">\n <!-- (keyup)=\"designationSearch($event)\" -->\n <div *ngIf=\"searchDesignationControl?.value\" type=\"button\" class=\"clear-icon\"\n (click)=\"clearDesignationSearch($event)\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <!-- Options list -->\n <!-- <ng-container *ngFor=\"let designation of masterData?.designation\">\n <mat-option\n *ngIf=\"designation?.name !== planData?.designation_name\"\n [value]=\"designation?.name\">\n {{ designation?.name }}\n </mat-option>\n</ng-container> -->\n<ng-container *ngFor=\"let designation of masterData?.designation\">\n <mat-option\n *ngIf=\"planData?.igot_designation_id || designation?.name !== planData?.designation_name\"\n [value]=\"designation?.name\">\n {{ designation?.name }}\n </mat-option>\n</ng-container>\n <!-- Loading indicator -->\n <div *ngIf=\"isLoadingMoreDesignations\" class=\"loading-indicator\">\n Load More...\n </div>\n <!-- No results message -->\n <mat-option *ngIf=\"(masterData?.designation)?.length === 0 || noMoreLegacyDesignations\" disabled class=\"no-data-option\">\n\n Designation Not Found.\n\n </mat-option>\n \n </mat-select>\n <!-- <mat-error class=\"text-xs\"\n *ngIf=\"designationForm?.get('designation_name')?.touched && designationForm?.get('designation_name')?.invalid\">\n Please select at least one designation.\n </mat-error> -->\n </mat-form-field>\n\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-behavioral\">\n <div class=\"inside-layer\">\n Behavioral Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.behavioral}}\n </div>\n </div>\n <div class=\"outside-layer-functional\">\n <div class=\"inside-layer\">\n Functional Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.functional}}\n </div>\n </div>\n <div class=\"outside-layer-domain\">\n <div class=\"inside-layer\">\n Domain Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.domain}}\n </div>\n </div>\n </div>\n <div class=\"mt-4 section\">\n <div class=\"sub-heading\">\n <p>Wing/Division</p>\n </div>\n <div class=\"mt-4\">\n <input type=\"text\" formControlName=\"wing_division_section\" [value]=\"planData?.wing_division_section\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width:100%;font-size: 14px;font-family: 'Lato';\">\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Roles & Responsibilities</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" formControlName=\"role_responsibilities_text\" rows=\"5\"\n placeholder=\"Roles & Responsibilities\"\n [value]=\"planData?.role_responsibilities?.join('\\n')\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Activities</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" formControlName=\"activities_text\" rows=\"5\"\n placeholder=\"Activities\" [value]=\"planData?.activities?.join('\\n')\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Competency</p>\n </div>\n <div #editSection class=\"enhanced-competency-section mt-2\">\n <!-- Step 1: Select Competency Type -->\n <div class=\"competency-step\">\n <label class=\"step-label\">1. Select Core Competency Type</label>\n <div class=\"competency-dropdown-container\">\n <mat-form-field appearance=\"outline\" class=\"competency-dropdown\">\n <mat-select formControlName=\"competencyType\" placeholder=\"Select Competency Type\"\n (selectionChange)=\"onCompetencyTypeChange($event.value)\">\n <mat-option value=\"Behavioral\">Behavioral</mat-option>\n <mat-option value=\"Functional\">Functional</mat-option>\n <mat-option value=\"Domain\">Domain</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n\n <!-- Step 2: Theme Selection (Behavioral/Functional from JSON, Domain manual) -->\n <div class=\"competency-step\" *ngIf=\"selectedCompetencyType\">\n <label class=\"step-label\">2. Select/Enter Theme</label>\n\n <!-- For Behavioral and Functional: Searchable Dropdown from JSON -->\n <div class=\"competency-dropdown-container\"\n *ngIf=\"selectedCompetencyType === 'Behavioral' || selectedCompetencyType === 'Functional'\">\n <mat-form-field appearance=\"outline\" class=\"competency-dropdown\">\n <mat-select formControlName=\"competencyTheme\" placeholder=\"Search and select theme\"\n (selectionChange)=\"onThemeChange($event.value)\">\n <!-- Search input inside dropdown -->\n <mat-option class=\"search-option\" disabled>\n <mat-form-field appearance=\"outline\" class=\"search-field\">\n <input matInput placeholder=\"Search themes...\" formControlName=\"themeSearch\"\n (input)=\"filterThemes($event.target?.value)\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n </mat-form-field>\n </mat-option>\n\n <!-- Theme options -->\n <mat-option *ngFor=\"let theme of filteredThemes\" [value]=\"theme.name\">\n {{theme.name}}\n </mat-option>\n\n <!-- No results message -->\n <mat-option *ngIf=\"filteredThemes.length === 0 && themeSearchText\" disabled>\n No themes found matching \"{{themeSearchText}}\"\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <!-- For Domain: Manual input -->\n <div class=\"manual-input-container\" *ngIf=\"selectedCompetencyType === 'Domain'\">\n <input type=\"text\" formControlName=\"manualThemeInput\" placeholder=\"Enter Theme manually\"\n class=\"manual-input\" />\n </div>\n </div>\n\n <!-- Step 3: Sub-theme Selection -->\n <div class=\"competency-step\" *ngIf=\"selectedTheme || (selectedCompetencyType === 'Domain')\">\n <label class=\"step-label\">3. Select/Enter Sub-theme</label>\n\n <!-- For Behavioral and Functional: Searchable Dropdown based on selected theme -->\n <div class=\"competency-dropdown-container\"\n *ngIf=\"selectedCompetencyType === 'Behavioral' || selectedCompetencyType === 'Functional'\">\n <mat-form-field appearance=\"outline\" class=\"competency-dropdown\">\n <mat-select formControlName=\"competencySubTheme\"\n placeholder=\"Search and select sub-theme\"\n (selectionChange)=\"onSubThemeChange($event.value)\">\n <!-- Search input inside dropdown -->\n <mat-option class=\"search-option\" disabled>\n <mat-form-field appearance=\"outline\" class=\"search-field\">\n <input matInput placeholder=\"Search sub-themes...\"\n formControlName=\"subThemeSearch\"\n (input)=\"filterSubThemes($event.target.value)\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n </mat-form-field>\n </mat-option>\n\n <!-- Sub-theme options -->\n <mat-option *ngFor=\"let subTheme of filteredSubThemes\" [value]=\"subTheme\">\n {{subTheme}}\n </mat-option>\n\n <!-- No results message -->\n <mat-option *ngIf=\"filteredSubThemes.length === 0 && subThemeSearchText\" disabled>\n No sub-themes found matching \"{{subThemeSearchText}}\"\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <!-- For Domain: Manual input -->\n <div class=\"manual-input-container\" *ngIf=\"selectedCompetencyType === 'Domain'\">\n <input type=\"text\" formControlName=\"manualSubThemeInput\"\n placeholder=\"Enter Sub-theme manually\" class=\"manual-input\" />\n </div>\n </div>\n\n <!-- Add Button -->\n <div class=\"add-button-section\" *ngIf=\"selectedCompetencyType \">\n <button type=\"button\" *ngIf=\"!editDomainCompetencyFlag\" class=\"add-competency-btn\"\n [disabled]=\"!canAddCompetency()\"\n [ngClass]=\"canAddCompetency() ? 'btn-active' : 'btn-disable'\" (click)=\"addCompetency()\">\n Add Competency\n </button>\n <button type=\"button\" *ngIf=\"editDomainCompetencyFlag\" class=\"add-competency-btn btn-active\"\n (click)=\"updateCompetency()\">\n Update Competency\n </button>\n <button type=\"button\" *ngIf=\"editDomainCompetencyFlag\" class=\"add-competency-btn btn-active\"\n style=\"margin-left: 5px;\" (click)=\"cancelUpdate()\">\n Cancel </button>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"competency-sub-heading mt-2\" *ngIf=\"getCompetenciesByType('Behavioral')?.length\">\n Behavioral Competencies\n </div>\n\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item behavioural-pill\"\n *ngFor=\"let comp of getCompetenciesByType('Behavioral')\">\n <span class=\"competency-text-behavioral\">\n {{ comp.theme }} - {{ comp.sub_theme }}\n </span>\n <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"competency-sub-heading mt-2\" *ngIf=\"getCompetenciesByType('Functional')?.length\">\n Functional Competencies</div>\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item functional-pill\"\n *ngFor=\"let comp of getCompetenciesByType('Functional')\">\n <span class=\"competency-text-functional\">\n {{ comp.theme }} - {{ comp.sub_theme }}\n </span>\n <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"competency-sub-heading mt-2\">Domain Competencies</div>\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item domain-pill\" *ngFor=\"let comp of getCompetenciesByType('Domain')\">\n <span class=\"competency-text-domain\">\n {{ comp.theme }} - {{ comp.sub_theme }}\n </span>\n <span class=\"cursor-pointer edit\" (click)=\"editCompetency(comp)\">\n <mat-icon>edit</mat-icon>\n </span>\n <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"popup-footer\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancelForm()\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Save\" (click)=\"saveRoleMapping()\" />\n </div>\n </div>\n </div>\n</div>\n\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 .legacy-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;gap:10px}.legacy-search-filter{display:none}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .sinput{border-radius:4px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato}.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:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8;margin:0 10px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;margin:0 10px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;margin:0 10px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #F8B861;border-right:2px solid #F8B861;background:#fde8cc;margin:0 10px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:24px;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: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:2px 8px;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:2px 8px;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:2px 8px;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:6px}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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:16px;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}.close .mat-icon{height:18px!important;width:18px!important}.edit .mat-icon{height:24px!important;width:24px!important;overflow:visible;vertical-align:middle}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}::ng-deep .filter-section .mat-form-field-appearance-fill .mat-form-field-flex{padding:.5em .75em 0!important}.competency-grid{display:flex;flex-wrap:wrap;gap:12px}.competency-item{flex:0 0 calc(33.333% - 12px);box-sizing:border-box;background-color:#f5f5f5;padding:4px 10px;border-radius:6px;display:flex;justify-content:space-between;align-items:center}.snackbar-success{background-color:#4caf50!important;color:#fff!important;font-weight:500;font-size:14px;border-radius:4px}.enhanced-competency-section{display:flex;flex-direction:column;gap:24px;padding:24px;background:linear-gradient(135deg,#1b4ca105,#1b4ca10f);border-radius:12px;border:1px solid rgba(27,76,161,.15);box-shadow:0 2px 8px #1b4ca114}.competency-step{display:flex;flex-direction:column;gap:12px}.step-label{color:#1b4ca1;font-family:Lato;font-size:15px;font-weight:600;margin-bottom:8px;display:flex;align-items:center}.step-label:before{content:\"\";width:4px;height:16px;background:#1b4ca1;border-radius:2px;margin-right:8px}.competency-dropdown-container,.manual-input-container{width:100%;position:relative}.competency-dropdown{width:100%}.competency-dropdown ::ng-deep .mat-form-field-wrapper{padding:0;margin:0}.competency-dropdown ::ng-deep .mat-form-field-flex{padding:0 16px 0 20px;height:48px;align-items:center;transition:all .3s ease;display:flex;justify-content:space-between}.competency-dropdown ::ng-deep .mat-form-field-flex:hover{border-color:#1b4ca1}.competency-dropdown ::ng-deep .mat-form-field-outline,.competency-dropdown ::ng-deep .mat-form-field-outline-start,.competency-dropdown ::ng-deep .mat-form-field-outline-gap,.competency-dropdown ::ng-deep .mat-form-field-outline-end{display:none}.competency-dropdown ::ng-deep .mat-form-field-infix{padding:0;border:none;height:48px;display:flex;align-items:center;flex:1;width:auto}.competency-dropdown ::ng-deep .mat-select{height:100%;display:flex;align-items:center;font-family:Lato;font-size:14px;color:#333;width:100%;flex:1}.competency-dropdown ::ng-deep .mat-select-value{display:flex;align-items:center;height:100%;color:#333;font-weight:400;flex:1;width:100%;justify-content:flex-start}.competency-dropdown ::ng-deep .mat-select-placeholder{color:#00000080;width:100%;display:flex;align-items:center}.competency-dropdown ::ng-deep .mat-select-value-text{width:100%;display:flex;align-items:center;font-weight:400}.competency-dropdown ::ng-deep .mat-select-arrow-wrapper{height:20px;display:flex;align-items:center;margin-left:8px;flex-shrink:0}.competency-dropdown ::ng-deep .mat-select-arrow-wrapper .mat-select-arrow{color:#1b4ca1;border-top-color:#1b4ca1;margin:0}.competency-dropdown ::ng-deep .mat-form-field-label{display:none}.competency-dropdown ::ng-deep .mat-focused .mat-form-field-flex{border-color:#1b4ca1;box-shadow:0 0 0 3px #1b4ca11a}.competency-dropdown ::ng-deep .mat-select-min-line{line-height:normal}.competency-dropdown ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{padding:0}.competency-dropdown ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0;padding:0}.search-option{pointer-events:auto!important;opacity:1!important}.search-option ::ng-deep .mat-option-text{width:100%;padding:0}.search-field{width:100%;margin:0}.search-field ::ng-deep .mat-form-field-wrapper{padding:0;margin:0}.search-field ::ng-deep .mat-form-field-flex{height:36px;padding:0 12px;align-items:center}.search-field ::ng-deep .mat-form-field-infix{padding:0;border:none;height:36px;display:flex;align-items:center}.search-field ::ng-deep .mat-form-field-underline,.search-field ::ng-deep .mat-form-field-outline{display:none}.search-field ::ng-deep input{font-family:Lato;font-size:13px;color:#495057}.search-field ::ng-deep input::placeholder{color:#6c757d}::ng-deep .mat-select-panel{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid #e0e0e0;max-height:320px;margin-top:4px}::ng-deep .mat-select-panel .mat-option{font-family:Lato;font-size:14px;padding:14px 16px;line-height:1.4;transition:all .2s ease;border-bottom:1px solid rgba(0,0,0,.05)}::ng-deep .mat-select-panel .mat-option:last-child{border-bottom:none}::ng-deep .mat-select-panel .mat-option:hover{background-color:#1b4ca10f;color:#1b4ca1}::ng-deep .mat-select-panel .mat-option.mat-selected{background-color:#1b4ca11a;color:#1b4ca1;font-weight:500;position:relative}::ng-deep .mat-select-panel .mat-option.mat-selected:after{content:\"\\2713\";position:absolute;right:16px;color:#1b4ca1;font-weight:700}::ng-deep .mat-select-panel .mat-option.search-option{padding:12px;background-color:#f8f9fa;border-bottom:2px solid #e9ecef;position:sticky;top:0;z-index:10}::ng-deep .mat-select-panel .mat-option.search-option:hover{background-color:#f8f9fa}.enhanced-competency-section ::ng-deep mat-select{border-radius:0!important;background-color:transparent!important}.enhanced-competency-section ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}.enhanced-competency-section ::ng-deep .mat-select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:auto}.enhanced-competency-section ::ng-deep .mat-form-field-suffix{margin:0;padding:0;display:flex;align-items:center}.manual-input{border-radius:25px;border:2px solid #e0e0e0;padding:12px 16px;width:100%;font-size:14px;font-family:Lato;background:#fff;height:48px;box-sizing:border-box;transition:all .3s ease;box-shadow:0 2px 4px #0000000d}.manual-input::placeholder{color:#00000080;font-family:Lato;font-size:14px}.manual-input:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 3px #1b4ca11a}.manual-input:hover{border-color:#1b4ca1;box-shadow:0 4px 8px #1b4ca11a}.add-button-section{display:flex;justify-content:flex-start;margin-top:20px;padding-top:20px;border-top:2px solid rgba(27,76,161,.1)}.add-competency-btn{border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #0000001a;min-width:140px}.add-competency-btn.btn-active{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff}.add-competency-btn.btn-active:hover{background:linear-gradient(135deg,#164080,#0f2f5f);box-shadow:0 4px 16px #1b4ca14d;transform:translateY(-1px)}.add-competency-btn.btn-active:active{transform:translateY(0);box-shadow:0 2px 8px #1b4ca133}.add-competency-btn.btn-disable{background:#e9ecef;color:#6c757d;cursor:not-allowed;opacity:.7;box-shadow:none;border:1px solid #ccc}:host ::ng-deep .mat-select-panel.search-panel{max-height:300px!important;overflow-y:auto!important;box-sizing:border-box}::ng-deep .search-panel .sticky-search-container{position:sticky;top:0;z-index:100;background:#fff;padding:8px;border-bottom:1px solid #eee}:host ::ng-deep .search-panel .search-input-wrapper{display:flex;gap:8px;align-items:center}:host ::ng-deep .search-panel .search-input{width:100%;height:32px;padding:6px 10px}:host ::ng-deep .search-panel .mat-option{padding:8px 16px!important}:host ::ng-deep .search-panel .mat-pseudo-checkbox{margin-right:8px}:host ::ng-deep .search-panel .no-data-option{padding:10px 16px;font-size:14px;color:#f44336}::ng-deep .search-panel .no-data-option .mat-pseudo-checkbox{display:none!important}.search-input-wrapper{position:relative;width:100%;display:flex;align-items:center}.search-input{width:100%;padding-right:40px;height:40px;line-height:40px;box-sizing:border-box}.clear-icon{position:absolute;right:10px;cursor:pointer;font-size:20px;color:#666;display:flex;align-items:center;height:100%}.clear-icon:hover{color:#000}:host ::ng-deep .search-panel .mat-option:first-child{margin-top:0}:host ::ng-deep .mat-notched-outline{border-radius:25px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:30px;align-items:center;padding:0 16px;background:#fff}\n"] }]
|
|
2503
|
+
args: [{ selector: 'app-edit-cbp-plan', template: "<div class=\"view-cbp-plan\" #dialogContent>\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">\n Edit Role Mapping\n <span class=\"text-sm\">\n ({{ cbpForm?.get('designation_name')?.value || planData?.designation_name }})\n </span>\n</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"cbpForm\">\n\n <!-- <div class=\"section-header mt-4\">\n <input type=\"text\" formControlName=\"designation_name\" [value]=\"planData?.designation_name\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width: 100%;font-size: 14px;font-family: 'Lato';\">\n\n\n </div> -->\n\n <mat-form-field appearance=\"outline\" class=\"mt-4 margin-top-s w-full required-select\" style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width: 100%;font-size: 14px;font-family: 'Lato';\">\n <mat-select #designation formControlName=\"designation_name\"\n placeholder=\"Select designation\" (closed)=\"onDesignationDropdownClosed()\"\n panelClass=\"search-panel\" (openedChange)=\"setupScrollListener($event)\"\n >\n\n <!-- Sticky search input container -->\n <div class=\"sticky-search-container\" (click)=\"$event.stopPropagation()\">\n <div class=\"search-input-wrapper\">\n <input type=\"text\" placeholder=\"Search designation\" style=\"width:100%\"\n formControlName=\"searchDesignation\" class=\"search-input\"\n (keydown)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation()\"\n autocomplete=\"off\">\n <!-- (keyup)=\"designationSearch($event)\" -->\n <div *ngIf=\"searchDesignationControl?.value\" type=\"button\" class=\"clear-icon\"\n (click)=\"clearDesignationSearch($event)\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <!-- Options list -->\n <!-- <ng-container *ngFor=\"let designation of masterData?.designation\">\n <mat-option\n *ngIf=\"designation?.name !== planData?.designation_name\"\n [value]=\"designation?.name\">\n {{ designation?.name }}\n </mat-option>\n</ng-container> -->\n<ng-container *ngFor=\"let designation of masterData?.designation\">\n <mat-option\n *ngIf=\"planData?.igot_designation_id || designation?.name !== planData?.designation_name\"\n [value]=\"designation?.name\">\n {{ designation?.name }}\n </mat-option>\n</ng-container>\n <!-- Loading indicator -->\n <div *ngIf=\"isLoadingMoreDesignations\" class=\"loading-indicator\">\n Load More...\n </div>\n <!-- No results message -->\n <mat-option *ngIf=\"(masterData?.designation)?.length === 0 || noMoreLegacyDesignations\" disabled class=\"no-data-option\">\n\n Designation Not Found.\n\n </mat-option>\n \n </mat-select>\n <!-- <mat-error class=\"text-xs\"\n *ngIf=\"designationForm?.get('designation_name')?.touched && designationForm?.get('designation_name')?.invalid\">\n Please select at least one designation.\n </mat-error> -->\n </mat-form-field>\n\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-behavioral\">\n <div class=\"inside-layer\">\n Behavioral Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.behavioral}}\n </div>\n </div>\n <div class=\"outside-layer-functional\">\n <div class=\"inside-layer\">\n Functional Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.functional}}\n </div>\n </div>\n <div class=\"outside-layer-domain\">\n <div class=\"inside-layer\">\n Domain Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.domain}}\n </div>\n </div>\n </div>\n <div class=\"mt-4 section\">\n <div class=\"sub-heading\">\n <p>Wing/Division</p>\n </div>\n <div class=\"mt-4\">\n <input type=\"text\" formControlName=\"wing_division_section\" [value]=\"planData?.wing_division_section\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width:100%;font-size: 14px;font-family: 'Lato';\">\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Roles & Responsibilities</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" formControlName=\"role_responsibilities_text\" rows=\"5\"\n placeholder=\"Roles & Responsibilities\"\n [value]=\"planData?.role_responsibilities?.join('\\n')\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Activities</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" formControlName=\"activities_text\" rows=\"5\"\n placeholder=\"Activities\" [value]=\"planData?.activities?.join('\\n')\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Competency</p>\n </div>\n <div #editSection class=\"enhanced-competency-section mt-2\">\n <!-- Step 1: Select Competency Type -->\n <div class=\"competency-step\">\n <label class=\"step-label\">1. Select Core Competency Type</label>\n <div class=\"competency-dropdown-container\">\n <mat-form-field appearance=\"outline\" class=\"competency-dropdown\">\n <mat-select formControlName=\"competencyType\" placeholder=\"Select Competency Type\"\n (selectionChange)=\"onCompetencyTypeChange($event.value)\">\n <mat-option value=\"Behavioral\">Behavioral</mat-option>\n <mat-option value=\"Functional\">Functional</mat-option>\n <mat-option value=\"Domain\">Domain</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n\n <!-- Step 2: Theme Selection (Behavioral/Functional from JSON, Domain manual) -->\n <div class=\"competency-step\" *ngIf=\"selectedCompetencyType\">\n <label class=\"step-label\">2. Select/Enter Theme</label>\n\n <!-- For Behavioral and Functional: Searchable Dropdown from JSON -->\n <div class=\"competency-dropdown-container\"\n *ngIf=\"selectedCompetencyType === 'Behavioral' || selectedCompetencyType === 'Functional'\">\n <mat-form-field appearance=\"outline\" class=\"competency-dropdown\">\n <mat-select formControlName=\"competencyTheme\" placeholder=\"Search and select theme\"\n (selectionChange)=\"onThemeChange($event.value)\">\n <!-- Search input inside dropdown -->\n <mat-option class=\"search-option\" disabled>\n <mat-form-field appearance=\"outline\" class=\"search-field\">\n <input matInput placeholder=\"Search themes...\" formControlName=\"themeSearch\"\n (input)=\"filterThemes($event.target?.value)\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n </mat-form-field>\n </mat-option>\n\n <!-- Theme options -->\n <mat-option *ngFor=\"let theme of filteredThemes\" [value]=\"theme.name\">\n {{theme.name}}\n </mat-option>\n\n <!-- No results message -->\n <mat-option *ngIf=\"filteredThemes.length === 0 && themeSearchText\" disabled>\n No themes found matching \"{{themeSearchText}}\"\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <!-- For Domain: Manual input -->\n <div class=\"manual-input-container\" *ngIf=\"selectedCompetencyType === 'Domain'\">\n <input type=\"text\" formControlName=\"manualThemeInput\" placeholder=\"Enter Theme manually\"\n class=\"manual-input\" />\n </div>\n </div>\n\n <!-- Step 3: Sub-theme Selection -->\n <div class=\"competency-step\" *ngIf=\"selectedTheme || (selectedCompetencyType === 'Domain')\">\n <label class=\"step-label\">3. Select/Enter Sub-theme</label>\n\n <!-- For Behavioral and Functional: Searchable Dropdown based on selected theme -->\n <div class=\"competency-dropdown-container\"\n *ngIf=\"selectedCompetencyType === 'Behavioral' || selectedCompetencyType === 'Functional'\">\n <mat-form-field appearance=\"outline\" class=\"competency-dropdown\">\n <mat-select formControlName=\"competencySubTheme\"\n placeholder=\"Search and select sub-theme\"\n (selectionChange)=\"onSubThemeChange($event.value)\">\n <!-- Search input inside dropdown -->\n <mat-option class=\"search-option\" disabled>\n <mat-form-field appearance=\"outline\" class=\"search-field\">\n <input matInput placeholder=\"Search sub-themes...\"\n formControlName=\"subThemeSearch\"\n (input)=\"filterSubThemes($event.target.value)\"\n (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n </mat-form-field>\n </mat-option>\n\n <!-- Sub-theme options -->\n <mat-option *ngFor=\"let subTheme of filteredSubThemes\" [value]=\"subTheme\">\n {{subTheme}}\n </mat-option>\n\n <!-- No results message -->\n <mat-option *ngIf=\"filteredSubThemes.length === 0 && subThemeSearchText\" disabled>\n No sub-themes found matching \"{{subThemeSearchText}}\"\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n\n <!-- For Domain: Manual input -->\n <div class=\"manual-input-container\" *ngIf=\"selectedCompetencyType === 'Domain'\">\n <input type=\"text\" formControlName=\"manualSubThemeInput\"\n placeholder=\"Enter Sub-theme manually\" class=\"manual-input\" />\n </div>\n </div>\n\n <!-- Add Button -->\n <div class=\"add-button-section\" *ngIf=\"selectedCompetencyType \">\n <button type=\"button\" *ngIf=\"!editDomainCompetencyFlag\" class=\"add-competency-btn\"\n [disabled]=\"!canAddCompetency()\"\n [ngClass]=\"canAddCompetency() ? 'btn-active' : 'btn-disable'\" (click)=\"addCompetency()\">\n Add Competency\n </button>\n <button type=\"button\" *ngIf=\"editDomainCompetencyFlag\" class=\"add-competency-btn btn-active\"\n (click)=\"updateCompetency()\">\n Update Competency\n </button>\n <button type=\"button\" *ngIf=\"editDomainCompetencyFlag\" class=\"add-competency-btn btn-active\"\n style=\"margin-left: 5px;\" (click)=\"cancelUpdate()\">\n Cancel </button>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"competency-sub-heading mt-2\" *ngIf=\"getCompetenciesByType('Behavioral')?.length\">\n Behavioral Competencies\n </div>\n\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item behavioural-pill\"\n *ngFor=\"let comp of getCompetenciesByType('Behavioral')\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"competency-sub-heading mt-2\" *ngIf=\"getCompetenciesByType('Functional')?.length\">\n Functional Competencies</div>\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item functional-pill\"\n *ngFor=\"let comp of getCompetenciesByType('Functional')\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"competency-sub-heading mt-2\">Domain Competencies</div>\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item domain-pill\" *ngFor=\"let comp of getCompetenciesByType('Domain')\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n <span class=\"cursor-pointer edit\" (click)=\"editCompetency(comp)\">\n <mat-icon>edit</mat-icon>\n </span>\n <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"popup-footer\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancelForm()\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Save\" (click)=\"saveRoleMapping()\" />\n </div>\n </div>\n </div>\n</div>\n\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 .legacy-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;gap:10px}.legacy-search-filter{display:none}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .sinput{border-radius:4px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato}.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:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8;margin:0 10px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;margin:0 10px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;margin:0 10px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #F8B861;border-right:2px solid #F8B861;background:#fde8cc;margin:0 10px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:24px;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: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:2px 8px;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:2px 8px;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:2px 8px;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:6px}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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:16px;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}.close .mat-icon{height:18px!important;width:18px!important}.edit .mat-icon{height:24px!important;width:24px!important;overflow:visible;vertical-align:middle}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}::ng-deep .filter-section .mat-form-field-appearance-fill .mat-form-field-flex{padding:.5em .75em 0!important}.competency-grid{display:flex;flex-wrap:wrap;gap:12px}.competency-item{flex:0 0 calc(33.333% - 12px);box-sizing:border-box;background-color:#f5f5f5;padding:4px 10px;border-radius:6px;display:flex;justify-content:space-between;align-items:center}.snackbar-success{background-color:#4caf50!important;color:#fff!important;font-weight:500;font-size:14px;border-radius:4px}.enhanced-competency-section{display:flex;flex-direction:column;gap:24px;padding:24px;background:linear-gradient(135deg,#1b4ca105,#1b4ca10f);border-radius:12px;border:1px solid rgba(27,76,161,.15);box-shadow:0 2px 8px #1b4ca114}.competency-step{display:flex;flex-direction:column;gap:12px}.step-label{color:#1b4ca1;font-family:Lato;font-size:15px;font-weight:600;margin-bottom:8px;display:flex;align-items:center}.step-label:before{content:\"\";width:4px;height:16px;background:#1b4ca1;border-radius:2px;margin-right:8px}.competency-dropdown-container,.manual-input-container{width:100%;position:relative}.competency-dropdown{width:100%}.competency-dropdown ::ng-deep .mat-form-field-wrapper{padding:0;margin:0}.competency-dropdown ::ng-deep .mat-form-field-flex{padding:0 16px 0 20px;height:48px;align-items:center;transition:all .3s ease;display:flex;justify-content:space-between}.competency-dropdown ::ng-deep .mat-form-field-flex:hover{border-color:#1b4ca1}.competency-dropdown ::ng-deep .mat-form-field-outline,.competency-dropdown ::ng-deep .mat-form-field-outline-start,.competency-dropdown ::ng-deep .mat-form-field-outline-gap,.competency-dropdown ::ng-deep .mat-form-field-outline-end{display:none}.competency-dropdown ::ng-deep .mat-form-field-infix{padding:0;border:none;height:48px;display:flex;align-items:center;flex:1;width:auto}.competency-dropdown ::ng-deep .mat-select{height:100%;display:flex;align-items:center;font-family:Lato;font-size:14px;color:#333;width:100%;flex:1}.competency-dropdown ::ng-deep .mat-select-value{display:flex;align-items:center;height:100%;color:#333;font-weight:400;flex:1;width:100%;justify-content:flex-start}.competency-dropdown ::ng-deep .mat-select-placeholder{color:#00000080;width:100%;display:flex;align-items:center}.competency-dropdown ::ng-deep .mat-select-value-text{width:100%;display:flex;align-items:center;font-weight:400}.competency-dropdown ::ng-deep .mat-select-arrow-wrapper{height:20px;display:flex;align-items:center;margin-left:8px;flex-shrink:0}.competency-dropdown ::ng-deep .mat-select-arrow-wrapper .mat-select-arrow{color:#1b4ca1;border-top-color:#1b4ca1;margin:0}.competency-dropdown ::ng-deep .mat-form-field-label{display:none}.competency-dropdown ::ng-deep .mat-focused .mat-form-field-flex{border-color:#1b4ca1;box-shadow:0 0 0 3px #1b4ca11a}.competency-dropdown ::ng-deep .mat-select-min-line{line-height:normal}.competency-dropdown ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{padding:0}.competency-dropdown ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{margin:0;padding:0}.search-option{pointer-events:auto!important;opacity:1!important}.search-option ::ng-deep .mat-option-text{width:100%;padding:0}.search-field{width:100%;margin:0}.search-field ::ng-deep .mat-form-field-wrapper{padding:0;margin:0}.search-field ::ng-deep .mat-form-field-flex{height:36px;padding:0 12px;align-items:center}.search-field ::ng-deep .mat-form-field-infix{padding:0;border:none;height:36px;display:flex;align-items:center}.search-field ::ng-deep .mat-form-field-underline,.search-field ::ng-deep .mat-form-field-outline{display:none}.search-field ::ng-deep input{font-family:Lato;font-size:13px;color:#495057}.search-field ::ng-deep input::placeholder{color:#6c757d}::ng-deep .mat-select-panel{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid #e0e0e0;max-height:320px;margin-top:4px}::ng-deep .mat-select-panel .mat-option{font-family:Lato;font-size:14px;padding:14px 16px;line-height:1.4;transition:all .2s ease;border-bottom:1px solid rgba(0,0,0,.05)}::ng-deep .mat-select-panel .mat-option:last-child{border-bottom:none}::ng-deep .mat-select-panel .mat-option:hover{background-color:#1b4ca10f;color:#1b4ca1}::ng-deep .mat-select-panel .mat-option.mat-selected{background-color:#1b4ca11a;color:#1b4ca1;font-weight:500;position:relative}::ng-deep .mat-select-panel .mat-option.mat-selected:after{content:\"\\2713\";position:absolute;right:16px;color:#1b4ca1;font-weight:700}::ng-deep .mat-select-panel .mat-option.search-option{padding:12px;background-color:#f8f9fa;border-bottom:2px solid #e9ecef;position:sticky;top:0;z-index:10}::ng-deep .mat-select-panel .mat-option.search-option:hover{background-color:#f8f9fa}.enhanced-competency-section ::ng-deep mat-select{border-radius:0!important;background-color:transparent!important}.enhanced-competency-section ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}.enhanced-competency-section ::ng-deep .mat-select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:auto}.enhanced-competency-section ::ng-deep .mat-form-field-suffix{margin:0;padding:0;display:flex;align-items:center}.manual-input{border-radius:25px;border:2px solid #e0e0e0;padding:12px 16px;width:100%;font-size:14px;font-family:Lato;background:#fff;height:48px;box-sizing:border-box;transition:all .3s ease;box-shadow:0 2px 4px #0000000d}.manual-input::placeholder{color:#00000080;font-family:Lato;font-size:14px}.manual-input:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 3px #1b4ca11a}.manual-input:hover{border-color:#1b4ca1;box-shadow:0 4px 8px #1b4ca11a}.add-button-section{display:flex;justify-content:flex-start;margin-top:20px;padding-top:20px;border-top:2px solid rgba(27,76,161,.1)}.add-competency-btn{border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #0000001a;min-width:140px}.add-competency-btn.btn-active{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff}.add-competency-btn.btn-active:hover{background:linear-gradient(135deg,#164080,#0f2f5f);box-shadow:0 4px 16px #1b4ca14d;transform:translateY(-1px)}.add-competency-btn.btn-active:active{transform:translateY(0);box-shadow:0 2px 8px #1b4ca133}.add-competency-btn.btn-disable{background:#e9ecef;color:#6c757d;cursor:not-allowed;opacity:.7;box-shadow:none;border:1px solid #ccc}:host ::ng-deep .mat-select-panel.search-panel{max-height:300px!important;overflow-y:auto!important;box-sizing:border-box}::ng-deep .search-panel .sticky-search-container{position:sticky;top:0;z-index:100;background:#fff;padding:8px;border-bottom:1px solid #eee}:host ::ng-deep .search-panel .search-input-wrapper{display:flex;gap:8px;align-items:center}:host ::ng-deep .search-panel .search-input{width:100%;height:32px;padding:6px 10px}:host ::ng-deep .search-panel .mat-option{padding:8px 16px!important}:host ::ng-deep .search-panel .mat-pseudo-checkbox{margin-right:8px}:host ::ng-deep .search-panel .no-data-option{padding:10px 16px;font-size:14px;color:#f44336}::ng-deep .search-panel .no-data-option .mat-pseudo-checkbox{display:none!important}.search-input-wrapper{position:relative;width:100%;display:flex;align-items:center}.search-input{width:100%;padding-right:40px;height:40px;line-height:40px;box-sizing:border-box}.clear-icon{position:absolute;right:10px;cursor:pointer;font-size:20px;color:#666;display:flex;align-items:center;height:100%}.clear-icon:hover{color:#000}:host ::ng-deep .search-panel .mat-option:first-child{margin-top:0}:host ::ng-deep .mat-notched-outline{border-radius:25px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:30px;align-items:center;padding:0 16px;background:#fff}.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}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:column}\n"] }]
|
|
2504
2504
|
}], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
2505
2505
|
type: Inject,
|
|
2506
2506
|
args: [MAT_DIALOG_DATA]
|
|
@@ -6077,11 +6077,11 @@ class ViewCbpPlanComponent {
|
|
|
6077
6077
|
});
|
|
6078
6078
|
}
|
|
6079
6079
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewCbpPlanComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$1.MatDialog }, { token: i3.ActivatedRoute }, { token: SharedService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6080
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewCbpPlanComponent, selector: "app-view-cbp-plan", 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 Role Mapping</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n <div class=\"section-container\" #pdfContent>\n \n <div class=\"section-header mt-4\">\n <div class=\"designation\">{{planData?.designation_name}}</div>\n </div>\n\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-behavioral\">\n <div class=\"inside-layer\">\n Behavioral Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.behavioral}}\n </div>\n </div>\n <div class=\"outside-layer-functional\">\n <div class=\"inside-layer\">\n Functional Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.functional}}\n </div>\n </div>\n <div class=\"outside-layer-domain\">\n <div class=\"inside-layer\">\n Domain Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.domain}}\n </div>\n </div>\n </div>\n <div class=\"mt-4 section\">\n <div class=\"sub-heading\">\n <p>Wing/Division</p>\n </div>\n <div class=\"mt-2\">\n \n <div class=\"wing-text\">{{planData?.wing_division_section}}</div>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Roles & Responsibilities</p>\n </div>\n <div class=\"mt-2 additional-details\">\n <p class=\"responsibility-text\" *ngFor=\"let item of planData?.role_responsibilities;let i=index\">\n {{i+1}}. {{item}}\n </p>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Activities</p>\n </div>\n <div class=\"mt-2 additional-details\">\n <p class=\"responsibility-text\" *ngFor=\"let item of planData?.activities;let i=index\">\n {{i+1}}. {{item}}\n </p>\n </div>\n </div>\n <div class=\"section mt-2\">\n <div class=\"sub-heading\">\n <p>Competency</p>\n </div>\n \n <div class=\"mt-4\">\n <div class=\"competency-sub-heading \" *ngIf=\"getCompetenciesByType(planData?.competencies, 'Behavioral')?.length\">Behavioral Competencies</div>\n <!-- <ul class=\"competency-list mt-2\">\n <li class=\"behavioural-pill\" *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Behavioral')\">\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{ comp.sub_theme }}</span>\n </li>\n </ul> -->\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item behavioural-pill\"\n *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Behavioral')\">\n <span class=\"competency-text-behavioral\">\n {{ comp.theme }} - {{ comp.sub_theme }}\n </span>\n <!-- <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span> -->\n </div>\n </div>\n </div>\n <div class=\"mt-2\">\n <div class=\"competency-sub-heading \" *ngIf=\"getCompetenciesByType(planData?.competencies, 'Functional')?.length\">Functional Competencies</div>\n <!-- <ul class=\"competency-list mt-2\">\n <li class=\"functional-pill\" *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Functional')\">\n <span class=\"competency-text-functional\"> {{ comp.theme }}- {{ comp.sub_theme }} </span>\n </li>\n </ul> -->\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item functional-pill\"\n *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Functional')\">\n <span class=\"competency-text-functional\">\n {{ comp.theme }} - {{ comp.sub_theme }}\n </span>\n <!-- <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span> -->\n </div>\n </div>\n </div>\n <div class=\"mt-2\">\n <div class=\"competency-sub-heading\" *ngIf=\"getCompetenciesByType(planData?.competencies, 'Domain')?.length\">Domain Competencies</div>\n <!-- <ul class=\"competency-list mt-2\">\n <li class=\"domain-pill\" *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Domain')\">\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{ comp.sub_theme }}</span>\n </li>\n </ul> -->\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item domain-pill\"\n *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Domain')\">\n <span class=\"competency-text-domain\">\n {{ comp.theme }} - {{ comp.sub_theme }}\n </span>\n <!-- <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span> -->\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"popup-footer\">\n <div *ngIf=\"!(data?.fromRequestPage)\">\n <input class=\"btn-active\" type=\"button\" value=\"Generate Course Recommendation\" (click)=\"generateCourseRecommendation()\"/>\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\"/>\n </div>\n <div *ngIf=\"!(data?.fromRequestPage) || (fromMdo && data?.requestStatus.toLowerCase() === 'pending')\">\n <input class=\"btn-active\" type=\"button\" value=\"Edit\" (click)=\"editCBPPlan()\"/>\n </div>\n </div>\n</div>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:18px;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:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .sinput{border-radius:4px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato}.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:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;margin:0 10px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;margin:0 10px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #F8B861;background:#fde8cc;margin:0 10px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:24px;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: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;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0;padding:5px 10px}.functional-pill{display:flex;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0;padding:5px 10px}.domain-pill{display:flex;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0;padding:5px 10px}.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:6px}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.designation{color:#1b4ca1;font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal}.wing-text{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.responsibility-text{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.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}.competency-grid{display:flex;flex-wrap:wrap;gap:12px}.competency-item{flex:0 0 calc(33.333% - 12px);box-sizing:border-box;background-color:#f5f5f5;padding:4px 10px;border-radius:6px;display:flex;justify-content:space-between;align-items:center}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
6080
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewCbpPlanComponent, selector: "app-view-cbp-plan", 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 Role Mapping</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n <div class=\"section-container\" #pdfContent>\n \n <div class=\"section-header mt-4\">\n <div class=\"designation\">{{planData?.designation_name}}</div>\n </div>\n\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-behavioral\">\n <div class=\"inside-layer\">\n Behavioral Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.behavioral}}\n </div>\n </div>\n <div class=\"outside-layer-functional\">\n <div class=\"inside-layer\">\n Functional Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.functional}}\n </div>\n </div>\n <div class=\"outside-layer-domain\">\n <div class=\"inside-layer\">\n Domain Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.domain}}\n </div>\n </div>\n </div>\n <div class=\"mt-4 section\">\n <div class=\"sub-heading\">\n <p>Wing/Division</p>\n </div>\n <div class=\"mt-2\">\n \n <div class=\"wing-text\">{{planData?.wing_division_section}}</div>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Roles & Responsibilities</p>\n </div>\n <div class=\"mt-2 additional-details\">\n <p class=\"responsibility-text\" *ngFor=\"let item of planData?.role_responsibilities;let i=index\">\n {{i+1}}. {{item}}\n </p>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Activities</p>\n </div>\n <div class=\"mt-2 additional-details\">\n <p class=\"responsibility-text\" *ngFor=\"let item of planData?.activities;let i=index\">\n {{i+1}}. {{item}}\n </p>\n </div>\n </div>\n <div class=\"section mt-2\">\n <div class=\"sub-heading\">\n <p>Competency</p>\n </div>\n \n <div class=\"mt-4\">\n <div class=\"competency-sub-heading \" *ngIf=\"getCompetenciesByType(planData?.competencies, 'Behavioral')?.length\">Behavioral Competencies</div>\n <!-- <ul class=\"competency-list mt-2\">\n <li class=\"behavioural-pill\" *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Behavioral')\">\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{ comp.sub_theme }}</span>\n </li>\n </ul> -->\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item behavioural-pill\"\n *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Behavioral')\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n <!-- <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span> -->\n </div>\n </div>\n </div>\n <div class=\"mt-2\">\n <div class=\"competency-sub-heading \" *ngIf=\"getCompetenciesByType(planData?.competencies, 'Functional')?.length\">Functional Competencies</div>\n <!-- <ul class=\"competency-list mt-2\">\n <li class=\"functional-pill\" *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Functional')\">\n <span class=\"competency-text-functional\"> {{ comp.theme }}- {{ comp.sub_theme }} </span>\n </li>\n </ul> -->\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item functional-pill\"\n *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Functional')\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n <!-- <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span> -->\n </div>\n </div>\n </div>\n <div class=\"mt-2\">\n <div class=\"competency-sub-heading\" *ngIf=\"getCompetenciesByType(planData?.competencies, 'Domain')?.length\">Domain Competencies</div>\n <!-- <ul class=\"competency-list mt-2\">\n <li class=\"domain-pill\" *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Domain')\">\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{ comp.sub_theme }}</span>\n </li>\n </ul> -->\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item domain-pill\"\n *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Domain')\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n <!-- <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span> -->\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"popup-footer\">\n <div *ngIf=\"!(data?.fromRequestPage)\">\n <input class=\"btn-active\" type=\"button\" value=\"Generate Course Recommendation\" (click)=\"generateCourseRecommendation()\"/>\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\"/>\n </div>\n <div *ngIf=\"!(data?.fromRequestPage) || (fromMdo && data?.requestStatus.toLowerCase() === 'pending')\">\n <input class=\"btn-active\" type=\"button\" value=\"Edit\" (click)=\"editCBPPlan()\"/>\n </div>\n </div>\n</div>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:18px;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:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .sinput{border-radius:4px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato}.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:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;margin:0 10px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;margin:0 10px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #F8B861;background:#fde8cc;margin:0 10px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:24px;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: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;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0;padding:5px 10px}.functional-pill{display:flex;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0;padding:5px 10px}.domain-pill{display:flex;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0;padding:5px 10px}.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:6px}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.designation{color:#1b4ca1;font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal}.wing-text{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.responsibility-text{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.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}.competency-grid{display:flex;flex-wrap:wrap;gap:12px}.competency-item{flex:0 0 calc(33.333% - 12px);box-sizing:border-box;background-color:#f5f5f5;padding:4px 10px;border-radius:6px;display:flex;justify-content:space-between;align-items:center}.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}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
6081
6081
|
}
|
|
6082
6082
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewCbpPlanComponent, decorators: [{
|
|
6083
6083
|
type: Component,
|
|
6084
|
-
args: [{ selector: 'app-view-cbp-plan', template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">View Role Mapping</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n <div class=\"section-container\" #pdfContent>\n \n <div class=\"section-header mt-4\">\n <div class=\"designation\">{{planData?.designation_name}}</div>\n </div>\n\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-behavioral\">\n <div class=\"inside-layer\">\n Behavioral Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.behavioral}}\n </div>\n </div>\n <div class=\"outside-layer-functional\">\n <div class=\"inside-layer\">\n Functional Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.functional}}\n </div>\n </div>\n <div class=\"outside-layer-domain\">\n <div class=\"inside-layer\">\n Domain Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.domain}}\n </div>\n </div>\n </div>\n <div class=\"mt-4 section\">\n <div class=\"sub-heading\">\n <p>Wing/Division</p>\n </div>\n <div class=\"mt-2\">\n \n <div class=\"wing-text\">{{planData?.wing_division_section}}</div>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Roles & Responsibilities</p>\n </div>\n <div class=\"mt-2 additional-details\">\n <p class=\"responsibility-text\" *ngFor=\"let item of planData?.role_responsibilities;let i=index\">\n {{i+1}}. {{item}}\n </p>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Activities</p>\n </div>\n <div class=\"mt-2 additional-details\">\n <p class=\"responsibility-text\" *ngFor=\"let item of planData?.activities;let i=index\">\n {{i+1}}. {{item}}\n </p>\n </div>\n </div>\n <div class=\"section mt-2\">\n <div class=\"sub-heading\">\n <p>Competency</p>\n </div>\n \n <div class=\"mt-4\">\n <div class=\"competency-sub-heading \" *ngIf=\"getCompetenciesByType(planData?.competencies, 'Behavioral')?.length\">Behavioral Competencies</div>\n <!-- <ul class=\"competency-list mt-2\">\n <li class=\"behavioural-pill\" *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Behavioral')\">\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{ comp.sub_theme }}</span>\n </li>\n </ul> -->\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item behavioural-pill\"\n *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Behavioral')\">\n <span class=\"competency-text-behavioral\">\n {{ comp.theme }} - {{ comp.sub_theme }}\n </span>\n <!-- <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span> -->\n </div>\n </div>\n </div>\n <div class=\"mt-2\">\n <div class=\"competency-sub-heading \" *ngIf=\"getCompetenciesByType(planData?.competencies, 'Functional')?.length\">Functional Competencies</div>\n <!-- <ul class=\"competency-list mt-2\">\n <li class=\"functional-pill\" *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Functional')\">\n <span class=\"competency-text-functional\"> {{ comp.theme }}- {{ comp.sub_theme }} </span>\n </li>\n </ul> -->\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item functional-pill\"\n *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Functional')\">\n <span class=\"competency-text-functional\">\n {{ comp.theme }} - {{ comp.sub_theme }}\n </span>\n <!-- <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span> -->\n </div>\n </div>\n </div>\n <div class=\"mt-2\">\n <div class=\"competency-sub-heading\" *ngIf=\"getCompetenciesByType(planData?.competencies, 'Domain')?.length\">Domain Competencies</div>\n <!-- <ul class=\"competency-list mt-2\">\n <li class=\"domain-pill\" *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Domain')\">\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{ comp.sub_theme }}</span>\n </li>\n </ul> -->\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item domain-pill\"\n *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Domain')\">\n <span class=\"competency-text-domain\">\n {{ comp.theme }} - {{ comp.sub_theme }}\n </span>\n <!-- <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span> -->\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"popup-footer\">\n <div *ngIf=\"!(data?.fromRequestPage)\">\n <input class=\"btn-active\" type=\"button\" value=\"Generate Course Recommendation\" (click)=\"generateCourseRecommendation()\"/>\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\"/>\n </div>\n <div *ngIf=\"!(data?.fromRequestPage) || (fromMdo && data?.requestStatus.toLowerCase() === 'pending')\">\n <input class=\"btn-active\" type=\"button\" value=\"Edit\" (click)=\"editCBPPlan()\"/>\n </div>\n </div>\n</div>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:18px;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:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .sinput{border-radius:4px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato}.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:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;margin:0 10px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;margin:0 10px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #F8B861;background:#fde8cc;margin:0 10px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:24px;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: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;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0;padding:5px 10px}.functional-pill{display:flex;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0;padding:5px 10px}.domain-pill{display:flex;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0;padding:5px 10px}.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:6px}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.designation{color:#1b4ca1;font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal}.wing-text{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.responsibility-text{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.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}.competency-grid{display:flex;flex-wrap:wrap;gap:12px}.competency-item{flex:0 0 calc(33.333% - 12px);box-sizing:border-box;background-color:#f5f5f5;padding:4px 10px;border-radius:6px;display:flex;justify-content:space-between;align-items:center}\n"] }]
|
|
6084
|
+
args: [{ selector: 'app-view-cbp-plan', template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">View Role Mapping</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n <div class=\"section-container\" #pdfContent>\n \n <div class=\"section-header mt-4\">\n <div class=\"designation\">{{planData?.designation_name}}</div>\n </div>\n\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-behavioral\">\n <div class=\"inside-layer\">\n Behavioral Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.behavioral}}\n </div>\n </div>\n <div class=\"outside-layer-functional\">\n <div class=\"inside-layer\">\n Functional Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.functional}}\n </div>\n </div>\n <div class=\"outside-layer-domain\">\n <div class=\"inside-layer\">\n Domain Competencies\n </div>\n <div class=\"count\">\n {{competenciesCount?.domain}}\n </div>\n </div>\n </div>\n <div class=\"mt-4 section\">\n <div class=\"sub-heading\">\n <p>Wing/Division</p>\n </div>\n <div class=\"mt-2\">\n \n <div class=\"wing-text\">{{planData?.wing_division_section}}</div>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Roles & Responsibilities</p>\n </div>\n <div class=\"mt-2 additional-details\">\n <p class=\"responsibility-text\" *ngFor=\"let item of planData?.role_responsibilities;let i=index\">\n {{i+1}}. {{item}}\n </p>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Activities</p>\n </div>\n <div class=\"mt-2 additional-details\">\n <p class=\"responsibility-text\" *ngFor=\"let item of planData?.activities;let i=index\">\n {{i+1}}. {{item}}\n </p>\n </div>\n </div>\n <div class=\"section mt-2\">\n <div class=\"sub-heading\">\n <p>Competency</p>\n </div>\n \n <div class=\"mt-4\">\n <div class=\"competency-sub-heading \" *ngIf=\"getCompetenciesByType(planData?.competencies, 'Behavioral')?.length\">Behavioral Competencies</div>\n <!-- <ul class=\"competency-list mt-2\">\n <li class=\"behavioural-pill\" *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Behavioral')\">\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{ comp.sub_theme }}</span>\n </li>\n </ul> -->\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item behavioural-pill\"\n *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Behavioral')\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n <!-- <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span> -->\n </div>\n </div>\n </div>\n <div class=\"mt-2\">\n <div class=\"competency-sub-heading \" *ngIf=\"getCompetenciesByType(planData?.competencies, 'Functional')?.length\">Functional Competencies</div>\n <!-- <ul class=\"competency-list mt-2\">\n <li class=\"functional-pill\" *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Functional')\">\n <span class=\"competency-text-functional\"> {{ comp.theme }}- {{ comp.sub_theme }} </span>\n </li>\n </ul> -->\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item functional-pill\"\n *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Functional')\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n <!-- <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span> -->\n </div>\n </div>\n </div>\n <div class=\"mt-2\">\n <div class=\"competency-sub-heading\" *ngIf=\"getCompetenciesByType(planData?.competencies, 'Domain')?.length\">Domain Competencies</div>\n <!-- <ul class=\"competency-list mt-2\">\n <li class=\"domain-pill\" *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Domain')\">\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{ comp.sub_theme }}</span>\n </li>\n </ul> -->\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item domain-pill\"\n *ngFor=\"let comp of getCompetenciesByType(planData?.competencies, 'Domain')\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n <!-- <span class=\"cursor-pointer close\" (click)=\"deleteCompetency(comp)\">\n <mat-icon>close</mat-icon>\n </span> -->\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"popup-footer\">\n <div *ngIf=\"!(data?.fromRequestPage)\">\n <input class=\"btn-active\" type=\"button\" value=\"Generate Course Recommendation\" (click)=\"generateCourseRecommendation()\"/>\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\"/>\n </div>\n <div *ngIf=\"!(data?.fromRequestPage) || (fromMdo && data?.requestStatus.toLowerCase() === 'pending')\">\n <input class=\"btn-active\" type=\"button\" value=\"Edit\" (click)=\"editCBPPlan()\"/>\n </div>\n </div>\n</div>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:18px;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:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .sinput{border-radius:4px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato}.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:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #1B4CA1;border-right:2px solid #1B4CA1;background:#edf1f8}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #E24577;border-right:2px solid #E24577;background:#f8d2de;margin:0 10px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #7B47A4;border-right:2px solid #7B47A4;background:#dfd3e9;margin:0 10px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px;border-left:2px solid #F8B861;background:#fde8cc;margin:0 10px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:24px;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: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;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0;padding:5px 10px}.functional-pill{display:flex;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0;padding:5px 10px}.domain-pill{display:flex;justify-content:center;align-items:center;gap:10px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0;padding:5px 10px}.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:6px}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.designation{color:#1b4ca1;font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal}.wing-text{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.responsibility-text{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.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}.competency-grid{display:flex;flex-wrap:wrap;gap:12px}.competency-item{flex:0 0 calc(33.333% - 12px);box-sizing:border-box;background-color:#f5f5f5;padding:4px 10px;border-radius:6px;display:flex;justify-content:space-between;align-items:center}.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}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:column}\n"] }]
|
|
6085
6085
|
}], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
6086
6086
|
type: Inject,
|
|
6087
6087
|
args: [MAT_DIALOG_DATA]
|
|
@@ -12628,6 +12628,12 @@ class ViewFinalCbpPlanComponent {
|
|
|
12628
12628
|
// ✅ LOCAL UNIQUE SETS (per designation)
|
|
12629
12629
|
const totalSet = new Set();
|
|
12630
12630
|
const behavioralSet = new Set();
|
|
12631
|
+
const behavioralSetForProficiencyLevel = [];
|
|
12632
|
+
const behavioralSetForDeliveryMode = [];
|
|
12633
|
+
const functionalSetForProficiencyLevel = [];
|
|
12634
|
+
const functionalSetForDeliveryMode = [];
|
|
12635
|
+
const domainSetForProficiencyLevel = [];
|
|
12636
|
+
const domainSetForDeliveryMode = [];
|
|
12631
12637
|
const functionalSet = new Set();
|
|
12632
12638
|
const domainSet = new Set();
|
|
12633
12639
|
let competenciesObj = { total: 0, behavioral: 0, functional: 0, domain: 0 };
|
|
@@ -12645,14 +12651,20 @@ class ViewFinalCbpPlanComponent {
|
|
|
12645
12651
|
}
|
|
12646
12652
|
if (type === 'behavioral' && !behavioralSet.has(key)) {
|
|
12647
12653
|
behavioralSet.add(key);
|
|
12654
|
+
behavioralSetForProficiencyLevel.push(`${c?.proficiency_level || ''}`);
|
|
12655
|
+
behavioralSetForDeliveryMode.push(`${c?.delivery_mode || ''}`);
|
|
12648
12656
|
competenciesObj.behavioral++;
|
|
12649
12657
|
}
|
|
12650
12658
|
if (type === 'functional' && !functionalSet.has(key)) {
|
|
12651
12659
|
functionalSet.add(key);
|
|
12660
|
+
functionalSetForProficiencyLevel.push(`${c?.proficiency_level || ''}`);
|
|
12661
|
+
functionalSetForDeliveryMode.push(`${c?.delivery_mode || ''}`);
|
|
12652
12662
|
competenciesObj.functional++;
|
|
12653
12663
|
}
|
|
12654
12664
|
if (type === 'domain' && !domainSet.has(key)) {
|
|
12655
12665
|
domainSet.add(key);
|
|
12666
|
+
domainSetForProficiencyLevel.push(`${c?.proficiency_level || ''}`);
|
|
12667
|
+
domainSetForDeliveryMode.push(`${c?.delivery_mode || ''}`);
|
|
12656
12668
|
competenciesObj.domain++;
|
|
12657
12669
|
}
|
|
12658
12670
|
// ✅ GLOBAL UNIQUE TRACKING
|
|
@@ -12672,6 +12684,12 @@ class ViewFinalCbpPlanComponent {
|
|
|
12672
12684
|
activities: res[i].activities,
|
|
12673
12685
|
competenciesObj,
|
|
12674
12686
|
behavioralCompetencies: [...behavioralSet],
|
|
12687
|
+
behavioralSetForProficiencyLevel: [...behavioralSetForProficiencyLevel],
|
|
12688
|
+
behavioralSetForDeliveryMode: [...behavioralSetForDeliveryMode],
|
|
12689
|
+
functionalSetForProficiencyLevel: [...functionalSetForProficiencyLevel],
|
|
12690
|
+
functionalSetForDeliveryMode: [...functionalSetForDeliveryMode],
|
|
12691
|
+
domainSetForProficiencyLevel: [...domainSetForProficiencyLevel],
|
|
12692
|
+
domainSetForDeliveryMode: [...domainSetForDeliveryMode],
|
|
12675
12693
|
functionalCompetencies: [...functionalSet],
|
|
12676
12694
|
domainCompetencies: [...domainSet],
|
|
12677
12695
|
selectedCourses: res[i]?.cbp_plans?.at(-1)?.selected_courses || []
|
|
@@ -12716,6 +12734,12 @@ class ViewFinalCbpPlanComponent {
|
|
|
12716
12734
|
// ✅ LOCAL UNIQUE SETS (per designation)
|
|
12717
12735
|
const totalSet = new Set();
|
|
12718
12736
|
const behavioralSet = new Set();
|
|
12737
|
+
const behavioralSetForProficiencyLevel = [];
|
|
12738
|
+
const behavioralSetForDeliveryMode = [];
|
|
12739
|
+
const domainSetForProficiencyLevel = [];
|
|
12740
|
+
const domainSetForDeliveryMode = [];
|
|
12741
|
+
const functionalSetForProficiencyLevel = [];
|
|
12742
|
+
const functionalSetForDeliveryMode = [];
|
|
12719
12743
|
const functionalSet = new Set();
|
|
12720
12744
|
const domainSet = new Set();
|
|
12721
12745
|
let competenciesObj = { total: 0, behavioral: 0, functional: 0, domain: 0 };
|
|
@@ -12733,14 +12757,20 @@ class ViewFinalCbpPlanComponent {
|
|
|
12733
12757
|
}
|
|
12734
12758
|
if (type === 'behavioral' && !behavioralSet.has(key)) {
|
|
12735
12759
|
behavioralSet.add(key);
|
|
12760
|
+
behavioralSetForProficiencyLevel.push(`${c?.proficiency_level || ''}`);
|
|
12761
|
+
behavioralSetForDeliveryMode.push(`${c?.delivery_mode || ''}`);
|
|
12736
12762
|
competenciesObj.behavioral++;
|
|
12737
12763
|
}
|
|
12738
12764
|
if (type === 'functional' && !functionalSet.has(key)) {
|
|
12739
12765
|
functionalSet.add(key);
|
|
12766
|
+
functionalSetForProficiencyLevel.push(`${c?.proficiency_level || ''}`);
|
|
12767
|
+
functionalSetForDeliveryMode.push(`${c?.delivery_mode || ''}`);
|
|
12740
12768
|
competenciesObj.functional++;
|
|
12741
12769
|
}
|
|
12742
12770
|
if (type === 'domain' && !domainSet.has(key)) {
|
|
12743
12771
|
domainSet.add(key);
|
|
12772
|
+
domainSetForProficiencyLevel.push(`${c?.proficiency_level || ''}`);
|
|
12773
|
+
domainSetForDeliveryMode.push(`${c?.delivery_mode || ''}`);
|
|
12744
12774
|
competenciesObj.domain++;
|
|
12745
12775
|
}
|
|
12746
12776
|
// ✅ GLOBAL UNIQUE TRACKING
|
|
@@ -12760,11 +12790,18 @@ class ViewFinalCbpPlanComponent {
|
|
|
12760
12790
|
activities: res[i].activities,
|
|
12761
12791
|
competenciesObj,
|
|
12762
12792
|
behavioralCompetencies: [...behavioralSet],
|
|
12793
|
+
behavioralSetForProficiencyLevel: [...behavioralSetForProficiencyLevel],
|
|
12794
|
+
behavioralSetForDeliveryMode: [...behavioralSetForDeliveryMode],
|
|
12795
|
+
functionalSetForProficiencyLevel: [...functionalSetForProficiencyLevel],
|
|
12796
|
+
functionalSetForDeliveryMode: [...functionalSetForDeliveryMode],
|
|
12797
|
+
domainSetForProficiencyLevel: [...domainSetForProficiencyLevel],
|
|
12798
|
+
domainSetForDeliveryMode: [...domainSetForDeliveryMode],
|
|
12763
12799
|
functionalCompetencies: [...functionalSet],
|
|
12764
12800
|
domainCompetencies: [...domainSet],
|
|
12765
12801
|
selectedCourses: res[i]?.cbp_plans?.at(-1)?.selected_courses || []
|
|
12766
12802
|
});
|
|
12767
12803
|
}
|
|
12804
|
+
console.log('this.designationData', this.designationData);
|
|
12768
12805
|
// ✅ SET GLOBAL COUNTS AFTER LOOP
|
|
12769
12806
|
this.totalCompetencieObj.total = globalTotalSet.size;
|
|
12770
12807
|
this.totalCompetencieObj.behavioral = globalBehavioralSet.size;
|
|
@@ -12873,6 +12910,12 @@ class ViewFinalCbpPlanComponent {
|
|
|
12873
12910
|
// ✅ LOCAL UNIQUE SETS (per designation)
|
|
12874
12911
|
const totalSet = new Set();
|
|
12875
12912
|
const behavioralSet = new Set();
|
|
12913
|
+
const behavioralSetForProficiencyLevel = [];
|
|
12914
|
+
const behavioralSetForDeliveryMode = [];
|
|
12915
|
+
const functionalSetForProficiencyLevel = [];
|
|
12916
|
+
const functionalSetForDeliveryMode = [];
|
|
12917
|
+
const domainSetForProficiencyLevel = [];
|
|
12918
|
+
const domainSetForDeliveryMode = [];
|
|
12876
12919
|
const functionalSet = new Set();
|
|
12877
12920
|
const domainSet = new Set();
|
|
12878
12921
|
let competenciesObj = { total: 0, behavioral: 0, functional: 0, domain: 0 };
|
|
@@ -12890,14 +12933,20 @@ class ViewFinalCbpPlanComponent {
|
|
|
12890
12933
|
}
|
|
12891
12934
|
if (type === 'behavioral' && !behavioralSet.has(key)) {
|
|
12892
12935
|
behavioralSet.add(key);
|
|
12936
|
+
behavioralSetForProficiencyLevel.push(`${c?.proficiency_level || ''}`);
|
|
12937
|
+
behavioralSetForDeliveryMode.push(`${c?.delivery_mode || ''}`);
|
|
12893
12938
|
competenciesObj.behavioral++;
|
|
12894
12939
|
}
|
|
12895
12940
|
if (type === 'functional' && !functionalSet.has(key)) {
|
|
12896
12941
|
functionalSet.add(key);
|
|
12942
|
+
functionalSetForProficiencyLevel.push(`${c?.proficiency_level || ''}`);
|
|
12943
|
+
functionalSetForDeliveryMode.push(`${c?.delivery_mode || ''}`);
|
|
12897
12944
|
competenciesObj.functional++;
|
|
12898
12945
|
}
|
|
12899
12946
|
if (type === 'domain' && !domainSet.has(key)) {
|
|
12900
12947
|
domainSet.add(key);
|
|
12948
|
+
domainSetForProficiencyLevel.push(`${c?.proficiency_level || ''}`);
|
|
12949
|
+
domainSetForDeliveryMode.push(`${c?.delivery_mode || ''}`);
|
|
12901
12950
|
competenciesObj.domain++;
|
|
12902
12951
|
}
|
|
12903
12952
|
// ✅ GLOBAL UNIQUE TRACKING
|
|
@@ -12918,6 +12967,12 @@ class ViewFinalCbpPlanComponent {
|
|
|
12918
12967
|
competenciesObj,
|
|
12919
12968
|
behavioralCompetencies: [...behavioralSet],
|
|
12920
12969
|
functionalCompetencies: [...functionalSet],
|
|
12970
|
+
behavioralSetForProficiencyLevel: [...behavioralSetForProficiencyLevel],
|
|
12971
|
+
behavioralSetForDeliveryMode: [...behavioralSetForDeliveryMode],
|
|
12972
|
+
functionalSetForProficiencyLevel: [...functionalSetForProficiencyLevel],
|
|
12973
|
+
functionalSetForDeliveryMode: [...functionalSetForDeliveryMode],
|
|
12974
|
+
domainSetForProficiencyLevel: [...domainSetForProficiencyLevel],
|
|
12975
|
+
domainSetForDeliveryMode: [...domainSetForDeliveryMode],
|
|
12921
12976
|
domainCompetencies: [...domainSet],
|
|
12922
12977
|
selectedCourses: res[i]?.cbp_plans?.at(-1)?.selected_courses || []
|
|
12923
12978
|
});
|
|
@@ -13333,11 +13388,11 @@ class ViewFinalCbpPlanComponent {
|
|
|
13333
13388
|
}
|
|
13334
13389
|
}
|
|
13335
13390
|
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 }); }
|
|
13336
|
-
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>\n </div>\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>\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>\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}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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"] }] }); }
|
|
13391
|
+
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 >\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 >\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 >\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 >\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 >\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 >\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}.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"] }] }); }
|
|
13337
13392
|
}
|
|
13338
13393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewFinalCbpPlanComponent, decorators: [{
|
|
13339
13394
|
type: Component,
|
|
13340
|
-
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>\n </div>\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>\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>\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}\n"] }]
|
|
13395
|
+
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 >\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 >\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 >\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 >\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 >\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 >\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}.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"] }]
|
|
13341
13396
|
}], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
13342
13397
|
type: Inject,
|
|
13343
13398
|
args: [MAT_DIALOG_DATA]
|
|
@@ -15153,11 +15208,11 @@ class RoleMappingListComponent {
|
|
|
15153
15208
|
this.isCompetencyInfoOpen = false;
|
|
15154
15209
|
}
|
|
15155
15210
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoleMappingListComponent, deps: [{ token: SharedService }, { token: i1$1.MatDialog }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15156
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RoleMappingListComponent, selector: "app-role-mapping-list", inputs: { formData: "formData" }, outputs: { moveToInitialScreen: "moveToInitialScreen" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"role-mapping-container\">\n <div class=\"container-fluid\">\n\n <mat-card class=\"mt-0 pt-0\">\n <div class=\"section-header\">\n\n </div>\n <div class=\"edit-section mt-4\">\n <div class=\"select-map-route-container\">\n <div class=\"select-map-flex-container\">\n <div class=\"select-map-flex\">\n <div class=\"selected-mapping-route\">\n <p>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name\">\n / {{ sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name }}\n </span>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"moveToInitialScreenLayout('edit')\">\n <mat-icon>edit</mat-icon>Edit\n </div>\n <!-- <div class=\"cursor-pointer ml-10\">-->\n <!-- <button class=\"btn-active cursor-pointer\" (click)=\"moveToInitialScreenLayout('add')\">-->\n <!-- <mat-icon>add</mat-icon>-->\n <!-- Create New CBP-->\n <!-- </button>-->\n <!-- </div>-->\n </div>\n <div>\n <div class=\"view-final-cbp-plan\">\n <!-- <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('cbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div> -->\n\n <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('acbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"search-filter-section mt-2\">\n <div class=\"search flex margin-right-m search-flex\">\n <div class=\"mt-2\">\n <div class=\"search-container\">\n <div class=\"rsearch\">\n <mat-icon\n class=\"color-60 search-icon mat-icon notranslate material-icons mat-icon-no-color\">search</mat-icon>\n <input class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\" label=\"\"\n (input)=\"applyFilter()\" placeholder=\"Search by designation name\" type=\"Standard\">\n <mat-icon *ngIf=\"searchText.trim().length > 0\"\n class=\"color-60 clear-icon mat-icon notranslate material-icons mat-icon-no-color cursor-pointer\"\n (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n <div class=\"pl-2 mt-2\">\n <input [disabled]=\"searchText.trim()?.length === 0\"\n [ngClass]=\"searchText.trim()?.length === 0 ? 'btn-disable':'btn-active'\"\n type=\"button\" value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n <div class=\"filter-section flex margin-top-15\">\n <!-- <div>\n <label class=\"label\">Filter by competency type</label>\n <div>\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select [(value)]=\"selectedValue\" placeholder=\"Select Ministry\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"'test'\">Test</mat-option>\n <mat-option [value]=\"'another'\">Another</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div> -->\n <div class=\"btn-group\">\n <div class=\"ml-2\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Designation\"\n (click)=\"addMoreDesignation()\" />\n </div>\n <div class=\"ml-2\" *ngIf=\"activeTab === 'matched'\">\n <button\n [ngClass]=\"selection.selected.length ? 'btn-active-outline' : 'btn-active-outline-disable'\"\n (click)=\"sendForApprovalForm()\">\n <mat-icon>send</mat-icon>\n Send For Approval\n <span *ngIf=\"selection.selected.length\">({{selection.selected.length}})</span>\n </button>\n </div>\n\n\n </div>\n </div>\n </div>\n <div class=\"role-mapping-tabs mt-3\">\n <button class=\"role-tab\" [class.active]=\"activeTab === 'matched'\" (click)=\"setDataSoure('matched')\">\n <span class=\"dot\"></span>\n Matched role mappings\n <span class=\"badge blue\">{{matchedRoleMapping}}</span>\n </button>\n\n <button class=\"role-tab table-body-unmatched\" [class.active]=\"activeTab === 'unmatched'\"\n (click)=\"setDataSoure('unmatched')\">\n <span class=\"dot red\"></span>\n Unmatched role mapping\n <span class=\"badge red\">{{unMatchedRoleMapping}}</span>\n </button>\n </div>\n <div class=\"nav-container\">\n <div class=\"sidenav-content\">\n <div class=\"table-class\">\n <ng-container *ngIf=\"dataSource?.filteredData?.length > 0\">\n <!-- <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"RequestId\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request ID </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.demand_id}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"title\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Title </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.title}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestor\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requestor </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.ownerName}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestType\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Type </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.requestType}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestStatus\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Status </th>\n\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <span [ngClass]=\"getStatusClass(element?.status)\">{{element?.status ===\n statusKey.fullfill ? 'Fulfilled'\n : element?.status}}</span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"assignee\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Assignee </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n {{element?.assignedProvider ?\n element?.assignedProvider : 'Not Assigned' }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestedOn\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requested On </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.createdOn |\n date}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"interests\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Interests</th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <a class=\"action-btn-view\" *ngIf=\"element?.interestCount!== 0\"\n href=\"javascript:void(0)\" [ngStyle]=\"getPointerEventsStyle(element)\">\n <span (click)=\"handleClick(element)\">\n {{element?.interestCount}}\n </span></a>\n <a class=\"\" *ngIf=\"element?.interestCount === 0\"\n href=\"javascript:void(0)\">{{element?.requestType ==\n 'Single' ? 'N/A' : element?.interestCount}}</a>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"details\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Details</th>\n <td mat-cell *matCellDef=\"let element\">\n <mat-icon (click)=\"navigateToDetails(element?.demand_id)\"\n class=\"cursor-pointer\">visibility</mat-icon>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\"></th>\n <td mat-cell *matCellDef=\"let element\">\n\n\n <span>\n <button mat-icon-button [matMenuTriggerFor]=\"menu\"\n aria-label=\"Example icon-button with a menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"onClickMenu(element,'viewContent')\">\n <span>View</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Unassigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid \"\n mat-menu-item (click)=\"onClickMenu(element,'invalidContent')\">\n <span>Mark as invalid</span>\n </button>\n <button mat-menu-item\n *ngIf=\"element?.status!== statusKey.Assigned && element?.interestCount >0 && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill\"\n (click)=\"onClickMenu(element,'assignContent')\">\n <span>Assign</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Assigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill \"\n mat-menu-item (click)=\"onClickMenu(element,'reAssignContent')\">\n <span> Re-Assign</span>\n </button>\n <button mat-menu-item (click)=\"onClickMenu(element,'copyContent')\">\n <span>Copy</span>\n </button>\n </mat-menu>\n </span>\n </td>\n\n\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\" class=\"table-row-data\"></tr>\n <tr mat-row *matRowDef=\"let row;columns:displayedColumns\"></tr>\n\n\n </table> -->\n <div class=\"table-container mt-4\" style=\"overflow: auto;\">\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z1\"\n [ngClass]=\"activeTab === 'matched'? 'table-body': 'table-body-unmatched'\">\n <!-- Selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef [hidden]=\"activeTab !== 'matched'\">\n <mat-checkbox class=\"radio-style-checkbox\" (change)=\"toggleAllRows($event)\"\n [checked]=\"isAllSelected()\" [indeterminate]=\"isSomeSelected()\"\n [disabled]=\"!hasSelectableRows()\">\n </mat-checkbox>\n </th>\n\n <td mat-cell *matCellDef=\"let row\" [hidden]=\"activeTab !== 'matched'\">\n <span matTooltip=\"Please generate & save course recommendation to select. Course recommendation generation & save is pending.\"\n [matTooltipDisabled]=\"!getActivateCbpPlan(row)\">\n <mat-checkbox class=\"radio-style-checkbox\"\n (click)=\"$event.stopPropagation()\" (change)=\"toggleRow(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"getActivateCbpPlan(row)\" [ngClass]=\" getActivateCbpPlan(row)? 'grayd-disable':''\">\n </mat-checkbox>\n </span>\n </td>\n </ng-container>\n <!-- Designation Name -->\n <ng-container matColumnDef=\"designation_name\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Designation\n </th>\n <td class=\"cursor-pointer\" mat-cell *matCellDef=\"let element\"\n (click)=\"viewCBPPlan(element)\">\n <div\n [ngClass]=\"activeTab === 'matched'? 'designation-text': 'designation-text-unmatched'\">\n <p class=\"designation\">{{ element?.designation_name }} </p>\n <p class=\"wing-text mt-2\">Wing/Division - {{\n element?.wing_division_section }} </p>\n </div>\n\n </td>\n </ng-container>\n\n <!-- Role & Responsibilities -->\n <ng-container matColumnDef=\"role_responsibilities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Role &\n Responsibilities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let role of (isResponisbilityExpanded(element.id) ? element.role_responsibilities : element.role_responsibilities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ role }}</li>\n <li *ngIf=\"element.role_responsibilities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'role_responsibilities')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n <!-- {{ isResponisbilityExpanded(element.id) ? 'View Less' : 'View More' }} -->\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n <!-- Activities -->\n <ng-container matColumnDef=\"activities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Activities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let activity of (isActivityExpanded(element.id) ? element.activities : element.activities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ activity }}</li>\n <li *ngIf=\"element.activities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'activity')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Behavioral Competencies -->\n <ng-container matColumnDef=\"behavioral\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Behavioral\n Competencies <mat-icon (click)=\"openCompetencyInfo()\">info_outline</mat-icon> </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of (isBehavioralExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Behavioral') : getCompetenciesByType(element.competencies, 'Behavioral').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Behavioral').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'behavioral')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Functional Competencies -->\n <ng-container matColumnDef=\"functional\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Functional\n Competencies <mat-icon (click)=\"openCompetencyInfo()\">info_outline</mat-icon></th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of (isFunctionalExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Functional') : getCompetenciesByType(element.competencies, 'Functional').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </div>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Functional').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'functional')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Domain Competencies -->\n <ng-container matColumnDef=\"domain\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Domain\n Competencies <mat-icon (click)=\"openCompetencyInfo()\">info_outline</mat-icon> </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of (isDomainExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Domain') : getCompetenciesByType(element.competencies, 'Domain').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </div>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Domain').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'domain')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Actions -->\n <ng-container matColumnDef=\"action\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #actionMenu=\"matMenu\">\n <button mat-menu-item (click)=\"editRoleMapping(element)\">\n <mat-icon>edit</mat-icon>\n <span>Edit Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"viewCBPPlan(element)\">\n <mat-icon>visibility</mat-icon>\n <span>View Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"generateCourseRecommendation(element)\">\n <mat-icon>school</mat-icon>\n <span>Generate Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"viewCourseRecommendation(element)\">\n <mat-icon>preview</mat-icon>\n <span>View Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"deleteRoleMapping(element)\">\n <mat-icon>delete</mat-icon>\n <span>Delete Role Mapping</span>\n </button>\n <button *ngIf=\"activeTab !== 'matched'\" mat-menu-item (click)=\"sendForDesignationNameApproval(element)\">\n <mat-icon>send</mat-icon>\n <span>Send for Designation Name Approval</span>\n </button>\n </mat-menu>\n </td>\n </ng-container>\n\n <!-- Header & Rows -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n\n <!-- Pagination -->\n <mat-paginator [length]=\"totalRoleMappingListCount\" [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\" (page)=\"pageChangeEvent($event)\"\n [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons>\n </mat-paginator>\n </div>\n\n </ng-container>\n\n <div class=\"no-cbp-data\" *ngIf=\"dataSource?.filteredData?.length === 0\">\n <!-- <div><img src=\"/mdo-assets/images/no-content-data.svg\" alt=\"no-content\"></div> -->\n <div class=\"sub-heading mt-4\">\n <p>No role mappings available in this category</p>\n </div>\n <!-- <div class=\" margin-top-m no-content-create\">\n <button mat-button type=\"button\" class=\"search-btns\"\n [routerLink]=\"['/app/home/create-request-form']\">Request Content</button>\n </div> -->\n\n </div>\n\n <!-- <mat-paginator *ngIf=\"dataSource?.filteredData?.length > 0\" [pageSize]=\"pageSize\"\n [length]=\"this.requestCount\" [pageSizeOptions]=\"[10,20,40]\"\n (page)=\"onChangePage($event)\"></mat-paginator> -->\n\n\n </div>\n\n\n\n </div>\n </div>\n </mat-card>\n </div>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>\n\n<div\n class=\"competency-modal-backdrop\"\n *ngIf=\"isCompetencyInfoOpen\"\n (click)=\"closeCompetencyInfo()\"\n>\n <div\n class=\"competency-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"competency-modal-title\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- Close Button -->\n <button\n type=\"button\"\n class=\"modal-close-btn\"\n (click)=\"closeCompetencyInfo()\"\n aria-label=\"Close\"\n >\n \u00D7\n </button>\n\n <!-- Title -->\n <h2 id=\"competency-modal-title\">\n What do the competency tags mean?\n </h2>\n\n <!-- Description -->\n <p class=\"modal-description\">\n Every competency carries two tags: how deeply this designation needs it,\n and how the training for it is delivered.\n </p>\n\n <!-- Proficiency -->\n <div class=\"competency-section\">\n <h3>\n PROFICIENCY LEVEL \u2014 THE DEPTH THIS DESIGNATION NEEDS\n </h3>\n\n <div class=\"tag-info-row\">\n <span class=\"proficiency-tag strategic\">\n Strategic\n </span>\n\n <span class=\"tag-description\">\n Shapes policy, direction and outcomes\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"proficiency-tag tactical\">\n Tactical\n </span>\n\n <span class=\"tag-description\">\n Plans, coordinates and turns direction into programmes\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"proficiency-tag operational\">\n Operational\n </span>\n\n <span class=\"tag-description\">\n Executes and delivers the work on the ground\n </span>\n </div>\n </div>\n\n <!-- Delivery Mode -->\n <div class=\"competency-section delivery-section\">\n <h3>\n DELIVERY MODE \u2014 HOW THE TRAINING IS DELIVERED\n </h3>\n\n <div class=\"tag-info-row\">\n <span class=\"delivery-mode-tag online\">\n Online\n </span>\n\n <span class=\"tag-description\">\n Self-paced, knowledge-based content\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"delivery-mode-tag offline\">\n Offline\n </span>\n\n <span class=\"tag-description\">\n Needs physical presence or supervised practice\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"delivery-mode-tag blended\">\n Blended\n </span>\n\n <span class=\"tag-description\">\n Concept combined with applied practice or coaching\n </span>\n </div>\n </div>\n\n </div>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;font-style:normal;font-weight:700;line-height:150%}:host ::ng-deep input.mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}:host ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}:host ::ng-deep .mat-select-panel{background-color:#fff!important}:host ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:10px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:600px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px 10px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex}.outside-layer{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.designation{color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:700;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.wing-text{color:#000000e0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal}.role-item{color:#000000e0;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.view-final-cbp-plan{display:flex;justify-content:end;align-items:center;gap:8px}.view-final-cbp-plan-text{padding:4px 16px;border-radius:24px;border:2px solid #F3962F;background:var(--white-kb-white-100, #FFF);box-shadow:0 1px 10px #276de599;color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:normal}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cursor-pointer{cursor:pointer}.ml-10{margin-left:10px}.table-container{border-top-left-radius:16px;border-top-right-radius:16px;overflow:auto;background:#fff;max-height:70vh}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;background:#fff;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child):after{content:\"\";position:absolute;top:12px;bottom:12px;right:0;width:1px;background-color:#e0e0e0}.table-header{font-size:16px;font-weight:600;background:#fff!important;color:#333}.table-header-unmatched{font-size:16px;font-weight:600;background:#f4dcde!important;color:#b42318}.table-body{background-color:#fff!important}.table-body-unmatched{background-color:#faf6f7!important}.designation-text-unmatched p{color:#b42318!important}.select-map-flex-container{display:flex;flex-direction:row;justify-content:space-between;width:100%}.select-map-flex{display:flex}.search-container-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;align-items:flex-start}.mt-6{margin-top:1.7rem}.mat-elevation-z1 .mat-mdc-cell{vertical-align:top!important;padding-top:8px;padding-bottom:8px}::ng-deep .radio-style-checkbox .mat-checkbox-frame{border-radius:50%}::ng-deep .radio-style-checkbox .mat-checkbox-background{border-radius:50%}.search-flex{display:flex;flex-direction:row;width:100%}.margin-top-15{margin-top:15px}.btn-active-outline{border-radius:10px;opacity:1;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;width:240px;border:none;background-color:transparent;cursor:pointer}.btn-active-outline-disable{border-radius:10px;opacity:.5;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;width:auto;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:240px;background-color:transparent;cursor:not-allowed}.role-mapping-tabs{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif}.role-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;border:1px solid #d0d5dd;background-color:#f9fafb;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease-in-out}.role-tab.active{border-color:#1b4ca1;background-color:#eff6ff;color:#1b4ca1}.dot{width:10px;height:10px;border-radius:50%;background-color:#1b4ca1}.dot.red{background-color:#b42318}.badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}.badge.blue{background-color:#dbeafe;color:#1b4ca1}.badge.red{background-color:#fee2e2;color:#b42318}.grayd-disable{color:#d3d3d3!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:16px;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:column}.competency-info-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;padding:0}.info-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:1px solid #1b4ca1;border-radius:50%;color:#1b4ca1;font-size:14px;font-weight:700}.competency-modal-backdrop{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:#1923328c;animation:fadeIn .2s ease}.competency-modal{position:relative;width:100%;max-width:1000px;max-height:calc(100vh - 40px);overflow-y:auto;background:#fff;border-radius:16px;padding:40px 42px 38px;box-sizing:border-box;box-shadow:0 20px 50px #00000040;animation:modalSlideIn .25s ease}.modal-close-btn{position:absolute;top:26px;right:36px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#5b6778;font-size:44px;font-weight:300;line-height:1;cursor:pointer}.modal-close-btn:hover{color:#1b4ca1}.competency-modal h2{margin:0 0 16px;color:#293548;font-size:34px;font-weight:700;line-height:1.25}.modal-description{max-width:900px;margin:0 0 28px;color:#59687b;font-size:23px;font-weight:400;line-height:1.5}.competency-section{margin-top:26px}.delivery-section{margin-top:28px}.competency-section h3{margin:0 0 18px;color:#354154;font-size:21px;font-weight:700;letter-spacing:.5px;line-height:1.4}.tag-info-row{display:flex;align-items:center;gap:14px;margin-bottom:10px}.proficiency-tag,.delivery-mode-tag{width:140px;min-width:140px;display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:20px;font-size:17px;font-weight:600;line-height:1.2;box-sizing:border-box}.proficiency-tag.strategic{background:#1b4ca1;color:#fff}.proficiency-tag.tactical{background:#5b8def;color:#fff}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1}.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}.tag-description{color:#526174;font-size:21px;font-weight:400;line-height:1.4}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.competency-modal{padding:28px 22px}.competency-modal h2{padding-right:35px;font-size:26px}.modal-description{font-size:18px}.competency-section h3{font-size:17px}.tag-info-row{align-items:flex-start;flex-direction:column;gap:8px}.proficiency-tag,.delivery-mode-tag{width:140px}.tag-description{font-size:17px}.modal-close-btn{top:18px;right:18px}}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i14$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
15211
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RoleMappingListComponent, selector: "app-role-mapping-list", inputs: { formData: "formData" }, outputs: { moveToInitialScreen: "moveToInitialScreen" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"role-mapping-container\">\n <div class=\"container-fluid\">\n\n <mat-card class=\"mt-0 pt-0\">\n <div class=\"section-header\">\n\n </div>\n <div class=\"edit-section mt-4\">\n <div class=\"select-map-route-container\">\n <div class=\"select-map-flex-container\">\n <div class=\"select-map-flex\">\n <div class=\"selected-mapping-route\">\n <p>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name\">\n / {{ sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name }}\n </span>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"moveToInitialScreenLayout('edit')\">\n <mat-icon>edit</mat-icon>Edit\n </div>\n <!-- <div class=\"cursor-pointer ml-10\">-->\n <!-- <button class=\"btn-active cursor-pointer\" (click)=\"moveToInitialScreenLayout('add')\">-->\n <!-- <mat-icon>add</mat-icon>-->\n <!-- Create New CBP-->\n <!-- </button>-->\n <!-- </div>-->\n </div>\n <div>\n <div class=\"view-final-cbp-plan\">\n <!-- <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('cbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div> -->\n\n <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('acbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"search-filter-section mt-2\">\n <div class=\"search flex margin-right-m search-flex\">\n <div class=\"mt-2\">\n <div class=\"search-container\">\n <div class=\"rsearch\">\n <mat-icon\n class=\"color-60 search-icon mat-icon notranslate material-icons mat-icon-no-color\">search</mat-icon>\n <input class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\" label=\"\"\n (input)=\"applyFilter()\" placeholder=\"Search by designation name\" type=\"Standard\">\n <mat-icon *ngIf=\"searchText.trim().length > 0\"\n class=\"color-60 clear-icon mat-icon notranslate material-icons mat-icon-no-color cursor-pointer\"\n (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n <div class=\"pl-2 mt-2\">\n <input [disabled]=\"searchText.trim()?.length === 0\"\n [ngClass]=\"searchText.trim()?.length === 0 ? 'btn-disable':'btn-active'\"\n type=\"button\" value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n <div class=\"filter-section flex margin-top-15\">\n <!-- <div>\n <label class=\"label\">Filter by competency type</label>\n <div>\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select [(value)]=\"selectedValue\" placeholder=\"Select Ministry\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"'test'\">Test</mat-option>\n <mat-option [value]=\"'another'\">Another</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div> -->\n <div class=\"btn-group\">\n <div class=\"ml-2\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Designation\"\n (click)=\"addMoreDesignation()\" />\n </div>\n <div class=\"ml-2\" *ngIf=\"activeTab === 'matched'\">\n <button\n [ngClass]=\"selection.selected.length ? 'btn-active-outline' : 'btn-active-outline-disable'\"\n (click)=\"sendForApprovalForm()\">\n <mat-icon>send</mat-icon>\n Send For Approval\n <span *ngIf=\"selection.selected.length\">({{selection.selected.length}})</span>\n </button>\n </div>\n\n\n </div>\n </div>\n </div>\n <div class=\"role-mapping-tabs mt-3\">\n <button class=\"role-tab\" [class.active]=\"activeTab === 'matched'\" (click)=\"setDataSoure('matched')\">\n <span class=\"dot\"></span>\n Matched role mappings\n <span class=\"badge blue\">{{matchedRoleMapping}}</span>\n </button>\n\n <button class=\"role-tab table-body-unmatched\" [class.active]=\"activeTab === 'unmatched'\"\n (click)=\"setDataSoure('unmatched')\">\n <span class=\"dot red\"></span>\n Unmatched role mapping\n <span class=\"badge red\">{{unMatchedRoleMapping}}</span>\n </button>\n </div>\n <div class=\"nav-container\">\n <div class=\"sidenav-content\">\n <div class=\"table-class\">\n <ng-container *ngIf=\"dataSource?.filteredData?.length > 0\">\n <!-- <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"RequestId\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request ID </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.demand_id}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"title\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Title </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.title}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestor\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requestor </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.ownerName}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestType\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Type </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.requestType}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestStatus\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Status </th>\n\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <span [ngClass]=\"getStatusClass(element?.status)\">{{element?.status ===\n statusKey.fullfill ? 'Fulfilled'\n : element?.status}}</span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"assignee\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Assignee </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n {{element?.assignedProvider ?\n element?.assignedProvider : 'Not Assigned' }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestedOn\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requested On </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.createdOn |\n date}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"interests\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Interests</th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <a class=\"action-btn-view\" *ngIf=\"element?.interestCount!== 0\"\n href=\"javascript:void(0)\" [ngStyle]=\"getPointerEventsStyle(element)\">\n <span (click)=\"handleClick(element)\">\n {{element?.interestCount}}\n </span></a>\n <a class=\"\" *ngIf=\"element?.interestCount === 0\"\n href=\"javascript:void(0)\">{{element?.requestType ==\n 'Single' ? 'N/A' : element?.interestCount}}</a>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"details\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Details</th>\n <td mat-cell *matCellDef=\"let element\">\n <mat-icon (click)=\"navigateToDetails(element?.demand_id)\"\n class=\"cursor-pointer\">visibility</mat-icon>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\"></th>\n <td mat-cell *matCellDef=\"let element\">\n\n\n <span>\n <button mat-icon-button [matMenuTriggerFor]=\"menu\"\n aria-label=\"Example icon-button with a menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"onClickMenu(element,'viewContent')\">\n <span>View</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Unassigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid \"\n mat-menu-item (click)=\"onClickMenu(element,'invalidContent')\">\n <span>Mark as invalid</span>\n </button>\n <button mat-menu-item\n *ngIf=\"element?.status!== statusKey.Assigned && element?.interestCount >0 && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill\"\n (click)=\"onClickMenu(element,'assignContent')\">\n <span>Assign</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Assigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill \"\n mat-menu-item (click)=\"onClickMenu(element,'reAssignContent')\">\n <span> Re-Assign</span>\n </button>\n <button mat-menu-item (click)=\"onClickMenu(element,'copyContent')\">\n <span>Copy</span>\n </button>\n </mat-menu>\n </span>\n </td>\n\n\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\" class=\"table-row-data\"></tr>\n <tr mat-row *matRowDef=\"let row;columns:displayedColumns\"></tr>\n\n\n </table> -->\n <div class=\"table-container mt-4\" style=\"overflow: auto;\">\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z1\"\n [ngClass]=\"activeTab === 'matched'? 'table-body': 'table-body-unmatched'\">\n <!-- Selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef [hidden]=\"activeTab !== 'matched'\">\n <mat-checkbox class=\"radio-style-checkbox\" (change)=\"toggleAllRows($event)\"\n [checked]=\"isAllSelected()\" [indeterminate]=\"isSomeSelected()\"\n [disabled]=\"!hasSelectableRows()\">\n </mat-checkbox>\n </th>\n\n <td mat-cell *matCellDef=\"let row\" [hidden]=\"activeTab !== 'matched'\">\n <span matTooltip=\"Please generate & save course recommendation to select. Course recommendation generation & save is pending.\"\n [matTooltipDisabled]=\"!getActivateCbpPlan(row)\">\n <mat-checkbox class=\"radio-style-checkbox\"\n (click)=\"$event.stopPropagation()\" (change)=\"toggleRow(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"getActivateCbpPlan(row)\" [ngClass]=\" getActivateCbpPlan(row)? 'grayd-disable':''\">\n </mat-checkbox>\n </span>\n </td>\n </ng-container>\n <!-- Designation Name -->\n <ng-container matColumnDef=\"designation_name\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Designation\n </th>\n <td class=\"cursor-pointer\" mat-cell *matCellDef=\"let element\"\n (click)=\"viewCBPPlan(element)\">\n <div\n [ngClass]=\"activeTab === 'matched'? 'designation-text': 'designation-text-unmatched'\">\n <p class=\"designation\">{{ element?.designation_name }} </p>\n <p class=\"wing-text mt-2\">Wing/Division - {{\n element?.wing_division_section }} </p>\n </div>\n\n </td>\n </ng-container>\n\n <!-- Role & Responsibilities -->\n <ng-container matColumnDef=\"role_responsibilities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Role &\n Responsibilities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let role of (isResponisbilityExpanded(element.id) ? element.role_responsibilities : element.role_responsibilities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ role }}</li>\n <li *ngIf=\"element.role_responsibilities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'role_responsibilities')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n <!-- {{ isResponisbilityExpanded(element.id) ? 'View Less' : 'View More' }} -->\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n <!-- Activities -->\n <ng-container matColumnDef=\"activities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Activities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let activity of (isActivityExpanded(element.id) ? element.activities : element.activities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ activity }}</li>\n <li *ngIf=\"element.activities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'activity')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Behavioral Competencies -->\n <ng-container matColumnDef=\"behavioral\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Behavioral\n Competencies <mat-icon class=\"icon-cursor\" (click)=\"openCompetencyInfo()\">info_outline</mat-icon> </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of (isBehavioralExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Behavioral') : getCompetenciesByType(element.competencies, 'Behavioral').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Behavioral').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'behavioral')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Functional Competencies -->\n <ng-container matColumnDef=\"functional\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Functional\n Competencies <mat-icon class=\"icon-cursor\" (click)=\"openCompetencyInfo()\">info_outline</mat-icon></th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of (isFunctionalExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Functional') : getCompetenciesByType(element.competencies, 'Functional').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Functional').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'functional')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Domain Competencies -->\n <ng-container matColumnDef=\"domain\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Domain\n Competencies <mat-icon class=\"icon-cursor\" (click)=\"openCompetencyInfo()\">info_outline</mat-icon> </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of (isDomainExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Domain') : getCompetenciesByType(element.competencies, 'Domain').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Domain').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'domain')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Actions -->\n <ng-container matColumnDef=\"action\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #actionMenu=\"matMenu\">\n <button mat-menu-item (click)=\"editRoleMapping(element)\">\n <mat-icon>edit</mat-icon>\n <span>Edit Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"viewCBPPlan(element)\">\n <mat-icon>visibility</mat-icon>\n <span>View Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"generateCourseRecommendation(element)\">\n <mat-icon>school</mat-icon>\n <span>Generate Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"viewCourseRecommendation(element)\">\n <mat-icon>preview</mat-icon>\n <span>View Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"deleteRoleMapping(element)\">\n <mat-icon>delete</mat-icon>\n <span>Delete Role Mapping</span>\n </button>\n <button *ngIf=\"activeTab !== 'matched'\" mat-menu-item (click)=\"sendForDesignationNameApproval(element)\">\n <mat-icon>send</mat-icon>\n <span>Send for Designation Name Approval</span>\n </button>\n </mat-menu>\n </td>\n </ng-container>\n\n <!-- Header & Rows -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n\n <!-- Pagination -->\n <mat-paginator [length]=\"totalRoleMappingListCount\" [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\" (page)=\"pageChangeEvent($event)\"\n [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons>\n </mat-paginator>\n </div>\n\n </ng-container>\n\n <div class=\"no-cbp-data\" *ngIf=\"dataSource?.filteredData?.length === 0\">\n <!-- <div><img src=\"/mdo-assets/images/no-content-data.svg\" alt=\"no-content\"></div> -->\n <div class=\"sub-heading mt-4\">\n <p>No role mappings available in this category</p>\n </div>\n <!-- <div class=\" margin-top-m no-content-create\">\n <button mat-button type=\"button\" class=\"search-btns\"\n [routerLink]=\"['/app/home/create-request-form']\">Request Content</button>\n </div> -->\n\n </div>\n\n <!-- <mat-paginator *ngIf=\"dataSource?.filteredData?.length > 0\" [pageSize]=\"pageSize\"\n [length]=\"this.requestCount\" [pageSizeOptions]=\"[10,20,40]\"\n (page)=\"onChangePage($event)\"></mat-paginator> -->\n\n\n </div>\n\n\n\n </div>\n </div>\n </mat-card>\n </div>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>\n\n<div\n class=\"competency-modal-backdrop\"\n *ngIf=\"isCompetencyInfoOpen\"\n (click)=\"closeCompetencyInfo()\"\n>\n <div\n class=\"competency-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"competency-modal-title\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- Close Button -->\n <button\n type=\"button\"\n class=\"modal-close-btn\"\n (click)=\"closeCompetencyInfo()\"\n aria-label=\"Close\"\n >\n \u00D7\n </button>\n\n <!-- Title -->\n <h2 id=\"competency-modal-title\">\n What do the competency tags mean?\n </h2>\n\n <!-- Description -->\n <p class=\"modal-description\">\n Every competency carries two tags: how deeply this designation needs it,\n and how the training for it is delivered.\n </p>\n\n <!-- Proficiency -->\n <div class=\"competency-section\">\n <h3>\n PROFICIENCY LEVEL \u2014 THE DEPTH THIS DESIGNATION NEEDS\n </h3>\n\n <div class=\"tag-info-row\">\n <span class=\"proficiency-tag-modal strategic\">\n Strategic\n </span>\n\n <span class=\"tag-description\">\n Shapes policy, direction and outcomes\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"proficiency-tag-modal tactical\">\n Tactical\n </span>\n\n <span class=\"tag-description\">\n Plans, coordinates and turns direction into programmes\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"proficiency-tag-modal operational\">\n Operational\n </span>\n\n <span class=\"tag-description\">\n Executes and delivers the work on the ground\n </span>\n </div>\n </div>\n\n <!-- Delivery Mode -->\n <div class=\"competency-section delivery-section\">\n <h3>\n DELIVERY MODE \u2014 HOW THE TRAINING IS DELIVERED\n </h3>\n\n <div class=\"tag-info-row\">\n <span class=\"delivery-mode-tag-modal online\">\n Online\n </span>\n\n <span class=\"tag-description\">\n Self-paced, knowledge-based content\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"delivery-mode-tag-modal offline\">\n Offline\n </span>\n\n <span class=\"tag-description\">\n Needs physical presence or supervised practice\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"delivery-mode-tag-modal blended\">\n Blended\n </span>\n\n <span class=\"tag-description\">\n Concept combined with applied practice or coaching\n </span>\n </div>\n </div>\n\n </div>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;font-style:normal;font-weight:700;line-height:150%}:host ::ng-deep input.mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}:host ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}:host ::ng-deep .mat-select-panel{background-color:#fff!important}:host ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:10px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:600px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px 10px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex}.outside-layer{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.designation{color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:700;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.wing-text{color:#000000e0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal}.role-item{color:#000000e0;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.view-final-cbp-plan{display:flex;justify-content:end;align-items:center;gap:8px}.view-final-cbp-plan-text{padding:4px 16px;border-radius:24px;border:2px solid #F3962F;background:var(--white-kb-white-100, #FFF);box-shadow:0 1px 10px #276de599;color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:normal}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cursor-pointer{cursor:pointer}.ml-10{margin-left:10px}.table-container{border-top-left-radius:16px;border-top-right-radius:16px;overflow:auto;background:#fff;max-height:70vh}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;background:#fff;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child):after{content:\"\";position:absolute;top:12px;bottom:12px;right:0;width:1px;background-color:#e0e0e0}.table-header{font-size:16px;font-weight:600;background:#fff!important;color:#333}.table-header-unmatched{font-size:16px;font-weight:600;background:#f4dcde!important;color:#b42318}.table-body{background-color:#fff!important}.table-body-unmatched{background-color:#faf6f7!important}.designation-text-unmatched p{color:#b42318!important}.select-map-flex-container{display:flex;flex-direction:row;justify-content:space-between;width:100%}.select-map-flex{display:flex}.search-container-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;align-items:flex-start}.mt-6{margin-top:1.7rem}.mat-elevation-z1 .mat-mdc-cell{vertical-align:top!important;padding-top:8px;padding-bottom:8px}::ng-deep .radio-style-checkbox .mat-checkbox-frame{border-radius:50%}::ng-deep .radio-style-checkbox .mat-checkbox-background{border-radius:50%}.search-flex{display:flex;flex-direction:row;width:100%}.margin-top-15{margin-top:15px}.btn-active-outline{border-radius:10px;opacity:1;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;width:240px;border:none;background-color:transparent;cursor:pointer}.btn-active-outline-disable{border-radius:10px;opacity:.5;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;width:auto;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:240px;background-color:transparent;cursor:not-allowed}.role-mapping-tabs{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif}.role-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;border:1px solid #d0d5dd;background-color:#f9fafb;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease-in-out}.role-tab.active{border-color:#1b4ca1;background-color:#eff6ff;color:#1b4ca1}.dot{width:10px;height:10px;border-radius:50%;background-color:#1b4ca1}.dot.red{background-color:#b42318}.badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}.badge.blue{background-color:#dbeafe;color:#1b4ca1}.badge.red{background-color:#fee2e2;color:#b42318}.grayd-disable{color:#d3d3d3!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius: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}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:column}.competency-info-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;padding:0}.info-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:1px solid #1b4ca1;border-radius:50%;color:#1b4ca1;font-size:14px;font-weight:700}.competency-modal-backdrop{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:#1923328c;animation:fadeIn .2s ease}.competency-modal{position:relative;width:100%;max-width:900px;max-height:calc(100vh - 40px);overflow-y:auto;background:#fff;border-radius:16px;padding:40px 42px 38px;box-sizing:border-box;box-shadow:0 20px 50px #00000040;animation:modalSlideIn .25s ease}.modal-close-btn{position:absolute;top:26px;right:36px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#5b6778;font-size:44px;font-weight:300;line-height:1;cursor:pointer}.modal-close-btn:hover{color:#1b4ca1}.competency-modal h2{margin:0 0 16px;color:#293548;font-size:34px;font-weight:700;line-height:1.25}.modal-description{max-width:800px;margin:0 0 28px;color:#59687b;font-size:16px;font-weight:700;line-height:1.5}.competency-section{margin-top:26px}.delivery-section{margin-top:28px}.competency-section h3{margin:0 0 18px;color:#354154;font-size:21px;font-weight:700;letter-spacing:.5px;line-height:1.4}.tag-info-row{display:flex;align-items:center;gap:14px;margin-bottom:10px}.proficiency-tag-modal,.delivery-mode-tag-modal{width:140px;min-width:140px;display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:20px;font-size:16px;font-weight:600;line-height:1.2;box-sizing:border-box}.proficiency-tag-modal.strategic{background:#1b4ca1;color:#fff}.proficiency-tag-modal.tactical{background:#5b8def;color:#fff}.proficiency-tag-modal.operational{background:#dbe6f7;color:#1b4ca1}.delivery-mode-tag-modal.online{background:#e6f4ea;color:#1a7f45;border:1px solid #9BD3B0}.delivery-mode-tag-modal.offline{background:#fdf0e3;color:#a2590a;border:1px solid #F0C48A}.delivery-mode-tag-modal.blended{background:#efe9fb;color:#5b21b6;border:1px solid #C9B6F0}.tag-description{color:#526174;font-weight:700;font-size:16px;line-height:1.4}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.competency-modal{padding:28px 22px}.competency-modal h2{padding-right:35px;font-size:26px}.modal-description,.competency-section h3{font-size:16px}.tag-info-row{align-items:flex-start;flex-direction:column;gap:8px}.proficiency-tag-modal,.delivery-mode-tag-modal{width:140px}.tag-description{font-size:16px}.modal-close-btn{top:18px;right:18px}}.icon-cursor{cursor:pointer;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i14$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i14$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i14$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
15157
15212
|
}
|
|
15158
15213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoleMappingListComponent, decorators: [{
|
|
15159
15214
|
type: Component,
|
|
15160
|
-
args: [{ selector: 'app-role-mapping-list', template: "<div class=\"role-mapping-container\">\n <div class=\"container-fluid\">\n\n <mat-card class=\"mt-0 pt-0\">\n <div class=\"section-header\">\n\n </div>\n <div class=\"edit-section mt-4\">\n <div class=\"select-map-route-container\">\n <div class=\"select-map-flex-container\">\n <div class=\"select-map-flex\">\n <div class=\"selected-mapping-route\">\n <p>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name\">\n / {{ sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name }}\n </span>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"moveToInitialScreenLayout('edit')\">\n <mat-icon>edit</mat-icon>Edit\n </div>\n <!-- <div class=\"cursor-pointer ml-10\">-->\n <!-- <button class=\"btn-active cursor-pointer\" (click)=\"moveToInitialScreenLayout('add')\">-->\n <!-- <mat-icon>add</mat-icon>-->\n <!-- Create New CBP-->\n <!-- </button>-->\n <!-- </div>-->\n </div>\n <div>\n <div class=\"view-final-cbp-plan\">\n <!-- <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('cbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div> -->\n\n <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('acbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"search-filter-section mt-2\">\n <div class=\"search flex margin-right-m search-flex\">\n <div class=\"mt-2\">\n <div class=\"search-container\">\n <div class=\"rsearch\">\n <mat-icon\n class=\"color-60 search-icon mat-icon notranslate material-icons mat-icon-no-color\">search</mat-icon>\n <input class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\" label=\"\"\n (input)=\"applyFilter()\" placeholder=\"Search by designation name\" type=\"Standard\">\n <mat-icon *ngIf=\"searchText.trim().length > 0\"\n class=\"color-60 clear-icon mat-icon notranslate material-icons mat-icon-no-color cursor-pointer\"\n (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n <div class=\"pl-2 mt-2\">\n <input [disabled]=\"searchText.trim()?.length === 0\"\n [ngClass]=\"searchText.trim()?.length === 0 ? 'btn-disable':'btn-active'\"\n type=\"button\" value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n <div class=\"filter-section flex margin-top-15\">\n <!-- <div>\n <label class=\"label\">Filter by competency type</label>\n <div>\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select [(value)]=\"selectedValue\" placeholder=\"Select Ministry\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"'test'\">Test</mat-option>\n <mat-option [value]=\"'another'\">Another</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div> -->\n <div class=\"btn-group\">\n <div class=\"ml-2\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Designation\"\n (click)=\"addMoreDesignation()\" />\n </div>\n <div class=\"ml-2\" *ngIf=\"activeTab === 'matched'\">\n <button\n [ngClass]=\"selection.selected.length ? 'btn-active-outline' : 'btn-active-outline-disable'\"\n (click)=\"sendForApprovalForm()\">\n <mat-icon>send</mat-icon>\n Send For Approval\n <span *ngIf=\"selection.selected.length\">({{selection.selected.length}})</span>\n </button>\n </div>\n\n\n </div>\n </div>\n </div>\n <div class=\"role-mapping-tabs mt-3\">\n <button class=\"role-tab\" [class.active]=\"activeTab === 'matched'\" (click)=\"setDataSoure('matched')\">\n <span class=\"dot\"></span>\n Matched role mappings\n <span class=\"badge blue\">{{matchedRoleMapping}}</span>\n </button>\n\n <button class=\"role-tab table-body-unmatched\" [class.active]=\"activeTab === 'unmatched'\"\n (click)=\"setDataSoure('unmatched')\">\n <span class=\"dot red\"></span>\n Unmatched role mapping\n <span class=\"badge red\">{{unMatchedRoleMapping}}</span>\n </button>\n </div>\n <div class=\"nav-container\">\n <div class=\"sidenav-content\">\n <div class=\"table-class\">\n <ng-container *ngIf=\"dataSource?.filteredData?.length > 0\">\n <!-- <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"RequestId\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request ID </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.demand_id}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"title\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Title </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.title}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestor\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requestor </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.ownerName}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestType\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Type </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.requestType}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestStatus\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Status </th>\n\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <span [ngClass]=\"getStatusClass(element?.status)\">{{element?.status ===\n statusKey.fullfill ? 'Fulfilled'\n : element?.status}}</span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"assignee\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Assignee </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n {{element?.assignedProvider ?\n element?.assignedProvider : 'Not Assigned' }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestedOn\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requested On </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.createdOn |\n date}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"interests\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Interests</th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <a class=\"action-btn-view\" *ngIf=\"element?.interestCount!== 0\"\n href=\"javascript:void(0)\" [ngStyle]=\"getPointerEventsStyle(element)\">\n <span (click)=\"handleClick(element)\">\n {{element?.interestCount}}\n </span></a>\n <a class=\"\" *ngIf=\"element?.interestCount === 0\"\n href=\"javascript:void(0)\">{{element?.requestType ==\n 'Single' ? 'N/A' : element?.interestCount}}</a>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"details\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Details</th>\n <td mat-cell *matCellDef=\"let element\">\n <mat-icon (click)=\"navigateToDetails(element?.demand_id)\"\n class=\"cursor-pointer\">visibility</mat-icon>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\"></th>\n <td mat-cell *matCellDef=\"let element\">\n\n\n <span>\n <button mat-icon-button [matMenuTriggerFor]=\"menu\"\n aria-label=\"Example icon-button with a menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"onClickMenu(element,'viewContent')\">\n <span>View</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Unassigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid \"\n mat-menu-item (click)=\"onClickMenu(element,'invalidContent')\">\n <span>Mark as invalid</span>\n </button>\n <button mat-menu-item\n *ngIf=\"element?.status!== statusKey.Assigned && element?.interestCount >0 && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill\"\n (click)=\"onClickMenu(element,'assignContent')\">\n <span>Assign</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Assigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill \"\n mat-menu-item (click)=\"onClickMenu(element,'reAssignContent')\">\n <span> Re-Assign</span>\n </button>\n <button mat-menu-item (click)=\"onClickMenu(element,'copyContent')\">\n <span>Copy</span>\n </button>\n </mat-menu>\n </span>\n </td>\n\n\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\" class=\"table-row-data\"></tr>\n <tr mat-row *matRowDef=\"let row;columns:displayedColumns\"></tr>\n\n\n </table> -->\n <div class=\"table-container mt-4\" style=\"overflow: auto;\">\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z1\"\n [ngClass]=\"activeTab === 'matched'? 'table-body': 'table-body-unmatched'\">\n <!-- Selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef [hidden]=\"activeTab !== 'matched'\">\n <mat-checkbox class=\"radio-style-checkbox\" (change)=\"toggleAllRows($event)\"\n [checked]=\"isAllSelected()\" [indeterminate]=\"isSomeSelected()\"\n [disabled]=\"!hasSelectableRows()\">\n </mat-checkbox>\n </th>\n\n <td mat-cell *matCellDef=\"let row\" [hidden]=\"activeTab !== 'matched'\">\n <span matTooltip=\"Please generate & save course recommendation to select. Course recommendation generation & save is pending.\"\n [matTooltipDisabled]=\"!getActivateCbpPlan(row)\">\n <mat-checkbox class=\"radio-style-checkbox\"\n (click)=\"$event.stopPropagation()\" (change)=\"toggleRow(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"getActivateCbpPlan(row)\" [ngClass]=\" getActivateCbpPlan(row)? 'grayd-disable':''\">\n </mat-checkbox>\n </span>\n </td>\n </ng-container>\n <!-- Designation Name -->\n <ng-container matColumnDef=\"designation_name\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Designation\n </th>\n <td class=\"cursor-pointer\" mat-cell *matCellDef=\"let element\"\n (click)=\"viewCBPPlan(element)\">\n <div\n [ngClass]=\"activeTab === 'matched'? 'designation-text': 'designation-text-unmatched'\">\n <p class=\"designation\">{{ element?.designation_name }} </p>\n <p class=\"wing-text mt-2\">Wing/Division - {{\n element?.wing_division_section }} </p>\n </div>\n\n </td>\n </ng-container>\n\n <!-- Role & Responsibilities -->\n <ng-container matColumnDef=\"role_responsibilities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Role &\n Responsibilities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let role of (isResponisbilityExpanded(element.id) ? element.role_responsibilities : element.role_responsibilities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ role }}</li>\n <li *ngIf=\"element.role_responsibilities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'role_responsibilities')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n <!-- {{ isResponisbilityExpanded(element.id) ? 'View Less' : 'View More' }} -->\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n <!-- Activities -->\n <ng-container matColumnDef=\"activities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Activities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let activity of (isActivityExpanded(element.id) ? element.activities : element.activities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ activity }}</li>\n <li *ngIf=\"element.activities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'activity')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Behavioral Competencies -->\n <ng-container matColumnDef=\"behavioral\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Behavioral\n Competencies <mat-icon (click)=\"openCompetencyInfo()\">info_outline</mat-icon> </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of (isBehavioralExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Behavioral') : getCompetenciesByType(element.competencies, 'Behavioral').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Behavioral').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'behavioral')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Functional Competencies -->\n <ng-container matColumnDef=\"functional\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Functional\n Competencies <mat-icon (click)=\"openCompetencyInfo()\">info_outline</mat-icon></th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of (isFunctionalExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Functional') : getCompetenciesByType(element.competencies, 'Functional').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </div>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Functional').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'functional')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Domain Competencies -->\n <ng-container matColumnDef=\"domain\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Domain\n Competencies <mat-icon (click)=\"openCompetencyInfo()\">info_outline</mat-icon> </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of (isDomainExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Domain') : getCompetenciesByType(element.competencies, 'Domain').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </div>\n <div class=\"competency-tags\">\n <span\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Domain').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'domain')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Actions -->\n <ng-container matColumnDef=\"action\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #actionMenu=\"matMenu\">\n <button mat-menu-item (click)=\"editRoleMapping(element)\">\n <mat-icon>edit</mat-icon>\n <span>Edit Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"viewCBPPlan(element)\">\n <mat-icon>visibility</mat-icon>\n <span>View Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"generateCourseRecommendation(element)\">\n <mat-icon>school</mat-icon>\n <span>Generate Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"viewCourseRecommendation(element)\">\n <mat-icon>preview</mat-icon>\n <span>View Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"deleteRoleMapping(element)\">\n <mat-icon>delete</mat-icon>\n <span>Delete Role Mapping</span>\n </button>\n <button *ngIf=\"activeTab !== 'matched'\" mat-menu-item (click)=\"sendForDesignationNameApproval(element)\">\n <mat-icon>send</mat-icon>\n <span>Send for Designation Name Approval</span>\n </button>\n </mat-menu>\n </td>\n </ng-container>\n\n <!-- Header & Rows -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n\n <!-- Pagination -->\n <mat-paginator [length]=\"totalRoleMappingListCount\" [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\" (page)=\"pageChangeEvent($event)\"\n [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons>\n </mat-paginator>\n </div>\n\n </ng-container>\n\n <div class=\"no-cbp-data\" *ngIf=\"dataSource?.filteredData?.length === 0\">\n <!-- <div><img src=\"/mdo-assets/images/no-content-data.svg\" alt=\"no-content\"></div> -->\n <div class=\"sub-heading mt-4\">\n <p>No role mappings available in this category</p>\n </div>\n <!-- <div class=\" margin-top-m no-content-create\">\n <button mat-button type=\"button\" class=\"search-btns\"\n [routerLink]=\"['/app/home/create-request-form']\">Request Content</button>\n </div> -->\n\n </div>\n\n <!-- <mat-paginator *ngIf=\"dataSource?.filteredData?.length > 0\" [pageSize]=\"pageSize\"\n [length]=\"this.requestCount\" [pageSizeOptions]=\"[10,20,40]\"\n (page)=\"onChangePage($event)\"></mat-paginator> -->\n\n\n </div>\n\n\n\n </div>\n </div>\n </mat-card>\n </div>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>\n\n<div\n class=\"competency-modal-backdrop\"\n *ngIf=\"isCompetencyInfoOpen\"\n (click)=\"closeCompetencyInfo()\"\n>\n <div\n class=\"competency-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"competency-modal-title\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- Close Button -->\n <button\n type=\"button\"\n class=\"modal-close-btn\"\n (click)=\"closeCompetencyInfo()\"\n aria-label=\"Close\"\n >\n \u00D7\n </button>\n\n <!-- Title -->\n <h2 id=\"competency-modal-title\">\n What do the competency tags mean?\n </h2>\n\n <!-- Description -->\n <p class=\"modal-description\">\n Every competency carries two tags: how deeply this designation needs it,\n and how the training for it is delivered.\n </p>\n\n <!-- Proficiency -->\n <div class=\"competency-section\">\n <h3>\n PROFICIENCY LEVEL \u2014 THE DEPTH THIS DESIGNATION NEEDS\n </h3>\n\n <div class=\"tag-info-row\">\n <span class=\"proficiency-tag strategic\">\n Strategic\n </span>\n\n <span class=\"tag-description\">\n Shapes policy, direction and outcomes\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"proficiency-tag tactical\">\n Tactical\n </span>\n\n <span class=\"tag-description\">\n Plans, coordinates and turns direction into programmes\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"proficiency-tag operational\">\n Operational\n </span>\n\n <span class=\"tag-description\">\n Executes and delivers the work on the ground\n </span>\n </div>\n </div>\n\n <!-- Delivery Mode -->\n <div class=\"competency-section delivery-section\">\n <h3>\n DELIVERY MODE \u2014 HOW THE TRAINING IS DELIVERED\n </h3>\n\n <div class=\"tag-info-row\">\n <span class=\"delivery-mode-tag online\">\n Online\n </span>\n\n <span class=\"tag-description\">\n Self-paced, knowledge-based content\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"delivery-mode-tag offline\">\n Offline\n </span>\n\n <span class=\"tag-description\">\n Needs physical presence or supervised practice\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"delivery-mode-tag blended\">\n Blended\n </span>\n\n <span class=\"tag-description\">\n Concept combined with applied practice or coaching\n </span>\n </div>\n </div>\n\n </div>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;font-style:normal;font-weight:700;line-height:150%}:host ::ng-deep input.mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}:host ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}:host ::ng-deep .mat-select-panel{background-color:#fff!important}:host ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:10px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:600px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px 10px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex}.outside-layer{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.designation{color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:700;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.wing-text{color:#000000e0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal}.role-item{color:#000000e0;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.view-final-cbp-plan{display:flex;justify-content:end;align-items:center;gap:8px}.view-final-cbp-plan-text{padding:4px 16px;border-radius:24px;border:2px solid #F3962F;background:var(--white-kb-white-100, #FFF);box-shadow:0 1px 10px #276de599;color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:normal}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cursor-pointer{cursor:pointer}.ml-10{margin-left:10px}.table-container{border-top-left-radius:16px;border-top-right-radius:16px;overflow:auto;background:#fff;max-height:70vh}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;background:#fff;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child):after{content:\"\";position:absolute;top:12px;bottom:12px;right:0;width:1px;background-color:#e0e0e0}.table-header{font-size:16px;font-weight:600;background:#fff!important;color:#333}.table-header-unmatched{font-size:16px;font-weight:600;background:#f4dcde!important;color:#b42318}.table-body{background-color:#fff!important}.table-body-unmatched{background-color:#faf6f7!important}.designation-text-unmatched p{color:#b42318!important}.select-map-flex-container{display:flex;flex-direction:row;justify-content:space-between;width:100%}.select-map-flex{display:flex}.search-container-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;align-items:flex-start}.mt-6{margin-top:1.7rem}.mat-elevation-z1 .mat-mdc-cell{vertical-align:top!important;padding-top:8px;padding-bottom:8px}::ng-deep .radio-style-checkbox .mat-checkbox-frame{border-radius:50%}::ng-deep .radio-style-checkbox .mat-checkbox-background{border-radius:50%}.search-flex{display:flex;flex-direction:row;width:100%}.margin-top-15{margin-top:15px}.btn-active-outline{border-radius:10px;opacity:1;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;width:240px;border:none;background-color:transparent;cursor:pointer}.btn-active-outline-disable{border-radius:10px;opacity:.5;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;width:auto;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:240px;background-color:transparent;cursor:not-allowed}.role-mapping-tabs{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif}.role-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;border:1px solid #d0d5dd;background-color:#f9fafb;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease-in-out}.role-tab.active{border-color:#1b4ca1;background-color:#eff6ff;color:#1b4ca1}.dot{width:10px;height:10px;border-radius:50%;background-color:#1b4ca1}.dot.red{background-color:#b42318}.badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}.badge.blue{background-color:#dbeafe;color:#1b4ca1}.badge.red{background-color:#fee2e2;color:#b42318}.grayd-disable{color:#d3d3d3!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:16px;font-size:11px;line-height:16px;font-weight:500;white-space:nowrap}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:column}.competency-info-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;padding:0}.info-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:1px solid #1b4ca1;border-radius:50%;color:#1b4ca1;font-size:14px;font-weight:700}.competency-modal-backdrop{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:#1923328c;animation:fadeIn .2s ease}.competency-modal{position:relative;width:100%;max-width:1000px;max-height:calc(100vh - 40px);overflow-y:auto;background:#fff;border-radius:16px;padding:40px 42px 38px;box-sizing:border-box;box-shadow:0 20px 50px #00000040;animation:modalSlideIn .25s ease}.modal-close-btn{position:absolute;top:26px;right:36px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#5b6778;font-size:44px;font-weight:300;line-height:1;cursor:pointer}.modal-close-btn:hover{color:#1b4ca1}.competency-modal h2{margin:0 0 16px;color:#293548;font-size:34px;font-weight:700;line-height:1.25}.modal-description{max-width:900px;margin:0 0 28px;color:#59687b;font-size:23px;font-weight:400;line-height:1.5}.competency-section{margin-top:26px}.delivery-section{margin-top:28px}.competency-section h3{margin:0 0 18px;color:#354154;font-size:21px;font-weight:700;letter-spacing:.5px;line-height:1.4}.tag-info-row{display:flex;align-items:center;gap:14px;margin-bottom:10px}.proficiency-tag,.delivery-mode-tag{width:140px;min-width:140px;display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:20px;font-size:17px;font-weight:600;line-height:1.2;box-sizing:border-box}.proficiency-tag.strategic{background:#1b4ca1;color:#fff}.proficiency-tag.tactical{background:#5b8def;color:#fff}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1}.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}.tag-description{color:#526174;font-size:21px;font-weight:400;line-height:1.4}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.competency-modal{padding:28px 22px}.competency-modal h2{padding-right:35px;font-size:26px}.modal-description{font-size:18px}.competency-section h3{font-size:17px}.tag-info-row{align-items:flex-start;flex-direction:column;gap:8px}.proficiency-tag,.delivery-mode-tag{width:140px}.tag-description{font-size:17px}.modal-close-btn{top:18px;right:18px}}\n"] }]
|
|
15215
|
+
args: [{ selector: 'app-role-mapping-list', template: "<div class=\"role-mapping-container\">\n <div class=\"container-fluid\">\n\n <mat-card class=\"mt-0 pt-0\">\n <div class=\"section-header\">\n\n </div>\n <div class=\"edit-section mt-4\">\n <div class=\"select-map-route-container\">\n <div class=\"select-map-flex-container\">\n <div class=\"select-map-flex\">\n <div class=\"selected-mapping-route\">\n <p>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name\">\n / {{ sharedService?.cbpPlanFinalObj?.department_name || originalData?.[0]?.department_name }}\n </span>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"moveToInitialScreenLayout('edit')\">\n <mat-icon>edit</mat-icon>Edit\n </div>\n <!-- <div class=\"cursor-pointer ml-10\">-->\n <!-- <button class=\"btn-active cursor-pointer\" (click)=\"moveToInitialScreenLayout('add')\">-->\n <!-- <mat-icon>add</mat-icon>-->\n <!-- Create New CBP-->\n <!-- </button>-->\n <!-- </div>-->\n </div>\n <div>\n <div class=\"view-final-cbp-plan\">\n <!-- <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('cbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div> -->\n\n <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('acbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"search-filter-section mt-2\">\n <div class=\"search flex margin-right-m search-flex\">\n <div class=\"mt-2\">\n <div class=\"search-container\">\n <div class=\"rsearch\">\n <mat-icon\n class=\"color-60 search-icon mat-icon notranslate material-icons mat-icon-no-color\">search</mat-icon>\n <input class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\" label=\"\"\n (input)=\"applyFilter()\" placeholder=\"Search by designation name\" type=\"Standard\">\n <mat-icon *ngIf=\"searchText.trim().length > 0\"\n class=\"color-60 clear-icon mat-icon notranslate material-icons mat-icon-no-color cursor-pointer\"\n (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n <div class=\"pl-2 mt-2\">\n <input [disabled]=\"searchText.trim()?.length === 0\"\n [ngClass]=\"searchText.trim()?.length === 0 ? 'btn-disable':'btn-active'\"\n type=\"button\" value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n <div class=\"filter-section flex margin-top-15\">\n <!-- <div>\n <label class=\"label\">Filter by competency type</label>\n <div>\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select [(value)]=\"selectedValue\" placeholder=\"Select Ministry\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"'test'\">Test</mat-option>\n <mat-option [value]=\"'another'\">Another</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div> -->\n <div class=\"btn-group\">\n <div class=\"ml-2\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Designation\"\n (click)=\"addMoreDesignation()\" />\n </div>\n <div class=\"ml-2\" *ngIf=\"activeTab === 'matched'\">\n <button\n [ngClass]=\"selection.selected.length ? 'btn-active-outline' : 'btn-active-outline-disable'\"\n (click)=\"sendForApprovalForm()\">\n <mat-icon>send</mat-icon>\n Send For Approval\n <span *ngIf=\"selection.selected.length\">({{selection.selected.length}})</span>\n </button>\n </div>\n\n\n </div>\n </div>\n </div>\n <div class=\"role-mapping-tabs mt-3\">\n <button class=\"role-tab\" [class.active]=\"activeTab === 'matched'\" (click)=\"setDataSoure('matched')\">\n <span class=\"dot\"></span>\n Matched role mappings\n <span class=\"badge blue\">{{matchedRoleMapping}}</span>\n </button>\n\n <button class=\"role-tab table-body-unmatched\" [class.active]=\"activeTab === 'unmatched'\"\n (click)=\"setDataSoure('unmatched')\">\n <span class=\"dot red\"></span>\n Unmatched role mapping\n <span class=\"badge red\">{{unMatchedRoleMapping}}</span>\n </button>\n </div>\n <div class=\"nav-container\">\n <div class=\"sidenav-content\">\n <div class=\"table-class\">\n <ng-container *ngIf=\"dataSource?.filteredData?.length > 0\">\n <!-- <table mat-table [dataSource]=\"dataSource\">\n <ng-container matColumnDef=\"RequestId\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request ID </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.demand_id}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"title\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Title </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.title}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestor\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requestor </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.ownerName}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestType\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Type </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.requestType}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestStatus\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Request Status </th>\n\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <span [ngClass]=\"getStatusClass(element?.status)\">{{element?.status ===\n statusKey.fullfill ? 'Fulfilled'\n : element?.status}}</span>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"assignee\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Assignee </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n {{element?.assignedProvider ?\n element?.assignedProvider : 'Not Assigned' }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"requestedOn\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Requested On </th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">{{element?.createdOn |\n date}}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"interests\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Interests</th>\n <td mat-cell class=\"title-class\" *matCellDef=\"let element\">\n <a class=\"action-btn-view\" *ngIf=\"element?.interestCount!== 0\"\n href=\"javascript:void(0)\" [ngStyle]=\"getPointerEventsStyle(element)\">\n <span (click)=\"handleClick(element)\">\n {{element?.interestCount}}\n </span></a>\n <a class=\"\" *ngIf=\"element?.interestCount === 0\"\n href=\"javascript:void(0)\">{{element?.requestType ==\n 'Single' ? 'N/A' : element?.interestCount}}</a>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"details\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\">Details</th>\n <td mat-cell *matCellDef=\"let element\">\n <mat-icon (click)=\"navigateToDetails(element?.demand_id)\"\n class=\"cursor-pointer\">visibility</mat-icon>\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"action\">\n <th mat-header-cell *matHeaderCellDef class=\"row-heading\"></th>\n <td mat-cell *matCellDef=\"let element\">\n\n\n <span>\n <button mat-icon-button [matMenuTriggerFor]=\"menu\"\n aria-label=\"Example icon-button with a menu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"onClickMenu(element,'viewContent')\">\n <span>View</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Unassigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid \"\n mat-menu-item (click)=\"onClickMenu(element,'invalidContent')\">\n <span>Mark as invalid</span>\n </button>\n <button mat-menu-item\n *ngIf=\"element?.status!== statusKey.Assigned && element?.interestCount >0 && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill\"\n (click)=\"onClickMenu(element,'assignContent')\">\n <span>Assign</span>\n </button>\n <button\n *ngIf=\"element?.status === statusKey.Assigned && element?.status!== statusKey.Inprogress && element?.status!== statusKey.invalid && element?.status!==statusKey.fullfill \"\n mat-menu-item (click)=\"onClickMenu(element,'reAssignContent')\">\n <span> Re-Assign</span>\n </button>\n <button mat-menu-item (click)=\"onClickMenu(element,'copyContent')\">\n <span>Copy</span>\n </button>\n </mat-menu>\n </span>\n </td>\n\n\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\" class=\"table-row-data\"></tr>\n <tr mat-row *matRowDef=\"let row;columns:displayedColumns\"></tr>\n\n\n </table> -->\n <div class=\"table-container mt-4\" style=\"overflow: auto;\">\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z1\"\n [ngClass]=\"activeTab === 'matched'? 'table-body': 'table-body-unmatched'\">\n <!-- Selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef [hidden]=\"activeTab !== 'matched'\">\n <mat-checkbox class=\"radio-style-checkbox\" (change)=\"toggleAllRows($event)\"\n [checked]=\"isAllSelected()\" [indeterminate]=\"isSomeSelected()\"\n [disabled]=\"!hasSelectableRows()\">\n </mat-checkbox>\n </th>\n\n <td mat-cell *matCellDef=\"let row\" [hidden]=\"activeTab !== 'matched'\">\n <span matTooltip=\"Please generate & save course recommendation to select. Course recommendation generation & save is pending.\"\n [matTooltipDisabled]=\"!getActivateCbpPlan(row)\">\n <mat-checkbox class=\"radio-style-checkbox\"\n (click)=\"$event.stopPropagation()\" (change)=\"toggleRow(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"getActivateCbpPlan(row)\" [ngClass]=\" getActivateCbpPlan(row)? 'grayd-disable':''\">\n </mat-checkbox>\n </span>\n </td>\n </ng-container>\n <!-- Designation Name -->\n <ng-container matColumnDef=\"designation_name\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Designation\n </th>\n <td class=\"cursor-pointer\" mat-cell *matCellDef=\"let element\"\n (click)=\"viewCBPPlan(element)\">\n <div\n [ngClass]=\"activeTab === 'matched'? 'designation-text': 'designation-text-unmatched'\">\n <p class=\"designation\">{{ element?.designation_name }} </p>\n <p class=\"wing-text mt-2\">Wing/Division - {{\n element?.wing_division_section }} </p>\n </div>\n\n </td>\n </ng-container>\n\n <!-- Role & Responsibilities -->\n <ng-container matColumnDef=\"role_responsibilities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Role &\n Responsibilities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let role of (isResponisbilityExpanded(element.id) ? element.role_responsibilities : element.role_responsibilities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ role }}</li>\n <li *ngIf=\"element.role_responsibilities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'role_responsibilities')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n <!-- {{ isResponisbilityExpanded(element.id) ? 'View Less' : 'View More' }} -->\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n <!-- Activities -->\n <ng-container matColumnDef=\"activities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Activities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let activity of (isActivityExpanded(element.id) ? element.activities : element.activities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ activity }}</li>\n <li *ngIf=\"element.activities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'activity')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Behavioral Competencies -->\n <ng-container matColumnDef=\"behavioral\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Behavioral\n Competencies <mat-icon class=\"icon-cursor\" (click)=\"openCompetencyInfo()\">info_outline</mat-icon> </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of (isBehavioralExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Behavioral') : getCompetenciesByType(element.competencies, 'Behavioral').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Behavioral').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'behavioral')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Functional Competencies -->\n <ng-container matColumnDef=\"functional\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Functional\n Competencies <mat-icon class=\"icon-cursor\" (click)=\"openCompetencyInfo()\">info_outline</mat-icon></th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of (isFunctionalExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Functional') : getCompetenciesByType(element.competencies, 'Functional').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Functional').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'functional')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Domain Competencies -->\n <ng-container matColumnDef=\"domain\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Domain\n Competencies <mat-icon class=\"icon-cursor\" (click)=\"openCompetencyInfo()\">info_outline</mat-icon> </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of (isDomainExpanded(element.id) ? getCompetenciesByType(element.competencies, 'Domain') : getCompetenciesByType(element.competencies, 'Domain').slice(0, 4))\">\n <div class=\"flex-col-theme\">\n <div>\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </div>\n <div class=\"competency-tags\">\n <span *ngIf=\"comp.proficiency_level\"\n class=\"proficiency-tag\"\n [ngClass]=\"comp.proficiency_level?.toLowerCase()\"\n >\n {{ comp.proficiency_level }}\n </span>\n\n <span *ngIf=\"comp.delivery_mode\"\n class=\"delivery-mode-tag\"\n [ngClass]=\"comp.delivery_mode?.toLowerCase()\"\n >\n {{ comp.delivery_mode }}\n </span>\n </div>\n </div>\n </li>\n <li *ngIf=\"getCompetenciesByType(element.competencies, 'Domain').length > 4\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'domain')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Actions -->\n <ng-container matColumnDef=\"action\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Action </th>\n <td mat-cell *matCellDef=\"let element\">\n <button mat-icon-button [matMenuTriggerFor]=\"actionMenu\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #actionMenu=\"matMenu\">\n <button mat-menu-item (click)=\"editRoleMapping(element)\">\n <mat-icon>edit</mat-icon>\n <span>Edit Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"viewCBPPlan(element)\">\n <mat-icon>visibility</mat-icon>\n <span>View Role Mapping</span>\n </button>\n <button mat-menu-item (click)=\"generateCourseRecommendation(element)\">\n <mat-icon>school</mat-icon>\n <span>Generate Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"viewCourseRecommendation(element)\">\n <mat-icon>preview</mat-icon>\n <span>View Course Recommendation</span>\n </button>\n <button mat-menu-item (click)=\"deleteRoleMapping(element)\">\n <mat-icon>delete</mat-icon>\n <span>Delete Role Mapping</span>\n </button>\n <button *ngIf=\"activeTab !== 'matched'\" mat-menu-item (click)=\"sendForDesignationNameApproval(element)\">\n <mat-icon>send</mat-icon>\n <span>Send for Designation Name Approval</span>\n </button>\n </mat-menu>\n </td>\n </ng-container>\n\n <!-- Header & Rows -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n\n <!-- Pagination -->\n <mat-paginator [length]=\"totalRoleMappingListCount\" [pageIndex]=\"pageIndex\"\n [pageSize]=\"pageSize\" (page)=\"pageChangeEvent($event)\"\n [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons>\n </mat-paginator>\n </div>\n\n </ng-container>\n\n <div class=\"no-cbp-data\" *ngIf=\"dataSource?.filteredData?.length === 0\">\n <!-- <div><img src=\"/mdo-assets/images/no-content-data.svg\" alt=\"no-content\"></div> -->\n <div class=\"sub-heading mt-4\">\n <p>No role mappings available in this category</p>\n </div>\n <!-- <div class=\" margin-top-m no-content-create\">\n <button mat-button type=\"button\" class=\"search-btns\"\n [routerLink]=\"['/app/home/create-request-form']\">Request Content</button>\n </div> -->\n\n </div>\n\n <!-- <mat-paginator *ngIf=\"dataSource?.filteredData?.length > 0\" [pageSize]=\"pageSize\"\n [length]=\"this.requestCount\" [pageSizeOptions]=\"[10,20,40]\"\n (page)=\"onChangePage($event)\"></mat-paginator> -->\n\n\n </div>\n\n\n\n </div>\n </div>\n </mat-card>\n </div>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>\n\n<div\n class=\"competency-modal-backdrop\"\n *ngIf=\"isCompetencyInfoOpen\"\n (click)=\"closeCompetencyInfo()\"\n>\n <div\n class=\"competency-modal\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"competency-modal-title\"\n (click)=\"$event.stopPropagation()\"\n >\n <!-- Close Button -->\n <button\n type=\"button\"\n class=\"modal-close-btn\"\n (click)=\"closeCompetencyInfo()\"\n aria-label=\"Close\"\n >\n \u00D7\n </button>\n\n <!-- Title -->\n <h2 id=\"competency-modal-title\">\n What do the competency tags mean?\n </h2>\n\n <!-- Description -->\n <p class=\"modal-description\">\n Every competency carries two tags: how deeply this designation needs it,\n and how the training for it is delivered.\n </p>\n\n <!-- Proficiency -->\n <div class=\"competency-section\">\n <h3>\n PROFICIENCY LEVEL \u2014 THE DEPTH THIS DESIGNATION NEEDS\n </h3>\n\n <div class=\"tag-info-row\">\n <span class=\"proficiency-tag-modal strategic\">\n Strategic\n </span>\n\n <span class=\"tag-description\">\n Shapes policy, direction and outcomes\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"proficiency-tag-modal tactical\">\n Tactical\n </span>\n\n <span class=\"tag-description\">\n Plans, coordinates and turns direction into programmes\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"proficiency-tag-modal operational\">\n Operational\n </span>\n\n <span class=\"tag-description\">\n Executes and delivers the work on the ground\n </span>\n </div>\n </div>\n\n <!-- Delivery Mode -->\n <div class=\"competency-section delivery-section\">\n <h3>\n DELIVERY MODE \u2014 HOW THE TRAINING IS DELIVERED\n </h3>\n\n <div class=\"tag-info-row\">\n <span class=\"delivery-mode-tag-modal online\">\n Online\n </span>\n\n <span class=\"tag-description\">\n Self-paced, knowledge-based content\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"delivery-mode-tag-modal offline\">\n Offline\n </span>\n\n <span class=\"tag-description\">\n Needs physical presence or supervised practice\n </span>\n </div>\n\n <div class=\"tag-info-row\">\n <span class=\"delivery-mode-tag-modal blended\">\n Blended\n </span>\n\n <span class=\"tag-description\">\n Concept combined with applied practice or coaching\n </span>\n </div>\n </div>\n\n </div>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;font-style:normal;font-weight:700;line-height:150%}:host ::ng-deep input.mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}:host ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}:host ::ng-deep .mat-select-panel{background-color:#fff!important}:host ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:10px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:600px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px 10px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex}.outside-layer{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.designation{color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:700;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.wing-text{color:#000000e0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal}.role-item{color:#000000e0;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.view-final-cbp-plan{display:flex;justify-content:end;align-items:center;gap:8px}.view-final-cbp-plan-text{padding:4px 16px;border-radius:24px;border:2px solid #F3962F;background:var(--white-kb-white-100, #FFF);box-shadow:0 1px 10px #276de599;color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:normal}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cursor-pointer{cursor:pointer}.ml-10{margin-left:10px}.table-container{border-top-left-radius:16px;border-top-right-radius:16px;overflow:auto;background:#fff;max-height:70vh}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;background:#fff;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child):after{content:\"\";position:absolute;top:12px;bottom:12px;right:0;width:1px;background-color:#e0e0e0}.table-header{font-size:16px;font-weight:600;background:#fff!important;color:#333}.table-header-unmatched{font-size:16px;font-weight:600;background:#f4dcde!important;color:#b42318}.table-body{background-color:#fff!important}.table-body-unmatched{background-color:#faf6f7!important}.designation-text-unmatched p{color:#b42318!important}.select-map-flex-container{display:flex;flex-direction:row;justify-content:space-between;width:100%}.select-map-flex{display:flex}.search-container-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;align-items:flex-start}.mt-6{margin-top:1.7rem}.mat-elevation-z1 .mat-mdc-cell{vertical-align:top!important;padding-top:8px;padding-bottom:8px}::ng-deep .radio-style-checkbox .mat-checkbox-frame{border-radius:50%}::ng-deep .radio-style-checkbox .mat-checkbox-background{border-radius:50%}.search-flex{display:flex;flex-direction:row;width:100%}.margin-top-15{margin-top:15px}.btn-active-outline{border-radius:10px;opacity:1;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;width:240px;border:none;background-color:transparent;cursor:pointer}.btn-active-outline-disable{border-radius:10px;opacity:.5;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;width:auto;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:240px;background-color:transparent;cursor:not-allowed}.role-mapping-tabs{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif}.role-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;border:1px solid #d0d5dd;background-color:#f9fafb;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease-in-out}.role-tab.active{border-color:#1b4ca1;background-color:#eff6ff;color:#1b4ca1}.dot{width:10px;height:10px;border-radius:50%;background-color:#1b4ca1}.dot.red{background-color:#b42318}.badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}.badge.blue{background-color:#dbeafe;color:#1b4ca1}.badge.red{background-color:#fee2e2;color:#b42318}.grayd-disable{color:#d3d3d3!important}.competency-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.proficiency-tag,.delivery-mode-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius: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}.proficiency-tag.strategic{background:#1b4ca1;color:#fff;border:none}.proficiency-tag.tactical{background:#5b8def;color:#fff;border:none}.proficiency-tag.operational{background:#dbe6f7;color:#1b4ca1;border:none}.flex-col-theme{display:flex;flex-direction:column}.competency-info-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;padding:0}.info-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:1px solid #1b4ca1;border-radius:50%;color:#1b4ca1;font-size:14px;font-weight:700}.competency-modal-backdrop{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:#1923328c;animation:fadeIn .2s ease}.competency-modal{position:relative;width:100%;max-width:900px;max-height:calc(100vh - 40px);overflow-y:auto;background:#fff;border-radius:16px;padding:40px 42px 38px;box-sizing:border-box;box-shadow:0 20px 50px #00000040;animation:modalSlideIn .25s ease}.modal-close-btn{position:absolute;top:26px;right:36px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#5b6778;font-size:44px;font-weight:300;line-height:1;cursor:pointer}.modal-close-btn:hover{color:#1b4ca1}.competency-modal h2{margin:0 0 16px;color:#293548;font-size:34px;font-weight:700;line-height:1.25}.modal-description{max-width:800px;margin:0 0 28px;color:#59687b;font-size:16px;font-weight:700;line-height:1.5}.competency-section{margin-top:26px}.delivery-section{margin-top:28px}.competency-section h3{margin:0 0 18px;color:#354154;font-size:21px;font-weight:700;letter-spacing:.5px;line-height:1.4}.tag-info-row{display:flex;align-items:center;gap:14px;margin-bottom:10px}.proficiency-tag-modal,.delivery-mode-tag-modal{width:140px;min-width:140px;display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:20px;font-size:16px;font-weight:600;line-height:1.2;box-sizing:border-box}.proficiency-tag-modal.strategic{background:#1b4ca1;color:#fff}.proficiency-tag-modal.tactical{background:#5b8def;color:#fff}.proficiency-tag-modal.operational{background:#dbe6f7;color:#1b4ca1}.delivery-mode-tag-modal.online{background:#e6f4ea;color:#1a7f45;border:1px solid #9BD3B0}.delivery-mode-tag-modal.offline{background:#fdf0e3;color:#a2590a;border:1px solid #F0C48A}.delivery-mode-tag-modal.blended{background:#efe9fb;color:#5b21b6;border:1px solid #C9B6F0}.tag-description{color:#526174;font-weight:700;font-size:16px;line-height:1.4}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 768px){.competency-modal{padding:28px 22px}.competency-modal h2{padding-right:35px;font-size:26px}.modal-description,.competency-section h3{font-size:16px}.tag-info-row{align-items:flex-start;flex-direction:column;gap:8px}.proficiency-tag-modal,.delivery-mode-tag-modal{width:140px}.tag-description{font-size:16px}.modal-close-btn{top:18px;right:18px}}.icon-cursor{cursor:pointer;vertical-align:middle}\n"] }]
|
|
15161
15216
|
}], ctorParameters: function () { return [{ type: SharedService }, { type: i1$1.MatDialog }, { type: i3.Router }, { type: i3.ActivatedRoute }]; }, propDecorators: { formData: [{
|
|
15162
15217
|
type: Input
|
|
15163
15218
|
}], paginator: [{
|