@sunbird-cb/cbp-ai 0.1.62 → 0.1.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/esm2022/lib/components/add-designation/add-designation.component.mjs +26 -24
  2. package/esm2022/lib/components/approval-request-form/approval-request-form.component.mjs +2 -2
  3. package/esm2022/lib/components/approval-requests/approval-requests.component.mjs +12 -4
  4. package/esm2022/lib/components/designation-approval-request-form/designation-approval-request-form.component.mjs +6 -6
  5. package/esm2022/lib/components/edit-cbp-plan/edit-cbp-plan.component.mjs +14 -3
  6. package/esm2022/lib/components/publish-request-form/publish-approve-request-form.component.mjs +3 -3
  7. package/esm2022/lib/components/review-request/review-request.component.mjs +24 -19
  8. package/esm2022/lib/components/role-mapping-list/role-mapping-list.component.mjs +8 -4
  9. package/esm2022/lib/modules/initial-screen/initial-screen.component.mjs +5 -1
  10. package/esm2022/lib/modules/shared/services/init.service.mjs +1 -1
  11. package/esm2022/lib/modules/shared/services/shared.service.mjs +4 -4
  12. package/fesm2022/sunbird-cb-cbp-ai.mjs +100 -67
  13. package/fesm2022/sunbird-cb-cbp-ai.mjs.map +1 -1
  14. package/lib/components/add-designation/add-designation.component.d.ts +1 -0
  15. package/lib/components/add-designation/add-designation.component.d.ts.map +1 -1
  16. package/lib/components/approval-requests/approval-requests.component.d.ts +4 -0
  17. package/lib/components/approval-requests/approval-requests.component.d.ts.map +1 -1
  18. package/lib/components/edit-cbp-plan/edit-cbp-plan.component.d.ts.map +1 -1
  19. package/lib/components/review-request/review-request.component.d.ts +4 -3
  20. package/lib/components/review-request/review-request.component.d.ts.map +1 -1
  21. package/lib/components/role-mapping-list/role-mapping-list.component.d.ts +1 -0
  22. package/lib/components/role-mapping-list/role-mapping-list.component.d.ts.map +1 -1
  23. package/lib/modules/initial-screen/initial-screen.component.d.ts.map +1 -1
  24. package/package.json +1 -1
  25. package/sunbird-cb-cbp-ai-0.1.64.tgz +0 -0
  26. package/sunbird-cb-cbp-ai-0.1.62.tgz +0 -0
package/fesm2022/sunbird-cb-cbp-ai.mjs CHANGED
@@ -8,7 +8,6 @@ import * as i2 from '@angular/forms';
8
8
  import { Validators, FormControl, FormGroup, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
9
9
  import { map, debounceTime, distinctUntilChanged, startWith, finalize, switchMap, catchError, tap, takeWhile, takeUntil, take } from 'rxjs/operators';
10
10
  import * as _ from 'lodash';
11
- import ___default from 'lodash';
12
11
  import * as i1 from '@angular/common/http';
13
12
  import { HttpHeaders, HttpParams } from '@angular/common/http';
14
13
  import { Subject, interval, of, forkJoin, concat, fromEvent } from 'rxjs';
@@ -1069,21 +1068,21 @@ class SharedService {
1069
1068
  }
1070
1069
  viewMDOApprovalRequests(request_id) {
1071
1070
  let mdoBaseUrl = 'http://localhost:3000';
1072
- return this.http.get(`${this.mdoBaseUrl}/${API_END_POINTS$1.VIEW_MDO_APPROVAL_REQUEST}/${request_id}`)
1071
+ return this.http.get(`${mdoBaseUrl}/${API_END_POINTS$1.VIEW_MDO_APPROVAL_REQUEST}/${request_id}`)
1073
1072
  .pipe(map((response) => {
1074
1073
  return response;
1075
1074
  }));
1076
1075
  }
1077
1076
  approveAndPublishMDOApprovalRequests(request) {
1078
1077
  let mdoBaseUrl = 'http://localhost:3000';
1079
- return this.http.post(`${this.mdoBaseUrl}/${API_END_POINTS$1.APPROVE_AND_PUBLISH_MDO_APPROVAL_REQUEST}`, request)
1078
+ return this.http.post(`${mdoBaseUrl}/${API_END_POINTS$1.APPROVE_AND_PUBLISH_MDO_APPROVAL_REQUEST}`, request)
1080
1079
  .pipe(map((response) => {
1081
1080
  return response;
1082
1081
  }));
1083
1082
  }
1084
1083
  rejectMDOApprovalRequests(request) {
1085
1084
  let mdoBaseUrl = 'http://localhost:3000';
1086
- return this.http.post(`${this.mdoBaseUrl}/${API_END_POINTS$1.REJECT_APPROVAL_REQUEST}`, request)
1085
+ return this.http.post(`${mdoBaseUrl}/${API_END_POINTS$1.REJECT_APPROVAL_REQUEST}`, request)
1087
1086
  .pipe(map((response) => {
1088
1087
  return response;
1089
1088
  }));
@@ -1325,7 +1324,7 @@ class ApprovalRequestFormComponent {
1325
1324
  }))
1326
1325
  .subscribe({
1327
1326
  next: (res) => {
1328
- const content = ___default.get(res, 'admins', []);
1327
+ const content = _.get(res, 'admins', []);
1329
1328
  console.log('content--', content);
1330
1329
  const mapped = content.map((item) => ({
1331
1330
  id: item?.id,
@@ -1336,7 +1335,7 @@ class ApprovalRequestFormComponent {
1336
1335
  }));
1337
1336
  // total count may be present in different keys depending on API version.
1338
1337
  // Prefer 'result.result.totalcount' (legacy lower-case) then data.totalCount, then totalCount
1339
- const total = ___default.get(res, 'count', ___default.get(res, 'count', ___default.get(res, 'count', 0)));
1338
+ const total = _.get(res, 'count', _.get(res, 'count', _.get(res, 'count', 0)));
1340
1339
  this.defaultSearchmdoCount = total;
1341
1340
  // If offset is zero (first page) replace backup, otherwise append + dedupe
1342
1341
  if (!this.masterData['mdoBackup'] || reqOffset === 0) {
@@ -1344,7 +1343,7 @@ class ApprovalRequestFormComponent {
1344
1343
  }
1345
1344
  else {
1346
1345
  const combined = (this.masterData['mdoBackup'] || []).concat(mapped);
1347
- this.masterData['mdoBackup'] = ___default.uniqBy(combined, (it) => (it?.name || '').toLowerCase());
1346
+ this.masterData['mdoBackup'] = _.uniqBy(combined, (it) => (it?.name || '').toLowerCase());
1348
1347
  }
1349
1348
  // If server returned no new items, mark as no-more-data to stop further scroll requests
1350
1349
  if (!mapped || mapped?.length === 0) {
@@ -1709,10 +1708,17 @@ class EditCbpPlanComponent {
1709
1708
  "activities": activities,
1710
1709
  "competencies": formData.competencies
1711
1710
  };
1711
+ console.log('masterData?.designation', this.masterData?.designation);
1712
1712
  if (formData?.igot_designation_id) {
1713
1713
  req["igot_designation_id"] = formData?.igot_designation_id || '',
1714
1714
  req["designation_name"] = formData?.designation_name ? formData.designation_name : '';
1715
1715
  }
1716
+ else {
1717
+ console.log('masterData?.designation', this.masterData?.designation);
1718
+ req["designation_name"] = formData?.designation_name ? formData.designation_name : '';
1719
+ const selectedDesignation = this.masterData?.designation?.find((item) => item?.name?.toLowerCase() === formData?.designation_name?.toLowerCase());
1720
+ req["igot_designation_id"] = selectedDesignation?.igot_designation_id || '';
1721
+ }
1716
1722
  if (this.sharedService.fromMdoPortal) {
1717
1723
  req['request_id'] = this.requestRowData?.demand_id;
1718
1724
  req['item_id'] = this.planData?.id;
@@ -2022,12 +2028,14 @@ class EditCbpPlanComponent {
2022
2028
  }))
2023
2029
  .subscribe({
2024
2030
  next: (res) => {
2025
- const content = ___default.get(res, 'result.result.data', []);
2031
+ const content = _.get(res, 'result.result.data', []);
2026
2032
  const mapped = content.map((item) => ({
2027
2033
  name: item?.designation || '',
2028
2034
  status: item?.status || 'Active',
2035
+ igot_designation_name: item?.designation || '',
2036
+ igot_designation_id: item?.id || ''
2029
2037
  }));
2030
- const total = ___default.get(res, 'result.result.totalcount', ___default.get(res, 'result.result.data.totalCount', ___default.get(res, 'result.result.totalCount', 0)));
2038
+ const total = _.get(res, 'result.result.totalcount', _.get(res, 'result.result.data.totalCount', _.get(res, 'result.result.totalCount', 0)));
2031
2039
  this.defaultSearchDesignationCount = total;
2032
2040
  // =========================
2033
2041
  // SEARCH MODE
@@ -2047,7 +2055,7 @@ class EditCbpPlanComponent {
2047
2055
  }
2048
2056
  else {
2049
2057
  const combined = (this.masterData['designationBackup'] || []).concat(mapped);
2050
- this.masterData['designationBackup'] = ___default.uniqBy(combined, (it) => (it?.name || '').toLowerCase());
2058
+ this.masterData['designationBackup'] = _.uniqBy(combined, (it) => (it?.name || '').toLowerCase());
2051
2059
  }
2052
2060
  this.masterData.designation =
2053
2061
  (this.masterData.designationBackup || []).slice(0, this.designationListLoadCount);
@@ -2129,7 +2137,9 @@ class EditCbpPlanComponent {
2129
2137
  selectedObj = {
2130
2138
  name: selectedDesignation,
2131
2139
  status: 'Active',
2132
- id: 'custom-' + Date.now() + '-' + Math.random()
2140
+ id: 'custom-' + Date.now() + '-' + Math.random(),
2141
+ igot_designation_name: selectedDesignation,
2142
+ igot_designation_id: 'custom-' + Date.now() + '-' + Math.random(),
2133
2143
  };
2134
2144
  }
2135
2145
  // 🔥 Move to top
@@ -5973,11 +5983,11 @@ class PublishApproveRequestFormComponent {
5973
5983
  });
5974
5984
  }
5975
5985
  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 }); }
5976
- 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\" [min]=\"minDate\">\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:#444!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;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"] }] }); }
5986
+ 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\" [min]=\"minDate\">\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 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:#444!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;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"] }] }); }
5977
5987
  }
