@sunbird-cb/cbp-ai 0.1.55 → 0.1.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/ai-cbp.module.mjs +6 -6
- package/esm2022/lib/components/publish-request-form/publish-approve-request-form.component.mjs +86 -0
- package/esm2022/lib/components/review-request/review-request.component.mjs +3 -3
- package/esm2022/public-api.mjs +2 -2
- package/fesm2022/sunbird-cb-cbp-ai.mjs +55 -76
- package/fesm2022/sunbird-cb-cbp-ai.mjs.map +1 -1
- package/lib/ai-cbp.module.d.ts +2 -2
- package/lib/components/publish-request-form/publish-approve-request-form.component.d.ts +24 -0
- package/lib/components/publish-request-form/publish-approve-request-form.component.d.ts.map +1 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -1
- package/public-api.d.ts.map +1 -1
- package/esm2022/lib/components/publish-request-form/publish-request-form.component.mjs +0 -96
- package/lib/components/publish-request-form/publish-request-form.component.d.ts +0 -37
- package/lib/components/publish-request-form/publish-request-form.component.d.ts.map +0 -1
- package/sunbird-cb-cbp-ai-0.1.55.tgz +0 -0
|
@@ -17,24 +17,24 @@ import * as i5 from '@angular/common';
|
|
|
17
17
|
import { CommonModule } from '@angular/common';
|
|
18
18
|
import * as i6 from '@angular/material/legacy-card';
|
|
19
19
|
import { MatLegacyCardModule } from '@angular/material/legacy-card';
|
|
20
|
-
import * as
|
|
20
|
+
import * as i7 from '@angular/material/legacy-form-field';
|
|
21
21
|
import { MatLegacyFormFieldModule } from '@angular/material/legacy-form-field';
|
|
22
|
-
import * as i8
|
|
22
|
+
import * as i8 from '@angular/material/icon';
|
|
23
23
|
import { MatIconModule } from '@angular/material/icon';
|
|
24
24
|
import * as i10 from '@angular/material/legacy-select';
|
|
25
25
|
import { MatLegacySelectModule } from '@angular/material/legacy-select';
|
|
26
26
|
import * as i11 from '@angular/material/legacy-core';
|
|
27
|
-
import * as
|
|
27
|
+
import * as i11$1 from '@angular/material/progress-spinner';
|
|
28
28
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
29
|
-
import * as i11$
|
|
29
|
+
import * as i11$2 from '@angular/material/table';
|
|
30
30
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
31
|
-
import * as i12 from '@angular/material/paginator';
|
|
31
|
+
import * as i12$1 from '@angular/material/paginator';
|
|
32
32
|
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
33
|
-
import * as
|
|
33
|
+
import * as i8$1 from '@angular/material/legacy-input';
|
|
34
34
|
import { MatLegacyInputModule } from '@angular/material/legacy-input';
|
|
35
35
|
import * as i7$1 from '@angular/material/legacy-button';
|
|
36
36
|
import { MatLegacyButtonModule } from '@angular/material/legacy-button';
|
|
37
|
-
import * as i9
|
|
37
|
+
import * as i9 from '@angular/material/legacy-checkbox';
|
|
38
38
|
import { MatLegacyCheckboxModule } from '@angular/material/legacy-checkbox';
|
|
39
39
|
import html2pdf from 'html2pdf.js';
|
|
40
40
|
import * as i14 from '@angular/material/tabs';
|
|
@@ -42,14 +42,15 @@ import { MatTabsModule } from '@angular/material/tabs';
|
|
|
42
42
|
import { data } from 'jquery';
|
|
43
43
|
import * as i8$2 from '@angular/material/tooltip';
|
|
44
44
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
45
|
-
import
|
|
45
|
+
import * as i12 from '@angular/material/datepicker';
|
|
46
|
+
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
46
47
|
import * as i4 from 'ngx-markdown';
|
|
47
48
|
import { MarkdownModule } from 'ngx-markdown';
|
|
48
49
|
import * as i6$1 from '@angular/material/divider';
|
|
49
50
|
import * as i14$1 from '@angular/material/menu';
|
|
50
51
|
import { MatMenuModule } from '@angular/material/menu';
|
|
51
52
|
import moment from 'moment';
|
|
52
|
-
import * as i12$
|
|
53
|
+
import * as i12$2 from 'ngx-daterangepicker-material';
|
|
53
54
|
import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
|
|
54
55
|
import * as i8$3 from '@angular/cdk/drag-drop';
|
|
55
56
|
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
@@ -65,7 +66,6 @@ import { MatGridListModule } from '@angular/material/grid-list';
|
|
|
65
66
|
import { MatLegacyListModule } from '@angular/material/legacy-list';
|
|
66
67
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
67
68
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
68
|
-
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
69
69
|
import { MatNativeDateModule } from '@angular/material/core';
|
|
70
70
|
import * as i4$1 from 'ngx-toastr';
|
|
71
71
|
import { ToastrModule } from 'ngx-toastr';
|
|
@@ -1503,7 +1503,7 @@ class ApprovalRequestFormComponent {
|
|
|
1503
1503
|
return this.approvalRequestForm.get('searchmdo');
|
|
1504
1504
|
}
|
|
1505
1505
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApprovalRequestFormComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: SharedService }, { token: i3$1.MatSnackBar }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1506
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ApprovalRequestFormComponent, selector: "app-approval-request-form", viewQueries: [{ propertyName: "mdoRef", first: true, predicate: ["mdo"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Send For Approval</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"approvalRequestForm\">\n <mat-card class=\"mt-1\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Request Name <span class=\"required\">*</span></p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" formControlName=\"request_name\" [value]=\"\" placeholder=\"Enter a name for this request...\"\n maxlength=\"100\" \n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width:100%;font-size: 14px;font-family: 'Lato';\">\n <mat-error\n *ngIf=\"\n approvalRequestForm.get('request_name')?.touched &&\n approvalRequestForm.get('request_name')?.hasError('required')\n \"\n >\n Request name is required\n </mat-error>\n\n <mat-error\n *ngIf=\"\n approvalRequestForm.get('request_name')?.touched &&\n approvalRequestForm.get('request_name')?.hasError('pattern')\n \"\n >\n Only letters, numbers, spaces are allowed\n </mat-error>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Select MDO Admin/Leader <span class=\"required\">*</span></p>\n </div>\n <div class=\"section-header mt-4\">\n <!-- <input type=\"text\" formControlName=\"mdo_name\" placeholder=\"Enter mdo\" [value]=\"\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width: 100%;font-size: 14px;font-family: 'Lato';\"> -->\n <mat-form-field appearance=\"outline\" class=\"margin-top-s w-full required-select\">\n <mat-select #position formControlName=\"mdo_name\"\n placeholder=\"Select MDO Admin/Leader\" (closed)=\"onmdoDropdownClosed()\"\n panelClass=\"search-panel\" (openedChange)=\"setupScrollListener($event)\">\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 mdo admin/leader\"\n formControlName=\"searchmdo\" class=\"search-input\"\n (keydown)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation()\"\n (keyup)=\"mdoSearch($event)\" autocomplete=\"off\">\n <button *ngIf=\"searchmdoControl?.value\" type=\"button\" class=\"clear-button\"\n (click)=\"searchmdoControl.setValue('')\">\n \u2715 Clear Search\n </button>\n </div>\n </div>\n <!-- Options list -->\n <mat-option [value]=\"mdo?.id\" *ngFor=\"let mdo of masterData?.mdo\">\n {{mdo?.name}}\n </mat-option>\n <!-- Loading indicator -->\n <div *ngIf=\"isLoadingMoremdos\" class=\"loading-indicator\">\n Load More...\n </div>\n <!-- No results message -->\n <mat-option *ngIf=\"(masterData?.mdo )?.length === 0\" disabled>\n <!-- No matches found -->\n <div class=\"mat-error txt-size\">No MDO Admin/Leader mapped. Please contact system administrator.</div>\n </mat-option>\n </mat-select>\n <!-- <mat-error class=\"text-xs\"\n *ngIf=\"approvalRequestForm?.get('mdo_name')?.touched && approvalRequestForm?.get('mdo_name')?.invalid\">\n Please select at least one mdo.\n </mat-error> -->\n </mat-form-field>\n </div>\n </div>\n\n \n <!-- <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Upload Document (PDF/Word/Excel/TXT)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span>{{ uploadedFile?.name || 'Choose a file (PDF, Word, Excel, TXT)' }}</span>\n </label>\n\n <small class=\"file-upload-hint\">Max file size: 25MB</small>\n\n <input id=\"uploadDoc\" type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n\n </mat-card>\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 \n <button [disabled]=\"approvalRequestForm?.invalid\"\n [ngClass]=\"approvalRequestForm?.invalid ? 'btn-disable':'btn-active'\" type=\"button\"\n (click)=\"savemdo()\" ><mat-icon>send</mat-icon> Send Request</button>\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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: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:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:32px;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:32px;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:32px;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:10px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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}.close .mat-icon{height:18px!important;width:18px!important}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}::ng-deep .mat-select-panel.search-panel .search-input{flex:1 1 auto;width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;color:#333;outline:none;box-sizing:border-box}::ng-deep .mat-select-panel.search-panel .search-input:focus{border-color:#0074b6;box-shadow:0 0 0 3px #0074b60f}::ng-deep .mat-select-panel.search-panel .clear-button{background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:6px;line-height:1}::ng-deep .mat-select-panel.search-panel .loading-indicator{padding:10px 12px;text-align:center;color:#666;font-size:14px}::ng-deep .mat-select-panel.search-panel .mat-option{padding-top:10px;padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled]{padding:8px 16px!important}::ng-deep .mat-select-panel.align-panel{padding:0!important;box-sizing:border-box;margin-left:0!important;min-width:340px!important;max-width:340px!important}::ng-deep .mat-select-panel.align-panel .mat-option{padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled] .mat-error,::ng-deep .mat-select-panel.search-panel .mat-error{margin:0!important;padding:0!important;font-size:14px!important;line-height:1.4!important;color:#f44336}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-text-field-wrapper{background:#fff;border-radius:25px!important;height:42px}::ng-deep .mat-notched-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:42px;align-items:center;padding:0 16px;background:#fff}::ng-deep .mat-select-panel{border:1px solid rgba(0,0,0,.16);border-radius:8px;box-shadow:0 6px 18px #0000001f}mat-error{color:#f44336!important;font-size:12px;margin-top:4px}::ng-deep .mat-mdc-form-field-error{color:#d32f2f!important}::ng-deep .mat-mdc-form-field-error{color:#f44336!important;font-size:12px}.required{color:#f44336!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i8.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8$1.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: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
1506
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ApprovalRequestFormComponent, selector: "app-approval-request-form", viewQueries: [{ propertyName: "mdoRef", first: true, predicate: ["mdo"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Send For Approval</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"approvalRequestForm\">\n <mat-card class=\"mt-1\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Request Name <span class=\"required\">*</span></p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" formControlName=\"request_name\" [value]=\"\" placeholder=\"Enter a name for this request...\"\n maxlength=\"100\" \n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width:100%;font-size: 14px;font-family: 'Lato';\">\n <mat-error\n *ngIf=\"\n approvalRequestForm.get('request_name')?.touched &&\n approvalRequestForm.get('request_name')?.hasError('required')\n \"\n >\n Request name is required\n </mat-error>\n\n <mat-error\n *ngIf=\"\n approvalRequestForm.get('request_name')?.touched &&\n approvalRequestForm.get('request_name')?.hasError('pattern')\n \"\n >\n Only letters, numbers, spaces are allowed\n </mat-error>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Select MDO Admin/Leader <span class=\"required\">*</span></p>\n </div>\n <div class=\"section-header mt-4\">\n <!-- <input type=\"text\" formControlName=\"mdo_name\" placeholder=\"Enter mdo\" [value]=\"\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width: 100%;font-size: 14px;font-family: 'Lato';\"> -->\n <mat-form-field appearance=\"outline\" class=\"margin-top-s w-full required-select\">\n <mat-select #position formControlName=\"mdo_name\"\n placeholder=\"Select MDO Admin/Leader\" (closed)=\"onmdoDropdownClosed()\"\n panelClass=\"search-panel\" (openedChange)=\"setupScrollListener($event)\">\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 mdo admin/leader\"\n formControlName=\"searchmdo\" class=\"search-input\"\n (keydown)=\"$event.stopPropagation()\"\n (keydown.enter)=\"$event.preventDefault(); $event.stopPropagation()\"\n (keyup)=\"mdoSearch($event)\" autocomplete=\"off\">\n <button *ngIf=\"searchmdoControl?.value\" type=\"button\" class=\"clear-button\"\n (click)=\"searchmdoControl.setValue('')\">\n \u2715 Clear Search\n </button>\n </div>\n </div>\n <!-- Options list -->\n <mat-option [value]=\"mdo?.id\" *ngFor=\"let mdo of masterData?.mdo\">\n {{mdo?.name}}\n </mat-option>\n <!-- Loading indicator -->\n <div *ngIf=\"isLoadingMoremdos\" class=\"loading-indicator\">\n Load More...\n </div>\n <!-- No results message -->\n <mat-option *ngIf=\"(masterData?.mdo )?.length === 0\" disabled>\n <!-- No matches found -->\n <div class=\"mat-error txt-size\">No MDO Admin/Leader mapped. Please contact system administrator.</div>\n </mat-option>\n </mat-select>\n <!-- <mat-error class=\"text-xs\"\n *ngIf=\"approvalRequestForm?.get('mdo_name')?.touched && approvalRequestForm?.get('mdo_name')?.invalid\">\n Please select at least one mdo.\n </mat-error> -->\n </mat-form-field>\n </div>\n </div>\n\n \n <!-- <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Upload Document (PDF/Word/Excel/TXT)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span>{{ uploadedFile?.name || 'Choose a file (PDF, Word, Excel, TXT)' }}</span>\n </label>\n\n <small class=\"file-upload-hint\">Max file size: 25MB</small>\n\n <input id=\"uploadDoc\" type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n\n </mat-card>\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 \n <button [disabled]=\"approvalRequestForm?.invalid\"\n [ngClass]=\"approvalRequestForm?.invalid ? 'btn-disable':'btn-active'\" type=\"button\"\n (click)=\"savemdo()\" ><mat-icon>send</mat-icon> Send Request</button>\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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: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:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:32px;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:32px;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:32px;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:10px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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}.close .mat-icon{height:18px!important;width:18px!important}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}::ng-deep .mat-select-panel.search-panel .search-input{flex:1 1 auto;width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;color:#333;outline:none;box-sizing:border-box}::ng-deep .mat-select-panel.search-panel .search-input:focus{border-color:#0074b6;box-shadow:0 0 0 3px #0074b60f}::ng-deep .mat-select-panel.search-panel .clear-button{background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:6px;line-height:1}::ng-deep .mat-select-panel.search-panel .loading-indicator{padding:10px 12px;text-align:center;color:#666;font-size:14px}::ng-deep .mat-select-panel.search-panel .mat-option{padding-top:10px;padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled]{padding:8px 16px!important}::ng-deep .mat-select-panel.align-panel{padding:0!important;box-sizing:border-box;margin-left:0!important;min-width:340px!important;max-width:340px!important}::ng-deep .mat-select-panel.align-panel .mat-option{padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled] .mat-error,::ng-deep .mat-select-panel.search-panel .mat-error{margin:0!important;padding:0!important;font-size:14px!important;line-height:1.4!important;color:#f44336}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-text-field-wrapper{background:#fff;border-radius:25px!important;height:42px}::ng-deep .mat-notched-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:42px;align-items:center;padding:0 16px;background:#fff}::ng-deep .mat-select-panel{border:1px solid rgba(0,0,0,.16);border-radius:8px;box-shadow:0 6px 18px #0000001f}mat-error{color:#f44336!important;font-size:12px;margin-top:4px}::ng-deep .mat-mdc-form-field-error{color:#d32f2f!important}::ng-deep .mat-mdc-form-field-error{color:#f44336!important;font-size:12px}.required{color:#f44336!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8.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"] }] }); }
|
|
1507
1507
|
}
|
|
1508
1508
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApprovalRequestFormComponent, decorators: [{
|
|
1509
1509
|
type: Component,
|
|
@@ -2201,7 +2201,7 @@ class EditCbpPlanComponent {
|
|
|
2201
2201
|
}
|
|
2202
2202
|
}
|
|
2203
2203
|
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 }); }
|
|
2204
|
-
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 }], 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\">Edit 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\" [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\" placeholder=\"Select designation\"\n (closed)=\"onDesignationDropdownClosed()\" panelClass=\"search-panel\"\n (openedChange)=\"setupScrollListener($event)\">\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 (keyup)=\"designationSearch($event)\" autocomplete=\"off\">\n <div *ngIf=\"searchDesignationControl?.value\" type=\"button\" class=\"clear-icon\"\n (click)=\"searchDesignationControl.setValue('')\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <!-- Options list -->\n <mat-option [value]=\"designation?.name\" *ngFor=\"let designation of masterData?.designation\">\n {{designation?.name}}\n </mat-option>\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\" disabled class=\"no-data-option\">\n\n Designation Not Found.\n\n </mat-option>\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 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: i8.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i8$1.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: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
2204
|
+
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 }], 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\">Edit 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\" [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\" placeholder=\"Select designation\"\n (closed)=\"onDesignationDropdownClosed()\" panelClass=\"search-panel\"\n (openedChange)=\"setupScrollListener($event)\">\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 (keyup)=\"designationSearch($event)\" autocomplete=\"off\">\n <div *ngIf=\"searchDesignationControl?.value\" type=\"button\" class=\"clear-icon\"\n (click)=\"searchDesignationControl.setValue('')\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <!-- Options list -->\n <mat-option [value]=\"designation?.name\" *ngFor=\"let designation of masterData?.designation\">\n {{designation?.name}}\n </mat-option>\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\" disabled class=\"no-data-option\">\n\n Designation Not Found.\n\n </mat-option>\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 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$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i8.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"] }] }); }
|
|
2205
2205
|
}
|
|
2206
2206
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCbpPlanComponent, decorators: [{
|
|
2207
2207
|
type: Component,
|
|
@@ -2564,7 +2564,7 @@ class SuggestMoreCoursesComponent {
|
|
|
2564
2564
|
imgElement.src = 'assets/career/careers1.png'; // replace with your default image path
|
|
2565
2565
|
}
|
|
2566
2566
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuggestMoreCoursesComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SharedService }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2567
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuggestMoreCoursesComponent, selector: "app-suggest-more-courses", ngImport: i0, template: "<div class=\"suggest-courses-plan\">\n <div class=\"container\">\n <mat-card class=\"mt-2\">\n <div class=\"suggest-courses-header\">\n <div>\n <div class=\"heading\">\n Suggest Courses from iGOT\n </div>\n <div class=\"sub-heading-text\">\n <p>These courses is coming from the iGOT platform</p>\n </div>\n </div>\n <div>\n <div class=\"suggest-course-control\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancel()\"/>\n </div>\n <div>\n <input [disabled]=\"selectFilterCourses?.length ? false : true\" [ngClass]=\"selectFilterCourses?.length ? 'btn-active':'btn-disable'\" type=\"button\" value=\"Add\" (click)=\"addCourses()\"/>\n </div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"search-filter-section\">\n <div class=\"search flex margin-right-m\">\n <label class=\"label\">Search</label>\n <div>\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 style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 35px;\"\n class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\"\n (keyup.enter)=\"searchData()\" label=\"\"\n placeholder=\"Search Courses from iGOT\" 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\">\n <input [disabled]=\"!searchText.trim()\" [ngClass]=\"searchText.trim() ? 'btn-active':'btn-disable'\" type=\"button\" value=\"Search\" (click)=\"searchData()\" />\n </div>\n </div>\n\n\n </div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"results-header\" style=\"display: flex; justify-content: space-between; align-items: center;\">\n <div>\n <mat-checkbox [checked]=\"false\" (change)=\"selectAllCourses($event)\">Select All Courses</mat-checkbox>\n </div>\n <div class=\"results-info\" *ngIf=\"totalCount > 0\">\n <span class=\"text-muted\">Showing {{ startItem }} - {{ endItem }} of {{ totalCount }} courses</span>\n </div>\n </div>\n </div>\n <div class=\"course-card-list\">\n <div class=\"course-card-container mt-2\" *ngFor=\"let item of suggestedCourses\">\n <div>\n <div class=\"image-container\">\n <!-- \u2705 Checkbox -->\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\" \n class=\"image-checkbox\"\n (change)=\"selectedFilterCourses($event, item)\">\n </mat-checkbox>\n \n <!-- \u2705 Image -->\n <img [src]=\"item?.posterImage\" (error)=\"onImgError($event)\" />\n </div>\n \n <div class=\"mt-2\" style=\"width: 100px\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n \n <div class=\"sub-heading mt-2\">\n <p>{{ item?.name }}</p>\n </div>\n <div class=\"mt-2 desc\">\n <p>{{ item?.description | slice: 0:200 }}</p>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Pagination Controls -->\n <div class=\"pagination-controls mt-4\" *ngIf=\"totalPages > 1\" style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\n <button mat-icon-button [disabled]=\"!hasPreviousPage\" (click)=\"goToFirstPage()\" title=\"First Page\">\n <mat-icon>first_page</mat-icon>\n </button>\n \n <button mat-icon-button [disabled]=\"!hasPreviousPage\" (click)=\"goToPreviousPage()\" title=\"Previous Page\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n \n <span class=\"pagination-info\" style=\"margin: 0 15px;\">\n Page {{ currentPage + 1 }} of {{ totalPages }}\n </span>\n \n <button mat-icon-button [disabled]=\"!hasNextPage\" (click)=\"goToNextPage()\" title=\"Next Page\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n \n <button mat-icon-button [disabled]=\"!hasNextPage\" (click)=\"goToLastPage()\" title=\"Last Page\">\n <mat-icon>last_page</mat-icon>\n </button>\n </div>\n\n <!-- No Results Message -->\n <div class=\"no-results mt-4\" *ngIf=\"!loading && suggestedCourses.length === 0\" style=\"text-align: center; padding: 20px;\">\n <p class=\"text-muted\">{{ searchText.trim() ? 'No courses found for your search.' : 'No courses available.' }}</p>\n <button mat-button color=\"primary\" *ngIf=\"searchText.trim()\" (click)=\"clearSearch()\">Clear Search</button>\n </div>\n </mat-card>\n </div>\n</div> \n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto;width:100%;max-width:1400px;overflow:hidden}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.sub-heading-text p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:10px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4;width:auto}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex;justify-content:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row;gap:16px}.course-card-container{flex:0 0 calc(25% - 12px);width:calc(25% - 12px);min-width:280px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff;padding:15px;min-height:320px;box-sizing:border-box;display:flex;flex-direction:column}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:16px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:700;line-height:normal}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:12px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.course-card-list{display:flex;flex-wrap:wrap;flex-direction:row;gap:16px;justify-content:flex-start;align-items:stretch}@media (max-width: 1400px){.course-card-list{justify-content:center}}.image-container img{height:150px;width:100%;object-fit:cover}.image-container{position:relative;width:100%;height:auto}.image-container img{width:100%;height:150px;border-radius:6px}.image-container .image-checkbox{position:absolute;top:8px;right:8px;background:#fff;border-radius:4px;z-index:10}.desc{word-wrap:break-word}@media (max-width: 1400px){.course-card-container{flex:0 0 calc(33.333% - 10.667px);width:calc(33.333% - 10.667px);min-width:280px}}@media (max-width: 1024px){.course-card-container{flex:0 0 calc(50% - 8px);width:calc(50% - 8px);min-width:300px}}@media (max-width: 768px){.course-card-container{flex:0 0 100%;width:100%;min-width:auto}}\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: i7$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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i5.SlicePipe, name: "slice" }] }); }
|
|
2567
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuggestMoreCoursesComponent, selector: "app-suggest-more-courses", ngImport: i0, template: "<div class=\"suggest-courses-plan\">\n <div class=\"container\">\n <mat-card class=\"mt-2\">\n <div class=\"suggest-courses-header\">\n <div>\n <div class=\"heading\">\n Suggest Courses from iGOT\n </div>\n <div class=\"sub-heading-text\">\n <p>These courses is coming from the iGOT platform</p>\n </div>\n </div>\n <div>\n <div class=\"suggest-course-control\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Cancel\" (click)=\"cancel()\"/>\n </div>\n <div>\n <input [disabled]=\"selectFilterCourses?.length ? false : true\" [ngClass]=\"selectFilterCourses?.length ? 'btn-active':'btn-disable'\" type=\"button\" value=\"Add\" (click)=\"addCourses()\"/>\n </div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"search-filter-section\">\n <div class=\"search flex margin-right-m\">\n <label class=\"label\">Search</label>\n <div>\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 style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 35px;\"\n class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\"\n (keyup.enter)=\"searchData()\" label=\"\"\n placeholder=\"Search Courses from iGOT\" 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\">\n <input [disabled]=\"!searchText.trim()\" [ngClass]=\"searchText.trim() ? 'btn-active':'btn-disable'\" type=\"button\" value=\"Search\" (click)=\"searchData()\" />\n </div>\n </div>\n\n\n </div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\">\n <div class=\"results-header\" style=\"display: flex; justify-content: space-between; align-items: center;\">\n <div>\n <mat-checkbox [checked]=\"false\" (change)=\"selectAllCourses($event)\">Select All Courses</mat-checkbox>\n </div>\n <div class=\"results-info\" *ngIf=\"totalCount > 0\">\n <span class=\"text-muted\">Showing {{ startItem }} - {{ endItem }} of {{ totalCount }} courses</span>\n </div>\n </div>\n </div>\n <div class=\"course-card-list\">\n <div class=\"course-card-container mt-2\" *ngFor=\"let item of suggestedCourses\">\n <div>\n <div class=\"image-container\">\n <!-- \u2705 Checkbox -->\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\" \n class=\"image-checkbox\"\n (change)=\"selectedFilterCourses($event, item)\">\n </mat-checkbox>\n \n <!-- \u2705 Image -->\n <img [src]=\"item?.posterImage\" (error)=\"onImgError($event)\" />\n </div>\n \n <div class=\"mt-2\" style=\"width: 100px\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n \n <div class=\"sub-heading mt-2\">\n <p>{{ item?.name }}</p>\n </div>\n <div class=\"mt-2 desc\">\n <p>{{ item?.description | slice: 0:200 }}</p>\n </div>\n </div>\n </div>\n </div>\n \n <!-- Pagination Controls -->\n <div class=\"pagination-controls mt-4\" *ngIf=\"totalPages > 1\" style=\"display: flex; justify-content: center; align-items: center; gap: 10px;\">\n <button mat-icon-button [disabled]=\"!hasPreviousPage\" (click)=\"goToFirstPage()\" title=\"First Page\">\n <mat-icon>first_page</mat-icon>\n </button>\n \n <button mat-icon-button [disabled]=\"!hasPreviousPage\" (click)=\"goToPreviousPage()\" title=\"Previous Page\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n \n <span class=\"pagination-info\" style=\"margin: 0 15px;\">\n Page {{ currentPage + 1 }} of {{ totalPages }}\n </span>\n \n <button mat-icon-button [disabled]=\"!hasNextPage\" (click)=\"goToNextPage()\" title=\"Next Page\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n \n <button mat-icon-button [disabled]=\"!hasNextPage\" (click)=\"goToLastPage()\" title=\"Last Page\">\n <mat-icon>last_page</mat-icon>\n </button>\n </div>\n\n <!-- No Results Message -->\n <div class=\"no-results mt-4\" *ngIf=\"!loading && suggestedCourses.length === 0\" style=\"text-align: center; padding: 20px;\">\n <p class=\"text-muted\">{{ searchText.trim() ? 'No courses found for your search.' : 'No courses available.' }}</p>\n <button mat-button color=\"primary\" *ngIf=\"searchText.trim()\" (click)=\"clearSearch()\">Clear Search</button>\n </div>\n </mat-card>\n </div>\n</div> \n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto;width:100%;max-width:1400px;overflow:hidden}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.sub-heading-text p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:10px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4;width:auto}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex;justify-content:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row;gap:16px}.course-card-container{flex:0 0 calc(25% - 12px);width:calc(25% - 12px);min-width:280px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff;padding:15px;min-height:320px;box-sizing:border-box;display:flex;flex-direction:column}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:16px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:700;line-height:normal}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:12px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.course-card-list{display:flex;flex-wrap:wrap;flex-direction:row;gap:16px;justify-content:flex-start;align-items:stretch}@media (max-width: 1400px){.course-card-list{justify-content:center}}.image-container img{height:150px;width:100%;object-fit:cover}.image-container{position:relative;width:100%;height:auto}.image-container img{width:100%;height:150px;border-radius:6px}.image-container .image-checkbox{position:absolute;top:8px;right:8px;background:#fff;border-radius:4px;z-index:10}.desc{word-wrap:break-word}@media (max-width: 1400px){.course-card-container{flex:0 0 calc(33.333% - 10.667px);width:calc(33.333% - 10.667px);min-width:280px}}@media (max-width: 1024px){.course-card-container{flex:0 0 calc(50% - 8px);width:calc(50% - 8px);min-width:300px}}@media (max-width: 768px){.course-card-container{flex:0 0 100%;width:100%;min-width:auto}}\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: i7$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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.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: "pipe", type: i5.SlicePipe, name: "slice" }] }); }
|
|
2568
2568
|
}
|
|
2569
2569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuggestMoreCoursesComponent, decorators: [{
|
|
2570
2570
|
type: Component,
|
|
@@ -2992,7 +2992,7 @@ class AddCourseComponent {
|
|
|
2992
2992
|
this.dialogRef.close();
|
|
2993
2993
|
}
|
|
2994
2994
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCourseComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SharedService }, { token: i2.FormBuilder }, { token: i3$1.MatSnackBar }, { token: i1.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2995
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddCourseComponent, selector: "app-add-course", ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Add Course</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"courseForm\">\n\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Course Name</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" placeholder=\"Enter Course Name\" formControlName=\"courseName\" [value]=\"\"\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>Summary / Rationale:</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" formControlName=\"summary\" rows=\"5\" placeholder=\"Enter Summary\"\n [value]=\"\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Platform Name</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" placeholder=\"Enter Platform Name\" formControlName=\"platformName\" [value]=\"\"\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>Course URL</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" placeholder=\"Enter Course Url\" formControlName=\"courseUrl\" [value]=\"\"\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\n\n\n\n\n <div class=\"mt-2 section\">\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=\"sub-heading mt-4\">\n <p>Competency</p>\n </div>\n <div class=\"enhanced-competency-section mt-4\">\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\"\n placeholder=\"Select Competency Type\"\n [disabled]=\"isCompetencyPrefilled\"\n (selectionChange)=\"onCompetencyTypeChange($event.value)\">\n <mat-option value=\"Behavioral\">Behavioural</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 *ngIf=\"isCompetencyPrefilled\" class=\"prefill-info\">\n <small class=\"text-muted\">\n <mat-icon class=\"info-icon\">info</mat-icon>\n Core competency type is pre-selected based on gap analysis\n </small>\n </div>\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\"\n placeholder=\"Search and select theme\"\n [disabled]=\"isCompetencyPrefilled\"\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\n placeholder=\"Search themes...\"\n formControlName=\"themeSearch\"\n (input)=\"filterThemes($event.target.value)\"\n (click)=\"$event.stopPropagation()\"\n (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 *ngIf=\"isCompetencyPrefilled\" class=\"prefill-info\">\n <small class=\"text-muted\">\n <mat-icon class=\"info-icon\">info</mat-icon>\n Theme is pre-selected based on gap analysis\n </small>\n </div>\n </div>\n\n <!-- For Domain: Manual input -->\n <div class=\"manual-input-container\" *ngIf=\"selectedCompetencyType === 'Domain'\">\n <input type=\"text\"\n formControlName=\"manualThemeInput\"\n placeholder=\"Enter Theme manually\"\n [disabled]=\"isCompetencyPrefilled\"\n class=\"manual-input\" />\n <div *ngIf=\"isCompetencyPrefilled\" class=\"prefill-info\">\n <small class=\"text-muted\">\n <mat-icon class=\"info-icon\">info</mat-icon>\n Theme is pre-selected based on gap analysis\n </small>\n </div>\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 [disabled]=\"isCompetencyPrefilled\"\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\n placeholder=\"Search sub-themes...\"\n formControlName=\"subThemeSearch\"\n (input)=\"filterSubThemes($event.target.value)\"\n (click)=\"$event.stopPropagation()\"\n (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 *ngIf=\"isCompetencyPrefilled\" class=\"prefill-info\">\n <small class=\"text-muted\">\n <mat-icon class=\"info-icon\">info</mat-icon>\n Sub-theme is pre-selected based on gap analysis\n </small>\n </div>\n </div>\n\n <!-- For Domain: Manual input -->\n <div class=\"manual-input-container\" *ngIf=\"selectedCompetencyType === 'Domain'\">\n <input type=\"text\"\n formControlName=\"manualSubThemeInput\"\n placeholder=\"Enter Sub-theme manually\"\n [disabled]=\"isCompetencyPrefilled\"\n class=\"manual-input\" />\n <div *ngIf=\"isCompetencyPrefilled\" class=\"prefill-info\">\n <small class=\"text-muted\">\n <mat-icon class=\"info-icon\">info</mat-icon>\n Sub-theme is pre-selected based on gap analysis\n </small>\n </div>\n </div>\n </div>\n\n <!-- Add Button -->\n <div class=\"add-button-section\" *ngIf=\"selectedCompetencyType\">\n <button type=\"button\"\n class=\"add-competency-btn\"\n [disabled]=\"!canAddCompetency()\"\n [ngClass]=\"canAddCompetency() ? 'btn-active' : 'btn-disable'\"\n (click)=\"addCompetency()\">\n Add Competency\n </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\" *ngIf=\"getCompetenciesByType('Domain')?.length\">Domain Competencies</div>\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item domain-pill\"\n *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 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]=\"canSaveCourse() ? 'btn-active' : 'btn-disable'\" \n type=\"button\" \n value=\"Save\" \n [disabled]=\"!canSaveCourse()\"\n (click)=\"canSaveCourse() && saveCourse()\" />\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;gap:10px}.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:flex-start;flex-direction:row;flex-wrap:wrap;gap:32px;width:100%;overflow-x:auto}@media (max-width: 768px){.competency-container{flex-direction:column;align-items:stretch;gap:12px}.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain{width:100%;justify-content:space-between}}@media (max-width: 1024px) and (min-width: 769px){.competency-container{gap:6px}.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain{padding:3px 8px;gap:12px}.inside-layer{font-size:16px}.count{font-size:20px}}.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;flex-shrink:0;width:20%}.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;flex-shrink:0;width:20%}.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;flex-shrink:0;width:20%}.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;flex-shrink:0;width:20%}.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}: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-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;border:1px solid #ccc;cursor:not-allowed;opacity:.7;box-shadow:none}.prefill-info{margin-top:8px;padding:8px 12px;background:#1b4ca10d;border:1px solid rgba(27,76,161,.2);border-radius:8px}.prefill-info .text-muted{color:#6c757d;font-family:Lato;font-size:12px;display:flex;align-items:center;gap:6px}.prefill-info .text-muted .info-icon{font-size:16px;color:#1b4ca1}.competency-dropdown[disabled] ::ng-deep .mat-form-field-flex{opacity:.7}.competency-dropdown[disabled] ::ng-deep .mat-select{color:#6c757d!important}.manual-input:disabled{background:#f8f9fa!important;border-color:#e9ecef!important;color:#6c757d!important;opacity:.7;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: i8.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i8$1.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: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
2995
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddCourseComponent, selector: "app-add-course", ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Add Course</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"courseForm\">\n\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Course Name</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" placeholder=\"Enter Course Name\" formControlName=\"courseName\" [value]=\"\"\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>Summary / Rationale:</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" formControlName=\"summary\" rows=\"5\" placeholder=\"Enter Summary\"\n [value]=\"\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Platform Name</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" placeholder=\"Enter Platform Name\" formControlName=\"platformName\" [value]=\"\"\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>Course URL</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" placeholder=\"Enter Course Url\" formControlName=\"courseUrl\" [value]=\"\"\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\n\n\n\n\n <div class=\"mt-2 section\">\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=\"sub-heading mt-4\">\n <p>Competency</p>\n </div>\n <div class=\"enhanced-competency-section mt-4\">\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\"\n placeholder=\"Select Competency Type\"\n [disabled]=\"isCompetencyPrefilled\"\n (selectionChange)=\"onCompetencyTypeChange($event.value)\">\n <mat-option value=\"Behavioral\">Behavioural</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 *ngIf=\"isCompetencyPrefilled\" class=\"prefill-info\">\n <small class=\"text-muted\">\n <mat-icon class=\"info-icon\">info</mat-icon>\n Core competency type is pre-selected based on gap analysis\n </small>\n </div>\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\"\n placeholder=\"Search and select theme\"\n [disabled]=\"isCompetencyPrefilled\"\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\n placeholder=\"Search themes...\"\n formControlName=\"themeSearch\"\n (input)=\"filterThemes($event.target.value)\"\n (click)=\"$event.stopPropagation()\"\n (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 *ngIf=\"isCompetencyPrefilled\" class=\"prefill-info\">\n <small class=\"text-muted\">\n <mat-icon class=\"info-icon\">info</mat-icon>\n Theme is pre-selected based on gap analysis\n </small>\n </div>\n </div>\n\n <!-- For Domain: Manual input -->\n <div class=\"manual-input-container\" *ngIf=\"selectedCompetencyType === 'Domain'\">\n <input type=\"text\"\n formControlName=\"manualThemeInput\"\n placeholder=\"Enter Theme manually\"\n [disabled]=\"isCompetencyPrefilled\"\n class=\"manual-input\" />\n <div *ngIf=\"isCompetencyPrefilled\" class=\"prefill-info\">\n <small class=\"text-muted\">\n <mat-icon class=\"info-icon\">info</mat-icon>\n Theme is pre-selected based on gap analysis\n </small>\n </div>\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 [disabled]=\"isCompetencyPrefilled\"\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\n placeholder=\"Search sub-themes...\"\n formControlName=\"subThemeSearch\"\n (input)=\"filterSubThemes($event.target.value)\"\n (click)=\"$event.stopPropagation()\"\n (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 *ngIf=\"isCompetencyPrefilled\" class=\"prefill-info\">\n <small class=\"text-muted\">\n <mat-icon class=\"info-icon\">info</mat-icon>\n Sub-theme is pre-selected based on gap analysis\n </small>\n </div>\n </div>\n\n <!-- For Domain: Manual input -->\n <div class=\"manual-input-container\" *ngIf=\"selectedCompetencyType === 'Domain'\">\n <input type=\"text\"\n formControlName=\"manualSubThemeInput\"\n placeholder=\"Enter Sub-theme manually\"\n [disabled]=\"isCompetencyPrefilled\"\n class=\"manual-input\" />\n <div *ngIf=\"isCompetencyPrefilled\" class=\"prefill-info\">\n <small class=\"text-muted\">\n <mat-icon class=\"info-icon\">info</mat-icon>\n Sub-theme is pre-selected based on gap analysis\n </small>\n </div>\n </div>\n </div>\n\n <!-- Add Button -->\n <div class=\"add-button-section\" *ngIf=\"selectedCompetencyType\">\n <button type=\"button\"\n class=\"add-competency-btn\"\n [disabled]=\"!canAddCompetency()\"\n [ngClass]=\"canAddCompetency() ? 'btn-active' : 'btn-disable'\"\n (click)=\"addCompetency()\">\n Add Competency\n </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\" *ngIf=\"getCompetenciesByType('Domain')?.length\">Domain Competencies</div>\n <div class=\"competency-grid mt-2\">\n <div class=\"competency-item domain-pill\"\n *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 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]=\"canSaveCourse() ? 'btn-active' : 'btn-disable'\" \n type=\"button\" \n value=\"Save\" \n [disabled]=\"!canSaveCourse()\"\n (click)=\"canSaveCourse() && saveCourse()\" />\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;gap:10px}.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:flex-start;flex-direction:row;flex-wrap:wrap;gap:32px;width:100%;overflow-x:auto}@media (max-width: 768px){.competency-container{flex-direction:column;align-items:stretch;gap:12px}.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain{width:100%;justify-content:space-between}}@media (max-width: 1024px) and (min-width: 769px){.competency-container{gap:6px}.outside-layer-total,.outside-layer-behavioral,.outside-layer-functional,.outside-layer-domain{padding:3px 8px;gap:12px}.inside-layer{font-size:16px}.count{font-size:20px}}.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;flex-shrink:0;width:20%}.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;flex-shrink:0;width:20%}.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;flex-shrink:0;width:20%}.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;flex-shrink:0;width:20%}.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}: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-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;border:1px solid #ccc;cursor:not-allowed;opacity:.7;box-shadow:none}.prefill-info{margin-top:8px;padding:8px 12px;background:#1b4ca10d;border:1px solid rgba(27,76,161,.2);border-radius:8px}.prefill-info .text-muted{color:#6c757d;font-family:Lato;font-size:12px;display:flex;align-items:center;gap:6px}.prefill-info .text-muted .info-icon{font-size:16px;color:#1b4ca1}.competency-dropdown[disabled] ::ng-deep .mat-form-field-flex{opacity:.7}.competency-dropdown[disabled] ::ng-deep .mat-select{color:#6c757d!important}.manual-input:disabled{background:#f8f9fa!important;border-color:#e9ecef!important;color:#6c757d!important;opacity:.7;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i8.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"] }] }); }
|
|
2996
2996
|
}
|
|
2997
2997
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCourseComponent, decorators: [{
|
|
2998
2998
|
type: Component,
|
|
@@ -5026,7 +5026,7 @@ class GenerateCourseRecommendationComponent {
|
|
|
5026
5026
|
});
|
|
5027
5027
|
}
|
|
5028
5028
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GenerateCourseRecommendationComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SharedService }, { token: i3$1.MatSnackBar }, { token: i1$1.MatDialog }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5029
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GenerateCourseRecommendationComponent, selector: "app-generate-course-recommendation", viewQueries: [{ propertyName: "pdfContent", first: true, predicate: ["pdfContent"], descendants: true }], ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n \n <!-- Initial Loading Screen (for initial load and regeneration) -->\n <div class=\"initial-loading-container\" *ngIf=\"!dataLoaded || isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || (isRegeneratingWithProgress ? 'Regenerating course recommendations...' : 'Loading course recommendations...') }}</p>\n <div class=\"progress-details\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-indicator\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Main Content -->\n <div class=\"main-content\" *ngIf=\"dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"popup-header\">\n <div class=\"header-left\">\n <div class=\"heading\">Save Courses (<span>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span\n *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span></span>)</div>\n </div>\n <div class=\"header-actions\">\n <button class=\"regenerate-btn\" (click)=\"regenerateCourseRecommendations()\"\n [disabled]=\"isRegenerating\"\n mat-raised-button color=\"primary\">\n <mat-icon *ngIf=\"!isRegenerating\">refresh</mat-icon>\n <mat-spinner *ngIf=\"isRegenerating\" diameter=\"20\"></mat-spinner>\n <span>{{isRegenerating ? 'Regenerating...' : 'Regenerate Recommendations'}}</span>\n </button>\n <div class=\"cursor-pointer close-btn\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-4\">\n <mat-tab-group (selectedTabChange)=\"onOuterTabChange($event)\">\n <!-- First Main Tab -->\n <mat-tab label=\"course recommendation\">\n <!-- Nested Tabs -->\n <!-- <mat-tab-group (selectedTabChange)=\"onInnerTabChange($event)\">\n <mat-tab label=\"all\">\n\n </mat-tab>\n <mat-tab label=\"behavioural\">\n\n </mat-tab>\n <mat-tab label=\"functional\">\n\n </mat-tab>\n <mat-tab label=\"domain\">\n\n </mat-tab>\n </mat-tab-group> -->\n </mat-tab>\n\n <!-- Second Main Tab -->\n <mat-tab label=\"gap analysis\">\n <!-- <p>Gap analysis content goes here</p> -->\n </mat-tab>\n </mat-tab-group>\n <form [formGroup]=\"filterForm\" class=\"filters-container\">\n <div class=\"role-mapping-container\"\n *ngIf=\"outerTabActiveIndex === 0 && (innerTabActiveIndex === 0 || innerTabActiveIndex === 1 || innerTabActiveIndex === 2 || innerTabActiveIndex === 3 )\">\n <div class=\"container\">\n <div class=\"section-header-improved mt-3\">\n <div class=\"search-and-buttons-container\">\n <div>\n <label>Search Courses</label>\n </div> \n <div class=\"search-container-compact\">\n <div class=\"rsearch\">\n <mat-icon class=\"search-icon\">search</mat-icon>\n <input class=\"sinput-compact\" [(ngModel)]=\"searchText\"\n (input)=\"applyFilter($event.target.value);\"\n placeholder=\"Search Courses\" type=\"text\">\n </div>\n </div>\n \n </div>\n \n\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Competency</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.competency?.length ? '' : 'Competency' }}\n </mat-label>\n \n <mat-select\n formControlName=\"competency\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Competency\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'competency')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredCompetency\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div> \n \n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Rating</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.rating?.length ? '' : 'Rating' }}\n </mat-label>\n \n <mat-select\n formControlName=\"rating\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Reatings\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'rating')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredRatings\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n \n \n \n \n </div>\n <div class=\"section-header-improved-sec-2 mt-4\">\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Language</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.language?.length ? '' : 'Language' }}\n </mat-label>\n \n <mat-select\n formControlName=\"language\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Languages\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'language')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredLanguages\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Duration</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.duration?.length ? '' : 'Duration' }}\n </mat-label>\n \n <mat-select\n formControlName=\"duration\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Duration\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'duration')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredDurations\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Provider</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.provider?.length ? '' : 'Provider' }}\n </mat-label>\n \n <mat-select\n formControlName=\"provider\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Provider\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'provider')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredProviders\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div style=\"margin-top: 45px;margin-left: 20px;\">\n <input class=\"btn-active\" type=\"button\" value=\"Reset All Filters\"\n (click)=\"resetFilters()\" />\n </div>\n </div>\n <div class=\"mt-4\">\n <div style=\"font-size:16px;font-weight:bold;color:#000\">\n Filtered Course Count : {{filterdCourses?.length}}\n </div>\n </div>\n <div class=\"mt-5 sub-heading select-all-container\" *ngIf=\"filterdCourses?.length\">\n <div style=\"margin-left: 16px;\">\n <mat-checkbox [checked]=\"false\" (change)=\"selectAllCourses($event)\">Select All\n Courses</mat-checkbox>\n </div>\n <div class=\"btn-group-compact\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Suggest More Course From iGOT\"\n (click)=\"suggestMoreCourses()\" />\n </div>\n <div class=\"pl-2\">\n <input [disabled]=\"selectFilterCourses?.length > 0 ? false : true\"\n [ngClass]=\"selectFilterCourses?.length > 0 ? 'btn-active' : 'btn-disable'\"\n type=\"button\" [value]=\"mode === 'add' ? 'Save Courses' : 'Update Courses'\"\n (click)=\"saveCourses()\" />\n </div>\n </div>\n </div>\n <div class=\"disclaimer-container mt-2\" *ngIf=\"filterdCourses?.length\">\n <div class=\"disclaimer-message mt-4\">\n <strong>Disclaimer:</strong> Please verify the public course URL before adding it to the plan.\n </div>\n </div>\n <div class=\"mt-2\">\n\n <div class=\"course-list-container\">\n <div\n [ngClass]=\"innerTabActiveIndex > 0 ? 'course-list-container-flex':'course-list-container-right-flex' \">\n <div *ngIf=\"innerTabActiveIndex > 0\"\n [ngClass]=\"innerTabActiveIndex > 0 ? 'left-panel':''\">\n <ng-container *ngIf=\"innerTabActiveIndex === 1\">\n <div class=\"sub-heading\">\n <p>Competencies in Behavioural</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 2\">\n <div class=\"sub-heading\">\n <p>Competencies in Functional</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 3\">\n <div class=\"sub-heading\">\n <p>Competencies in Domain</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n </div>\n <div [ngClass]=\"innerTabActiveIndex > 0 ? 'right-panel':'right-panel-flex'\">\n <!-- No Course Found Message in Right Panel -->\n <div class=\"no-course-found-container\"\n *ngIf=\"filterdCourses?.length === 0 && selectedThemeFilter\">\n <div class=\"no-course-card\">\n <div class=\"no-course-icon\">\n <mat-icon>search_off</mat-icon>\n </div>\n <div class=\"no-course-content\">\n <h4>No Courses Found</h4>\n <p>No courses found for the selected theme:\n <strong>{{selectedThemeFilter}}</strong></p>\n <p>Would you like to add a course for this competency?</p>\n <button class=\"suggest-course-btn\"\n (click)=\"addCourseForSelectedTheme()\">\n <mat-icon>add_circle</mat-icon>\n Add Course\n </button>\n </div>\n </div>\n </div>\n\n <!-- Courses List -->\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n\n <div class=\"course-content\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n <div>\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\"\n (change)=\"selectedFilterCourses($event, item)\"></mat-checkbox>\n </div>\n <div class=\"ml-2\">\n <div class=\"course-pill-container\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img\n src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- <div>\n <div class=\"ai-recommened-pill\">\n <div class=\"ai-recommened-pill-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n\n <span *ngIf=\"item?.rationale\">AI Recommended\n <span *ngIf=\"item?.is_public\"> - Public</span>\n <span *ngIf=\"!item?.is_public\"> - iGOT</span>\n </span>\n <span *ngIf=\"!item?.rationale\">Manually Suggested - iGOT</span>\n\n </div>\n </div>\n </div> -->\n <div *ngIf=\"item?.rationale && !item?.is_public\">\n <div class=\"ai-recommened-pill-green\">\n <div class=\"ai-recommened-pill-green-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[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\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[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\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[0]}}</span>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"course-title mt-3 cursor-pointer\" (click)=\"redirectToToc(item)\">\n <span *ngIf=\"item?.course\">{{item?.course}}</span>\n <!-- <span *ngIf=\"item?.name\">{{item?.name}}****</span> -->\n <span style=\"margin-left:10px;\" (click)=\"redirectToToc(item)\"><img\n height=\"18px\" width=\"18px\"\n src=\"assets/icons/redirect.png\" /></span>\n </div>\n <div class=\"course-desc mt-2\">\n <!-- <span *ngIf=\"item?.rationale\">{{item?.rationale}}</span> -->\n <span *ngIf=\"item?.description\">{{item?.description}}</span>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioural Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',i)\">\n {{ isExpanded('Behavioural',i) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Functional',i)?.length\">\n <div class=\"competency-sub-heading\">Functional Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Functional',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',i)\">\n {{ isExpanded('Functional',i) ? 'Show Less' : '+' +\n getRemainingCount('Functional',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',i)?.length\">\n <div class=\"competency-sub-heading\">Domain Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Domain',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',i)\" class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n\n\n </div>\n\n <!-- Relevancy and Duration section -->\n <div class=\"course-footer\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">{{item?.relevancy}}%</div>\n </div>\n </div>\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Duration</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">\n <span\n *ngIf=\"item?.duration\">{{getDuration(item?.duration)}}</span>\n <span *ngIf=\"!(item?.duration)\">N/A</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- General No Data Message (only when no theme filter is active) -->\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 && !selectedThemeFilter\">\n <p>No Data Found</p>\n </div>\n </div>\n </div>\n </form>\n <div class=\"role-mapping-container\" *ngIf=\"outerTabActiveIndex === 1\">\n <div id=\"gap-analysis-content\">\n\n <div class=\"download-pdf mt-4 mb-2\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\" />\n </div>\n </div>\n <div>\n <!-- <div *ngIf=\"isPDFDownload\">\n <div class=\"pdf-heading\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}} <span\n *ngIf=\"planData?.designation_name \">_{{planData?.designation_name}}_Gap_Analysis</span>\n </div>\n </div> -->\n <div class=\"d-flex vh-100\" [ngClass]=\"isPDFDownload ? 'mt-4':''\">\n <!-- Sidebar -->\n <div class=\"d-flex flex-column p-3 bg-light border-end\" style=\"width: 250px;\">\n <h5 class=\"mb-4\">Analyze by Category</h5>\n <button *ngFor=\"let item of menuItems\"\n class=\"btn btn-outline-primary mb-2 text-start menu-list-item\"\n [class.active]=\"selectedCategory === item.key\" (click)=\"selectCategory(item.key)\">\n {{ item.label }}\n </button>\n </div>\n\n <!-- Main Content -->\n <div class=\"flex-grow-1 p-4\">\n <div class=\"d-flex justify-content-between gap-3 \">\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p>Competencies Covered</p>\n </div>\n <div class=\"div-count\">{{competencyCoveredCount}}</div>\n </div>\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p *ngIf=\"selectedCategory === 'all'\">Total Competencies</p>\n <p *ngIf=\"selectedCategory === 'behavioral'\">Total Behavioural Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'functional'\">Total Functional Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'domain'\">Total Domain Competencies</p>\n </div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'all'\">\n {{this.planData?.competencies?.length}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainTotalCompetencies}}</div>\n </div>\n <div class=\"p-3 green-bg\">\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'all'\">Overall Coverage\n </div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'behavioral'\">\n Behavioural Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'functional'\">\n Functional Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'domain'\">Domain\n Coverage</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'all'\">\n {{overallCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainCoverage}}</div>\n </div>\n </div>\n <div class=\"mt-4 all-category-list\" [ngSwitch]=\"selectedCategory\">\n <div *ngSwitchCase=\"'all'\">\n <h4>All Categories</h4>\n\n <!-- Show Behavioural section only if there are unmatched behavioural competencies -->\n <div class=\"mt-4\"\n *ngIf=\"behaviouralNotMatched && behaviouralNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div>\n </div>\n </div>\n </div>\n\n <!-- Show Functional section only if there are unmatched functional competencies -->\n <div class=\"mt-4\"\n *ngIf=\"functionalNotMatched && functionalNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Functional</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div>\n </div>\n </div>\n </div>\n\n <!-- Show Domain section only if there are unmatched domain competencies -->\n <div class=\"mt-4\" *ngIf=\"domainNotMatched && domainNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Domain</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div>\n </div>\n </div>\n </div>\n\n <!-- Show message when all competencies are covered -->\n <div class=\"mt-4 text-center\"\n *ngIf=\"(!behaviouralNotMatched || behaviouralNotMatched.length === 0) && \n (!functionalNotMatched || functionalNotMatched.length === 0) && \n (!domainNotMatched || domainNotMatched.length === 0)\">\n <div class=\"no-gaps-message\">\n <mat-icon class=\"success-icon\">check_circle</mat-icon>\n <h4>Excellent! All competencies are covered</h4>\n <p>All required competencies have been addressed by the selected\n courses.</p>\n </div>\n </div>\n\n </div>\n\n <div *ngSwitchCase=\"'behavioral'\">\n <h4>Behavioural</h4>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All behavioral competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'functional'\">\n <h4>Functional</h4>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Functional</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course</span></div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All functional competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'domain'\">\n <h4>Domain</h4>\n <div class=\"mt-4\" *ngIf=\"domainCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Domain</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"domainCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All domain competencies are covered by the selected\n courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchDefault>\n <p>Please select a category.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> <!-- Close main-content div -->\n\n </div>\n</div>\n\n\n<div [hidden]=\"!isPDFDownload\" class=\"gap-analysis-pdf-container\" #pdfContent>\n <div class=\"gap-analysis-pdf-header\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"logo\" />\n <h1><span>\n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.department_name?.name}}</span> \n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}}</span> \n <span *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span>\n </span></h1>\n <p class=\"subtitle\">A detailed breakdown of competencies Gap Analysis</p>\n \n </div>\n \n <div class=\"competency-snapshot\">\n <h2>Competency Snapshot</h2>\n <div class=\"snapshot-content\">\n <div class=\"circle-wrapper\">\n <svg class=\"progress-ring\" width=\"120\" height=\"120\">\n <circle class=\"progress-ring-bg\" cx=\"60\" cy=\"60\" r=\"52\" />\n <circle class=\"progress-ring-circle\" cx=\"60\" cy=\"60\" r=\"52\" />\n </svg>\n <div class=\"percentage-text\">{{overallCoverage}}<br /><span>Overall Coverage</span></div>\n </div>\n \n <div class=\"competency-container\">\n <!-- Total Competencies Box -->\n <div class=\"total-box\">\n <div class=\"title\">Total Competencies</div>\n <div class=\"count\">{{this.planData?.competencies?.length}}</div>\n </div>\n \n <!-- Progress Bars -->\n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text behavioral\">Behavioural</span>\n <span class=\"covered-text\">{{behavioralCompetencyCoveredCount}} / {{behavioralTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill behavioral\" [style.width.%]=\"(behavioralCompetencyCoveredCount / behavioralTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text functional\">Functional</span>\n <span class=\"covered-text\">{{functionalCompetencyCoveredCount}} / {{functionalTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill functional\" [style.width.%]=\"(functionalCompetencyCoveredCount / functionalTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text domain\">Domain</span>\n <span class=\"covered-text\">{{domainCompetencyCoveredCount}} / {{domainTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill domain\" [style.width.%]=\"(domainCompetencyCoveredCount / domainTotalCompetencies) * 100\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"gap-section mb-4\">\n <h2>Detailed Competency Analysis</h2>\n <div class=\"gap-box\">\n Bridge Your Competencies Gap\n <p class=\"subtitle\">Here are {{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}} key areas for development.</p>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Gap to Address <span *ngIf=\"(this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)) > 0\">({{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}})</span></p>\n \n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Covered Competencies <span>({{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}})</span></p> \n </div>\n <div class=\"gap-section mb-4\">\n \n <div class=\"green-bg\">\n <div class=\"div-green-label mb-2\">\n Congratulations!\n </div> \n <p>You have successfully covered </p>\n <p class=\"subtitle\">{{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}} key competencies, forming a strong professional foundation.</p>\n </div>\n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n {{item?.sub_theme}} \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"gap-section mb-4\">\n <h2>Recommended Courses</h2>\n </div>\n <app-gap-analysis-recommended-course [planData]=\"planData\"></app-gap-analysis-recommended-course>\n</div>\n \n\n\n<div class=\"overlay-loader\" *ngIf=\"loading && dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || 'Preparing course recommendation generation...' }}</p>\n <div class=\"progress-details\">\n <div class=\"progress-indicator\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";.container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;width:100%;gap:8px}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.relevancy,.competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.course-list-item:hover{box-shadow:0 4px 8px #00000026}.course-list-item:only-child{flex:1 1 auto;max-width:800px}.checked-course-container{display:flex;width:60%}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex;justify-content:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.header-left{flex:1}.header-actions{display:flex;align-items:center;gap:12px}.regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.regenerate-btn .mat-spinner{margin:0}.regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.close-btn:hover{background-color:#f5f5f5}.close-btn .mat-icon{font-size:20px;width:20px;height:20px}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.initial-loading-container{display:flex;justify-content:center;align-items:center;min-height:400px;width:100%}.initial-loading-container .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 2rem}.initial-loading-container .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.initial-loading-container .loading-content .loading-text .main-message{font-size:16px;font-weight:600;margin-bottom:1rem;color:#1b4ca1}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:300px;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#4caf50);border-radius:4px;transition:width .3s ease-in-out}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:12px;color:#666;font-weight:500}.initial-loading-container .loading-content .loading-text .progress-details .time-estimate{font-size:12px;color:#888;font-style:italic}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.overlay-loader .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 12px #00000026}.overlay-loader .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.overlay-loader .loading-content .loading-text .main-message{margin:0 0 16px;font-size:18px;font-weight:600;text-align:center}.overlay-loader .loading-content .loading-text .progress-details{margin-top:16px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:12px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#2563eb);border-radius:4px;transition:width .5s ease-in-out}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:14px;font-weight:500;color:#1b4ca1;display:block;text-align:center}.overlay-loader .loading-content .loading-text .progress-details .time-estimate{color:#666;font-size:12px;font-style:italic;display:block;text-align:center;margin-top:8px}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.competencies-grid-3{width:33%}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.grid-list-item div{padding:5px 10px;margin:10px 0}.course-pill-container{display:flex;gap:8px}.relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.show-more-competency{display:inline-flex;align-items:center}.show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.show-more-link:hover{text-decoration:underline}.course-content{flex:1;display:flex;flex-direction:column}.course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.menu-list-item.active{background-color:#1b4ca1;color:#fff}.menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.div-count{font-family:Lato;font-size:20px;font-weight:700}.green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.list-flex{display:flex;flex-direction:row;justify-content:space-between}.all-category-list .mat-icon{vertical-align:middle}.course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.left-panel{flex:0 0 250px;font-weight:700;text-align:left}.right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.course-list-container-right-flex{display:flex}.no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;gap:0px;width:100%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:5px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}.search-container-compact{flex:0 0 auto;min-width:180px}.search-container-compact .rsearch{position:relative;display:flex;align-items:center}.search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.search-container-compact .sinput-compact{border-radius:25px;border:2px solid #ccc;padding:20px 12px 20px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.search-container-compact .sinput-compact::placeholder{color:#999}.btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.theme-filter-controls{margin-bottom:8px}.clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.no-course-card .no-course-icon{margin-bottom:20px}.no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.no-course-card .suggest-course-btn:active{transform:translateY(0)}.no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.search-and-buttons-container{flex-direction:column;align-items:stretch}.search-container-compact{min-width:auto;width:100%}.btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.course-list-container-flex{flex-direction:column}.left-panel{flex:none!important;max-height:300px}.course-list-item{flex:0 0 100%;max-width:100%}.no-course-card{padding:20px}.no-course-card .no-course-content h4{font-size:20px}.no-course-card .no-course-content p{font-size:14px}}::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.download-pdf{justify-content:end;display:flex;flex-direction:row}.gap-analysis-pdf-container{font-family:Lato;max-width:900px;margin:auto;color:#212121}.gap-analysis-pdf-header{text-align:center;margin-bottom:2rem}.gap-analysis-pdf-header .logo{height:60px;margin-bottom:.5rem}.gap-analysis-pdf-header h1{font-size:1.8rem;font-weight:600;margin:.5rem 0}.gap-analysis-pdf-header .subtitle{color:#555;font-size:.95rem}.gap-analysis-pdf-header .download-btn{background:#5e00ff;color:#fff;border:none;padding:10px 20px;border-radius:6px;margin-top:1rem;font-weight:500;cursor:pointer}.competency-snapshot{background:#fafafa;border-radius:12px;padding:2rem;margin-bottom:2rem}.competency-snapshot h2{font-size:1.4rem;font-weight:600;margin-bottom:1.5rem}.competency-snapshot .snapshot-content{display:flex;gap:2rem;align-items:center;justify-content:space-between}.competency-snapshot .snapshot-content .circle-wrapper{position:relative;width:120px;height:120px}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-bg{fill:none;stroke:#eee;stroke-width:10}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-circle{fill:none;stroke:#6c63ff;stroke-width:10;stroke-linecap:round;stroke-dasharray:326.72;stroke-dashoffset:117.6192;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .35s}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:1.4rem;text-align:center}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text span{display:block;font-size:.75rem;font-weight:400;color:#555}.competency-snapshot .snapshot-content .details{flex-grow:1}.competency-snapshot .snapshot-content .details .total-competencies{font-size:1.2rem;margin-bottom:1rem}.competency-snapshot .snapshot-content .details .bar{margin:.5rem 0;padding:.6rem 1rem;border-radius:6px;font-weight:500;display:flex;justify-content:space-between;color:#fff}.competency-snapshot .snapshot-content .details .bar.behavioral{background:#7b1fa2}.competency-snapshot .snapshot-content .details .bar.functional{background:#0288d1}.competency-snapshot .snapshot-content .details .bar.domain{background:#f57c00}.gap-section{margin-top:2rem}.gap-section h2{font-size:1.3rem;margin-bottom:1rem}.gap-section .gap-box{background:#eef1ff;border-left:5px solid #6c63ff;padding:1rem;border-radius:6px;font-weight:500;color:#333}.gap-section .green-bg{background-color:#0080001c;border-left:5px solid #2d9b2d;padding:1rem;border-radius:6px;font-weight:500;color:#006400}.competency-container{width:100%;margin:0 auto;font-family:Segoe UI,sans-serif;color:#212121;display:flex;flex-direction:column}.total-box{background:#f8f9fc;border-radius:10px;padding:1.5rem;text-align:center;border:1px solid #e0e0e0;margin-bottom:1.5rem}.total-box .title{font-size:1rem;color:#666}.total-box .count{font-size:2rem;font-weight:700;color:#111;margin-top:.5rem}.progress-group{margin-bottom:1.5rem}.progress-group .progress-label{display:flex;justify-content:space-between;margin-bottom:6px}.progress-group .progress-label .label-text{font-weight:600}.progress-group .progress-label .covered-text{font-size:.9rem;color:#444}.progress-group .progress-label .behavioral{color:#f8b861}.progress-group .progress-label .functional{color:#e24577}.progress-group .progress-label .domain{color:#7b47a4}.progress-group .progress-bar{height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden}.progress-group .progress-bar .progress-fill{height:100%;border-radius:5px;transition:width .5s ease-in-out}.progress-group .progress-bar .progress-fill.behavioral{background:#f8b861}.progress-group .progress-bar .progress-fill.functional{background:#e24577}.progress-group .progress-bar .progress-fill.domain{background:#7b47a4}.competency-card{border-radius:8px;padding:1rem 1.5rem;margin-bottom:1rem;border:1px solid transparent}.competency-card .title{font-weight:600;font-size:1.1rem;color:#222;margin-bottom:.4rem}.competency-card .subtitle{font-size:.95rem;color:#555}.competency-card .subtitle .tag{font-weight:500}.competency-card .subtitle .behavioral,.competency-card .subtitle .domain,.competency-card .subtitle .functional{color:#000}.competency-card.behavioral{background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;border-color:#f8b861}.competency-card.functional{background:linear-gradient(0deg,#e245773d 0% 100%),#fff;border-color:#e24577}.competency-card.domain{background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;border-color:#7b47a4}.disclaimer-container{margin:8px 16px 0}.disclaimer-message{background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:20px;padding:8px 16px;font-family:Lato;font-size:14px;color:#333;line-height:1.2}.disclaimer-message strong{color:#000;font-weight:600}.select-all-container{display:flex;flex-direction:row;justify-content:space-between}:host ::ng-deep .search-and-buttons-container .mat-form-field-infix{padding:10px!important}:host ::ng-deep .search-and-buttons-container .mat-form-field-wrapper{width:100%!important}:host ::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}:host ::ng-deep .select-search-panel .mat-option.mat-selected:not(.mat-option-disabled){background-color:#1b4ca1!important;color:#fff!important}:host ::ng-deep .mat-form-field-appearance-outline{border-radius:25px;border:1px solid #ccc}:host ::ng-deep .mat-form-field-focused .mat-form-field-appearance-outline{border-color:#1b4ca1!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start{border-radius:25px 0 0 25px;border:none!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-right:none!important;border:none!important;border-radius:0 25px 25px 0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap{border:none!important;border-radius:25px}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{background-color:transparent!important}:host ::ng-deep .search-and-buttons-container .mat-option-text{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i7$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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i14.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i14.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: GapAnalysisRecommendedCourseComponent, selector: "app-gap-analysis-recommended-course", inputs: ["planData"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
|
|
5029
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GenerateCourseRecommendationComponent, selector: "app-generate-course-recommendation", viewQueries: [{ propertyName: "pdfContent", first: true, predicate: ["pdfContent"], descendants: true }], ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n \n <!-- Initial Loading Screen (for initial load and regeneration) -->\n <div class=\"initial-loading-container\" *ngIf=\"!dataLoaded || isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || (isRegeneratingWithProgress ? 'Regenerating course recommendations...' : 'Loading course recommendations...') }}</p>\n <div class=\"progress-details\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-indicator\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Main Content -->\n <div class=\"main-content\" *ngIf=\"dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"popup-header\">\n <div class=\"header-left\">\n <div class=\"heading\">Save Courses (<span>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span\n *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span></span>)</div>\n </div>\n <div class=\"header-actions\">\n <button class=\"regenerate-btn\" (click)=\"regenerateCourseRecommendations()\"\n [disabled]=\"isRegenerating\"\n mat-raised-button color=\"primary\">\n <mat-icon *ngIf=\"!isRegenerating\">refresh</mat-icon>\n <mat-spinner *ngIf=\"isRegenerating\" diameter=\"20\"></mat-spinner>\n <span>{{isRegenerating ? 'Regenerating...' : 'Regenerate Recommendations'}}</span>\n </button>\n <div class=\"cursor-pointer close-btn\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-4\">\n <mat-tab-group (selectedTabChange)=\"onOuterTabChange($event)\">\n <!-- First Main Tab -->\n <mat-tab label=\"course recommendation\">\n <!-- Nested Tabs -->\n <!-- <mat-tab-group (selectedTabChange)=\"onInnerTabChange($event)\">\n <mat-tab label=\"all\">\n\n </mat-tab>\n <mat-tab label=\"behavioural\">\n\n </mat-tab>\n <mat-tab label=\"functional\">\n\n </mat-tab>\n <mat-tab label=\"domain\">\n\n </mat-tab>\n </mat-tab-group> -->\n </mat-tab>\n\n <!-- Second Main Tab -->\n <mat-tab label=\"gap analysis\">\n <!-- <p>Gap analysis content goes here</p> -->\n </mat-tab>\n </mat-tab-group>\n <form [formGroup]=\"filterForm\" class=\"filters-container\">\n <div class=\"role-mapping-container\"\n *ngIf=\"outerTabActiveIndex === 0 && (innerTabActiveIndex === 0 || innerTabActiveIndex === 1 || innerTabActiveIndex === 2 || innerTabActiveIndex === 3 )\">\n <div class=\"container\">\n <div class=\"section-header-improved mt-3\">\n <div class=\"search-and-buttons-container\">\n <div>\n <label>Search Courses</label>\n </div> \n <div class=\"search-container-compact\">\n <div class=\"rsearch\">\n <mat-icon class=\"search-icon\">search</mat-icon>\n <input class=\"sinput-compact\" [(ngModel)]=\"searchText\"\n (input)=\"applyFilter($event.target.value);\"\n placeholder=\"Search Courses\" type=\"text\">\n </div>\n </div>\n \n </div>\n \n\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Competency</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.competency?.length ? '' : 'Competency' }}\n </mat-label>\n \n <mat-select\n formControlName=\"competency\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Competency\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'competency')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredCompetency\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div> \n \n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Rating</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.rating?.length ? '' : 'Rating' }}\n </mat-label>\n \n <mat-select\n formControlName=\"rating\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Reatings\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'rating')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredRatings\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n \n \n \n \n </div>\n <div class=\"section-header-improved-sec-2 mt-4\">\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Language</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.language?.length ? '' : 'Language' }}\n </mat-label>\n \n <mat-select\n formControlName=\"language\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Languages\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'language')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredLanguages\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Duration</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.duration?.length ? '' : 'Duration' }}\n </mat-label>\n \n <mat-select\n formControlName=\"duration\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Duration\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'duration')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredDurations\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div style=\"margin-left: 10px;\">\n <label>Select Provider</label>\n </div> \n <div>\n <mat-form-field appearance=\"outline\">\n <mat-label>\n {{ filterForm.value.provider?.length ? '' : 'Provider' }}\n </mat-label>\n \n <mat-select\n formControlName=\"provider\"\n multiple\n panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n \n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\"\n matInput\n placeholder=\"Search Provider\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'provider')\" />\n \n <!-- Values -->\n <mat-option\n *ngFor=\"let r of filteredProviders\"\n [value]=\"r\">\n {{ r }}\n </mat-option>\n \n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div style=\"margin-top: 45px;margin-left: 20px;\">\n <input class=\"btn-active\" type=\"button\" value=\"Reset All Filters\"\n (click)=\"resetFilters()\" />\n </div>\n </div>\n <div class=\"mt-4\">\n <div style=\"font-size:16px;font-weight:bold;color:#000\">\n Filtered Course Count : {{filterdCourses?.length}}\n </div>\n </div>\n <div class=\"mt-5 sub-heading select-all-container\" *ngIf=\"filterdCourses?.length\">\n <div style=\"margin-left: 16px;\">\n <mat-checkbox [checked]=\"false\" (change)=\"selectAllCourses($event)\">Select All\n Courses</mat-checkbox>\n </div>\n <div class=\"btn-group-compact\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Suggest More Course From iGOT\"\n (click)=\"suggestMoreCourses()\" />\n </div>\n <div class=\"pl-2\">\n <input [disabled]=\"selectFilterCourses?.length > 0 ? false : true\"\n [ngClass]=\"selectFilterCourses?.length > 0 ? 'btn-active' : 'btn-disable'\"\n type=\"button\" [value]=\"mode === 'add' ? 'Save Courses' : 'Update Courses'\"\n (click)=\"saveCourses()\" />\n </div>\n </div>\n </div>\n <div class=\"disclaimer-container mt-2\" *ngIf=\"filterdCourses?.length\">\n <div class=\"disclaimer-message mt-4\">\n <strong>Disclaimer:</strong> Please verify the public course URL before adding it to the plan.\n </div>\n </div>\n <div class=\"mt-2\">\n\n <div class=\"course-list-container\">\n <div\n [ngClass]=\"innerTabActiveIndex > 0 ? 'course-list-container-flex':'course-list-container-right-flex' \">\n <div *ngIf=\"innerTabActiveIndex > 0\"\n [ngClass]=\"innerTabActiveIndex > 0 ? 'left-panel':''\">\n <ng-container *ngIf=\"innerTabActiveIndex === 1\">\n <div class=\"sub-heading\">\n <p>Competencies in Behavioural</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 2\">\n <div class=\"sub-heading\">\n <p>Competencies in Functional</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n <ng-container *ngIf=\"innerTabActiveIndex === 3\">\n <div class=\"sub-heading\">\n <p>Competencies in Domain</p>\n </div>\n <div class=\"theme-filter-controls mb-2\" *ngIf=\"selectedThemeFilter\">\n <button class=\"clear-filter-btn\" (click)=\"clearThemeFilter()\">\n <mat-icon>clear</mat-icon> Clear Filter\n </button>\n </div>\n <div (click)=\"filterOnCompetencyTheme(item)\"\n class=\"category-list-item cursor-pointer mt-2\"\n [ngClass]=\"{'selected-theme': isThemeSelected(item)}\"\n *ngFor=\"let item of competencyMatchedByCategory\">\n {{item}}\n </div>\n </ng-container>\n </div>\n <div [ngClass]=\"innerTabActiveIndex > 0 ? 'right-panel':'right-panel-flex'\">\n <!-- No Course Found Message in Right Panel -->\n <div class=\"no-course-found-container\"\n *ngIf=\"filterdCourses?.length === 0 && selectedThemeFilter\">\n <div class=\"no-course-card\">\n <div class=\"no-course-icon\">\n <mat-icon>search_off</mat-icon>\n </div>\n <div class=\"no-course-content\">\n <h4>No Courses Found</h4>\n <p>No courses found for the selected theme:\n <strong>{{selectedThemeFilter}}</strong></p>\n <p>Would you like to add a course for this competency?</p>\n <button class=\"suggest-course-btn\"\n (click)=\"addCourseForSelectedTheme()\">\n <mat-icon>add_circle</mat-icon>\n Add Course\n </button>\n </div>\n </div>\n </div>\n\n <!-- Courses List -->\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n\n <div class=\"course-content\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n <div>\n <mat-checkbox [checked]=\"checkIfCourseExists(item)\"\n (change)=\"selectedFilterCourses($event, item)\"></mat-checkbox>\n </div>\n <div class=\"ml-2\">\n <div class=\"course-pill-container\">\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img\n src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- <div>\n <div class=\"ai-recommened-pill\">\n <div class=\"ai-recommened-pill-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n\n <span *ngIf=\"item?.rationale\">AI Recommended\n <span *ngIf=\"item?.is_public\"> - Public</span>\n <span *ngIf=\"!item?.is_public\"> - iGOT</span>\n </span>\n <span *ngIf=\"!item?.rationale\">Manually Suggested - iGOT</span>\n\n </div>\n </div>\n </div> -->\n <div *ngIf=\"item?.rationale && !item?.is_public\">\n <div class=\"ai-recommened-pill-green\">\n <div class=\"ai-recommened-pill-green-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n\n <span>AI Recommended - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[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\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[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\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\"\n target=\"_blank\"><span>Platform -\n {{item?.platform}}</span></a>\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[0]}}</span>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"course-title mt-3 cursor-pointer\" (click)=\"redirectToToc(item)\">\n <span *ngIf=\"item?.course\">{{item?.course}}</span>\n <!-- <span *ngIf=\"item?.name\">{{item?.name}}****</span> -->\n <span style=\"margin-left:10px;\" (click)=\"redirectToToc(item)\"><img\n height=\"18px\" width=\"18px\"\n src=\"assets/icons/redirect.png\" /></span>\n </div>\n <div class=\"course-desc mt-2\">\n <!-- <span *ngIf=\"item?.rationale\">{{item?.rationale}}</span> -->\n <span *ngIf=\"item?.description\">{{item?.description}}</span>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioural Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',i)\">\n {{ isExpanded('Behavioural',i) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Functional',i)?.length\">\n <div class=\"competency-sub-heading\">Functional Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Functional',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',i)\">\n {{ isExpanded('Functional',i) ? 'Show Less' : '+' +\n getRemainingCount('Functional',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',i)?.length\">\n <div class=\"competency-sub-heading\">Domain Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Domain',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',i)\" class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n\n\n </div>\n\n <!-- Relevancy and Duration section -->\n <div class=\"course-footer\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">{{item?.relevancy}}%</div>\n </div>\n </div>\n <div class=\"relevancy-pill-green\">\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Duration</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">\n <span\n *ngIf=\"item?.duration\">{{getDuration(item?.duration)}}</span>\n <span *ngIf=\"!(item?.duration)\">N/A</span>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- General No Data Message (only when no theme filter is active) -->\n <div class=\"mt-2 sub-heading\" *ngIf=\"filterdCourses?.length === 0 && !selectedThemeFilter\">\n <p>No Data Found</p>\n </div>\n </div>\n </div>\n </form>\n <div class=\"role-mapping-container\" *ngIf=\"outerTabActiveIndex === 1\">\n <div id=\"gap-analysis-content\">\n\n <div class=\"download-pdf mt-4 mb-2\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPDF()\" />\n </div>\n </div>\n <div>\n <!-- <div *ngIf=\"isPDFDownload\">\n <div class=\"pdf-heading\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}} <span\n *ngIf=\"planData?.designation_name \">_{{planData?.designation_name}}_Gap_Analysis</span>\n </div>\n </div> -->\n <div class=\"d-flex vh-100\" [ngClass]=\"isPDFDownload ? 'mt-4':''\">\n <!-- Sidebar -->\n <div class=\"d-flex flex-column p-3 bg-light border-end\" style=\"width: 250px;\">\n <h5 class=\"mb-4\">Analyze by Category</h5>\n <button *ngFor=\"let item of menuItems\"\n class=\"btn btn-outline-primary mb-2 text-start menu-list-item\"\n [class.active]=\"selectedCategory === item.key\" (click)=\"selectCategory(item.key)\">\n {{ item.label }}\n </button>\n </div>\n\n <!-- Main Content -->\n <div class=\"flex-grow-1 p-4\">\n <div class=\"d-flex justify-content-between gap-3 \">\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p>Competencies Covered</p>\n </div>\n <div class=\"div-count\">{{competencyCoveredCount}}</div>\n </div>\n <div class=\"p-3 gray-bg\">\n <div class=\"div-label sub-heading\">\n <p *ngIf=\"selectedCategory === 'all'\">Total Competencies</p>\n <p *ngIf=\"selectedCategory === 'behavioral'\">Total Behavioural Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'functional'\">Total Functional Competencies\n </p>\n <p *ngIf=\"selectedCategory === 'domain'\">Total Domain Competencies</p>\n </div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'all'\">\n {{this.planData?.competencies?.length}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalTotalCompetencies}}</div>\n <div class=\"div-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainTotalCompetencies}}</div>\n </div>\n <div class=\"p-3 green-bg\">\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'all'\">Overall Coverage\n </div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'behavioral'\">\n Behavioural Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'functional'\">\n Functional Coverage</div>\n <div class=\"div-green-label\" *ngIf=\"selectedCategory === 'domain'\">Domain\n Coverage</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'all'\">\n {{overallCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'behavioral'\">\n {{behavioralCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'functional'\">\n {{functionalCoverage}}</div>\n <div class=\"div-green-count\" *ngIf=\"selectedCategory === 'domain'\">\n {{domainCoverage}}</div>\n </div>\n </div>\n <div class=\"mt-4 all-category-list\" [ngSwitch]=\"selectedCategory\">\n <div *ngSwitchCase=\"'all'\">\n <h4>All Categories</h4>\n\n <!-- Show Behavioural section only if there are unmatched behavioural competencies -->\n <div class=\"mt-4\"\n *ngIf=\"behaviouralNotMatched && behaviouralNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div>\n </div>\n </div>\n </div>\n\n <!-- Show Functional section only if there are unmatched functional competencies -->\n <div class=\"mt-4\"\n *ngIf=\"functionalNotMatched && functionalNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Functional</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div>\n </div>\n </div>\n </div>\n\n <!-- Show Domain section only if there are unmatched domain competencies -->\n <div class=\"mt-4\" *ngIf=\"domainNotMatched && domainNotMatched.length > 0\">\n <div class=\"sub-heading\">\n <p>Domain</p>\n </div>\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item | titlecase}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New\n Course</span></div>\n </div>\n </div>\n </div>\n\n <!-- Show message when all competencies are covered -->\n <div class=\"mt-4 text-center\"\n *ngIf=\"(!behaviouralNotMatched || behaviouralNotMatched.length === 0) && \n (!functionalNotMatched || functionalNotMatched.length === 0) && \n (!domainNotMatched || domainNotMatched.length === 0)\">\n <div class=\"no-gaps-message\">\n <mat-icon class=\"success-icon\">check_circle</mat-icon>\n <h4>Excellent! All competencies are covered</h4>\n <p>All required competencies have been addressed by the selected\n courses.</p>\n </div>\n </div>\n\n </div>\n\n <div *ngSwitchCase=\"'behavioral'\">\n <h4>Behavioural</h4>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Behavioural</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Behavioral')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"behavioralCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All behavioral competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'functional'\">\n <h4>Functional</h4>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Functional</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Functional')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course</span></div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"functionalCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All functional competencies are covered by the\n selected courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"'domain'\">\n <h4>Domain</h4>\n <div class=\"mt-4\" *ngIf=\"domainCoverage !== '100%'\">\n <!-- <div class=\"sub-heading\">\n <p>Domain</p>\n </div> -->\n <div class=\"gray-bg-item\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"list-flex\">\n <div><span>{{item}}</span></div>\n <div class=\"cursor-pointer\" (click)=\"addCourse(item, 'Domain')\">\n <span class=\"add-btn\"><mat-icon>add</mat-icon> Add New Course </span></div>\n </div>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"domainCoverage === '100%'\">\n <div class=\"p-3\"\n style=\"background-color: #e8f5e8; border: 1px solid #4caf50; border-radius: 8px; text-align: center;\">\n <div style=\"color: #2e7d32; font-weight: 600; font-size: 16px;\">\n \uD83C\uDF89 Excellent! All domain competencies are covered by the selected\n courses.\n </div>\n </div>\n </div>\n </div>\n\n <div *ngSwitchDefault>\n <p>Please select a category.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div> <!-- Close main-content div -->\n\n </div>\n</div>\n\n\n<div [hidden]=\"!isPDFDownload\" class=\"gap-analysis-pdf-container\" #pdfContent>\n <div class=\"gap-analysis-pdf-header\">\n <img src=\"assets/icons/karmayogiLogo-min.png\" alt=\"Karmayogi Bharat Logo\" class=\"logo\" />\n <h1><span>\n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'state'\">{{sharedService?.cbpPlanFinalObj?.department_name?.name}}</span> \n <span *ngIf=\"sharedService?.cbpPlanFinalObj?.ministry?.sbOrgType === 'ministry'\">{{sharedService?.cbpPlanFinalObj?.ministry?.name}}</span> \n <span *ngIf=\"planData?.designation_name \">/ {{planData?.designation_name}}</span>\n </span></h1>\n <p class=\"subtitle\">A detailed breakdown of competencies Gap Analysis</p>\n \n </div>\n \n <div class=\"competency-snapshot\">\n <h2>Competency Snapshot</h2>\n <div class=\"snapshot-content\">\n <div class=\"circle-wrapper\">\n <svg class=\"progress-ring\" width=\"120\" height=\"120\">\n <circle class=\"progress-ring-bg\" cx=\"60\" cy=\"60\" r=\"52\" />\n <circle class=\"progress-ring-circle\" cx=\"60\" cy=\"60\" r=\"52\" />\n </svg>\n <div class=\"percentage-text\">{{overallCoverage}}<br /><span>Overall Coverage</span></div>\n </div>\n \n <div class=\"competency-container\">\n <!-- Total Competencies Box -->\n <div class=\"total-box\">\n <div class=\"title\">Total Competencies</div>\n <div class=\"count\">{{this.planData?.competencies?.length}}</div>\n </div>\n \n <!-- Progress Bars -->\n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text behavioral\">Behavioural</span>\n <span class=\"covered-text\">{{behavioralCompetencyCoveredCount}} / {{behavioralTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill behavioral\" [style.width.%]=\"(behavioralCompetencyCoveredCount / behavioralTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text functional\">Functional</span>\n <span class=\"covered-text\">{{functionalCompetencyCoveredCount}} / {{functionalTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill functional\" [style.width.%]=\"(functionalCompetencyCoveredCount / functionalTotalCompetencies) * 100\"></div>\n </div>\n </div>\n \n <div class=\"progress-group\">\n <div class=\"progress-label\">\n <span class=\"label-text domain\">Domain</span>\n <span class=\"covered-text\">{{domainCompetencyCoveredCount}} / {{domainTotalCompetencies}} Covered</span>\n </div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill domain\" [style.width.%]=\"(domainCompetencyCoveredCount / domainTotalCompetencies) * 100\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"gap-section mb-4\">\n <h2>Detailed Competency Analysis</h2>\n <div class=\"gap-box\">\n Bridge Your Competencies Gap\n <p class=\"subtitle\">Here are {{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}} key areas for development.</p>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Gap to Address <span *ngIf=\"(this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)) > 0\">({{this.planData?.competencies?.length - (behavioralCompetencyCoveredCount + functionalCompetencyCoveredCount + domainCompetencyCoveredCount)}})</span></p>\n \n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainNotMatched\">\n <div class=\"title\">{{item | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"sub-heading mb-4\">\n <p>Covered Competencies <span>({{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}})</span></p> \n </div>\n <div class=\"gap-section mb-4\">\n \n <div class=\"green-bg\">\n <div class=\"div-green-label mb-2\">\n Congratulations!\n </div> \n <p>You have successfully covered </p>\n <p class=\"subtitle\">{{this.planData?.competencies?.length - (behaviouralNotMatched?.length + functionalNotMatched?.length + domainNotMatched?.length)}} key competencies, forming a strong professional foundation.</p>\n </div>\n </div>\n <div class=\"competency-card behavioral\" *ngFor=\"let item of behaviouralMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag behavioral\">Behavioural</span>\n </div>\n </div>\n \n <div class=\"competency-card functional\" *ngFor=\"let item of functionalMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n {{item?.sub_theme}} \u2022 \n <span class=\"tag functional\">Functional</span>\n </div>\n </div>\n \n <div class=\"competency-card domain\" *ngFor=\"let item of domainMatched\">\n <div class=\"title\">{{item?.theme | titlecase}}</div>\n <div class=\"subtitle\">\n <!-- Project Management -->\n {{item?.sub_theme}} \u2022 \n <span class=\"tag domain\">Domain</span>\n </div>\n </div>\n <div class=\"gap-section mb-4\">\n <h2>Recommended Courses</h2>\n </div>\n <app-gap-analysis-recommended-course [planData]=\"planData\"></app-gap-analysis-recommended-course>\n</div>\n \n\n\n<div class=\"overlay-loader\" *ngIf=\"loading && dataLoaded && !isRegeneratingWithProgress\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || 'Preparing course recommendation generation...' }}</p>\n <div class=\"progress-details\">\n <div class=\"progress-indicator\" *ngIf=\"progressPercentage > 0\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"progressPercentage\">\n </div>\n </div>\n <small class=\"progress-text\">{{ progressPercentage }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time course generation in progress. This may take 1-2 minutes.\n </small>\n </div>\n </div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";.container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;width:100%;gap:8px}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.relevancy,.competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.course-list-item:hover{box-shadow:0 4px 8px #00000026}.course-list-item:only-child{flex:1 1 auto;max-width:800px}.checked-course-container{display:flex;width:60%}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex;justify-content:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.header-left{flex:1}.header-actions{display:flex;align-items:center;gap:12px}.regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.regenerate-btn .mat-spinner{margin:0}.regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.close-btn:hover{background-color:#f5f5f5}.close-btn .mat-icon{font-size:20px;width:20px;height:20px}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.initial-loading-container{display:flex;justify-content:center;align-items:center;min-height:400px;width:100%}.initial-loading-container .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 2rem}.initial-loading-container .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.initial-loading-container .loading-content .loading-text .main-message{font-size:16px;font-weight:600;margin-bottom:1rem;color:#1b4ca1}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:300px;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#4caf50);border-radius:4px;transition:width .3s ease-in-out}.initial-loading-container .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:12px;color:#666;font-weight:500}.initial-loading-container .loading-content .loading-text .progress-details .time-estimate{font-size:12px;color:#888;font-style:italic}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.overlay-loader .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 12px #00000026}.overlay-loader .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:320px}.overlay-loader .loading-content .loading-text .main-message{margin:0 0 16px;font-size:18px;font-weight:600;text-align:center}.overlay-loader .loading-content .loading-text .progress-details{margin-top:16px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:12px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#2563eb);border-radius:4px;transition:width .5s ease-in-out}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:14px;font-weight:500;color:#1b4ca1;display:block;text-align:center}.overlay-loader .loading-content .loading-text .progress-details .time-estimate{color:#666;font-size:12px;font-style:italic;display:block;text-align:center;margin-top:8px}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.competencies-grid-3{width:33%}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.grid-list-item div{padding:5px 10px;margin:10px 0}.course-pill-container{display:flex;gap:8px}.relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.show-more-competency{display:inline-flex;align-items:center}.show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.show-more-link:hover{text-decoration:underline}.course-content{flex:1;display:flex;flex-direction:column}.course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.menu-list-item.active{background-color:#1b4ca1;color:#fff}.menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.div-count{font-family:Lato;font-size:20px;font-weight:700}.green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.list-flex{display:flex;flex-direction:row;justify-content:space-between}.all-category-list .mat-icon{vertical-align:middle}.course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.left-panel{flex:0 0 250px;font-weight:700;text-align:left}.right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.course-list-container-right-flex{display:flex}.no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.section-header-improved,.section-header-improved-sec-2{display:flex;flex-direction:row;gap:0px;width:100%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:5px;flex-direction:column;flex-wrap:wrap;width:37%;margin:0 5px}.search-container-compact{flex:0 0 auto;min-width:180px}.search-container-compact .rsearch{position:relative;display:flex;align-items:center}.search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.search-container-compact .sinput-compact{border-radius:25px;border:2px solid #ccc;padding:20px 12px 20px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.search-container-compact .sinput-compact::placeholder{color:#999}.btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.theme-filter-controls{margin-bottom:8px}.clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.no-course-card .no-course-icon{margin-bottom:20px}.no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.no-course-card .suggest-course-btn:active{transform:translateY(0)}.no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.search-and-buttons-container{flex-direction:column;align-items:stretch}.search-container-compact{min-width:auto;width:100%}.btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.course-list-container-flex{flex-direction:column}.left-panel{flex:none!important;max-height:300px}.course-list-item{flex:0 0 100%;max-width:100%}.no-course-card{padding:20px}.no-course-card .no-course-content h4{font-size:20px}.no-course-card .no-course-content p{font-size:14px}}::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.download-pdf{justify-content:end;display:flex;flex-direction:row}.gap-analysis-pdf-container{font-family:Lato;max-width:900px;margin:auto;color:#212121}.gap-analysis-pdf-header{text-align:center;margin-bottom:2rem}.gap-analysis-pdf-header .logo{height:60px;margin-bottom:.5rem}.gap-analysis-pdf-header h1{font-size:1.8rem;font-weight:600;margin:.5rem 0}.gap-analysis-pdf-header .subtitle{color:#555;font-size:.95rem}.gap-analysis-pdf-header .download-btn{background:#5e00ff;color:#fff;border:none;padding:10px 20px;border-radius:6px;margin-top:1rem;font-weight:500;cursor:pointer}.competency-snapshot{background:#fafafa;border-radius:12px;padding:2rem;margin-bottom:2rem}.competency-snapshot h2{font-size:1.4rem;font-weight:600;margin-bottom:1.5rem}.competency-snapshot .snapshot-content{display:flex;gap:2rem;align-items:center;justify-content:space-between}.competency-snapshot .snapshot-content .circle-wrapper{position:relative;width:120px;height:120px}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-bg{fill:none;stroke:#eee;stroke-width:10}.competency-snapshot .snapshot-content .circle-wrapper .progress-ring-circle{fill:none;stroke:#6c63ff;stroke-width:10;stroke-linecap:round;stroke-dasharray:326.72;stroke-dashoffset:117.6192;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .35s}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:1.4rem;text-align:center}.competency-snapshot .snapshot-content .circle-wrapper .percentage-text span{display:block;font-size:.75rem;font-weight:400;color:#555}.competency-snapshot .snapshot-content .details{flex-grow:1}.competency-snapshot .snapshot-content .details .total-competencies{font-size:1.2rem;margin-bottom:1rem}.competency-snapshot .snapshot-content .details .bar{margin:.5rem 0;padding:.6rem 1rem;border-radius:6px;font-weight:500;display:flex;justify-content:space-between;color:#fff}.competency-snapshot .snapshot-content .details .bar.behavioral{background:#7b1fa2}.competency-snapshot .snapshot-content .details .bar.functional{background:#0288d1}.competency-snapshot .snapshot-content .details .bar.domain{background:#f57c00}.gap-section{margin-top:2rem}.gap-section h2{font-size:1.3rem;margin-bottom:1rem}.gap-section .gap-box{background:#eef1ff;border-left:5px solid #6c63ff;padding:1rem;border-radius:6px;font-weight:500;color:#333}.gap-section .green-bg{background-color:#0080001c;border-left:5px solid #2d9b2d;padding:1rem;border-radius:6px;font-weight:500;color:#006400}.competency-container{width:100%;margin:0 auto;font-family:Segoe UI,sans-serif;color:#212121;display:flex;flex-direction:column}.total-box{background:#f8f9fc;border-radius:10px;padding:1.5rem;text-align:center;border:1px solid #e0e0e0;margin-bottom:1.5rem}.total-box .title{font-size:1rem;color:#666}.total-box .count{font-size:2rem;font-weight:700;color:#111;margin-top:.5rem}.progress-group{margin-bottom:1.5rem}.progress-group .progress-label{display:flex;justify-content:space-between;margin-bottom:6px}.progress-group .progress-label .label-text{font-weight:600}.progress-group .progress-label .covered-text{font-size:.9rem;color:#444}.progress-group .progress-label .behavioral{color:#f8b861}.progress-group .progress-label .functional{color:#e24577}.progress-group .progress-label .domain{color:#7b47a4}.progress-group .progress-bar{height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden}.progress-group .progress-bar .progress-fill{height:100%;border-radius:5px;transition:width .5s ease-in-out}.progress-group .progress-bar .progress-fill.behavioral{background:#f8b861}.progress-group .progress-bar .progress-fill.functional{background:#e24577}.progress-group .progress-bar .progress-fill.domain{background:#7b47a4}.competency-card{border-radius:8px;padding:1rem 1.5rem;margin-bottom:1rem;border:1px solid transparent}.competency-card .title{font-weight:600;font-size:1.1rem;color:#222;margin-bottom:.4rem}.competency-card .subtitle{font-size:.95rem;color:#555}.competency-card .subtitle .tag{font-weight:500}.competency-card .subtitle .behavioral,.competency-card .subtitle .domain,.competency-card .subtitle .functional{color:#000}.competency-card.behavioral{background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;border-color:#f8b861}.competency-card.functional{background:linear-gradient(0deg,#e245773d 0% 100%),#fff;border-color:#e24577}.competency-card.domain{background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;border-color:#7b47a4}.disclaimer-container{margin:8px 16px 0}.disclaimer-message{background-color:#fff3cd;border:1px solid #ffeaa7;border-radius:20px;padding:8px 16px;font-family:Lato;font-size:14px;color:#333;line-height:1.2}.disclaimer-message strong{color:#000;font-weight:600}.select-all-container{display:flex;flex-direction:row;justify-content:space-between}:host ::ng-deep .search-and-buttons-container .mat-form-field-infix{padding:10px!important}:host ::ng-deep .search-and-buttons-container .mat-form-field-wrapper{width:100%!important}:host ::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}:host ::ng-deep .select-search-panel .mat-option.mat-selected:not(.mat-option-disabled){background-color:#1b4ca1!important;color:#fff!important}:host ::ng-deep .mat-form-field-appearance-outline{border-radius:25px;border:1px solid #ccc}:host ::ng-deep .mat-form-field-focused .mat-form-field-appearance-outline{border-color:#1b4ca1!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start{border-radius:25px 0 0 25px;border:none!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-right:none!important;border:none!important;border-radius:0 25px 25px 0}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap{border:none!important;border-radius:25px}:host::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix{background-color:transparent!important}:host ::ng-deep .search-and-buttons-container .mat-option-text{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i8$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i7$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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i14.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i14.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: GapAnalysisRecommendedCourseComponent, selector: "app-gap-analysis-recommended-course", inputs: ["planData"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
|
|
5030
5030
|
}
|
|
5031
5031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GenerateCourseRecommendationComponent, decorators: [{
|
|
5032
5032
|
type: Component,
|
|
@@ -5076,7 +5076,7 @@ class RegenerateConfirmationDialog {
|
|
|
5076
5076
|
</button>
|
|
5077
5077
|
</mat-dialog-actions>
|
|
5078
5078
|
</div>
|
|
5079
|
-
`, isInline: true, styles: [".confirmation-dialog-container{padding:0}.dialog-header{display:flex;align-items:center;gap:12px;padding:24px 24px 16px;border-bottom:1px solid #e0e0e0}.warning-icon{font-size:24px;width:24px;height:24px;color:#ff9800}h2{margin:0;font-size:18px;font-weight:600;color:#333}.dialog-content{padding:24px}.main-message{font-size:16px;color:#333;margin:0 0 12px;line-height:1.5}.sub-message{font-size:14px;color:#666;margin:0;font-weight:500}.dialog-actions{padding:16px 24px 24px;gap:12px;justify-content:flex-end}.cancel-btn{color:#666}.confirm-btn{display:flex;align-items:center;gap:8px;.mat-icon{font-size:18px;width:18px;height:18px;margin:0}}\n"], dependencies: [{ kind: "component", type: i7$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: i8
|
|
5079
|
+
`, isInline: true, styles: [".confirmation-dialog-container{padding:0}.dialog-header{display:flex;align-items:center;gap:12px;padding:24px 24px 16px;border-bottom:1px solid #e0e0e0}.warning-icon{font-size:24px;width:24px;height:24px;color:#ff9800}h2{margin:0;font-size:18px;font-weight:600;color:#333}.dialog-content{padding:24px}.main-message{font-size:16px;color:#333;margin:0 0 12px;line-height:1.5}.sub-message{font-size:14px;color:#666;margin:0;font-weight:500}.dialog-actions{padding:16px 24px 24px;gap:12px;justify-content:flex-end}.cancel-btn{color:#666}.confirm-btn{display:flex;align-items:center;gap:8px;.mat-icon{font-size:18px;width:18px;height:18px;margin:0}}\n"], dependencies: [{ kind: "component", type: i7$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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] }); }
|
|
5080
5080
|
}
|
|
5081
5081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RegenerateConfirmationDialog, decorators: [{
|
|
5082
5082
|
type: Component,
|
|
@@ -5227,7 +5227,7 @@ class ViewCbpPlanComponent {
|
|
|
5227
5227
|
});
|
|
5228
5228
|
}
|
|
5229
5229
|
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 }); }
|
|
5230
|
-
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=\"!fromMdo\">\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>\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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
5230
|
+
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=\"!fromMdo\">\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>\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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
5231
5231
|
}
|
|
5232
5232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewCbpPlanComponent, decorators: [{
|
|
5233
5233
|
type: Component,
|
|
@@ -5257,7 +5257,7 @@ class AddPersonalisationComponent {
|
|
|
5257
5257
|
this.dialogRef.close();
|
|
5258
5258
|
}
|
|
5259
5259
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddPersonalisationComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SharedService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5260
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddPersonalisationComponent, selector: "app-add-personalisation", ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Add Personalisation</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Educational Qualification</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" rows=\"5\" placeholder=\"Educational Qualification\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Past Experience</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" rows=\"5\" placeholder=\"Past Experience\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Last 3 Posting</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" rows=\"5\" placeholder=\"Last 3 Posting\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Last 2-3 training experience</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" rows=\"5\" placeholder=\"Last 2-3 training experience\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Years of experience</p>\n </div>\n <div class=\"additional-details mt-4\">\n <input type=\"text\" placeholder=\"Years of experience\"\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\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 ", 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:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .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:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:32px;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:32px;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:32px;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-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}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}\n"], dependencies: [{ kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
5260
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddPersonalisationComponent, selector: "app-add-personalisation", ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Add Personalisation</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Educational Qualification</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" rows=\"5\" placeholder=\"Educational Qualification\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Past Experience</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" rows=\"5\" placeholder=\"Past Experience\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Last 3 Posting</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" rows=\"5\" placeholder=\"Last 3 Posting\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Last 2-3 training experience</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" rows=\"5\" placeholder=\"Last 2-3 training experience\"></textarea>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Years of experience</p>\n </div>\n <div class=\"additional-details mt-4\">\n <input type=\"text\" placeholder=\"Years of experience\"\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\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 ", 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:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .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:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:32px;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:32px;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:32px;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-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}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}\n"], dependencies: [{ kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
5261
5261
|
}
|
|
5262
5262
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddPersonalisationComponent, decorators: [{
|
|
5263
5263
|
type: Component,
|
|
@@ -5289,7 +5289,7 @@ class DeleteRoleMappingPopupComponent {
|
|
|
5289
5289
|
this.dialogRef.close();
|
|
5290
5290
|
}
|
|
5291
5291
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DeleteRoleMappingPopupComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SharedService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5292
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DeleteRoleMappingPopupComponent, selector: "app-delete-role-mapping-popup", ngImport: i0, template: "<!-- VIEW COURSE DELETE CONFIRMATION -->\n<ng-container *ngIf=\"isViewCourse; else regenerateCBP\">\n <!-- \uD83D\uDC47 PUT YOUR \"Delete Course\" HTML HERE -->\n <!-- Example structure only -->\n <div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div class=\"heading\">Delete Course</div>\n <div class=\"cursor-pointer\" (click)=\"cancelCourse()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n \n <div class=\"section-container mt-4\">\n <div class=\"progress-icon\">\n <img src=\"assets/icons/info.svg\" style=\"scale: 2;margin: 10px;\">\n </div>\n <div>\n Are you sure you want to delete this course?\n </div>\n </div>\n \n <div class=\"popup-footer mt-4\">\n <input class=\"btn-active\" type=\"button\" value=\"No\" (click)=\"cancelCourse()\" />\n <input class=\"btn-active\" type=\"button\" value=\"Yes\" (click)=\"confirmDelete()\" />\n </div>\n </div>\n </div>\n </ng-container>\n \n <!-- REGENERATE CBP -->\n <ng-template #regenerateCBP>\n <!-- \uD83D\uDC47 YOUR EXISTING HTML (you already shared this) -->\n <div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Regenerate CBP</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"cancel('cross')\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n \n <div class=\"section-container mt-4\">\n <div class=\"progress-icon\">\n <img src=\"assets/icons/info.svg\" style=\"scale: 2;margin: 10px;\">\n </div>\n \n <div class=\"mt-2\">\n CBP is already available ,\n Do you want to Regenerate the Capacity building plan ?\n </div>\n </div>\n \n <div class=\"popup-footer mt-4\">\n <input class=\"btn-active-cancel\" type=\"button\" value=\"View Existing CBP\" (click)=\"cancel('button')\" />\n <input class=\"btn-active\" type=\"button\" value=\"Yes\" (click)=\"regenerateRoleMapping()\" />\n </div>\n </div>\n </div>\n </ng-template>", 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: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;width:100px}.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:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:0}.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;width:100px}.btn-active-cancel{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;width:160px}.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}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
5292
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DeleteRoleMappingPopupComponent, selector: "app-delete-role-mapping-popup", ngImport: i0, template: "<!-- VIEW COURSE DELETE CONFIRMATION -->\n<ng-container *ngIf=\"isViewCourse; else regenerateCBP\">\n <!-- \uD83D\uDC47 PUT YOUR \"Delete Course\" HTML HERE -->\n <!-- Example structure only -->\n <div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div class=\"heading\">Delete Course</div>\n <div class=\"cursor-pointer\" (click)=\"cancelCourse()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n \n <div class=\"section-container mt-4\">\n <div class=\"progress-icon\">\n <img src=\"assets/icons/info.svg\" style=\"scale: 2;margin: 10px;\">\n </div>\n <div>\n Are you sure you want to delete this course?\n </div>\n </div>\n \n <div class=\"popup-footer mt-4\">\n <input class=\"btn-active\" type=\"button\" value=\"No\" (click)=\"cancelCourse()\" />\n <input class=\"btn-active\" type=\"button\" value=\"Yes\" (click)=\"confirmDelete()\" />\n </div>\n </div>\n </div>\n </ng-container>\n \n <!-- REGENERATE CBP -->\n <ng-template #regenerateCBP>\n <!-- \uD83D\uDC47 YOUR EXISTING HTML (you already shared this) -->\n <div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Regenerate CBP</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"cancel('cross')\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n \n <div class=\"section-container mt-4\">\n <div class=\"progress-icon\">\n <img src=\"assets/icons/info.svg\" style=\"scale: 2;margin: 10px;\">\n </div>\n \n <div class=\"mt-2\">\n CBP is already available ,\n Do you want to Regenerate the Capacity building plan ?\n </div>\n </div>\n \n <div class=\"popup-footer mt-4\">\n <input class=\"btn-active-cancel\" type=\"button\" value=\"View Existing CBP\" (click)=\"cancel('button')\" />\n <input class=\"btn-active\" type=\"button\" value=\"Yes\" (click)=\"regenerateRoleMapping()\" />\n </div>\n </div>\n </div>\n </ng-template>", 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: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;width:100px}.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:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:0}.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;width:100px}.btn-active-cancel{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;width:160px}.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}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
5293
5293
|
}
|
|
5294
5294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DeleteRoleMappingPopupComponent, decorators: [{
|
|
5295
5295
|
type: Component,
|
|
@@ -5714,7 +5714,7 @@ class ViewCourseRecommendationComponent {
|
|
|
5714
5714
|
});
|
|
5715
5715
|
}
|
|
5716
5716
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewCourseRecommendationComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SharedService }, { token: i1$1.MatDialog }, { token: i3$1.MatSnackBar }, { token: i3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5717
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewCourseRecommendationComponent, selector: "app-view-course-recommendation", viewQueries: [{ propertyName: "pdfContent", first: true, predicate: ["pdfContent"], descendants: true }], ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">View Course Recommendation</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-2\" #pdfContent>\n <div class=\"ministry-heading mt-2\">\n <span *ngIf=\"!cbpPlanData?.department_name\">{{cbpPlanData?.ministry?.orgName}}</span> \n <span *ngIf=\"cbpPlanData?.department_name\">{{cbpPlanData?.department_name}}</span> \n <span *ngIf=\"planData?.designation_name\"> / {{planData?.designation_name}}</span>\n </div>\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n iGOT Platform Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.igot}}\n </div>\n </div>\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Public Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.public_courses}}\n \n </div>\n </div>\n \n </div>\n <div class=\"my-4\">\n \n <div class=\"course-list-container\">\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n \n <div>\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- <div>\n <div class=\"ai-recommened-pill\">\n <div class=\"ai-recommened-pill-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n <span>AI Recommended</span>\n\n </div>\n </div>\n </div> -->\n <div *ngIf=\"item?.rationale && !item?.is_public\">\n <div class=\"ai-recommened-pill-green\">\n <div class=\"ai-recommened-pill-green-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n \n <span >AI Recommended - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" target=\"_blank\"><span>Platform - {{item?.platform}}</span></a>\n </div> \n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[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 src=\"assets/icons/ai-loader.gif\"></span>\n \n <span >AI Recommended - Public </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" target=\"_blank\"><span>Platform - {{item?.platform}}</span></a>\n </div> \n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[0]}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!item?.rationale\">\n <div class=\"ai-recommened-pill-gray\">\n <div class=\"ai-recommened-pill-gray-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n \n <span>Manually Suggested - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" target=\"_blank\"><span>Platform - {{item?.platform}}</span></a>\n </div> \n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[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 && (sharedService?.fromMdoPortal)\">{{item?.name}}</div>\n </div>\n </div>\n <div class=\"course-desc mt-2\">\n <div *ngIf=\"isPDFDownload || sharedService?.fromMdoPortal\">\n <div>{{item?.rationale}}</div>\n </div>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',i)\">\n {{ isExpanded('Behavioural',i) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Functional',i)?.length\">\n <div class=\"competency-sub-heading\">Functional Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Functional',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',i)\">\n {{ isExpanded('Functional',i) ? 'Show Less' : '+' +\n getRemainingCount('Functional',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',i)?.length\">\n <div class=\"competency-sub-heading\">Domain Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Domain',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',i)\" class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2 d-flex justify-content-between item\">\n <div class=\"relevancy-container\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\" *ngIf=\"item?.relevancy\">{{item?.relevancy}}%</div>\n <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n </div>\n <div class=\"delete-button\" *ngIf=\"!(sharedService?.fromMdoPortal)\" >\n <mat-icon matTooltip=\"Delete Course\" matTooltipPosition=\"above\" class=\"text-danger cursor-pointer\" (click)=\"deleteCard(item, i)\" >delete</mat-icon>\n </div>\n </div>\n <!-- <div>\n <div class=\"competencies-matched-container\">\n <div class=\"competencies-matched\">Competencies Matched</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">80%</div>\n </div>\n </div> -->\n </div>\n <!-- <div class=\"course-list-item\">\n <div class=\"course-header\">\n <div>\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">Course</div>\n </div>\n </div>\n <div>\n <div class=\"ai-recommened-pill\">\n <div class=\"ai-recommened-pill-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n <span>AI Recommended</span>\n\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title\">\n <div>\n <div>Maternal, Infant And Young Child Nutrition</div>\n </div>\n </div>\n <div class=\"course-desc\">\n <div>\n <div>This Course directly addresses a primary responsibility of Anganwandi Care takers,\n which is\n to provide and educate on nutrition for mother and young children</div>\n </div>\n </div>\n <div>\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">90%</div>\n </div>\n </div>\n <div>\n <div class=\"competencies-matched-container\">\n <div class=\"competencies-matched\">Competencies Matched</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">80%</div>\n </div>\n </div>\n </div> -->\n\n </div>\n </div>\n </div>\n <div class=\"popup-footer\" *ngIf=\"filterdCourses?.length\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPdfFromBE()\"/>\n </div>\n <!-- <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add Personalisation\" (click)=\"addPersonilisation()\"/>\n </div> -->\n <!-- <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add More Courses\" (click)=\"addMoreCourses()\"/>\n </div> -->\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: ["@charset \"UTF-8\";.container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.relevancy,.competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.delete-button input{background-color:#b60a0a;border-radius:10px}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.course-list-item:hover{box-shadow:0 4px 8px #00000026}.course-list-item:only-child{flex:1 1 auto;max-width:800px}.checked-course-container{display:flex;width:60%}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex;justify-content:normal;gap:16px;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.header-left{flex:1}.header-actions{display:flex;align-items:center;gap:12px}.regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.regenerate-btn .mat-spinner{margin:0}.regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.close-btn:hover{background-color:#f5f5f5}.close-btn .mat-icon{font-size:20px;width:20px;height:20px}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.competencies-grid-3{width:33%}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.grid-list-item div{padding:5px 10px;margin:10px 0}.course-pill-container{display:flex;gap:8px}.relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.show-more-competency{display:inline-flex;align-items:center}.show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.show-more-link:hover{text-decoration:underline}.course-content{flex:1;display:flex;flex-direction:column}.course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.menu-list-item.active{background-color:#1b4ca1;color:#fff}.menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.div-count{font-family:Lato;font-size:20px;font-weight:700}.green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.list-flex{display:flex;flex-direction:row;justify-content:space-between}.all-category-list .mat-icon{vertical-align:middle}.course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.left-panel{flex:0 0 250px;font-weight:700;text-align:left}.right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.course-list-container-right-flex{display:flex}.no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.section-header-improved{display:flex;flex-direction:column;gap:16px}.search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.search-container-compact{flex:0 0 auto;min-width:280px}.search-container-compact .rsearch{position:relative;display:flex;align-items:center}.search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.search-container-compact .sinput-compact{border-radius:25px;border:1px solid #d5d0d0;padding:8px 12px 8px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.search-container-compact .sinput-compact::placeholder{color:#999}.btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.theme-filter-controls{margin-bottom:8px}.clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.no-course-card .no-course-icon{margin-bottom:20px}.no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.no-course-card .suggest-course-btn:active{transform:translateY(0)}.no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.search-and-buttons-container{flex-direction:column;align-items:stretch}.search-container-compact{min-width:auto;width:100%}.btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.course-list-container-flex{flex-direction:column}.left-panel{flex:none!important;max-height:300px}.course-list-item{flex:0 0 100%;max-width:100%}.no-course-card{padding:20px}.no-course-card .no-course-content h4{font-size:20px}.no-course-card .no-course-content p{font-size:14px}}::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.download-pdf{justify-content:end;display:flex;flex-direction:row}\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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
5717
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ViewCourseRecommendationComponent, selector: "app-view-course-recommendation", viewQueries: [{ propertyName: "pdfContent", first: true, predicate: ["pdfContent"], descendants: true }], ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">View Course Recommendation</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-2\" #pdfContent>\n <div class=\"ministry-heading mt-2\">\n <span *ngIf=\"!cbpPlanData?.department_name\">{{cbpPlanData?.ministry?.orgName}}</span> \n <span *ngIf=\"cbpPlanData?.department_name\">{{cbpPlanData?.department_name}}</span> \n <span *ngIf=\"planData?.designation_name\"> / {{planData?.designation_name}}</span>\n </div>\n <div class=\"competency-container mt-4\">\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Total Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.total}}\n </div>\n </div>\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n iGOT Platform Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.igot}}\n </div>\n </div>\n <div class=\"outside-layer-total\">\n <div class=\"inside-layer\">\n Public Courses\n </div>\n <div class=\"count\">\n {{competenciesCount?.public_courses}}\n \n </div>\n </div>\n \n </div>\n <div class=\"my-4\">\n \n <div class=\"course-list-container\">\n <div class=\"course-list-item\" *ngFor=\"let item of filterdCourses;let i=index\">\n <div class=\"course-header\">\n <div class=\"checked-course-container\">\n \n <div>\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">\n <span><img src=\"assets/icons/course.svg\"></span> <span>Course</span>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- <div>\n <div class=\"ai-recommened-pill\">\n <div class=\"ai-recommened-pill-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n <span>AI Recommended</span>\n\n </div>\n </div>\n </div> -->\n <div *ngIf=\"item?.rationale && !item?.is_public\">\n <div class=\"ai-recommened-pill-green\">\n <div class=\"ai-recommened-pill-green-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n \n <span >AI Recommended - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" target=\"_blank\"><span>Platform - {{item?.platform}}</span></a>\n </div> \n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[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 src=\"assets/icons/ai-loader.gif\"></span>\n \n <span >AI Recommended - Public </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" target=\"_blank\"><span>Platform - {{item?.platform}}</span></a>\n </div> \n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[0]}}</span>\n </div>\n </div>\n </div>\n <div *ngIf=\"!item?.rationale\">\n <div class=\"ai-recommened-pill-gray\">\n <div class=\"ai-recommened-pill-gray-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n \n <span>Manually Suggested - iGOT </span>\n\n </div>\n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.platform\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n <a class=\"cursor-pointer\" [href]=\"item?.public_link\" target=\"_blank\"><span>Platform - {{item?.platform}}</span></a>\n </div> \n </div>\n <div class=\"ai-recommened-pill-orange mt-2\" *ngIf=\"item?.organisation?.length\">\n <div class=\"ai-recommened-pill-orange-text\">\n <span class=\"ai-loader-icon\"><img\n src=\"assets/icons/ai-loader.gif\"></span>\n <span>Provider - {{item?.organisation[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 && (sharedService?.fromMdoPortal)\">{{item?.name}}</div>\n </div>\n </div>\n <div class=\"course-desc mt-2\">\n <div *ngIf=\"isPDFDownload || sharedService?.fromMdoPortal\">\n <div>{{item?.rationale}}</div>\n </div>\n </div>\n <div class=\"mt-3\" *ngIf=\"getCompetenciesByType('Behavioural',i)?.length\">\n <div class=\"competency-sub-heading\">Behavioral Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Behavioural',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Behavioural',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Behavioural',i)\">\n {{ isExpanded('Behavioural',i) ? 'Show Less' : '+' +\n getRemainingCount('Behavioural',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Functional',i)?.length\">\n <div class=\"competency-sub-heading\">Functional Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Functional',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Functional',i)\"\n class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Functional',i)\">\n {{ isExpanded('Functional',i) ? 'Show Less' : '+' +\n getRemainingCount('Functional',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2\" *ngIf=\"getCompetenciesByType('Domain',i)?.length\">\n <div class=\"competency-sub-heading\">Domain Competencies</div>\n <ul class=\"competency-list mt-1\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getDisplayedCompetencies('Domain',i)\">\n <span class=\"competency-text\"> {{ comp.competencyThemeName }} -\n {{\n comp.competencySubThemeName }} </span>\n </li>\n <li *ngIf=\"hasMoreThanTwo('Domain',i)\" class=\"show-more-competency\">\n <span class=\"show-more-link cursor-pointer\"\n (click)=\"toggleCompetencies('Domain',i)\">\n {{ isExpanded('Domain',i) ? 'Show Less' : '+' +\n getRemainingCount('Domain',i) + ' More' }}\n </span>\n </li>\n </ul>\n </div>\n <div class=\"mt-2 d-flex justify-content-between item\">\n <div class=\"relevancy-container\" *ngIf=\"item?.relevancy\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\" *ngIf=\"item?.relevancy\">{{item?.relevancy}}%</div>\n <div class=\"percentage\" *ngIf=\"!item?.relevancy\">N/A</div>\n </div>\n <div class=\"delete-button\" *ngIf=\"!(sharedService?.fromMdoPortal)\" >\n <mat-icon matTooltip=\"Delete Course\" matTooltipPosition=\"above\" class=\"text-danger cursor-pointer\" (click)=\"deleteCard(item, i)\" >delete</mat-icon>\n </div>\n </div>\n <!-- <div>\n <div class=\"competencies-matched-container\">\n <div class=\"competencies-matched\">Competencies Matched</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">80%</div>\n </div>\n </div> -->\n </div>\n <!-- <div class=\"course-list-item\">\n <div class=\"course-header\">\n <div>\n <div class=\"course-pill\">\n <div class=\"course-pill-text\">Course</div>\n </div>\n </div>\n <div>\n <div class=\"ai-recommened-pill\">\n <div class=\"ai-recommened-pill-text\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span>\n <span>AI Recommended</span>\n\n </div>\n </div>\n </div>\n </div>\n <div class=\"course-title\">\n <div>\n <div>Maternal, Infant And Young Child Nutrition</div>\n </div>\n </div>\n <div class=\"course-desc\">\n <div>\n <div>This Course directly addresses a primary responsibility of Anganwandi Care takers,\n which is\n to provide and educate on nutrition for mother and young children</div>\n </div>\n </div>\n <div>\n <div class=\"relevancy-container\">\n <div class=\"relevancy\">Relevancy</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">90%</div>\n </div>\n </div>\n <div>\n <div class=\"competencies-matched-container\">\n <div class=\"competencies-matched\">Competencies Matched</div>\n <div class=\"dash\">-</div>\n <div class=\"percentage\">80%</div>\n </div>\n </div>\n </div> -->\n\n </div>\n </div>\n </div>\n <div class=\"popup-footer\" *ngIf=\"filterdCourses?.length\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Download\" (click)=\"downloadPdfFromBE()\"/>\n </div>\n <!-- <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add Personalisation\" (click)=\"addPersonilisation()\"/>\n </div> -->\n <!-- <div>\n <input class=\"btn-active\" type=\"button\" value=\"Add More Courses\" (click)=\"addMoreCourses()\"/>\n </div> -->\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: ["@charset \"UTF-8\";.container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.ministry-heading{color:#1b4ca1;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:800px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill-green{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#0080001c}.ai-recommened-pill-green-text{color:#006400;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-public{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#1b4ca129}.ai-recommened-pill-public-text{color:#1b4ca1;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-gray{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#d3d3d3}.ai-recommened-pill-gray-text{color:#000;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);background:#ffa50052}.ai-recommened-pill-orange-text{color:#5a3f0d;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.ai-recommened-pill-orange-text a{color:#5a3f0d!important;font-family:Lato;font-size:11px;font-style:normal;font-weight:600;line-height:normal}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:22px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.relevancy,.competencies-matched{color:#6c757d;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;align-items:center}.percentage{color:#1b4ca1;font-family:Lato;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.delete-button input{background-color:#b60a0a;border-radius:10px}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px;width:100%;padding:1rem}.course-list-item{flex:1 1 calc(50% - 10px);min-width:350px;max-width:500px;box-sizing:border-box;border:1px solid #e0e0e0;padding:16px;background-color:#fff;border-radius:12px;min-height:auto;box-shadow:0 2px 4px #0000001a;transition:box-shadow .2s ease;display:flex;flex-direction:column}.course-list-item:hover{box-shadow:0 4px 8px #00000026}.course-list-item:only-child{flex:1 1 auto;max-width:800px}.checked-course-container{display:flex;width:60%}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex;justify-content:normal;gap:16px;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.pdf-heading{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0;text-align:center}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e0e0e0}.header-left{flex:1}.header-actions{display:flex;align-items:center;gap:12px}.regenerate-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;min-width:auto}.regenerate-btn .mat-icon{margin:0;font-size:18px;width:18px;height:18px}.regenerate-btn .mat-spinner{margin:0}.regenerate-btn:disabled{opacity:.7;cursor:not-allowed}.close-btn{padding:8px;border-radius:4px;transition:background-color .2s ease}.close-btn:hover{background-color:#f5f5f5}.close-btn .mat-icon{font-size:20px;width:20px;height:20px}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.functional-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.domain-pill{display:flex;padding:2px 6px;justify-content:center;align-items:center;gap:4px;border-radius:16px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:2px 4px 2px 0;font-size:12px}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.competency-text{color:#000;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal;padding:3px 6px}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.competencis-grid{display:flex;flex-direction:row;justify-content:space-between;gap:16px}.grid-list-item-behavioral div{border-left:2px solid darkorange}.grid-list-item-functional div{border-left:2px solid #ff1493}.grid-list-item-domain div{border-left:2px solid #6b21a8}.competencies-grid-3{width:33%}.bg-blue-50{background-color:#fde8cc;border-radius:4px}.bg-green-50{background-color:#f8d2de;border-radius:4px}.bg-purple-50{background-color:#dfd3e9;border-radius:4px}.grid-list-item div{padding:5px 10px;margin:10px 0}.course-pill-container{display:flex;gap:8px}.relevancy-pill-green{display:flex;padding:4px 8px;align-items:center;gap:4px;border-radius:16px;border:1px solid #e0e0e0;background:#f8f9fa}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.show-more-competency{display:inline-flex;align-items:center}.show-more-link{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:500;line-height:normal;margin:2px 4px 2px 0;text-decoration:none}.show-more-link:hover{text-decoration:underline}.course-content{flex:1;display:flex;flex-direction:column}.course-footer{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between}::ng-deep .mdc-tab__text-label{font-weight:700;font-family:Montserrat!important;font-size:16px;color:#000!important;text-transform:capitalize}.competency-tag{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;margin-right:.5rem;margin-bottom:.5rem}.menu-list-item.active{background-color:#1b4ca1;color:#fff}.menu-list-item:hover{background-color:#1b4ca1;color:#fff;border-color:#1b4ca1}.gray-bg{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc}.div-count{font-family:Lato;font-size:20px;font-weight:700}.green-bg{background-color:#0080001c;border:1px solid #006400;border-radius:8px}.div-green-count{font-family:Lato;font-size:20px;font-weight:700;color:#006400}.div-green-label{color:#006400;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.gray-bg-item{background-color:rgb(248,250,252,var(--tw-bg-opacity, 1));border-radius:8px;border:1px solid #ccc;padding:4px 8px;margin:10px}.add-btn{color:#1b4ca1;font-size:14px;font-family:Lato}.list-flex{display:flex;flex-direction:row;justify-content:space-between}.all-category-list .mat-icon{vertical-align:middle}.course-list-container-flex{display:flex;align-items:flex-start;gap:2rem}.left-panel{flex:0 0 250px;font-weight:700;text-align:left}.right-panel{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;gap:20px;align-content:flex-start;justify-content:flex-start}.category-list-item{font-weight:400;font-size:16px;font-family:Lato;padding:5px}.right-panel-flex{display:flex;flex:0 0 100%;width:100%;flex-direction:row;flex-wrap:wrap;gap:20px;justify-content:flex-start}.course-list-container-right-flex{display:flex}.no-gaps-message{display:flex;flex-direction:column;align-items:center;padding:24px;background:linear-gradient(135deg,#4caf501a,#81c7841a);border:2px solid #4CAF50;border-radius:16px;margin:16px 0}.no-gaps-message .success-icon{font-size:25px;color:#4caf50;margin-bottom:16px}.no-gaps-message h4{color:#2e7d32;font-family:Montserrat;font-size:20px;font-weight:600;margin:0 0 8px;text-align:center}.no-gaps-message p{color:#388e3c;font-family:Lato;font-size:14px;font-weight:400;margin:0;text-align:center;line-height:1.5}.section-header-improved{display:flex;flex-direction:column;gap:16px}.search-and-buttons-container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.search-container-compact{flex:0 0 auto;min-width:280px}.search-container-compact .rsearch{position:relative;display:flex;align-items:center}.search-container-compact .search-icon{position:absolute;left:12px;color:#666;font-size:20px;z-index:1}.search-container-compact .sinput-compact{border-radius:25px;border:1px solid #d5d0d0;padding:8px 12px 8px 40px;height:32px;width:100%;font:400 14px Lato;box-sizing:border-box;transition:border-color .3s ease}.search-container-compact .sinput-compact:focus{outline:none;border-color:#1b4ca1;box-shadow:0 0 0 2px #1b4ca11a}.search-container-compact .sinput-compact::placeholder{color:#999}.btn-group-compact{display:flex;gap:8px;flex:0 0 auto}.category-list-item{padding:8px 12px!important;border-radius:6px;border:1px solid transparent;transition:all .3s ease;background:#f8f9fa;color:#333;font-family:Lato;font-size:14px!important;font-weight:400!important}.category-list-item:hover{background:#1b4ca10d;border-color:#1b4ca133}.category-list-item.selected-theme{background:#1b4ca11a;border-color:#1b4ca1;color:#1b4ca1;font-weight:600!important}.category-list-item.selected-theme:before{content:\"\\2713 \";color:#1b4ca1;font-weight:700}.theme-filter-controls{margin-bottom:8px}.clear-filter-btn{background:#f8f9fa;border:1px solid #ddd;border-radius:20px;padding:4px 12px;font-size:12px;color:#666;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px}.clear-filter-btn:hover{background:#e9ecef;border-color:#adb5bd}.clear-filter-btn mat-icon{font-size:16px;width:16px;height:16px}.no-course-found-container{display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}.no-course-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px dashed #ced4da;border-radius:16px;padding:40px;text-align:center;max-width:500px;box-shadow:0 4px 12px #0000000d}.no-course-card .no-course-icon{margin-bottom:20px}.no-course-card .no-course-icon mat-icon{font-size:48px;width:48px;height:48px;color:#6c757d}.no-course-card .no-course-content h4{color:#495057;font-family:Montserrat;font-size:24px;font-weight:600;margin-bottom:12px}.no-course-card .no-course-content p{color:#6c757d;font-family:Lato;font-size:16px;line-height:1.5;margin-bottom:12px}.no-course-card .no-course-content p strong{color:#1b4ca1;font-weight:600}.no-course-card .suggest-course-btn{background:linear-gradient(135deg,#1b4ca1,#164080);color:#fff;border:none;border-radius:25px;padding:12px 24px;font-family:Lato;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;margin:20px auto 0;transition:all .3s ease;box-shadow:0 4px 12px #1b4ca14d}.no-course-card .suggest-course-btn:hover{background:linear-gradient(135deg,#164080,#0f2f5f);transform:translateY(-2px);box-shadow:0 6px 16px #1b4ca166}.no-course-card .suggest-course-btn:active{transform:translateY(0)}.no-course-card .suggest-course-btn mat-icon{font-size:18px;width:18px;height:18px}.left-panel{flex:0 0 280px!important;background:#f8f9fa;border-radius:12px;padding:16px;border:1px solid #e9ecef;max-height:600px;overflow-y:auto;font-weight:400!important}@media (max-width: 1200px){.search-and-buttons-container{flex-direction:column;align-items:stretch}.search-container-compact{min-width:auto;width:100%}.btn-group-compact{justify-content:center;flex-wrap:wrap}}@media (max-width: 1200px) and (min-width: 769px){.course-list-item{flex:1 1 calc(50% - 10px);min-width:300px;max-width:none}}@media (max-width: 768px){.course-list-container-flex{flex-direction:column}.left-panel{flex:none!important;max-height:300px}.course-list-item{flex:0 0 100%;max-width:100%}.no-course-card{padding:20px}.no-course-card .no-course-content h4{font-size:20px}.no-course-card .no-course-content p{font-size:14px}}::ng-deep .error-snackbar{background-color:#f44336!important;color:#fff!important;font-weight:500}::ng-deep .error-snackbar .mat-simple-snackbar-action{color:#fff!important}::ng-deep .session-expired-snackbar{background-color:#ff9800!important;color:#fff!important;font-weight:600}::ng-deep .session-expired-snackbar .mat-simple-snackbar-action{color:#fff!important;font-weight:700}.download-pdf{justify-content:end;display:flex;flex-direction:row}\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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
5718
5718
|
}
|
|
5719
5719
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewCourseRecommendationComponent, decorators: [{
|
|
5720
5720
|
type: Component,
|
|
@@ -5789,7 +5789,7 @@ class RejectItemRequestFormComponent {
|
|
|
5789
5789
|
});
|
|
5790
5790
|
}
|
|
5791
5791
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RejectItemRequestFormComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }, { token: SharedService }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5792
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RejectItemRequestFormComponent, selector: "app-reject-item-request-form", ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Reject Request</div>\n <div>Are you sure you want to reject request? Please provide a reason.</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"rejectRequestForm\">\n <mat-card class=\"mt-1\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Reason for Rejection</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea formControlName=\"rejection_comment\" placeholder=\"Enter reason for rejection\" rows=\"5\"\n class=\"custom-textarea\">\n </textarea>\n </div>\n </div>\n\n\n <!-- <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Upload Document (PDF/Word/Excel/TXT)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span>{{ uploadedFile?.name || 'Choose a file (PDF, Word, Excel, TXT)' }}</span>\n </label>\n\n <small class=\"file-upload-hint\">Max file size: 25MB</small>\n\n <input id=\"uploadDoc\" type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n\n </mat-card>\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\n <button [disabled]=\"rejectRequestForm?.invalid || loading\" mat-raised-button\n [ngClass]=\"rejectRequestForm?.invalid ? 'btn-disable' : 'reject-btn-footer'\" (click)=\"rejectRequest()\">\n\n <mat-icon>close</mat-icon>\n Reject Request\n </button>\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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:96%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .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:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:32px;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:32px;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:32px;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:hidden;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:6px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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}.close .mat-icon{height:18px!important;width:18px!important}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}::ng-deep .mat-select-panel.search-panel .search-input{flex:1 1 auto;width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;color:#333;outline:none;box-sizing:border-box}::ng-deep .mat-select-panel.search-panel .search-input:focus{border-color:#0074b6;box-shadow:0 0 0 3px #0074b60f}::ng-deep .mat-select-panel.search-panel .clear-button{background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:6px;line-height:1}::ng-deep .mat-select-panel.search-panel .loading-indicator{padding:10px 12px;text-align:center;color:#666;font-size:14px}::ng-deep .mat-select-panel.search-panel .mat-option{padding-top:10px;padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled]{padding:8px 16px!important}::ng-deep .mat-select-panel.align-panel{padding:0!important;box-sizing:border-box;margin-left:0!important;min-width:340px!important;max-width:340px!important}::ng-deep .mat-select-panel.align-panel .mat-option{padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled] .mat-error,::ng-deep .mat-select-panel.search-panel .mat-error{margin:0!important;padding:0!important;font-size:14px!important;line-height:1.4!important;color:#f44336}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-text-field-wrapper{background:#fff;border-radius:25px!important;height:42px}::ng-deep .mat-notched-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:42px;align-items:center;padding:0 16px;background:#fff}::ng-deep .mat-select-panel{border:1px solid rgba(0,0,0,.16);border-radius:8px;box-shadow:0 6px 18px #0000001f}.full-width{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{border-radius:25px}.reject-btn{border:1px solid #d32f2f!important;color:#d32f2f!important;border-radius:10px;padding:0 22px;height:44px;font-size:15px;font-weight:600;box-shadow:none}.reject-btn mat-icon{font-size:20px;margin-right:8px}.reject-btn:hover{background:#d32f2f!important}.reject-btn:disabled,.reject-btn.mat-mdc-button-disabled,.reject-btn.mat-button-disabled{background:#cfd8dc!important;color:#8a949b!important;cursor:not-allowed!important;opacity:1!important;box-shadow:none!important}.reject-btn:disabled mat-icon,.reject-btn.mat-mdc-button-disabled mat-icon,.reject-btn.mat-button-disabled mat-icon{color:#8a949b!important}.custom-date-field{width:100%}.custom-date-field ::ng-deep .mat-mdc-text-field-wrapper{border-radius:28px!important;background:#fff!important;padding:2px 12px}.custom-date-field ::ng-deep .mdc-notched-outline{display:none!important}.custom-date-field ::ng-deep .mat-mdc-form-field-focus-overlay{display:none!important}.custom-date-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.reject-btn-footer{background:#d32f2f!important;color:#fff!important;border-radius:26px;padding:0 22px;height:34px;font-size:15px;font-weight:600;box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i7$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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
5792
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RejectItemRequestFormComponent, selector: "app-reject-item-request-form", ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Reject Request</div>\n <div>Are you sure you want to reject request? Please provide a reason.</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"rejectRequestForm\">\n <mat-card class=\"mt-1\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Reason for Rejection</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea formControlName=\"rejection_comment\" placeholder=\"Enter reason for rejection\" rows=\"5\"\n class=\"custom-textarea\">\n </textarea>\n </div>\n </div>\n\n\n <!-- <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Upload Document (PDF/Word/Excel/TXT)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span>{{ uploadedFile?.name || 'Choose a file (PDF, Word, Excel, TXT)' }}</span>\n </label>\n\n <small class=\"file-upload-hint\">Max file size: 25MB</small>\n\n <input id=\"uploadDoc\" type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n\n </mat-card>\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\n <button [disabled]=\"rejectRequestForm?.invalid || loading\" mat-raised-button\n [ngClass]=\"rejectRequestForm?.invalid ? 'btn-disable' : 'reject-btn-footer'\" (click)=\"rejectRequest()\">\n\n <mat-icon>close</mat-icon>\n Reject Request\n </button>\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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:96%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .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:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:32px;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:32px;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:32px;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:hidden;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:6px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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}.close .mat-icon{height:18px!important;width:18px!important}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}::ng-deep .mat-select-panel.search-panel .search-input{flex:1 1 auto;width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;color:#333;outline:none;box-sizing:border-box}::ng-deep .mat-select-panel.search-panel .search-input:focus{border-color:#0074b6;box-shadow:0 0 0 3px #0074b60f}::ng-deep .mat-select-panel.search-panel .clear-button{background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:6px;line-height:1}::ng-deep .mat-select-panel.search-panel .loading-indicator{padding:10px 12px;text-align:center;color:#666;font-size:14px}::ng-deep .mat-select-panel.search-panel .mat-option{padding-top:10px;padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled]{padding:8px 16px!important}::ng-deep .mat-select-panel.align-panel{padding:0!important;box-sizing:border-box;margin-left:0!important;min-width:340px!important;max-width:340px!important}::ng-deep .mat-select-panel.align-panel .mat-option{padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled] .mat-error,::ng-deep .mat-select-panel.search-panel .mat-error{margin:0!important;padding:0!important;font-size:14px!important;line-height:1.4!important;color:#f44336}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-text-field-wrapper{background:#fff;border-radius:25px!important;height:42px}::ng-deep .mat-notched-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:42px;align-items:center;padding:0 16px;background:#fff}::ng-deep .mat-select-panel{border:1px solid rgba(0,0,0,.16);border-radius:8px;box-shadow:0 6px 18px #0000001f}.full-width{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{border-radius:25px}.reject-btn{border:1px solid #d32f2f!important;color:#d32f2f!important;border-radius:10px;padding:0 22px;height:44px;font-size:15px;font-weight:600;box-shadow:none}.reject-btn mat-icon{font-size:20px;margin-right:8px}.reject-btn:hover{background:#d32f2f!important}.reject-btn:disabled,.reject-btn.mat-mdc-button-disabled,.reject-btn.mat-button-disabled{background:#cfd8dc!important;color:#8a949b!important;cursor:not-allowed!important;opacity:1!important;box-shadow:none!important}.reject-btn:disabled mat-icon,.reject-btn.mat-mdc-button-disabled mat-icon,.reject-btn.mat-button-disabled mat-icon{color:#8a949b!important}.custom-date-field{width:100%}.custom-date-field ::ng-deep .mat-mdc-text-field-wrapper{border-radius:28px!important;background:#fff!important;padding:2px 12px}.custom-date-field ::ng-deep .mdc-notched-outline{display:none!important}.custom-date-field ::ng-deep .mat-mdc-form-field-focus-overlay{display:none!important}.custom-date-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.reject-btn-footer{background:#d32f2f!important;color:#fff!important;border-radius:26px;padding:0 22px;height:34px;font-size:15px;font-weight:600;box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i7$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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }] }); }
|
|
5793
5793
|
}
|
|
5794
5794
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RejectItemRequestFormComponent, decorators: [{
|
|
5795
5795
|
type: Component,
|
|
@@ -5799,33 +5799,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
5799
5799
|
args: [MAT_DIALOG_DATA]
|
|
5800
5800
|
}] }, { type: i2.FormBuilder }, { type: SharedService }, { type: i3$1.MatSnackBar }]; } });
|
|
5801
5801
|
|
|
5802
|
-
|
|
5803
|
-
constructor(dialogRef, data, fb,
|
|
5802
|
+
class PublishApproveRequestFormComponent {
|
|
5803
|
+
constructor(dialogRef, data, fb, sharedService, snackBar) {
|
|
5804
5804
|
this.dialogRef = dialogRef;
|
|
5805
5805
|
this.data = data;
|
|
5806
5806
|
this.fb = fb;
|
|
5807
|
-
this.cdRef = cdRef;
|
|
5808
5807
|
this.sharedService = sharedService;
|
|
5809
5808
|
this.snackBar = snackBar;
|
|
5810
5809
|
this.loading = false;
|
|
5811
|
-
this.mdoFilterEnable = false;
|
|
5812
|
-
this.isLoadingMoremdos = false;
|
|
5813
|
-
this.mdoOffset = 0;
|
|
5814
|
-
this.odcsmdoCount = 0;
|
|
5815
|
-
this.defaultSearchmdoCount = 0;
|
|
5816
|
-
this.mdoListLoadCount = 50;
|
|
5817
|
-
this.mdoDefaultLoadCount = 50;
|
|
5818
|
-
this.noMoreLegacymdos = false;
|
|
5819
|
-
this.mdoSearchText = '';
|
|
5820
|
-
this.mdoInitInProgress = false;
|
|
5821
|
-
this.scrollListenerAttached = false;
|
|
5822
|
-
this.masterData = {};
|
|
5823
|
-
this.role_mapping_ids = [];
|
|
5824
|
-
this.role_mapping_ids = data;
|
|
5825
|
-
this.masterData = {
|
|
5826
|
-
mdoBackup: [],
|
|
5827
|
-
mdoFiltered: [], // filtered search results
|
|
5828
|
-
};
|
|
5829
5810
|
}
|
|
5830
5811
|
ngOnInit() {
|
|
5831
5812
|
this.initializeForm();
|
|
@@ -5849,7 +5830,7 @@ let PublishRequestFormComponent = class PublishRequestFormComponent {
|
|
|
5849
5830
|
this.loading = true;
|
|
5850
5831
|
const formValue = this.approvalRequestForm.value;
|
|
5851
5832
|
const payload = {
|
|
5852
|
-
request_id: this.
|
|
5833
|
+
request_id: this.data?.demand_id,
|
|
5853
5834
|
plan_name: formValue.request_name,
|
|
5854
5835
|
due_date: new Date(formValue.due_date).toISOString()
|
|
5855
5836
|
};
|
|
@@ -5877,18 +5858,16 @@ let PublishRequestFormComponent = class PublishRequestFormComponent {
|
|
|
5877
5858
|
}
|
|
5878
5859
|
});
|
|
5879
5860
|
}
|
|
5880
|
-
};
|
|
5881
|
-
__decorate([
|
|
5882
|
-
|
|
5883
|
-
|
|
5884
|
-
|
|
5885
|
-
Component({
|
|
5886
|
-
|
|
5887
|
-
|
|
5888
|
-
|
|
5889
|
-
|
|
5890
|
-
__param(1, Inject(MAT_DIALOG_DATA))
|
|
5891
|
-
], PublishRequestFormComponent);
|
|
5861
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PublishApproveRequestFormComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }, { token: SharedService }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5862
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PublishApproveRequestFormComponent, selector: "app-publish-approve-request-form", ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Approve & Publish Plan</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"approvalRequestForm\">\n <mat-card class=\"mt-1\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Name of Plan</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" formControlName=\"request_name\" [value]=\"\" placeholder=\"Enter plan name\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width:96%;font-size: 14px;font-family: 'Lato';\">\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Timeline (Due Date)</p>\n </div>\n <div class=\"section-header mt-4\">\n <mat-form-field appearance=\"outline\" class=\"full-width custom-date-field\">\n <input matInput [matDatepicker]=\"picker\" formControlName=\"due_date\"\n placeholder=\"Select due date\">\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n </div>\n </div>\n\n\n <!-- <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Upload Document (PDF/Word/Excel/TXT)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span>{{ uploadedFile?.name || 'Choose a file (PDF, Word, Excel, TXT)' }}</span>\n </label>\n\n <small class=\"file-upload-hint\">Max file size: 25MB</small>\n\n <input id=\"uploadDoc\" type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n\n </mat-card>\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\n <button [disabled]=\"approvalRequestForm?.invalid\" mat-raised-button\n [ngClass]=\"approvalRequestForm?.invalid ? 'btn-disable':'approve-btn-footer'\" (click)=\"approveAndPublish()\">\n\n <mat-icon>publish</mat-icon>\n Approve & Publish\n </button>\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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:.9;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;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:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:32px;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:32px;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:32px;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:hidden;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:6px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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}.close .mat-icon{height:18px!important;width:18px!important}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}::ng-deep .mat-select-panel.search-panel .search-input{flex:1 1 auto;width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;color:#333;outline:none;box-sizing:border-box}::ng-deep .mat-select-panel.search-panel .search-input:focus{border-color:#0074b6;box-shadow:0 0 0 3px #0074b60f}::ng-deep .mat-select-panel.search-panel .clear-button{background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:6px;line-height:1}::ng-deep .mat-select-panel.search-panel .loading-indicator{padding:10px 12px;text-align:center;color:#666;font-size:14px}::ng-deep .mat-select-panel.search-panel .mat-option{padding-top:10px;padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled]{padding:8px 16px!important}::ng-deep .mat-select-panel.align-panel{padding:0!important;box-sizing:border-box;margin-left:0!important;min-width:340px!important;max-width:340px!important}::ng-deep .mat-select-panel.align-panel .mat-option{padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled] .mat-error,::ng-deep .mat-select-panel.search-panel .mat-error{margin:0!important;padding:0!important;font-size:14px!important;line-height:1.4!important;color:#f44336}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-text-field-wrapper{background:#fff;border-radius:25px!important;height:42px}::ng-deep .mat-notched-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:42px;align-items:center;padding:0 16px;background:#fff}::ng-deep .mat-select-panel{border:1px solid rgba(0,0,0,.16);border-radius:8px;box-shadow:0 6px 18px #0000001f}.full-width{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{border-radius:25px}.approve-btn{background:#1ea84a!important;color:#fff!important;border-radius:10px;padding:0 22px;height:44px;font-size:15px;font-weight:600;box-shadow:none}.approve-btn mat-icon{font-size:20px;margin-right:8px}.approve-btn:hover{background:#16873a!important}.approve-btn:disabled,.approve-btn.mat-mdc-button-disabled,.approve-btn.mat-button-disabled{background:#cfd8dc!important;color:#8a949b!important;cursor:not-allowed!important;opacity:1!important;box-shadow:none!important}.approve-btn:disabled mat-icon,.approve-btn.mat-mdc-button-disabled mat-icon,.approve-btn.mat-button-disabled mat-icon{color:#8a949b!important}.custom-date-field{width:100%}.custom-date-field ::ng-deep .mat-mdc-text-field-wrapper{border-radius:28px!important;background:#fff!important;padding:2px 12px}.custom-date-field ::ng-deep .mdc-notched-outline{display:none!important}.custom-date-field ::ng-deep .mat-mdc-form-field-focus-overlay{display:none!important}.custom-date-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.approve-btn-footer{background:#1ea84a!important;color:#fff!important;border-radius:26px;padding:0 22px;height:34px;font-size:15px;font-weight:600;box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i8$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i7$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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i12.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i12.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i12.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
|
|
5863
|
+
}
|
|
5864
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PublishApproveRequestFormComponent, decorators: [{
|
|
5865
|
+
type: Component,
|
|
5866
|
+
args: [{ selector: 'app-publish-approve-request-form', template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Approve & Publish Plan</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"approvalRequestForm\">\n <mat-card class=\"mt-1\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Name of Plan</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" formControlName=\"request_name\" [value]=\"\" placeholder=\"Enter plan name\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width:96%;font-size: 14px;font-family: 'Lato';\">\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Timeline (Due Date)</p>\n </div>\n <div class=\"section-header mt-4\">\n <mat-form-field appearance=\"outline\" class=\"full-width custom-date-field\">\n <input matInput [matDatepicker]=\"picker\" formControlName=\"due_date\"\n placeholder=\"Select due date\">\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n </div>\n </div>\n\n\n <!-- <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Upload Document (PDF/Word/Excel/TXT)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span>{{ uploadedFile?.name || 'Choose a file (PDF, Word, Excel, TXT)' }}</span>\n </label>\n\n <small class=\"file-upload-hint\">Max file size: 25MB</small>\n\n <input id=\"uploadDoc\" type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n\n </mat-card>\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\n <button [disabled]=\"approvalRequestForm?.invalid\" mat-raised-button\n [ngClass]=\"approvalRequestForm?.invalid ? 'btn-disable':'approve-btn-footer'\" (click)=\"approveAndPublish()\">\n\n <mat-icon>publish</mat-icon>\n Approve & Publish\n </button>\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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:.9;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;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:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:32px;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:32px;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:32px;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:hidden;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:6px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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}.close .mat-icon{height:18px!important;width:18px!important}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}::ng-deep .mat-select-panel.search-panel .search-input{flex:1 1 auto;width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;color:#333;outline:none;box-sizing:border-box}::ng-deep .mat-select-panel.search-panel .search-input:focus{border-color:#0074b6;box-shadow:0 0 0 3px #0074b60f}::ng-deep .mat-select-panel.search-panel .clear-button{background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:6px;line-height:1}::ng-deep .mat-select-panel.search-panel .loading-indicator{padding:10px 12px;text-align:center;color:#666;font-size:14px}::ng-deep .mat-select-panel.search-panel .mat-option{padding-top:10px;padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled]{padding:8px 16px!important}::ng-deep .mat-select-panel.align-panel{padding:0!important;box-sizing:border-box;margin-left:0!important;min-width:340px!important;max-width:340px!important}::ng-deep .mat-select-panel.align-panel .mat-option{padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled] .mat-error,::ng-deep .mat-select-panel.search-panel .mat-error{margin:0!important;padding:0!important;font-size:14px!important;line-height:1.4!important;color:#f44336}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-text-field-wrapper{background:#fff;border-radius:25px!important;height:42px}::ng-deep .mat-notched-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:42px;align-items:center;padding:0 16px;background:#fff}::ng-deep .mat-select-panel{border:1px solid rgba(0,0,0,.16);border-radius:8px;box-shadow:0 6px 18px #0000001f}.full-width{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{border-radius:25px}.approve-btn{background:#1ea84a!important;color:#fff!important;border-radius:10px;padding:0 22px;height:44px;font-size:15px;font-weight:600;box-shadow:none}.approve-btn mat-icon{font-size:20px;margin-right:8px}.approve-btn:hover{background:#16873a!important}.approve-btn:disabled,.approve-btn.mat-mdc-button-disabled,.approve-btn.mat-button-disabled{background:#cfd8dc!important;color:#8a949b!important;cursor:not-allowed!important;opacity:1!important;box-shadow:none!important}.approve-btn:disabled mat-icon,.approve-btn.mat-mdc-button-disabled mat-icon,.approve-btn.mat-button-disabled mat-icon{color:#8a949b!important}.custom-date-field{width:100%}.custom-date-field ::ng-deep .mat-mdc-text-field-wrapper{border-radius:28px!important;background:#fff!important;padding:2px 12px}.custom-date-field ::ng-deep .mdc-notched-outline{display:none!important}.custom-date-field ::ng-deep .mat-mdc-form-field-focus-overlay{display:none!important}.custom-date-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.approve-btn-footer{background:#1ea84a!important;color:#fff!important;border-radius:26px;padding:0 22px;height:34px;font-size:15px;font-weight:600;box-shadow:none}\n"] }]
|
|
5867
|
+
}], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
5868
|
+
type: Inject,
|
|
5869
|
+
args: [MAT_DIALOG_DATA]
|
|
5870
|
+
}] }, { type: i2.FormBuilder }, { type: SharedService }, { type: i3$1.MatSnackBar }]; } });
|
|
5892
5871
|
|
|
5893
5872
|
class RejectRequestFormComponent {
|
|
5894
5873
|
constructor(dialogRef, data, fb, sharedService, snackBar) {
|
|
@@ -5954,7 +5933,7 @@ class RejectRequestFormComponent {
|
|
|
5954
5933
|
});
|
|
5955
5934
|
}
|
|
5956
5935
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RejectRequestFormComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }, { token: SharedService }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5957
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RejectRequestFormComponent, selector: "app-reject-request-form", ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Reject Request</div>\n <div>Are you sure you want to reject {{data?.request_name}} request? Please provide a reason.</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"rejectRequestForm\">\n <mat-card class=\"mt-1\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Reason for Rejection <span class=\"error\">*</span></p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea formControlName=\"rejection_comment\" placeholder=\"Enter reason for rejection\" rows=\"5\"\n class=\"custom-textarea\">\n </textarea>\n </div>\n </div>\n\n\n <!-- <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Upload Document (PDF/Word/Excel/TXT)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span>{{ uploadedFile?.name || 'Choose a file (PDF, Word, Excel, TXT)' }}</span>\n </label>\n\n <small class=\"file-upload-hint\">Max file size: 25MB</small>\n\n <input id=\"uploadDoc\" type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n\n </mat-card>\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\n <button [disabled]=\"rejectRequestForm?.invalid || loading\" mat-raised-button\n [ngClass]=\"rejectRequestForm?.invalid ? 'btn-disable' : 'reject-btn-footer'\" (click)=\"rejectRequest()\">\n Reject Request\n </button>\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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:96%;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:.9;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;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:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:32px;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:32px;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:32px;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:hidden;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:6px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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}.close .mat-icon{height:18px!important;width:18px!important}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}::ng-deep .mat-select-panel.search-panel .search-input{flex:1 1 auto;width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;color:#333;outline:none;box-sizing:border-box}::ng-deep .mat-select-panel.search-panel .search-input:focus{border-color:#0074b6;box-shadow:0 0 0 3px #0074b60f}::ng-deep .mat-select-panel.search-panel .clear-button{background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:6px;line-height:1}::ng-deep .mat-select-panel.search-panel .loading-indicator{padding:10px 12px;text-align:center;color:#666;font-size:14px}::ng-deep .mat-select-panel.search-panel .mat-option{padding-top:10px;padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled]{padding:8px 16px!important}::ng-deep .mat-select-panel.align-panel{padding:0!important;box-sizing:border-box;margin-left:0!important;min-width:340px!important;max-width:340px!important}::ng-deep .mat-select-panel.align-panel .mat-option{padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled] .mat-error,::ng-deep .mat-select-panel.search-panel .mat-error{margin:0!important;padding:0!important;font-size:14px!important;line-height:1.4!important;color:#f44336}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-text-field-wrapper{background:#fff;border-radius:25px!important;height:42px}::ng-deep .mat-notched-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:42px;align-items:center;padding:0 16px;background:#fff}::ng-deep .mat-select-panel{border:1px solid rgba(0,0,0,.16);border-radius:8px;box-shadow:0 6px 18px #0000001f}.full-width{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{border-radius:25px}.reject-btn{border:1px solid #d32f2f!important;color:#d32f2f!important;border-radius:10px;padding:0 22px;height:44px;font-size:15px;font-weight:600;box-shadow:none}.reject-btn mat-icon{font-size:20px;margin-right:8px}.reject-btn:hover{background:#d32f2f!important}.reject-btn:disabled,.reject-btn.mat-mdc-button-disabled,.reject-btn.mat-button-disabled{background:#cfd8dc!important;color:#8a949b!important;cursor:not-allowed!important;opacity:1!important;box-shadow:none!important}.reject-btn:disabled mat-icon,.reject-btn.mat-mdc-button-disabled mat-icon,.reject-btn.mat-button-disabled mat-icon{color:#8a949b!important}.custom-date-field{width:100%}.custom-date-field ::ng-deep .mat-mdc-text-field-wrapper{border-radius:28px!important;background:#fff!important;padding:2px 12px}.custom-date-field ::ng-deep .mdc-notched-outline{display:none!important}.custom-date-field ::ng-deep .mat-mdc-form-field-focus-overlay{display:none!important}.custom-date-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.reject-btn-footer{background:#d32f2f!important;color:#fff!important;border-radius:26px;padding:0 22px;height:34px;font-size:15px;font-weight:600;box-shadow:none}.error{color:#d32f2f;margin-top:6px;font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i7$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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
5936
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RejectRequestFormComponent, selector: "app-reject-request-form", ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Reject Request</div>\n <div>Are you sure you want to reject {{data?.request_name}} request? Please provide a reason.</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"rejectRequestForm\">\n <mat-card class=\"mt-1\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Reason for Rejection <span class=\"error\">*</span></p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea formControlName=\"rejection_comment\" placeholder=\"Enter reason for rejection\" rows=\"5\"\n class=\"custom-textarea\">\n </textarea>\n </div>\n </div>\n\n\n <!-- <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Upload Document (PDF/Word/Excel/TXT)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span>{{ uploadedFile?.name || 'Choose a file (PDF, Word, Excel, TXT)' }}</span>\n </label>\n\n <small class=\"file-upload-hint\">Max file size: 25MB</small>\n\n <input id=\"uploadDoc\" type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n\n </mat-card>\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\n <button [disabled]=\"rejectRequestForm?.invalid || loading\" mat-raised-button\n [ngClass]=\"rejectRequestForm?.invalid ? 'btn-disable' : 'reject-btn-footer'\" (click)=\"rejectRequest()\">\n Reject Request\n </button>\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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:96%;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:.9;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;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:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:32px;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:32px;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:32px;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:hidden;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:6px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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}.close .mat-icon{height:18px!important;width:18px!important}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}::ng-deep .mat-select-panel.search-panel .search-input{flex:1 1 auto;width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;color:#333;outline:none;box-sizing:border-box}::ng-deep .mat-select-panel.search-panel .search-input:focus{border-color:#0074b6;box-shadow:0 0 0 3px #0074b60f}::ng-deep .mat-select-panel.search-panel .clear-button{background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:6px;line-height:1}::ng-deep .mat-select-panel.search-panel .loading-indicator{padding:10px 12px;text-align:center;color:#666;font-size:14px}::ng-deep .mat-select-panel.search-panel .mat-option{padding-top:10px;padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled]{padding:8px 16px!important}::ng-deep .mat-select-panel.align-panel{padding:0!important;box-sizing:border-box;margin-left:0!important;min-width:340px!important;max-width:340px!important}::ng-deep .mat-select-panel.align-panel .mat-option{padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled] .mat-error,::ng-deep .mat-select-panel.search-panel .mat-error{margin:0!important;padding:0!important;font-size:14px!important;line-height:1.4!important;color:#f44336}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-text-field-wrapper{background:#fff;border-radius:25px!important;height:42px}::ng-deep .mat-notched-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:42px;align-items:center;padding:0 16px;background:#fff}::ng-deep .mat-select-panel{border:1px solid rgba(0,0,0,.16);border-radius:8px;box-shadow:0 6px 18px #0000001f}.full-width{width:100%}.date-picker-field ::ng-deep .mat-mdc-text-field-wrapper{border-radius:25px}.reject-btn{border:1px solid #d32f2f!important;color:#d32f2f!important;border-radius:10px;padding:0 22px;height:44px;font-size:15px;font-weight:600;box-shadow:none}.reject-btn mat-icon{font-size:20px;margin-right:8px}.reject-btn:hover{background:#d32f2f!important}.reject-btn:disabled,.reject-btn.mat-mdc-button-disabled,.reject-btn.mat-button-disabled{background:#cfd8dc!important;color:#8a949b!important;cursor:not-allowed!important;opacity:1!important;box-shadow:none!important}.reject-btn:disabled mat-icon,.reject-btn.mat-mdc-button-disabled mat-icon,.reject-btn.mat-button-disabled mat-icon{color:#8a949b!important}.custom-date-field{width:100%}.custom-date-field ::ng-deep .mat-mdc-text-field-wrapper{border-radius:28px!important;background:#fff!important;padding:2px 12px}.custom-date-field ::ng-deep .mdc-notched-outline{display:none!important}.custom-date-field ::ng-deep .mat-mdc-form-field-focus-overlay{display:none!important}.custom-date-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.reject-btn-footer{background:#d32f2f!important;color:#fff!important;border-radius:26px;padding:0 22px;height:34px;font-size:15px;font-weight:600;box-shadow:none}.error{color:#d32f2f;margin-top:6px;font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i7$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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }] }); }
|
|
5958
5937
|
}
|
|
5959
5938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RejectRequestFormComponent, decorators: [{
|
|
5960
5939
|
type: Component,
|
|
@@ -5979,7 +5958,7 @@ class ListPopupComponent {
|
|
|
5979
5958
|
this.dialogRef.close();
|
|
5980
5959
|
}
|
|
5981
5960
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListPopupComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5982
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListPopupComponent, selector: "app-list-popup", ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">\n <span><mat-icon class=\"vertical-middle\">remove_red_eye</mat-icon></span>\n <span *ngIf=\"listType === 'role_responsibilities'\" class=\"ml-2\">Roles & Responsibilities</span>\n <span *ngIf=\"listType === 'activity'\" class=\"ml-2\">Key Activities</span>\n <span *ngIf=\"listType === 'doc-summary'\" class=\"ml-2\">Summary</span>\n \n </div>\n<!-- <div class=\"sub-text\" *ngIf=\"listType === 'role_responsibilities'\">-->\n<!-- <p>Complete roles and responsibilities</p>-->\n<!-- </div>-->\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-2\">\n <div class=\"mt-2\">\n<!-- <strong *ngIf=\"listType === 'role_responsibilities'\">Roles and Responsibilities:</strong>-->\n<!-- <strong *ngIf=\"listType === 'activity'\">Key Activities:</strong>-->\n </div>\n <div class=\"custom-bullet-list\" *ngIf=\"listType === 'role_responsibilities'\">\n <ul>\n <li *ngFor=\"let item of listData?.role_responsibilities\">\n {{item}}\n </li>\n </ul>\n </div>\n <div class=\"custom-bullet-list\" *ngIf=\"listType === 'activity'\">\n <ul>\n <li *ngFor=\"let item of listData?.activities\">\n {{item}}\n </li>\n </ul>\n </div>\n <div class=\"doc-summary-text\" *ngIf=\"listType === 'doc-summary'\">\n <markdown [data]=\"listData?.summary_text\"></markdown>\n </div>\n\n </div>\n \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:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .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 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0;padding-bottom:12px}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:16px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:700;line-height:normal}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:12px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.custom-bullet-list{padding-left:20px;margin:10px 0;font-family:Lato}.custom-bullet-list li{position:relative;padding-left:18px;margin-bottom:8px}.custom-bullet-list li:before{position:absolute;left:0;line-height:1.5;top:0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400}.vertical-middle{vertical-align:middle}.sub-text{font-family:Lato;font-size:12px}\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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }] }); }
|
|
5961
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListPopupComponent, selector: "app-list-popup", ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">\n <span><mat-icon class=\"vertical-middle\">remove_red_eye</mat-icon></span>\n <span *ngIf=\"listType === 'role_responsibilities'\" class=\"ml-2\">Roles & Responsibilities</span>\n <span *ngIf=\"listType === 'activity'\" class=\"ml-2\">Key Activities</span>\n <span *ngIf=\"listType === 'doc-summary'\" class=\"ml-2\">Summary</span>\n \n </div>\n<!-- <div class=\"sub-text\" *ngIf=\"listType === 'role_responsibilities'\">-->\n<!-- <p>Complete roles and responsibilities</p>-->\n<!-- </div>-->\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container mt-2\">\n <div class=\"mt-2\">\n<!-- <strong *ngIf=\"listType === 'role_responsibilities'\">Roles and Responsibilities:</strong>-->\n<!-- <strong *ngIf=\"listType === 'activity'\">Key Activities:</strong>-->\n </div>\n <div class=\"custom-bullet-list\" *ngIf=\"listType === 'role_responsibilities'\">\n <ul>\n <li *ngFor=\"let item of listData?.role_responsibilities\">\n {{item}}\n </li>\n </ul>\n </div>\n <div class=\"custom-bullet-list\" *ngIf=\"listType === 'activity'\">\n <ul>\n <li *ngFor=\"let item of listData?.activities\">\n {{item}}\n </li>\n </ul>\n </div>\n <div class=\"doc-summary-text\" *ngIf=\"listType === 'doc-summary'\">\n <markdown [data]=\"listData?.summary_text\"></markdown>\n </div>\n\n </div>\n \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:16px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:150%}::ng-deep mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}::ng-deep .mat-select-panel{background-color:#fff!important}::ng-deep .mat-select-panel .mat-option{border-radius:0!important}::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .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 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:0 8px;justify-content:center;align-items:center;gap:10px;border-radius:99px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.popup-header{display:flex;flex-direction:row;justify-content:space-between}.popup-footer{display:flex;flex-direction:row;justify-content:end}.view-cbp-plan{margin:10px;padding:10px}.view-cbp-plan-popup{padding:24px;max-height:70vh;overflow-y:auto}.section{border-radius:8px;background:#1b4ca114;padding:16px}.popup-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;font-weight:700;flex-shrink:0;padding-bottom:12px}.popup-footer{display:flex;justify-content:flex-end;gap:16px;padding:16px 24px;border-top:1px solid #ddd;background-color:#fff;flex-shrink:0;position:sticky;bottom:0}.section-container{overflow-y:auto;flex:1 1 auto}.competency-list{display:flex;flex-direction:row;gap:16px}.competency-text{color:#000;font-family:Lato;font-size:10px;font-style:normal;font-weight:700;line-height:normal}.competency-sub-heading{color:#1b4ca1;font-family:Montserrat;font-size:12px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.custom-textarea{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.custom-bullet-list{padding-left:20px;margin:10px 0;font-family:Lato}.custom-bullet-list li{position:relative;padding-left:18px;margin-bottom:8px}.custom-bullet-list li:before{position:absolute;left:0;line-height:1.5;top:0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400}.vertical-middle{vertical-align:middle}.sub-text{font-family:Lato;font-size:12px}\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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }] }); }
|
|
5983
5962
|
}
|
|
5984
5963
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListPopupComponent, decorators: [{
|
|
5985
5964
|
type: Component,
|
|
@@ -6241,7 +6220,7 @@ class ReviewRequestComponent {
|
|
|
6241
6220
|
}
|
|
6242
6221
|
approveAndPublish() {
|
|
6243
6222
|
console.log('approveAndPublish clicked', this.requestData);
|
|
6244
|
-
const dialogRef = this.dialog.open(
|
|
6223
|
+
const dialogRef = this.dialog.open(PublishApproveRequestFormComponent, {
|
|
6245
6224
|
width: '750px',
|
|
6246
6225
|
maxWidth: '90vw',
|
|
6247
6226
|
data: this.requestData,
|
|
@@ -6354,7 +6333,7 @@ class ReviewRequestComponent {
|
|
|
6354
6333
|
});
|
|
6355
6334
|
}
|
|
6356
6335
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReviewRequestComponent, deps: [{ token: SharedService }, { token: i3$1.MatSnackBar }, { token: i3.ActivatedRoute }, { token: i3.Router }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6357
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ReviewRequestComponent, selector: "app-review-request", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"review-container\">\n\n <!-- HEADER -->\n <div class=\"page-header\">\n\n <div class=\"left-section\">\n <mat-icon class=\"back-icon\" (click)=\"backToApprovalRequest()\">arrow_back</mat-icon>\n\n <div>\n <p class=\"section-title\">Review Request</p>\n <p class=\"request-id\">{{request?.id}}</p>\n </div>\n </div>\n\n <div class=\"status-badge\" *ngIf=\"(request?.status === 'pending' || request?.status === 'PENDING' )\">\n {{request?.status | titlecase}}\n </div>\n <div class=\"status-badge-success\" *ngIf=\"(request?.status === 'approved' || request?.status === 'APPROVED' )\">\n {{request?.status | titlecase}}\n </div>\n <div class=\"status-badge-rejected\" *ngIf=\"(request?.status === 'rejected' || request?.status === 'rejected' )\">\n {{request?.status | titlecase}}\n </div>\n\n <div\n *ngIf=\"(request?.status === 'pending' || request?.status === 'PENDING' ) && portalData?.parentAppData?.fromPortal === 'mdo'\">\n <div class=\"action-btn-wrapper\">\n\n <button mat-raised-button class=\"approve-btn\" (click)=\"approveAndPublish()\">\n\n <mat-icon>publish</mat-icon>\n Approve & Publish\n </button>\n\n <button mat-stroked-button class=\"reject-btn\" (click)=\"rejectRequest()\">\n\n <mat-icon>close</mat-icon>\n Reject Request\n </button>\n\n </div>\n </div>\n\n </div>\n\n\n <!-- REQUEST DETAILS -->\n <div class=\"inner-container\">\n <mat-card class=\"details-card\">\n\n <p class=\"section-title\">Request Details</p>\n\n <div class=\"details-grid\">\n\n <div class=\"detail-box\">\n <mat-icon>tag</mat-icon>\n <div>\n <p class=\"label\">Request ID</p>\n <p class=\"value\">{{request?.id}}</p>\n </div>\n </div>\n\n <div class=\"detail-box\">\n <mat-icon>assignment</mat-icon>\n <div>\n <p class=\"label\">Request Name</p>\n <p class=\"value\">{{request?.request_name}}</p>\n </div>\n </div>\n\n <div class=\"detail-box\">\n <mat-icon>mail</mat-icon>\n <div>\n <p class=\"label\">Requested By</p>\n <p class=\"value\">{{request?.user?.email | titlecase}}</p>\n </div>\n </div>\n\n <div class=\"detail-box\">\n <mat-icon>event</mat-icon>\n <div>\n <p class=\"label\">Submitted On</p>\n <p class=\"value\">{{request?.created_at | date: 'MMM d, y hh:mm:s a'}}</p>\n </div>\n </div>\n\n <div class=\"detail-box\">\n <mat-icon>person</mat-icon>\n <div>\n <p class=\"label\">No. of Designations</p>\n <p class=\"value\">{{request?.designation_count}}</p>\n </div>\n </div>\n\n </div>\n\n <mat-divider class=\"divider\"></mat-divider>\n\n <div class=\"organization\">\n <p class=\"label\">Organization</p>\n <p class=\"org-value\">{{request?.state_center_name}} <span\n *ngIf=\"request?.department_name\">{{request?.department_name}}</span></p>\n </div>\n\n </mat-card>\n\n\n <!-- ROLE MAPPING SECTION -->\n <div class=\"role-header\">\n\n <div>\n <p class=\"section-title\">Role Mappings for Review</p>\n </div>\n\n\n <div class=\"search flex margin-right-m\">\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'\" type=\"button\"\n value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n\n </div>\n <div class=\"table-class\">\n <ng-container *ngIf=\"dataSource?.data?.length > 0\">\n <div class=\"table-container mt-4\" style=\"overflow: auto;\">\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z1 table-body\">\n\n <ng-container matColumnDef=\"designation_name\">\n <th class=\"table-header\" 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 <div\n *ngIf=\"(element?.status === 'failed' || element?.status === 'FAILED') && portalData?.parentAppData?.fromPortal === 'mdo'\">\n <button mat-raised-button class=\"approve-btn\" (click)=\"rePublish(element)\">\n <mat-icon>publish</mat-icon>\n Re-Publish\n </button>\n </div>\n\n </td>\n </ng-container>\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 View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\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\" 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 <ng-container matColumnDef=\"behavioral\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Behavioral\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getCompetenciesByType(element.competencies, 'Behavioral')\">\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </li>\n </ul>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"functional\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Functional\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getCompetenciesByType(element.competencies, 'Functional')\">\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </li>\n </ul>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"domain\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Domain\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getCompetenciesByType(element.competencies, 'Domain')\">\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </li>\n </ul>\n </td>\n </ng-container>\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 \n\n <td mat-cell *matCellDef=\"let element\">\n\n <button mat-icon-button [matMenuTriggerFor]=\"menu\" #menuTrigger=\"matMenuTrigger\">\n <mat-icon>more_vert</mat-icon>\n </button>\n\n <mat-menu #menu=\"matMenu\">\n\n <ng-container *ngIf=\"!sharedService.fromMdoPortal\">\n <button mat-menu-item (click)=\"viewCourseRecommendation(element, menuTrigger)\">\n <mat-icon>preview</mat-icon>\n <span>View Course Recommendation</span>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"sharedService.fromMdoPortal\">\n\n <button mat-menu-item (click)=\"editRoleMapping(element, menuTrigger)\">\n <mat-icon>edit</mat-icon>\n <span>Edit Role Mapping</span>\n </button>\n\n <button mat-menu-item (click)=\"viewCBPPlan(element, menuTrigger)\">\n <mat-icon>visibility</mat-icon>\n <span>View Role Mapping</span>\n </button>\n\n <button *ngIf=\"request?.status?.toLowerCase() === 'pending' && sharedService.fromMdoPortal\" mat-menu-item\n (click)=\"rejectItemRequest(element, menuTrigger)\">\n\n <mat-icon>send</mat-icon>\n <span>Reject Request</span>\n\n </button>\n\n </ng-container>\n\n </mat-menu>\n\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n \n </table>\n <div\n class=\"no-data-wrapper\"\n *ngIf=\"dataSource.filteredData.length === 0\">\n\n No Data Found\n\n</div>\n <ng-container *ngIf=\"dataSource?.filteredData?.length > 0\">\n <mat-paginator [length]=\"dataSource?.data?.length\" [pageSize]=\"5\"\n [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons>\n </mat-paginator>\n </ng-container>\n\n </div>\n\n </ng-container>\n\n\n </div>\n </div>\n\n</div>\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".review-container{background:#f5f6fa;min-height:100vh}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;background:#fff;padding:10px 30px 10px 60px;border-radius:8px;border-top:1px solid #ccc;border-bottom:1px solid #ccc}.left-section{display:flex;align-items:center;gap:12px}.back-icon{cursor:pointer;font-size:22px}.request-id{color:#6b7280;font-size:14px}.status-badge{background:orange;color:#fff4e5;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600}.status-badge-success{background:#16873a;color:#fff4e5;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600}.status-badge-rejected{background:#d32f2f;color:#fff4e5;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600}.details-card{padding:25px 30px;border-radius:12px;background:#fff}.section-title{margin:10px 0;font-weight:600;font-size:20px;color:#000}.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-bottom:20px}.detail-box{display:flex;gap:12px;align-items:center;min-width:0}.detail-box mat-icon{background:#eef2ff;padding:18px;border-radius:8px;color:#1b4ca1;height:60px;width:60px;vertical-align:middle;text-align:center;display:flex;justify-content:center;align-items:center}.label{font-size:13px;color:#6b7280}.value,.org-value{word-break:break-word}.value{font-weight:600}.organization{margin-top:50px}.org-value{color:#1b4ca1;font-weight:600}.role-header{margin-top:30px;display:flex;justify-content:space-between;align-items:center}.search-box{display:flex;align-items:center;gap:10px;border:1px solid #d1d5db;padding:6px 10px;border-radius:10px;background:#fff}.search-box input{border:none;outline:none;width:250px}.divider{margin:10px 30px;width:88%!important}.inner-container{margin:0 30px 0 60px;width:95%}.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%}::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: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}.no-data-cell{text-align:center;padding:40px;font-size:16px;color:#888}.action-btn-wrapper{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.approve-btn{background:#1ea84a!important;color:#fff!important;border-radius:10px;padding:0 22px;height:44px;font-size:15px;font-weight:600;box-shadow:none;transition:all .2s ease}.approve-btn mat-icon{font-size:20px;margin-right:8px}.approve-btn:hover{background:#16873a!important}.approve-btn:disabled,.approve-btn.mat-mdc-button-disabled,.approve-btn.mat-button-disabled{background:#cfd8dc!important;color:#8a949b!important;cursor:not-allowed!important;opacity:1!important;box-shadow:none!important}.approve-btn:disabled mat-icon,.approve-btn.mat-mdc-button-disabled mat-icon,.approve-btn.mat-button-disabled mat-icon{color:#8a949b!important}.reject-btn{border:1px solid #d32f2f!important;color:#d32f2f!important;border-radius:10px;padding:0 22px;height:44px;font-size:15px;font-weight:600;background:#fff}.reject-btn mat-icon{font-size:20px;margin-right:8px}.reject-btn:hover{background:#d32f2f0d}.publish-request-popup .mat-mdc-dialog-container{padding:0!important;overflow:hidden!important;border-radius:16px}.publish-request-popup .mat-mdc-dialog-surface{overflow:hidden!important;border-radius:16px}.publish-request-popup .mat-mdc-dialog-content{overflow:hidden!important;max-height:unset!important}.publish-request-popup .mat-mdc-dialog-container .mdc-dialog__content{overflow:hidden!important}::ng-deep .mat-menu-panel,::ng-deep .mat-mdc-menu-panel{background:#fff!important;opacity:1!important}.no-data-wrapper{padding:24px;text-align:center;font-size:14px;color:#0009;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: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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: i7$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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.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: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] }); }
|
|
6336
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ReviewRequestComponent, selector: "app-review-request", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"review-container\">\n\n <!-- HEADER -->\n <div class=\"page-header\">\n\n <div class=\"left-section\">\n <mat-icon class=\"back-icon\" (click)=\"backToApprovalRequest()\">arrow_back</mat-icon>\n\n <div>\n <p class=\"section-title\">Review Request</p>\n <p class=\"request-id\">{{request?.id}}</p>\n </div>\n </div>\n\n <div class=\"status-badge\" *ngIf=\"(request?.status === 'pending' || request?.status === 'PENDING' )\">\n {{request?.status | titlecase}}\n </div>\n <div class=\"status-badge-success\" *ngIf=\"(request?.status === 'approved' || request?.status === 'APPROVED' )\">\n {{request?.status | titlecase}}\n </div>\n <div class=\"status-badge-rejected\" *ngIf=\"(request?.status === 'rejected' || request?.status === 'rejected' )\">\n {{request?.status | titlecase}}\n </div>\n\n <div\n *ngIf=\"(request?.status === 'pending' || request?.status === 'PENDING' ) && portalData?.parentAppData?.fromPortal === 'mdo'\">\n <div class=\"action-btn-wrapper\">\n\n <button mat-raised-button class=\"approve-btn\" (click)=\"approveAndPublish()\">\n\n <mat-icon>publish</mat-icon>\n Approve & Publish\n </button>\n\n <button mat-stroked-button class=\"reject-btn\" (click)=\"rejectRequest()\">\n\n <mat-icon>close</mat-icon>\n Reject Request\n </button>\n\n </div>\n </div>\n\n </div>\n\n\n <!-- REQUEST DETAILS -->\n <div class=\"inner-container\">\n <mat-card class=\"details-card\">\n\n <p class=\"section-title\">Request Details</p>\n\n <div class=\"details-grid\">\n\n <div class=\"detail-box\">\n <mat-icon>tag</mat-icon>\n <div>\n <p class=\"label\">Request ID</p>\n <p class=\"value\">{{request?.id}}</p>\n </div>\n </div>\n\n <div class=\"detail-box\">\n <mat-icon>assignment</mat-icon>\n <div>\n <p class=\"label\">Request Name</p>\n <p class=\"value\">{{request?.request_name}}</p>\n </div>\n </div>\n\n <div class=\"detail-box\">\n <mat-icon>mail</mat-icon>\n <div>\n <p class=\"label\">Requested By</p>\n <p class=\"value\">{{request?.user?.email | titlecase}}</p>\n </div>\n </div>\n\n <div class=\"detail-box\">\n <mat-icon>event</mat-icon>\n <div>\n <p class=\"label\">Submitted On</p>\n <p class=\"value\">{{request?.created_at | date: 'MMM d, y hh:mm:s a'}}</p>\n </div>\n </div>\n\n <div class=\"detail-box\">\n <mat-icon>person</mat-icon>\n <div>\n <p class=\"label\">No. of Designations</p>\n <p class=\"value\">{{request?.designation_count}}</p>\n </div>\n </div>\n\n </div>\n\n <mat-divider class=\"divider\"></mat-divider>\n\n <div class=\"organization\">\n <p class=\"label\">Organization</p>\n <p class=\"org-value\">{{request?.state_center_name}} <span\n *ngIf=\"request?.department_name\">{{request?.department_name}}</span></p>\n </div>\n\n </mat-card>\n\n\n <!-- ROLE MAPPING SECTION -->\n <div class=\"role-header\">\n\n <div>\n <p class=\"section-title\">Role Mappings for Review</p>\n </div>\n\n\n <div class=\"search flex margin-right-m\">\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'\" type=\"button\"\n value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n\n </div>\n <div class=\"table-class\">\n <ng-container *ngIf=\"dataSource?.data?.length > 0\">\n <div class=\"table-container mt-4\" style=\"overflow: auto;\">\n <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z1 table-body\">\n\n <ng-container matColumnDef=\"designation_name\">\n <th class=\"table-header\" 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 <div\n *ngIf=\"(element?.status === 'failed' || element?.status === 'FAILED') && portalData?.parentAppData?.fromPortal === 'mdo'\">\n <button mat-raised-button class=\"approve-btn\" (click)=\"rePublish(element)\">\n <mat-icon>publish</mat-icon>\n Re-Publish\n </button>\n </div>\n\n </td>\n </ng-container>\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 View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\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\" 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 <ng-container matColumnDef=\"behavioral\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Behavioral\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getCompetenciesByType(element.competencies, 'Behavioral')\">\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </li>\n </ul>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"functional\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Functional\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getCompetenciesByType(element.competencies, 'Functional')\">\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </li>\n </ul>\n </td>\n </ng-container>\n <ng-container matColumnDef=\"domain\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Domain\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getCompetenciesByType(element.competencies, 'Domain')\">\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </li>\n </ul>\n </td>\n </ng-container>\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 \n\n <td mat-cell *matCellDef=\"let element\">\n\n <button mat-icon-button [matMenuTriggerFor]=\"menu\" #menuTrigger=\"matMenuTrigger\">\n <mat-icon>more_vert</mat-icon>\n </button>\n\n <mat-menu #menu=\"matMenu\">\n\n <ng-container *ngIf=\"!sharedService.fromMdoPortal\">\n <button mat-menu-item (click)=\"viewCourseRecommendation(element, menuTrigger)\">\n <mat-icon>preview</mat-icon>\n <span>View Course Recommendation</span>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"sharedService.fromMdoPortal\">\n\n <button mat-menu-item (click)=\"editRoleMapping(element, menuTrigger)\">\n <mat-icon>edit</mat-icon>\n <span>Edit Role Mapping</span>\n </button>\n\n <button mat-menu-item (click)=\"viewCBPPlan(element, menuTrigger)\">\n <mat-icon>visibility</mat-icon>\n <span>View Role Mapping</span>\n </button>\n\n <button *ngIf=\"request?.status?.toLowerCase() === 'pending' && sharedService.fromMdoPortal\" mat-menu-item\n (click)=\"rejectItemRequest(element, menuTrigger)\">\n\n <mat-icon>send</mat-icon>\n <span>Reject Request</span>\n\n </button>\n\n </ng-container>\n\n </mat-menu>\n\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n \n </table>\n <div\n class=\"no-data-wrapper\"\n *ngIf=\"dataSource.filteredData.length === 0\">\n\n No Data Found\n\n</div>\n <ng-container *ngIf=\"dataSource?.filteredData?.length > 0\">\n <mat-paginator [length]=\"dataSource?.data?.length\" [pageSize]=\"5\"\n [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons>\n </mat-paginator>\n </ng-container>\n\n </div>\n\n </ng-container>\n\n\n </div>\n </div>\n\n</div>\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".review-container{background:#f5f6fa;min-height:100vh}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;background:#fff;padding:10px 30px 10px 60px;border-radius:8px;border-top:1px solid #ccc;border-bottom:1px solid #ccc}.left-section{display:flex;align-items:center;gap:12px}.back-icon{cursor:pointer;font-size:22px}.request-id{color:#6b7280;font-size:14px}.status-badge{background:orange;color:#fff4e5;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600}.status-badge-success{background:#16873a;color:#fff4e5;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600}.status-badge-rejected{background:#d32f2f;color:#fff4e5;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600}.details-card{padding:25px 30px;border-radius:12px;background:#fff}.section-title{margin:10px 0;font-weight:600;font-size:20px;color:#000}.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-bottom:20px}.detail-box{display:flex;gap:12px;align-items:center;min-width:0}.detail-box mat-icon{background:#eef2ff;padding:18px;border-radius:8px;color:#1b4ca1;height:60px;width:60px;vertical-align:middle;text-align:center;display:flex;justify-content:center;align-items:center}.label{font-size:13px;color:#6b7280}.value,.org-value{word-break:break-word}.value{font-weight:600}.organization{margin-top:50px}.org-value{color:#1b4ca1;font-weight:600}.role-header{margin-top:30px;display:flex;justify-content:space-between;align-items:center}.search-box{display:flex;align-items:center;gap:10px;border:1px solid #d1d5db;padding:6px 10px;border-radius:10px;background:#fff}.search-box input{border:none;outline:none;width:250px}.divider{margin:10px 30px;width:88%!important}.inner-container{margin:0 30px 0 60px;width:95%}.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%}::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: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}.no-data-cell{text-align:center;padding:40px;font-size:16px;color:#888}.action-btn-wrapper{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.approve-btn{background:#1ea84a!important;color:#fff!important;border-radius:10px;padding:0 22px;height:44px;font-size:15px;font-weight:600;box-shadow:none;transition:all .2s ease}.approve-btn mat-icon{font-size:20px;margin-right:8px}.approve-btn:hover{background:#16873a!important}.approve-btn:disabled,.approve-btn.mat-mdc-button-disabled,.approve-btn.mat-button-disabled{background:#cfd8dc!important;color:#8a949b!important;cursor:not-allowed!important;opacity:1!important;box-shadow:none!important}.approve-btn:disabled mat-icon,.approve-btn.mat-mdc-button-disabled mat-icon,.approve-btn.mat-button-disabled mat-icon{color:#8a949b!important}.reject-btn{border:1px solid #d32f2f!important;color:#d32f2f!important;border-radius:10px;padding:0 22px;height:44px;font-size:15px;font-weight:600;background:#fff}.reject-btn mat-icon{font-size:20px;margin-right:8px}.reject-btn:hover{background:#d32f2f0d}.publish-request-popup .mat-mdc-dialog-container{padding:0!important;overflow:hidden!important;border-radius:16px}.publish-request-popup .mat-mdc-dialog-surface{overflow:hidden!important;border-radius:16px}.publish-request-popup .mat-mdc-dialog-content{overflow:hidden!important;max-height:unset!important}.publish-request-popup .mat-mdc-dialog-container .mdc-dialog__content{overflow:hidden!important}::ng-deep .mat-menu-panel,::ng-deep .mat-mdc-menu-panel{background:#fff!important;opacity:1!important}.no-data-wrapper{padding:24px;text-align:center;font-size:14px;color:#0009;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: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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: i7$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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "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: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] }); }
|
|
6358
6337
|
}
|
|
6359
6338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReviewRequestComponent, decorators: [{
|
|
6360
6339
|
type: Component,
|
|
@@ -6756,7 +6735,7 @@ class ApprovalRequestsComponent {
|
|
|
6756
6735
|
this.getApprovalRequests();
|
|
6757
6736
|
}
|
|
6758
6737
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApprovalRequestsComponent, deps: [{ token: i1$1.MatDialog }, { token: SharedService }, { token: i3$1.MatSnackBar }, { token: i2.FormBuilder }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6759
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ApprovalRequestsComponent, selector: "app-approval-requests", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"upload-container\">\n <div class=\"header\">\n <div class=\"sub-heading mt-10 mb-10 ml-10 cursor-pointer\">\n <p (click)=\"routeToInitial()\"><mat-icon style=\"vertical-align: middle;\">arrow_back</mat-icon><span\n class=\"pl-10\">Back to Role Mapping Generation</span></p>\n </div>\n\n </div>\n <mat-card class=\"mat-card-container mt-20\" [formGroup]=\"roleMappingForm\">\n <div class=\"header\">\n <div class=\"sub-heading\">\n <p>Approval Requests</p>\n </div>\n\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>{{cbpPlanFinalObj?.ministry?.orgName}} <span *ngIf=\"cbpPlanFinalObj?.department_name\">\n / {{cbpPlanFinalObj?.department_name}}</span>\n </p>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"routeToInitial()\">\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 <button [ngClass]=\"!(cbpPlanFinalObj?.ministry?.orgName) ? 'btn-disable':'btn-active'\" mat-raised-button\n color=\"primary\" [disabled]=\"!(cbpPlanFinalObj?.ministry?.orgName)\" (click)=\"openUploadDialog()\">\n <mat-icon>upload</mat-icon> Upload Document\n </button>\n </div> -->\n </div>\n </div>\n </div>\n\n\n\n\n\n </mat-card>\n <mat-card class=\"\">\n <form [formGroup]=\"filterForm\">\n <div class=\"search flex margin-right-m filter-container\">\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-filter h-4 w-4\">\n <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"></polygon>\n </svg>\n </div>\n <div>\n <b> Filters</b>\n </div>\n <div class=\"mt-10 w-50\">\n\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\" label=\"\" formControlName=\"search\"\n (keyup)=\"getApprovalRequests()\" placeholder=\"Search by Request ID\" type=\"Standard\">\n\n </div>\n\n </div>\n\n\n\n </div>\n <div class=\"search-and-buttons-container\">\n <div>\n <mat-form-field appearance=\"outline\" class=\"language-select\">\n <!-- <mat-label style=\"font-weight: normal;\">\n {{ filterForm.get('status')?.value ? '' : 'Select Status' }}\n </mat-label> -->\n\n <mat-select formControlName=\"status\" panelClass=\"select-search-panel\"\n (selectionChange)=\"getApprovalRequests()\">\n\n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\" matInput\n placeholder=\"Search Status\" (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'status')\" />\n\n <!-- Values -->\n <mat-option *ngFor=\"let r of filteredStatus\" [value]=\"r?.code\">\n {{ r?.label }}\n </mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div>\n <mat-form-field appearance=\"outline\" class=\"language-select\">\n <!-- <mat-label style=\"font-weight: normal;\">\n {{ filterForm.get('time')?.value ? '' : 'Select Time' }}\n </mat-label> -->\n\n <mat-select formControlName=\"time\" panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\" matInput\n placeholder=\"Search Time\" (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'time')\" />\n\n <!-- Values -->\n <mat-option *ngFor=\"let r of filteredTime\" [value]=\"r?.code\">\n {{ r?.label }}\n </mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n </form>\n <p class=\"mt-10\" style=\"font-family: 'Lato'; font-size: 18px; margin-left: 10px;\">\n {{totalRecords}} Approval Requests</p>\n <table style=\"border-radius: 25px 25px 0 0;\n overflow: hidden;\n box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);\" mat-table [dataSource]=\"dataSource\"\n class=\"mat-elevation-z2 full-width-table mt-10\">\n\n <!-- Document Column -->\n <ng-container matColumnDef=\"request_id\">\n <th mat-header-cell *matHeaderCellDef> Request Name </th>\n <td mat-cell *matCellDef=\"let request\" style=\"width: 15%;\">\n <div>\n <div class=\"doc-title\" *ngIf=\"request.request_name\">{{ request.request_name }}</div>\n <div class=\"doc-title\" *ngIf=\"!request.request_name\">{{ request.request_name }}</div>\n </div>\n </td>\n </ng-container>\n\n\n\n <!-- Summary Text Column -->\n <!-- <ng-container matColumnDef=\"summary_text\">\n <th mat-header-cell *matHeaderCellDef> Summary </th>\n <td mat-cell *matCellDef=\"let doc\">\n <div class=\"doc-summary-text\" style=\"width: 80%;\">\n <markdown [data]=\"doc?.summary_text | slice : 0 : 200\"></markdown>\n </div>\n </td>\n </ng-container> -->\n\n <!-- Date Column -->\n <ng-container matColumnDef=\"date\">\n <th mat-header-cell *matHeaderCellDef> Date & Time</th>\n <td mat-cell *matCellDef=\"let request\" style=\"width: 15%;\"> {{ request.created_at | date: 'MMM d, y'}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"designation\">\n <th mat-header-cell *matHeaderCellDef> No of Designation </th>\n <td mat-cell *matCellDef=\"let request\" style=\"width: 15%;\">\n <span>{{request?.designation_count}}</span>\n </td>\n </ng-container>\n\n\n <!-- Summary Status Column -->\n <ng-container matColumnDef=\"status\">\n <th mat-header-cell *matHeaderCellDef> Request Status </th>\n <td mat-cell *matCellDef=\"let request\" style=\"width: 15%;\">\n <span *ngIf=\"request.status === 'approved' || request.status === 'APPROVED'\" class=\"success\"> {{ request.status | titlecase\n }} </span>\n <span *ngIf=\"request.status === 'pending' || request.status === 'PENDING'\" class=\"in-progress\"> {{ request.status |\n titlecase }} </span>\n <span *ngIf=\"request.status === 'rejected' || request.status === 'REJECTED'\" class=\"rejected\"> {{ request.status |\n titlecase }} </span>\n </td>\n </ng-container>\n\n <!-- Actions Column -->\n <ng-container matColumnDef=\"actions\">\n <th mat-header-cell *matHeaderCellDef> Actions </th>\n <td mat-cell *matCellDef=\"let request\" style=\"width: 15%;\">\n <div class=\"action-flex\">\n <div>\n <button class=\"btn-active\" mat-raised-button color=\"primary\" (click)=\"viewRequest(request)\"\n matTooltip=\"View/Review Request\">\n View/Review Request\n </button>\n </div>\n <div>\n <button style=\"margin-left: 15px;\" *ngIf=\"request.status === 'COMPLETED'\" mat-icon-button\n color=\"warn\" (click)=\"revokeApprovalRequest(request)\" matTooltip=\"Delete\">\n <mat-icon>delete</mat-icon>\n Revoke Request\n </button>\n </div>\n </div>\n\n\n\n\n\n </td>\n </ng-container>\n\n <!-- Header and Row Definitions -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n\n <!-- No Data Message -->\n\n </table>\n <div *ngIf=\"dataSource.data.length === 0\" class=\"no-data-message\">\n No record found\n </div>\n <!-- Pagination -->\n <div class=\"mt-1\">\n <!-- <mat-paginator class=\"custom-pagination\" [pageSize]=\"5\" [pageSizeOptions]=\"[5, 10, 20]\"></mat-paginator> -->\n <mat-paginator [length]=\"totalRecords\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\"\n [pageSizeOptions]=\"[5, 10, 20]\" (page)=\"onPageChange($event)\">\n </mat-paginator>\n </div>\n\n\n </mat-card>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".upload-container{background:transparent;min-height:100vh;padding:24px 0;margin:0 30px 0 50px}.header{display:flex;flex-direction:row;justify-content:space-between}.primary-btn{background-color:#1b4ca1;color:#fff}:host .search .rsearch{position:relative}:host .search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}:host .search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}:host .search .clear-icon:hover{color:#333}:host .search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:100%}.no-data-message{text-align:center;padding:16px;font-style:italic;color:#888}.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:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.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:34px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.sub-heading p{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.ml-10{margin-left:10px}.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mb-10{margin-bottom:10px}.cursor-pointer{cursor:pointer}.doc-title{font-weight:700}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;z-index:10;background:#fff;font-size:16px;box-shadow:0 2px 4px #0000001a;padding:5px 10px}:host ::ng-deep .mat-mdc-row{font-size:16px}:host ::ng-deep .mat-mdc-cell{padding:5px 10px}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;font-size:18px;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none;padding:5px 10px}: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}::ng-deep .doc-summary-text ::ng-deep markdown p{line-height:1.5rem;font-family:Lato;font-size:1rem!important;font-style:normal;font-weight:400}:host .mat-select-panel .search-wrapper{width:100%!important;box-sizing:border-box;padding:8px;position:sticky;top:0;z-index:2;background:#fff}.search-input{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;outline:none;box-sizing:border-box}:host ::ng-deep .mat-select-panel-wrap{overflow:visible!important;padding:0;margin-top:42px}:host ::ng-deep .mat-select-panel{border:1px solid #ccc!important;box-sizing:border-box;max-height:250px}.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;height:30px}.select-map-route-container{display:flex;flex-direction:row;width:100%}.select-map-flex{display:flex;flex-direction:row}.select-map-flex-container{display:flex;justify-content:space-between;width:100%}.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}.success{background:green;padding:4px 6px;color:#fff;border-radius:20px}.in-progress{background:orange;padding:4px 6px;color:#fff;border-radius:20px}.rejected{background:#d32f2f;padding:4px 6px;color:#fff;border-radius:20px}.filter-container{display:flex;align-items:center;flex-direction:row;width:100%;gap:10px;background:#e3ecfa;padding:10px;border-radius:10px}.w-50{width:50%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:4px;flex-direction:column;flex-wrap:wrap;width:20%;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}:host ::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-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}:host ::ng-deep .language-select .mat-select-trigger{font-weight:400!important}:host ::ng-deep .language-select .mat-select-value{color:#fff!important}:host ::ng-deep .custom-pagination{background-color:transparent!important}.action-flex{display:flex;gap:10px}\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: i6.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i8.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i7$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: i8$1.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: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] }); }
|
|
6738
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ApprovalRequestsComponent, selector: "app-approval-requests", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"upload-container\">\n <div class=\"header\">\n <div class=\"sub-heading mt-10 mb-10 ml-10 cursor-pointer\">\n <p (click)=\"routeToInitial()\"><mat-icon style=\"vertical-align: middle;\">arrow_back</mat-icon><span\n class=\"pl-10\">Back to Role Mapping Generation</span></p>\n </div>\n\n </div>\n <mat-card class=\"mat-card-container mt-20\" [formGroup]=\"roleMappingForm\">\n <div class=\"header\">\n <div class=\"sub-heading\">\n <p>Approval Requests</p>\n </div>\n\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>{{cbpPlanFinalObj?.ministry?.orgName}} <span *ngIf=\"cbpPlanFinalObj?.department_name\">\n / {{cbpPlanFinalObj?.department_name}}</span>\n </p>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"routeToInitial()\">\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 <button [ngClass]=\"!(cbpPlanFinalObj?.ministry?.orgName) ? 'btn-disable':'btn-active'\" mat-raised-button\n color=\"primary\" [disabled]=\"!(cbpPlanFinalObj?.ministry?.orgName)\" (click)=\"openUploadDialog()\">\n <mat-icon>upload</mat-icon> Upload Document\n </button>\n </div> -->\n </div>\n </div>\n </div>\n\n\n\n\n\n </mat-card>\n <mat-card class=\"\">\n <form [formGroup]=\"filterForm\">\n <div class=\"search flex margin-right-m filter-container\">\n <div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-filter h-4 w-4\">\n <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"></polygon>\n </svg>\n </div>\n <div>\n <b> Filters</b>\n </div>\n <div class=\"mt-10 w-50\">\n\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\" label=\"\" formControlName=\"search\"\n (keyup)=\"getApprovalRequests()\" placeholder=\"Search by Request ID\" type=\"Standard\">\n\n </div>\n\n </div>\n\n\n\n </div>\n <div class=\"search-and-buttons-container\">\n <div>\n <mat-form-field appearance=\"outline\" class=\"language-select\">\n <!-- <mat-label style=\"font-weight: normal;\">\n {{ filterForm.get('status')?.value ? '' : 'Select Status' }}\n </mat-label> -->\n\n <mat-select formControlName=\"status\" panelClass=\"select-search-panel\"\n (selectionChange)=\"getApprovalRequests()\">\n\n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\" matInput\n placeholder=\"Search Status\" (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'status')\" />\n\n <!-- Values -->\n <mat-option *ngFor=\"let r of filteredStatus\" [value]=\"r?.code\">\n {{ r?.label }}\n </mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"search-and-buttons-container\">\n <div>\n <mat-form-field appearance=\"outline\" class=\"language-select\">\n <!-- <mat-label style=\"font-weight: normal;\">\n {{ filterForm.get('time')?.value ? '' : 'Select Time' }}\n </mat-label> -->\n\n <mat-select formControlName=\"time\" panelClass=\"select-search-panel\"\n (selectionChange)=\"applyFilters()\">\n\n <!-- Search box -->\n <input style=\"border:1px solid #ccc; padding: 5px;width: 92%;margin: 5px;\" matInput\n placeholder=\"Search Time\" (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"filterList($any($event.target).value, 'time')\" />\n\n <!-- Values -->\n <mat-option *ngFor=\"let r of filteredTime\" [value]=\"r?.code\">\n {{ r?.label }}\n </mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n </div>\n </form>\n <p class=\"mt-10\" style=\"font-family: 'Lato'; font-size: 18px; margin-left: 10px;\">\n {{totalRecords}} Approval Requests</p>\n <table style=\"border-radius: 25px 25px 0 0;\n overflow: hidden;\n box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);\" mat-table [dataSource]=\"dataSource\"\n class=\"mat-elevation-z2 full-width-table mt-10\">\n\n <!-- Document Column -->\n <ng-container matColumnDef=\"request_id\">\n <th mat-header-cell *matHeaderCellDef> Request Name </th>\n <td mat-cell *matCellDef=\"let request\" style=\"width: 15%;\">\n <div>\n <div class=\"doc-title\" *ngIf=\"request.request_name\">{{ request.request_name }}</div>\n <div class=\"doc-title\" *ngIf=\"!request.request_name\">{{ request.request_name }}</div>\n </div>\n </td>\n </ng-container>\n\n\n\n <!-- Summary Text Column -->\n <!-- <ng-container matColumnDef=\"summary_text\">\n <th mat-header-cell *matHeaderCellDef> Summary </th>\n <td mat-cell *matCellDef=\"let doc\">\n <div class=\"doc-summary-text\" style=\"width: 80%;\">\n <markdown [data]=\"doc?.summary_text | slice : 0 : 200\"></markdown>\n </div>\n </td>\n </ng-container> -->\n\n <!-- Date Column -->\n <ng-container matColumnDef=\"date\">\n <th mat-header-cell *matHeaderCellDef> Date & Time</th>\n <td mat-cell *matCellDef=\"let request\" style=\"width: 15%;\"> {{ request.created_at | date: 'MMM d, y'}}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"designation\">\n <th mat-header-cell *matHeaderCellDef> No of Designation </th>\n <td mat-cell *matCellDef=\"let request\" style=\"width: 15%;\">\n <span>{{request?.designation_count}}</span>\n </td>\n </ng-container>\n\n\n <!-- Summary Status Column -->\n <ng-container matColumnDef=\"status\">\n <th mat-header-cell *matHeaderCellDef> Request Status </th>\n <td mat-cell *matCellDef=\"let request\" style=\"width: 15%;\">\n <span *ngIf=\"request.status === 'approved' || request.status === 'APPROVED'\" class=\"success\"> {{ request.status | titlecase\n }} </span>\n <span *ngIf=\"request.status === 'pending' || request.status === 'PENDING'\" class=\"in-progress\"> {{ request.status |\n titlecase }} </span>\n <span *ngIf=\"request.status === 'rejected' || request.status === 'REJECTED'\" class=\"rejected\"> {{ request.status |\n titlecase }} </span>\n </td>\n </ng-container>\n\n <!-- Actions Column -->\n <ng-container matColumnDef=\"actions\">\n <th mat-header-cell *matHeaderCellDef> Actions </th>\n <td mat-cell *matCellDef=\"let request\" style=\"width: 15%;\">\n <div class=\"action-flex\">\n <div>\n <button class=\"btn-active\" mat-raised-button color=\"primary\" (click)=\"viewRequest(request)\"\n matTooltip=\"View/Review Request\">\n View/Review Request\n </button>\n </div>\n <div>\n <button style=\"margin-left: 15px;\" *ngIf=\"request.status === 'COMPLETED'\" mat-icon-button\n color=\"warn\" (click)=\"revokeApprovalRequest(request)\" matTooltip=\"Delete\">\n <mat-icon>delete</mat-icon>\n Revoke Request\n </button>\n </div>\n </div>\n\n\n\n\n\n </td>\n </ng-container>\n\n <!-- Header and Row Definitions -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n\n <!-- No Data Message -->\n\n </table>\n <div *ngIf=\"dataSource.data.length === 0\" class=\"no-data-message\">\n No record found\n </div>\n <!-- Pagination -->\n <div class=\"mt-1\">\n <!-- <mat-paginator class=\"custom-pagination\" [pageSize]=\"5\" [pageSizeOptions]=\"[5, 10, 20]\"></mat-paginator> -->\n <mat-paginator [length]=\"totalRecords\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\"\n [pageSizeOptions]=\"[5, 10, 20]\" (page)=\"onPageChange($event)\">\n </mat-paginator>\n </div>\n\n\n </mat-card>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".upload-container{background:transparent;min-height:100vh;padding:24px 0;margin:0 30px 0 50px}.header{display:flex;flex-direction:row;justify-content:space-between}.primary-btn{background-color:#1b4ca1;color:#fff}:host .search .rsearch{position:relative}:host .search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}:host .search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}:host .search .clear-icon:hover{color:#333}:host .search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:100%}.no-data-message{text-align:center;padding:16px;font-style:italic;color:#888}.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:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.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:34px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.sub-heading p{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.ml-10{margin-left:10px}.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mb-10{margin-bottom:10px}.cursor-pointer{cursor:pointer}.doc-title{font-weight:700}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;z-index:10;background:#fff;font-size:16px;box-shadow:0 2px 4px #0000001a;padding:5px 10px}:host ::ng-deep .mat-mdc-row{font-size:16px}:host ::ng-deep .mat-mdc-cell{padding:5px 10px}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;font-size:18px;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none;padding:5px 10px}: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}::ng-deep .doc-summary-text ::ng-deep markdown p{line-height:1.5rem;font-family:Lato;font-size:1rem!important;font-style:normal;font-weight:400}:host .mat-select-panel .search-wrapper{width:100%!important;box-sizing:border-box;padding:8px;position:sticky;top:0;z-index:2;background:#fff}.search-input{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;outline:none;box-sizing:border-box}:host ::ng-deep .mat-select-panel-wrap{overflow:visible!important;padding:0;margin-top:42px}:host ::ng-deep .mat-select-panel{border:1px solid #ccc!important;box-sizing:border-box;max-height:250px}.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;height:30px}.select-map-route-container{display:flex;flex-direction:row;width:100%}.select-map-flex{display:flex;flex-direction:row}.select-map-flex-container{display:flex;justify-content:space-between;width:100%}.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}.success{background:green;padding:4px 6px;color:#fff;border-radius:20px}.in-progress{background:orange;padding:4px 6px;color:#fff;border-radius:20px}.rejected{background:#d32f2f;padding:4px 6px;color:#fff;border-radius:20px}.filter-container{display:flex;align-items:center;flex-direction:row;width:100%;gap:10px;background:#e3ecfa;padding:10px;border-radius:10px}.w-50{width:50%}.search-and-buttons-container{display:flex;justify-content:space-between;gap:4px;flex-direction:column;flex-wrap:wrap;width:20%;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}:host ::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-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}:host ::ng-deep .language-select .mat-select-trigger{font-weight:400!important}:host ::ng-deep .language-select .mat-select-value{color:#fff!important}:host ::ng-deep .custom-pagination{background-color:transparent!important}.action-flex{display:flex;gap:10px}\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: i6.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i7$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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "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: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] }); }
|
|
6760
6739
|
}
|
|
6761
6740
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApprovalRequestsComponent, decorators: [{
|
|
6762
6741
|
type: Component,
|
|
@@ -7009,7 +6988,7 @@ class DashboardComponent {
|
|
|
7009
6988
|
this.router.navigate(['/ai/initial']);
|
|
7010
6989
|
}
|
|
7011
6990
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardComponent, deps: [{ token: i2.FormBuilder }, { token: SharedService }, { token: i3$1.MatSnackBar }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7012
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DashboardComponent, selector: "app-dashboard", ngImport: i0, template: "<div class=\"dashboard-wrapper\">\n <div class=\"header\">\n <div class=\"sub-heading mt-10 mb-10 cursor-pointer\">\n <p (click)=\"routeToInitial()\"><mat-icon style=\"vertical-align: middle;\">arrow_back</mat-icon><span\n class=\"pl-10\">Back to Role Mapping Generation</span></p>\n </div>\n\n </div>\n <div class=\"dashboard-container\">\n\n <!-- FILTERS SECTION -->\n <form [formGroup]=\"filtersForm\" class=\"filters-form\">\n\n <mat-card class=\"filters-card\">\n <div class=\"filters-header\">\n <mat-icon>filter_list</mat-icon>\n <span>Filters</span>\n </div>\n\n <div class=\"filters-row\">\n <div>\n <label>Centre / State </label>\n <!-- Centre / State -->\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px; border: 1px solid #ccc;width: 100%;\">\n\n <mat-select formControlName=\"centreState\" [disabled]=\"!isSuperAdmin\"\n (selectionChange)=\"onMinistryTypeChange($event)\">\n <mat-option value=\"\">Select Center/State</mat-option>\n <mat-option value=\"ministry\">Center</mat-option>\n <mat-option value=\"state\">State</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div>\n <label>{{selectedMinistryType === 'ministry' ? 'Ministry':'State'}} </label>\n <!-- Centre / State -->\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px; border: 1px solid #ccc;width: 100%;\">\n <mat-select panelClass=\"select-with-search\" [disabled]=\"!isSuperAdmin\" multiple\n [placeholder]=\"selectedMinistryType === 'ministry' ? 'Select Ministry/ Department':'Select State'\"\n (selectionChange)=\"onMinistryChange($event)\" formControlName=\"ministries\"\n style=\"border-radius: 25px; background: white; width:100%\"\n (openedChange)=\"onOpened($event)\">\n <div class=\"search-wrapper\" *ngIf=\"panelOpen\">\n <input type=\"text\" placeholder=\"Search...\" (input)=\"filterData($event)\"\n class=\"search-input\" (keydown.space)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n </div>\n <!-- [selected]=\"selectedMinistryId === item?.identifier\" -->\n <mat-option [value]=\"item?.identifier\" *ngFor=\"let item of filteredList\"\n >{{item?.orgName}}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div>\n <label>Department</label>\n <!-- Centre / State -->\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;border: 1px solid #ccc;\">\n <mat-select panelClass=\"select-with-search\" placeholder=\"Select Department\"\n [disabled]=\"!isSuperAdmin\" multiple formControlName=\"departments\"\n style=\"border-radius: 25px; background: white;\" (selectionChange)=\"onDepartmentChange()\"\n (openedChange)=\"onOpenedDepartment($event)\">\n <div class=\"search-wrapper\" *ngIf=\"departmentPanelOpen\">\n <input type=\"text\" placeholder=\"Search...\" (input)=\"filterDepartmentData($event)\"\n class=\"search-input\" (keydown.space)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n </div>\n <mat-option [value]=\"item?.identifier\"\n *ngFor=\"let item of filteredDepartmentList\">{{item?.orgName}}</mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n\n <!-- Date Range -->\n <div>\n <label>Date Range </label>\n <mat-form-field appearance=\"outline\">\n\n <input matInput ngxDaterangepickerMd formControlName=\"dateRange\" style=\"margin:10px\"\n placeholder=\"Select date range\" [autoApply]=\"true\" [linkedCalendars]=\"true\"\n [locale]=\"{ format: 'DD MMM YYYY' }\" />\n </mat-form-field>\n </div>\n\n\n </div>\n </mat-card>\n </form>\n\n <!-- OVERVIEW METRICS -->\n <h2 class=\"section-title\">\n <mat-icon>dashboard</mat-icon>\n Overview Metrics\n </h2>\n\n <div class=\"card-grid\">\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">States/Ministries which generated Role Mapping</p>\n <h2>{{this.dashboardData?.ministry_count}}</h2>\n <!-- <p class=\"card-subtitle\">At least 1 designation/role mapping</p> -->\n </div>\n <mat-icon class=\"icon primary\">public</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Departments which generated Role Mapping</p>\n <h2>{{this.dashboardData?.department_count}}</h2>\n <!-- <p class=\"card-subtitle\">At least 1 designation/role mapping</p> -->\n </div>\n <mat-icon class=\"icon teal\">apartment</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Total Capacity Building Plans Created</p>\n <h2>{{this.dashboardData?.total_cbp_plan_count}}</h2>\n </div>\n <mat-icon class=\"icon green\">description</mat-icon>\n </div>\n </mat-card>\n\n </div>\n\n <!-- COMPETENCIES -->\n <h2 class=\"section-title\">\n <mat-icon>psychology</mat-icon>\n Competencies Recommended\n </h2>\n\n <div class=\"card-grid\">\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Behavioral Competencies</p>\n <h2>{{this.dashboardData?.behavioral_competencies_count}}</h2>\n </div>\n <mat-icon class=\"icon purple\">psychology</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Functional Competencies</p>\n <h2>{{this.dashboardData?.functional_competencies_count}}</h2>\n </div>\n <mat-icon class=\"icon teal\">settings</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Domain Competencies</p>\n <h2>{{this.dashboardData?.domain_competencies_count}}</h2>\n </div>\n <mat-icon class=\"icon orange\">tune</mat-icon>\n </div>\n </mat-card>\n\n </div>\n\n <!-- DOCUMENTS -->\n <h2 class=\"section-title\">\n <mat-icon>menu_book</mat-icon>\n Documents & Course Recommendations\n </h2>\n\n <div class=\"card-grid\">\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Total Documents Uploaded</p>\n <h2>{{this.dashboardData?.total_documents}}</h2>\n <!-- <p class=\"card-subtitle\">Min 1, Max 10 per role mapping</p> -->\n </div>\n <mat-icon class=\"icon amber\">upload_file</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Role Mappings with Course Recommendations</p>\n <h2>{{this.dashboardData?.role_mappings_with_recommendations}}</h2>\n <!-- <p class=\"card-subtitle\">8500 of 50,000 role mappings</p> -->\n </div>\n <mat-icon class=\"icon green\">menu_book</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Course Recommendations Saved</p>\n <h2>{{this.dashboardData?.saved_recommended_courses_count}}</h2>\n <!-- <p class=\"card-subtitle\">{{this.dashboardData?.saved_recommended_courses_count}} of 8500\n recommendations</p> -->\n </div>\n <mat-icon class=\"icon teal\">save</mat-icon>\n </div>\n </mat-card>\n\n </div>\n\n <!-- GAP ANALYSIS -->\n <div class=\"gap-section\">\n <h2 class=\"section-title warning\">\n <mat-icon>warning</mat-icon>\n Gap Analysis\n </h2>\n\n <div class=\"card-grid-alone\">\n\n <mat-card class=\"metric-card warning-bg\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Competencies Without Courses</p>\n <h2>{{this.dashboardData?.competencies_without_courses}}</h2>\n <p class=\"card-subtitle\">Unique competencies with no identified courses</p>\n </div>\n <mat-icon class=\"icon red\">cancel</mat-icon>\n </div>\n </mat-card>\n\n <!-- <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Manually Added Courses</p>\n <h2>-</h2>\n <p class=\"card-subtitle\">Competencies with user-added courses</p>\n </div>\n <mat-icon class=\"icon green\">add_circle</mat-icon>\n </div>\n </mat-card> -->\n\n </div>\n\n <div class=\"card-grid mt-2\">\n\n <mat-card class=\"metric-card warning-bg\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Behavioral Competencies Without Courses</p>\n <h2>{{this.dashboardData?.behavioral_without_courses}}</h2>\n </div>\n <mat-icon class=\"icon red\">cancel</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Functional Competencies Without Courses</p>\n <h2>{{this.dashboardData?.functional_without_courses}}</h2>\n </div>\n <mat-icon class=\"icon red\">cancel</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Domain Competencies Without Courses</p>\n <h2>{{this.dashboardData?.domain_without_courses}}</h2>\n </div>\n <mat-icon class=\"icon red\">cancel</mat-icon>\n </div>\n </mat-card>\n\n </div>\n </div>\n\n <!-- OVERVIEW METRICS -->\n <h2 class=\"section-title\">\n <mat-icon>dashboard</mat-icon>\n Users and Role Mapping Metrics\n </h2>\n\n <div class=\"card-grid\">\n\n <mat-card class=\"metric-card\" *ngIf=\"!isSuperAdmin\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Unique Users (Credentials)</p>\n <h2>{{this.dashboardData?.total_users}}</h2>\n </div>\n <mat-icon class=\"icon primary\">public</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\" *ngIf=\"!isSuperAdmin\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Unique Users with Role Mappings</p>\n <h2>{{this.dashboardData?.users_with_role_mappings}}</h2>\n <!-- <p class=\"card-subtitle\">Generated atleast 1 role mapping</p> -->\n </div>\n <mat-icon class=\"icon teal\">apartment</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Total Designation/Role Mappings Generated</p>\n <h2>{{this.dashboardData?.total_role_mappings}}</h2>\n </div>\n <mat-icon class=\"icon green\">description</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Unique Role Mappings</p>\n <h2>{{this.dashboardData?.unique_role_mappings}}</h2>\n <!-- <p class=\"card-subtitle\">10,000 unique of 50,000 total</p> -->\n </div>\n <mat-icon class=\"icon teal\">apartment</mat-icon>\n </div>\n </mat-card>\n\n </div>\n </div>\n</div>", styles: [".dashboard-wrapper{background:transparent;min-height:100vh;padding:24px 10px;margin:0 30px 0 60px}.dashboard-container{max-width:auto;margin:0 auto}.section-title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;color:#000;margin:20px 0}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.card-grid-alone{display:grid;grid-template-columns:repeat(1,1fr);gap:32px}.metric-card{padding:24px;border-radius:12px;box-shadow:none;border:1px solid #e5e7eb}.card-content{display:flex;justify-content:space-between;align-items:center}.card-title{font-size:14px;color:#6b7280;margin-bottom:6px}.metric-card h2{font-size:28px;font-weight:700;color:#000;margin:0}.card-subtitle{font-size:12px;color:#9ca3af;margin-top:6px}.icon{font-size:28px;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center}.primary{color:#2563eb}.teal{color:#059669}.green{color:#16a34a}.purple{color:#9333ea}.orange{color:#f97316}.amber{color:#f59e0b}.red,.section-title.warning{color:#dc2626}.warning-card{background:#fdeaea;border:1px solid #f5c2c7}.filters-card{padding:20px 24px;border-radius:12px;border:1px solid #e5e7eb;box-shadow:none}.filters-header{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:16px}.filters-row{display:flex;gap:24px;flex-wrap:wrap}.filters-row mat-form-field{flex:1;min-width:220px}: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}.dashboard-container .mat-card{background-color:#fff}.gap-title{color:#b91c1c}.gap-section{background-color:#d926621a;padding:10px;border-radius:12px;border:1px solid #f5c2c7;margin:16px 0}.gap-card{background-color:#d926621a;border:1px solid #f8d7da}.gap-card h2{color:#dc2626}@media (max-width: 1200px){.card-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.card-grid{grid-template-columns:1fr}}.mat-select-panel .search-wrapper{width:100%!important;box-sizing:border-box;padding:8px;position:sticky;top:0;z-index:2;background:#fff}.search-input{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;outline:none;box-sizing:border-box}.mat-select-panel mat-option{padding-top:10px}::ng-deep .mat-select-panel-wrap{overflow:visible!important;padding:0;margin-top:42px}::ng-deep .mat-select-panel{border:1px solid #ccc!important;box-sizing:border-box;max-height:250px}::ng-deep .select-with-search.mat-select-panel{padding-top:0;overflow:auto}::ng-deep .select-with-search .search-wrapper{position:sticky;top:0;z-index:10;background:#fff;padding:8px;border-bottom:1px solid #e0e0e0}::ng-deep .select-with-search .search-input{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;outline:none;box-sizing:border-box}::ng-deep .select-with-search mat-option:first-of-type{margin-top:4px}::ng-deep .md-drppicker.ltr{min-width:500px!important}.sub-heading p{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.mb-10{margin-bottom:10px}.cursor-pointer{cursor:pointer}\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: i6.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i8.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i8$1.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: "directive", type: i12$1.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] }); }
|
|
6991
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DashboardComponent, selector: "app-dashboard", ngImport: i0, template: "<div class=\"dashboard-wrapper\">\n <div class=\"header\">\n <div class=\"sub-heading mt-10 mb-10 cursor-pointer\">\n <p (click)=\"routeToInitial()\"><mat-icon style=\"vertical-align: middle;\">arrow_back</mat-icon><span\n class=\"pl-10\">Back to Role Mapping Generation</span></p>\n </div>\n\n </div>\n <div class=\"dashboard-container\">\n\n <!-- FILTERS SECTION -->\n <form [formGroup]=\"filtersForm\" class=\"filters-form\">\n\n <mat-card class=\"filters-card\">\n <div class=\"filters-header\">\n <mat-icon>filter_list</mat-icon>\n <span>Filters</span>\n </div>\n\n <div class=\"filters-row\">\n <div>\n <label>Centre / State </label>\n <!-- Centre / State -->\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px; border: 1px solid #ccc;width: 100%;\">\n\n <mat-select formControlName=\"centreState\" [disabled]=\"!isSuperAdmin\"\n (selectionChange)=\"onMinistryTypeChange($event)\">\n <mat-option value=\"\">Select Center/State</mat-option>\n <mat-option value=\"ministry\">Center</mat-option>\n <mat-option value=\"state\">State</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div>\n <label>{{selectedMinistryType === 'ministry' ? 'Ministry':'State'}} </label>\n <!-- Centre / State -->\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px; border: 1px solid #ccc;width: 100%;\">\n <mat-select panelClass=\"select-with-search\" [disabled]=\"!isSuperAdmin\" multiple\n [placeholder]=\"selectedMinistryType === 'ministry' ? 'Select Ministry/ Department':'Select State'\"\n (selectionChange)=\"onMinistryChange($event)\" formControlName=\"ministries\"\n style=\"border-radius: 25px; background: white; width:100%\"\n (openedChange)=\"onOpened($event)\">\n <div class=\"search-wrapper\" *ngIf=\"panelOpen\">\n <input type=\"text\" placeholder=\"Search...\" (input)=\"filterData($event)\"\n class=\"search-input\" (keydown.space)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n </div>\n <!-- [selected]=\"selectedMinistryId === item?.identifier\" -->\n <mat-option [value]=\"item?.identifier\" *ngFor=\"let item of filteredList\"\n >{{item?.orgName}}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div>\n <label>Department</label>\n <!-- Centre / State -->\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;border: 1px solid #ccc;\">\n <mat-select panelClass=\"select-with-search\" placeholder=\"Select Department\"\n [disabled]=\"!isSuperAdmin\" multiple formControlName=\"departments\"\n style=\"border-radius: 25px; background: white;\" (selectionChange)=\"onDepartmentChange()\"\n (openedChange)=\"onOpenedDepartment($event)\">\n <div class=\"search-wrapper\" *ngIf=\"departmentPanelOpen\">\n <input type=\"text\" placeholder=\"Search...\" (input)=\"filterDepartmentData($event)\"\n class=\"search-input\" (keydown.space)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n </div>\n <mat-option [value]=\"item?.identifier\"\n *ngFor=\"let item of filteredDepartmentList\">{{item?.orgName}}</mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n\n <!-- Date Range -->\n <div>\n <label>Date Range </label>\n <mat-form-field appearance=\"outline\">\n\n <input matInput ngxDaterangepickerMd formControlName=\"dateRange\" style=\"margin:10px\"\n placeholder=\"Select date range\" [autoApply]=\"true\" [linkedCalendars]=\"true\"\n [locale]=\"{ format: 'DD MMM YYYY' }\" />\n </mat-form-field>\n </div>\n\n\n </div>\n </mat-card>\n </form>\n\n <!-- OVERVIEW METRICS -->\n <h2 class=\"section-title\">\n <mat-icon>dashboard</mat-icon>\n Overview Metrics\n </h2>\n\n <div class=\"card-grid\">\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">States/Ministries which generated Role Mapping</p>\n <h2>{{this.dashboardData?.ministry_count}}</h2>\n <!-- <p class=\"card-subtitle\">At least 1 designation/role mapping</p> -->\n </div>\n <mat-icon class=\"icon primary\">public</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Departments which generated Role Mapping</p>\n <h2>{{this.dashboardData?.department_count}}</h2>\n <!-- <p class=\"card-subtitle\">At least 1 designation/role mapping</p> -->\n </div>\n <mat-icon class=\"icon teal\">apartment</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Total Capacity Building Plans Created</p>\n <h2>{{this.dashboardData?.total_cbp_plan_count}}</h2>\n </div>\n <mat-icon class=\"icon green\">description</mat-icon>\n </div>\n </mat-card>\n\n </div>\n\n <!-- COMPETENCIES -->\n <h2 class=\"section-title\">\n <mat-icon>psychology</mat-icon>\n Competencies Recommended\n </h2>\n\n <div class=\"card-grid\">\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Behavioral Competencies</p>\n <h2>{{this.dashboardData?.behavioral_competencies_count}}</h2>\n </div>\n <mat-icon class=\"icon purple\">psychology</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Functional Competencies</p>\n <h2>{{this.dashboardData?.functional_competencies_count}}</h2>\n </div>\n <mat-icon class=\"icon teal\">settings</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Domain Competencies</p>\n <h2>{{this.dashboardData?.domain_competencies_count}}</h2>\n </div>\n <mat-icon class=\"icon orange\">tune</mat-icon>\n </div>\n </mat-card>\n\n </div>\n\n <!-- DOCUMENTS -->\n <h2 class=\"section-title\">\n <mat-icon>menu_book</mat-icon>\n Documents & Course Recommendations\n </h2>\n\n <div class=\"card-grid\">\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Total Documents Uploaded</p>\n <h2>{{this.dashboardData?.total_documents}}</h2>\n <!-- <p class=\"card-subtitle\">Min 1, Max 10 per role mapping</p> -->\n </div>\n <mat-icon class=\"icon amber\">upload_file</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Role Mappings with Course Recommendations</p>\n <h2>{{this.dashboardData?.role_mappings_with_recommendations}}</h2>\n <!-- <p class=\"card-subtitle\">8500 of 50,000 role mappings</p> -->\n </div>\n <mat-icon class=\"icon green\">menu_book</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Course Recommendations Saved</p>\n <h2>{{this.dashboardData?.saved_recommended_courses_count}}</h2>\n <!-- <p class=\"card-subtitle\">{{this.dashboardData?.saved_recommended_courses_count}} of 8500\n recommendations</p> -->\n </div>\n <mat-icon class=\"icon teal\">save</mat-icon>\n </div>\n </mat-card>\n\n </div>\n\n <!-- GAP ANALYSIS -->\n <div class=\"gap-section\">\n <h2 class=\"section-title warning\">\n <mat-icon>warning</mat-icon>\n Gap Analysis\n </h2>\n\n <div class=\"card-grid-alone\">\n\n <mat-card class=\"metric-card warning-bg\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Competencies Without Courses</p>\n <h2>{{this.dashboardData?.competencies_without_courses}}</h2>\n <p class=\"card-subtitle\">Unique competencies with no identified courses</p>\n </div>\n <mat-icon class=\"icon red\">cancel</mat-icon>\n </div>\n </mat-card>\n\n <!-- <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Manually Added Courses</p>\n <h2>-</h2>\n <p class=\"card-subtitle\">Competencies with user-added courses</p>\n </div>\n <mat-icon class=\"icon green\">add_circle</mat-icon>\n </div>\n </mat-card> -->\n\n </div>\n\n <div class=\"card-grid mt-2\">\n\n <mat-card class=\"metric-card warning-bg\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Behavioral Competencies Without Courses</p>\n <h2>{{this.dashboardData?.behavioral_without_courses}}</h2>\n </div>\n <mat-icon class=\"icon red\">cancel</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Functional Competencies Without Courses</p>\n <h2>{{this.dashboardData?.functional_without_courses}}</h2>\n </div>\n <mat-icon class=\"icon red\">cancel</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Domain Competencies Without Courses</p>\n <h2>{{this.dashboardData?.domain_without_courses}}</h2>\n </div>\n <mat-icon class=\"icon red\">cancel</mat-icon>\n </div>\n </mat-card>\n\n </div>\n </div>\n\n <!-- OVERVIEW METRICS -->\n <h2 class=\"section-title\">\n <mat-icon>dashboard</mat-icon>\n Users and Role Mapping Metrics\n </h2>\n\n <div class=\"card-grid\">\n\n <mat-card class=\"metric-card\" *ngIf=\"!isSuperAdmin\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Unique Users (Credentials)</p>\n <h2>{{this.dashboardData?.total_users}}</h2>\n </div>\n <mat-icon class=\"icon primary\">public</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\" *ngIf=\"!isSuperAdmin\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Unique Users with Role Mappings</p>\n <h2>{{this.dashboardData?.users_with_role_mappings}}</h2>\n <!-- <p class=\"card-subtitle\">Generated atleast 1 role mapping</p> -->\n </div>\n <mat-icon class=\"icon teal\">apartment</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Total Designation/Role Mappings Generated</p>\n <h2>{{this.dashboardData?.total_role_mappings}}</h2>\n </div>\n <mat-icon class=\"icon green\">description</mat-icon>\n </div>\n </mat-card>\n\n <mat-card class=\"metric-card\">\n <div class=\"card-content\">\n <div>\n <p class=\"card-title\">Unique Role Mappings</p>\n <h2>{{this.dashboardData?.unique_role_mappings}}</h2>\n <!-- <p class=\"card-subtitle\">10,000 unique of 50,000 total</p> -->\n </div>\n <mat-icon class=\"icon teal\">apartment</mat-icon>\n </div>\n </mat-card>\n\n </div>\n </div>\n</div>", styles: [".dashboard-wrapper{background:transparent;min-height:100vh;padding:24px 10px;margin:0 30px 0 60px}.dashboard-container{max-width:auto;margin:0 auto}.section-title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;color:#000;margin:20px 0}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.card-grid-alone{display:grid;grid-template-columns:repeat(1,1fr);gap:32px}.metric-card{padding:24px;border-radius:12px;box-shadow:none;border:1px solid #e5e7eb}.card-content{display:flex;justify-content:space-between;align-items:center}.card-title{font-size:14px;color:#6b7280;margin-bottom:6px}.metric-card h2{font-size:28px;font-weight:700;color:#000;margin:0}.card-subtitle{font-size:12px;color:#9ca3af;margin-top:6px}.icon{font-size:28px;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center}.primary{color:#2563eb}.teal{color:#059669}.green{color:#16a34a}.purple{color:#9333ea}.orange{color:#f97316}.amber{color:#f59e0b}.red,.section-title.warning{color:#dc2626}.warning-card{background:#fdeaea;border:1px solid #f5c2c7}.filters-card{padding:20px 24px;border-radius:12px;border:1px solid #e5e7eb;box-shadow:none}.filters-header{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:16px}.filters-row{display:flex;gap:24px;flex-wrap:wrap}.filters-row mat-form-field{flex:1;min-width:220px}: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}.dashboard-container .mat-card{background-color:#fff}.gap-title{color:#b91c1c}.gap-section{background-color:#d926621a;padding:10px;border-radius:12px;border:1px solid #f5c2c7;margin:16px 0}.gap-card{background-color:#d926621a;border:1px solid #f8d7da}.gap-card h2{color:#dc2626}@media (max-width: 1200px){.card-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.card-grid{grid-template-columns:1fr}}.mat-select-panel .search-wrapper{width:100%!important;box-sizing:border-box;padding:8px;position:sticky;top:0;z-index:2;background:#fff}.search-input{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;outline:none;box-sizing:border-box}.mat-select-panel mat-option{padding-top:10px}::ng-deep .mat-select-panel-wrap{overflow:visible!important;padding:0;margin-top:42px}::ng-deep .mat-select-panel{border:1px solid #ccc!important;box-sizing:border-box;max-height:250px}::ng-deep .select-with-search.mat-select-panel{padding-top:0;overflow:auto}::ng-deep .select-with-search .search-wrapper{position:sticky;top:0;z-index:10;background:#fff;padding:8px;border-bottom:1px solid #e0e0e0}::ng-deep .select-with-search .search-input{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;outline:none;box-sizing:border-box}::ng-deep .select-with-search mat-option:first-of-type{margin-top:4px}::ng-deep .md-drppicker.ltr{min-width:500px!important}.sub-heading p{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.mb-10{margin-bottom:10px}.cursor-pointer{cursor:pointer}\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: i6.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i7.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i8.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: "directive", type: i12$2.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] }); }
|
|
7013
6992
|
}
|
|
7014
6993
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardComponent, decorators: [{
|
|
7015
6994
|
type: Component,
|
|
@@ -7229,7 +7208,7 @@ class UpdateDesignationHierarchyComponent {
|
|
|
7229
7208
|
return item.id;
|
|
7230
7209
|
}
|
|
7231
7210
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UpdateDesignationHierarchyComponent, deps: [{ token: i1.HttpClient }, { token: SharedService }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UpdateDesignationHierarchyComponent, selector: "app-update-designation-hierarchy", outputs: { closeDrawer: "closeDrawer", submitted: "submitted" }, ngImport: i0, template: "<div class=\"overlay\" *ngIf=\"isOpen\" (click)=\"cancel()\"></div>\n\n<div class=\"drawer\" [class.open]=\"isOpen\">\n\n <!-- HEADER -->\n <div class=\"drawer-header\">\n <h4>Update Designation Hierarchy</h4>\n <button class=\"close-btn\" (click)=\"cancel()\">\u2715</button>\n </div>\n\n <!-- BODY -->\n <div class=\"drawer-body\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n\n <div class=\"designation-item\" *ngFor=\"let item of designations; trackBy: trackById; let i = index\" cdkDrag>\n <div class=\"drag-handle\" cdkDragHandle>\n <mat-icon>drag_indicator</mat-icon>\n </div>\n\n <div class=\"designation-name\">{{ item.name }}</div>\n\n <!-- Custom Select -->\n <div class=\"custom-select\">\n <div class=\"selected-value\" (click)=\"toggleDropdown(item, $event)\">\n {{ item.sort_order }}\n <span class=\"chevron\" [class.open]=\"openDropdownId === item.id\"><mat-icon>arrow_drop_down</mat-icon></span>\n </div>\n\n <div class=\"dropdown\" [id]=\"'dropdown-' + item.id\" *ngIf=\"openDropdownId === item.id\"\n (click)=\"$event.stopPropagation()\">\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"item.searchFilter\"\n (ngModelChange)=\"filterNumbers(item)\" class=\"search-box\">\n\n <div class=\"option\" *ngFor=\"let num of item.filteredNumbers\"\n (click)=\"selectNumber(item, num, $event)\">\n {{ num }}\n </div>\n </div>\n\n </div>\n\n </div>\n\n\n\n\n\n </div>\n\n <!-- FOOTER -->\n <div class=\"drawer-footer\">\n <button class=\"btn cancel\" (click)=\"cancel()\">Cancel</button>\n <button class=\"btn submit\" (click)=\"submit()\">Submit</button>\n </div>\n\n</div>\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".overlay{position:fixed;inset:0;background:#0006;z-index:999}.drawer{position:fixed;top:0;right:-420px;width:600px;height:100vh;background:#fff;box-shadow:-2px 0 12px #00000026;transition:right .3s ease;z-index:1000;display:flex;flex-direction:column}.drawer.open{right:0}.drawer-header{position:sticky;top:0;padding:16px;background:#fff;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;z-index:10}.close-btn{border:none;background:transparent;font-size:18px;cursor:pointer}.drawer-body{flex:1;overflow-y:auto;padding:16px}.designation-item{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:10px;border:1px solid #eee;border-radius:8px;background:#fafafa}.drag-handle{cursor:move}.designation-name{flex:1}.drawer-footer{position:sticky;bottom:0;background:#fff;padding:16px;border-top:1px solid #eee;display:flex;justify-content:space-between}.btn{padding:8px 18px;border-radius:6px;border:none;cursor:pointer}.cancel{background:#f1f1f1}.submit{background:#1b4ca1;color:#fff}.designation-item select{padding:6px 10px;border:1px solid #ccc;border-radius:8px;background-color:#fff;font-size:14px;outline:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}.designation-item select:focus{border-color:#1b4ca1;box-shadow:0 0 3px #007bff80}.custom-select{position:relative;width:120px;border:1px solid #ccc;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none}.selected-value{padding:6px 10px;display:flex;justify-content:space-between;align-items:center}.chevron{transition:transform .2s ease}.chevron.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;width:100%;max-height:180px;overflow-y:auto;border:1px solid #ccc;background:#fff;z-index:1000;box-shadow:0 2px 6px #0003}.dropdown .search-box{width:90%;margin:6px auto;padding:4px 6px;display:block;border:1px solid #aaa;border-radius:4px}.option{padding:6px 10px;cursor:pointer}.option:hover{background:#f1f1f1}\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.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
|
|
7211
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UpdateDesignationHierarchyComponent, selector: "app-update-designation-hierarchy", outputs: { closeDrawer: "closeDrawer", submitted: "submitted" }, ngImport: i0, template: "<div class=\"overlay\" *ngIf=\"isOpen\" (click)=\"cancel()\"></div>\n\n<div class=\"drawer\" [class.open]=\"isOpen\">\n\n <!-- HEADER -->\n <div class=\"drawer-header\">\n <h4>Update Designation Hierarchy</h4>\n <button class=\"close-btn\" (click)=\"cancel()\">\u2715</button>\n </div>\n\n <!-- BODY -->\n <div class=\"drawer-body\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n\n <div class=\"designation-item\" *ngFor=\"let item of designations; trackBy: trackById; let i = index\" cdkDrag>\n <div class=\"drag-handle\" cdkDragHandle>\n <mat-icon>drag_indicator</mat-icon>\n </div>\n\n <div class=\"designation-name\">{{ item.name }}</div>\n\n <!-- Custom Select -->\n <div class=\"custom-select\">\n <div class=\"selected-value\" (click)=\"toggleDropdown(item, $event)\">\n {{ item.sort_order }}\n <span class=\"chevron\" [class.open]=\"openDropdownId === item.id\"><mat-icon>arrow_drop_down</mat-icon></span>\n </div>\n\n <div class=\"dropdown\" [id]=\"'dropdown-' + item.id\" *ngIf=\"openDropdownId === item.id\"\n (click)=\"$event.stopPropagation()\">\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"item.searchFilter\"\n (ngModelChange)=\"filterNumbers(item)\" class=\"search-box\">\n\n <div class=\"option\" *ngFor=\"let num of item.filteredNumbers\"\n (click)=\"selectNumber(item, num, $event)\">\n {{ num }}\n </div>\n </div>\n\n </div>\n\n </div>\n\n\n\n\n\n </div>\n\n <!-- FOOTER -->\n <div class=\"drawer-footer\">\n <button class=\"btn cancel\" (click)=\"cancel()\">Cancel</button>\n <button class=\"btn submit\" (click)=\"submit()\">Submit</button>\n </div>\n\n</div>\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".overlay{position:fixed;inset:0;background:#0006;z-index:999}.drawer{position:fixed;top:0;right:-420px;width:600px;height:100vh;background:#fff;box-shadow:-2px 0 12px #00000026;transition:right .3s ease;z-index:1000;display:flex;flex-direction:column}.drawer.open{right:0}.drawer-header{position:sticky;top:0;padding:16px;background:#fff;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;z-index:10}.close-btn{border:none;background:transparent;font-size:18px;cursor:pointer}.drawer-body{flex:1;overflow-y:auto;padding:16px}.designation-item{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:10px;border:1px solid #eee;border-radius:8px;background:#fafafa}.drag-handle{cursor:move}.designation-name{flex:1}.drawer-footer{position:sticky;bottom:0;background:#fff;padding:16px;border-top:1px solid #eee;display:flex;justify-content:space-between}.btn{padding:8px 18px;border-radius:6px;border:none;cursor:pointer}.cancel{background:#f1f1f1}.submit{background:#1b4ca1;color:#fff}.designation-item select{padding:6px 10px;border:1px solid #ccc;border-radius:8px;background-color:#fff;font-size:14px;outline:none;cursor:pointer;transition:border-color .2s,box-shadow .2s}.designation-item select:focus{border-color:#1b4ca1;box-shadow:0 0 3px #007bff80}.custom-select{position:relative;width:120px;border:1px solid #ccc;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none}.selected-value{padding:6px 10px;display:flex;justify-content:space-between;align-items:center}.chevron{transition:transform .2s ease}.chevron.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;width:100%;max-height:180px;overflow-y:auto;border:1px solid #ccc;background:#fff;z-index:1000;box-shadow:0 2px 6px #0003}.dropdown .search-box{width:90%;margin:6px auto;padding:4px 6px;display:block;border:1px solid #aaa;border-radius:4px}.option{padding:6px 10px;cursor:pointer}.option:hover{background:#f1f1f1}\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.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7233
7212
|
}
|
|
7234
7213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UpdateDesignationHierarchyComponent, decorators: [{
|
|
7235
7214
|
type: Component,
|
|
@@ -7733,7 +7712,7 @@ class UploadDialogComponent {
|
|
|
7733
7712
|
});
|
|
7734
7713
|
}
|
|
7735
7714
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDialogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: SharedService }, { token: i3$1.MatSnackBar }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7736
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadDialogComponent, selector: "app-upload-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Upload Document</h2>\n\n<mat-dialog-content>\n\n <!-- <mat-form-field appearance=\"fill\" style=\"width: 100%; border: 1px solid #000;\">\n <input\n matInput\n [(ngModel)]=\"documentName\"\n placeholder=\"Document Name\"\n [disabled]=\"totalFileCount >= MAX_FILES\"\n >\n </mat-form-field> -->\n\n <!-- Upload Box -->\n <div\n class=\"file-upload-box\"\n style=\"margin-top: 30px;\"\n [class.disabled]=\"totalFileCount >= MAX_FILES\"\n (click)=\"totalFileCount < MAX_FILES && fileInput.click()\"\n >\n <input\n type=\"file\"\n #fileInput\n hidden\n multiple\n accept=\".pdf,.doc,.docx\"\n (change)=\"onFileSelected($event)\"\n >\n\n <p *ngIf=\"totalFileCount < MAX_FILES\">\n Click to select files\n </p>\n\n <p *ngIf=\"totalFileCount >= MAX_FILES\" class=\"error-text\">\n Maximum 10 documents allowed\n </p>\n\n <p><strong>Note:</strong> <small>PDF Files Only (Max:25 MB)</small></p>\n </div>\n\n <!-- Selected Files List -->\n <div *ngIf=\"selectedFiles.length > 0\" class=\"file-list\" style=\"margin-top:10px\">\n <p><strong>Selected Files</strong></p>\n\n <div class=\"file-item\" *ngFor=\"let file of selectedFiles; let i = index\">\n <span>{{ file.name }}</span>\n <span (click)=\"removeFile(i)\">\n <mat-icon class=\"file-cross-icon\" matTooltip=\"Remove\" matTooltipPosition=\"above\">close</mat-icon>\n </span>\n </div>\n </div>\n\n</mat-dialog-content>\n\n<div class=\"disclaimer-text\">\n <p>Disclaimer: Please do not upload any confidential documents.</p>\n</div>\n\n<mat-dialog-actions align=\"center\" style=\"margin: 20px 0;\">\n <button mat-button mat-dialog-close>Cancel</button>\n\n <button class=\"primary-btn cursor-pointer\"\n mat-raised-button\n color=\"primary\"\n (click)=\"upload()\"\n [disabled]=\"selectedFiles.length === 0\"\n >\n Upload\n </button>\n</mat-dialog-actions>\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>\n", styles: [".file-upload-box{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer;margin-top:10px}.primary-btn{background-color:#1b4ca1;color:#fff}.disclaimer-text p{font-size:16px;font-family:Lato;font-weight:400;margin-left:24px}.file-cross-icon{height:24px;width:24px;vertical-align:middle;background:#d3d3d3;margin-left:10px;border-radius:25px}:host .mat-mdc-dialog-content{max-height:100vh!important}.cursor-pointer{cursor:pointer}\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: i7$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: i8
|
|
7715
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadDialogComponent, selector: "app-upload-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Upload Document</h2>\n\n<mat-dialog-content>\n\n <!-- <mat-form-field appearance=\"fill\" style=\"width: 100%; border: 1px solid #000;\">\n <input\n matInput\n [(ngModel)]=\"documentName\"\n placeholder=\"Document Name\"\n [disabled]=\"totalFileCount >= MAX_FILES\"\n >\n </mat-form-field> -->\n\n <!-- Upload Box -->\n <div\n class=\"file-upload-box\"\n style=\"margin-top: 30px;\"\n [class.disabled]=\"totalFileCount >= MAX_FILES\"\n (click)=\"totalFileCount < MAX_FILES && fileInput.click()\"\n >\n <input\n type=\"file\"\n #fileInput\n hidden\n multiple\n accept=\".pdf,.doc,.docx\"\n (change)=\"onFileSelected($event)\"\n >\n\n <p *ngIf=\"totalFileCount < MAX_FILES\">\n Click to select files\n </p>\n\n <p *ngIf=\"totalFileCount >= MAX_FILES\" class=\"error-text\">\n Maximum 10 documents allowed\n </p>\n\n <p><strong>Note:</strong> <small>PDF Files Only (Max:25 MB)</small></p>\n </div>\n\n <!-- Selected Files List -->\n <div *ngIf=\"selectedFiles.length > 0\" class=\"file-list\" style=\"margin-top:10px\">\n <p><strong>Selected Files</strong></p>\n\n <div class=\"file-item\" *ngFor=\"let file of selectedFiles; let i = index\">\n <span>{{ file.name }}</span>\n <span (click)=\"removeFile(i)\">\n <mat-icon class=\"file-cross-icon\" matTooltip=\"Remove\" matTooltipPosition=\"above\">close</mat-icon>\n </span>\n </div>\n </div>\n\n</mat-dialog-content>\n\n<div class=\"disclaimer-text\">\n <p>Disclaimer: Please do not upload any confidential documents.</p>\n</div>\n\n<mat-dialog-actions align=\"center\" style=\"margin: 20px 0;\">\n <button mat-button mat-dialog-close>Cancel</button>\n\n <button class=\"primary-btn cursor-pointer\"\n mat-raised-button\n color=\"primary\"\n (click)=\"upload()\"\n [disabled]=\"selectedFiles.length === 0\"\n >\n Upload\n </button>\n</mat-dialog-actions>\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>\n", styles: [".file-upload-box{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer;margin-top:10px}.primary-btn{background-color:#1b4ca1;color:#fff}.disclaimer-text p{font-size:16px;font-family:Lato;font-weight:400;margin-left:24px}.file-cross-icon{height:24px;width:24px;vertical-align:middle;background:#d3d3d3;margin-left:10px;border-radius:25px}:host .mat-mdc-dialog-content{max-height:100vh!important}.cursor-pointer{cursor:pointer}\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: i7$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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
|
|
7737
7716
|
}
|
|
7738
7717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDialogComponent, decorators: [{
|
|
7739
7718
|
type: Component,
|
|
@@ -8079,7 +8058,7 @@ class UploadDocumentPageComponent {
|
|
|
8079
8058
|
clearSearch() {
|
|
8080
8059
|
}
|
|
8081
8060
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDocumentPageComponent, deps: [{ token: i1$1.MatDialog }, { token: SharedService }, { token: i3$1.MatSnackBar }, { token: i2.FormBuilder }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8082
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadDocumentPageComponent, selector: "app-upload-document-page", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"upload-container\">\n <div class=\"header\">\n <div class=\"sub-heading mt-10 mb-10 ml-10 cursor-pointer\">\n <p (click)=\"routeToInitial()\"><mat-icon style=\"vertical-align: middle;\">arrow_back</mat-icon><span\n class=\"pl-10\">Back to Role Mapping Generation</span></p>\n </div>\n\n </div>\n <mat-card class=\"mat-card-container mt-20\" [formGroup]=\"roleMappingForm\">\n <div class=\"header\">\n <div class=\"sub-heading\">\n <p>CBP Document Library</p>\n </div>\n \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>{{cbpPlanFinalObj?.ministry?.orgName}} <span\n *ngIf=\"cbpPlanFinalObj?.department_name\">\n / {{cbpPlanFinalObj?.department_name}}</span>\n </p>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"routeToInitial()\">\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 <button [ngClass]=\"!(cbpPlanFinalObj?.ministry?.orgName) ? 'btn-disable':'btn-active'\" mat-raised-button\n color=\"primary\" [disabled]=\"!(cbpPlanFinalObj?.ministry?.orgName)\" (click)=\"openUploadDialog()\">\n <mat-icon>upload</mat-icon> Upload Document\n </button>\n </div>\n </div>\n </div>\n </div>\n\n\n\n\n\n </mat-card>\n <mat-card class=\"\">\n <div class=\"sub-heading\">\n <p>Uploaded Documents (Max. 10 Documents are allowed)</p>\n </div>\n <div class=\"search flex margin-right-m\">\n <div class=\"mt-10\">\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=\"\" (input)=\"applyFilter()\"\n placeholder=\"Search Documents\" 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\n </div>\n\n\n\n </div>\n </div>\n <p class=\"mt-10\" style=\"font-family: 'Lato'; font-size: 18px; margin-left: 10px;\">\n {{filteredDocuments()?.length}} Documents</p>\n <table style=\"border-radius: 25px 25px 0 0;\n overflow: hidden;\n box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);\" mat-table [dataSource]=\"filteredDocuments()\" class=\"mat-elevation-z2 full-width-table mt-10\">\n\n <!-- Document Column -->\n <ng-container matColumnDef=\"name\">\n <th mat-header-cell *matHeaderCellDef> Document </th>\n <td mat-cell *matCellDef=\"let doc\" style=\"width: 15%;\">\n <div>\n <div class=\"doc-title\" *ngIf=\"doc.document_name\">{{ doc.filename }}</div>\n <div class=\"doc-title\" *ngIf=\"!doc.document_name\">{{ doc.filename }}</div>\n </div>\n </td>\n </ng-container>\n\n <!-- Summary Status Column -->\n <ng-container matColumnDef=\"summary_status\">\n <th mat-header-cell *matHeaderCellDef> Summary Status </th>\n <td mat-cell *matCellDef=\"let doc\" style=\"width: 15%;\"> \n <span *ngIf=\"doc.summary_status === 'COMPLETED'\" class=\"success\"> {{ doc.summary_status | titlecase }} </span>\n <span *ngIf=\"doc.summary_status !== 'COMPLETED'\" class=\"in-progress\"> {{ doc.summary_status | titlecase }} </span>\n </td>\n </ng-container>\n\n <!-- Summary Text Column -->\n <!-- <ng-container matColumnDef=\"summary_text\">\n <th mat-header-cell *matHeaderCellDef> Summary </th>\n <td mat-cell *matCellDef=\"let doc\">\n <div class=\"doc-summary-text\" style=\"width: 80%;\">\n <markdown [data]=\"doc?.summary_text | slice : 0 : 200\"></markdown>\n </div>\n </td>\n </ng-container> -->\n\n <!-- Date Column -->\n <ng-container matColumnDef=\"date\">\n <th mat-header-cell *matHeaderCellDef> Date </th>\n <td mat-cell *matCellDef=\"let doc\" style=\"width: 15%;\"> {{ doc.created_at | date: 'MMM d, y'}} </td>\n </ng-container>\n\n <!-- Actions Column -->\n <ng-container matColumnDef=\"actions\">\n <th mat-header-cell *matHeaderCellDef> Actions </th>\n <td mat-cell *matCellDef=\"let doc\" style=\"width: 15%;\">\n <button mat-icon-button color=\"primary\" (click)=\"downloadDoc(doc)\" matTooltip=\"Download\">\n <mat-icon>download</mat-icon>\n </button>\n\n <button style=\"margin-left: 15px;\" *ngIf=\"doc.summary_status === 'COMPLETED'\" mat-icon-button color=\"primary\"\n (click)=\"viewSummary(doc)\" matTooltip=\"View Summary\">\n <mat-icon>visibility</mat-icon>\n </button>\n\n <button style=\"margin-left: 15px;\" *ngIf=\"doc.summary_status === 'COMPLETED'\" mat-icon-button color=\"warn\"\n (click)=\"deleteDocument(doc)\" matTooltip=\"Delete\">\n <mat-icon>delete</mat-icon>\n </button>\n </td>\n </ng-container>\n\n <!-- Header and Row Definitions -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n\n <!-- No Data Message -->\n\n </table>\n <div *ngIf=\"filteredDocuments().length === 0\" class=\"no-data-message\">\n No record found\n </div>\n <!-- Pagination -->\n <div class=\"border-1\">\n <mat-paginator [pageSize]=\"5\" [pageSizeOptions]=\"[5, 10, 20]\"></mat-paginator>\n </div>\n\n\n </mat-card>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".upload-container{background:transparent;min-height:100vh;padding:24px 0;margin:0 30px 0 50px}.header{display:flex;flex-direction:row;justify-content:space-between}.primary-btn{background-color:#1b4ca1;color:#fff}.mat-card-container{background:transparent}.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:100%}.no-data-message{text-align:center;padding:16px;font-style:italic;color:#888}.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:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.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:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.sub-heading p{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.doc-title{font-weight:700}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;z-index:0;background:#fff;font-size:16px;box-shadow:0 2px 4px #0000001a;padding:5px 10px}:host ::ng-deep .mat-mdc-row{font-size:16px}:host ::ng-deep .mat-mdc-cell{padding:5px 10px}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;font-size:18px;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none;padding:5px 10px}: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}::ng-deep .doc-summary-text ::ng-deep markdown p{line-height:1.5rem;font-family:Lato;font-size:1rem!important;font-style:normal;font-weight:400}.mat-select-panel .search-wrapper{width:100%!important;box-sizing:border-box;padding:8px;position:sticky;top:0;z-index:2;background:#fff}.search-input{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;outline:none;box-sizing:border-box}::ng-deep .mat-select-panel-wrap{overflow:visible!important;padding:0;margin-top:42px}::ng-deep .mat-select-panel{border:1px solid #ccc!important;box-sizing:border-box;max-height:250px}.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;height:30px}.select-map-route-container{display:flex;flex-direction:row;width:100%}.select-map-flex{display:flex;flex-direction:row}.select-map-flex-container{display:flex;justify-content:space-between;width:100%}.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}.success{background:green;padding:4px 6px;color:#fff;border-radius:20px}.in-progress{background:orange;padding:4px 6px;color:#fff;border-radius:20px}.ml-10{margin-left:10px}.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mb-10{margin-bottom:10px}.mt-1{margin-top:1px}.border-1{border-top:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] }); }
|
|
8061
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UploadDocumentPageComponent, selector: "app-upload-document-page", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"upload-container\">\n <div class=\"header\">\n <div class=\"sub-heading mt-10 mb-10 ml-10 cursor-pointer\">\n <p (click)=\"routeToInitial()\"><mat-icon style=\"vertical-align: middle;\">arrow_back</mat-icon><span\n class=\"pl-10\">Back to Role Mapping Generation</span></p>\n </div>\n\n </div>\n <mat-card class=\"mat-card-container mt-20\" [formGroup]=\"roleMappingForm\">\n <div class=\"header\">\n <div class=\"sub-heading\">\n <p>CBP Document Library</p>\n </div>\n \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>{{cbpPlanFinalObj?.ministry?.orgName}} <span\n *ngIf=\"cbpPlanFinalObj?.department_name\">\n / {{cbpPlanFinalObj?.department_name}}</span>\n </p>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"routeToInitial()\">\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 <button [ngClass]=\"!(cbpPlanFinalObj?.ministry?.orgName) ? 'btn-disable':'btn-active'\" mat-raised-button\n color=\"primary\" [disabled]=\"!(cbpPlanFinalObj?.ministry?.orgName)\" (click)=\"openUploadDialog()\">\n <mat-icon>upload</mat-icon> Upload Document\n </button>\n </div>\n </div>\n </div>\n </div>\n\n\n\n\n\n </mat-card>\n <mat-card class=\"\">\n <div class=\"sub-heading\">\n <p>Uploaded Documents (Max. 10 Documents are allowed)</p>\n </div>\n <div class=\"search flex margin-right-m\">\n <div class=\"mt-10\">\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=\"\" (input)=\"applyFilter()\"\n placeholder=\"Search Documents\" 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\n </div>\n\n\n\n </div>\n </div>\n <p class=\"mt-10\" style=\"font-family: 'Lato'; font-size: 18px; margin-left: 10px;\">\n {{filteredDocuments()?.length}} Documents</p>\n <table style=\"border-radius: 25px 25px 0 0;\n overflow: hidden;\n box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);\" mat-table [dataSource]=\"filteredDocuments()\" class=\"mat-elevation-z2 full-width-table mt-10\">\n\n <!-- Document Column -->\n <ng-container matColumnDef=\"name\">\n <th mat-header-cell *matHeaderCellDef> Document </th>\n <td mat-cell *matCellDef=\"let doc\" style=\"width: 15%;\">\n <div>\n <div class=\"doc-title\" *ngIf=\"doc.document_name\">{{ doc.filename }}</div>\n <div class=\"doc-title\" *ngIf=\"!doc.document_name\">{{ doc.filename }}</div>\n </div>\n </td>\n </ng-container>\n\n <!-- Summary Status Column -->\n <ng-container matColumnDef=\"summary_status\">\n <th mat-header-cell *matHeaderCellDef> Summary Status </th>\n <td mat-cell *matCellDef=\"let doc\" style=\"width: 15%;\"> \n <span *ngIf=\"doc.summary_status === 'COMPLETED'\" class=\"success\"> {{ doc.summary_status | titlecase }} </span>\n <span *ngIf=\"doc.summary_status !== 'COMPLETED'\" class=\"in-progress\"> {{ doc.summary_status | titlecase }} </span>\n </td>\n </ng-container>\n\n <!-- Summary Text Column -->\n <!-- <ng-container matColumnDef=\"summary_text\">\n <th mat-header-cell *matHeaderCellDef> Summary </th>\n <td mat-cell *matCellDef=\"let doc\">\n <div class=\"doc-summary-text\" style=\"width: 80%;\">\n <markdown [data]=\"doc?.summary_text | slice : 0 : 200\"></markdown>\n </div>\n </td>\n </ng-container> -->\n\n <!-- Date Column -->\n <ng-container matColumnDef=\"date\">\n <th mat-header-cell *matHeaderCellDef> Date </th>\n <td mat-cell *matCellDef=\"let doc\" style=\"width: 15%;\"> {{ doc.created_at | date: 'MMM d, y'}} </td>\n </ng-container>\n\n <!-- Actions Column -->\n <ng-container matColumnDef=\"actions\">\n <th mat-header-cell *matHeaderCellDef> Actions </th>\n <td mat-cell *matCellDef=\"let doc\" style=\"width: 15%;\">\n <button mat-icon-button color=\"primary\" (click)=\"downloadDoc(doc)\" matTooltip=\"Download\">\n <mat-icon>download</mat-icon>\n </button>\n\n <button style=\"margin-left: 15px;\" *ngIf=\"doc.summary_status === 'COMPLETED'\" mat-icon-button color=\"primary\"\n (click)=\"viewSummary(doc)\" matTooltip=\"View Summary\">\n <mat-icon>visibility</mat-icon>\n </button>\n\n <button style=\"margin-left: 15px;\" *ngIf=\"doc.summary_status === 'COMPLETED'\" mat-icon-button color=\"warn\"\n (click)=\"deleteDocument(doc)\" matTooltip=\"Delete\">\n <mat-icon>delete</mat-icon>\n </button>\n </td>\n </ng-container>\n\n <!-- Header and Row Definitions -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n\n <!-- No Data Message -->\n\n </table>\n <div *ngIf=\"filteredDocuments().length === 0\" class=\"no-data-message\">\n No record found\n </div>\n <!-- Pagination -->\n <div class=\"border-1\">\n <mat-paginator [pageSize]=\"5\" [pageSizeOptions]=\"[5, 10, 20]\"></mat-paginator>\n </div>\n\n\n </mat-card>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".upload-container{background:transparent;min-height:100vh;padding:24px 0;margin:0 30px 0 50px}.header{display:flex;flex-direction:row;justify-content:space-between}.primary-btn{background-color:#1b4ca1;color:#fff}.mat-card-container{background:transparent}.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:100%}.no-data-message{text-align:center;padding:16px;font-style:italic;color:#888}.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:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.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:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.sub-heading p{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.cursor-pointer{cursor:pointer}.doc-title{font-weight:700}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;z-index:0;background:#fff;font-size:16px;box-shadow:0 2px 4px #0000001a;padding:5px 10px}:host ::ng-deep .mat-mdc-row{font-size:16px}:host ::ng-deep .mat-mdc-cell{padding:5px 10px}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;font-size:18px;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none;padding:5px 10px}: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}::ng-deep .doc-summary-text ::ng-deep markdown p{line-height:1.5rem;font-family:Lato;font-size:1rem!important;font-style:normal;font-weight:400}.mat-select-panel .search-wrapper{width:100%!important;box-sizing:border-box;padding:8px;position:sticky;top:0;z-index:2;background:#fff}.search-input{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;outline:none;box-sizing:border-box}::ng-deep .mat-select-panel-wrap{overflow:visible!important;padding:0;margin-top:42px}::ng-deep .mat-select-panel{border:1px solid #ccc!important;box-sizing:border-box;max-height:250px}.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;height:30px}.select-map-route-container{display:flex;flex-direction:row;width:100%}.select-map-flex{display:flex;flex-direction:row}.select-map-flex-container{display:flex;justify-content:space-between;width:100%}.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}.success{background:green;padding:4px 6px;color:#fff;border-radius:20px}.in-progress{background:orange;padding:4px 6px;color:#fff;border-radius:20px}.ml-10{margin-left:10px}.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mb-10{margin-bottom:10px}.mt-1{margin-top:1px}.border-1{border-top:1px solid #ccc}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] }); }
|
|
8083
8062
|
}
|
|
8084
8063
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UploadDocumentPageComponent, decorators: [{
|
|
8085
8064
|
type: Component,
|
|
@@ -11184,7 +11163,7 @@ class RoleMappingGenerationComponent {
|
|
|
11184
11163
|
this.router.navigate(['/ai/upload-documents']);
|
|
11185
11164
|
}
|
|
11186
11165
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoleMappingGenerationComponent, deps: [{ token: EventService }, { token: SharedService }, { token: i2.FormBuilder }, { token: i3$1.MatSnackBar }, { token: i1$1.MatDialog }, { token: RoleMappingService }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11187
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RoleMappingGenerationComponent, selector: "app-role-mapping-generation", inputs: { loginStatusFlag: "loginStatusFlag" }, outputs: { successRoleMapping: "successRoleMapping", alreadyAvailableRoleMapping: "alreadyAvailableRoleMapping", loginSuccess: "loginSuccess" }, viewQueries: [{ propertyName: "pdfContent", first: true, predicate: ["pdfContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\">\n <!-- <input class=\"btn-active\" type=\"button\" value=\"Download as PDF\" (click)=\"downloadPDF()\" /> -->\n <div class=\"logo-container\" *ngIf=\"login\">\n <div>\n <span class=\"ai-loader-icon-medium\"><img src=\"assets/icons/ai-loader.gif\"></span>\n </div>\n <div>\n <h2 class=\"highlight-ai\">\n <span>iGOT AI Driven CBP</span>\n </h2>\n </div>\n <!-- <div class=\"sub-heading\">\n <p>Build Your Capacity With Customized Role Mapping</p>\n </div> -->\n </div>\n <mat-card *ngIf=\"login\" class=\"mt-2\" [formGroup]=\"roleMappingForm\">\n <div class=\"depatment-container\">\n<!-- <div class=\"section-header\">-->\n<!-- <div class=\"sub-heading\">-->\n<!-- <p>Choose Your Department</p>-->\n<!-- </div>-->\n<!-- </div>-->\n\n <div class=\"radio-group mt-4\">\n <mat-radio-group class=\"radio-btn-group\" formControlName=\"ministryType\"\n [(ngModel)]=\"selectedMinistryType\" (change)=\"onMinistryTypeChange($event)\">\n\n <!-- Left radio button -->\n <mat-radio-button value=\"ministry\" class=\"radio-btn left-radio\">\n <span class=\"radio-label\">\n <!-- <mat-icon class=\"radio-icon\" [ngClass]=\"selectedMinistryType === 'center'? 'checked-label':''\">domain</mat-icon> -->\n <span [ngClass]=\"selectedMinistryType === 'ministry'? 'checked-label':''\">Centre</span>\n </span>\n </mat-radio-button>\n\n <!-- Right radio button -->\n <mat-radio-button value=\"state\" class=\"radio-btn right-radio\">\n <span class=\"radio-label\">\n <!-- <mat-icon class=\"radio-icon\" [ngClass]=\"selectedMinistryType === 'state'? 'checked-label':''\">location_on</mat-icon> -->\n <span [ngClass]=\"selectedMinistryType === 'state'? 'checked-label':''\">State</span>\n </span>\n </mat-radio-button>\n\n </mat-radio-group>\n </div>\n <div class=\"mt-4\">\n \n <label class=\"label\">\n <span *ngIf=\"selectedMinistryType === 'ministry'\">Ministry</span>\n <span *ngIf=\"selectedMinistryType === 'state'\">State</span>\n </label>\n <div class=\"mt-2 search-box-with-select\">\n \n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px; border: 1px solid #ccc;width: 100%;\">\n <mat-select\n panelClass=\"select-with-search\"\n [placeholder]=\"selectedMinistryType === 'ministry' ? 'Select Ministry/ Department':'Select State'\"\n (selectionChange)=\"onMinistryChange($event)\" formControlName=\"ministry\"\n style=\"border-radius: 25px; background: white; width:100%\" \n (openedChange)=\"onOpened($event)\">\n <div class=\"search-wrapper\" *ngIf=\"panelOpen\">\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterData($event)\"\n class=\"search-input\"\n (keydown.space)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n </div>\n <!-- [selected]=\"selectedMinistryId === item?.identifier\" -->\n <mat-option [value]=\"item?.identifier\" *ngFor=\"let item of filteredList\">{{item?.orgName}}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"departmentData?.length\">\n <label class=\"label\">Department</label>\n <div class=\"mt-2\">\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;border: 1px solid #ccc;\">\n <mat-select panelClass=\"select-with-search\" placeholder=\"Select Department\" formControlName=\"departments\"\n style=\"border-radius: 25px; background: white;\" (selectionChange)=\"onDepartmentChange()\" (openedChange)=\"onOpenedDepartment($event)\">\n <div class=\"search-wrapper\" *ngIf=\"departmentPanelOpen\">\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterDepartmentData($event)\"\n class=\"search-input\"\n (keydown.space)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n </div>\n <mat-option [value]=\"item?.identifier\"\n *ngFor=\"let item of filteredDepartmentList\">{{item?.orgName}}</mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n\n </div>\n <!-- <div class=\"mt-4\">\n <label class=\"label\">Sector</label>\n <div>\n <mat-form-field appearance=\"fill\" style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select placeholder=\"Select Sector\" multiple formControlName=\"sectors\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"item?.value\"\n *ngFor=\"let item of sectorData\">{{item?.value}}</mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n\n </div> -->\n <!-- *ngIf=\"roleMappingForm.get('ministryType')?.value === 'state'\" -->\n <div class=\"mt-4 additional-details\">\n <textarea rows=\"5\" placeholder=\"Additional details\" formControlName=\"additionalDetails\"></textarea>\n </div>\n <div class=\"mt-4\">\n \n <button [ngClass]=\"disableUploadDocument ? 'btn-active-primary-disable':'btn-active-primary'\" class=\"\"\n [disabled]=\"disableUploadDocument\" mat-raised-button color=\"primary\"\n (click)=\"goToUploadDocument()\">\n <mat-icon>upload</mat-icon> Manage Documents\n </button>\n </div>\n <!-- *ngIf=\"roleMappingForm.get('ministryType')?.value === 'state'\" -->\n <!-- <div class=\"mt-4 section\" >\n <div class=\"sub-heading\">\n <p>Upload Document (PDF)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span *ngIf=\"!uploadedFile || uploadedFile.length === 0\">\n Choose up to 3 files (PDF/TXT)\n </span>\n <div *ngIf=\"uploadedFile?.length > 0\" class=\"file-list\">\n <div *ngFor=\"let file of uploadedFile; let i = index\" class=\"file-item\">\n {{ file.name }}\n <span class=\"remove-file-icon\" (click)=\"removeFile(i);$event.preventDefault()\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </label>\n <input\n id=\"uploadDoc\"\n type=\"file\"\n multiple\n (change)=\"onFileChange($event)\"\n hidden\n /> \n\n <small class=\"file-upload-hint\">Max file size: {{maxFileSizeMB}}MB</small>\n\n <input id=\"uploadDoc\" multiple type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n <!-- *ngIf=\"roleMappingForm.get('ministryType')?.value === 'state'\" -->\n <!-- <div class=\"mt-2 section\">\n <div class=\"disclaimer-text\">\n <p>Disclaimer: Please do not upload any confidential documents. </p>\n </div>\n </div> -->\n <div class=\"mt-2\" *ngIf=\"documents?.length < 1 && !(roleMappingForm?.invalid)\">\n <p><span style=\"font-size: .875rem;font-weight: bold;\">Note: </span><span class=\"error\">Please Upload atleast 1 Document.</span></p>\n </div>\n <div class=\"mt-4\" >\n <input [disabled]=\"roleMappingForm?.invalid || (roleMappingForm.get('ministryType')?.value === 'state' && !roleMappingForm.get('departments')?.value) || loading || documents?.length < 1\"\n [ngClass]=\"roleMappingForm?.invalid || (roleMappingForm.get('ministryType')?.value === 'state' && !roleMappingForm.get('departments')?.value) || loading || documents?.length < 1 ? 'btn-disable':'btn-active'\" \n type=\"button\" \n [value]=\"loading ? 'Generating CBP...' : 'Generate CBP'\"\n (click)=\"onGenerateRoleMapping()\" />\n </div>\n </div>\n </mat-card>\n \n</div>\n<!-- <div *ngIf=\"!login\">\n <app-login (success)=\"loginStatus($event)\"></app-login>\n </div> -->\n\n<div class=\"overlay-loader\" *ngIf=\"apiLoading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || 'Preparing CBP Plan generation...' }}</p>\n <div class=\"progress-details\">\n <div class=\"progress-indicator\" *ngIf=\"chunks.length > 0\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"getDisplayProgressPercentage()\">\n </div>\n </div>\n <small class=\"progress-text\">{{ getDisplayProgressPercentage() }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time streaming in progress. This may take 2-3 minutes.\n </small>\n </div>\n </div>\n </div>\n</div>\n", styles: [".container{width:40%}.sub-heading p{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.radio-btn-group{display:flex;justify-content:space-between;border-radius:8px;padding:12px 16px;align-items:center;max-width:600px;margin:0 auto;gap:20px}.radio-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:6px;transition:background-color .3s ease}.radio-btn,.radio-btn:hover{background-color:#eef2f7}.radio-label{display:flex;align-items:center;gap:6px;font-weight:500;font-size:16px}.radio-icon{font-size:24px;color:gray}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;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;border:none;outline:none;resize:none;box-shadow:none;border-radius:4px;border:1px solid #ccc}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:center}.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:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.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:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.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 .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}.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:28px;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:60px;height:60px;flex-shrink:0}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.overlay-loader .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 12px #00000026}.overlay-loader .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:300px}.overlay-loader .loading-content .loading-text .main-message{margin:0 0 16px;font-size:18px;font-weight:600;text-align:center}.overlay-loader .loading-content .loading-text .progress-details{margin-top:16px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:12px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#2563eb);border-radius:4px;transition:width .5s ease-in-out}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:14px;font-weight:500;color:#1b4ca1;display:block;text-align:center}.overlay-loader .loading-content .loading-text .progress-details .time-estimate{color:#666;font-size:12px;font-style:italic;display:block;text-align:center;margin-top:8px}::ng-deep mat-option .mat-option-text{font-size:16px;color:#000;font-family:Lato}:host ::ng-deep mat-select .mat-select-placeholder{font-size:16px}:host mat-select .mat-select-value-text{font-size:16px!important}.logo-container{display:flex;justify-content:center;align-items:center;flex-direction:column}.depatment-container{background:#fff;border:1px solid rgba(27,76,161,.12);padding:5%;box-shadow:0 4px 6px #0000001a,0 8px 20px #00000026;border-radius:8px}.checked-label{color:#1b4ca1}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}.disclaimer-text p{font-size:16px;font-family:Lato;font-weight:400}.mat-select-panel .search-wrapper{width:100%!important;box-sizing:border-box;padding:8px;position:sticky;top:0;z-index:2;background:#fff}.search-input{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;outline:none;box-sizing:border-box}.mat-select-panel mat-option{padding-top:10px}::ng-deep .mat-select-panel-wrap{overflow:visible!important;padding:0;margin-top:42px}::ng-deep .mat-select-panel{border:1px solid #ccc!important;box-sizing:border-box;max-height:250px}::ng-deep .select-with-search.mat-select-panel{padding-top:0;overflow:auto}::ng-deep .select-with-search .search-wrapper{position:sticky;top:0;z-index:10;background:#fff;padding:8px;border-bottom:1px solid #e0e0e0}::ng-deep .select-with-search .search-input{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;outline:none;box-sizing:border-box}::ng-deep .select-with-search mat-option:first-of-type{margin-top:4px}.btn-active-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.5;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:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.btn-active-primary{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #fff);color:#1b4ca1;text-align:center;border:1px solid #1B4CA1!important;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.btn-active-primary-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.5;background:var(--Primary-KB-Primary-Light, #fff);color:#1b4ca1;text-align:center;border:1px solid #1B4CA1!important;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}\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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i8.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7$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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i13.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i13.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { 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: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
11166
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RoleMappingGenerationComponent, selector: "app-role-mapping-generation", inputs: { loginStatusFlag: "loginStatusFlag" }, outputs: { successRoleMapping: "successRoleMapping", alreadyAvailableRoleMapping: "alreadyAvailableRoleMapping", loginSuccess: "loginSuccess" }, viewQueries: [{ propertyName: "pdfContent", first: true, predicate: ["pdfContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container\">\n <!-- <input class=\"btn-active\" type=\"button\" value=\"Download as PDF\" (click)=\"downloadPDF()\" /> -->\n <div class=\"logo-container\" *ngIf=\"login\">\n <div>\n <span class=\"ai-loader-icon-medium\"><img src=\"assets/icons/ai-loader.gif\"></span>\n </div>\n <div>\n <h2 class=\"highlight-ai\">\n <span>iGOT AI Driven CBP</span>\n </h2>\n </div>\n <!-- <div class=\"sub-heading\">\n <p>Build Your Capacity With Customized Role Mapping</p>\n </div> -->\n </div>\n <mat-card *ngIf=\"login\" class=\"mt-2\" [formGroup]=\"roleMappingForm\">\n <div class=\"depatment-container\">\n<!-- <div class=\"section-header\">-->\n<!-- <div class=\"sub-heading\">-->\n<!-- <p>Choose Your Department</p>-->\n<!-- </div>-->\n<!-- </div>-->\n\n <div class=\"radio-group mt-4\">\n <mat-radio-group class=\"radio-btn-group\" formControlName=\"ministryType\"\n [(ngModel)]=\"selectedMinistryType\" (change)=\"onMinistryTypeChange($event)\">\n\n <!-- Left radio button -->\n <mat-radio-button value=\"ministry\" class=\"radio-btn left-radio\">\n <span class=\"radio-label\">\n <!-- <mat-icon class=\"radio-icon\" [ngClass]=\"selectedMinistryType === 'center'? 'checked-label':''\">domain</mat-icon> -->\n <span [ngClass]=\"selectedMinistryType === 'ministry'? 'checked-label':''\">Centre</span>\n </span>\n </mat-radio-button>\n\n <!-- Right radio button -->\n <mat-radio-button value=\"state\" class=\"radio-btn right-radio\">\n <span class=\"radio-label\">\n <!-- <mat-icon class=\"radio-icon\" [ngClass]=\"selectedMinistryType === 'state'? 'checked-label':''\">location_on</mat-icon> -->\n <span [ngClass]=\"selectedMinistryType === 'state'? 'checked-label':''\">State</span>\n </span>\n </mat-radio-button>\n\n </mat-radio-group>\n </div>\n <div class=\"mt-4\">\n \n <label class=\"label\">\n <span *ngIf=\"selectedMinistryType === 'ministry'\">Ministry</span>\n <span *ngIf=\"selectedMinistryType === 'state'\">State</span>\n </label>\n <div class=\"mt-2 search-box-with-select\">\n \n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px; border: 1px solid #ccc;width: 100%;\">\n <mat-select\n panelClass=\"select-with-search\"\n [placeholder]=\"selectedMinistryType === 'ministry' ? 'Select Ministry/ Department':'Select State'\"\n (selectionChange)=\"onMinistryChange($event)\" formControlName=\"ministry\"\n style=\"border-radius: 25px; background: white; width:100%\" \n (openedChange)=\"onOpened($event)\">\n <div class=\"search-wrapper\" *ngIf=\"panelOpen\">\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterData($event)\"\n class=\"search-input\"\n (keydown.space)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n </div>\n <!-- [selected]=\"selectedMinistryId === item?.identifier\" -->\n <mat-option [value]=\"item?.identifier\" *ngFor=\"let item of filteredList\">{{item?.orgName}}</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n <div class=\"mt-4\" *ngIf=\"departmentData?.length\">\n <label class=\"label\">Department</label>\n <div class=\"mt-2\">\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;border: 1px solid #ccc;\">\n <mat-select panelClass=\"select-with-search\" placeholder=\"Select Department\" formControlName=\"departments\"\n style=\"border-radius: 25px; background: white;\" (selectionChange)=\"onDepartmentChange()\" (openedChange)=\"onOpenedDepartment($event)\">\n <div class=\"search-wrapper\" *ngIf=\"departmentPanelOpen\">\n <input\n type=\"text\"\n placeholder=\"Search...\"\n (input)=\"filterDepartmentData($event)\"\n class=\"search-input\"\n (keydown.space)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\">\n </div>\n <mat-option [value]=\"item?.identifier\"\n *ngFor=\"let item of filteredDepartmentList\">{{item?.orgName}}</mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n\n </div>\n <!-- <div class=\"mt-4\">\n <label class=\"label\">Sector</label>\n <div>\n <mat-form-field appearance=\"fill\" style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select placeholder=\"Select Sector\" multiple formControlName=\"sectors\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"item?.value\"\n *ngFor=\"let item of sectorData\">{{item?.value}}</mat-option>\n\n </mat-select>\n </mat-form-field>\n </div>\n\n </div> -->\n <!-- *ngIf=\"roleMappingForm.get('ministryType')?.value === 'state'\" -->\n <div class=\"mt-4 additional-details\">\n <textarea rows=\"5\" placeholder=\"Additional details\" formControlName=\"additionalDetails\"></textarea>\n </div>\n <div class=\"mt-4\">\n \n <button [ngClass]=\"disableUploadDocument ? 'btn-active-primary-disable':'btn-active-primary'\" class=\"\"\n [disabled]=\"disableUploadDocument\" mat-raised-button color=\"primary\"\n (click)=\"goToUploadDocument()\">\n <mat-icon>upload</mat-icon> Manage Documents\n </button>\n </div>\n <!-- *ngIf=\"roleMappingForm.get('ministryType')?.value === 'state'\" -->\n <!-- <div class=\"mt-4 section\" >\n <div class=\"sub-heading\">\n <p>Upload Document (PDF)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span *ngIf=\"!uploadedFile || uploadedFile.length === 0\">\n Choose up to 3 files (PDF/TXT)\n </span>\n <div *ngIf=\"uploadedFile?.length > 0\" class=\"file-list\">\n <div *ngFor=\"let file of uploadedFile; let i = index\" class=\"file-item\">\n {{ file.name }}\n <span class=\"remove-file-icon\" (click)=\"removeFile(i);$event.preventDefault()\">\n <mat-icon>close</mat-icon>\n </span>\n </div>\n </div>\n </label>\n <input\n id=\"uploadDoc\"\n type=\"file\"\n multiple\n (change)=\"onFileChange($event)\"\n hidden\n /> \n\n <small class=\"file-upload-hint\">Max file size: {{maxFileSizeMB}}MB</small>\n\n <input id=\"uploadDoc\" multiple type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n <!-- *ngIf=\"roleMappingForm.get('ministryType')?.value === 'state'\" -->\n <!-- <div class=\"mt-2 section\">\n <div class=\"disclaimer-text\">\n <p>Disclaimer: Please do not upload any confidential documents. </p>\n </div>\n </div> -->\n <div class=\"mt-2\" *ngIf=\"documents?.length < 1 && !(roleMappingForm?.invalid)\">\n <p><span style=\"font-size: .875rem;font-weight: bold;\">Note: </span><span class=\"error\">Please Upload atleast 1 Document.</span></p>\n </div>\n <div class=\"mt-4\" >\n <input [disabled]=\"roleMappingForm?.invalid || (roleMappingForm.get('ministryType')?.value === 'state' && !roleMappingForm.get('departments')?.value) || loading || documents?.length < 1\"\n [ngClass]=\"roleMappingForm?.invalid || (roleMappingForm.get('ministryType')?.value === 'state' && !roleMappingForm.get('departments')?.value) || loading || documents?.length < 1 ? 'btn-disable':'btn-active'\" \n type=\"button\" \n [value]=\"loading ? 'Generating CBP...' : 'Generate CBP'\"\n (click)=\"onGenerateRoleMapping()\" />\n </div>\n </div>\n </mat-card>\n \n</div>\n<!-- <div *ngIf=\"!login\">\n <app-login (success)=\"loginStatus($event)\"></app-login>\n </div> -->\n\n<div class=\"overlay-loader\" *ngIf=\"apiLoading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <div class=\"loading-content\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n <div class=\"loading-text mt-3\">\n <p class=\"main-message\">{{ currentProcessingStage || 'Preparing CBP Plan generation...' }}</p>\n <div class=\"progress-details\">\n <div class=\"progress-indicator\" *ngIf=\"chunks.length > 0\">\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" \n [style.width.%]=\"getDisplayProgressPercentage()\">\n </div>\n </div>\n <small class=\"progress-text\">{{ getDisplayProgressPercentage() }}% Complete</small>\n </div>\n <small class=\"time-estimate\">\n Real-time streaming in progress. This may take 2-3 minutes.\n </small>\n </div>\n </div>\n </div>\n</div>\n", styles: [".container{width:40%}.sub-heading p{color:#000;font-family:Montserrat;font-size:18px;font-style:normal;font-weight:600;line-height:normal}.radio-btn-group{display:flex;justify-content:space-between;border-radius:8px;padding:12px 16px;align-items:center;max-width:600px;margin:0 auto;gap:20px}.radio-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:6px;transition:background-color .3s ease}.radio-btn,.radio-btn:hover{background-color:#eef2f7}.radio-label{display:flex;align-items:center;gap:6px;font-weight:500;font-size:16px}.radio-icon{font-size:24px;color:gray}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;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;border:none;outline:none;resize:none;box-shadow:none;border-radius:4px;border:1px solid #ccc}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:center}.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:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.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:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.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 .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}.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:28px;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:60px;height:60px;flex-shrink:0}.overlay-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#ffffffbf;z-index:9999;display:flex;justify-content:center;align-items:center}.overlay-loader .loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 12px #00000026}.overlay-loader .loading-content .loading-text{color:#1b4ca1;font-family:Lato,sans-serif;min-width:300px}.overlay-loader .loading-content .loading-text .main-message{margin:0 0 16px;font-size:18px;font-weight:600;text-align:center}.overlay-loader .loading-content .loading-text .progress-details{margin-top:16px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator{margin-bottom:12px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-bar-container .progress-bar{height:100%;background:linear-gradient(90deg,#1b4ca1,#2563eb);border-radius:4px;transition:width .5s ease-in-out}.overlay-loader .loading-content .loading-text .progress-details .progress-indicator .progress-text{font-size:14px;font-weight:500;color:#1b4ca1;display:block;text-align:center}.overlay-loader .loading-content .loading-text .progress-details .time-estimate{color:#666;font-size:12px;font-style:italic;display:block;text-align:center;margin-top:8px}::ng-deep mat-option .mat-option-text{font-size:16px;color:#000;font-family:Lato}:host ::ng-deep mat-select .mat-select-placeholder{font-size:16px}:host mat-select .mat-select-value-text{font-size:16px!important}.logo-container{display:flex;justify-content:center;align-items:center;flex-direction:column}.depatment-container{background:#fff;border:1px solid rgba(27,76,161,.12);padding:5%;box-shadow:0 4px 6px #0000001a,0 8px 20px #00000026;border-radius:8px}.checked-label{color:#1b4ca1}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}.disclaimer-text p{font-size:16px;font-family:Lato;font-weight:400}.mat-select-panel .search-wrapper{width:100%!important;box-sizing:border-box;padding:8px;position:sticky;top:0;z-index:2;background:#fff}.search-input{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;outline:none;box-sizing:border-box}.mat-select-panel mat-option{padding-top:10px}::ng-deep .mat-select-panel-wrap{overflow:visible!important;padding:0;margin-top:42px}::ng-deep .mat-select-panel{border:1px solid #ccc!important;box-sizing:border-box;max-height:250px}::ng-deep .select-with-search.mat-select-panel{padding-top:0;overflow:auto}::ng-deep .select-with-search .search-wrapper{position:sticky;top:0;z-index:10;background:#fff;padding:8px;border-bottom:1px solid #e0e0e0}::ng-deep .select-with-search .search-input{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:6px;outline:none;box-sizing:border-box}::ng-deep .select-with-search mat-option:first-of-type{margin-top:4px}.btn-active-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.5;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:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.btn-active-primary{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #fff);color:#1b4ca1;text-align:center;border:1px solid #1B4CA1!important;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}.btn-active-primary-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.5;background:var(--Primary-KB-Primary-Light, #fff);color:#1b4ca1;text-align:center;border:1px solid #1B4CA1!important;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:48px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:100%}\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.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: "component", type: i7$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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i13.MatLegacyRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i13.MatLegacyRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { 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"] }] }); }
|
|
11188
11167
|
}
|
|
11189
11168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoleMappingGenerationComponent, decorators: [{
|
|
11190
11169
|
type: Component,
|
|
@@ -11236,7 +11215,7 @@ class DeleteRoleMappingComponent {
|
|
|
11236
11215
|
this.dialogRef.close();
|
|
11237
11216
|
}
|
|
11238
11217
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DeleteRoleMappingComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: SharedService }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11239
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DeleteRoleMappingComponent, selector: "app-delete-role-mapping", ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Delete Role Mapping</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"cancel()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n <div class=\"section-container mt-4\">\n <div class=\"progress-icon\">\n <img src=\"assets/icons/info.svg\" style=\"scale: 2;margin: 10px;\">\n </div>\n <div class=\"heading\">\n <div>Delete Role Mapping</div>\n </div>\n <div class=\"\">\n <div>Are You Sure to Delete Selected Role Mapping</div>\n </div>\n\n </div>\n <div class=\"popup-footer mt-4\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"No\" (click)=\"cancel()\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Yes\" (click)=\"deleteRoleMapping()\" />\n </div>\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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;width:100px}.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:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:0}.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;width:100px}.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}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
11218
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DeleteRoleMappingComponent, selector: "app-delete-role-mapping", ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Delete Role Mapping</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"cancel()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n <div class=\"section-container mt-4\">\n <div class=\"progress-icon\">\n <img src=\"assets/icons/info.svg\" style=\"scale: 2;margin: 10px;\">\n </div>\n <div class=\"heading\">\n <div>Delete Role Mapping</div>\n </div>\n <div class=\"\">\n <div>Are You Sure to Delete Selected Role Mapping</div>\n </div>\n\n </div>\n <div class=\"popup-footer mt-4\">\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"No\" (click)=\"cancel()\" />\n </div>\n <div>\n <input class=\"btn-active\" type=\"button\" value=\"Yes\" (click)=\"deleteRoleMapping()\" />\n </div>\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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;width:100px}.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:space-between;flex-direction:row}.outside-layer-total{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #1B4CA1;background:#edf1f8;width:132px}.outside-layer-functional{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #E24577;background:#f8d2de;width:132px}.outside-layer-domain{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #7B47A4;background:#dfd3e9;width:132px}.outside-layer-behavioral{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.inside-layer{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:0}.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;width:100px}.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}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
11240
11219
|
}
|
|
11241
11220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DeleteRoleMappingComponent, decorators: [{
|
|
11242
11221
|
type: Component,
|
|
@@ -12095,7 +12074,7 @@ class ViewFinalCbpPlanComponent {
|
|
|
12095
12074
|
}
|
|
12096
12075
|
}
|
|
12097
12076
|
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 }); }
|
|
12098
|
-
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: i8.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i8$1.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: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
12077
|
+
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$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i8.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"] }] }); }
|
|
12099
12078
|
}
|
|
12100
12079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewFinalCbpPlanComponent, decorators: [{
|
|
12101
12080
|
type: Component,
|
|
@@ -12561,7 +12540,7 @@ class AddDesignationComponent {
|
|
|
12561
12540
|
this.designationOffset = 0;
|
|
12562
12541
|
}
|
|
12563
12542
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddDesignationComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: SharedService }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12564
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddDesignationComponent, selector: "app-add-designation", viewQueries: [{ propertyName: "designationRef", first: true, predicate: ["designation"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Add New Designation</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"designationForm\">\n <mat-card class=\"mt-1\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Designation Name</p>\n </div>\n <div class=\"section-header mt-4\">\n <!-- <input type=\"text\" formControlName=\"designation_name\" placeholder=\"Enter Designation\" [value]=\"\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width: 100%;font-size: 14px;font-family: 'Lato';\"> -->\n <mat-form-field appearance=\"outline\" class=\"margin-top-s w-full required-select\">\n <mat-select multiple #position formControlName=\"designation_name\"\n placeholder=\"Select designation\" (closed)=\"onDesignationDropdownClosed()\"\n panelClass=\"search-panel\" (openedChange)=\"setupScrollListener($event)\">\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 (keyup)=\"designationSearch($event)\" autocomplete=\"off\">\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 <mat-option [value]=\"designation?.name\" *ngFor=\"let designation of masterData?.designation\">\n {{designation?.name}}\n </mat-option>\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\" disabled class=\"no-data-option\">\n\n Designation Not Found.\n\n </mat-option>\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 </div>\n </div>\n\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Role & responsibilities /Additional details</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" formControlName=\"instruction\" rows=\"5\"\n placeholder=\"Add Instructions\" [value]=\"\"></textarea>\n </div>\n </div>\n <!-- <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Upload Document (PDF/Word/Excel/TXT)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span>{{ uploadedFile?.name || 'Choose a file (PDF, Word, Excel, TXT)' }}</span>\n </label>\n\n <small class=\"file-upload-hint\">Max file size: 25MB</small>\n\n <input id=\"uploadDoc\" type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n\n </mat-card>\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 [disabled]=\"designationForm?.invalid\"\n [ngClass]=\"designationForm?.invalid ? 'btn-disable':'btn-active'\" type=\"button\" value=\"Generate CBP\"\n (click)=\"saveDesignation()\" />\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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%}:host ::ng-deep 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}:host ::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}:host ::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}:host ::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .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}:host ::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}:host ::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:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:32px;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:32px;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:32px;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:10px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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}.close .mat-icon{height:18px!important;width:18px!important}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}:host ::ng-deep .mat-select-panel.search-panel .search-input{flex:1 1 auto;width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;color:#333;outline:none;box-sizing:border-box}:host ::ng-deep .mat-select-panel.search-panel .search-input:focus{border-color:#0074b6;box-shadow:0 0 0 3px #0074b60f}:host ::ng-deep .mat-select-panel.search-panel .clear-button{background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:6px;line-height:1}:host ::ng-deep .mat-select-panel.search-panel .loading-indicator{padding:10px 12px;text-align:center;color:#666;font-size:14px}:host ::ng-deep .mat-select-panel.search-panel .mat-option{padding-top:10px;padding-left:16px}:host ::ng-deep .mat-select-panel.search-panel mat-option[disabled]{padding:8px 16px!important}:host ::ng-deep .mat-select-panel.align-panel{padding:0!important;box-sizing:border-box;margin-left:0!important;min-width:340px!important;max-width:340px!important}:host ::ng-deep .mat-select-panel.align-panel .mat-option{padding-left:16px}:host ::ng-deep .mat-select-panel.search-panel mat-option[disabled] .mat-error,:host ::ng-deep .mat-select-panel.search-panel .mat-error{margin:0!important;padding:0!important;font-size:14px!important;line-height:1.4!important;color:#f44336}:host ::ng-deep .mat-form-field{width:100%}:host ::ng-deep .mat-text-field-wrapper{background:#fff;border-radius:25px!important;height:42px}: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:42px;align-items:center;padding:0 16px;background:#fff}:host ::ng-deep .mat-select-panel{border:1px solid rgba(0,0,0,.16);border-radius:8px;box-shadow:0 6px 18px #0000001f}: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}\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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i8.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8$1.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: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
12543
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddDesignationComponent, selector: "app-add-designation", viewQueries: [{ propertyName: "designationRef", first: true, predicate: ["designation"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Add New Designation</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"designationForm\">\n <mat-card class=\"mt-1\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Designation Name</p>\n </div>\n <div class=\"section-header mt-4\">\n <!-- <input type=\"text\" formControlName=\"designation_name\" placeholder=\"Enter Designation\" [value]=\"\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width: 100%;font-size: 14px;font-family: 'Lato';\"> -->\n <mat-form-field appearance=\"outline\" class=\"margin-top-s w-full required-select\">\n <mat-select multiple #position formControlName=\"designation_name\"\n placeholder=\"Select designation\" (closed)=\"onDesignationDropdownClosed()\"\n panelClass=\"search-panel\" (openedChange)=\"setupScrollListener($event)\">\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 (keyup)=\"designationSearch($event)\" autocomplete=\"off\">\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 <mat-option [value]=\"designation?.name\" *ngFor=\"let designation of masterData?.designation\">\n {{designation?.name}}\n </mat-option>\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\" disabled class=\"no-data-option\">\n\n Designation Not Found.\n\n </mat-option>\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 </div>\n </div>\n\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Role & responsibilities /Additional details</p>\n </div>\n <div class=\"mt-4 additional-details\">\n <textarea class=\"custom-textarea\" formControlName=\"instruction\" rows=\"5\"\n placeholder=\"Add Instructions\" [value]=\"\"></textarea>\n </div>\n </div>\n <!-- <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Upload Document (PDF/Word/Excel/TXT)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span>{{ uploadedFile?.name || 'Choose a file (PDF, Word, Excel, TXT)' }}</span>\n </label>\n\n <small class=\"file-upload-hint\">Max file size: 25MB</small>\n\n <input id=\"uploadDoc\" type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n\n </mat-card>\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 [disabled]=\"designationForm?.invalid\"\n [ngClass]=\"designationForm?.invalid ? 'btn-disable':'btn-active'\" type=\"button\" value=\"Generate CBP\"\n (click)=\"saveDesignation()\" />\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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%}:host ::ng-deep 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}:host ::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}:host ::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}:host ::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:5px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:10px;font-size:20px;left:10px}.search .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}:host ::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}:host ::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:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:32px;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:32px;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:32px;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:10px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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}.close .mat-icon{height:18px!important;width:18px!important}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}:host ::ng-deep .mat-select-panel.search-panel .search-input{flex:1 1 auto;width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;color:#333;outline:none;box-sizing:border-box}:host ::ng-deep .mat-select-panel.search-panel .search-input:focus{border-color:#0074b6;box-shadow:0 0 0 3px #0074b60f}:host ::ng-deep .mat-select-panel.search-panel .clear-button{background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:6px;line-height:1}:host ::ng-deep .mat-select-panel.search-panel .loading-indicator{padding:10px 12px;text-align:center;color:#666;font-size:14px}:host ::ng-deep .mat-select-panel.search-panel .mat-option{padding-top:10px;padding-left:16px}:host ::ng-deep .mat-select-panel.search-panel mat-option[disabled]{padding:8px 16px!important}:host ::ng-deep .mat-select-panel.align-panel{padding:0!important;box-sizing:border-box;margin-left:0!important;min-width:340px!important;max-width:340px!important}:host ::ng-deep .mat-select-panel.align-panel .mat-option{padding-left:16px}:host ::ng-deep .mat-select-panel.search-panel mat-option[disabled] .mat-error,:host ::ng-deep .mat-select-panel.search-panel .mat-error{margin:0!important;padding:0!important;font-size:14px!important;line-height:1.4!important;color:#f44336}:host ::ng-deep .mat-form-field{width:100%}:host ::ng-deep .mat-text-field-wrapper{background:#fff;border-radius:25px!important;height:42px}: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:42px;align-items:center;padding:0 16px;background:#fff}:host ::ng-deep .mat-select-panel{border:1px solid rgba(0,0,0,.16);border-radius:8px;box-shadow:0 6px 18px #0000001f}: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}\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.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: "component", type: i8.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"] }] }); }
|
|
12565
12544
|
}
|
|
12566
12545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddDesignationComponent, decorators: [{
|
|
12567
12546
|
type: Component,
|
|
@@ -12945,7 +12924,7 @@ class DesignationApprovalRequestFormComponent {
|
|
|
12945
12924
|
return this.approvalRequestForm.get('searchmdo');
|
|
12946
12925
|
}
|
|
12947
12926
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DesignationApprovalRequestFormComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: SharedService }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12948
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DesignationApprovalRequestFormComponent, selector: "app-designation-approval-request-form", viewQueries: [{ propertyName: "mdoRef", first: true, predicate: ["mdo"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Send for Designation Name Approval</div>\n <div class=\"sub-heading\">Are you sure you want to send this designation for adding in iGOT designation Master?</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"approvalRequestForm\">\n <mat-card class=\"mt-1\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Designation Name <span class=\"required\">*</span></p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" formControlName=\"request_name\" [value]=\"role_mapping_ids?.designation_name\" placeholder=\"Enter a name for this request...\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width:100%;font-size: 14px;font-family: 'Lato';\">\n <mat-error\n *ngIf=\"\n approvalRequestForm.get('request_name')?.touched &&\n approvalRequestForm.get('request_name')?.hasError('required')\n \"\n >\n Request name is required\n </mat-error>\n\n <mat-error\n *ngIf=\"\n approvalRequestForm.get('request_name')?.touched &&\n approvalRequestForm.get('request_name')?.hasError('pattern')\n \"\n >\n Only letters, numbers, spaces, underscore and hyphen are allowed\n </mat-error>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Enter Division/Wing <span class=\"required\">*</span></p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" formControlName=\"division_name\" [value]=\"role_mapping_ids?.wing_division_section\" placeholder=\"Enter Division/Wing...\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width:100%;font-size: 14px;font-family: 'Lato';\">\n <mat-error\n *ngIf=\"\n approvalRequestForm.get('division_name')?.touched &&\n approvalRequestForm.get('division_name')?.hasError('required')\n \"\n >\n Request name is required\n </mat-error>\n\n <mat-error\n *ngIf=\"\n approvalRequestForm.get('division_name')?.touched &&\n approvalRequestForm.get('division_name')?.hasError('pattern')\n \"\n >\n Only letters, numbers, spaces, underscore and hyphen are allowed\n </mat-error>\n \n </div>\n </div>\n\n \n <!-- <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Upload Document (PDF/Word/Excel/TXT)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span>{{ uploadedFile?.name || 'Choose a file (PDF, Word, Excel, TXT)' }}</span>\n </label>\n\n <small class=\"file-upload-hint\">Max file size: 25MB</small>\n\n <input id=\"uploadDoc\" type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n\n </mat-card>\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 \n <button [disabled]=\"approvalRequestForm?.invalid\"\n [ngClass]=\"approvalRequestForm?.invalid ? 'btn-disable':'btn-active'\" type=\"button\"\n (click)=\"saveDesignation()\" ><mat-icon>send</mat-icon> Send Request</button>\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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: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:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:32px;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:32px;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:32px;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:10px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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}.close .mat-icon{height:18px!important;width:18px!important}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}::ng-deep .mat-select-panel.search-panel .search-input{flex:1 1 auto;width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;color:#333;outline:none;box-sizing:border-box}::ng-deep .mat-select-panel.search-panel .search-input:focus{border-color:#0074b6;box-shadow:0 0 0 3px #0074b60f}::ng-deep .mat-select-panel.search-panel .clear-button{background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:6px;line-height:1}::ng-deep .mat-select-panel.search-panel .loading-indicator{padding:10px 12px;text-align:center;color:#666;font-size:14px}::ng-deep .mat-select-panel.search-panel .mat-option{padding-top:10px;padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled]{padding:8px 16px!important}::ng-deep .mat-select-panel.align-panel{padding:0!important;box-sizing:border-box;margin-left:0!important;min-width:340px!important;max-width:340px!important}::ng-deep .mat-select-panel.align-panel .mat-option{padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled] .mat-error,::ng-deep .mat-select-panel.search-panel .mat-error{margin:0!important;padding:0!important;font-size:14px!important;line-height:1.4!important;color:#f44336}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-text-field-wrapper{background:#fff;border-radius:25px!important;height:42px}::ng-deep .mat-notched-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:42px;align-items:center;padding:0 16px;background:#fff}::ng-deep .mat-select-panel{border:1px solid rgba(0,0,0,.16);border-radius:8px;box-shadow:0 6px 18px #0000001f}mat-error{color:#f44336!important;font-size:12px;margin-top:4px}::ng-deep .mat-mdc-form-field-error{color:#d32f2f!important}::ng-deep .mat-mdc-form-field-error{color:#f44336!important;font-size:12px}.required{color:#f44336!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
12927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DesignationApprovalRequestFormComponent, selector: "app-designation-approval-request-form", viewQueries: [{ propertyName: "mdoRef", first: true, predicate: ["mdo"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"view-cbp-plan\">\n <div class=\"popup-container\">\n <div class=\"popup-header\">\n <div>\n <div class=\"heading\">Send for Designation Name Approval</div>\n <div class=\"sub-heading\">Are you sure you want to send this designation for adding in iGOT designation Master?</div>\n </div>\n <div class=\"cursor-pointer\" (click)=\"closeDialog()\">\n <mat-icon>close</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"section-container\" [formGroup]=\"approvalRequestForm\">\n <mat-card class=\"mt-1\">\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Designation Name <span class=\"required\">*</span></p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" formControlName=\"request_name\" [value]=\"role_mapping_ids?.designation_name\" placeholder=\"Enter a name for this request...\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width:100%;font-size: 14px;font-family: 'Lato';\">\n <mat-error\n *ngIf=\"\n approvalRequestForm.get('request_name')?.touched &&\n approvalRequestForm.get('request_name')?.hasError('required')\n \"\n >\n Request name is required\n </mat-error>\n\n <mat-error\n *ngIf=\"\n approvalRequestForm.get('request_name')?.touched &&\n approvalRequestForm.get('request_name')?.hasError('pattern')\n \"\n >\n Only letters, numbers, spaces, underscore and hyphen are allowed\n </mat-error>\n </div>\n </div>\n <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Enter Division/Wing <span class=\"required\">*</span></p>\n </div>\n <div class=\"mt-4 additional-details\">\n <input type=\"text\" formControlName=\"division_name\" [value]=\"role_mapping_ids?.wing_division_section\" placeholder=\"Enter Division/Wing...\"\n style=\"border-radius: 25px; border: 1px solid #ccc; padding: 8px 12px; width:100%;font-size: 14px;font-family: 'Lato';\">\n <mat-error\n *ngIf=\"\n approvalRequestForm.get('division_name')?.touched &&\n approvalRequestForm.get('division_name')?.hasError('required')\n \"\n >\n Request name is required\n </mat-error>\n\n <mat-error\n *ngIf=\"\n approvalRequestForm.get('division_name')?.touched &&\n approvalRequestForm.get('division_name')?.hasError('pattern')\n \"\n >\n Only letters, numbers, spaces, underscore and hyphen are allowed\n </mat-error>\n \n </div>\n </div>\n\n \n <!-- <div class=\"mt-2 section\">\n <div class=\"sub-heading\">\n <p>Upload Document (PDF/Word/Excel/TXT)</p>\n </div>\n <div class=\"file-upload-wrapper\">\n <label for=\"uploadDoc\" class=\"file-upload-label\">\n <span class=\"file-upload-icon\">\uD83D\uDCCE</span>\n <span>{{ uploadedFile?.name || 'Choose a file (PDF, Word, Excel, TXT)' }}</span>\n </label>\n\n <small class=\"file-upload-hint\">Max file size: 25MB</small>\n\n <input id=\"uploadDoc\" type=\"file\" (change)=\"onFileChange($event)\"\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.txt\" class=\"file-upload-input\" />\n\n <div *ngIf=\"uploadError\" class=\"error\">{{ uploadError }}</div>\n </div>\n </div> -->\n\n </mat-card>\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 \n <button [disabled]=\"approvalRequestForm?.invalid\"\n [ngClass]=\"approvalRequestForm?.invalid ? 'btn-disable':'btn-active'\" type=\"button\"\n (click)=\"saveDesignation()\" ><mat-icon>send</mat-icon> Send Request</button>\n </div>\n </div>\n</div>\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.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: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:12px;font-style:normal;font-weight:400;line-height:normal}.count{color:#1b4ca1;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size: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:32px;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:32px;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:32px;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:10px;font-style:normal;font-weight:400;line-height:normal;padding:5px}.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}.close .mat-icon{height:18px!important;width:18px!important}:host ::ng-deep .mat-select-arrow-wrapper{height:6px!important}.file-upload-wrapper{position:relative;margin:16px 0}.file-upload-label{display:inline-flex;align-items:center;padding:10px 16px;background-color:#1b4ca1;color:#fff;font-weight:500;cursor:pointer;transition:background-color .3s;-webkit-user-select:none;user-select:none;border-radius:8px}.file-upload-label:hover{background-color:#1b4ca1}.file-upload-icon{margin-right:8px;font-size:18px}.file-upload-input{display:none}.error{color:red;margin-top:6px;font-size:.875rem}.file-upload-hint{display:block;font-size:1rem;color:#000;font-family:Lato;font-size:14px;margin-top:4px;margin-bottom:8px}::ng-deep .mat-select-panel.search-panel .search-input{flex:1 1 auto;width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:4px;font-size:14px;color:#333;outline:none;box-sizing:border-box}::ng-deep .mat-select-panel.search-panel .search-input:focus{border-color:#0074b6;box-shadow:0 0 0 3px #0074b60f}::ng-deep .mat-select-panel.search-panel .clear-button{background:transparent;border:none;cursor:pointer;font-size:16px;color:#666;padding:6px;line-height:1}::ng-deep .mat-select-panel.search-panel .loading-indicator{padding:10px 12px;text-align:center;color:#666;font-size:14px}::ng-deep .mat-select-panel.search-panel .mat-option{padding-top:10px;padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled]{padding:8px 16px!important}::ng-deep .mat-select-panel.align-panel{padding:0!important;box-sizing:border-box;margin-left:0!important;min-width:340px!important;max-width:340px!important}::ng-deep .mat-select-panel.align-panel .mat-option{padding-left:16px}::ng-deep .mat-select-panel.search-panel mat-option[disabled] .mat-error,::ng-deep .mat-select-panel.search-panel .mat-error{margin:0!important;padding:0!important;font-size:14px!important;line-height:1.4!important;color:#f44336}::ng-deep .mat-form-field{width:100%}::ng-deep .mat-text-field-wrapper{background:#fff;border-radius:25px!important;height:42px}::ng-deep .mat-notched-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:25px!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start,::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end{border-width:1px!important;min-width:0!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{color:transparent!important}::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:transparent!important}::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex{border-radius:25px;height:42px;align-items:center;padding:0 16px;background:#fff}::ng-deep .mat-select-panel{border:1px solid rgba(0,0,0,.16);border-radius:8px;box-shadow:0 6px 18px #0000001f}mat-error{color:#f44336!important;font-size:12px;margin-top:4px}::ng-deep .mat-mdc-form-field-error{color:#d32f2f!important}::ng-deep .mat-mdc-form-field-error{color:#f44336!important;font-size:12px}.required{color:#f44336!important}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }] }); }
|
|
12949
12928
|
}
|
|
12950
12929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DesignationApprovalRequestFormComponent, decorators: [{
|
|
12951
12930
|
type: Component,
|
|
@@ -13669,7 +13648,7 @@ class RoleMappingListComponent {
|
|
|
13669
13648
|
});
|
|
13670
13649
|
}
|
|
13671
13650
|
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 }); }
|
|
13672
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RoleMappingListComponent, selector: "app-role-mapping-list", inputs: { formData: "formData" }, outputs: { moveToInitialScreen: "moveToInitialScreen" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"role-mapping-container\">\n <div class=\"container-fluid\">\n\n <mat-card class=\"mt-0 pt-0\">\n <div class=\"section-header\">\n\n </div>\n <div class=\"edit-section mt-4\">\n <div class=\"select-map-route-container\">\n <div class=\"select-map-flex-container\">\n <div class=\"select-map-flex\">\n <div class=\"selected-mapping-route\">\n <p>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">\n / {{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n </p>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"moveToInitialScreenLayout('edit')\">\n <mat-icon>edit</mat-icon>Edit\n </div>\n <!-- <div class=\"cursor-pointer ml-10\">-->\n <!-- <button class=\"btn-active cursor-pointer\" (click)=\"moveToInitialScreenLayout('add')\">-->\n <!-- <mat-icon>add</mat-icon>-->\n <!-- Create New CBP-->\n <!-- </button>-->\n <!-- </div>-->\n </div>\n <div>\n <div class=\"view-final-cbp-plan\">\n <!-- <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('cbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div> -->\n\n <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('acbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"search-filter-section mt-2\">\n <div class=\"search flex margin-right-m search-flex\">\n <div class=\"mt-2\">\n <div class=\"search-container\">\n <div class=\"rsearch\">\n <mat-icon\n class=\"color-60 search-icon mat-icon notranslate material-icons mat-icon-no-color\">search</mat-icon>\n <input class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\" label=\"\"\n (input)=\"applyFilter()\" placeholder=\"Search by designation name\" type=\"Standard\">\n <mat-icon *ngIf=\"searchText.trim().length > 0\"\n class=\"color-60 clear-icon mat-icon notranslate material-icons mat-icon-no-color cursor-pointer\"\n (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n <div class=\"pl-2 mt-2\">\n <input [disabled]=\"searchText.trim()?.length === 0\"\n [ngClass]=\"searchText.trim()?.length === 0 ? 'btn-disable':'btn-active'\"\n type=\"button\" value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n <div class=\"filter-section flex margin-top-15\">\n <!-- <div>\n <label class=\"label\">Filter by competency type</label>\n <div>\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select [(value)]=\"selectedValue\" placeholder=\"Select Ministry\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"'test'\">Test</mat-option>\n <mat-option [value]=\"'another'\">Another</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div> -->\n <div class=\"btn-group\">\n <div class=\"ml-2\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Designation\"\n (click)=\"addMoreDesignation()\" />\n </div>\n <div class=\"ml-2\">\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]=\"row?.cbp_plans?.length > 0\">\n <mat-checkbox class=\"radio-style-checkbox\"\n (click)=\"$event.stopPropagation()\" (change)=\"toggleRow(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"!row?.cbp_plans?.length\">\n </mat-checkbox>\n </span>\n </td>\n </ng-container>\n <!-- Designation Name -->\n <ng-container matColumnDef=\"designation_name\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Designation\n </th>\n <td class=\"cursor-pointer\" mat-cell *matCellDef=\"let element\"\n (click)=\"viewCBPPlan(element)\">\n <div\n [ngClass]=\"activeTab === 'matched'? 'designation-text': 'designation-text-unmatched'\">\n <p class=\"designation\">{{ element?.designation_name }} </p>\n <p class=\"wing-text mt-2\">Wing/Division - {{\n element?.wing_division_section }} </p>\n </div>\n\n </td>\n </ng-container>\n\n <!-- Role & Responsibilities -->\n <ng-container matColumnDef=\"role_responsibilities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Role &\n Responsibilities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let role of (isResponisbilityExpanded(element.id) ? element.role_responsibilities : element.role_responsibilities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ role }}</li>\n <li *ngIf=\"element.role_responsibilities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'role_responsibilities')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n <!-- {{ isResponisbilityExpanded(element.id) ? 'View Less' : 'View More' }} -->\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n <!-- Activities -->\n <ng-container matColumnDef=\"activities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Activities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let activity of (isActivityExpanded(element.id) ? element.activities : element.activities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ activity }}</li>\n <li *ngIf=\"element.activities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'activity')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Behavioral Competencies -->\n <ng-container matColumnDef=\"behavioral\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Behavioral\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getCompetenciesByType(element.competencies, 'Behavioral')\">\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Functional Competencies -->\n <ng-container matColumnDef=\"functional\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Functional\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getCompetenciesByType(element.competencies, 'Functional')\">\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Domain Competencies -->\n <ng-container matColumnDef=\"domain\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Domain\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getCompetenciesByType(element.competencies, 'Domain')\">\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }}</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]=\"dataSource?.data?.length || 0\" [pageSize]=\"5\"\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 Data Found</p>\n </div>\n <!-- <div class=\" margin-top-m no-content-create\">\n <button mat-button type=\"button\" class=\"search-btns\"\n [routerLink]=\"['/app/home/create-request-form']\">Request Content</button>\n </div> -->\n\n </div>\n\n <!-- <mat-paginator *ngIf=\"dataSource?.filteredData?.length > 0\" [pageSize]=\"pageSize\"\n [length]=\"this.requestCount\" [pageSizeOptions]=\"[10,20,40]\"\n (page)=\"onChangePage($event)\"></mat-paginator> -->\n\n\n </div>\n\n\n\n </div>\n </div>\n </mat-card>\n </div>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;font-style:normal;font-weight:700;line-height:150%}:host ::ng-deep input.mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}:host ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}:host ::ng-deep .mat-select-panel{background-color:#fff!important}:host ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:10px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:600px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px 10px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex}.outside-layer{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.designation{color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:700;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.wing-text{color:#000000e0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal}.role-item{color:#000000e0;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.view-final-cbp-plan{display:flex;justify-content:end;align-items:center;gap:8px}.view-final-cbp-plan-text{padding:4px 16px;border-radius:24px;border:2px solid #F3962F;background:var(--white-kb-white-100, #FFF);box-shadow:0 1px 10px #276de599;color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:normal}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cursor-pointer{cursor:pointer}.ml-10{margin-left:10px}.table-container{border-top-left-radius:16px;border-top-right-radius:16px;overflow:auto;background:#fff;max-height:70vh}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;background:#fff;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child):after{content:\"\";position:absolute;top:12px;bottom:12px;right:0;width:1px;background-color:#e0e0e0}.table-header{font-size:16px;font-weight:600;background:#fff!important;color:#333}.table-header-unmatched{font-size:16px;font-weight:600;background:#f4dcde!important;color:#b42318}.table-body{background-color:#fff!important}.table-body-unmatched{background-color:#faf6f7!important}.designation-text-unmatched p{color:#b42318!important}.select-map-flex-container{display:flex;flex-direction:row;justify-content:space-between;width:100%}.select-map-flex{display:flex}.search-container-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;align-items:flex-start}.mt-6{margin-top:1.7rem}.mat-elevation-z1 .mat-mdc-cell{vertical-align:top!important;padding-top:8px;padding-bottom:8px}::ng-deep .radio-style-checkbox .mat-checkbox-frame{border-radius:50%}::ng-deep .radio-style-checkbox .mat-checkbox-background{border-radius:50%}.search-flex{display:flex;flex-direction:row;width:100%}.margin-top-15{margin-top:15px}.btn-active-outline{border-radius:10px;opacity:1;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;width:240px;border:none;background-color:transparent;cursor:pointer}.btn-active-outline-disable{border-radius:10px;opacity:.5;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;width:auto;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:240px;background-color:transparent;cursor:not-allowed}.role-mapping-tabs{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif}.role-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;border:1px solid #d0d5dd;background-color:#f9fafb;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease-in-out}.role-tab.active{border-color:#1b4ca1;background-color:#eff6ff;color:#1b4ca1}.dot{width:10px;height:10px;border-radius:50%;background-color:#1b4ca1}.dot.red{background-color:#b42318}.badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}.badge.blue{background-color:#dbeafe;color:#1b4ca1}.badge.red{background-color:#fee2e2;color:#b42318}\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: i7$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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.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"] }] }); }
|
|
13651
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RoleMappingListComponent, selector: "app-role-mapping-list", inputs: { formData: "formData" }, outputs: { moveToInitialScreen: "moveToInitialScreen" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: "<div class=\"role-mapping-container\">\n <div class=\"container-fluid\">\n\n <mat-card class=\"mt-0 pt-0\">\n <div class=\"section-header\">\n\n </div>\n <div class=\"edit-section mt-4\">\n <div class=\"select-map-route-container\">\n <div class=\"select-map-flex-container\">\n <div class=\"select-map-flex\">\n <div class=\"selected-mapping-route\">\n <p>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">\n / {{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n </p>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"moveToInitialScreenLayout('edit')\">\n <mat-icon>edit</mat-icon>Edit\n </div>\n <!-- <div class=\"cursor-pointer ml-10\">-->\n <!-- <button class=\"btn-active cursor-pointer\" (click)=\"moveToInitialScreenLayout('add')\">-->\n <!-- <mat-icon>add</mat-icon>-->\n <!-- Create New CBP-->\n <!-- </button>-->\n <!-- </div>-->\n </div>\n <div>\n <div class=\"view-final-cbp-plan\">\n <!-- <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('cbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div> -->\n\n <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('acbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"search-filter-section mt-2\">\n <div class=\"search flex margin-right-m search-flex\">\n <div class=\"mt-2\">\n <div class=\"search-container\">\n <div class=\"rsearch\">\n <mat-icon\n class=\"color-60 search-icon mat-icon notranslate material-icons mat-icon-no-color\">search</mat-icon>\n <input class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\" label=\"\"\n (input)=\"applyFilter()\" placeholder=\"Search by designation name\" type=\"Standard\">\n <mat-icon *ngIf=\"searchText.trim().length > 0\"\n class=\"color-60 clear-icon mat-icon notranslate material-icons mat-icon-no-color cursor-pointer\"\n (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n <div class=\"pl-2 mt-2\">\n <input [disabled]=\"searchText.trim()?.length === 0\"\n [ngClass]=\"searchText.trim()?.length === 0 ? 'btn-disable':'btn-active'\"\n type=\"button\" value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n <div class=\"filter-section flex margin-top-15\">\n <!-- <div>\n <label class=\"label\">Filter by competency type</label>\n <div>\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select [(value)]=\"selectedValue\" placeholder=\"Select Ministry\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"'test'\">Test</mat-option>\n <mat-option [value]=\"'another'\">Another</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div> -->\n <div class=\"btn-group\">\n <div class=\"ml-2\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Designation\"\n (click)=\"addMoreDesignation()\" />\n </div>\n <div class=\"ml-2\">\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]=\"row?.cbp_plans?.length > 0\">\n <mat-checkbox class=\"radio-style-checkbox\"\n (click)=\"$event.stopPropagation()\" (change)=\"toggleRow(row)\"\n [checked]=\"selection.isSelected(row)\"\n [disabled]=\"!row?.cbp_plans?.length\">\n </mat-checkbox>\n </span>\n </td>\n </ng-container>\n <!-- Designation Name -->\n <ng-container matColumnDef=\"designation_name\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Designation\n </th>\n <td class=\"cursor-pointer\" mat-cell *matCellDef=\"let element\"\n (click)=\"viewCBPPlan(element)\">\n <div\n [ngClass]=\"activeTab === 'matched'? 'designation-text': 'designation-text-unmatched'\">\n <p class=\"designation\">{{ element?.designation_name }} </p>\n <p class=\"wing-text mt-2\">Wing/Division - {{\n element?.wing_division_section }} </p>\n </div>\n\n </td>\n </ng-container>\n\n <!-- Role & Responsibilities -->\n <ng-container matColumnDef=\"role_responsibilities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Role &\n Responsibilities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let role of (isResponisbilityExpanded(element.id) ? element.role_responsibilities : element.role_responsibilities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ role }}</li>\n <li *ngIf=\"element.role_responsibilities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'role_responsibilities')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n <!-- {{ isResponisbilityExpanded(element.id) ? 'View Less' : 'View More' }} -->\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n <!-- Activities -->\n <ng-container matColumnDef=\"activities\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Activities </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul>\n <li class=\"role-item\"\n *ngFor=\"let activity of (isActivityExpanded(element.id) ? element.activities : element.activities.slice(0, 2)); let i = index\">\n {{i+1}}. {{ activity }}</li>\n <li *ngIf=\"element.activities.length > 2\"\n class=\"view-more-less cursor-pointer\"\n (click)=\"openFullList(element, 'activity')\">\n <span style=\"color: #1B4CA1;font-size: 16px;\">\n View More\n </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Behavioral Competencies -->\n <ng-container matColumnDef=\"behavioral\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Behavioral\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"behavioural-pill\"\n *ngFor=\"let comp of getCompetenciesByType(element.competencies, 'Behavioral')\">\n <span class=\"competency-text-behavioral\"> {{ comp.theme }} - {{\n comp.sub_theme }} </span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Functional Competencies -->\n <ng-container matColumnDef=\"functional\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Functional\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"functional-pill\"\n *ngFor=\"let comp of getCompetenciesByType(element.competencies, 'Functional')\">\n <span class=\"competency-text-functional\"> {{ comp.theme }} - {{\n comp.sub_theme }}</span>\n </li>\n </ul>\n </td>\n </ng-container>\n\n <!-- Domain Competencies -->\n <ng-container matColumnDef=\"domain\">\n <th [ngClass]=\"activeTab === 'matched'? 'table-header': 'table-header-unmatched'\"\n mat-header-cell *matHeaderCellDef> Domain\n Competencies </th>\n <td mat-cell *matCellDef=\"let element\">\n <ul class=\"competency-list\">\n <li class=\"domain-pill\"\n *ngFor=\"let comp of getCompetenciesByType(element.competencies, 'Domain')\">\n <span class=\"competency-text-domain\"> {{ comp.theme }} - {{\n comp.sub_theme }}</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]=\"dataSource?.data?.length || 0\" [pageSize]=\"5\"\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 Data Found</p>\n </div>\n <!-- <div class=\" margin-top-m no-content-create\">\n <button mat-button type=\"button\" class=\"search-btns\"\n [routerLink]=\"['/app/home/create-request-form']\">Request Content</button>\n </div> -->\n\n </div>\n\n <!-- <mat-paginator *ngIf=\"dataSource?.filteredData?.length > 0\" [pageSize]=\"pageSize\"\n [length]=\"this.requestCount\" [pageSizeOptions]=\"[10,20,40]\"\n (page)=\"onChangePage($event)\"></mat-paginator> -->\n\n\n </div>\n\n\n\n </div>\n </div>\n </mat-card>\n </div>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;font-style:normal;font-weight:700;line-height:150%}:host ::ng-deep input.mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}:host ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}:host ::ng-deep .mat-select-panel{background-color:#fff!important}:host ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:10px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:600px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px 10px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex}.outside-layer{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.designation{color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:700;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.wing-text{color:#000000e0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal}.role-item{color:#000000e0;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.view-final-cbp-plan{display:flex;justify-content:end;align-items:center;gap:8px}.view-final-cbp-plan-text{padding:4px 16px;border-radius:24px;border:2px solid #F3962F;background:var(--white-kb-white-100, #FFF);box-shadow:0 1px 10px #276de599;color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:normal}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cursor-pointer{cursor:pointer}.ml-10{margin-left:10px}.table-container{border-top-left-radius:16px;border-top-right-radius:16px;overflow:auto;background:#fff;max-height:70vh}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;background:#fff;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child):after{content:\"\";position:absolute;top:12px;bottom:12px;right:0;width:1px;background-color:#e0e0e0}.table-header{font-size:16px;font-weight:600;background:#fff!important;color:#333}.table-header-unmatched{font-size:16px;font-weight:600;background:#f4dcde!important;color:#b42318}.table-body{background-color:#fff!important}.table-body-unmatched{background-color:#faf6f7!important}.designation-text-unmatched p{color:#b42318!important}.select-map-flex-container{display:flex;flex-direction:row;justify-content:space-between;width:100%}.select-map-flex{display:flex}.search-container-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;align-items:flex-start}.mt-6{margin-top:1.7rem}.mat-elevation-z1 .mat-mdc-cell{vertical-align:top!important;padding-top:8px;padding-bottom:8px}::ng-deep .radio-style-checkbox .mat-checkbox-frame{border-radius:50%}::ng-deep .radio-style-checkbox .mat-checkbox-background{border-radius:50%}.search-flex{display:flex;flex-direction:row;width:100%}.margin-top-15{margin-top:15px}.btn-active-outline{border-radius:10px;opacity:1;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;width:240px;border:none;background-color:transparent;cursor:pointer}.btn-active-outline-disable{border-radius:10px;opacity:.5;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;width:auto;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:240px;background-color:transparent;cursor:not-allowed}.role-mapping-tabs{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif}.role-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;border:1px solid #d0d5dd;background-color:#f9fafb;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease-in-out}.role-tab.active{border-color:#1b4ca1;background-color:#eff6ff;color:#1b4ca1}.dot{width:10px;height:10px;border-radius:50%;background-color:#1b4ca1}.dot.red{background-color:#b42318}.badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}.badge.blue{background-color:#dbeafe;color:#1b4ca1}.badge.red{background-color:#fee2e2;color:#b42318}\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: i7$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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.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"] }] }); }
|
|
13673
13652
|
}
|
|
13674
13653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoleMappingListComponent, decorators: [{
|
|
13675
13654
|
type: Component,
|
|
@@ -13981,7 +13960,7 @@ class AiCbpModule {
|
|
|
13981
13960
|
RoleMappingGenerationComponent,
|
|
13982
13961
|
RoleMappingListComponent,
|
|
13983
13962
|
DesignationApprovalRequestFormComponent,
|
|
13984
|
-
|
|
13963
|
+
PublishApproveRequestFormComponent,
|
|
13985
13964
|
RejectItemRequestFormComponent,
|
|
13986
13965
|
RejectRequestFormComponent], imports: [CommonModule,
|
|
13987
13966
|
RouterModule,
|
|
@@ -13998,7 +13977,7 @@ class AiCbpModule {
|
|
|
13998
13977
|
MatTooltipModule,
|
|
13999
13978
|
MatTabsModule, i4.MarkdownModule, DragDropModule,
|
|
14000
13979
|
MatDatepickerModule,
|
|
14001
|
-
MatNativeDateModule, i12$
|
|
13980
|
+
MatNativeDateModule, i12$2.NgxDaterangepickerMd, i3$2.PaginationModule, i4$1.ToastrModule, NgbModalModule,
|
|
14002
13981
|
DirectiveModule,
|
|
14003
13982
|
PipePublicURLModule,
|
|
14004
13983
|
AiCbpRoutingModule], exports: [AiCbpComponent,
|
|
@@ -14029,7 +14008,7 @@ class AiCbpModule {
|
|
|
14029
14008
|
RoleMappingGenerationComponent,
|
|
14030
14009
|
RoleMappingListComponent,
|
|
14031
14010
|
DesignationApprovalRequestFormComponent,
|
|
14032
|
-
|
|
14011
|
+
PublishApproveRequestFormComponent,
|
|
14033
14012
|
RejectItemRequestFormComponent,
|
|
14034
14013
|
RejectRequestFormComponent] }); }
|
|
14035
14014
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AiCbpModule, providers: [
|
|
@@ -14092,7 +14071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
14092
14071
|
RoleMappingGenerationComponent,
|
|
14093
14072
|
RoleMappingListComponent,
|
|
14094
14073
|
DesignationApprovalRequestFormComponent,
|
|
14095
|
-
|
|
14074
|
+
PublishApproveRequestFormComponent,
|
|
14096
14075
|
RejectItemRequestFormComponent,
|
|
14097
14076
|
RejectRequestFormComponent
|
|
14098
14077
|
],
|
|
@@ -14152,7 +14131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
14152
14131
|
RoleMappingGenerationComponent,
|
|
14153
14132
|
RoleMappingListComponent,
|
|
14154
14133
|
DesignationApprovalRequestFormComponent,
|
|
14155
|
-
|
|
14134
|
+
PublishApproveRequestFormComponent,
|
|
14156
14135
|
RejectItemRequestFormComponent,
|
|
14157
14136
|
RejectRequestFormComponent
|
|
14158
14137
|
],
|
|
@@ -14170,5 +14149,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
14170
14149
|
* Generated bundle index. Do not edit.
|
|
14171
14150
|
*/
|
|
14172
14151
|
|
|
14173
|
-
export { AddCourseComponent, AddDesignationComponent, AddPersonalisationComponent, AiCbpComponent, AiCbpModule, AiCbpService, ApprovalRequestFormComponent, ApprovalRequestsComponent, DashboardComponent, DeleteRoleMappingComponent, DeleteRoleMappingPopupComponent, DesignationApprovalRequestFormComponent, EditCbpPlanComponent, GapAnalysisRecommendedCourseComponent, GenerateCourseRecommendationComponent, InitialScreenComponent, ListPopupComponent, OrderByNamePipe, ProgressDialogComponent,
|
|
14152
|
+
export { AddCourseComponent, AddDesignationComponent, AddPersonalisationComponent, AiCbpComponent, AiCbpModule, AiCbpService, ApprovalRequestFormComponent, ApprovalRequestsComponent, DashboardComponent, DeleteRoleMappingComponent, DeleteRoleMappingPopupComponent, DesignationApprovalRequestFormComponent, EditCbpPlanComponent, GapAnalysisRecommendedCourseComponent, GenerateCourseRecommendationComponent, InitialScreenComponent, ListPopupComponent, OrderByNamePipe, ProgressDialogComponent, PublishApproveRequestFormComponent, RegenerateConfirmationDialog, RejectItemRequestFormComponent, RejectRequestFormComponent, ReviewRequestComponent, RoleMappingGenerationComponent, RoleMappingListComponent, SuggestMoreCoursesComponent, UpdateDesignationHierarchyComponent, UploadDialogComponent, UploadDocumentPageComponent, ViewCbpPlanComponent, ViewCourseRecommendationComponent, ViewFinalCbpPlanComponent };
|
|
14174
14153
|
//# sourceMappingURL=sunbird-cb-cbp-ai.mjs.map
|