5978
5988
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PublishApproveRequestFormComponent, decorators: [{
5979
5989
  type: Component,
5980
- 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\" [min]=\"minDate\">\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:#444!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;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"] }]
5990
+ 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\" [min]=\"minDate\">\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 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:#444!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;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"] }]
5981
5991
  }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
5982
5992
  type: Inject,
5983
5993
  args: [MAT_DIALOG_DATA]
@@ -6158,6 +6168,16 @@ class ReviewRequestComponent {
6158
6168
  this.sharedService.viewMDOApprovalRequests(requestId).subscribe({
6159
6169
  next: (res) => {
6160
6170
  console.log('res', res);
6171
+ if (res && res.status &&
6172
+ (res.status?.toLowerCase() !== 'pending' ||
6173
+ res.status?.toLowerCase() !== 'approved' ||
6174
+ res.status?.toLowerCase() !== 'rejected')) {
6175
+ this.snackBar.open('This Request is already revoked', 'X', {
6176
+ duration: 3000,
6177
+ panelClass: ['snackbar-error']
6178
+ });
6179
+ this.router.navigate(['/app/home/ai-cbp-requests']);
6180
+ }
6161
6181
  this.requestData = res;
6162
6182
  this.sharedService.requestData = res;
6163
6183
  this.request = res;
@@ -6204,9 +6224,8 @@ class ReviewRequestComponent {
6204
6224
  return competencies?.filter(c => c.type === type) || [];
6205
6225
  }
6206
6226
  backToApprovalRequest() {
6207
- if (this.portalData && this.portalData?.parentAppData && this.portalData?.parentAppData?.fromPortal &&
6208
- this.portalData?.parentAppData?.fromPortal === 'mdo') {
6209
- history.back();
6227
+ if (this.sharedService.fromMdoPortal) {
6228
+ this.router.navigate(['/app/home/ai-cbp-requests']);
6210
6229
  }
6211
6230
  else {
6212
6231
  this.router.navigate(['/ai/approve-requests']);
@@ -6286,8 +6305,7 @@ class ReviewRequestComponent {
6286
6305
  // // Refresh data or show a toast here
6287
6306
  // }
6288
6307
  const requestId = this.route.snapshot.paramMap.get('request_id');
6289
- if (this.portalData && this.portalData?.parentAppData && this.portalData?.parentAppData?.fromPortal &&
6290
- this.portalData?.parentAppData?.fromPortal === 'mdo') {
6308
+ if (this.sharedService.fromMdoPortal) {
6291
6309
  this.getMDORequestDetails(requestId);
6292
6310
  }
6293
6311
  });
@@ -6313,7 +6331,9 @@ class ReviewRequestComponent {
6313
6331
  }
6314
6332
  viewCourseRecommendation(element, menuTrigger) {
6315
6333
  console.log('View Course Recommendation clicked', element);
6316
- menuTrigger.closeMenu();
6334
+ if (menuTrigger) {
6335
+ menuTrigger.closeMenu();
6336
+ }
6317
6337
  this.activeRowElement = element;
6318
6338
  console.log('Edit Role Mapping clicked', element);
6319
6339
  // Navigate or open modal
@@ -6332,8 +6352,7 @@ class ReviewRequestComponent {
6332
6352
  // Refresh data or show a toast here
6333
6353
  console.log(this.sharedService.cbpPlanFinalObj);
6334
6354
  const requestId = this.route.snapshot.paramMap.get('request_id');
6335
- if (this.portalData && this.portalData?.parentAppData && this.portalData?.parentAppData?.fromPortal &&
6336
- this.portalData?.parentAppData?.fromPortal === 'mdo') {
6355
+ if (this.sharedService.fromMdoPortal) {
6337
6356
  this.getMDORequestDetails(requestId);
6338
6357
  }
6339
6358
  }
@@ -6356,8 +6375,7 @@ class ReviewRequestComponent {
6356
6375
  // Refresh data or show a toast here
6357
6376
  console.log(this.sharedService.cbpPlanFinalObj);
6358
6377
  const requestId = this.route.snapshot.paramMap.get('request_id');
6359
- if (this.portalData && this.portalData?.parentAppData && this.portalData?.parentAppData?.fromPortal &&
6360
- this.portalData?.parentAppData?.fromPortal === 'mdo') {
6378
+ if (this.sharedService.fromMdoPortal) {
6361
6379
  this.getMDORequestDetails(requestId);
6362
6380
  }
6363
6381
  }
@@ -6380,8 +6398,7 @@ class ReviewRequestComponent {
6380
6398
  // Refresh data or show a toast here
6381
6399
  console.log(this.sharedService.cbpPlanFinalObj);
6382
6400
  const requestId = this.route.snapshot.paramMap.get('request_id');
6383
- if (this.portalData && this.portalData?.parentAppData && this.portalData?.parentAppData?.fromPortal &&
6384
- this.portalData?.parentAppData?.fromPortal === 'mdo') {
6401
+ if (this.sharedService.fromMdoPortal) {
6385
6402
  this.getMDORequestDetails(requestId);
6386
6403
  }
6387
6404
  }
@@ -6410,8 +6427,7 @@ class ReviewRequestComponent {
6410
6427
  // Refresh data or show a toast here
6411
6428
  console.log(this.sharedService.cbpPlanFinalObj);
6412
6429
  const requestId = this.route.snapshot.paramMap.get('request_id');
6413
- if (this.portalData && this.portalData?.parentAppData && this.portalData?.parentAppData?.fromPortal &&
6414
- this.portalData?.parentAppData?.fromPortal === 'mdo') {
6430
+ if (this.sharedService.fromMdoPortal) {
6415
6431
  this.getMDORequestDetails(requestId);
6416
6432
  }
6417
6433
  }
@@ -6435,8 +6451,7 @@ class ReviewRequestComponent {
6435
6451
  duration: 3000,
6436
6452
  panelClass: ['snackbar-success']
6437
6453
  });
6438
- if (this.portalData && this.portalData?.parentAppData && this.portalData?.parentAppData?.fromPortal &&
6439
- this.portalData?.parentAppData?.fromPortal === 'mdo') {
6454
+ if (this.sharedService.fromMdoPortal) {
6440
6455
  this.getMDORequestDetails(requestId);
6441
6456
  }
6442
6457
  },
@@ -6454,11 +6469,11 @@ class ReviewRequestComponent {
6454
6469
  });
6455
6470
  }
6456
6471
  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 }); }
6457
- 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}}</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>\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 \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 <ng-container *ngIf=\"sharedService.fromMdoPortal\">\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" }] }); }
6472
+ 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' ) && sharedService.fromMdoPortal\">\n <div class=\"action-btn-wrapper\">\n\n <button mat-raised-button class=\"approve-btn\" (click)=\"approveAndPublish()\">\n\n \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}}</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 class=\"mt-20\"\n *ngIf=\"(element?.status === 'failed' || element?.status === 'FAILED') && (sharedService?.fromMdoPortal) === '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 <div class=\"mt-20\">\n <button mat-raised-button class=\"view-course-btn\" (click)=\"viewCourseRecommendation(element)\">\n <mat-icon>visibility</mat-icon>\n View Course Recommendation\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>\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 \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 <ng-container *ngIf=\"sharedService.fromMdoPortal\">\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}.mt-20{margin-top:20px}\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" }] }); }
6458
6473
  }
6459
6474
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ReviewRequestComponent, decorators: [{
6460
6475
  type: Component,
6461
- args: [{ selector: 'app-review-request', 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}}</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>\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 \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 <ng-container *ngIf=\"sharedService.fromMdoPortal\">\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"] }]
6476
+ args: [{ selector: 'app-review-request', 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' ) && sharedService.fromMdoPortal\">\n <div class=\"action-btn-wrapper\">\n\n <button mat-raised-button class=\"approve-btn\" (click)=\"approveAndPublish()\">\n\n \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}}</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 class=\"mt-20\"\n *ngIf=\"(element?.status === 'failed' || element?.status === 'FAILED') && (sharedService?.fromMdoPortal) === '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 <div class=\"mt-20\">\n <button mat-raised-button class=\"view-course-btn\" (click)=\"viewCourseRecommendation(element)\">\n <mat-icon>visibility</mat-icon>\n View Course Recommendation\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>\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 \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 <ng-container *ngIf=\"sharedService.fromMdoPortal\">\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}.mt-20{margin-top:20px}\n"] }]
6462
6477
  }], ctorParameters: function () { return [{ type: SharedService }, { type: i3$1.MatSnackBar }, { type: i3.ActivatedRoute }, { type: i3.Router }, { type: i1$1.MatDialog }]; }, propDecorators: { paginator: [{
6463
6478
  type: ViewChild,
6464
6479
  args: [MatPaginator]
@@ -6521,6 +6536,7 @@ class ApprovalRequestsComponent {
6521
6536
  this.pageSize = 10;
6522
6537
  this.totalRecords = 0;
6523
6538
  this.showRejectPopupFlag = false;
6539
+ this.showRevokeRequestPopupFlag = false;
6524
6540
  this.roleMappingForm = this.fb.group({
6525
6541
  ministryType: ['ministry', Validators.required],
6526
6542
  ministry: [null, Validators.required],
@@ -6772,10 +6788,14 @@ class ApprovalRequestsComponent {
6772
6788
  this.router.navigate(['/ai/review-request', request.id]);
6773
6789
  }
6774
6790
  revokeApprovalRequest(request) {
6791
+ this.showRevokeRequestPopupFlag = true;
6792
+ this.revokeRequestedRequest = request;
6775
6793
  console.log('request--', request);
6794
+ }
6795
+ revokeApprovalRequestConfirm() {
6776
6796
  this.loading = true;
6777
6797
  let reqBody = {
6778
- "request_id": request?.id
6798
+ "request_id": this.revokeRequestedRequest?.id
6779
6799
  };
6780
6800
  this.sharedService.revokeApprovalRequest(reqBody).subscribe({
6781
6801
  next: (res) => {
@@ -6792,6 +6812,9 @@ class ApprovalRequestsComponent {
6792
6812
  }
6793
6813
  });
6794
6814
  }
6815
+ closeRevokePopup() {
6816
+ this.showRevokeRequestPopupFlag = false;
6817
+ }
6795
6818
  onOpened(opened) {
6796
6819
  this.panelOpen = opened;
6797
6820
  }
@@ -6865,11 +6888,11 @@ class ApprovalRequestsComponent {
6865
6888
  this.showRejectPopupFlag = false;
6866
6889
  }
6867
6890
  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 }); }
6868
- 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 \n </div>\n \n </div>\n </div>\n </div> -->\n\n\n\n\n\n </mat-card>\n <mat-card class=\"\" style=\"z-index: 0;\">\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=\"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 hh:mm:s a'}}\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 class=\"designation-count\">{{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 === 'draft' || request.status === 'DRAFT' || request.status === 'revoke' || request.status === 'REVOKE' || request.status === 'REVOKED' || request.status === 'revoked'\" class=\"draft\"> {{ request.status | titlecase\n }} </span>\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 <span (click)=\"showRejectPopup(request)\" *ngIf=\"request.status === 'rejected' || request.status === 'REJECTED'\" style=\"margin-left: 10px;cursor: pointer;\"><mat-icon class=\"vertical-middle\">remove_red_eye</mat-icon></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 Request\n </button>\n </div>\n <div>\n <button style=\"margin-left: 15px;\" class=\"btn-gray\" *ngIf=\"request.status === 'PENDING' || request.status === 'pending'\" \n (click)=\"revokeApprovalRequest(request)\" matTooltip=\"Revoke Request\">\n <mat-icon>cancel</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<!-- Popup Overlay -->\n<div class=\"popup-overlay\" *ngIf=\"showRejectPopupFlag\">\n <div class=\"popup-card\">\n \n <!-- Close Button -->\n <button class=\"close-btn\" (click)=\"closeRejectPopup()\">&times;</button>\n\n <!-- Title -->\n <h2>Rejection Reason</h2>\n\n <!-- Subtitle -->\n <p class=\"subtitle\">\n This request was rejected for the following reason:\n </p>\n\n <!-- Error Box -->\n <div class=\"error-box\">\n {{rejectionDetail?.reviewer_comments}}\n </div>\n\n </div>\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:12px 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%}.btn-gray{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, rgba(91, 90, 90, .7019607843));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%}.btn-gray:hover{background:var(--Primary-KB-Primary-Light, #1B4CA1)}.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 10px;color:#fff;border-radius:20px}.draft{background:#666;padding:4px 10px;color:#fff;border-radius:20px}.in-progress{background:orange;padding:4px 10px;color:#fff;border-radius:20px}.rejected{background:#d32f2f;padding:4px 10px;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}.designation-count{background:#d1ddf2;padding:9px 13px;border-radius:50%;margin:10px;color:#0f2b5b;text-align:center}.vertical-middle{vertical-align:middle}.popup-overlay{position:fixed;inset:0;background:#00000059;display:flex;justify-content:center;align-items:center;z-index:999}.popup-card{position:relative;width:500px;background:#fff;border-radius:16px;padding:28px 24px 24px;box-shadow:0 10px 30px #00000026;font-family:Arial,sans-serif}.popup-card h2{margin:0;font-size:20px;font-weight:700;color:#1f2937}.popup-card .subtitle{margin-top:10px;font-size:14px;color:#6b7280;line-height:1.4}.close-btn{position:absolute;top:16px;right:16px;width:32px;height:32px;border:2px solid #94a3b8;border-radius:50%;background:transparent;color:#64748b;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s ease}.close-btn:hover{background:#f1f5f9}.error-box{margin-top:24px;padding:18px;border:1px solid #f5b5b5;background:#fff5f5;border-radius:12px;color:#c53030;font-size:18px;line-height:1.5}\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" }] }); }
6891
+ 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 \n </div>\n \n </div>\n </div>\n </div> -->\n\n\n\n\n\n </mat-card>\n <mat-card class=\"\" style=\"z-index: 0;padding:6px 0\">\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=\"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 Name\" 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-15\" style=\"font-family: 'Lato'; font-size: 18px; margin-left: 10px;margin-top: 15px;\">\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: 25%;\">\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: 12%;\"> {{ request.created_at | date: 'MMM d, y hh:mm:s a'}}\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: 10%; text-align: center;\">\n <span class=\"designation-count\">{{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: 10%;\">\n <span *ngIf=\"request.status === 'draft' || request.status === 'DRAFT' || request.status === 'revoke' || request.status === 'REVOKE' || request.status === 'REVOKED' || request.status === 'revoked'\" class=\"draft\"> {{ request.status | titlecase\n }} </span>\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 <span (click)=\"showRejectPopup(request)\" *ngIf=\"request.status === 'rejected' || request.status === 'REJECTED'\" style=\"margin-left: 10px;cursor: pointer;\"><mat-icon class=\"vertical-middle\">remove_red_eye</mat-icon></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 Request\n </button>\n </div>\n <div>\n <button style=\"margin-left: 15px;\" class=\"btn-gray\" *ngIf=\"request.status === 'PENDING' || request.status === 'pending'\" \n (click)=\"revokeApprovalRequest(request)\" matTooltip=\"Revoke Request\">\n <mat-icon>cancel</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<!-- Popup Overlay -->\n<div class=\"popup-overlay\" *ngIf=\"showRejectPopupFlag\">\n <div class=\"popup-card\">\n \n <!-- Close Button -->\n <button class=\"close-btn\" (click)=\"closeRejectPopup()\">&times;</button>\n\n <!-- Title -->\n <h2>Rejection Reason</h2>\n\n <!-- Subtitle -->\n <p class=\"subtitle\">\n This request was rejected for the following reason:\n </p>\n\n <!-- Error Box -->\n <div class=\"error-box\">\n {{rejectionDetail?.reviewer_comments}}\n </div>\n\n </div>\n</div>\n\n<div class=\"popup-overlay\" *ngIf=\"showRevokeRequestPopupFlag\">\n <div class=\"popup-card\">\n \n <!-- Close Button -->\n <button class=\"close-btn\" (click)=\"closeRevokePopup()\">&times;</button>\n\n <!-- Title -->\n <h2>Revoke Request</h2>\n\n <!-- Subtitle -->\n <p class=\"subtitle\">\n User will not be able to edit the revoked request.\n </p>\n <p class=\"subtitle\">\n User will have to recreate the request .\n </p>\n\n <div class=\"popup-footer\">\n <div>\n <input class=\"btn-active-gray\" mat-raised-button type=\"button\" value=\"No\" (click)=\"closeRevokePopup()\" />\n </div>\n <div class=\"ml-10\">\n <button mat-raised-button\n class=\"btn-active\" (click)=\"approveAndPublish()\">\n\n Yes\n </button>\n </div>\n </div>\n\n </div>\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:12px 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%}.btn-gray{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, rgba(91, 90, 90, .7019607843));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;justify-content:center;align-items:center;gap:4px;border:none;width:auto}.btn-gray:hover{background:var(--Primary-KB-Primary-Light, #1B4CA1)}.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:15px}.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 10px;color:#fff;border-radius:20px}.draft{background:#666;padding:4px 10px;color:#fff;border-radius:20px}.in-progress{background:orange;padding:4px 10px;color:#fff;border-radius:20px}.rejected{background:#d32f2f;padding:4px 10px;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:15px!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;margin-top:12px!important}:host ::ng-deep .custom-pagination{background-color:transparent!important}.action-flex{display:flex;gap:10px}.designation-count{background:#d1ddf2;padding:9px 13px;border-radius:50%;margin:10px;color:#0f2b5b;text-align:center}.vertical-middle{vertical-align:middle}.popup-overlay{position:fixed;inset:0;background:#00000059;display:flex;justify-content:center;align-items:center;z-index:999}.popup-card{position:relative;width:500px;background:#fff;border-radius:16px;padding:28px 24px 24px;box-shadow:0 10px 30px #00000026;font-family:Arial,sans-serif}.popup-card h2{margin:0;font-size:20px;font-weight:700;color:#1f2937}.popup-card .subtitle{margin-top:10px;font-size:14px;color:#6b7280;line-height:1.4}.close-btn{position:absolute;top:16px;right:16px;width:32px;height:32px;border:2px solid #94a3b8;border-radius:50%;background:transparent;color:#64748b;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s ease}.close-btn:hover{background:#f1f5f9}.error-box{margin-top:24px;padding:18px;border:1px solid #f5b5b5;background:#fff5f5;border-radius:12px;color:#c53030;font-size:18px;line-height:1.5}.popup-footer{display:flex;flex-direction:row;justify-content:end}.btn-active-gray{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, rgba(91, 90, 90, .7019607843));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}\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" }] }); }
6869
6892
  }
6870
6893
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApprovalRequestsComponent, decorators: [{
6871
6894
  type: Component,
6872
- args: [{ selector: 'app-approval-requests', 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 \n </div>\n \n </div>\n </div>\n </div> -->\n\n\n\n\n\n </mat-card>\n <mat-card class=\"\" style=\"z-index: 0;\">\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=\"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 hh:mm:s a'}}\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 class=\"designation-count\">{{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 === 'draft' || request.status === 'DRAFT' || request.status === 'revoke' || request.status === 'REVOKE' || request.status === 'REVOKED' || request.status === 'revoked'\" class=\"draft\"> {{ request.status | titlecase\n }} </span>\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 <span (click)=\"showRejectPopup(request)\" *ngIf=\"request.status === 'rejected' || request.status === 'REJECTED'\" style=\"margin-left: 10px;cursor: pointer;\"><mat-icon class=\"vertical-middle\">remove_red_eye</mat-icon></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 Request\n </button>\n </div>\n <div>\n <button style=\"margin-left: 15px;\" class=\"btn-gray\" *ngIf=\"request.status === 'PENDING' || request.status === 'pending'\" \n (click)=\"revokeApprovalRequest(request)\" matTooltip=\"Revoke Request\">\n <mat-icon>cancel</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<!-- Popup Overlay -->\n<div class=\"popup-overlay\" *ngIf=\"showRejectPopupFlag\">\n <div class=\"popup-card\">\n \n <!-- Close Button -->\n <button class=\"close-btn\" (click)=\"closeRejectPopup()\">&times;</button>\n\n <!-- Title -->\n <h2>Rejection Reason</h2>\n\n <!-- Subtitle -->\n <p class=\"subtitle\">\n This request was rejected for the following reason:\n </p>\n\n <!-- Error Box -->\n <div class=\"error-box\">\n {{rejectionDetail?.reviewer_comments}}\n </div>\n\n </div>\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:12px 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%}.btn-gray{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, rgba(91, 90, 90, .7019607843));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%}.btn-gray:hover{background:var(--Primary-KB-Primary-Light, #1B4CA1)}.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 10px;color:#fff;border-radius:20px}.draft{background:#666;padding:4px 10px;color:#fff;border-radius:20px}.in-progress{background:orange;padding:4px 10px;color:#fff;border-radius:20px}.rejected{background:#d32f2f;padding:4px 10px;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}.designation-count{background:#d1ddf2;padding:9px 13px;border-radius:50%;margin:10px;color:#0f2b5b;text-align:center}.vertical-middle{vertical-align:middle}.popup-overlay{position:fixed;inset:0;background:#00000059;display:flex;justify-content:center;align-items:center;z-index:999}.popup-card{position:relative;width:500px;background:#fff;border-radius:16px;padding:28px 24px 24px;box-shadow:0 10px 30px #00000026;font-family:Arial,sans-serif}.popup-card h2{margin:0;font-size:20px;font-weight:700;color:#1f2937}.popup-card .subtitle{margin-top:10px;font-size:14px;color:#6b7280;line-height:1.4}.close-btn{position:absolute;top:16px;right:16px;width:32px;height:32px;border:2px solid #94a3b8;border-radius:50%;background:transparent;color:#64748b;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s ease}.close-btn:hover{background:#f1f5f9}.error-box{margin-top:24px;padding:18px;border:1px solid #f5b5b5;background:#fff5f5;border-radius:12px;color:#c53030;font-size:18px;line-height:1.5}\n"] }]
6895
+ args: [{ selector: 'app-approval-requests', 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 \n </div>\n \n </div>\n </div>\n </div> -->\n\n\n\n\n\n </mat-card>\n <mat-card class=\"\" style=\"z-index: 0;padding:6px 0\">\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=\"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 Name\" 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-15\" style=\"font-family: 'Lato'; font-size: 18px; margin-left: 10px;margin-top: 15px;\">\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: 25%;\">\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: 12%;\"> {{ request.created_at | date: 'MMM d, y hh:mm:s a'}}\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: 10%; text-align: center;\">\n <span class=\"designation-count\">{{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: 10%;\">\n <span *ngIf=\"request.status === 'draft' || request.status === 'DRAFT' || request.status === 'revoke' || request.status === 'REVOKE' || request.status === 'REVOKED' || request.status === 'revoked'\" class=\"draft\"> {{ request.status | titlecase\n }} </span>\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 <span (click)=\"showRejectPopup(request)\" *ngIf=\"request.status === 'rejected' || request.status === 'REJECTED'\" style=\"margin-left: 10px;cursor: pointer;\"><mat-icon class=\"vertical-middle\">remove_red_eye</mat-icon></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 Request\n </button>\n </div>\n <div>\n <button style=\"margin-left: 15px;\" class=\"btn-gray\" *ngIf=\"request.status === 'PENDING' || request.status === 'pending'\" \n (click)=\"revokeApprovalRequest(request)\" matTooltip=\"Revoke Request\">\n <mat-icon>cancel</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<!-- Popup Overlay -->\n<div class=\"popup-overlay\" *ngIf=\"showRejectPopupFlag\">\n <div class=\"popup-card\">\n \n <!-- Close Button -->\n <button class=\"close-btn\" (click)=\"closeRejectPopup()\">&times;</button>\n\n <!-- Title -->\n <h2>Rejection Reason</h2>\n\n <!-- Subtitle -->\n <p class=\"subtitle\">\n This request was rejected for the following reason:\n </p>\n\n <!-- Error Box -->\n <div class=\"error-box\">\n {{rejectionDetail?.reviewer_comments}}\n </div>\n\n </div>\n</div>\n\n<div class=\"popup-overlay\" *ngIf=\"showRevokeRequestPopupFlag\">\n <div class=\"popup-card\">\n \n <!-- Close Button -->\n <button class=\"close-btn\" (click)=\"closeRevokePopup()\">&times;</button>\n\n <!-- Title -->\n <h2>Revoke Request</h2>\n\n <!-- Subtitle -->\n <p class=\"subtitle\">\n User will not be able to edit the revoked request.\n </p>\n <p class=\"subtitle\">\n User will have to recreate the request .\n </p>\n\n <div class=\"popup-footer\">\n <div>\n <input class=\"btn-active-gray\" mat-raised-button type=\"button\" value=\"No\" (click)=\"closeRevokePopup()\" />\n </div>\n <div class=\"ml-10\">\n <button mat-raised-button\n class=\"btn-active\" (click)=\"approveAndPublish()\">\n\n Yes\n </button>\n </div>\n </div>\n\n </div>\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:12px 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%}.btn-gray{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, rgba(91, 90, 90, .7019607843));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;justify-content:center;align-items:center;gap:4px;border:none;width:auto}.btn-gray:hover{background:var(--Primary-KB-Primary-Light, #1B4CA1)}.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:15px}.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 10px;color:#fff;border-radius:20px}.draft{background:#666;padding:4px 10px;color:#fff;border-radius:20px}.in-progress{background:orange;padding:4px 10px;color:#fff;border-radius:20px}.rejected{background:#d32f2f;padding:4px 10px;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:15px!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;margin-top:12px!important}:host ::ng-deep .custom-pagination{background-color:transparent!important}.action-flex{display:flex;gap:10px}.designation-count{background:#d1ddf2;padding:9px 13px;border-radius:50%;margin:10px;color:#0f2b5b;text-align:center}.vertical-middle{vertical-align:middle}.popup-overlay{position:fixed;inset:0;background:#00000059;display:flex;justify-content:center;align-items:center;z-index:999}.popup-card{position:relative;width:500px;background:#fff;border-radius:16px;padding:28px 24px 24px;box-shadow:0 10px 30px #00000026;font-family:Arial,sans-serif}.popup-card h2{margin:0;font-size:20px;font-weight:700;color:#1f2937}.popup-card .subtitle{margin-top:10px;font-size:14px;color:#6b7280;line-height:1.4}.close-btn{position:absolute;top:16px;right:16px;width:32px;height:32px;border:2px solid #94a3b8;border-radius:50%;background:transparent;color:#64748b;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s ease}.close-btn:hover{background:#f1f5f9}.error-box{margin-top:24px;padding:18px;border:1px solid #f5b5b5;background:#fff5f5;border-radius:12px;color:#c53030;font-size:18px;line-height:1.5}.popup-footer{display:flex;flex-direction:row;justify-content:end}.btn-active-gray{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, rgba(91, 90, 90, .7019607843));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}\n"] }]
6873
6896
  }], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: SharedService }, { type: i3$1.MatSnackBar }, { type: i2.FormBuilder }, { type: i3.Router }]; }, propDecorators: { paginator: [{
6874
6897
  type: ViewChild,
6875
6898
  args: [MatPaginator]
@@ -12253,12 +12276,15 @@ class AddDesignationComponent {
12253
12276
  this.scrollListenerAttached = false;
12254
12277
  this.masterData = {};
12255
12278
  this.searchDesignationLoadCount = 50;
12279
+ this.matchedDesignationIds = [];
12256
12280
  this.masterData = {
12257
12281
  designationBackup: [],
12258
12282
  designationFiltered: [], // filtered search results
12259
12283
  };
12260
12284
  }
12261
12285
  ngOnInit() {
12286
+ console.log('this.matched_role_mappings', this.data?.matched_role_mappings);
12287
+ this.matchedDesignationIds = this.data?.matched_role_mappings?.map((item) => item?.igot_designation_id) || [];
12262
12288
  this.initializeForm();
12263
12289
  const searchControl = this.designationForm.get('searchDesignation');
12264
12290
  if (searchControl) {
@@ -12304,6 +12330,10 @@ class AddDesignationComponent {
12304
12330
  uploadDoc: [null, []],
12305
12331
  searchDesignation: [''],
12306
12332
  });
12333
+ this.designationForm.get('designation_name')?.valueChanges
12334
+ .subscribe(() => {
12335
+ this.checkCurrentDesignationPresent();
12336
+ });
12307
12337
  }
12308
12338
  onFileChange(event) {
12309
12339
  const file = event.target.files[0];
@@ -12471,7 +12501,11 @@ class AddDesignationComponent {
12471
12501
  .subscribe({
12472
12502
  next: (res) => {
12473
12503
  const content = _.get(res, 'result.result.data', []);
12474
- const mapped = content.map((item) => ({
12504
+ const matchedIds = new Set(this.matchedDesignationIds);
12505
+ const mapped = content
12506
+ .filter((item) => !matchedIds.has(item?.id))
12507
+ .map((item) => ({
12508
+ id: item?.id,
12475
12509
  name: item?.designation || '',
12476
12510
  status: item?.status || 'Active',
12477
12511
  }));
@@ -12530,29 +12564,20 @@ class AddDesignationComponent {
12530
12564
  // FIX 2: Also inject selected items into designationBackup
12531
12565
  checkCurrentDesignationPresent() {
12532
12566
  const selectedDesignations = this.designationForm.get('designation_name')?.value || [];
12533
- if (!selectedDesignations?.length)
12567
+ if (!this.masterData?.designation) {
12534
12568
  return;
12535
- selectedDesignations.forEach((selectedName) => {
12536
- if (!selectedName?.trim())
12537
- return;
12538
- const entry = { name: selectedName, status: 'Active' };
12539
- // ✅ Add to backup so it survives slice replacements on scroll
12540
- const existsInBackup = this.masterData.designationBackup?.some((item) => item?.name?.toLowerCase() === selectedName.toLowerCase());
12541
- if (!existsInBackup) {
12542
- this.masterData.designationBackup = [
12543
- entry,
12544
- ...(this.masterData.designationBackup || [])
12545
- ];
12546
- }
12547
- // Add to visible list too
12548
- const existsInVisibleList = this.masterData.designation?.some((item) => item?.name?.toLowerCase() === selectedName.toLowerCase());
12549
- if (!existsInVisibleList) {
12550
- this.masterData.designation.unshift(entry);
12551
- }
12552
- });
12553
- this.masterData.designation = _.uniqBy(this.masterData.designation, (item) => item?.name?.toLowerCase());
12554
- // ✅ Dedupe backup too
12555
- this.masterData.designationBackup = _.uniqBy(this.masterData.designationBackup, (item) => item?.name?.toLowerCase());
12569
+ }
12570
+ // Create selected entries
12571
+ const selectedItems = selectedDesignations.map((name) => ({
12572
+ name,
12573
+ status: 'Active'
12574
+ }));
12575
+ // Remove selected items from current lists
12576
+ const remainingVisible = (this.masterData.designation || []).filter((item) => !selectedDesignations.some(selected => selected.toLowerCase() === item?.name?.toLowerCase()));
12577
+ const remainingBackup = (this.masterData.designationBackup || []).filter((item) => !selectedDesignations.some(selected => selected.toLowerCase() === item?.name?.toLowerCase()));
12578
+ // Put selected items on top
12579
+ this.masterData.designation = _.uniqBy([...selectedItems, ...remainingVisible], (item) => item?.name?.toLowerCase());
12580
+ this.masterData.designationBackup = _.uniqBy([...selectedItems, ...remainingBackup], (item) => item?.name?.toLowerCase());
12556
12581
  }
12557
12582
  onDesignationDropdownClosed() {
12558
12583
  // Keep the designation value but clear the search input
@@ -12775,11 +12800,11 @@ class DesignationApprovalRequestFormComponent {
12775
12800
  this.approvalRequestForm = this.fb.group({
12776
12801
  division_name: [this.role_mapping_ids?.wing_division_section || '', [
12777
12802
  Validators.required,
12778
- Validators.pattern(/^[A-Za-z0-9 _-]+$/)
12803
+ Validators.pattern(/^[A-Za-z0-9 _/-]+$/)
12779
12804
  ]],
12780
12805
  request_name: [this.role_mapping_ids?.designation_name || '', [
12781
12806
  Validators.required,
12782
- Validators.pattern(/^[A-Za-z0-9 _-]+$/)
12807
+ Validators.pattern(/^[A-Za-z0-9 _/-]+$/)
12783
12808
  ]],
12784
12809
  // searchmdo: [''],
12785
12810
  });
@@ -12894,7 +12919,7 @@ class DesignationApprovalRequestFormComponent {
12894
12919
  }))
12895
12920
  .subscribe({
12896
12921
  next: (res) => {
12897
- const content = ___default.get(res, 'admins', []);
12922
+ const content = _.get(res, 'admins', []);
12898
12923
  console.log('content--', content);
12899
12924
  const mapped = content.map((item) => ({
12900
12925
  id: item?.id,
@@ -12905,7 +12930,7 @@ class DesignationApprovalRequestFormComponent {
12905
12930
  }));
12906
12931
  // total count may be present in different keys depending on API version.
12907
12932
  // Prefer 'result.result.totalcount' (legacy lower-case) then data.totalCount, then totalCount
12908
- const total = ___default.get(res, 'count', ___default.get(res, 'count', ___default.get(res, 'count', 0)));
12933
+ const total = _.get(res, 'count', _.get(res, 'count', _.get(res, 'count', 0)));
12909
12934
  this.defaultSearchmdoCount = total;
12910
12935
  // If offset is zero (first page) replace backup, otherwise append + dedupe
12911
12936
  if (!this.masterData['mdoBackup'] || reqOffset === 0) {
@@ -12913,7 +12938,7 @@ class DesignationApprovalRequestFormComponent {
12913
12938
  }
12914
12939
  else {
12915
12940
  const combined = (this.masterData['mdoBackup'] || []).concat(mapped);
12916
- this.masterData['mdoBackup'] = ___default.uniqBy(combined, (it) => (it?.name || '').toLowerCase());
12941
+ this.masterData['mdoBackup'] = _.uniqBy(combined, (it) => (it?.name || '').toLowerCase());
12917
12942
  }
12918
12943
  // If server returned no new items, mark as no-more-data to stop further scroll requests
12919
12944
  if (!mapped || mapped?.length === 0) {
@@ -13073,11 +13098,11 @@ class DesignationApprovalRequestFormComponent {
13073
13098
  return this.approvalRequestForm.get('searchmdo');
13074
13099
  }
13075
13100
  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 }); }
13076
- 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"] }] }); }
13101
+ 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 Division/Wing 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"] }] }); }
13077
13102
  }
13078
13103
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DesignationApprovalRequestFormComponent, decorators: [{
13079
13104
  type: Component,
13080
- args: [{ selector: 'app-designation-approval-request-form', 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"] }]
13105
+ args: [{ selector: 'app-designation-approval-request-form', 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 Division/Wing 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"] }]
13081
13106
  }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
13082
13107
  type: Inject,
13083
13108
  args: [MAT_DIALOG_DATA]
@@ -13126,6 +13151,7 @@ class RoleMappingListComponent {
13126
13151
  this.matchedDesignationSet = new Set();
13127
13152
  this.masterData = [];
13128
13153
  this.tabFilteredData = []; // after matched/unmatched filter
13154
+ this.matchedRoleMappingData = [];
13129
13155
  }
13130
13156
  ngAfterViewInit() {
13131
13157
  // this.dataSource.paginator = this.paginator;
@@ -13452,7 +13478,7 @@ class RoleMappingListComponent {
13452
13478
  addMoreDesignation() {
13453
13479
  const dialogRef = this.dialog.open(AddDesignationComponent, {
13454
13480
  width: '600px',
13455
- data: { state_center_id: '' },
13481
+ data: { state_center_id: '', matched_role_mappings: this.matchedRoleMappingData },
13456
13482
  panelClass: 'view-cbp-plan-popup',
13457
13483
  minHeight: '300px',
13458
13484
  maxHeight: '90vh',
@@ -13600,6 +13626,7 @@ class RoleMappingListComponent {
13600
13626
  this.sharedService.getMatchedRoleMapping(obj).subscribe((matchedRoleMapping) => {
13601
13627
  console.log('res', res);
13602
13628
  console.log('matchedRoleMapping', matchedRoleMapping);
13629
+ this.matchedRoleMappingData = matchedRoleMapping?.matched_details || [];
13603
13630
  this.matchedRoleMapping = matchedRoleMapping?.matched_count;
13604
13631
  this.matchedDesignationNames =
13605
13632
  matchedRoleMapping?.matched_details?.map(x => x.igot_designation_name?.toLowerCase()) || [];
@@ -13642,6 +13669,7 @@ class RoleMappingListComponent {
13642
13669
  this.sharedService.getMatchedRoleMapping(obj).subscribe((matchedRoleMapping) => {
13643
13670
  console.log('res', res);
13644
13671
  console.log('matchedRoleMapping', matchedRoleMapping);
13672
+ this.matchedRoleMappingData = matchedRoleMapping?.matched_details || [];
13645
13673
  this.matchedRoleMapping = matchedRoleMapping?.matched_count;
13646
13674
  this.matchedDesignationNames =
13647
13675
  matchedRoleMapping?.matched_details?.map(x => x.igot_designation_name?.toLowerCase()) || [];
@@ -13681,6 +13709,7 @@ class RoleMappingListComponent {
13681
13709
  this.sharedService.getMatchedRoleMapping(obj).subscribe((matchedRoleMapping) => {
13682
13710
  console.log('res', res);
13683
13711
  console.log('matchedRoleMapping', matchedRoleMapping);
13712
+ this.matchedRoleMappingData = matchedRoleMapping?.matched_details || [];
13684
13713
  this.matchedRoleMapping = matchedRoleMapping?.matched_count;
13685
13714
  this.matchedDesignationNames =
13686
13715
  matchedRoleMapping?.matched_details?.map(x => x.igot_designation_name?.toLowerCase()) || [];
@@ -13797,11 +13826,11 @@ class RoleMappingListComponent {
13797
13826
  });
13798
13827
  }
13799
13828
  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 }); }
13800
- 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"] }] }); }
13829
+ 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 role mappings available in this category</p>\n </div>\n <!-- <div class=\" margin-top-m no-content-create\">\n <button mat-button type=\"button\" class=\"search-btns\"\n [routerLink]=\"['/app/home/create-request-form']\">Request Content</button>\n </div> -->\n\n </div>\n\n <!-- <mat-paginator *ngIf=\"dataSource?.filteredData?.length > 0\" [pageSize]=\"pageSize\"\n [length]=\"this.requestCount\" [pageSizeOptions]=\"[10,20,40]\"\n (page)=\"onChangePage($event)\"></mat-paginator> -->\n\n\n </div>\n\n\n\n </div>\n </div>\n </mat-card>\n </div>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;font-style:normal;font-weight:700;line-height:150%}:host ::ng-deep input.mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}:host ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}:host ::ng-deep .mat-select-panel{background-color:#fff!important}:host ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:10px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:600px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px 10px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex}.outside-layer{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.designation{color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:700;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.wing-text{color:#000000e0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal}.role-item{color:#000000e0;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.view-final-cbp-plan{display:flex;justify-content:end;align-items:center;gap:8px}.view-final-cbp-plan-text{padding:4px 16px;border-radius:24px;border:2px solid #F3962F;background:var(--white-kb-white-100, #FFF);box-shadow:0 1px 10px #276de599;color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:normal}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cursor-pointer{cursor:pointer}.ml-10{margin-left:10px}.table-container{border-top-left-radius:16px;border-top-right-radius:16px;overflow:auto;background:#fff;max-height:70vh}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;background:#fff;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child):after{content:\"\";position:absolute;top:12px;bottom:12px;right:0;width:1px;background-color:#e0e0e0}.table-header{font-size:16px;font-weight:600;background:#fff!important;color:#333}.table-header-unmatched{font-size:16px;font-weight:600;background:#f4dcde!important;color:#b42318}.table-body{background-color:#fff!important}.table-body-unmatched{background-color:#faf6f7!important}.designation-text-unmatched p{color:#b42318!important}.select-map-flex-container{display:flex;flex-direction:row;justify-content:space-between;width:100%}.select-map-flex{display:flex}.search-container-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;align-items:flex-start}.mt-6{margin-top:1.7rem}.mat-elevation-z1 .mat-mdc-cell{vertical-align:top!important;padding-top:8px;padding-bottom:8px}::ng-deep .radio-style-checkbox .mat-checkbox-frame{border-radius:50%}::ng-deep .radio-style-checkbox .mat-checkbox-background{border-radius:50%}.search-flex{display:flex;flex-direction:row;width:100%}.margin-top-15{margin-top:15px}.btn-active-outline{border-radius:10px;opacity:1;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;width:240px;border:none;background-color:transparent;cursor:pointer}.btn-active-outline-disable{border-radius:10px;opacity:.5;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;width:auto;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:240px;background-color:transparent;cursor:not-allowed}.role-mapping-tabs{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif}.role-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;border:1px solid #d0d5dd;background-color:#f9fafb;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease-in-out}.role-tab.active{border-color:#1b4ca1;background-color:#eff6ff;color:#1b4ca1}.dot{width:10px;height:10px;border-radius:50%;background-color:#1b4ca1}.dot.red{background-color:#b42318}.badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}.badge.blue{background-color:#dbeafe;color:#1b4ca1}.badge.red{background-color:#fee2e2;color:#b42318}\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"] }] }); }
13801
13830
  }
13802
13831
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RoleMappingListComponent, decorators: [{
13803
13832
  type: Component,
13804
- args: [{ selector: 'app-role-mapping-list', template: "<div class=\"role-mapping-container\">\n <div class=\"container-fluid\">\n\n <mat-card class=\"mt-0 pt-0\">\n <div class=\"section-header\">\n\n </div>\n <div class=\"edit-section mt-4\">\n <div class=\"select-map-route-container\">\n <div class=\"select-map-flex-container\">\n <div class=\"select-map-flex\">\n <div class=\"selected-mapping-route\">\n <p>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">\n / {{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n </p>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"moveToInitialScreenLayout('edit')\">\n <mat-icon>edit</mat-icon>Edit\n </div>\n <!-- <div class=\"cursor-pointer ml-10\">-->\n <!-- <button class=\"btn-active cursor-pointer\" (click)=\"moveToInitialScreenLayout('add')\">-->\n <!-- <mat-icon>add</mat-icon>-->\n <!-- Create New CBP-->\n <!-- </button>-->\n <!-- </div>-->\n </div>\n <div>\n <div class=\"view-final-cbp-plan\">\n <!-- <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('cbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div> -->\n\n <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('acbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"search-filter-section mt-2\">\n <div class=\"search flex margin-right-m search-flex\">\n <div class=\"mt-2\">\n <div class=\"search-container\">\n <div class=\"rsearch\">\n <mat-icon\n class=\"color-60 search-icon mat-icon notranslate material-icons mat-icon-no-color\">search</mat-icon>\n <input class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\" label=\"\"\n (input)=\"applyFilter()\" placeholder=\"Search by designation name\" type=\"Standard\">\n <mat-icon *ngIf=\"searchText.trim().length > 0\"\n class=\"color-60 clear-icon mat-icon notranslate material-icons mat-icon-no-color cursor-pointer\"\n (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n <div class=\"pl-2 mt-2\">\n <input [disabled]=\"searchText.trim()?.length === 0\"\n [ngClass]=\"searchText.trim()?.length === 0 ? 'btn-disable':'btn-active'\"\n type=\"button\" value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n <div class=\"filter-section flex margin-top-15\">\n <!-- <div>\n <label class=\"label\">Filter by competency type</label>\n <div>\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select [(value)]=\"selectedValue\" placeholder=\"Select Ministry\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"'test'\">Test</mat-option>\n <mat-option [value]=\"'another'\">Another</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div> -->\n <div class=\"btn-group\">\n <div class=\"ml-2\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Designation\"\n (click)=\"addMoreDesignation()\" />\n </div>\n <div class=\"ml-2\">\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"] }]
13833
+ args: [{ selector: 'app-role-mapping-list', template: "<div class=\"role-mapping-container\">\n <div class=\"container-fluid\">\n\n <mat-card class=\"mt-0 pt-0\">\n <div class=\"section-header\">\n\n </div>\n <div class=\"edit-section mt-4\">\n <div class=\"select-map-route-container\">\n <div class=\"select-map-flex-container\">\n <div class=\"select-map-flex\">\n <div class=\"selected-mapping-route\">\n <p>{{sharedService?.cbpPlanFinalObj?.ministry?.orgName}} <span\n *ngIf=\"sharedService?.cbpPlanFinalObj?.department_name\">\n / {{sharedService?.cbpPlanFinalObj?.department_name}}</span>\n </p>\n </div>\n <div class=\"edit-plan cursor-pointer\" (click)=\"moveToInitialScreenLayout('edit')\">\n <mat-icon>edit</mat-icon>Edit\n </div>\n <!-- <div class=\"cursor-pointer ml-10\">-->\n <!-- <button class=\"btn-active cursor-pointer\" (click)=\"moveToInitialScreenLayout('add')\">-->\n <!-- <mat-icon>add</mat-icon>-->\n <!-- Create New CBP-->\n <!-- </button>-->\n <!-- </div>-->\n </div>\n <div>\n <div class=\"view-final-cbp-plan\">\n <!-- <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('cbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div> -->\n\n <div class=\"view-final-cbp-plan-text cursor-pointer\" (click)=\"viewFinalCBPPlan('acbp')\">\n <span class=\"ai-loader-icon\"><img src=\"assets/icons/ai-loader.gif\"></span><span>View\n Final CBP</span>\n </div>\n\n </div>\n\n </div>\n\n </div>\n </div>\n </div>\n <div class=\"search-filter-section mt-2\">\n <div class=\"search flex margin-right-m search-flex\">\n <div class=\"mt-2\">\n <div class=\"search-container\">\n <div class=\"rsearch\">\n <mat-icon\n class=\"color-60 search-icon mat-icon notranslate material-icons mat-icon-no-color\">search</mat-icon>\n <input class=\"sinput color-60 w-full\" [(ngModel)]=\"searchText\" label=\"\"\n (input)=\"applyFilter()\" placeholder=\"Search by designation name\" type=\"Standard\">\n <mat-icon *ngIf=\"searchText.trim().length > 0\"\n class=\"color-60 clear-icon mat-icon notranslate material-icons mat-icon-no-color cursor-pointer\"\n (click)=\"clearSearch()\">clear</mat-icon>\n </div>\n <div class=\"pl-2 mt-2\">\n <input [disabled]=\"searchText.trim()?.length === 0\"\n [ngClass]=\"searchText.trim()?.length === 0 ? 'btn-disable':'btn-active'\"\n type=\"button\" value=\"Search\" (click)=\"applyFilter()\" />\n </div>\n </div>\n\n\n </div>\n\n\n </div>\n <div class=\"filter-section flex margin-top-15\">\n <!-- <div>\n <label class=\"label\">Filter by competency type</label>\n <div>\n <mat-form-field appearance=\"fill\"\n style=\"background: white; border-radius: 25px; padding: 0 12px;\">\n <mat-select [(value)]=\"selectedValue\" placeholder=\"Select Ministry\"\n style=\"border-radius: 25px; background: white;\">\n <mat-option [value]=\"'test'\">Test</mat-option>\n <mat-option [value]=\"'another'\">Another</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div> -->\n <div class=\"btn-group\">\n <div class=\"ml-2\">\n <input class=\"btn-active\" type=\"button\" value=\"Add More Designation\"\n (click)=\"addMoreDesignation()\" />\n </div>\n <div class=\"ml-2\">\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 role mappings available in this category</p>\n </div>\n <!-- <div class=\" margin-top-m no-content-create\">\n <button mat-button type=\"button\" class=\"search-btns\"\n [routerLink]=\"['/app/home/create-request-form']\">Request Content</button>\n </div> -->\n\n </div>\n\n <!-- <mat-paginator *ngIf=\"dataSource?.filteredData?.length > 0\" [pageSize]=\"pageSize\"\n [length]=\"this.requestCount\" [pageSizeOptions]=\"[10,20,40]\"\n (page)=\"onChangePage($event)\"></mat-paginator> -->\n\n\n </div>\n\n\n\n </div>\n </div>\n </mat-card>\n </div>\n</div>\n\n\n<div class=\"overlay-loader\" *ngIf=\"loading\">\n <mat-spinner diameter=\"50\"></mat-spinner>\n</div>", styles: [".container{margin:10px auto}.sub-heading p{color:#000;font-family:Montserrat;font-size:16px;font-style:normal;font-weight:600;line-height:normal}.radio-label{color:#000;font-family:Lato;font-size:18px;font-style:normal;font-weight:400;line-height:normal}.radio-btn-group{display:flex;width:32px;height:32px;padding:2px;gap:10px}.label{color:var(--Body-Text-Body-Color, #212529);font-family:Lato;font-size:18px;font-style:normal;font-weight:700;line-height:150%}:host ::ng-deep input.mat-form-field{background-color:#fff!important;border-radius:25px!important;padding-left:12px;padding-right:12px;height:42px;width:100%}:host ::ng-deep mat-select{border-radius:25px!important;background-color:#fff!important}:host ::ng-deep .mat-select-panel{background-color:#fff!important}:host ::ng-deep .mat-select-panel .mat-option{border-radius:0!important}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none!important}::ng-deep mat-select .mat-select-placeholder{color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}::ng-deep mat-select .mat-select-value-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;line-height:normal!important;padding-top:0!important;padding-bottom:0!important}::ng-deep mat-select .mat-select-value{display:flex!important;align-items:center!important;height:100%!important}.additional-details textarea{display:flex;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:10px;flex:1 0 0;align-self:stretch;width:100%;color:#0006;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;resize:none}.section-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.btn-disable{border-radius:var(--Radius-Full-Round, 9999999px);opacity:.4;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.btn-group{display:flex;flex-direction:row;justify-content:space-between}.pl-2{padding-left:10px}.search-filter-section{display:flex;flex-direction:row;justify-content:space-between}.search .rsearch{position:relative}.search .search-icon{position:absolute;top:15px;font-size:20px;left:10px}.search .clear-icon{position:absolute;top:15px;font-size:20px;right:10px;color:#666}.search .clear-icon:hover{color:#333}.search .sinput{border-radius:32px;border:1px solid #d5d0d0;padding:15px 36px;font:400 14px Lato;width:600px}.select-map-route-container{display:flex;flex-direction:row}.selected-mapping-route p{color:#1b4ca1;font-family:Lato;font-size:20px;font-style:normal;font-weight:400;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.edit-plan{display:flex;padding:4px 10px;justify-content:center;align-items:center;gap:8px;border-radius:4px;background:#1b4ca129;color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:400;line-height:normal;margin-left:10px}.search-container{display:flex;flex-direction:row}.course-container{display:flex;width:100%;padding:16px;flex-direction:column;align-items:flex-start;gap:24px;grid-row:2/span 1;grid-column:1/span 1;border-radius:12px;border:1px solid var(--borders-black-border-16-black, rgba(0, 0, 0, .16));background:#fff}.course-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.course-pill{display:flex;height:24px;padding:8px;align-items:center;gap:4px;border-radius:16px;border:1px solid var(--borders-border-fill-focussed-4-light-100, #EF951E);background:#fefaf4}.ai-recommened-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #1B4CA1;background:#1b4ca129}.igot-platform-pill{display:flex;padding:4px 8px;align-items:center;gap:8px;border-radius:var(--Radius-4, 4px);border:1px solid #EF951E;background:#ef951e29}.course-title{color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:30px}.course-desc{color:#0009;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.relevancy,.competencies-matched{color:var(--accessbility-shades-with-opacity-kb-greys-black-60, rgba(0, 0, 0, .6));font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal;align-items:center}.percentage{color:#1d8923;font-family:Lato;font-size:14px;font-style:normal;font-weight:800;line-height:normal}.relevancy-container,.competencies-matched-container{display:flex;flex-direction:row;align-items:center}.dash{padding:0 5px}::ng-deep .mat-radio-checked .mat-radio-inner-circle{background:#1b4ca1!important}.course-list-container{display:flex;flex-wrap:wrap;gap:16px}.course-list-item{flex:0 0 48%;box-sizing:border-box;border:1px solid #ccc;padding:16px;background-color:#fff;border-radius:8px}.checked-course-container{display:flex}.ml-2{margin-left:8px}::ng-deep .mat-checkbox-checked .mat-checkbox-background{background:#1b4ca1!important}.ai-recommened-pill-text,.igot-platform-pill-text{color:#1b4ca1;font-family:Lato;font-size:12px;font-style:normal;font-weight:700;line-height:normal}.course-pill-text{color:var(--accessbility-shades-without-opacity-kb-greys-black-87, #212121);text-align:center;font-family:Poppins;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.ai-loader-icon img,.igot-platform-icon img{width:15.714px;height:15.714px;flex-shrink:0}.competency-container{display:flex}.outside-layer{display:flex;padding:4px 12px;justify-content:center;align-items:center;gap:16px;border-radius:12px 4px 4px 12px;border-left:2px solid #F8B861;background:#fde8cc;width:132px}.suggest-courses-header{display:flex;flex-direction:row;justify-content:space-between}.suggest-course-control{display:flex;flex-direction:row}.course-card-container{width:172px;border-radius:3.307px;border:.827px solid var(--borders-border-8-black, rgba(0, 0, 0, .08));background-color:#fff}.highlight-ai{font-family:Montserrat;font-size:24px;font-style:normal;font-weight:600;line-height:normal;background:linear-gradient(90deg,#3b27ff,#2de3d6);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}.ai-loader-icon-medium img{width:40px;height:40px;flex-shrink:0}.heading{color:#000;font-family:Montserrat;font-size:20px;font-style:normal;font-weight:600;line-height:normal;margin:10px 0}.progress-popup{display:flex;flex-direction:column;justify-content:center;align-items:center}.progress-popup .desc{color:#000000de;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.behavioural-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #F8B861;background:linear-gradient(0deg,#f8b86152 0% 100%),#fff;margin:5px 0}.functional-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #E24577;background:linear-gradient(0deg,#e245773d 0% 100%),#fff;margin:5px 0}.domain-pill{display:flex;padding:4px 8px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid #7B47A4;background:linear-gradient(0deg,#7b47a43d 0% 100%),#fff;margin:5px 0}.competency-list{display:flex;flex-direction:row;gap:0px;flex-wrap:wrap}.competency-text{color:#000;font-family:Lato;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.competency-text-behavioral{color:#654321;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-functional{color:#b01669;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.competency-text-domain{color:#301934;font-family:Lato;font-size:14px;font-style:normal;line-height:normal;font-weight:550}.designation{color:#1b4ca1;font-family:Lato;font-size:17px;font-style:normal;font-weight:700;line-height:normal;text-decoration-line:underline;text-decoration-style:solid;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}.wing-text{color:#000000e0;font-family:Lato;font-size:15px;font-style:normal;font-weight:400;line-height:normal}.role-item{color:#000000e0;font-family:Lato;font-size:16px;font-style:normal;font-weight:400;line-height:1.75}.view-final-cbp-plan{display:flex;justify-content:end;align-items:center;gap:8px}.view-final-cbp-plan-text{padding:4px 16px;border-radius:24px;border:2px solid #F3962F;background:var(--white-kb-white-100, #FFF);box-shadow:0 1px 10px #276de599;color:var(--Primary-KB-Primary-Light, #1B4CA1);font-family:Lato;font-size:16px;font-style:normal;font-weight:700;line-height:normal}.btn-active{border-radius:var(--Radius-Full-Round, 9999999px);opacity:1;background:var(--Primary-KB-Primary-Light, #1B4CA1);color:var(--white-kb-white-100, #FFF);text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none}.cursor-pointer{cursor:pointer}.ml-10{margin-left:10px}.table-container{border-top-left-radius:16px;border-top-right-radius:16px;overflow:auto;background:#fff;max-height:70vh}:host ::ng-deep .mat-mdc-header-row{position:sticky;top:0;background:#fff;box-shadow:0 2px 4px #0000001a}:host ::ng-deep .mat-mdc-header-cell{background:#fff;font-weight:600;border-bottom:2px solid #e0e0e0}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child){position:relative;border-right:none}:host ::ng-deep th.mat-mdc-header-cell:not(:last-child):after{content:\"\";position:absolute;top:12px;bottom:12px;right:0;width:1px;background-color:#e0e0e0}.table-header{font-size:16px;font-weight:600;background:#fff!important;color:#333}.table-header-unmatched{font-size:16px;font-weight:600;background:#f4dcde!important;color:#b42318}.table-body{background-color:#fff!important}.table-body-unmatched{background-color:#faf6f7!important}.designation-text-unmatched p{color:#b42318!important}.select-map-flex-container{display:flex;flex-direction:row;justify-content:space-between;width:100%}.select-map-flex{display:flex}.search-container-flex{display:flex;flex-direction:row;width:100%;justify-content:space-between;align-items:flex-start}.mt-6{margin-top:1.7rem}.mat-elevation-z1 .mat-mdc-cell{vertical-align:top!important;padding-top:8px;padding-bottom:8px}::ng-deep .radio-style-checkbox .mat-checkbox-frame{border-radius:50%}::ng-deep .radio-style-checkbox .mat-checkbox-background{border-radius:50%}.search-flex{display:flex;flex-direction:row;width:100%}.margin-top-15{margin-top:15px}.btn-active-outline{border-radius:10px;opacity:1;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;padding:0 16px;justify-content:center;align-items:center;gap:8px;width:240px;border:none;background-color:transparent;cursor:pointer}.btn-active-outline-disable{border-radius:10px;opacity:.5;color:#1b4ca1;border:1px solid #1B4CA1!important;text-align:center;font-family:Lato;font-size:14px;font-style:normal;font-weight:700;line-height:normal;display:flex;height:32px;width:auto;padding:0 16px;justify-content:center;align-items:center;gap:8px;border:none;width:240px;background-color:transparent;cursor:not-allowed}.role-mapping-tabs{display:flex;gap:16px;align-items:center;font-family:Inter,sans-serif}.role-tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:24px;border:1px solid #d0d5dd;background-color:#f9fafb;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease-in-out}.role-tab.active{border-color:#1b4ca1;background-color:#eff6ff;color:#1b4ca1}.dot{width:10px;height:10px;border-radius:50%;background-color:#1b4ca1}.dot.red{background-color:#b42318}.badge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:12px}.badge.blue{background-color:#dbeafe;color:#1b4ca1}.badge.red{background-color:#fee2e2;color:#b42318}\n"] }]
13805
13834
  }], ctorParameters: function () { return [{ type: SharedService }, { type: i1$1.MatDialog }, { type: i3.Router }, { type: i3.ActivatedRoute }]; }, propDecorators: { formData: [{
13806
13835
  type: Input
13807
13836
  }], paginator: [{
@@ -13901,6 +13930,10 @@ class InitialScreenComponent {
13901
13930
  this.loginSuccess = false;
13902
13931
  this.nextStep = 'initial';
13903
13932
  localStorage.clear();
13933
+ window.location.reload();
13934
+ setTimeout(() => {
13935
+ this.router.navigate(['/']);
13936
+ }, 500);
13904
13937
  this.sharedService.logout().subscribe({
13905
13938
  next: (res) => {
13906
13939
  this.snackBar.open('You are logout successfully', 'X', {