@idsoftsource/initial-process 1.8.5 → 1.8.6
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.
|
@@ -15,7 +15,7 @@ import * as i9 from '@auth0/auth0-angular';
|
|
|
15
15
|
import * as i1$1 from '@rangs/auth0-lib';
|
|
16
16
|
import * as i12 from '@ng-select/ng-select';
|
|
17
17
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
18
|
-
import * as i14 from 'ngx-bootstrap/accordion';
|
|
18
|
+
import * as i14$1 from 'ngx-bootstrap/accordion';
|
|
19
19
|
import { AccordionModule } from 'ngx-bootstrap/accordion';
|
|
20
20
|
import { ɵgetDOM as _getDOM } from '@angular/platform-browser';
|
|
21
21
|
import { createTextMaskInputElement } from 'text-mask-core/dist/textMaskCore';
|
|
@@ -23,9 +23,9 @@ import { trigger, state, transition, style, animate } from '@angular/animations'
|
|
|
23
23
|
import { tap, shareReplay, debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
24
24
|
import * as i12$1 from 'ngx-bootstrap/datepicker';
|
|
25
25
|
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
|
|
26
|
-
import
|
|
27
|
-
import * as i12$2 from 'ngx-bootstrap/tooltip';
|
|
26
|
+
import * as i14 from 'ngx-bootstrap/tooltip';
|
|
28
27
|
import { TooltipModule } from 'ngx-bootstrap/tooltip';
|
|
28
|
+
import { ToastrService } from 'ngx-toastr';
|
|
29
29
|
import * as i13 from 'ngx-bootstrap/tabs';
|
|
30
30
|
import { TabsModule } from 'ngx-bootstrap/tabs';
|
|
31
31
|
import { GoogleMapsModule } from '@angular/google-maps';
|
|
@@ -3563,9 +3563,7 @@ class PreviewComponent {
|
|
|
3563
3563
|
}
|
|
3564
3564
|
this.isSavingSkill = true;
|
|
3565
3565
|
try {
|
|
3566
|
-
|
|
3567
|
-
await this.persistSkill(index, !this.hasUnsavedSkillItem(index));
|
|
3568
|
-
}
|
|
3566
|
+
await this.batchPersistSkills(skills);
|
|
3569
3567
|
}
|
|
3570
3568
|
finally {
|
|
3571
3569
|
this.isSavingSkill = false;
|
|
@@ -3595,9 +3593,7 @@ class PreviewComponent {
|
|
|
3595
3593
|
this.showBulkSkillConfirm = false;
|
|
3596
3594
|
this.isSavingSkill = true;
|
|
3597
3595
|
try {
|
|
3598
|
-
|
|
3599
|
-
await this.persistSkill(index, !this.hasUnsavedSkillItem(index));
|
|
3600
|
-
}
|
|
3596
|
+
await this.batchPersistSkills(skills);
|
|
3601
3597
|
}
|
|
3602
3598
|
finally {
|
|
3603
3599
|
this.isSavingSkill = false;
|
|
@@ -3616,9 +3612,7 @@ class PreviewComponent {
|
|
|
3616
3612
|
}
|
|
3617
3613
|
this.isSavingTool = true;
|
|
3618
3614
|
try {
|
|
3619
|
-
|
|
3620
|
-
await this.persistTool(index, !this.hasUnsavedToolItem(index));
|
|
3621
|
-
}
|
|
3615
|
+
await this.batchPersistTools(tools);
|
|
3622
3616
|
}
|
|
3623
3617
|
finally {
|
|
3624
3618
|
this.isSavingTool = false;
|
|
@@ -3648,9 +3642,7 @@ class PreviewComponent {
|
|
|
3648
3642
|
this.showBulkToolConfirm = false;
|
|
3649
3643
|
this.isSavingTool = true;
|
|
3650
3644
|
try {
|
|
3651
|
-
|
|
3652
|
-
await this.persistTool(index, !this.hasUnsavedToolItem(index));
|
|
3653
|
-
}
|
|
3645
|
+
await this.batchPersistTools(tools);
|
|
3654
3646
|
}
|
|
3655
3647
|
finally {
|
|
3656
3648
|
this.isSavingTool = false;
|
|
@@ -4365,6 +4357,52 @@ class PreviewComponent {
|
|
|
4365
4357
|
console.error('Unable to persist skill', err);
|
|
4366
4358
|
}
|
|
4367
4359
|
}
|
|
4360
|
+
async batchPersistSkills(skills) {
|
|
4361
|
+
if (!this.resumeData)
|
|
4362
|
+
return;
|
|
4363
|
+
this.buildUserName();
|
|
4364
|
+
const newIndices = [];
|
|
4365
|
+
const newPayloads = [];
|
|
4366
|
+
for (let i = 0; i < skills.length; i++) {
|
|
4367
|
+
const isEdit = !this.hasUnsavedSkillItem(i);
|
|
4368
|
+
if (isEdit) {
|
|
4369
|
+
if (!this.skillServerIds[i])
|
|
4370
|
+
await this.ensureSkillServerId(i);
|
|
4371
|
+
if (this.skillServerIds[i]) {
|
|
4372
|
+
const payload = this.mapSkills(this.resumeData)[i];
|
|
4373
|
+
if (!payload)
|
|
4374
|
+
continue;
|
|
4375
|
+
payload.id = this.skillServerIds[i];
|
|
4376
|
+
try {
|
|
4377
|
+
const res = await firstValueFrom(this.userSkillSetService.updateUserSkillSet(payload));
|
|
4378
|
+
this.markItemSaved(this.skillServerIds, this.skillLocallySaved, i, this.getCreatedId(res));
|
|
4379
|
+
}
|
|
4380
|
+
catch (err) {
|
|
4381
|
+
console.error('Unable to update skill', err);
|
|
4382
|
+
}
|
|
4383
|
+
continue;
|
|
4384
|
+
}
|
|
4385
|
+
}
|
|
4386
|
+
const payload = this.mapSkills(this.resumeData)[i];
|
|
4387
|
+
if (payload) {
|
|
4388
|
+
newIndices.push(i);
|
|
4389
|
+
newPayloads.push(payload);
|
|
4390
|
+
}
|
|
4391
|
+
}
|
|
4392
|
+
if (newPayloads.length > 0) {
|
|
4393
|
+
try {
|
|
4394
|
+
const res = await firstValueFrom(this.userSkillSetService.createUserSkillSet(newPayloads));
|
|
4395
|
+
const arr = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : null);
|
|
4396
|
+
newIndices.forEach((originalIdx, batchPos) => {
|
|
4397
|
+
const id = arr?.[batchPos]?.id ?? this.getCreatedId(res);
|
|
4398
|
+
this.markItemSaved(this.skillServerIds, this.skillLocallySaved, originalIdx, id);
|
|
4399
|
+
});
|
|
4400
|
+
}
|
|
4401
|
+
catch (err) {
|
|
4402
|
+
console.error('Unable to batch create skills', err);
|
|
4403
|
+
}
|
|
4404
|
+
}
|
|
4405
|
+
}
|
|
4368
4406
|
async persistTool(index, isEdit) {
|
|
4369
4407
|
if (!this.resumeData)
|
|
4370
4408
|
return;
|
|
@@ -4389,6 +4427,52 @@ class PreviewComponent {
|
|
|
4389
4427
|
console.error('Unable to persist tool', err);
|
|
4390
4428
|
}
|
|
4391
4429
|
}
|
|
4430
|
+
async batchPersistTools(tools) {
|
|
4431
|
+
if (!this.resumeData)
|
|
4432
|
+
return;
|
|
4433
|
+
this.buildUserName();
|
|
4434
|
+
const newIndices = [];
|
|
4435
|
+
const newPayloads = [];
|
|
4436
|
+
for (let i = 0; i < tools.length; i++) {
|
|
4437
|
+
const isEdit = !this.hasUnsavedToolItem(i);
|
|
4438
|
+
if (isEdit) {
|
|
4439
|
+
if (!this.toolServerIds[i])
|
|
4440
|
+
await this.ensureToolServerId(i);
|
|
4441
|
+
if (this.toolServerIds[i]) {
|
|
4442
|
+
const payload = this.mapTools(this.resumeData)[i];
|
|
4443
|
+
if (!payload)
|
|
4444
|
+
continue;
|
|
4445
|
+
payload.id = this.toolServerIds[i];
|
|
4446
|
+
try {
|
|
4447
|
+
const res = await firstValueFrom(this.userToolService.updateUserTool(payload));
|
|
4448
|
+
this.markItemSaved(this.toolServerIds, this.toolLocallySaved, i, this.getCreatedId(res));
|
|
4449
|
+
}
|
|
4450
|
+
catch (err) {
|
|
4451
|
+
console.error('Unable to update tool', err);
|
|
4452
|
+
}
|
|
4453
|
+
continue;
|
|
4454
|
+
}
|
|
4455
|
+
}
|
|
4456
|
+
const payload = this.mapTools(this.resumeData)[i];
|
|
4457
|
+
if (payload) {
|
|
4458
|
+
newIndices.push(i);
|
|
4459
|
+
newPayloads.push(payload);
|
|
4460
|
+
}
|
|
4461
|
+
}
|
|
4462
|
+
if (newPayloads.length > 0) {
|
|
4463
|
+
try {
|
|
4464
|
+
const res = await firstValueFrom(this.userToolService.createUserTool(newPayloads));
|
|
4465
|
+
const arr = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : null);
|
|
4466
|
+
newIndices.forEach((originalIdx, batchPos) => {
|
|
4467
|
+
const id = arr?.[batchPos]?.id ?? this.getCreatedId(res);
|
|
4468
|
+
this.markItemSaved(this.toolServerIds, this.toolLocallySaved, originalIdx, id);
|
|
4469
|
+
});
|
|
4470
|
+
}
|
|
4471
|
+
catch (err) {
|
|
4472
|
+
console.error('Unable to batch create tools', err);
|
|
4473
|
+
}
|
|
4474
|
+
}
|
|
4475
|
+
}
|
|
4392
4476
|
async saveAWSFile(sectionFolder) {
|
|
4393
4477
|
if (!this.fileData)
|
|
4394
4478
|
return { fileId: null, fileUrl: null, fileName: null };
|
|
@@ -5143,14 +5227,14 @@ class PreviewComponent {
|
|
|
5143
5227
|
}
|
|
5144
5228
|
}
|
|
5145
5229
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewComponent, deps: [{ token: CredentialingStore }, { token: FileService }, { token: UserSkillSetService }, { token: UserToolService }, { token: UserDocumentService }, { token: UserEducationService }, { token: UserDetailService }, { token: UserExperienceService }, { token: i1$1.TokenService }, { token: i1$1.RoleContextService }, { token: ProvidersService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
|
|
5146
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PreviewComponent, isStandalone: true, selector: "app-preview", inputs: { providerId: "providerId", isResume: "isResume", resumeModel: "resumeModel", providerName: "providerName", roleData: "roleData", cloudfrontUrl: "cloudfrontUrl" }, outputs: { backToParent: "backToParent" }, viewQueries: [{ propertyName: "companyForm", first: true, predicate: ["companyForm"], descendants: true }], ngImport: i0, template: "<div class=\"preview-page-header\" *ngIf=\"!isResume\">\r\n <div class=\"d-flex align-items-center gap-2 mb-1\">\r\n <i class=\"bi bi-file-person-fill text-primary fs-4\"></i>\r\n <h2 class=\"preview-title mb-0\">Review Extracted Information</h2>\r\n </div>\r\n <p class=\"preview-subtitle text-muted\">We\u2019ve automatically extracted details from your uploaded resume. Please review and confirm accuracy before proceeding.</p>\r\n</div>\r\n\r\n\r\n<div [ngClass]=\"isResume ? '' : 'container py-4'\">\r\n <div class=\"section mb-5\">\r\n <div *ngIf=\"details() as data; else loading\">\r\n <div class=\"card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isEditMode()\">\r\n <div class=\"card-body p-0\">\r\n <div class=\"preview-card-gradient\">\r\n <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n <div class=\"d-flex align-items-start gap-3\">\r\n <div class=\"profile-avatar-circle\">\r\n {{ (data.firstName?.[0] || '') }}{{ (data.lastName?.[0] || '') }}\r\n </div>\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n Missing info\r\n </span>\r\n <span class=\"badge border section-flag\"\r\n [ngClass]=\"basicDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n {{ basicDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n </span>\r\n </div>\r\n <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"badge bg-primary-subtle text-primary border p-2\">Email Verified</span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"px-4 py-3\">\r\n <div class=\"row g-4\">\r\n <div class=\"col-12 border-bottom pb-2\">\r\n <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <span class=\"field-label-sm\"><i class=\"bi bi-envelope me-1\"></i>Email</span>\r\n <span class=\"field-value-sm d-block\">{{ data.email }}</span>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <span class=\"field-label-sm\"><i class=\"bi bi-telephone me-1\"></i>Phone</span>\r\n <span class=\"field-value-sm d-block\">{{ data.phone }}</span>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <span class=\"field-label-sm\"><i class=\"bi bi-geo-alt me-1\"></i>Location</span>\r\n <span class=\"field-value-sm d-block\">{{ data.address }}, {{ data.city }}, {{ data.state }}, {{ data.zipCode }}, {{ data.country }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer bg-light d-flex align-items-center justify-content-between\">\r\n <span *ngIf=\"!basicDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n <i class=\"bi bi-exclamation-circle me-1\"></i> Click \"Edit\" to review and save your basic info.\r\n </span>\r\n <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n <i class=\"bi bi-check-circle me-1\"></i> Basic details saved.\r\n </span>\r\n <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card shadow-sm border-0\" *ngIf=\"isEditMode()\">\r\n <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n <div class=\"card-body p-4\">\r\n <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.firstName\" name=\"fName\"\r\n placeholder=\"First Name\" required #fName=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.lastName\" name=\"lName\"\r\n placeholder=\"Last Name\" required #lName=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is\r\n required</div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Summary</label>\r\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n placeholder=\"Summary\"></textarea>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n <input type=\"email\" class=\"form-control\" [(ngModel)]=\"tempProfile.email\" name=\"email\" placeholder=\"Email\"\r\n required email #email=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.phone\" (input)=\"phoneMask($event, 'profile')\"\r\n name=\"phone\" placeholder=\"Phone (10 digits)\" (keypress)=\"allowOnlyNumbers($event)\"\r\n required pattern=\"^\\d{10}$\" maxlength=\"14\" inputmode=\"numeric\" #phone=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-3\">\r\n <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n <input ngx-google-places-autocomplete [options]=\"options\" type=\"text\" class=\"form-control\" (onAddressChange)=\"AddressChangeUser($event)\" [(ngModel)]=\"tempProfile.address\" name=\"address\"\r\n placeholder=\"Home Address\" required #address=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home\r\n address is required</div>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.city\" name=\"city\" placeholder=\"City\"\r\n required #city=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.state\" name=\"state\" placeholder=\"State\"\r\n required #state=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is\r\n required</div>\r\n </div>\r\n\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.zipCode\"\r\n (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\" name=\"zipCode\" placeholder=\"Zip Code\"\r\n required pattern=\"^\\d{1,6}$\" maxlength=\"6\" inputmode=\"numeric\" #zipCode=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code\r\n is required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"zipCode.errors?.['pattern'] && (zipCode.dirty || zipCode.touched)\">\r\n Zip code must be up to 6 digits\r\n </div>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.country\" name=\"country\"\r\n placeholder=\"Country\" required #country=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country\r\n is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\"></span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"jobTitle\"\r\n placeholder=\"Job Title\" #jobTitle=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job\r\n title is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n name=\"yearsOfExperience\" placeholder=\"Years of Experience\" required min=\"0\"\r\n #yearsOfExperience=\"ngModel\">\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"yearsOfExperience.invalid && (yearsOfExperience.dirty || yearsOfExperience.touched)\">\r\n Years of experience is required\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingBasic\" (click)=\"save()\">\r\n <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingBasic ? 'Saving...' : 'Save Changes' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\" *ngIf=\"roleData.role.name == 'Provider'\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-building-fill section-header-icon text-secondary\"></i>\r\n <h5 class=\"fw-bold mb-0\">Company Details</h5>\r\n <span *ngIf=\"companyDetailsSaved\"\r\n class=\"badge border section-flag bg-success-subtle text-success\">\r\n Saved\r\n </span>\r\n <span *ngIf=\"!companyDetailsSaved\"\r\n class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n Not saved yet\r\n </span>\r\n </div>\r\n <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleCompanyEdit()\">Edit</button>\r\n </div>\r\n\r\n <!-- Company Details Display Mode -->\r\n <div class=\"card shadow-sm border-0\" *ngIf=\"!isCompanyEditMode()\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row g-4\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Name</label>\r\n <span class=\"fw-bold small\">{{ companyDetails()?.companyName}}</span>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Phone</label>\r\n <span class=\"fw-bold small\">{{ companyDetails()?.companyPhoneNumber}}</span>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Company Address</label>\r\n <span class=\"small\">{{ companyDetails()?.address1}}, {{ companyDetails()?.city}}, {{ companyDetails()?.state}}, {{ companyDetails()?.zipcode}}, {{ companyDetails()?.country}}</span>\r\n </div>\r\n <div class=\"col-md-6\" *ngIf=\"companyLogoUrl()\">\r\n <label class=\"small text-muted d-block\">Company Logo</label>\r\n <img [src]=\"companyLogoUrl()\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Company Details Edit Mode -->\r\n <div class=\"card shadow-sm border-0\" *ngIf=\"isCompanyEditMode()\">\r\n <div class=\"card-header bg-white fw-bold\">Update Company Details</div>\r\n <div class=\"card-body p-4\">\r\n <form class=\"row g-3\" #companyForm=\"ngForm\" novalidate>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError }\"\r\n [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"companyName\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">\r\n Company name is required\r\n </div>\r\n <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">\r\n {{ companyNameError }}\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n <input (input)=\"phoneMask($event, 'company')\" type=\"text\" maxlength=\"14\" (keypress)=\"allowOnlyNumbers($event)\" inputmode=\"numeric\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"companyPhoneNumber\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">\r\n Company phone is required\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Address <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" ngx-google-places-autocomplete class=\"form-control form-control-sm\" (onAddressChange)=\"AddressChangeCompany($event)\"\r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.address1?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.address1\" name=\"address1\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">\r\n Address is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.city\" name=\"city\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">\r\n City is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.state\" name=\"state\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">\r\n State is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"zipcode\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">\r\n Zip code is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.country\" name=\"country\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">\r\n Country is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Logo</label>\r\n <input #uploadCompanyFile type=\"file\" accept=\"image/*\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n </div>\r\n <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n <label class=\"small text-muted d-block\">Logo Preview</label>\r\n <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n </div>\r\n </form>\r\n </div>\r\n <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelCompanyEdit()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCompany\" \r\n (click)=\"saveCompanyDetails()\">\r\n <span *ngIf=\"isSavingCompany\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCompany ? 'Saving...' : 'Save Changes' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-briefcase-fill section-header-icon\" style=\"color:#4077ad;\"></i>\r\n <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n <span *ngIf=\"experience().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"workSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ workSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"experience().length === 0 || isSavingWork || isAddingJob() || editingJobIndex() !== null\"\r\n (click)=\"confirmAllWork()\">\r\n <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingWork ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add work experience\" (click)=\"addJob()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><i class=\"bi bi-briefcase\"></i></div>\r\n <p>No work experience added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n <div class=\"list-group list-group-flush shadow-sm rounded-3\">\r\n <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-0 border-0\">\r\n <div class=\"form-panel mb-2\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"newJobTitle\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"newCompany\" />\r\n </div>\r\n <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"newIsCurrent\" id=\"newIsCurrent\" />\r\n <label class=\"form-check-label\" for=\"newIsCurrent\">Current</label>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"newCountry\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"newState\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"newCity\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"newStartDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n name=\"newEndDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is\r\n required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n <textarea rows=\"4\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"newResponsibilities\"></textarea>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onWorkExperienceFileSelected($event)\" name=\"newWorkAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n <span>{{ tempJob()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n <button class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingWork\"\r\n (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-0 border-0 mb-2\">\r\n\r\n <div class=\"work-accent-item p-3 rounded-3 bg-white border\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n <div class=\"item-icon-circle bg-primary-subtle text-primary me-3\">\r\n <i class=\"bi bi-briefcase-fill\"></i>\r\n </div>\r\n <div>\r\n <h6 class=\"mb-0 fw-bold\">{{ job.jobTitle }}</h6>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedWorkItem(i) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedWorkItem(i) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <small class=\"text-muted\">\r\n {{ job.company }} \u2022 {{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n formatMonthYear(job.endDate) }}\r\n </small>\r\n <div *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2\">\r\n\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\" (click)=\"startEditJob(i)\"\r\n title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteJob(i);\"\r\n title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n\r\n\r\n <!-- <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-light p-0\"\r\n style=\"width: 34px; height: 34px;\"\r\n (click)=\"toggleJob(i)\"\r\n title=\"Expand\"\r\n >\r\n <i class=\"bi cursor-pointer\" [ngClass]=\"expandedIndex() === i ? 'bi-chevron-up' : 'bi-chevron-down'\"></i>\r\n </button> -->\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"mt-3 bg-light p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n <ul class=\"mb-0\">\r\n <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n </ul>\r\n </ng-container>\r\n\r\n <ng-template #editJobForm>\r\n <div *ngIf=\"(workIssuesByIndex()[i] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"jobTitle{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"company{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.company)\">Company name is required</div>\r\n </div>\r\n\r\n <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"isCurrent{{ i }}\" id=\"isCurrent{{ i }}\" />\r\n <label class=\"form-check-label\" for=\"isCurrent{{ i }}\">Current</label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"country{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"state{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"city{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"startDate{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n name=\"endDate{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">\r\n End date is required\r\n </div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n <textarea rows=\"4\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"responsibilities{{ i }}\"></textarea>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onWorkExperienceFileSelected($event)\" name=\"workAttachment{{ i }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n <span>{{ tempJob()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-3\" *ngIf=\"editingJobIndex() === i\">\r\n <button class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingWork\"\r\n (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-patch-check-fill section-header-icon text-success\"></i>\r\n <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n <span *ngIf=\"certs().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"certificationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ certificationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"certs().length === 0 || isSavingCertification || isAddingCertification() || editingCertificationIndex() !== null\"\r\n (click)=\"confirmAllCertifications()\">\r\n <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCertification ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add certification\" (click)=\"addCertification()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><i class=\"bi bi-patch-check\"></i></div>\r\n <p>No certifications added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n\r\n <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3 px-3\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"newCertName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\" name=\"newCertOrg\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"newCertState\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certification Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\" name=\"newCertCredentialId\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"newCertIssueDate\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"newCertExpiryDate\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onCertificationFileSelected($event)\" name=\"newCertAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n <span>{{ tempCertification()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n (click)=\"saveCertificationEditor()\">\r\n <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3 cert-accent-item\">\r\n <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n <div>\r\n <div class=\"fw-semibold\">{{ cert.name }}</div>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedCertificationItem(ci) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedCertificationItem(ci) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"small text-muted\">\r\n {{ cert.issuingOrganization || '\u2014' }}\r\n <span *ngIf=\"cert.state\"> \u2022 {{ cert.state }}</span>\r\n </div>\r\n <div class=\"small text-muted\">\r\n Issue: {{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }}\r\n <span class=\"mx-1\">|</span>\r\n Expiry: {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n (click)=\"startEditCertification(ci)\" title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n (click)=\"deleteCertification(ci)\" title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #editCert>\r\n <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"certName{{ ci }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n name=\"certOrg{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"certState{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certification Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n name=\"certCredentialId{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"certIssue{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"certExpiry{{ ci }}\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onCertificationFileSelected($event)\" name=\"certAttachment{{ ci }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n <span>{{ tempCertification()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n (click)=\"saveCertificationEditor()\">\r\n <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-card-checklist section-header-icon text-warning\"></i>\r\n <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n <span *ngIf=\"licenses().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"licenseSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ licenseSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"licenses().length === 0 || isSavingLicense || isAddingLicense() || editingLicenseIndex() !== null\"\r\n (click)=\"confirmAllLicenses()\">\r\n <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingLicense ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add license\" (click)=\"addLicense()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><i class=\"bi bi-card-checklist\"></i></div>\r\n <p>No licenses added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n\r\n <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3 px-3\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"newLicName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"newLicAuthority\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"newLicNumber\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"newLicState\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"newLicIssueDate\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"newLicExpiryDate\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onLicenseFileSelected($event)\" name=\"newLicenseAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n <span>{{ tempLicense()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n (click)=\"saveLicenseEditor()\">\r\n <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3 lic-accent-item\">\r\n <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n <div>\r\n <div class=\"fw-semibold\">{{ lic.name }}</div>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedLicenseItem(li) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedLicenseItem(li) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"small text-muted\">\r\n {{ lic.issuingAuthority || '\u2014' }}\r\n <span *ngIf=\"lic.state\"> \u2022 {{ lic.state }}</span>\r\n </div>\r\n <div class=\"small text-muted\">\r\n Issue: {{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }}\r\n <span class=\"mx-1\">|</span>\r\n Expiry: {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n (click)=\"startEditLicense(li)\" title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteLicense(li)\"\r\n title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #editLic>\r\n <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"licName{{ li }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"licAuthority{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"licNumber{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"licState{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"licIssue{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"licExpiry{{ li }}\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onLicenseFileSelected($event)\" name=\"licenseAttachment{{ li }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n <span>{{ tempLicense()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditLicense()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n (click)=\"saveLicenseEditor()\">\r\n <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-tools section-header-icon text-info\"></i>\r\n <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n <span *ngIf=\"tools().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"toolsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ toolsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"tools().length === 0 || isSavingTool || isToolEditorOpen()\" (click)=\"confirmAllTools()\">\r\n <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingTool ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add tool\" (click)=\"addTool()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\"\r\n class=\"btn btn-light border res-flex rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n (click)=\"openToolEditor(ti)\" title=\"Edit\">\r\n <span class=\"fw-normal text-dark\">{{ tool }}</span>\r\n <span class=\"badge border ms-1\"\r\n [ngClass]=\"hasUnsavedToolItem(ti) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedToolItem(ti) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <span *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n Missing info\r\n </span>\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete tool\" (click)=\"deleteTool(ti)\">\r\n <span class=\"fw-bold\">\u00D7</span>\r\n </button>\r\n </div>\r\n\r\n <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n </div>\r\n\r\n <!-- Tool edit panel (overlay) -->\r\n <div *ngIf=\"isToolEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n style=\"background: rgba(0,0,0,0.35); z-index: 2000;\" (click)=\"closeToolEditor()\">\r\n <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n <i class=\"bi bi-arrow-left fs-5\"></i>\r\n </button>\r\n <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}\r\n </div>\r\n </div>\r\n <div class=\"card-body p-4\">\r\n <div *ngIf=\"toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"toolForm()?.name\"\r\n (ngModelChange)=\"patchToolForm({ name: $event })\" name=\"toolName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(toolForm()?.name)\">Tool name is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span\r\n class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"setTempToolStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"(toolForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [ngModel]=\"toolForm()?.year\"\r\n (ngModelChange)=\"patchToolForm({ year: $event === '' ? null : +$event })\" name=\"toolYear\" min=\"1\"\r\n max=\"30\" placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"toolForm()?.year === null || toolForm()?.year === undefined\">\r\n Years of experience is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4 text-center\">\r\n <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n <div class=\"form-checks form-switch mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\" id=\"toolVisible\"\r\n style=\"width: 55px;height: 25px;\" />\r\n <label class=\"form-check-label ps-2 pt-1\" for=\"toolVisible\">Visible</label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Comment</label>\r\n <textarea rows=\"4\" class=\"form-control\" [ngModel]=\"toolForm()?.notes\"\r\n (ngModelChange)=\"patchToolForm({ notes: $event })\" name=\"toolNotes\"\r\n placeholder=\"Comment your tool here...\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n <button *ngIf=\"!isAddingTool() && editingToolIndex() !== null\" type=\"button\"\r\n class=\"btn btn-link text-danger me-auto\" (click)=\"deleteTool(editingToolIndex()!)\">\r\n Delete\r\n </button>\r\n <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingTool\" (click)=\"saveToolEditor()\">\r\n <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingTool ? 'Saving...' : toolActionLabel(editingToolIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row g-4 mb-5\">\r\n <div class=\"col-md-12\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-stars section-header-icon\" style=\"color:#16a34a;\"></i>\r\n <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n <span *ngIf=\"skills().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"skillsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ skillsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"skills().length === 0 || isSavingSkill || isSkillEditorOpen()\" (click)=\"confirmAllSkills()\">\r\n <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingSkill ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add skill\" (click)=\"addSkill()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\"\r\n class=\"btn btn-light border rounded-pill res-flex d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n (click)=\"openSkillEditor(si)\" title=\"Edit\">\r\n <span class=\"fw-normal text-dark\">{{ skill }}</span>\r\n <span class=\"badge border ms-1\"\r\n [ngClass]=\"hasUnsavedSkillItem(si) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedSkillItem(si) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <span *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n Missing info\r\n </span>\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete skill\"\r\n (click)=\"deleteSkill(si); $event.stopPropagation()\">\r\n <span class=\"fw-bold\">\u00D7</span>\r\n </button>\r\n </div>\r\n\r\n <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n </div>\r\n <!-- Skill edit panel (overlay) -->\r\n <div *ngIf=\"isSkillEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n style=\"background: rgba(0,0,0,0.35); z-index: 2000;\" (click)=\"closeSkillEditor()\">\r\n <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n <i class=\"bi bi-arrow-left fs-5\"></i>\r\n </button>\r\n <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill')\r\n }}</div>\r\n </div>\r\n <div class=\"card-body p-4\">\r\n <div *ngIf=\"skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"skillForm()?.name\"\r\n (ngModelChange)=\"patchSkillForm({ name: $event })\" name=\"skillName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span\r\n class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"setTempSkillStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"(skillForm()?.stars || 0) <= 0\">Star rating is required\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [ngModel]=\"skillForm()?.year\"\r\n (ngModelChange)=\"patchSkillForm({ year: $event === '' ? null : +$event })\" name=\"skillYear\" min=\"1\"\r\n max=\"30\" placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"skillForm()?.year === null || skillForm()?.year === undefined\">Years of experience is\r\n required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4 text-center\">\r\n <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n <div class=\"form-checks form-switch mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"skillForm()?.profileVisibility\"\r\n (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\" name=\"skillVisible\"\r\n id=\"skillVisible\" style=\"width: 55px;height: 25px;\" />\r\n <label class=\"form-check-label ps-2 pt-1\" for=\"skillVisible\">Visible</label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Comment</label>\r\n <textarea rows=\"4\" class=\"form-control\" [ngModel]=\"skillForm()?.notes\"\r\n (ngModelChange)=\"patchSkillForm({ notes: $event })\" name=\"skillNotes\"\r\n placeholder=\"Comment your skill here...\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n <button *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\" type=\"button\"\r\n class=\"btn btn-link text-danger me-auto\" (click)=\"deleteSkill(editingSkillIndex()!)\">\r\n Delete\r\n </button>\r\n <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingSkill\" (click)=\"saveSkillEditor()\">\r\n <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingSkill ? 'Saving...' : skillActionLabel(editingSkillIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row g-4 mb-5\">\r\n <div class=\"col-md-12\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-mortarboard-fill section-header-icon\" style=\"color:#6366f1;\"></i>\r\n <h5 class=\"fw-bold mb-0\">Education</h5>\r\n <span *ngIf=\"educationList().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"educationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ educationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"educationList().length === 0 || isSavingEducation || isAddingEducation() || editingEducationIndex() !== null\"\r\n (click)=\"confirmAllEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add education\" (click)=\"addEducation()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><i class=\"bi bi-mortarboard\"></i></div>\r\n <p>No education added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n\r\n <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"mb-2\">\r\n <div class=\"form-panel\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"newEduDegree\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"newEduInstitution\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\">\r\n </ng-select>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"newEduCountry\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"newEduState\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"newEduCity\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"newEduStartDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"newEduEndDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">EDUCATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onEducationFileSelected($event)\" name=\"newEducationAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n <span>{{ tempEducation()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditEducation()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingEducation\"\r\n (click)=\"saveEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"edu-accent-item p-3 bg-white border rounded-3 shadow-sm mb-2\">\r\n <div class=\"d-flex justify-content-between align-items-start\">\r\n <div class=\"d-flex align-items-start gap-3\">\r\n <div class=\"item-icon-circle flex-shrink-0\" style=\"background:#f5f3ff; color:#6366f1;\">\r\n <i class=\"bi bi-mortarboard-fill\"></i>\r\n </div>\r\n <div>\r\n <h6 class=\"fw-bold mb-1\">{{ edu.degree }}</h6>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedEducationItem(ei) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedEducationItem(ei) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <p class=\"small text-primary mb-0\">{{ edu.institution }}</p>\r\n <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\" *ngIf=\"editingEducationIndex() !== ei\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n (click)=\"startEditEducation(ei)\" title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteEducation(ei)\"\r\n title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"editingEducationIndex() === ei\" class=\"mt-3\">\r\n <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"eduDegree{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"eduInstitution{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.institution)\">Institution name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\">\r\n </ng-select>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"eduCountry{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"eduState{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"eduStartDate{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"eduEndDate{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">EDUCATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onEducationFileSelected($event)\" name=\"educationAttachment{{ ei }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n <span>{{ tempEducation()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingEducation\" (click)=\"saveEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 justify-content-center mt-5 pt-2\" *ngIf=\"!isResume\">\r\n <button class=\"btn btn-outline-secondary px-5 h-auto rounded-pill\" (click)=\"onBackClick()\">\r\n <i class=\"bi bi-arrow-left me-1\"></i> Back\r\n </button>\r\n <button class=\"btn btn-primary px-5 shadow-sm h-auto rounded-pill\" [disabled]=\"!canConfirmAndContinue() || isSavingBasic\"\r\n (click)=\"onGoToDashboardClick()\">\r\n <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingBasic ? 'Saving...' : 'Go to Dashboard' }}\r\n <i class=\"bi bi-arrow-right ms-1\" *ngIf=\"!isSavingBasic\"></i>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n <div class=\"text-center p-5\">\r\n <div class=\"spinner-border text-primary\"></div>\r\n <p class=\"text-muted mt-2\">Loading data...</p>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Bulk Skill Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkSkillConfirm\">\r\n <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n <h4 class=\"mb-1\">Set Rating for All Skills</h4>\r\n <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all skills that are missing these values.</p>\r\n <div class=\"mb-3\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"bulkSkillStars = s\">\r\n <span [class]=\"bulkSkillStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n {{ bulkSkillStars >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ bulkSkillStars }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillStars <= 0\">Star rating is required</div>\r\n </div>\r\n <div class=\"mb-4\">\r\n <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkSkillYear\" min=\"1\" max=\"30\"\r\n placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillYear === null || bulkSkillYear === undefined\">Years of experience is required</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkSkillConfirm()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingSkill || bulkSkillStars <= 0 || bulkSkillYear === null\"\r\n (click)=\"applyBulkSkillConfirm()\">\r\n <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingSkill ? 'Saving...' : 'Apply to All & Save' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Bulk Tool Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkToolConfirm\">\r\n <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n <h4 class=\"mb-1\">Set Rating for All Tools</h4>\r\n <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all tools that are missing these values.</p>\r\n <div class=\"mb-3\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"bulkToolStars = s\">\r\n <span [class]=\"bulkToolStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n {{ bulkToolStars >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ bulkToolStars }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolStars <= 0\">Star rating is required</div>\r\n </div>\r\n <div class=\"mb-4\">\r\n <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkToolYear\" min=\"1\" max=\"30\"\r\n placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolYear === null || bulkToolYear === undefined\">Years of experience is required</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkToolConfirm()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingTool || bulkToolStars <= 0 || bulkToolYear === null\"\r\n (click)=\"applyBulkToolConfirm()\">\r\n <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingTool ? 'Saving...' : 'Apply to All & Save' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n <div class=\"confirm-modal-card\">\r\n <h4 class=\"mb-2\">Leave this page?</h4>\r\n <p class=\"text-muted mb-4\">If you go back, only saved data will be retained.</p>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"stayOnPreview()\">Stay</button>\r\n <button type=\"button\" class=\"btn btn-danger h-auto\" (click)=\"proceedBack()\">Proceed Back</button>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showDashboardConfirmPopup\">\r\n <div class=\"confirm-modal-card\">\r\n <h4 class=\"mb-2\">Finish Setup and Continue</h4>\r\n <p class=\"text-muted mb-4\">Save your information and go to your dashboard</p>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" [disabled]=\"isSavingBasic\"\r\n (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingBasic\" (click)=\"goToDashboard()\">\r\n <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingBasic ? 'Proceeding...' : 'Proceed' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#333}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:16px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:.95rem}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 .5rem 1rem #0000001a!important}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover{box-shadow:0 10px 20px #0000001a!important}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:all .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc;transform:translate(5px);box-shadow:-5px 0 15px #0000000d}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important;box-shadow:0 10px 15px #0000001a!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 12px #0003}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:10px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border-color:#dc3545;color:#dc3545;border-radius:10px}button.btn.btn-sm.btn-outline-danger:hover{background-color:#bb2d3b;border-color:#bb2d3b;color:#fff}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:50%!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0!important;background:transparent!important;border:none!important;box-shadow:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0f172a40;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-weight:600;color:#1f2937}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);background:#fff;border-radius:14px;box-shadow:0 20px 35px #0f172a38;border:1px solid #e5e7eb;padding:24px}.year-experience-select{max-height:150px}@media screen and (max-width: 768px){.res-flex{display:unset!important}.res-flex .fw-normal{width:100%;display:block;font-size:13px!important}}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{background-color:#4077ad!important}.profile-avatar-circle{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,#4077ad,#6ca0dc);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0;box-shadow:0 4px 12px #4077ad4d}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9}.work-accent-item{border-left:4px solid #4077ad!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.work-accent-item:hover{background-color:#f5f8ff!important;box-shadow:0 4px 14px #4077ad17!important}.edu-accent-item{border-left:4px solid #6366f1!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.edu-accent-item:hover{background-color:#f8f8ff!important;box-shadow:0 4px 14px #6366f117!important}.cert-accent-item{border-left:4px solid #059669!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.cert-accent-item:hover{background-color:#f0fdf4!important}.lic-accent-item{border-left:4px solid #d97706!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-bottom:3px;display:block}.field-value-sm{font-weight:600;font-size:.875rem;color:#1f2937}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:12px}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:.875rem}.form-panel{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:8px;font-size:.875rem}.form-panel .form-control:focus,.form-panel .form-select:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.section-header-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px;border-bottom:2px solid #f1f5f9;margin-bottom:16px}.preview-card-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff);border-bottom:1px solid #e2e8f0;padding:20px 24px 16px;border-radius:13px 13px 0 0}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ModalModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: NgxStarsModule }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "ngmodule", type: TextMaskModule }, { kind: "ngmodule", type: GooglePlaceModule }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }] });
|
|
5230
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PreviewComponent, isStandalone: true, selector: "app-preview", inputs: { providerId: "providerId", isResume: "isResume", resumeModel: "resumeModel", providerName: "providerName", roleData: "roleData", cloudfrontUrl: "cloudfrontUrl" }, outputs: { backToParent: "backToParent" }, viewQueries: [{ propertyName: "companyForm", first: true, predicate: ["companyForm"], descendants: true }], ngImport: i0, template: "<div class=\"preview-page-header\" *ngIf=\"!isResume\">\r\n <div class=\"d-flex align-items-center gap-2 mb-1\">\r\n <img src=\"/assets/images/icons/file-person.svg\" width=\"24\" height=\"24\" alt=\"\" />\r\n <h2 class=\"preview-title mb-0\">Review Extracted Information</h2>\r\n </div>\r\n <p class=\"preview-subtitle text-muted\">We\u2019ve automatically extracted details from your uploaded resume. Please review and confirm accuracy before proceeding.</p>\r\n</div>\r\n\r\n\r\n<div [ngClass]=\"isResume ? '' : 'container py-4'\">\r\n <div class=\"section mb-5\">\r\n <div *ngIf=\"details() as data; else loading\">\r\n <div class=\"card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isEditMode()\">\r\n <div class=\"card-body p-0\">\r\n <div class=\"preview-card-gradient\">\r\n <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n <div class=\"d-flex align-items-start gap-3\">\r\n <div class=\"profile-avatar-circle\">\r\n {{ (data.firstName?.[0] || '') }}{{ (data.lastName?.[0] || '') }}\r\n </div>\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n Missing info\r\n </span>\r\n <span class=\"badge border section-flag\"\r\n [ngClass]=\"basicDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n {{ basicDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n </span>\r\n </div>\r\n <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"badge bg-primary-subtle text-primary border p-2\">Email Verified</span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"px-4 py-3\">\r\n <div class=\"row g-4\">\r\n <div class=\"col-12 border-bottom pb-2\">\r\n <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <span class=\"field-label-sm\"><img src=\"/assets/images/icons/envelope.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Email</span>\r\n <span class=\"field-value-sm d-block\">{{ data.email }}</span>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Phone</span>\r\n <span class=\"field-value-sm d-block\">{{ data.phone }}</span>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Location</span>\r\n <span class=\"field-value-sm d-block\">{{ data.address }}, {{ data.city }}, {{ data.state }}, {{ data.zipCode }}, {{ data.country }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer bg-light d-flex align-items-center justify-content-between\">\r\n <span *ngIf=\"!basicDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your basic info.\r\n </span>\r\n <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Basic details saved.\r\n </span>\r\n <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card shadow-sm border-0\" *ngIf=\"isEditMode()\">\r\n <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n <div class=\"card-body p-4\">\r\n <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.firstName\" name=\"fName\"\r\n placeholder=\"First Name\" required #fName=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.lastName\" name=\"lName\"\r\n placeholder=\"Last Name\" required #lName=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is\r\n required</div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Summary</label>\r\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n placeholder=\"Summary\"></textarea>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n <input type=\"email\" class=\"form-control\" [(ngModel)]=\"tempProfile.email\" name=\"email\" placeholder=\"Email\"\r\n required email #email=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.phone\" (input)=\"phoneMask($event, 'profile')\"\r\n name=\"phone\" placeholder=\"Phone (10 digits)\" (keypress)=\"allowOnlyNumbers($event)\"\r\n required pattern=\"^\\d{10}$\" maxlength=\"14\" inputmode=\"numeric\" #phone=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-3\">\r\n <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n <input ngx-google-places-autocomplete [options]=\"options\" type=\"text\" class=\"form-control\" (onAddressChange)=\"AddressChangeUser($event)\" [(ngModel)]=\"tempProfile.address\" name=\"address\"\r\n placeholder=\"Home Address\" required #address=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home\r\n address is required</div>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.city\" name=\"city\" placeholder=\"City\"\r\n required #city=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.state\" name=\"state\" placeholder=\"State\"\r\n required #state=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is\r\n required</div>\r\n </div>\r\n\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.zipCode\"\r\n (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\" name=\"zipCode\" placeholder=\"Zip Code\"\r\n required pattern=\"^\\d{1,6}$\" maxlength=\"6\" inputmode=\"numeric\" #zipCode=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code\r\n is required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"zipCode.errors?.['pattern'] && (zipCode.dirty || zipCode.touched)\">\r\n Zip code must be up to 6 digits\r\n </div>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.country\" name=\"country\"\r\n placeholder=\"Country\" required #country=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country\r\n is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\"></span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"jobTitle\"\r\n placeholder=\"Job Title\" #jobTitle=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job\r\n title is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n name=\"yearsOfExperience\" placeholder=\"Years of Experience\" required min=\"0\"\r\n #yearsOfExperience=\"ngModel\">\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"yearsOfExperience.invalid && (yearsOfExperience.dirty || yearsOfExperience.touched)\">\r\n Years of experience is required\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingBasic\" (click)=\"save()\">\r\n <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingBasic ? 'Saving...' : 'Save Changes' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\" *ngIf=\"roleData.role.name == 'Provider'\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Company Details</h5>\r\n <span *ngIf=\"companyDetailsSaved\"\r\n class=\"badge border section-flag bg-success-subtle text-success\">\r\n Saved\r\n </span>\r\n <span *ngIf=\"!companyDetailsSaved\"\r\n class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n Not saved yet\r\n </span>\r\n </div>\r\n <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleCompanyEdit()\">Edit</button>\r\n </div>\r\n\r\n <!-- Company Details Display Mode -->\r\n <div class=\"card shadow-sm border-0\" *ngIf=\"!isCompanyEditMode()\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row g-4\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Name</label>\r\n <span class=\"fw-bold small\">{{ companyDetails()?.companyName}}</span>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Phone</label>\r\n <span class=\"fw-bold small\">{{ companyDetails()?.companyPhoneNumber}}</span>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Company Address</label>\r\n <span class=\"small\">{{ companyDetails()?.address1}}, {{ companyDetails()?.city}}, {{ companyDetails()?.state}}, {{ companyDetails()?.zipcode}}, {{ companyDetails()?.country}}</span>\r\n </div>\r\n <div class=\"col-md-6\" *ngIf=\"companyLogoUrl()\">\r\n <label class=\"small text-muted d-block\">Company Logo</label>\r\n <img [src]=\"companyLogoUrl()\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Company Details Edit Mode -->\r\n <div class=\"card shadow-sm border-0\" *ngIf=\"isCompanyEditMode()\">\r\n <div class=\"card-header bg-white fw-bold\">Update Company Details</div>\r\n <div class=\"card-body p-4\">\r\n <form class=\"row g-3\" #companyForm=\"ngForm\" novalidate>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError }\"\r\n [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"companyName\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">\r\n Company name is required\r\n </div>\r\n <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">\r\n {{ companyNameError }}\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n <input (input)=\"phoneMask($event, 'company')\" type=\"text\" maxlength=\"14\" (keypress)=\"allowOnlyNumbers($event)\" inputmode=\"numeric\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"companyPhoneNumber\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">\r\n Company phone is required\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Address <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" ngx-google-places-autocomplete class=\"form-control form-control-sm\" (onAddressChange)=\"AddressChangeCompany($event)\"\r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.address1?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.address1\" name=\"address1\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">\r\n Address is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.city\" name=\"city\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">\r\n City is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.state\" name=\"state\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">\r\n State is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"zipcode\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">\r\n Zip code is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.country\" name=\"country\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">\r\n Country is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Logo</label>\r\n <input #uploadCompanyFile type=\"file\" accept=\"image/*\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n </div>\r\n <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n <label class=\"small text-muted d-block\">Logo Preview</label>\r\n <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n </div>\r\n </form>\r\n </div>\r\n <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelCompanyEdit()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCompany\" \r\n (click)=\"saveCompanyDetails()\">\r\n <span *ngIf=\"isSavingCompany\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCompany ? 'Saving...' : 'Save Changes' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n <span *ngIf=\"experience().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"workSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ workSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"experience().length === 0 || isSavingWork || isAddingJob() || editingJobIndex() !== null\"\r\n (click)=\"confirmAllWork()\">\r\n <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingWork ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add work experience\" (click)=\"addJob()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><img src=\"/assets/images/icons/briefcase.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n <p>No work experience added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n <div class=\"list-group list-group-flush shadow-sm rounded-3\">\r\n <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-0 border-0\">\r\n <div class=\"form-panel mb-2\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"newJobTitle\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"newCompany\" />\r\n </div>\r\n <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"newIsCurrent\" id=\"newIsCurrent\" />\r\n <label class=\"form-check-label\" for=\"newIsCurrent\">Current</label>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"newCountry\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"newState\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"newCity\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"newStartDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n name=\"newEndDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is\r\n required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n <textarea rows=\"4\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"newResponsibilities\"></textarea>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onWorkExperienceFileSelected($event)\" name=\"newWorkAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n <span>{{ tempJob()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n <button class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingWork\"\r\n (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-0 border-0 mb-2\">\r\n\r\n <div class=\"work-accent-item p-3 rounded-3 bg-white border\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n <div class=\"item-icon-circle bg-primary-subtle text-primary me-3\">\r\n <img src=\"/assets/images/icons/briefcase-fill-blue.svg\" width=\"16\" height=\"16\" alt=\"\" />\r\n </div>\r\n <div>\r\n <h6 class=\"mb-0 fw-bold\">{{ job.jobTitle }}</h6>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedWorkItem(i) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedWorkItem(i) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <small class=\"text-muted\">\r\n {{ job.company }} \u2022 {{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n formatMonthYear(job.endDate) }}\r\n </small>\r\n <div *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2\">\r\n\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\" (click)=\"startEditJob(i)\"\r\n title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteJob(i);\"\r\n title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n\r\n\r\n <!-- <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-light p-0\"\r\n style=\"width: 34px; height: 34px;\"\r\n (click)=\"toggleJob(i)\"\r\n title=\"Expand\"\r\n >\r\n <i class=\"bi cursor-pointer\" [ngClass]=\"expandedIndex() === i ? 'bi-chevron-up' : 'bi-chevron-down'\"></i>\r\n </button> -->\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"mt-3 bg-light p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n <ul class=\"mb-0\">\r\n <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n </ul>\r\n </ng-container>\r\n\r\n <ng-template #editJobForm>\r\n <div *ngIf=\"(workIssuesByIndex()[i] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"jobTitle{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"company{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.company)\">Company name is required</div>\r\n </div>\r\n\r\n <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"isCurrent{{ i }}\" id=\"isCurrent{{ i }}\" />\r\n <label class=\"form-check-label\" for=\"isCurrent{{ i }}\">Current</label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"country{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"state{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"city{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"startDate{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n name=\"endDate{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">\r\n End date is required\r\n </div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n <textarea rows=\"4\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"responsibilities{{ i }}\"></textarea>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onWorkExperienceFileSelected($event)\" name=\"workAttachment{{ i }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n <span>{{ tempJob()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-3\" *ngIf=\"editingJobIndex() === i\">\r\n <button class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingWork\"\r\n (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/patch-check-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n <span *ngIf=\"certs().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"certificationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ certificationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"certs().length === 0 || isSavingCertification || isAddingCertification() || editingCertificationIndex() !== null\"\r\n (click)=\"confirmAllCertifications()\">\r\n <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCertification ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add certification\" (click)=\"addCertification()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><img src=\"/assets/images/icons/patch-check.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n <p>No certifications added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n\r\n <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3 px-3\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"newCertName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\" name=\"newCertOrg\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"newCertState\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certification Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\" name=\"newCertCredentialId\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"newCertIssueDate\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"newCertExpiryDate\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onCertificationFileSelected($event)\" name=\"newCertAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n <span>{{ tempCertification()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n (click)=\"saveCertificationEditor()\">\r\n <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3 cert-accent-item\">\r\n <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n <div>\r\n <div class=\"fw-semibold\">{{ cert.name }}</div>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedCertificationItem(ci) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedCertificationItem(ci) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"small text-muted\">\r\n {{ cert.issuingOrganization || '\u2014' }}\r\n <span *ngIf=\"cert.state\"> \u2022 {{ cert.state }}</span>\r\n </div>\r\n <div class=\"small text-muted\">\r\n Issue: {{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }}\r\n <span class=\"mx-1\">|</span>\r\n Expiry: {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n (click)=\"startEditCertification(ci)\" title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n (click)=\"deleteCertification(ci)\" title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #editCert>\r\n <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"certName{{ ci }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n name=\"certOrg{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"certState{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certification Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n name=\"certCredentialId{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"certIssue{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"certExpiry{{ ci }}\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onCertificationFileSelected($event)\" name=\"certAttachment{{ ci }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n <span>{{ tempCertification()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n (click)=\"saveCertificationEditor()\">\r\n <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/card-checklist-warning.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n <span *ngIf=\"licenses().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"licenseSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ licenseSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"licenses().length === 0 || isSavingLicense || isAddingLicense() || editingLicenseIndex() !== null\"\r\n (click)=\"confirmAllLicenses()\">\r\n <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingLicense ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add license\" (click)=\"addLicense()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><img src=\"/assets/images/icons/card-checklist.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n <p>No licenses added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n\r\n <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3 px-3\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"newLicName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"newLicAuthority\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"newLicNumber\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"newLicState\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"newLicIssueDate\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"newLicExpiryDate\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onLicenseFileSelected($event)\" name=\"newLicenseAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n <span>{{ tempLicense()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n (click)=\"saveLicenseEditor()\">\r\n <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3 lic-accent-item\">\r\n <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n <div>\r\n <div class=\"fw-semibold\">{{ lic.name }}</div>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedLicenseItem(li) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedLicenseItem(li) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"small text-muted\">\r\n {{ lic.issuingAuthority || '\u2014' }}\r\n <span *ngIf=\"lic.state\"> \u2022 {{ lic.state }}</span>\r\n </div>\r\n <div class=\"small text-muted\">\r\n Issue: {{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }}\r\n <span class=\"mx-1\">|</span>\r\n Expiry: {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n (click)=\"startEditLicense(li)\" title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteLicense(li)\"\r\n title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #editLic>\r\n <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"licName{{ li }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"licAuthority{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"licNumber{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"licState{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"licIssue{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"licExpiry{{ li }}\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onLicenseFileSelected($event)\" name=\"licenseAttachment{{ li }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n <span>{{ tempLicense()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditLicense()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n (click)=\"saveLicenseEditor()\">\r\n <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/tools.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n <span *ngIf=\"tools().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"toolsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ toolsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"tools().length === 0 || isSavingTool || isToolEditorOpen()\" (click)=\"confirmAllTools()\">\r\n <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingTool ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add tool\" (click)=\"addTool()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\"\r\n class=\"btn btn-light border res-flex rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n (click)=\"openToolEditor(ti)\" title=\"Edit\">\r\n <span class=\"fw-normal text-dark\">{{ tool }}</span>\r\n <span class=\"badge border ms-1\"\r\n [ngClass]=\"hasUnsavedToolItem(ti) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedToolItem(ti) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <span *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n Missing info\r\n </span>\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete tool\" (click)=\"deleteTool(ti)\">\r\n <span class=\"fw-bold\">\u00D7</span>\r\n </button>\r\n </div>\r\n\r\n <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n </div>\r\n\r\n <!-- Tool edit panel (overlay) -->\r\n <div *ngIf=\"isToolEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n style=\"background: rgba(0,0,0,0.35); z-index: 2000;\" (click)=\"closeToolEditor()\">\r\n <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\r\n </button>\r\n <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}\r\n </div>\r\n </div>\r\n <div class=\"card-body p-4\">\r\n <div *ngIf=\"toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"toolForm()?.name\"\r\n (ngModelChange)=\"patchToolForm({ name: $event })\" name=\"toolName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(toolForm()?.name)\">Tool name is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span\r\n class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"setTempToolStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"(toolForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [ngModel]=\"toolForm()?.year\"\r\n (ngModelChange)=\"patchToolForm({ year: $event === '' ? null : +$event })\" name=\"toolYear\" min=\"1\"\r\n max=\"30\" placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"toolForm()?.year === null || toolForm()?.year === undefined\">\r\n Years of experience is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4 text-center\">\r\n <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n <div class=\"form-checks form-switch mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\" id=\"toolVisible\"\r\n style=\"width: 55px;height: 25px;\" />\r\n <label class=\"form-check-label ps-2 pt-1\" for=\"toolVisible\">Visible</label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Comment</label>\r\n <textarea rows=\"4\" class=\"form-control\" [ngModel]=\"toolForm()?.notes\"\r\n (ngModelChange)=\"patchToolForm({ notes: $event })\" name=\"toolNotes\"\r\n placeholder=\"Comment your tool here...\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n <button *ngIf=\"!isAddingTool() && editingToolIndex() !== null\" type=\"button\"\r\n class=\"btn btn-link text-danger me-auto\" (click)=\"deleteTool(editingToolIndex()!)\">\r\n Delete\r\n </button>\r\n <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingTool\" (click)=\"saveToolEditor()\">\r\n <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingTool ? 'Saving...' : toolActionLabel(editingToolIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row g-4 mb-5\">\r\n <div class=\"col-md-12\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/stars.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n <span *ngIf=\"skills().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"skillsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ skillsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"skills().length === 0 || isSavingSkill || isSkillEditorOpen()\" (click)=\"confirmAllSkills()\">\r\n <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingSkill ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add skill\" (click)=\"addSkill()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\"\r\n class=\"btn btn-light border rounded-pill res-flex d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n (click)=\"openSkillEditor(si)\" title=\"Edit\">\r\n <span class=\"fw-normal text-dark\">{{ skill }}</span>\r\n <span class=\"badge border ms-1\"\r\n [ngClass]=\"hasUnsavedSkillItem(si) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedSkillItem(si) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <span *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n Missing info\r\n </span>\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete skill\"\r\n (click)=\"deleteSkill(si); $event.stopPropagation()\">\r\n <span class=\"fw-bold\">\u00D7</span>\r\n </button>\r\n </div>\r\n\r\n <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n </div>\r\n <!-- Skill edit panel (overlay) -->\r\n <div *ngIf=\"isSkillEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n style=\"background: rgba(0,0,0,0.35); z-index: 2000;\" (click)=\"closeSkillEditor()\">\r\n <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\r\n </button>\r\n <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill')\r\n }}</div>\r\n </div>\r\n <div class=\"card-body p-4\">\r\n <div *ngIf=\"skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"skillForm()?.name\"\r\n (ngModelChange)=\"patchSkillForm({ name: $event })\" name=\"skillName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span\r\n class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"setTempSkillStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"(skillForm()?.stars || 0) <= 0\">Star rating is required\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [ngModel]=\"skillForm()?.year\"\r\n (ngModelChange)=\"patchSkillForm({ year: $event === '' ? null : +$event })\" name=\"skillYear\" min=\"1\"\r\n max=\"30\" placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"skillForm()?.year === null || skillForm()?.year === undefined\">Years of experience is\r\n required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4 text-center\">\r\n <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n <div class=\"form-checks form-switch mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"skillForm()?.profileVisibility\"\r\n (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\" name=\"skillVisible\"\r\n id=\"skillVisible\" style=\"width: 55px;height: 25px;\" />\r\n <label class=\"form-check-label ps-2 pt-1\" for=\"skillVisible\">Visible</label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Comment</label>\r\n <textarea rows=\"4\" class=\"form-control\" [ngModel]=\"skillForm()?.notes\"\r\n (ngModelChange)=\"patchSkillForm({ notes: $event })\" name=\"skillNotes\"\r\n placeholder=\"Comment your skill here...\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n <button *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\" type=\"button\"\r\n class=\"btn btn-link text-danger me-auto\" (click)=\"deleteSkill(editingSkillIndex()!)\">\r\n Delete\r\n </button>\r\n <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingSkill\" (click)=\"saveSkillEditor()\">\r\n <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingSkill ? 'Saving...' : skillActionLabel(editingSkillIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row g-4 mb-5\">\r\n <div class=\"col-md-12\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Education</h5>\r\n <span *ngIf=\"educationList().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"educationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ educationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"educationList().length === 0 || isSavingEducation || isAddingEducation() || editingEducationIndex() !== null\"\r\n (click)=\"confirmAllEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add education\" (click)=\"addEducation()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><img src=\"/assets/images/icons/mortarboard.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n <p>No education added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n\r\n <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"mb-2\">\r\n <div class=\"form-panel\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"newEduDegree\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"newEduInstitution\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\">\r\n </ng-select>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"newEduCountry\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"newEduState\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"newEduCity\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"newEduStartDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"newEduEndDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">EDUCATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onEducationFileSelected($event)\" name=\"newEducationAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n <span>{{ tempEducation()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditEducation()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingEducation\"\r\n (click)=\"saveEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"edu-accent-item p-3 bg-white border rounded-3 shadow-sm mb-2\">\r\n <div class=\"d-flex justify-content-between align-items-start\">\r\n <div class=\"d-flex align-items-start gap-3\">\r\n <div class=\"item-icon-circle flex-shrink-0\" style=\"background:#f5f3ff; color:#6366f1;\">\r\n <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"16\" height=\"16\" alt=\"\" />\r\n </div>\r\n <div>\r\n <h6 class=\"fw-bold mb-1\">{{ edu.degree }}</h6>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedEducationItem(ei) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedEducationItem(ei) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <p class=\"small text-primary mb-0\">{{ edu.institution }}</p>\r\n <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\" *ngIf=\"editingEducationIndex() !== ei\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n (click)=\"startEditEducation(ei)\" title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteEducation(ei)\"\r\n title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"editingEducationIndex() === ei\" class=\"mt-3\">\r\n <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"eduDegree{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"eduInstitution{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.institution)\">Institution name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\">\r\n </ng-select>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"eduCountry{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"eduState{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"eduStartDate{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"eduEndDate{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">EDUCATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onEducationFileSelected($event)\" name=\"educationAttachment{{ ei }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n <span>{{ tempEducation()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingEducation\" (click)=\"saveEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 justify-content-center mt-5 pt-2\" *ngIf=\"!isResume\">\r\n <button class=\"btn btn-outline-secondary px-5 h-auto rounded-pill\" (click)=\"onBackClick()\">\r\n <img src=\"/assets/images/icons/arrow-left.svg\" width=\"14\" height=\"14\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Back\r\n </button>\r\n <button class=\"btn btn-primary px-5 shadow-sm h-auto rounded-pill\" [disabled]=\"!canConfirmAndContinue() || isSavingBasic\"\r\n (click)=\"onGoToDashboardClick()\">\r\n <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingBasic ? 'Saving...' : 'Go to Dashboard' }}\r\n <img *ngIf=\"!isSavingBasic\" src=\"/assets/images/icons/arrow-right-white.svg\" width=\"14\" height=\"14\" class=\"ms-1\" style=\"vertical-align:-0.1em\" alt=\"\" />\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n <div class=\"text-center p-5\">\r\n <div class=\"spinner-border text-primary\"></div>\r\n <p class=\"text-muted mt-2\">Loading data...</p>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Bulk Skill Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkSkillConfirm\">\r\n <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n <h4 class=\"mb-1\">Set Rating for All Skills</h4>\r\n <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all skills that are missing these values.</p>\r\n <div class=\"mb-3\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"bulkSkillStars = s\">\r\n <span [class]=\"bulkSkillStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n {{ bulkSkillStars >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ bulkSkillStars }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillStars <= 0\">Star rating is required</div>\r\n </div>\r\n <div class=\"mb-4\">\r\n <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkSkillYear\" min=\"1\" max=\"30\"\r\n placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillYear === null || bulkSkillYear === undefined\">Years of experience is required</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkSkillConfirm()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingSkill || bulkSkillStars <= 0 || bulkSkillYear === null\"\r\n (click)=\"applyBulkSkillConfirm()\">\r\n <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingSkill ? 'Saving...' : 'Apply to All & Save' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Bulk Tool Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkToolConfirm\">\r\n <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n <h4 class=\"mb-1\">Set Rating for All Tools</h4>\r\n <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all tools that are missing these values.</p>\r\n <div class=\"mb-3\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"bulkToolStars = s\">\r\n <span [class]=\"bulkToolStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n {{ bulkToolStars >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ bulkToolStars }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolStars <= 0\">Star rating is required</div>\r\n </div>\r\n <div class=\"mb-4\">\r\n <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkToolYear\" min=\"1\" max=\"30\"\r\n placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolYear === null || bulkToolYear === undefined\">Years of experience is required</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkToolConfirm()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingTool || bulkToolStars <= 0 || bulkToolYear === null\"\r\n (click)=\"applyBulkToolConfirm()\">\r\n <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingTool ? 'Saving...' : 'Apply to All & Save' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n <div class=\"confirm-modal-card\">\r\n <h4 class=\"mb-2\">Leave this page?</h4>\r\n <p class=\"text-muted mb-4\">If you go back, only saved data will be retained.</p>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"stayOnPreview()\">Stay</button>\r\n <button type=\"button\" class=\"btn btn-danger h-auto\" (click)=\"proceedBack()\">Proceed Back</button>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showDashboardConfirmPopup\">\r\n <div class=\"confirm-modal-card\">\r\n <h4 class=\"mb-2\">Finish Setup and Continue</h4>\r\n <p class=\"text-muted mb-4\">Save your information and go to your dashboard</p>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" [disabled]=\"isSavingBasic\"\r\n (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingBasic\" (click)=\"goToDashboard()\">\r\n <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingBasic ? 'Proceeding...' : 'Proceed' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#333}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:16px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:.95rem}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 .5rem 1rem #0000001a!important}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover{box-shadow:0 10px 20px #0000001a!important}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:all .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc;transform:translate(5px);box-shadow:-5px 0 15px #0000000d}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important;box-shadow:0 10px 15px #0000001a!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 12px #0003}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:10px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border-color:#dc3545;color:#dc3545;border-radius:10px}button.btn.btn-sm.btn-outline-danger:hover{background-color:#bb2d3b;border-color:#bb2d3b;color:#fff}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:50%!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0!important;background:transparent!important;border:none!important;box-shadow:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0f172a40;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-weight:600;color:#1f2937}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);background:#fff;border-radius:14px;box-shadow:0 20px 35px #0f172a38;border:1px solid #e5e7eb;padding:24px}.year-experience-select{max-height:150px}@media screen and (max-width: 768px){.res-flex{display:unset!important}.res-flex .fw-normal{width:100%;display:block;font-size:13px!important}}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{background-color:#4077ad!important}.profile-avatar-circle{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,#4077ad,#6ca0dc);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0;box-shadow:0 4px 12px #4077ad4d}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9}.work-accent-item{border-left:4px solid #4077ad!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.work-accent-item:hover{background-color:#f5f8ff!important;box-shadow:0 4px 14px #4077ad17!important}.edu-accent-item{border-left:4px solid #6366f1!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.edu-accent-item:hover{background-color:#f8f8ff!important;box-shadow:0 4px 14px #6366f117!important}.cert-accent-item{border-left:4px solid #059669!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.cert-accent-item:hover{background-color:#f0fdf4!important}.lic-accent-item{border-left:4px solid #d97706!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-bottom:3px;display:block}.field-value-sm{font-weight:600;font-size:.875rem;color:#1f2937}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:12px}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:.875rem}.form-panel{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:8px;font-size:.875rem}.form-panel .form-control:focus,.form-panel .form-select:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.section-header-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px;border-bottom:2px solid #f1f5f9;margin-bottom:16px}.preview-card-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff);border-bottom:1px solid #e2e8f0;padding:20px 24px 16px;border-radius:13px 13px 0 0}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ModalModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: NgxStarsModule }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "ngmodule", type: TextMaskModule }, { kind: "ngmodule", type: GooglePlaceModule }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }] });
|
|
5147
5231
|
}
|
|
5148
5232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewComponent, decorators: [{
|
|
5149
5233
|
type: Component,
|
|
5150
5234
|
args: [{ selector: 'app-preview', standalone: true, imports: [
|
|
5151
5235
|
CommonModule, ModalModule, FormsModule, ReactiveFormsModule,
|
|
5152
5236
|
NgSelectModule, NgxStarsModule, BsDatepickerModule, TextMaskModule, GooglePlaceModule
|
|
5153
|
-
], template: "<div class=\"preview-page-header\" *ngIf=\"!isResume\">\r\n <div class=\"d-flex align-items-center gap-2 mb-1\">\r\n <i class=\"bi bi-file-person-fill text-primary fs-4\"></i>\r\n <h2 class=\"preview-title mb-0\">Review Extracted Information</h2>\r\n </div>\r\n <p class=\"preview-subtitle text-muted\">We\u2019ve automatically extracted details from your uploaded resume. Please review and confirm accuracy before proceeding.</p>\r\n</div>\r\n\r\n\r\n<div [ngClass]=\"isResume ? '' : 'container py-4'\">\r\n <div class=\"section mb-5\">\r\n <div *ngIf=\"details() as data; else loading\">\r\n <div class=\"card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isEditMode()\">\r\n <div class=\"card-body p-0\">\r\n <div class=\"preview-card-gradient\">\r\n <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n <div class=\"d-flex align-items-start gap-3\">\r\n <div class=\"profile-avatar-circle\">\r\n {{ (data.firstName?.[0] || '') }}{{ (data.lastName?.[0] || '') }}\r\n </div>\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n Missing info\r\n </span>\r\n <span class=\"badge border section-flag\"\r\n [ngClass]=\"basicDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n {{ basicDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n </span>\r\n </div>\r\n <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"badge bg-primary-subtle text-primary border p-2\">Email Verified</span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"px-4 py-3\">\r\n <div class=\"row g-4\">\r\n <div class=\"col-12 border-bottom pb-2\">\r\n <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <span class=\"field-label-sm\"><i class=\"bi bi-envelope me-1\"></i>Email</span>\r\n <span class=\"field-value-sm d-block\">{{ data.email }}</span>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <span class=\"field-label-sm\"><i class=\"bi bi-telephone me-1\"></i>Phone</span>\r\n <span class=\"field-value-sm d-block\">{{ data.phone }}</span>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <span class=\"field-label-sm\"><i class=\"bi bi-geo-alt me-1\"></i>Location</span>\r\n <span class=\"field-value-sm d-block\">{{ data.address }}, {{ data.city }}, {{ data.state }}, {{ data.zipCode }}, {{ data.country }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer bg-light d-flex align-items-center justify-content-between\">\r\n <span *ngIf=\"!basicDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n <i class=\"bi bi-exclamation-circle me-1\"></i> Click \"Edit\" to review and save your basic info.\r\n </span>\r\n <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n <i class=\"bi bi-check-circle me-1\"></i> Basic details saved.\r\n </span>\r\n <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card shadow-sm border-0\" *ngIf=\"isEditMode()\">\r\n <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n <div class=\"card-body p-4\">\r\n <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.firstName\" name=\"fName\"\r\n placeholder=\"First Name\" required #fName=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.lastName\" name=\"lName\"\r\n placeholder=\"Last Name\" required #lName=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is\r\n required</div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Summary</label>\r\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n placeholder=\"Summary\"></textarea>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n <input type=\"email\" class=\"form-control\" [(ngModel)]=\"tempProfile.email\" name=\"email\" placeholder=\"Email\"\r\n required email #email=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.phone\" (input)=\"phoneMask($event, 'profile')\"\r\n name=\"phone\" placeholder=\"Phone (10 digits)\" (keypress)=\"allowOnlyNumbers($event)\"\r\n required pattern=\"^\\d{10}$\" maxlength=\"14\" inputmode=\"numeric\" #phone=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-3\">\r\n <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n <input ngx-google-places-autocomplete [options]=\"options\" type=\"text\" class=\"form-control\" (onAddressChange)=\"AddressChangeUser($event)\" [(ngModel)]=\"tempProfile.address\" name=\"address\"\r\n placeholder=\"Home Address\" required #address=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home\r\n address is required</div>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.city\" name=\"city\" placeholder=\"City\"\r\n required #city=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.state\" name=\"state\" placeholder=\"State\"\r\n required #state=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is\r\n required</div>\r\n </div>\r\n\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.zipCode\"\r\n (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\" name=\"zipCode\" placeholder=\"Zip Code\"\r\n required pattern=\"^\\d{1,6}$\" maxlength=\"6\" inputmode=\"numeric\" #zipCode=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code\r\n is required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"zipCode.errors?.['pattern'] && (zipCode.dirty || zipCode.touched)\">\r\n Zip code must be up to 6 digits\r\n </div>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.country\" name=\"country\"\r\n placeholder=\"Country\" required #country=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country\r\n is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\"></span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"jobTitle\"\r\n placeholder=\"Job Title\" #jobTitle=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job\r\n title is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n name=\"yearsOfExperience\" placeholder=\"Years of Experience\" required min=\"0\"\r\n #yearsOfExperience=\"ngModel\">\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"yearsOfExperience.invalid && (yearsOfExperience.dirty || yearsOfExperience.touched)\">\r\n Years of experience is required\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingBasic\" (click)=\"save()\">\r\n <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingBasic ? 'Saving...' : 'Save Changes' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\" *ngIf=\"roleData.role.name == 'Provider'\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-building-fill section-header-icon text-secondary\"></i>\r\n <h5 class=\"fw-bold mb-0\">Company Details</h5>\r\n <span *ngIf=\"companyDetailsSaved\"\r\n class=\"badge border section-flag bg-success-subtle text-success\">\r\n Saved\r\n </span>\r\n <span *ngIf=\"!companyDetailsSaved\"\r\n class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n Not saved yet\r\n </span>\r\n </div>\r\n <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleCompanyEdit()\">Edit</button>\r\n </div>\r\n\r\n <!-- Company Details Display Mode -->\r\n <div class=\"card shadow-sm border-0\" *ngIf=\"!isCompanyEditMode()\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row g-4\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Name</label>\r\n <span class=\"fw-bold small\">{{ companyDetails()?.companyName}}</span>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Phone</label>\r\n <span class=\"fw-bold small\">{{ companyDetails()?.companyPhoneNumber}}</span>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Company Address</label>\r\n <span class=\"small\">{{ companyDetails()?.address1}}, {{ companyDetails()?.city}}, {{ companyDetails()?.state}}, {{ companyDetails()?.zipcode}}, {{ companyDetails()?.country}}</span>\r\n </div>\r\n <div class=\"col-md-6\" *ngIf=\"companyLogoUrl()\">\r\n <label class=\"small text-muted d-block\">Company Logo</label>\r\n <img [src]=\"companyLogoUrl()\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Company Details Edit Mode -->\r\n <div class=\"card shadow-sm border-0\" *ngIf=\"isCompanyEditMode()\">\r\n <div class=\"card-header bg-white fw-bold\">Update Company Details</div>\r\n <div class=\"card-body p-4\">\r\n <form class=\"row g-3\" #companyForm=\"ngForm\" novalidate>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError }\"\r\n [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"companyName\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">\r\n Company name is required\r\n </div>\r\n <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">\r\n {{ companyNameError }}\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n <input (input)=\"phoneMask($event, 'company')\" type=\"text\" maxlength=\"14\" (keypress)=\"allowOnlyNumbers($event)\" inputmode=\"numeric\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"companyPhoneNumber\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">\r\n Company phone is required\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Address <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" ngx-google-places-autocomplete class=\"form-control form-control-sm\" (onAddressChange)=\"AddressChangeCompany($event)\"\r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.address1?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.address1\" name=\"address1\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">\r\n Address is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.city\" name=\"city\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">\r\n City is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.state\" name=\"state\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">\r\n State is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"zipcode\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">\r\n Zip code is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.country\" name=\"country\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">\r\n Country is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Logo</label>\r\n <input #uploadCompanyFile type=\"file\" accept=\"image/*\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n </div>\r\n <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n <label class=\"small text-muted d-block\">Logo Preview</label>\r\n <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n </div>\r\n </form>\r\n </div>\r\n <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelCompanyEdit()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCompany\" \r\n (click)=\"saveCompanyDetails()\">\r\n <span *ngIf=\"isSavingCompany\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCompany ? 'Saving...' : 'Save Changes' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-briefcase-fill section-header-icon\" style=\"color:#4077ad;\"></i>\r\n <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n <span *ngIf=\"experience().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"workSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ workSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"experience().length === 0 || isSavingWork || isAddingJob() || editingJobIndex() !== null\"\r\n (click)=\"confirmAllWork()\">\r\n <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingWork ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add work experience\" (click)=\"addJob()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><i class=\"bi bi-briefcase\"></i></div>\r\n <p>No work experience added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n <div class=\"list-group list-group-flush shadow-sm rounded-3\">\r\n <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-0 border-0\">\r\n <div class=\"form-panel mb-2\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"newJobTitle\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"newCompany\" />\r\n </div>\r\n <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"newIsCurrent\" id=\"newIsCurrent\" />\r\n <label class=\"form-check-label\" for=\"newIsCurrent\">Current</label>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"newCountry\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"newState\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"newCity\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"newStartDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n name=\"newEndDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is\r\n required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n <textarea rows=\"4\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"newResponsibilities\"></textarea>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onWorkExperienceFileSelected($event)\" name=\"newWorkAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n <span>{{ tempJob()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n <button class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingWork\"\r\n (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-0 border-0 mb-2\">\r\n\r\n <div class=\"work-accent-item p-3 rounded-3 bg-white border\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n <div class=\"item-icon-circle bg-primary-subtle text-primary me-3\">\r\n <i class=\"bi bi-briefcase-fill\"></i>\r\n </div>\r\n <div>\r\n <h6 class=\"mb-0 fw-bold\">{{ job.jobTitle }}</h6>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedWorkItem(i) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedWorkItem(i) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <small class=\"text-muted\">\r\n {{ job.company }} \u2022 {{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n formatMonthYear(job.endDate) }}\r\n </small>\r\n <div *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2\">\r\n\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\" (click)=\"startEditJob(i)\"\r\n title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteJob(i);\"\r\n title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n\r\n\r\n <!-- <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-light p-0\"\r\n style=\"width: 34px; height: 34px;\"\r\n (click)=\"toggleJob(i)\"\r\n title=\"Expand\"\r\n >\r\n <i class=\"bi cursor-pointer\" [ngClass]=\"expandedIndex() === i ? 'bi-chevron-up' : 'bi-chevron-down'\"></i>\r\n </button> -->\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"mt-3 bg-light p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n <ul class=\"mb-0\">\r\n <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n </ul>\r\n </ng-container>\r\n\r\n <ng-template #editJobForm>\r\n <div *ngIf=\"(workIssuesByIndex()[i] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"jobTitle{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"company{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.company)\">Company name is required</div>\r\n </div>\r\n\r\n <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"isCurrent{{ i }}\" id=\"isCurrent{{ i }}\" />\r\n <label class=\"form-check-label\" for=\"isCurrent{{ i }}\">Current</label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"country{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"state{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"city{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"startDate{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n name=\"endDate{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">\r\n End date is required\r\n </div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n <textarea rows=\"4\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"responsibilities{{ i }}\"></textarea>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onWorkExperienceFileSelected($event)\" name=\"workAttachment{{ i }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n <span>{{ tempJob()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-3\" *ngIf=\"editingJobIndex() === i\">\r\n <button class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingWork\"\r\n (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-patch-check-fill section-header-icon text-success\"></i>\r\n <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n <span *ngIf=\"certs().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"certificationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ certificationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"certs().length === 0 || isSavingCertification || isAddingCertification() || editingCertificationIndex() !== null\"\r\n (click)=\"confirmAllCertifications()\">\r\n <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCertification ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add certification\" (click)=\"addCertification()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><i class=\"bi bi-patch-check\"></i></div>\r\n <p>No certifications added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n\r\n <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3 px-3\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"newCertName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\" name=\"newCertOrg\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"newCertState\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certification Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\" name=\"newCertCredentialId\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"newCertIssueDate\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"newCertExpiryDate\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onCertificationFileSelected($event)\" name=\"newCertAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n <span>{{ tempCertification()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n (click)=\"saveCertificationEditor()\">\r\n <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3 cert-accent-item\">\r\n <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n <div>\r\n <div class=\"fw-semibold\">{{ cert.name }}</div>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedCertificationItem(ci) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedCertificationItem(ci) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"small text-muted\">\r\n {{ cert.issuingOrganization || '\u2014' }}\r\n <span *ngIf=\"cert.state\"> \u2022 {{ cert.state }}</span>\r\n </div>\r\n <div class=\"small text-muted\">\r\n Issue: {{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }}\r\n <span class=\"mx-1\">|</span>\r\n Expiry: {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n (click)=\"startEditCertification(ci)\" title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n (click)=\"deleteCertification(ci)\" title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #editCert>\r\n <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"certName{{ ci }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n name=\"certOrg{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"certState{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certification Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n name=\"certCredentialId{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"certIssue{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"certExpiry{{ ci }}\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onCertificationFileSelected($event)\" name=\"certAttachment{{ ci }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n <span>{{ tempCertification()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n (click)=\"saveCertificationEditor()\">\r\n <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-card-checklist section-header-icon text-warning\"></i>\r\n <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n <span *ngIf=\"licenses().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"licenseSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ licenseSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"licenses().length === 0 || isSavingLicense || isAddingLicense() || editingLicenseIndex() !== null\"\r\n (click)=\"confirmAllLicenses()\">\r\n <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingLicense ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add license\" (click)=\"addLicense()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><i class=\"bi bi-card-checklist\"></i></div>\r\n <p>No licenses added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n\r\n <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3 px-3\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"newLicName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"newLicAuthority\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"newLicNumber\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"newLicState\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"newLicIssueDate\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"newLicExpiryDate\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onLicenseFileSelected($event)\" name=\"newLicenseAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n <span>{{ tempLicense()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n (click)=\"saveLicenseEditor()\">\r\n <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3 lic-accent-item\">\r\n <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n <div>\r\n <div class=\"fw-semibold\">{{ lic.name }}</div>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedLicenseItem(li) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedLicenseItem(li) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"small text-muted\">\r\n {{ lic.issuingAuthority || '\u2014' }}\r\n <span *ngIf=\"lic.state\"> \u2022 {{ lic.state }}</span>\r\n </div>\r\n <div class=\"small text-muted\">\r\n Issue: {{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }}\r\n <span class=\"mx-1\">|</span>\r\n Expiry: {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n (click)=\"startEditLicense(li)\" title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteLicense(li)\"\r\n title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #editLic>\r\n <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"licName{{ li }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"licAuthority{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"licNumber{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"licState{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"licIssue{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"licExpiry{{ li }}\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onLicenseFileSelected($event)\" name=\"licenseAttachment{{ li }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n <span>{{ tempLicense()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditLicense()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n (click)=\"saveLicenseEditor()\">\r\n <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-tools section-header-icon text-info\"></i>\r\n <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n <span *ngIf=\"tools().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"toolsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ toolsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"tools().length === 0 || isSavingTool || isToolEditorOpen()\" (click)=\"confirmAllTools()\">\r\n <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingTool ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add tool\" (click)=\"addTool()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\"\r\n class=\"btn btn-light border res-flex rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n (click)=\"openToolEditor(ti)\" title=\"Edit\">\r\n <span class=\"fw-normal text-dark\">{{ tool }}</span>\r\n <span class=\"badge border ms-1\"\r\n [ngClass]=\"hasUnsavedToolItem(ti) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedToolItem(ti) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <span *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n Missing info\r\n </span>\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete tool\" (click)=\"deleteTool(ti)\">\r\n <span class=\"fw-bold\">\u00D7</span>\r\n </button>\r\n </div>\r\n\r\n <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n </div>\r\n\r\n <!-- Tool edit panel (overlay) -->\r\n <div *ngIf=\"isToolEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n style=\"background: rgba(0,0,0,0.35); z-index: 2000;\" (click)=\"closeToolEditor()\">\r\n <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n <i class=\"bi bi-arrow-left fs-5\"></i>\r\n </button>\r\n <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}\r\n </div>\r\n </div>\r\n <div class=\"card-body p-4\">\r\n <div *ngIf=\"toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"toolForm()?.name\"\r\n (ngModelChange)=\"patchToolForm({ name: $event })\" name=\"toolName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(toolForm()?.name)\">Tool name is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span\r\n class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"setTempToolStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"(toolForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [ngModel]=\"toolForm()?.year\"\r\n (ngModelChange)=\"patchToolForm({ year: $event === '' ? null : +$event })\" name=\"toolYear\" min=\"1\"\r\n max=\"30\" placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"toolForm()?.year === null || toolForm()?.year === undefined\">\r\n Years of experience is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4 text-center\">\r\n <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n <div class=\"form-checks form-switch mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\" id=\"toolVisible\"\r\n style=\"width: 55px;height: 25px;\" />\r\n <label class=\"form-check-label ps-2 pt-1\" for=\"toolVisible\">Visible</label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Comment</label>\r\n <textarea rows=\"4\" class=\"form-control\" [ngModel]=\"toolForm()?.notes\"\r\n (ngModelChange)=\"patchToolForm({ notes: $event })\" name=\"toolNotes\"\r\n placeholder=\"Comment your tool here...\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n <button *ngIf=\"!isAddingTool() && editingToolIndex() !== null\" type=\"button\"\r\n class=\"btn btn-link text-danger me-auto\" (click)=\"deleteTool(editingToolIndex()!)\">\r\n Delete\r\n </button>\r\n <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingTool\" (click)=\"saveToolEditor()\">\r\n <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingTool ? 'Saving...' : toolActionLabel(editingToolIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row g-4 mb-5\">\r\n <div class=\"col-md-12\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-stars section-header-icon\" style=\"color:#16a34a;\"></i>\r\n <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n <span *ngIf=\"skills().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"skillsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ skillsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"skills().length === 0 || isSavingSkill || isSkillEditorOpen()\" (click)=\"confirmAllSkills()\">\r\n <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingSkill ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add skill\" (click)=\"addSkill()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\"\r\n class=\"btn btn-light border rounded-pill res-flex d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n (click)=\"openSkillEditor(si)\" title=\"Edit\">\r\n <span class=\"fw-normal text-dark\">{{ skill }}</span>\r\n <span class=\"badge border ms-1\"\r\n [ngClass]=\"hasUnsavedSkillItem(si) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedSkillItem(si) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <span *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n Missing info\r\n </span>\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete skill\"\r\n (click)=\"deleteSkill(si); $event.stopPropagation()\">\r\n <span class=\"fw-bold\">\u00D7</span>\r\n </button>\r\n </div>\r\n\r\n <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n </div>\r\n <!-- Skill edit panel (overlay) -->\r\n <div *ngIf=\"isSkillEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n style=\"background: rgba(0,0,0,0.35); z-index: 2000;\" (click)=\"closeSkillEditor()\">\r\n <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n <i class=\"bi bi-arrow-left fs-5\"></i>\r\n </button>\r\n <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill')\r\n }}</div>\r\n </div>\r\n <div class=\"card-body p-4\">\r\n <div *ngIf=\"skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"skillForm()?.name\"\r\n (ngModelChange)=\"patchSkillForm({ name: $event })\" name=\"skillName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span\r\n class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"setTempSkillStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"(skillForm()?.stars || 0) <= 0\">Star rating is required\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [ngModel]=\"skillForm()?.year\"\r\n (ngModelChange)=\"patchSkillForm({ year: $event === '' ? null : +$event })\" name=\"skillYear\" min=\"1\"\r\n max=\"30\" placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"skillForm()?.year === null || skillForm()?.year === undefined\">Years of experience is\r\n required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4 text-center\">\r\n <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n <div class=\"form-checks form-switch mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"skillForm()?.profileVisibility\"\r\n (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\" name=\"skillVisible\"\r\n id=\"skillVisible\" style=\"width: 55px;height: 25px;\" />\r\n <label class=\"form-check-label ps-2 pt-1\" for=\"skillVisible\">Visible</label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Comment</label>\r\n <textarea rows=\"4\" class=\"form-control\" [ngModel]=\"skillForm()?.notes\"\r\n (ngModelChange)=\"patchSkillForm({ notes: $event })\" name=\"skillNotes\"\r\n placeholder=\"Comment your skill here...\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n <button *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\" type=\"button\"\r\n class=\"btn btn-link text-danger me-auto\" (click)=\"deleteSkill(editingSkillIndex()!)\">\r\n Delete\r\n </button>\r\n <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingSkill\" (click)=\"saveSkillEditor()\">\r\n <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingSkill ? 'Saving...' : skillActionLabel(editingSkillIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row g-4 mb-5\">\r\n <div class=\"col-md-12\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <i class=\"bi bi-mortarboard-fill section-header-icon\" style=\"color:#6366f1;\"></i>\r\n <h5 class=\"fw-bold mb-0\">Education</h5>\r\n <span *ngIf=\"educationList().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"educationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ educationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"educationList().length === 0 || isSavingEducation || isAddingEducation() || editingEducationIndex() !== null\"\r\n (click)=\"confirmAllEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add education\" (click)=\"addEducation()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><i class=\"bi bi-mortarboard\"></i></div>\r\n <p>No education added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n\r\n <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"mb-2\">\r\n <div class=\"form-panel\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"newEduDegree\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"newEduInstitution\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\">\r\n </ng-select>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"newEduCountry\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"newEduState\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"newEduCity\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"newEduStartDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"newEduEndDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">EDUCATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onEducationFileSelected($event)\" name=\"newEducationAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n <span>{{ tempEducation()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditEducation()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingEducation\"\r\n (click)=\"saveEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"edu-accent-item p-3 bg-white border rounded-3 shadow-sm mb-2\">\r\n <div class=\"d-flex justify-content-between align-items-start\">\r\n <div class=\"d-flex align-items-start gap-3\">\r\n <div class=\"item-icon-circle flex-shrink-0\" style=\"background:#f5f3ff; color:#6366f1;\">\r\n <i class=\"bi bi-mortarboard-fill\"></i>\r\n </div>\r\n <div>\r\n <h6 class=\"fw-bold mb-1\">{{ edu.degree }}</h6>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedEducationItem(ei) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedEducationItem(ei) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <p class=\"small text-primary mb-0\">{{ edu.institution }}</p>\r\n <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\" *ngIf=\"editingEducationIndex() !== ei\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n (click)=\"startEditEducation(ei)\" title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteEducation(ei)\"\r\n title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"editingEducationIndex() === ei\" class=\"mt-3\">\r\n <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"eduDegree{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"eduInstitution{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.institution)\">Institution name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\">\r\n </ng-select>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"eduCountry{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"eduState{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"eduStartDate{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"eduEndDate{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">EDUCATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onEducationFileSelected($event)\" name=\"educationAttachment{{ ei }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n <span>{{ tempEducation()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingEducation\" (click)=\"saveEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 justify-content-center mt-5 pt-2\" *ngIf=\"!isResume\">\r\n <button class=\"btn btn-outline-secondary px-5 h-auto rounded-pill\" (click)=\"onBackClick()\">\r\n <i class=\"bi bi-arrow-left me-1\"></i> Back\r\n </button>\r\n <button class=\"btn btn-primary px-5 shadow-sm h-auto rounded-pill\" [disabled]=\"!canConfirmAndContinue() || isSavingBasic\"\r\n (click)=\"onGoToDashboardClick()\">\r\n <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingBasic ? 'Saving...' : 'Go to Dashboard' }}\r\n <i class=\"bi bi-arrow-right ms-1\" *ngIf=\"!isSavingBasic\"></i>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n <div class=\"text-center p-5\">\r\n <div class=\"spinner-border text-primary\"></div>\r\n <p class=\"text-muted mt-2\">Loading data...</p>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Bulk Skill Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkSkillConfirm\">\r\n <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n <h4 class=\"mb-1\">Set Rating for All Skills</h4>\r\n <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all skills that are missing these values.</p>\r\n <div class=\"mb-3\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"bulkSkillStars = s\">\r\n <span [class]=\"bulkSkillStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n {{ bulkSkillStars >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ bulkSkillStars }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillStars <= 0\">Star rating is required</div>\r\n </div>\r\n <div class=\"mb-4\">\r\n <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkSkillYear\" min=\"1\" max=\"30\"\r\n placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillYear === null || bulkSkillYear === undefined\">Years of experience is required</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkSkillConfirm()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingSkill || bulkSkillStars <= 0 || bulkSkillYear === null\"\r\n (click)=\"applyBulkSkillConfirm()\">\r\n <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingSkill ? 'Saving...' : 'Apply to All & Save' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Bulk Tool Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkToolConfirm\">\r\n <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n <h4 class=\"mb-1\">Set Rating for All Tools</h4>\r\n <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all tools that are missing these values.</p>\r\n <div class=\"mb-3\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"bulkToolStars = s\">\r\n <span [class]=\"bulkToolStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n {{ bulkToolStars >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ bulkToolStars }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolStars <= 0\">Star rating is required</div>\r\n </div>\r\n <div class=\"mb-4\">\r\n <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkToolYear\" min=\"1\" max=\"30\"\r\n placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolYear === null || bulkToolYear === undefined\">Years of experience is required</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkToolConfirm()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingTool || bulkToolStars <= 0 || bulkToolYear === null\"\r\n (click)=\"applyBulkToolConfirm()\">\r\n <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingTool ? 'Saving...' : 'Apply to All & Save' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n <div class=\"confirm-modal-card\">\r\n <h4 class=\"mb-2\">Leave this page?</h4>\r\n <p class=\"text-muted mb-4\">If you go back, only saved data will be retained.</p>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"stayOnPreview()\">Stay</button>\r\n <button type=\"button\" class=\"btn btn-danger h-auto\" (click)=\"proceedBack()\">Proceed Back</button>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showDashboardConfirmPopup\">\r\n <div class=\"confirm-modal-card\">\r\n <h4 class=\"mb-2\">Finish Setup and Continue</h4>\r\n <p class=\"text-muted mb-4\">Save your information and go to your dashboard</p>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" [disabled]=\"isSavingBasic\"\r\n (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingBasic\" (click)=\"goToDashboard()\">\r\n <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingBasic ? 'Proceeding...' : 'Proceed' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#333}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:16px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:.95rem}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 .5rem 1rem #0000001a!important}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover{box-shadow:0 10px 20px #0000001a!important}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:all .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc;transform:translate(5px);box-shadow:-5px 0 15px #0000000d}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important;box-shadow:0 10px 15px #0000001a!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 12px #0003}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:10px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border-color:#dc3545;color:#dc3545;border-radius:10px}button.btn.btn-sm.btn-outline-danger:hover{background-color:#bb2d3b;border-color:#bb2d3b;color:#fff}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:50%!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0!important;background:transparent!important;border:none!important;box-shadow:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0f172a40;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-weight:600;color:#1f2937}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);background:#fff;border-radius:14px;box-shadow:0 20px 35px #0f172a38;border:1px solid #e5e7eb;padding:24px}.year-experience-select{max-height:150px}@media screen and (max-width: 768px){.res-flex{display:unset!important}.res-flex .fw-normal{width:100%;display:block;font-size:13px!important}}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{background-color:#4077ad!important}.profile-avatar-circle{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,#4077ad,#6ca0dc);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0;box-shadow:0 4px 12px #4077ad4d}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9}.work-accent-item{border-left:4px solid #4077ad!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.work-accent-item:hover{background-color:#f5f8ff!important;box-shadow:0 4px 14px #4077ad17!important}.edu-accent-item{border-left:4px solid #6366f1!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.edu-accent-item:hover{background-color:#f8f8ff!important;box-shadow:0 4px 14px #6366f117!important}.cert-accent-item{border-left:4px solid #059669!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.cert-accent-item:hover{background-color:#f0fdf4!important}.lic-accent-item{border-left:4px solid #d97706!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-bottom:3px;display:block}.field-value-sm{font-weight:600;font-size:.875rem;color:#1f2937}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:12px}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:.875rem}.form-panel{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:8px;font-size:.875rem}.form-panel .form-control:focus,.form-panel .form-select:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.section-header-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px;border-bottom:2px solid #f1f5f9;margin-bottom:16px}.preview-card-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff);border-bottom:1px solid #e2e8f0;padding:20px 24px 16px;border-radius:13px 13px 0 0}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}\n"] }]
|
|
5237
|
+
], template: "<div class=\"preview-page-header\" *ngIf=\"!isResume\">\r\n <div class=\"d-flex align-items-center gap-2 mb-1\">\r\n <img src=\"/assets/images/icons/file-person.svg\" width=\"24\" height=\"24\" alt=\"\" />\r\n <h2 class=\"preview-title mb-0\">Review Extracted Information</h2>\r\n </div>\r\n <p class=\"preview-subtitle text-muted\">We\u2019ve automatically extracted details from your uploaded resume. Please review and confirm accuracy before proceeding.</p>\r\n</div>\r\n\r\n\r\n<div [ngClass]=\"isResume ? '' : 'container py-4'\">\r\n <div class=\"section mb-5\">\r\n <div *ngIf=\"details() as data; else loading\">\r\n <div class=\"card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isEditMode()\">\r\n <div class=\"card-body p-0\">\r\n <div class=\"preview-card-gradient\">\r\n <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n <div class=\"d-flex align-items-start gap-3\">\r\n <div class=\"profile-avatar-circle\">\r\n {{ (data.firstName?.[0] || '') }}{{ (data.lastName?.[0] || '') }}\r\n </div>\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n Missing info\r\n </span>\r\n <span class=\"badge border section-flag\"\r\n [ngClass]=\"basicDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n {{ basicDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n </span>\r\n </div>\r\n <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <span class=\"badge bg-primary-subtle text-primary border p-2\">Email Verified</span>\r\n </div>\r\n\r\n </div>\r\n <div class=\"px-4 py-3\">\r\n <div class=\"row g-4\">\r\n <div class=\"col-12 border-bottom pb-2\">\r\n <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <span class=\"field-label-sm\"><img src=\"/assets/images/icons/envelope.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Email</span>\r\n <span class=\"field-value-sm d-block\">{{ data.email }}</span>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Phone</span>\r\n <span class=\"field-value-sm d-block\">{{ data.phone }}</span>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Location</span>\r\n <span class=\"field-value-sm d-block\">{{ data.address }}, {{ data.city }}, {{ data.state }}, {{ data.zipCode }}, {{ data.country }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer bg-light d-flex align-items-center justify-content-between\">\r\n <span *ngIf=\"!basicDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your basic info.\r\n </span>\r\n <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Basic details saved.\r\n </span>\r\n <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"card shadow-sm border-0\" *ngIf=\"isEditMode()\">\r\n <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n <div class=\"card-body p-4\">\r\n <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.firstName\" name=\"fName\"\r\n placeholder=\"First Name\" required #fName=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.lastName\" name=\"lName\"\r\n placeholder=\"Last Name\" required #lName=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is\r\n required</div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Summary</label>\r\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n placeholder=\"Summary\"></textarea>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n <input type=\"email\" class=\"form-control\" [(ngModel)]=\"tempProfile.email\" name=\"email\" placeholder=\"Email\"\r\n required email #email=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.phone\" (input)=\"phoneMask($event, 'profile')\"\r\n name=\"phone\" placeholder=\"Phone (10 digits)\" (keypress)=\"allowOnlyNumbers($event)\"\r\n required pattern=\"^\\d{10}$\" maxlength=\"14\" inputmode=\"numeric\" #phone=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-3\">\r\n <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n <input ngx-google-places-autocomplete [options]=\"options\" type=\"text\" class=\"form-control\" (onAddressChange)=\"AddressChangeUser($event)\" [(ngModel)]=\"tempProfile.address\" name=\"address\"\r\n placeholder=\"Home Address\" required #address=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home\r\n address is required</div>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.city\" name=\"city\" placeholder=\"City\"\r\n required #city=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.state\" name=\"state\" placeholder=\"State\"\r\n required #state=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is\r\n required</div>\r\n </div>\r\n\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.zipCode\"\r\n (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\" name=\"zipCode\" placeholder=\"Zip Code\"\r\n required pattern=\"^\\d{1,6}$\" maxlength=\"6\" inputmode=\"numeric\" #zipCode=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code\r\n is required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"zipCode.errors?.['pattern'] && (zipCode.dirty || zipCode.touched)\">\r\n Zip code must be up to 6 digits\r\n </div>\r\n </div>\r\n <div class=\"col-md-2\">\r\n <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.country\" name=\"country\"\r\n placeholder=\"Country\" required #country=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country\r\n is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\"></span></label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"jobTitle\"\r\n placeholder=\"Job Title\" #jobTitle=\"ngModel\">\r\n <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job\r\n title is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n name=\"yearsOfExperience\" placeholder=\"Years of Experience\" required min=\"0\"\r\n #yearsOfExperience=\"ngModel\">\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"yearsOfExperience.invalid && (yearsOfExperience.dirty || yearsOfExperience.touched)\">\r\n Years of experience is required\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingBasic\" (click)=\"save()\">\r\n <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingBasic ? 'Saving...' : 'Save Changes' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\" *ngIf=\"roleData.role.name == 'Provider'\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Company Details</h5>\r\n <span *ngIf=\"companyDetailsSaved\"\r\n class=\"badge border section-flag bg-success-subtle text-success\">\r\n Saved\r\n </span>\r\n <span *ngIf=\"!companyDetailsSaved\"\r\n class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n Not saved yet\r\n </span>\r\n </div>\r\n <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleCompanyEdit()\">Edit</button>\r\n </div>\r\n\r\n <!-- Company Details Display Mode -->\r\n <div class=\"card shadow-sm border-0\" *ngIf=\"!isCompanyEditMode()\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row g-4\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Name</label>\r\n <span class=\"fw-bold small\">{{ companyDetails()?.companyName}}</span>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Phone</label>\r\n <span class=\"fw-bold small\">{{ companyDetails()?.companyPhoneNumber}}</span>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Company Address</label>\r\n <span class=\"small\">{{ companyDetails()?.address1}}, {{ companyDetails()?.city}}, {{ companyDetails()?.state}}, {{ companyDetails()?.zipcode}}, {{ companyDetails()?.country}}</span>\r\n </div>\r\n <div class=\"col-md-6\" *ngIf=\"companyLogoUrl()\">\r\n <label class=\"small text-muted d-block\">Company Logo</label>\r\n <img [src]=\"companyLogoUrl()\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Company Details Edit Mode -->\r\n <div class=\"card shadow-sm border-0\" *ngIf=\"isCompanyEditMode()\">\r\n <div class=\"card-header bg-white fw-bold\">Update Company Details</div>\r\n <div class=\"card-body p-4\">\r\n <form class=\"row g-3\" #companyForm=\"ngForm\" novalidate>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError }\"\r\n [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"companyName\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">\r\n Company name is required\r\n </div>\r\n <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">\r\n {{ companyNameError }}\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n <input (input)=\"phoneMask($event, 'company')\" type=\"text\" maxlength=\"14\" (keypress)=\"allowOnlyNumbers($event)\" inputmode=\"numeric\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"companyPhoneNumber\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">\r\n Company phone is required\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Address <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" ngx-google-places-autocomplete class=\"form-control form-control-sm\" (onAddressChange)=\"AddressChangeCompany($event)\"\r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.address1?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.address1\" name=\"address1\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">\r\n Address is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.city\" name=\"city\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">\r\n City is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.state\" name=\"state\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">\r\n State is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"zipcode\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">\r\n Zip code is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" \r\n [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted }\"\r\n [(ngModel)]=\"tempCompanyDetails.country\" name=\"country\" required />\r\n <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">\r\n Country is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Company Logo</label>\r\n <input #uploadCompanyFile type=\"file\" accept=\"image/*\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n </div>\r\n <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n <label class=\"small text-muted d-block\">Logo Preview</label>\r\n <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n </div>\r\n </form>\r\n </div>\r\n <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelCompanyEdit()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCompany\" \r\n (click)=\"saveCompanyDetails()\">\r\n <span *ngIf=\"isSavingCompany\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCompany ? 'Saving...' : 'Save Changes' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n <span *ngIf=\"experience().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"workSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ workSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"experience().length === 0 || isSavingWork || isAddingJob() || editingJobIndex() !== null\"\r\n (click)=\"confirmAllWork()\">\r\n <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingWork ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add work experience\" (click)=\"addJob()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><img src=\"/assets/images/icons/briefcase.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n <p>No work experience added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n <div class=\"list-group list-group-flush shadow-sm rounded-3\">\r\n <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-0 border-0\">\r\n <div class=\"form-panel mb-2\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"newJobTitle\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"newCompany\" />\r\n </div>\r\n <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"newIsCurrent\" id=\"newIsCurrent\" />\r\n <label class=\"form-check-label\" for=\"newIsCurrent\">Current</label>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"newCountry\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"newState\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"newCity\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"newStartDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n name=\"newEndDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is\r\n required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n <textarea rows=\"4\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"newResponsibilities\"></textarea>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onWorkExperienceFileSelected($event)\" name=\"newWorkAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n <span>{{ tempJob()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n <button class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingWork\"\r\n (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-0 border-0 mb-2\">\r\n\r\n <div class=\"work-accent-item p-3 rounded-3 bg-white border\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n <div class=\"item-icon-circle bg-primary-subtle text-primary me-3\">\r\n <img src=\"/assets/images/icons/briefcase-fill-blue.svg\" width=\"16\" height=\"16\" alt=\"\" />\r\n </div>\r\n <div>\r\n <h6 class=\"mb-0 fw-bold\">{{ job.jobTitle }}</h6>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedWorkItem(i) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedWorkItem(i) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <small class=\"text-muted\">\r\n {{ job.company }} \u2022 {{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n formatMonthYear(job.endDate) }}\r\n </small>\r\n <div *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex align-items-center gap-2\">\r\n\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\" (click)=\"startEditJob(i)\"\r\n title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteJob(i);\"\r\n title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n\r\n\r\n <!-- <button\r\n type=\"button\"\r\n class=\"btn btn-sm btn-light p-0\"\r\n style=\"width: 34px; height: 34px;\"\r\n (click)=\"toggleJob(i)\"\r\n title=\"Expand\"\r\n >\r\n <i class=\"bi cursor-pointer\" [ngClass]=\"expandedIndex() === i ? 'bi-chevron-up' : 'bi-chevron-down'\"></i>\r\n </button> -->\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"mt-3 bg-light p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n <ul class=\"mb-0\">\r\n <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n </ul>\r\n </ng-container>\r\n\r\n <ng-template #editJobForm>\r\n <div *ngIf=\"(workIssuesByIndex()[i] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"jobTitle{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"company{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.company)\">Company name is required</div>\r\n </div>\r\n\r\n <div class=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"isCurrent{{ i }}\" id=\"isCurrent{{ i }}\" />\r\n <label class=\"form-check-label\" for=\"isCurrent{{ i }}\">Current</label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"country{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"state{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"city{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n (bsValueChange)=\"setTempJobMonth('startDate', $event)\" name=\"startDate{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n name=\"endDate{{ i }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">\r\n End date is required\r\n </div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n <textarea rows=\"4\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"responsibilities{{ i }}\"></textarea>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onWorkExperienceFileSelected($event)\" name=\"workAttachment{{ i }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n <span>{{ tempJob()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-3\" *ngIf=\"editingJobIndex() === i\">\r\n <button class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingWork\"\r\n (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/patch-check-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n <span *ngIf=\"certs().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"certificationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ certificationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"certs().length === 0 || isSavingCertification || isAddingCertification() || editingCertificationIndex() !== null\"\r\n (click)=\"confirmAllCertifications()\">\r\n <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCertification ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add certification\" (click)=\"addCertification()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><img src=\"/assets/images/icons/patch-check.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n <p>No certifications added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n\r\n <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3 px-3\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"newCertName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\" name=\"newCertOrg\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"newCertState\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certification Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\" name=\"newCertCredentialId\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"newCertIssueDate\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"newCertExpiryDate\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onCertificationFileSelected($event)\" name=\"newCertAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n <span>{{ tempCertification()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n (click)=\"saveCertificationEditor()\">\r\n <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3 cert-accent-item\">\r\n <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n <div>\r\n <div class=\"fw-semibold\">{{ cert.name }}</div>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedCertificationItem(ci) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedCertificationItem(ci) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"small text-muted\">\r\n {{ cert.issuingOrganization || '\u2014' }}\r\n <span *ngIf=\"cert.state\"> \u2022 {{ cert.state }}</span>\r\n </div>\r\n <div class=\"small text-muted\">\r\n Issue: {{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }}\r\n <span class=\"mx-1\">|</span>\r\n Expiry: {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n (click)=\"startEditCertification(ci)\" title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n (click)=\"deleteCertification(ci)\" title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #editCert>\r\n <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"certName{{ ci }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certificate Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n name=\"certOrg{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"certState{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Certification Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\"\r\n [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n name=\"certCredentialId{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" name=\"certIssue{{ ci }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" name=\"certExpiry{{ ci }}\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onCertificationFileSelected($event)\" name=\"certAttachment{{ ci }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n <span>{{ tempCertification()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n (click)=\"saveCertificationEditor()\">\r\n <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/card-checklist-warning.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n <span *ngIf=\"licenses().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"licenseSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ licenseSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"licenses().length === 0 || isSavingLicense || isAddingLicense() || editingLicenseIndex() !== null\"\r\n (click)=\"confirmAllLicenses()\">\r\n <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingLicense ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add license\" (click)=\"addLicense()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><img src=\"/assets/images/icons/card-checklist.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n <p>No licenses added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n\r\n <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3 px-3\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"newLicName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"newLicAuthority\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"newLicNumber\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"newLicState\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"newLicIssueDate\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"newLicExpiryDate\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onLicenseFileSelected($event)\" name=\"newLicenseAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n <span>{{ tempLicense()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n (click)=\"saveLicenseEditor()\">\r\n <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3 lic-accent-item\">\r\n <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n <div>\r\n <div class=\"fw-semibold\">{{ lic.name }}</div>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedLicenseItem(li) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedLicenseItem(li) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"small text-muted\">\r\n {{ lic.issuingAuthority || '\u2014' }}\r\n <span *ngIf=\"lic.state\"> \u2022 {{ lic.state }}</span>\r\n </div>\r\n <div class=\"small text-muted\">\r\n Issue: {{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }}\r\n <span class=\"mx-1\">|</span>\r\n Expiry: {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n (click)=\"startEditLicense(li)\" title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteLicense(li)\"\r\n title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #editLic>\r\n <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"licName{{ li }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Issued By</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"licAuthority{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">License Number</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"licNumber{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issued State</label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"licState{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Issue Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" name=\"licIssue{{ li }}\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">Expiry Date</label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" name=\"licExpiry{{ li }}\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n Issued date must be less than expiry date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onLicenseFileSelected($event)\" name=\"licenseAttachment{{ li }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n <span>{{ tempLicense()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditLicense()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n (click)=\"saveLicenseEditor()\">\r\n <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mb-5\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/tools.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n <span *ngIf=\"tools().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"toolsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ toolsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"tools().length === 0 || isSavingTool || isToolEditorOpen()\" (click)=\"confirmAllTools()\">\r\n <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingTool ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add tool\" (click)=\"addTool()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\"\r\n class=\"btn btn-light border res-flex rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n (click)=\"openToolEditor(ti)\" title=\"Edit\">\r\n <span class=\"fw-normal text-dark\">{{ tool }}</span>\r\n <span class=\"badge border ms-1\"\r\n [ngClass]=\"hasUnsavedToolItem(ti) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedToolItem(ti) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <span *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n Missing info\r\n </span>\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete tool\" (click)=\"deleteTool(ti)\">\r\n <span class=\"fw-bold\">\u00D7</span>\r\n </button>\r\n </div>\r\n\r\n <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n </div>\r\n\r\n <!-- Tool edit panel (overlay) -->\r\n <div *ngIf=\"isToolEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n style=\"background: rgba(0,0,0,0.35); z-index: 2000;\" (click)=\"closeToolEditor()\">\r\n <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\r\n </button>\r\n <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}\r\n </div>\r\n </div>\r\n <div class=\"card-body p-4\">\r\n <div *ngIf=\"toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"toolForm()?.name\"\r\n (ngModelChange)=\"patchToolForm({ name: $event })\" name=\"toolName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(toolForm()?.name)\">Tool name is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span\r\n class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"setTempToolStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"(toolForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [ngModel]=\"toolForm()?.year\"\r\n (ngModelChange)=\"patchToolForm({ year: $event === '' ? null : +$event })\" name=\"toolYear\" min=\"1\"\r\n max=\"30\" placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"toolForm()?.year === null || toolForm()?.year === undefined\">\r\n Years of experience is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4 text-center\">\r\n <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n <div class=\"form-checks form-switch mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\" id=\"toolVisible\"\r\n style=\"width: 55px;height: 25px;\" />\r\n <label class=\"form-check-label ps-2 pt-1\" for=\"toolVisible\">Visible</label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Comment</label>\r\n <textarea rows=\"4\" class=\"form-control\" [ngModel]=\"toolForm()?.notes\"\r\n (ngModelChange)=\"patchToolForm({ notes: $event })\" name=\"toolNotes\"\r\n placeholder=\"Comment your tool here...\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n <button *ngIf=\"!isAddingTool() && editingToolIndex() !== null\" type=\"button\"\r\n class=\"btn btn-link text-danger me-auto\" (click)=\"deleteTool(editingToolIndex()!)\">\r\n Delete\r\n </button>\r\n <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingTool\" (click)=\"saveToolEditor()\">\r\n <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingTool ? 'Saving...' : toolActionLabel(editingToolIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row g-4 mb-5\">\r\n <div class=\"col-md-12\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/stars.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n <span *ngIf=\"skills().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"skillsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ skillsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"skills().length === 0 || isSavingSkill || isSkillEditorOpen()\" (click)=\"confirmAllSkills()\">\r\n <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingSkill ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add skill\" (click)=\"addSkill()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\"\r\n class=\"btn btn-light border rounded-pill res-flex d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n (click)=\"openSkillEditor(si)\" title=\"Edit\">\r\n <span class=\"fw-normal text-dark\">{{ skill }}</span>\r\n <span class=\"badge border ms-1\"\r\n [ngClass]=\"hasUnsavedSkillItem(si) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedSkillItem(si) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <span *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n Missing info\r\n </span>\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete skill\"\r\n (click)=\"deleteSkill(si); $event.stopPropagation()\">\r\n <span class=\"fw-bold\">\u00D7</span>\r\n </button>\r\n </div>\r\n\r\n <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n </div>\r\n <!-- Skill edit panel (overlay) -->\r\n <div *ngIf=\"isSkillEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n style=\"background: rgba(0,0,0,0.35); z-index: 2000;\" (click)=\"closeSkillEditor()\">\r\n <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\r\n </button>\r\n <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill')\r\n }}</div>\r\n </div>\r\n <div class=\"card-body p-4\">\r\n <div *ngIf=\"skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n </div>\r\n <div class=\"row g-3\">\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control\" [ngModel]=\"skillForm()?.name\"\r\n (ngModelChange)=\"patchSkillForm({ name: $event })\" name=\"skillName\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span\r\n class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"setTempSkillStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"(skillForm()?.stars || 0) <= 0\">Star rating is required\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [ngModel]=\"skillForm()?.year\"\r\n (ngModelChange)=\"patchSkillForm({ year: $event === '' ? null : +$event })\" name=\"skillYear\" min=\"1\"\r\n max=\"30\" placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"skillForm()?.year === null || skillForm()?.year === undefined\">Years of experience is\r\n required</div>\r\n </div>\r\n\r\n <div class=\"col-md-4 text-center\">\r\n <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n <div class=\"form-checks form-switch mt-2\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"skillForm()?.profileVisibility\"\r\n (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\" name=\"skillVisible\"\r\n id=\"skillVisible\" style=\"width: 55px;height: 25px;\" />\r\n <label class=\"form-check-label ps-2 pt-1\" for=\"skillVisible\">Visible</label>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">Comment</label>\r\n <textarea rows=\"4\" class=\"form-control\" [ngModel]=\"skillForm()?.notes\"\r\n (ngModelChange)=\"patchSkillForm({ notes: $event })\" name=\"skillNotes\"\r\n placeholder=\"Comment your skill here...\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n <button *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\" type=\"button\"\r\n class=\"btn btn-link text-danger me-auto\" (click)=\"deleteSkill(editingSkillIndex()!)\">\r\n Delete\r\n </button>\r\n <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingSkill\" (click)=\"saveSkillEditor()\">\r\n <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingSkill ? 'Saving...' : skillActionLabel(editingSkillIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row g-4 mb-5\">\r\n <div class=\"col-md-12\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n <h5 class=\"fw-bold mb-0\">Education</h5>\r\n <span *ngIf=\"educationList().length > 0\" class=\"badge border section-flag\"\r\n [ngClass]=\"educationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ educationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n [disabled]=\"educationList().length === 0 || isSavingEducation || isAddingEducation() || editingEducationIndex() !== null\"\r\n (click)=\"confirmAllEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Confirming...' : 'Confirm All' }}\r\n </button>\r\n <button type=\"button\"\r\n class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add education\" (click)=\"addEducation()\">\r\n <span class=\"fw-bold fs-5\">+</span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n class=\"empty-state-wrap mb-3\">\r\n <div class=\"empty-icon\"><img src=\"/assets/images/icons/mortarboard.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n <p>No education added yet. Click <strong>+</strong> to add one.</p>\r\n </div>\r\n\r\n <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"mb-2\">\r\n <div class=\"form-panel\">\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"newEduDegree\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"newEduInstitution\" />\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\">\r\n </ng-select>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"newEduCountry\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"newEduState\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"newEduCity\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"newEduStartDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"newEduEndDate\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">EDUCATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onEducationFileSelected($event)\" name=\"newEducationAttachment\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n <span>{{ tempEducation()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditEducation()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingEducation\"\r\n (click)=\"saveEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"edu-accent-item p-3 bg-white border rounded-3 shadow-sm mb-2\">\r\n <div class=\"d-flex justify-content-between align-items-start\">\r\n <div class=\"d-flex align-items-start gap-3\">\r\n <div class=\"item-icon-circle flex-shrink-0\" style=\"background:#f5f3ff; color:#6366f1;\">\r\n <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"16\" height=\"16\" alt=\"\" />\r\n </div>\r\n <div>\r\n <h6 class=\"fw-bold mb-1\">{{ edu.degree }}</h6>\r\n <span class=\"badge border mt-1\"\r\n [ngClass]=\"hasUnsavedEducationItem(ei) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n {{ hasUnsavedEducationItem(ei) ? 'Not saved yet' : 'Saved' }}\r\n </span>\r\n <p class=\"small text-primary mb-0\">{{ edu.institution }}</p>\r\n <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n <div class=\"fw-semibold small\">Missing required fields</div>\r\n <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\" *ngIf=\"editingEducationIndex() !== ei\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n (click)=\"startEditEducation(ei)\" title=\"Edit\">\r\n <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n </button>\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteEducation(ei)\"\r\n title=\"Delete\">\r\n <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"editingEducationIndex() === ei\" class=\"mt-3\">\r\n <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n <div class=\"fw-semibold\">Missing required fields</div>\r\n <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n </div>\r\n <form class=\"row g-2\">\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"eduDegree{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"eduInstitution{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.institution)\">Institution name is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\">\r\n </ng-select>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"eduCountry{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"eduState{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City is required</div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('startDate', $event)\" name=\"eduStartDate{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required\r\n </div>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n (bsValueChange)=\"setTempEducationMonth('endDate', $event)\" name=\"eduEndDate{{ ei }}\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n <div class=\"small text-danger mt-1\"\r\n *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n Start date must be less than end date\r\n </div>\r\n </div>\r\n <div class=\"col-12\">\r\n <label class=\"small text-muted d-block\">EDUCATION FILE</label>\r\n <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n (change)=\"onEducationFileSelected($event)\" name=\"educationAttachment{{ ei }}\" />\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n <span>{{ tempEducation()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4 rounded-pill\" [disabled]=\"isSavingEducation\" (click)=\"saveEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex gap-3 justify-content-center mt-5 pt-2\" *ngIf=\"!isResume\">\r\n <button class=\"btn btn-outline-secondary px-5 h-auto rounded-pill\" (click)=\"onBackClick()\">\r\n <img src=\"/assets/images/icons/arrow-left.svg\" width=\"14\" height=\"14\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Back\r\n </button>\r\n <button class=\"btn btn-primary px-5 shadow-sm h-auto rounded-pill\" [disabled]=\"!canConfirmAndContinue() || isSavingBasic\"\r\n (click)=\"onGoToDashboardClick()\">\r\n <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingBasic ? 'Saving...' : 'Go to Dashboard' }}\r\n <img *ngIf=\"!isSavingBasic\" src=\"/assets/images/icons/arrow-right-white.svg\" width=\"14\" height=\"14\" class=\"ms-1\" style=\"vertical-align:-0.1em\" alt=\"\" />\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n <div class=\"text-center p-5\">\r\n <div class=\"spinner-border text-primary\"></div>\r\n <p class=\"text-muted mt-2\">Loading data...</p>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Bulk Skill Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkSkillConfirm\">\r\n <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n <h4 class=\"mb-1\">Set Rating for All Skills</h4>\r\n <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all skills that are missing these values.</p>\r\n <div class=\"mb-3\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"bulkSkillStars = s\">\r\n <span [class]=\"bulkSkillStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n {{ bulkSkillStars >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ bulkSkillStars }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillStars <= 0\">Star rating is required</div>\r\n </div>\r\n <div class=\"mb-4\">\r\n <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkSkillYear\" min=\"1\" max=\"30\"\r\n placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillYear === null || bulkSkillYear === undefined\">Years of experience is required</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkSkillConfirm()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingSkill || bulkSkillStars <= 0 || bulkSkillYear === null\"\r\n (click)=\"applyBulkSkillConfirm()\">\r\n <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingSkill ? 'Saving...' : 'Apply to All & Save' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Bulk Tool Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkToolConfirm\">\r\n <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n <h4 class=\"mb-1\">Set Rating for All Tools</h4>\r\n <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all tools that are missing these values.</p>\r\n <div class=\"mb-3\">\r\n <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n (click)=\"bulkToolStars = s\">\r\n <span [class]=\"bulkToolStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n {{ bulkToolStars >= s ? '\u2605' : '\u2606' }}\r\n </span>\r\n </button>\r\n <span class=\"small text-muted\">{{ bulkToolStars }}/5</span>\r\n </div>\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolStars <= 0\">Star rating is required</div>\r\n </div>\r\n <div class=\"mb-4\">\r\n <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkToolYear\" min=\"1\" max=\"30\"\r\n placeholder=\"Years of Experience\" />\r\n <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolYear === null || bulkToolYear === undefined\">Years of experience is required</div>\r\n </div>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkToolConfirm()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingTool || bulkToolStars <= 0 || bulkToolYear === null\"\r\n (click)=\"applyBulkToolConfirm()\">\r\n <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingTool ? 'Saving...' : 'Apply to All & Save' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n <div class=\"confirm-modal-card\">\r\n <h4 class=\"mb-2\">Leave this page?</h4>\r\n <p class=\"text-muted mb-4\">If you go back, only saved data will be retained.</p>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"stayOnPreview()\">Stay</button>\r\n <button type=\"button\" class=\"btn btn-danger h-auto\" (click)=\"proceedBack()\">Proceed Back</button>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showDashboardConfirmPopup\">\r\n <div class=\"confirm-modal-card\">\r\n <h4 class=\"mb-2\">Finish Setup and Continue</h4>\r\n <p class=\"text-muted mb-4\">Save your information and go to your dashboard</p>\r\n <div class=\"d-flex justify-content-end gap-2\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" [disabled]=\"isSavingBasic\"\r\n (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingBasic\" (click)=\"goToDashboard()\">\r\n <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingBasic ? 'Proceeding...' : 'Proceed' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#333}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:16px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:.95rem}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 .5rem 1rem #0000001a!important}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover{box-shadow:0 10px 20px #0000001a!important}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:all .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc;transform:translate(5px);box-shadow:-5px 0 15px #0000000d}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important;box-shadow:0 10px 15px #0000001a!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 12px #0003}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:10px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border-color:#dc3545;color:#dc3545;border-radius:10px}button.btn.btn-sm.btn-outline-danger:hover{background-color:#bb2d3b;border-color:#bb2d3b;color:#fff}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:50%!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0!important;background:transparent!important;border:none!important;box-shadow:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0f172a40;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-weight:600;color:#1f2937}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);background:#fff;border-radius:14px;box-shadow:0 20px 35px #0f172a38;border:1px solid #e5e7eb;padding:24px}.year-experience-select{max-height:150px}@media screen and (max-width: 768px){.res-flex{display:unset!important}.res-flex .fw-normal{width:100%;display:block;font-size:13px!important}}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{background-color:#4077ad!important}.profile-avatar-circle{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,#4077ad,#6ca0dc);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0;box-shadow:0 4px 12px #4077ad4d}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9}.work-accent-item{border-left:4px solid #4077ad!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.work-accent-item:hover{background-color:#f5f8ff!important;box-shadow:0 4px 14px #4077ad17!important}.edu-accent-item{border-left:4px solid #6366f1!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.edu-accent-item:hover{background-color:#f8f8ff!important;box-shadow:0 4px 14px #6366f117!important}.cert-accent-item{border-left:4px solid #059669!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.cert-accent-item:hover{background-color:#f0fdf4!important}.lic-accent-item{border-left:4px solid #d97706!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-bottom:3px;display:block}.field-value-sm{font-weight:600;font-size:.875rem;color:#1f2937}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:12px}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:.875rem}.form-panel{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:8px;font-size:.875rem}.form-panel .form-control:focus,.form-panel .form-select:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.section-header-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px;border-bottom:2px solid #f1f5f9;margin-bottom:16px}.preview-card-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff);border-bottom:1px solid #e2e8f0;padding:20px 24px 16px;border-radius:13px 13px 0 0}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}\n"] }]
|
|
5154
5238
|
}], ctorParameters: () => [{ type: CredentialingStore }, { type: FileService }, { type: UserSkillSetService }, { type: UserToolService }, { type: UserDocumentService }, { type: UserEducationService }, { type: UserDetailService }, { type: UserExperienceService }, { type: i1$1.TokenService }, { type: i1$1.RoleContextService }, { type: ProvidersService }, { type: undefined, decorators: [{
|
|
5155
5239
|
type: Inject,
|
|
5156
5240
|
args: [LIBRARY_CONFIG]
|
|
@@ -5438,11 +5522,11 @@ class StepperComponent {
|
|
|
5438
5522
|
this.warningTimer = setTimeout(() => (this.showLockWarning = false), 3000);
|
|
5439
5523
|
}
|
|
5440
5524
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StepperComponent, deps: [{ token: CredentialingStore }, { token: WorkExperienceStore }, { token: EducationStore }, { token: CertificationStore }, { token: LicenseStore }], target: i0.ɵɵFactoryTarget.Component });
|
|
5441
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: StepperComponent, isStandalone: false, selector: "app-stepper", viewQueries: [{ propertyName: "tabsRow", first: true, predicate: ["tabsRow"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"stepper-wrapper\">\r\n <div class=\"tabs\" #tabsRow>\r\n <div\r\n *ngFor=\"let step of steps; let i = index\"\r\n class=\"tab\"\r\n [class.active]=\"store.currentStep() === i + 1\"\r\n [class.completed]=\"isStepComplete(i + 1)\"\r\n [class.locked]=\"isLocked(i)\"\r\n (click)=\"goToStep(i)\"\r\n >\r\n <span\r\n class=\"step-badge\"\r\n [class.badge-completed]=\"isStepComplete(i + 1)\"\r\n [class.badge-active]=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n [class.badge-pending]=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n >\r\n <!-- Completed: checkmark circle -->\r\n <svg *ngIf=\"isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm3.03-9.03a.75.75 0 0 0-1.06-1.06L7 7.88 6.03 6.91a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06 0l3.5-3.5z\"/>\r\n </svg>\r\n <!-- In Progress: filled circle pulse dot -->\r\n <svg *ngIf=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"4\"/>\r\n <circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <!-- Pending: clock icon -->\r\n <svg *ngIf=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"/>\r\n <polyline points=\"8,4.5 8,8 10.5,10\"/>\r\n </svg>\r\n </span>\r\n {{ step }}\r\n </div>\r\n <div class=\"progress-ring-wrap\">\r\n <svg viewBox=\"0 0 36 36\" class=\"progress-ring-svg\">\r\n <circle class=\"progress-ring-track\" cx=\"18\" cy=\"18\" r=\"15.9\"/>\r\n <circle class=\"progress-ring-arc\" cx=\"18\" cy=\"18\" r=\"15.9\"\r\n [style.stroke-dashoffset]=\"progressOffset\"/>\r\n </svg>\r\n <span class=\"progress-ring-label\">{{ progressPercent }}%</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Warning shown when user clicks a locked tab -->\r\n <div class=\"lock-warning\" [class.visible]=\"showLockWarning\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/>\r\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>\r\n </svg>\r\n Complete <strong>Basic Details</strong> first to unlock the remaining steps.\r\n </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;flex-direction:column;align-items:stretch}.stepper-wrapper .tabs{width:100%;display:flex;background:#4077ad}.stepper-wrapper .tabs .tab{flex:1;padding:10px 4px;white-space:nowrap;cursor:pointer;background:transparent;color:#ffffffa6;font-weight:500;font-size:13px;transition:all .25s ease;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;border-bottom:3px solid transparent}.stepper-wrapper .tabs .tab:hover:not(.locked){color:#ffffffe6;background:#ffffff14}.stepper-wrapper .tabs .tab.completed{background:transparent;color:#fffc;border-bottom:3px solid rgba(74,222,128,.6)}.stepper-wrapper .tabs .tab.active{background:#fff;color:#2a5298;border-bottom:3px solid #4077AD;font-weight:700}.stepper-wrapper .tabs .tab.locked{cursor:not-allowed;opacity:.35}.stepper-wrapper .step-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}.stepper-wrapper .step-badge svg{width:14px;height:14px;flex-shrink:0}.stepper-wrapper .step-badge.badge-completed{color:#4ade80}.stepper-wrapper .step-badge.badge-active{color:#2a5298}.stepper-wrapper .step-badge.badge-pending{color:#ffffff8c}.stepper-wrapper .progress-ring-wrap{position:relative;width:100px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#
|
|
5525
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: StepperComponent, isStandalone: false, selector: "app-stepper", viewQueries: [{ propertyName: "tabsRow", first: true, predicate: ["tabsRow"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"stepper-wrapper\">\r\n <div class=\"tabs\" #tabsRow>\r\n <div\r\n *ngFor=\"let step of steps; let i = index\"\r\n class=\"tab\"\r\n [class.active]=\"store.currentStep() === i + 1\"\r\n [class.completed]=\"isStepComplete(i + 1)\"\r\n [class.locked]=\"isLocked(i)\"\r\n (click)=\"goToStep(i)\"\r\n >\r\n <span\r\n class=\"step-badge\"\r\n [class.badge-completed]=\"isStepComplete(i + 1)\"\r\n [class.badge-active]=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n [class.badge-pending]=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n >\r\n <!-- Completed: checkmark circle -->\r\n <svg *ngIf=\"isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm3.03-9.03a.75.75 0 0 0-1.06-1.06L7 7.88 6.03 6.91a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06 0l3.5-3.5z\"/>\r\n </svg>\r\n <!-- In Progress: filled circle pulse dot -->\r\n <svg *ngIf=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"4\"/>\r\n <circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <!-- Pending: clock icon -->\r\n <svg *ngIf=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"/>\r\n <polyline points=\"8,4.5 8,8 10.5,10\"/>\r\n </svg>\r\n </span>\r\n {{ step }}\r\n </div>\r\n <div class=\"progress-ring-wrap\">\r\n <svg viewBox=\"0 0 36 36\" class=\"progress-ring-svg\">\r\n <circle class=\"progress-ring-track\" cx=\"18\" cy=\"18\" r=\"15.9\"/>\r\n <circle class=\"progress-ring-arc\" cx=\"18\" cy=\"18\" r=\"15.9\"\r\n [style.stroke-dashoffset]=\"progressOffset\"/>\r\n </svg>\r\n <span class=\"progress-ring-label\">{{ progressPercent }}%</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Warning shown when user clicks a locked tab -->\r\n <div class=\"lock-warning\" [class.visible]=\"showLockWarning\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/>\r\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>\r\n </svg>\r\n Complete <strong>Basic Details</strong> first to unlock the remaining steps.\r\n </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;flex-direction:column;align-items:stretch}.stepper-wrapper .tabs{width:100%;display:flex;background:#4077ad}.stepper-wrapper .tabs .tab{flex:1;padding:10px 4px;white-space:nowrap;cursor:pointer;background:transparent;color:#ffffffa6;font-weight:500;font-size:13px;transition:all .25s ease;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;border-bottom:3px solid transparent}.stepper-wrapper .tabs .tab:hover:not(.locked){color:#ffffffe6;background:#ffffff14}.stepper-wrapper .tabs .tab.completed{background:transparent;color:#fffc;border-bottom:3px solid rgba(74,222,128,.6)}.stepper-wrapper .tabs .tab.active{background:#fff;color:#2a5298;border-bottom:3px solid #4077AD;font-weight:700}.stepper-wrapper .tabs .tab.locked{cursor:not-allowed;opacity:.35}.stepper-wrapper .step-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}.stepper-wrapper .step-badge svg{width:14px;height:14px;flex-shrink:0}.stepper-wrapper .step-badge.badge-completed{color:#4ade80}.stepper-wrapper .step-badge.badge-active{color:#2a5298}.stepper-wrapper .step-badge.badge-pending{color:#ffffff8c}.stepper-wrapper .progress-ring-wrap{position:relative;width:100px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;border-left:3px solid rgba(64,119,173,.25);padding:0 10px;gap:8px;box-shadow:-4px 0 12px #00000026}.stepper-wrapper .progress-ring-wrap .progress-ring-svg{width:38px;height:38px;transform:rotate(-90deg)}.stepper-wrapper .progress-ring-wrap .progress-ring-svg .progress-ring-track{fill:none;stroke:#e2e8f0;stroke-width:3}.stepper-wrapper .progress-ring-wrap .progress-ring-svg .progress-ring-arc{fill:none;stroke:#4077ad;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .5s ease;filter:drop-shadow(0 0 3px rgba(64,119,173,.5))}.stepper-wrapper .progress-ring-wrap .progress-ring-label{position:absolute;font-size:9px;font-weight:800;color:#2a5298;letter-spacing:-.02em;line-height:1}.lock-warning{display:flex;align-items:center;gap:8px;padding:0 16px;background:#1c1917;border-top:1px solid rgba(251,146,60,.25);color:#fb923c;font-size:12px;font-weight:500;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .25s ease,padding .25s ease}.lock-warning.visible{max-height:48px;opacity:1;padding-top:8px;padding-bottom:8px}.lock-warning svg{flex-shrink:0;width:14px;height:14px;color:#f97316}.lock-warning strong{font-weight:700}@media screen and (max-width: 767px){.stepper-wrapper .tabs{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}.stepper-wrapper .tabs::-webkit-scrollbar{display:none}.stepper-wrapper .tabs .tab{flex:none;min-width:80px;padding:8px 10px;font-size:11px}.stepper-wrapper .progress-ring-wrap{min-width:52px;width:52px;padding:0 6px}.stepper-wrapper .progress-ring-wrap .progress-ring-svg{width:32px;height:32px}.stepper-wrapper .progress-ring-wrap .progress-ring-label{font-size:8px;color:#2a5298}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
5442
5526
|
}
|
|
5443
5527
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StepperComponent, decorators: [{
|
|
5444
5528
|
type: Component,
|
|
5445
|
-
args: [{ selector: 'app-stepper', standalone: false, template: "<div class=\"stepper-wrapper\">\r\n <div class=\"tabs\" #tabsRow>\r\n <div\r\n *ngFor=\"let step of steps; let i = index\"\r\n class=\"tab\"\r\n [class.active]=\"store.currentStep() === i + 1\"\r\n [class.completed]=\"isStepComplete(i + 1)\"\r\n [class.locked]=\"isLocked(i)\"\r\n (click)=\"goToStep(i)\"\r\n >\r\n <span\r\n class=\"step-badge\"\r\n [class.badge-completed]=\"isStepComplete(i + 1)\"\r\n [class.badge-active]=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n [class.badge-pending]=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n >\r\n <!-- Completed: checkmark circle -->\r\n <svg *ngIf=\"isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm3.03-9.03a.75.75 0 0 0-1.06-1.06L7 7.88 6.03 6.91a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06 0l3.5-3.5z\"/>\r\n </svg>\r\n <!-- In Progress: filled circle pulse dot -->\r\n <svg *ngIf=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"4\"/>\r\n <circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <!-- Pending: clock icon -->\r\n <svg *ngIf=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"/>\r\n <polyline points=\"8,4.5 8,8 10.5,10\"/>\r\n </svg>\r\n </span>\r\n {{ step }}\r\n </div>\r\n <div class=\"progress-ring-wrap\">\r\n <svg viewBox=\"0 0 36 36\" class=\"progress-ring-svg\">\r\n <circle class=\"progress-ring-track\" cx=\"18\" cy=\"18\" r=\"15.9\"/>\r\n <circle class=\"progress-ring-arc\" cx=\"18\" cy=\"18\" r=\"15.9\"\r\n [style.stroke-dashoffset]=\"progressOffset\"/>\r\n </svg>\r\n <span class=\"progress-ring-label\">{{ progressPercent }}%</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Warning shown when user clicks a locked tab -->\r\n <div class=\"lock-warning\" [class.visible]=\"showLockWarning\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/>\r\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>\r\n </svg>\r\n Complete <strong>Basic Details</strong> first to unlock the remaining steps.\r\n </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;flex-direction:column;align-items:stretch}.stepper-wrapper .tabs{width:100%;display:flex;background:#4077ad}.stepper-wrapper .tabs .tab{flex:1;padding:10px 4px;white-space:nowrap;cursor:pointer;background:transparent;color:#ffffffa6;font-weight:500;font-size:13px;transition:all .25s ease;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;border-bottom:3px solid transparent}.stepper-wrapper .tabs .tab:hover:not(.locked){color:#ffffffe6;background:#ffffff14}.stepper-wrapper .tabs .tab.completed{background:transparent;color:#fffc;border-bottom:3px solid rgba(74,222,128,.6)}.stepper-wrapper .tabs .tab.active{background:#fff;color:#2a5298;border-bottom:3px solid #4077AD;font-weight:700}.stepper-wrapper .tabs .tab.locked{cursor:not-allowed;opacity:.35}.stepper-wrapper .step-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}.stepper-wrapper .step-badge svg{width:14px;height:14px;flex-shrink:0}.stepper-wrapper .step-badge.badge-completed{color:#4ade80}.stepper-wrapper .step-badge.badge-active{color:#2a5298}.stepper-wrapper .step-badge.badge-pending{color:#ffffff8c}.stepper-wrapper .progress-ring-wrap{position:relative;width:100px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#
|
|
5529
|
+
args: [{ selector: 'app-stepper', standalone: false, template: "<div class=\"stepper-wrapper\">\r\n <div class=\"tabs\" #tabsRow>\r\n <div\r\n *ngFor=\"let step of steps; let i = index\"\r\n class=\"tab\"\r\n [class.active]=\"store.currentStep() === i + 1\"\r\n [class.completed]=\"isStepComplete(i + 1)\"\r\n [class.locked]=\"isLocked(i)\"\r\n (click)=\"goToStep(i)\"\r\n >\r\n <span\r\n class=\"step-badge\"\r\n [class.badge-completed]=\"isStepComplete(i + 1)\"\r\n [class.badge-active]=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n [class.badge-pending]=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n >\r\n <!-- Completed: checkmark circle -->\r\n <svg *ngIf=\"isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm3.03-9.03a.75.75 0 0 0-1.06-1.06L7 7.88 6.03 6.91a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06 0l3.5-3.5z\"/>\r\n </svg>\r\n <!-- In Progress: filled circle pulse dot -->\r\n <svg *ngIf=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"4\"/>\r\n <circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <!-- Pending: clock icon -->\r\n <svg *ngIf=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"/>\r\n <polyline points=\"8,4.5 8,8 10.5,10\"/>\r\n </svg>\r\n </span>\r\n {{ step }}\r\n </div>\r\n <div class=\"progress-ring-wrap\">\r\n <svg viewBox=\"0 0 36 36\" class=\"progress-ring-svg\">\r\n <circle class=\"progress-ring-track\" cx=\"18\" cy=\"18\" r=\"15.9\"/>\r\n <circle class=\"progress-ring-arc\" cx=\"18\" cy=\"18\" r=\"15.9\"\r\n [style.stroke-dashoffset]=\"progressOffset\"/>\r\n </svg>\r\n <span class=\"progress-ring-label\">{{ progressPercent }}%</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Warning shown when user clicks a locked tab -->\r\n <div class=\"lock-warning\" [class.visible]=\"showLockWarning\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/>\r\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>\r\n </svg>\r\n Complete <strong>Basic Details</strong> first to unlock the remaining steps.\r\n </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;flex-direction:column;align-items:stretch}.stepper-wrapper .tabs{width:100%;display:flex;background:#4077ad}.stepper-wrapper .tabs .tab{flex:1;padding:10px 4px;white-space:nowrap;cursor:pointer;background:transparent;color:#ffffffa6;font-weight:500;font-size:13px;transition:all .25s ease;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;border-bottom:3px solid transparent}.stepper-wrapper .tabs .tab:hover:not(.locked){color:#ffffffe6;background:#ffffff14}.stepper-wrapper .tabs .tab.completed{background:transparent;color:#fffc;border-bottom:3px solid rgba(74,222,128,.6)}.stepper-wrapper .tabs .tab.active{background:#fff;color:#2a5298;border-bottom:3px solid #4077AD;font-weight:700}.stepper-wrapper .tabs .tab.locked{cursor:not-allowed;opacity:.35}.stepper-wrapper .step-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}.stepper-wrapper .step-badge svg{width:14px;height:14px;flex-shrink:0}.stepper-wrapper .step-badge.badge-completed{color:#4ade80}.stepper-wrapper .step-badge.badge-active{color:#2a5298}.stepper-wrapper .step-badge.badge-pending{color:#ffffff8c}.stepper-wrapper .progress-ring-wrap{position:relative;width:100px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;border-left:3px solid rgba(64,119,173,.25);padding:0 10px;gap:8px;box-shadow:-4px 0 12px #00000026}.stepper-wrapper .progress-ring-wrap .progress-ring-svg{width:38px;height:38px;transform:rotate(-90deg)}.stepper-wrapper .progress-ring-wrap .progress-ring-svg .progress-ring-track{fill:none;stroke:#e2e8f0;stroke-width:3}.stepper-wrapper .progress-ring-wrap .progress-ring-svg .progress-ring-arc{fill:none;stroke:#4077ad;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .5s ease;filter:drop-shadow(0 0 3px rgba(64,119,173,.5))}.stepper-wrapper .progress-ring-wrap .progress-ring-label{position:absolute;font-size:9px;font-weight:800;color:#2a5298;letter-spacing:-.02em;line-height:1}.lock-warning{display:flex;align-items:center;gap:8px;padding:0 16px;background:#1c1917;border-top:1px solid rgba(251,146,60,.25);color:#fb923c;font-size:12px;font-weight:500;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .25s ease,padding .25s ease}.lock-warning.visible{max-height:48px;opacity:1;padding-top:8px;padding-bottom:8px}.lock-warning svg{flex-shrink:0;width:14px;height:14px;color:#f97316}.lock-warning strong{font-weight:700}@media screen and (max-width: 767px){.stepper-wrapper .tabs{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}.stepper-wrapper .tabs::-webkit-scrollbar{display:none}.stepper-wrapper .tabs .tab{flex:none;min-width:80px;padding:8px 10px;font-size:11px}.stepper-wrapper .progress-ring-wrap{min-width:52px;width:52px;padding:0 6px}.stepper-wrapper .progress-ring-wrap .progress-ring-svg{width:32px;height:32px}.stepper-wrapper .progress-ring-wrap .progress-ring-label{font-size:8px;color:#2a5298}}\n"] }]
|
|
5446
5530
|
}], ctorParameters: () => [{ type: CredentialingStore }, { type: WorkExperienceStore }, { type: EducationStore }, { type: CertificationStore }, { type: LicenseStore }], propDecorators: { tabsRow: [{
|
|
5447
5531
|
type: ViewChild,
|
|
5448
5532
|
args: ['tabsRow', { read: ElementRef }]
|
|
@@ -6414,6 +6498,7 @@ class CertificationComponent {
|
|
|
6414
6498
|
userName;
|
|
6415
6499
|
cloudfront;
|
|
6416
6500
|
proposalLoader = false;
|
|
6501
|
+
manualTypeError = '';
|
|
6417
6502
|
showpreview = computed(() => {
|
|
6418
6503
|
return this.workStore.experiences().length > 0 && !this.isEditing();
|
|
6419
6504
|
}, ...(ngDevMode ? [{ debugName: "showpreview" }] : []));
|
|
@@ -6772,6 +6857,20 @@ class CertificationComponent {
|
|
|
6772
6857
|
this.selectedDocumentId = null;
|
|
6773
6858
|
this.selectedDocumentName = null;
|
|
6774
6859
|
}
|
|
6860
|
+
addManualDocumentType() {
|
|
6861
|
+
const name = (this.searchControl.value || '').trim();
|
|
6862
|
+
if (!name) {
|
|
6863
|
+
this.manualTypeError = 'Please enter a certificate type name';
|
|
6864
|
+
return;
|
|
6865
|
+
}
|
|
6866
|
+
this.manualTypeError = '';
|
|
6867
|
+
const tempId = 'manual-' + Date.now();
|
|
6868
|
+
this.documentTypes = [{ id: tempId, type: name }, ...this.documentTypes];
|
|
6869
|
+
this.selectedDocumentId = tempId;
|
|
6870
|
+
this.selectedDocumentName = name;
|
|
6871
|
+
this.certificateForm.patchValue({ documentTypeId: tempId, documentTypeName: name });
|
|
6872
|
+
this.searchControl.setValue('', { emitEvent: false });
|
|
6873
|
+
}
|
|
6775
6874
|
// Called when user cancels form
|
|
6776
6875
|
cancelForm() {
|
|
6777
6876
|
this.isEditing.set(false); // back to preview
|
|
@@ -6780,11 +6879,11 @@ class CertificationComponent {
|
|
|
6780
6879
|
this.fileName = '';
|
|
6781
6880
|
}
|
|
6782
6881
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, deps: [{ token: i1$1.RoleContextService }, { token: UserDocumentService }, { token: UserService }, { token: CredentialingStore }, { token: CertificationStore }, { token: i1$1.TokenService }, { token: PostalCodeServices }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
6783
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { states: "states", providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n <h3><i class=\"bi bi-patch-check-fill me-2\" style=\"color:#059669;\"></i>Add Certificates</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Number</div>\r\n <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n Certificate number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n Certificate issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State here\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Certificate Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your certificate or proof of certification (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-patch-check-fill me-2\" style=\"color:#059669;\"></i>Certifications</h3>\r\n <p class=\"preview-subtitle\">Review your certifications below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#cert_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'cert_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Certifications</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.action{flex-direction:column-reverse;gap:8px}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
6882
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { states: "states", providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n <h3><i class=\"bi bi-patch-check-fill me-2\" style=\"color:#059669;\"></i>Add Certificates</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add Certificate type here...\" [formControl]=\"searchControl\" />\r\n <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Number</div>\r\n <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n Certificate number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n Certificate issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State here\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Certificate Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your certificate or proof of certification (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-patch-check-fill me-2\" style=\"color:#059669;\"></i>Certifications</h3>\r\n <p class=\"preview-subtitle\">Review your certifications below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#cert_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'cert_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Certifications</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.action{flex-direction:column-reverse;gap:8px}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
6784
6883
|
}
|
|
6785
6884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, decorators: [{
|
|
6786
6885
|
type: Component,
|
|
6787
|
-
args: [{ selector: 'app-certification', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n <h3><i class=\"bi bi-patch-check-fill me-2\" style=\"color:#059669;\"></i>Add Certificates</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Number</div>\r\n <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n Certificate number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n Certificate issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State here\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Certificate Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your certificate or proof of certification (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-patch-check-fill me-2\" style=\"color:#059669;\"></i>Certifications</h3>\r\n <p class=\"preview-subtitle\">Review your certifications below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#cert_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'cert_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Certifications</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.action{flex-direction:column-reverse;gap:8px}button{width:100%}}\n"] }]
|
|
6886
|
+
args: [{ selector: 'app-certification', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n <h3><i class=\"bi bi-patch-check-fill me-2\" style=\"color:#059669;\"></i>Add Certificates</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add Certificate type here...\" [formControl]=\"searchControl\" />\r\n <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Number</div>\r\n <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n Certificate number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">Certificate Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n Certificate issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State here\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Certificate Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your certificate or proof of certification (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-patch-check-fill me-2\" style=\"color:#059669;\"></i>Certifications</h3>\r\n <p class=\"preview-subtitle\">Review your certifications below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#cert_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'cert_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Certificate Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Certifications</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.action{flex-direction:column-reverse;gap:8px}button{width:100%}}\n"] }]
|
|
6788
6887
|
}], ctorParameters: () => [{ type: i1$1.RoleContextService }, { type: UserDocumentService }, { type: UserService }, { type: CredentialingStore }, { type: CertificationStore }, { type: i1$1.TokenService }, { type: PostalCodeServices }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { states: [{
|
|
6789
6888
|
type: Input
|
|
6790
6889
|
}], providerId: [{
|
|
@@ -7544,7 +7643,7 @@ class SkillsComponent {
|
|
|
7544
7643
|
this.userSkillsSub?.unsubscribe();
|
|
7545
7644
|
}
|
|
7546
7645
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SkillsComponent, deps: [{ token: SkillSetService }, { token: UserSkillSetService }, { token: UserService }, { token: i8.UntypedFormBuilder }, { token: UtilsService }, { token: i1$1.RoleContextService }, { token: CredentialingStore }, { token: i1$1.TokenService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7547
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\"><i class=\"bi bi-stars me-2\" style=\"color:#16a34a;\"></i>Skills Preview</h5>\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n <!-- HEADER -->\r\n <div accordion-heading class=\"skill-preview-header\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ skill.skillSetName }}\r\n </span>\r\n <div class=\"actions\">\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n </button>\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">Cancel</button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part\">\r\n <!-- DISPLAY MODE -->\r\n <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\" class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ skill.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Skill</span>\r\n <span class=\"preview-value\">{{ skill.skillSetName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ skill?.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Visible</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ skill.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n <!-- EDIT MODE -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\" class=\"preview-edit-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Skill</span>\r\n <span class=\"preview-value\">{{ skill.skillSetName }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n [key]=\"tab.at(0).get('starRating')?.value\"\r\n [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n [maxStars]=\"5\"\r\n (ratingOutput)=\"onEditRating($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <label class=\"label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <label class=\"label\">Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <h2 class=\"title text-secondary\">Add Skills</h2>\r\n <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n (input)=\"getSkillSets()\" />\r\n <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Skillsets Name\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{nameError}}\r\n </div>\r\n <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n <input type=\"checkbox\" [checked]=\"skill.selected\" (change)=\"onSelectedSkillsets($event, skill)\"\r\n id=\"{{skill.id}}\" name=\"{{skill.id}}\">\r\n <label class=\"text-title\" for=\"{{skill.id}}\">\r\n {{ skill.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n <div *ngIf=\"k?.starRating?.errors?.required\">Star Rating is required</div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n bindLabel=\"text\" formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n (change)=\"onYearChange(group)\"></ng-select>\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n <div *ngIf=\"k?.year?.errors?.required\">Year is required</div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n <label class=\"label mb-2\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n <div>\r\n <label class=\"label\">Description</label>\r\n <div class=\"col-12 col-md-12 mt-1\">\r\n <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n <div class=\"mb-res\">\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n <div class=\"mb-res\">\r\n <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n Add More Skills\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .skills-section .text-title{font-size:14px;margin-left:3px;color:#1e293b;display:contents}.content-part .skills-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .skills-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}@media screen and (max-width: 767px){.skills-container{padding:16px}.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.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: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i12$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
7646
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\"><i class=\"bi bi-stars me-2\" style=\"color:#16a34a;\"></i>Skills Preview</h5>\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n <!-- HEADER -->\r\n <div accordion-heading class=\"skill-preview-header\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ skill.skillSetName }}\r\n </span>\r\n <div class=\"actions\">\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n </button>\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">Cancel</button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part\">\r\n <!-- DISPLAY MODE -->\r\n <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\" class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ skill.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Skill</span>\r\n <span class=\"preview-value\">{{ skill.skillSetName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ skill?.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Visible</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ skill.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n <!-- EDIT MODE -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\" class=\"preview-edit-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Skill</span>\r\n <span class=\"preview-value\">{{ skill.skillSetName }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n [key]=\"tab.at(0).get('starRating')?.value\"\r\n [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n [maxStars]=\"5\"\r\n (ratingOutput)=\"onEditRating($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <label class=\"label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <label class=\"label\">Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <h2 class=\"title text-secondary\">Add Skills</h2>\r\n <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n (input)=\"getSkillSets()\" />\r\n <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Skillsets Name\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{nameError}}\r\n </div>\r\n <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n <input type=\"checkbox\" [checked]=\"skill.selected\" (change)=\"onSelectedSkillsets($event, skill)\"\r\n id=\"{{skill.id}}\" name=\"{{skill.id}}\">\r\n <label class=\"text-title\" for=\"{{skill.id}}\">\r\n {{ skill.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n <div *ngIf=\"k?.starRating?.errors?.required\">Star Rating is required</div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n bindLabel=\"text\" formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n (change)=\"onYearChange(group)\"></ng-select>\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n <div *ngIf=\"k?.year?.errors?.required\">Year is required</div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n <label class=\"label mb-2\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n <div>\r\n <label class=\"label\">Description</label>\r\n <div class=\"col-12 col-md-12 mt-1\">\r\n <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n <div class=\"mb-res\">\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n <div class=\"mb-res\">\r\n <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n Add More Skills\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue\r\n </button>\r\n </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .skills-section .text-title{font-size:14px;margin-left:3px;color:#1e293b;display:contents}.content-part .skills-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .skills-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}@media screen and (max-width: 767px){.skills-container{padding:16px}.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.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: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14$1.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14$1.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
7548
7647
|
trigger('expandCollapse', [
|
|
7549
7648
|
state('open', style({
|
|
7550
7649
|
height: '*',
|
|
@@ -7630,6 +7729,7 @@ class LicensesComponent {
|
|
|
7630
7729
|
userName;
|
|
7631
7730
|
cloudfront;
|
|
7632
7731
|
proposalLoader = false;
|
|
7732
|
+
manualTypeError = '';
|
|
7633
7733
|
showpreview = computed(() => {
|
|
7634
7734
|
return this.workStore.experiences().length > 0 && !this.isEditing();
|
|
7635
7735
|
}, ...(ngDevMode ? [{ debugName: "showpreview" }] : []));
|
|
@@ -7991,6 +8091,20 @@ class LicensesComponent {
|
|
|
7991
8091
|
this.selectedDocumentId = null;
|
|
7992
8092
|
this.selectedDocumentName = null;
|
|
7993
8093
|
}
|
|
8094
|
+
addManualDocumentType() {
|
|
8095
|
+
const name = (this.searchControl.value || '').trim();
|
|
8096
|
+
if (!name) {
|
|
8097
|
+
this.manualTypeError = 'Please enter a license type name';
|
|
8098
|
+
return;
|
|
8099
|
+
}
|
|
8100
|
+
this.manualTypeError = '';
|
|
8101
|
+
const tempId = 'manual-' + Date.now();
|
|
8102
|
+
this.documentTypes = [{ id: tempId, type: name }, ...this.documentTypes];
|
|
8103
|
+
this.selectedDocumentId = tempId;
|
|
8104
|
+
this.selectedDocumentName = name;
|
|
8105
|
+
this.certificateForm.patchValue({ documentTypeId: tempId, documentTypeName: name });
|
|
8106
|
+
this.searchControl.setValue('', { emitEvent: false });
|
|
8107
|
+
}
|
|
7994
8108
|
// Called when user cancels form
|
|
7995
8109
|
cancelForm() {
|
|
7996
8110
|
this.isEditing.set(false); // back to preview
|
|
@@ -7999,11 +8113,11 @@ class LicensesComponent {
|
|
|
7999
8113
|
this.fileName = '';
|
|
8000
8114
|
}
|
|
8001
8115
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, deps: [{ token: UserDocumentService }, { token: UserService }, { token: i1$1.RoleContextService }, { token: CredentialingStore }, { token: LicenseStore }, { token: i1$1.TokenService }, { token: PostalCodeServices }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
8002
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl", states: "states" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n <h3><i class=\"bi bi-card-checklist me-2\" style=\"color:#d97706;\"></i>Add Licenses</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">License Number</div>\r\n <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n License number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">License Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n License issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">License Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your license document or proof of licensure (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-card-checklist me-2\" style=\"color:#d97706;\"></i>Licenses</h3>\r\n <p class=\"preview-subtitle\">Review your licenses below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#lic_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'lic_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Licenses</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:8px}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
8116
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl", states: "states" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n <h3><i class=\"bi bi-card-checklist me-2\" style=\"color:#d97706;\"></i>Add Licenses</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add License type here...\" [formControl]=\"searchControl\" />\r\n <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">License Number</div>\r\n <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n License number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">License Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n License issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">License Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your license document or proof of licensure (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-card-checklist me-2\" style=\"color:#d97706;\"></i>Licenses</h3>\r\n <p class=\"preview-subtitle\">Review your licenses below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#lic_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'lic_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Licenses</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:8px}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
|
|
8003
8117
|
}
|
|
8004
8118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, decorators: [{
|
|
8005
8119
|
type: Component,
|
|
8006
|
-
args: [{ selector: 'app-licenses', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n <h3><i class=\"bi bi-card-checklist me-2\" style=\"color:#d97706;\"></i>Add Licenses</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">License Number</div>\r\n <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n License number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">License Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n License issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">License Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your license document or proof of licensure (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-card-checklist me-2\" style=\"color:#d97706;\"></i>Licenses</h3>\r\n <p class=\"preview-subtitle\">Review your licenses below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#lic_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'lic_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Licenses</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:8px}button{width:100%}}\n"] }]
|
|
8120
|
+
args: [{ selector: 'app-licenses', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n <h3><i class=\"bi bi-card-checklist me-2\" style=\"color:#d97706;\"></i>Add Licenses</h3>\r\n <p class=\"hint\">\r\n Recommended for your role\r\n </p>\r\n <div class=\"document-container\">\r\n <div class=\"search-part\">\r\n <input type=\"text\" placeholder=\"Search / Add License type here...\" [formControl]=\"searchControl\" />\r\n <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n <div class=\"grid\">\r\n <div *ngFor=\"let item of documentTypes\">\r\n <label class=\"checkbox-row\">\r\n <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n <span class=\"title\">{{ item.type }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <form [formGroup]=\"certificateForm\">\r\n <div class=\"row\" style=\"margin-top: 20px;\">\r\n <div class=\"field\">\r\n <div class=\"head\">License Number</div>\r\n <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n certificateForm.get('number')?.hasError('required')\">\r\n License number is required\r\n </small>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"head\">License Issued By</div>\r\n <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n certificateForm.get('issuedBy')?.hasError('required')\">\r\n License issued by is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Issued State</div>\r\n <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select Issued State\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n {{ item.stateName }}\r\n </ng-template>\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <span class=\"ng-value-label\">\r\n {{ item.stateName }}\r\n </span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Issued Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n certificateForm.get('issueDate')?.hasError('required')\">\r\n Issued date is required\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Expiration Date</div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n certificateForm.get('expiryDate')?.hasError('required')\">\r\n Expiry date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Comments</div>\r\n <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n </textarea>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"row\">\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">License Document</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your license document or proof of licensure (PDF, DOC, DOCX)</p>\r\n <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n Upload Document\r\n </button>\r\n <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n <p class=\"file-name\" *ngIf=\"fileName\">\r\n <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n {{ fileName }}\r\n <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"action\">\r\n <!-- Left button: Back or Cancel -->\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n\r\n <div class=\"right-actions\">\r\n <!-- Skip button only for first entry (not editing or adding) -->\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n Skip\r\n </button>\r\n\r\n <!-- Primary button -->\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <h3><i class=\"bi bi-card-checklist me-2\" style=\"color:#d97706;\"></i>Licenses</h3>\r\n <p class=\"preview-subtitle\">Review your licenses below</p>\r\n </div>\r\n\r\n <div class=\"preview-list\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n <h2 class=\"accordion-header\">\r\n <button class=\"accordion-button preview-accordion-btn\"\r\n type=\"button\"\r\n data-bs-toggle=\"collapse\"\r\n [attr.data-bs-target]=\"'#lic_' + i\"\r\n aria-expanded=\"true\">\r\n <div class=\"preview-acc-left\">\r\n <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n </div>\r\n <span class=\"accordion-actions\">\r\n <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n </span>\r\n </button>\r\n </h2>\r\n\r\n <div [id]=\"'lic_' + i\" class=\"accordion-collapse collapse show\">\r\n <div class=\"preview-body\">\r\n <div class=\"detail-grid\">\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Name</span>\r\n <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">License Number</span>\r\n <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued By</span>\r\n <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued State</span>\r\n <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Issued Date</span>\r\n <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\">\r\n <span class=\"preview-label\">Expiry Date</span>\r\n <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n </div>\r\n <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n <span class=\"preview-label\">Document</span>\r\n <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n </div>\r\n </div>\r\n <div class=\"detail-cell detail-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Licenses</button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n </div>\r\n </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:8px}button{width:100%}}\n"] }]
|
|
8007
8121
|
}], ctorParameters: () => [{ type: UserDocumentService }, { type: UserService }, { type: i1$1.RoleContextService }, { type: CredentialingStore }, { type: LicenseStore }, { type: i1$1.TokenService }, { type: PostalCodeServices }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
8008
8122
|
type: Input
|
|
8009
8123
|
}], providerName: [{
|
|
@@ -8063,6 +8177,7 @@ class ToolsComponent {
|
|
|
8063
8177
|
emailId = '';
|
|
8064
8178
|
isEditMode;
|
|
8065
8179
|
userToolsPreview = [];
|
|
8180
|
+
showDashboardModal = false;
|
|
8066
8181
|
userDetails;
|
|
8067
8182
|
userdata;
|
|
8068
8183
|
signatureUrl;
|
|
@@ -8540,6 +8655,12 @@ class ToolsComponent {
|
|
|
8540
8655
|
goBack() {
|
|
8541
8656
|
this.store.previousStep();
|
|
8542
8657
|
}
|
|
8658
|
+
openDashboardModal() {
|
|
8659
|
+
this.showDashboardModal = true;
|
|
8660
|
+
}
|
|
8661
|
+
closeDashboardModal() {
|
|
8662
|
+
this.showDashboardModal = false;
|
|
8663
|
+
}
|
|
8543
8664
|
saveFinal() {
|
|
8544
8665
|
if (this.roleData.role.name == 'Provider') {
|
|
8545
8666
|
this.providerId = localStorage.getItem('providerId');
|
|
@@ -8582,7 +8703,7 @@ class ToolsComponent {
|
|
|
8582
8703
|
});
|
|
8583
8704
|
}
|
|
8584
8705
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolsComponent, deps: [{ token: ToolService }, { token: UserToolService }, { token: i8.UntypedFormBuilder }, { token: UserService }, { token: UtilsService }, { token: CredentialingStore }, { token: i1$1.TokenService }, { token: i1$1.RoleContextService }, { token: UserDetailService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
|
|
8585
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToolsComponent, isStandalone: false, selector: "app-tools", inputs: { roleData: "roleData", providerId: "providerId", providerName: "providerName", signatureUrl: "signatureUrl", signatureFileId: "signatureFileId" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\"><i class=\"bi bi-tools me-2\" style=\"color:#0891b2;\"></i>Tools Preview</h5>\r\n <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ tool.toolName }}\r\n </span>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- EDIT MODE BUTTONS -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n <!-- VIEW MODE ACTIONS -->\r\n <ng-template #viewActions>\r\n <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n </button>\r\n <!-- Arrow (ngx controls click) -->\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ tool.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Tools / Equipment</span>\r\n <span class=\"preview-value\">{{ tool.toolName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Manufacturer</span>\r\n <span class=\"preview-value\">{{ tool.make || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Model</span>\r\n <span class=\"preview-value\">{{ tool.model || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Serial Number</span>\r\n <span class=\"preview-value\">{{ tool.serialNumber || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ tool.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Active</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ tool.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Edit Mode -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label> <br />\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (ratingOutput)=\"onRatingSets($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <input class=\"form-control\" formControlName=\"model\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <input class=\"form-control\" formControlName=\"serialNumber\">\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <h3 class=\"text-secondary\">Add Tools</h3>\r\n <p class=\"info\">Manage specialty tools and equipment</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Tools Name\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{ nameError }}\r\n </div>\r\n <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n <div class=\"mt-2 d-flex\">\r\n <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n {{ Tool.name }}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body mt-3 position-relative\">\r\n <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n tab.controls.length > 1 && index == copyOptionIndex\r\n \">\r\n <label class=\"label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n role=\"switch\" />\r\n </div>\r\n <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self-ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.starRating.errors\r\n }\">\r\n <div *ngIf=\"k.starRating.errors.required\">\r\n Star Rating is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n id=\"reqStates\"></ng-select>\r\n\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\">\r\n <div *ngIf=\"k.year.errors.required\">\r\n Year is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Manufacturer</label>\r\n <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Manufacturer here\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\">\r\n <div *ngIf=\"k.make.errors.required\">\r\n Manufacturer is required\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"row pt-2\">\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Model</label>\r\n <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Model here\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\">\r\n <div *ngIf=\"k.model.errors.required\">\r\n Model is required\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\" label\">Serial Number</label>\r\n <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Serial Number here\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Comment</label>\r\n <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\">\r\n <div *ngIf=\"k.notes.errors.required\">\r\n Description is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n <div *ngIf=\"store.toolStepView() === 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n <div class=\"mob-view\">\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [ng2-loading]=\"showLoader\"\r\n [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"store.toolStepView() !== 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n Add More Tools\r\n </button>\r\n <button [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n class=\"float-end save-btn\">\r\n Go To Dashboard\r\n </button>\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.tools-container.last{min-height:unset}.tools-container h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.tools-container .info{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:14px}.content-part div .label{font-size:12px!important;font-weight:700!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .sub-section .content{font-size:13px;color:#64748b}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:42px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .tools-section .text-title{font-size:14px;margin-left:3px;color:#1e293b}.content-part .tools-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .tools-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.form-control{color:#1e293b;background:#f9fafb!important;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.back-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2d5a8a;color:#fff;border:none}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:16px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body .value{font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.actions button{height:42px;padding:10px 22px;border:none;border-radius:8px;font-size:14px;transition:all .2s ease;font-weight:600;min-width:120px;cursor:pointer}.actions .secondary{color:#64748b;background:#fff;border:1.5px solid #e2e8f0}.actions .secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.actions .primary{background:#4077ad;color:#fff}.actions .primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.actions .primary:active{transform:translateY(0)}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}@media screen and (max-width: 767px){.tools-container h3{font-size:18px}.form-control,textarea{font-size:16px}.tools-container{padding:16px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:8px}.tools-container .mob-res{flex-direction:column-reverse;gap:8px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.continue-btn{padding:10px 22px;width:100%}.back-btn{width:100%}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}.preview-detail-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.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: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i12$2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
8706
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToolsComponent, isStandalone: false, selector: "app-tools", inputs: { roleData: "roleData", providerId: "providerId", providerName: "providerName", signatureUrl: "signatureUrl", signatureFileId: "signatureFileId" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\"><i class=\"bi bi-tools me-2\" style=\"color:#0891b2;\"></i>Tools Preview</h5>\r\n <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ tool.toolName }}\r\n </span>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- EDIT MODE BUTTONS -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n <!-- VIEW MODE ACTIONS -->\r\n <ng-template #viewActions>\r\n <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n </button>\r\n <!-- Arrow (ngx controls click) -->\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ tool.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Tools / Equipment</span>\r\n <span class=\"preview-value\">{{ tool.toolName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Manufacturer</span>\r\n <span class=\"preview-value\">{{ tool.make || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Model</span>\r\n <span class=\"preview-value\">{{ tool.model || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Serial Number</span>\r\n <span class=\"preview-value\">{{ tool.serialNumber || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ tool.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Active</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ tool.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Edit Mode -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label> <br />\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (ratingOutput)=\"onRatingSets($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <input class=\"form-control\" formControlName=\"model\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <input class=\"form-control\" formControlName=\"serialNumber\">\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <h3 class=\"text-secondary\">Add Tools</h3>\r\n <p class=\"info\">Manage specialty tools and equipment</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Tools Name\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{ nameError }}\r\n </div>\r\n <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n <div class=\"mt-2 d-flex\">\r\n <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n {{ Tool.name }}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body mt-3 position-relative\">\r\n <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n tab.controls.length > 1 && index == copyOptionIndex\r\n \">\r\n <label class=\"label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n role=\"switch\" />\r\n </div>\r\n <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self-ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.starRating.errors\r\n }\">\r\n <div *ngIf=\"k.starRating.errors.required\">\r\n Star Rating is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n id=\"reqStates\"></ng-select>\r\n\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\">\r\n <div *ngIf=\"k.year.errors.required\">\r\n Year is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Manufacturer</label>\r\n <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Manufacturer here\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\">\r\n <div *ngIf=\"k.make.errors.required\">\r\n Manufacturer is required\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"row pt-2\">\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Model</label>\r\n <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Model here\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\">\r\n <div *ngIf=\"k.model.errors.required\">\r\n Model is required\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\" label\">Serial Number</label>\r\n <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Serial Number here\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Comment</label>\r\n <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\">\r\n <div *ngIf=\"k.notes.errors.required\">\r\n Description is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n <div *ngIf=\"store.toolStepView() === 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n <div class=\"mob-view\">\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [ng2-loading]=\"showLoader\"\r\n [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"store.toolStepView() !== 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n Add More Tools\r\n </button>\r\n <button [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"openDashboardModal()\"\r\n class=\"float-end save-btn\">\r\n Go To Dashboard\r\n </button>\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Dashboard Confirmation Modal -->\r\n<div class=\"dashboard-modal-overlay\" *ngIf=\"showDashboardModal\" (click)=\"closeDashboardModal()\">\r\n <div class=\"dashboard-modal\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"dashboard-modal-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"#22c55e\" stroke-width=\"1.5\"/>\r\n <path d=\"M7 12.5l3.5 3.5 6.5-7\" stroke=\"#22c55e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <h3 class=\"dashboard-modal-title\">All Information Saved!</h3>\r\n <p class=\"dashboard-modal-message\">\r\n Your profile setup is complete. All your information has been saved successfully.\r\n Clicking <strong>Go to Dashboard</strong> will take you to your dashboard.\r\n </p>\r\n <div class=\"dashboard-modal-actions\">\r\n <button type=\"button\" class=\"modal-cancel-btn\" (click)=\"closeDashboardModal()\">Cancel</button>\r\n <button type=\"button\" class=\"modal-confirm-btn\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n (click)=\"closeDashboardModal(); saveFinal()\">\r\n Go to Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.tools-container.last{min-height:unset}.tools-container h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.tools-container .info{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:14px}.content-part div .label{font-size:12px!important;font-weight:700!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .sub-section .content{font-size:13px;color:#64748b}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:42px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .tools-section .text-title{font-size:14px;margin-left:3px;color:#1e293b}.content-part .tools-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .tools-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.form-control{color:#1e293b;background:#f9fafb!important;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.back-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2d5a8a;color:#fff;border:none}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:16px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body .value{font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.actions button{height:42px;padding:10px 22px;border:none;border-radius:8px;font-size:14px;transition:all .2s ease;font-weight:600;min-width:120px;cursor:pointer}.actions .secondary{color:#64748b;background:#fff;border:1.5px solid #e2e8f0}.actions .secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.actions .primary{background:#4077ad;color:#fff}.actions .primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.actions .primary:active{transform:translateY(0)}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}@media screen and (max-width: 767px){.tools-container h3{font-size:18px}.form-control,textarea{font-size:16px}.tools-container{padding:16px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:8px}.tools-container .mob-res{flex-direction:column-reverse;gap:8px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.continue-btn{padding:10px 22px;width:100%}.back-btn{width:100%}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}.preview-detail-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}.dashboard-modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1050;animation:fadeInOverlay .2s ease}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.dashboard-modal{background:#fff;border-radius:12px;padding:40px 36px 32px;max-width:440px;width:90%;text-align:center;box-shadow:0 20px 60px #0000002e;animation:slideUpModal .25s ease}@keyframes slideUpModal{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.dashboard-modal-icon{display:flex;justify-content:center;margin-bottom:20px}.dashboard-modal-icon svg{width:56px;height:56px}.dashboard-modal-title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:12px}.dashboard-modal-message{font-size:14px;color:#64748b;line-height:1.6;margin-bottom:28px}.dashboard-modal-actions{display:flex;gap:12px;justify-content:center}.modal-cancel-btn{height:42px;min-width:110px;border-radius:8px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.modal-confirm-btn{height:42px;min-width:150px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-confirm-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.modal-confirm-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.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: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14$1.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14$1.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
|
|
8586
8707
|
trigger('expandCollapse', [
|
|
8587
8708
|
state('open', style({
|
|
8588
8709
|
height: '*',
|
|
@@ -8620,7 +8741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
8620
8741
|
})),
|
|
8621
8742
|
transition('open <=> closed', animate('300ms ease'))
|
|
8622
8743
|
])
|
|
8623
|
-
], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\"><i class=\"bi bi-tools me-2\" style=\"color:#0891b2;\"></i>Tools Preview</h5>\r\n <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ tool.toolName }}\r\n </span>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- EDIT MODE BUTTONS -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n <!-- VIEW MODE ACTIONS -->\r\n <ng-template #viewActions>\r\n <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n </button>\r\n <!-- Arrow (ngx controls click) -->\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ tool.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Tools / Equipment</span>\r\n <span class=\"preview-value\">{{ tool.toolName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Manufacturer</span>\r\n <span class=\"preview-value\">{{ tool.make || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Model</span>\r\n <span class=\"preview-value\">{{ tool.model || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Serial Number</span>\r\n <span class=\"preview-value\">{{ tool.serialNumber || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ tool.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Active</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ tool.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Edit Mode -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label> <br />\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (ratingOutput)=\"onRatingSets($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <input class=\"form-control\" formControlName=\"model\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <input class=\"form-control\" formControlName=\"serialNumber\">\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <h3 class=\"text-secondary\">Add Tools</h3>\r\n <p class=\"info\">Manage specialty tools and equipment</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Tools Name\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{ nameError }}\r\n </div>\r\n <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n <div class=\"mt-2 d-flex\">\r\n <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n {{ Tool.name }}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body mt-3 position-relative\">\r\n <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n tab.controls.length > 1 && index == copyOptionIndex\r\n \">\r\n <label class=\"label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n role=\"switch\" />\r\n </div>\r\n <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self-ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.starRating.errors\r\n }\">\r\n <div *ngIf=\"k.starRating.errors.required\">\r\n Star Rating is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n id=\"reqStates\"></ng-select>\r\n\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\">\r\n <div *ngIf=\"k.year.errors.required\">\r\n Year is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Manufacturer</label>\r\n <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Manufacturer here\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\">\r\n <div *ngIf=\"k.make.errors.required\">\r\n Manufacturer is required\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"row pt-2\">\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Model</label>\r\n <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Model here\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\">\r\n <div *ngIf=\"k.model.errors.required\">\r\n Model is required\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\" label\">Serial Number</label>\r\n <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Serial Number here\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Comment</label>\r\n <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\">\r\n <div *ngIf=\"k.notes.errors.required\">\r\n Description is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n <div *ngIf=\"store.toolStepView() === 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n <div class=\"mob-view\">\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [ng2-loading]=\"showLoader\"\r\n [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"store.toolStepView() !== 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n Add More Tools\r\n </button>\r\n <button [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n class=\"float-end save-btn\">\r\n Go To Dashboard\r\n </button>\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.tools-container.last{min-height:unset}.tools-container h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.tools-container .info{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:14px}.content-part div .label{font-size:12px!important;font-weight:700!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .sub-section .content{font-size:13px;color:#64748b}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:42px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .tools-section .text-title{font-size:14px;margin-left:3px;color:#1e293b}.content-part .tools-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .tools-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.form-control{color:#1e293b;background:#f9fafb!important;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.back-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2d5a8a;color:#fff;border:none}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:16px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body .value{font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.actions button{height:42px;padding:10px 22px;border:none;border-radius:8px;font-size:14px;transition:all .2s ease;font-weight:600;min-width:120px;cursor:pointer}.actions .secondary{color:#64748b;background:#fff;border:1.5px solid #e2e8f0}.actions .secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.actions .primary{background:#4077ad;color:#fff}.actions .primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.actions .primary:active{transform:translateY(0)}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}@media screen and (max-width: 767px){.tools-container h3{font-size:18px}.form-control,textarea{font-size:16px}.tools-container{padding:16px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:8px}.tools-container .mob-res{flex-direction:column-reverse;gap:8px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.continue-btn{padding:10px 22px;width:100%}.back-btn{width:100%}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}.preview-detail-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}\n"] }]
|
|
8744
|
+
], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <h5 class=\"title text-secondary\"><i class=\"bi bi-tools me-2\" style=\"color:#0891b2;\"></i>Tools Preview</h5>\r\n <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n <span class=\"fw-semibold text-secondary\">\r\n {{ tool.toolName }}\r\n </span>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <!-- EDIT MODE BUTTONS -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n Cancel\r\n </button>\r\n <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n [disabled]=\"showLoader\">\r\n Update\r\n </button>\r\n </ng-container>\r\n <!-- VIEW MODE ACTIONS -->\r\n <ng-template #viewActions>\r\n <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n </button>\r\n <!-- Arrow (ngx controls click) -->\r\n <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n [class.rotate]=\"accGroup.isOpen\" />\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- BODY -->\r\n <div class=\"skill-preview-body content-part\">\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"preview-detail-grid\">\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Service Provider</span>\r\n <span class=\"preview-value\">{{ tool.providerName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Tools / Equipment</span>\r\n <span class=\"preview-value\">{{ tool.toolName || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Manufacturer</span>\r\n <span class=\"preview-value\">{{ tool.make || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Model</span>\r\n <span class=\"preview-value\">{{ tool.model || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Serial Number</span>\r\n <span class=\"preview-value\">{{ tool.serialNumber || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Years of Experience</span>\r\n <span class=\"preview-value\">{{ tool.year || '\u2014' }}</span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Self Ability Rating</span>\r\n <span class=\"preview-value stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell\">\r\n <span class=\"preview-label\">Active</span>\r\n <span class=\"preview-value\">\r\n <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n </span>\r\n </div>\r\n <div class=\"preview-cell preview-full\">\r\n <span class=\"preview-label\">Description</span>\r\n <span class=\"preview-value\">{{ tool.notes || '\u2014' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- Edit Mode -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"row g-3\">\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Service Provider</label>\r\n <div class=\"value\">{{ tool.providerName }}</div>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Manufacturer</label> <br />\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Self Ability Rating</label>\r\n <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n (ratingOutput)=\"onRatingSets($event)\">\r\n </ngx-stars>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Active</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Tools / Equipment</label>\r\n <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Model</label>\r\n <input class=\"form-control\" formControlName=\"model\">\r\n </div>\r\n <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n <label>Serial Number</label>\r\n <input class=\"form-control\" formControlName=\"serialNumber\">\r\n </div>\r\n <div class=\"col-12\">\r\n <label>Description</label>\r\n <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </accordion-group>\r\n </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <h3 class=\"text-secondary\">Add Tools</h3>\r\n <p class=\"info\">Manage specialty tools and equipment</p>\r\n <div class=\"content-part\">\r\n <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n <div class=\"sub-section\">\r\n <div class=\"row mt-2\">\r\n <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n </button>\r\n </div>\r\n <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n Please Enter Tools Name\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n {{ nameError }}\r\n </div>\r\n <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n <div class=\"mt-2 d-flex\">\r\n <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n {{ Tool.name }}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n <tabset #tabSet>\r\n <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n </button>\r\n </ng-template>\r\n <div [formGroup]=\"group\" class=\"tab-card\">\r\n <div class=\"card-body mt-3 position-relative\">\r\n <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n tab.controls.length > 1 && index == copyOptionIndex\r\n \">\r\n <label class=\"label\">Copy to All Tabs</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n role=\"switch\" />\r\n </div>\r\n <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Self-ability Rating</label>\r\n <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n </ngx-stars>\r\n <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid':\r\n userToolSubmitted && k.starRating.errors\r\n }\">\r\n <div *ngIf=\"k.starRating.errors.required\">\r\n Star Rating is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-2 mt-1\">\r\n <label class=\"label\">Profile Visibility</label><br />\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n id=\"reqStates\"></ng-select>\r\n\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.year.errors\r\n }\">\r\n <div *ngIf=\"k.year.errors.required\">\r\n Year is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Manufacturer</label>\r\n <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Manufacturer here\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.make.errors\r\n }\">\r\n <div *ngIf=\"k.make.errors.required\">\r\n Manufacturer is required\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"row pt-2\">\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Model</label>\r\n <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Model here\" (change)=\"onYearChange(group)\" />\r\n <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.model.errors\r\n }\">\r\n <div *ngIf=\"k.model.errors.required\">\r\n Model is required\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\" label\">Serial Number</label>\r\n <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Enter Serial Number here\" />\r\n </div>\r\n <div class=\"col-12 col-md-4 mt-1\">\r\n <label class=\"label\">Comment</label>\r\n <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n 'is-invalid': userToolSubmitted && k.notes.errors\r\n }\">\r\n <div *ngIf=\"k.notes.errors.required\">\r\n Description is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </tab>\r\n </tabset>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n <div *ngIf=\"store.toolStepView() === 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n <div class=\"mob-view\">\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [ng2-loading]=\"showLoader\"\r\n [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"store.toolStepView() !== 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <!-- (click)=\"reset()\" -->\r\n <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n Add More Tools\r\n </button>\r\n <button [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"openDashboardModal()\"\r\n class=\"float-end save-btn\">\r\n Go To Dashboard\r\n </button>\r\n <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n Add\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Dashboard Confirmation Modal -->\r\n<div class=\"dashboard-modal-overlay\" *ngIf=\"showDashboardModal\" (click)=\"closeDashboardModal()\">\r\n <div class=\"dashboard-modal\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"dashboard-modal-icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"#22c55e\" stroke-width=\"1.5\"/>\r\n <path d=\"M7 12.5l3.5 3.5 6.5-7\" stroke=\"#22c55e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <h3 class=\"dashboard-modal-title\">All Information Saved!</h3>\r\n <p class=\"dashboard-modal-message\">\r\n Your profile setup is complete. All your information has been saved successfully.\r\n Clicking <strong>Go to Dashboard</strong> will take you to your dashboard.\r\n </p>\r\n <div class=\"dashboard-modal-actions\">\r\n <button type=\"button\" class=\"modal-cancel-btn\" (click)=\"closeDashboardModal()\">Cancel</button>\r\n <button type=\"button\" class=\"modal-confirm-btn\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n (click)=\"closeDashboardModal(); saveFinal()\">\r\n Go to Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.tools-container.last{min-height:unset}.tools-container h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.tools-container .info{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:14px}.content-part div .label{font-size:12px!important;font-weight:700!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .sub-section .content{font-size:13px;color:#64748b}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:42px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .tools-section .text-title{font-size:14px;margin-left:3px;color:#1e293b}.content-part .tools-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .tools-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.form-control{color:#1e293b;background:#f9fafb!important;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.back-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2d5a8a;color:#fff;border:none}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:16px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body .value{font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.actions button{height:42px;padding:10px 22px;border:none;border-radius:8px;font-size:14px;transition:all .2s ease;font-weight:600;min-width:120px;cursor:pointer}.actions .secondary{color:#64748b;background:#fff;border:1.5px solid #e2e8f0}.actions .secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.actions .primary{background:#4077ad;color:#fff}.actions .primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.actions .primary:active{transform:translateY(0)}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}@media screen and (max-width: 767px){.tools-container h3{font-size:18px}.form-control,textarea{font-size:16px}.tools-container{padding:16px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:8px}.tools-container .mob-res{flex-direction:column-reverse;gap:8px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.continue-btn{padding:10px 22px;width:100%}.back-btn{width:100%}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}.preview-detail-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}.dashboard-modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1050;animation:fadeInOverlay .2s ease}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.dashboard-modal{background:#fff;border-radius:12px;padding:40px 36px 32px;max-width:440px;width:90%;text-align:center;box-shadow:0 20px 60px #0000002e;animation:slideUpModal .25s ease}@keyframes slideUpModal{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.dashboard-modal-icon{display:flex;justify-content:center;margin-bottom:20px}.dashboard-modal-icon svg{width:56px;height:56px}.dashboard-modal-title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:12px}.dashboard-modal-message{font-size:14px;color:#64748b;line-height:1.6;margin-bottom:28px}.dashboard-modal-actions{display:flex;gap:12px;justify-content:center}.modal-cancel-btn{height:42px;min-width:110px;border-radius:8px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.modal-confirm-btn{height:42px;min-width:150px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-confirm-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.modal-confirm-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}\n"] }]
|
|
8624
8745
|
}], ctorParameters: () => [{ type: ToolService }, { type: UserToolService }, { type: i8.UntypedFormBuilder }, { type: UserService }, { type: UtilsService }, { type: CredentialingStore }, { type: i1$1.TokenService }, { type: i1$1.RoleContextService }, { type: UserDetailService }, { type: undefined, decorators: [{
|
|
8625
8746
|
type: Inject,
|
|
8626
8747
|
args: [LIBRARY_CONFIG]
|
|
@@ -32012,6 +32133,9 @@ class Step2CoverageComponent {
|
|
|
32012
32133
|
this.prefillCoverage(res.data);
|
|
32013
32134
|
this.existingCoverageIds = (res.data || []).map((x) => x.id);
|
|
32014
32135
|
this.syncStateCheckboxes();
|
|
32136
|
+
if (this.selectedStates.length > 0) {
|
|
32137
|
+
this.store.selectedStates.set([...this.selectedStates]);
|
|
32138
|
+
}
|
|
32015
32139
|
},
|
|
32016
32140
|
error: (err) => console.error(err)
|
|
32017
32141
|
});
|
|
@@ -34551,7 +34675,7 @@ class InitialProcessComponent {
|
|
|
34551
34675
|
this.destroy$.complete();
|
|
34552
34676
|
}
|
|
34553
34677
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, deps: [{ token: i2.Router }, { token: UserDetailService }, { token: i8.FormBuilder }, { token: FileService }, { token: ProvidersService }, { token: RolesService }, { token: i7.BsModalService }, { token: ProviderContractorSubCategoryService }, { token: ProviderContractorSubCategoryService }, { token: i9.AuthService }, { token: i1$1.TokenService }, { token: i1$1.RoleContextService }, { token: i1$1.AuthLogoutService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
|
|
34554
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InitialProcessComponent, isStandalone: false, selector: "app-initial-process", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n <span class=\"logout-wrapper\" (click)=\"logout()\">\r\n <span class=\"logout-icon\"></span>\r\n <span class=\"logout-text\">Logout</span>\r\n </span>\r\n </div>\r\n <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n Thanks for joining\r\n <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n Our members and service providers rely on accurate info in your profile to\r\n connect you with work that suits your capabilities. Keep your profile\r\n complete, skills updated, licenses current, photos and logos professional,\r\n and schedule up to date.\r\n </ul>\r\n <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n <div class=\"form-group form-check agree\">\r\n <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n required>\r\n <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n I agree to Terms and Conditions\r\n </label>\r\n <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n Accept Terms & Conditions is required\r\n </div> -->\r\n </div>\r\n <div class=\"form-group form-check agree\">\r\n <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy && validatePage==1}\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n I agree to Privacy Statement\r\n </label>\r\n <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n Accept Privacy Statement\r\n </div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n </div> -->\r\n\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n <h6>\r\n <button class=\"next\" (click)=\" next(2)\"\r\n [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n <span *ngIf=\"showLoader\" class=\"spinner position-absolute\"></span>\r\n </button> \r\n </h6>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <h6 class=\"checkmark\">Signature</h6>\r\n <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n </div>\r\n <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n </div>\r\n <h6 class=\"d-flex align-items-center gap-2\">\r\n <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n Clear\r\n </button>\r\n\r\n <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n Upload\r\n <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n (change)=\"uploadSignImage($event)\">\r\n </button> -->\r\n </h6>\r\n\r\n <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n class=\"invalid-feedback d-block\">\r\n Signature is required\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 2\">\r\n <div class=\"add-tab-view \">\r\n <ul>\r\n <h5>\r\n <b>\r\n Please choose the relevant sections in which you wish to\r\n participate\r\n </b>\r\n </h5>\r\n <br>\r\n <b class=\"para-comma\">\r\n Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n you're in control of your involvement.\r\n <br>\r\n connect your business to others and prospective clients.\r\n </b>\r\n </ul>\r\n\r\n <div class=\"row mt-4\">\r\n <ng-container *ngFor=\"let userType of userViewRoles\">\r\n <div class=\"card card-design text-center user-card mx-2 my-2\"\r\n [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n (click)=\"selectedUserRole(userType)\">\r\n <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <h6 class=\"inspect-add\">\r\n <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n Yes\r\n </button>\r\n \r\n <button (click)=\"isBusiness=false;view = 4;\" class=\"add-btn btn-sm\">\r\n No\r\n </button>\r\n </h6> -->\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-1.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button (click)=\"next(3)\" class=\"next\" [disabled]=\"!isUserSelected\"\r\n [ngClass]=\"!isUserSelected ? 'disabled-btn':''\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 3\">\r\n <form [formGroup]=\"companyForm\" class=\"form\">\r\n <div class=\"term-list \">\r\n <ul>\r\n <h5>\r\n <b>\r\n Enter your business information here.\r\n </b>\r\n </h5>\r\n <br>\r\n </ul>\r\n <div class=\"profile-field\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n formControlName=\"companyName\">\r\n <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.companyName.errors.required\">\r\n Company Name is required\r\n </div>\r\n <div *ngIf=\"f.companyName.errors.minlength\">\r\n Company Name must be at least 2 characters\r\n </div>\r\n <div *ngIf=\"f.companyName.errors.maxLength\">\r\n Company Name must be less than 100 characters\r\n </div>\r\n </div>\r\n <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n <div>\r\n {{providerError}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n placeholder=\"Company Phone Number\" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n [maxLength]=\"14\" (input)=\"formatPhone($event,companyForm)\"\r\n [ngClass]=\"{'is-invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\" />\r\n <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.phoneNumber.errors.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.address1.errors.required\">\r\n Business Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{ 'is-invalid': f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.country.errors && validatePage == 3}\" type=\"text\"\r\n class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.country.errors.required\">Country is\r\n required</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"profile-field\">\r\n <div class=\"form-group mb-2 form\" style=\"margin-left: 26px;margin-right: 52px;\">\r\n <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg,.svg\" (change)=\"uploadLogo($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n\r\n <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\" class=\"form-control\"\r\n placeholder=\"Upload Company Logo\">\r\n\r\n <img #uploadImage2 class=\"upload-image\" (click)=\"uploadLogoInput.click()\" src=\"assets/images/icons/upload.svg\"\r\n alt=\"Logo\">\r\n <div *ngIf=\"isLogoRequired\" class=\"invalid-feedback d-block\">\r\n <div class=\"ms-1\">\r\n Please Upload Company Logo\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isneeded\" style=\"margin-left: 47px;\r\n margin-top: -20px;\" class=\"invalid-feedback\">\r\n <div>Company Logo is\r\n required</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n <div class=\"term-list pt-0\">\r\n <h5>\r\n <b>\r\n Contractor Category\r\n </b>\r\n </h5>\r\n <div class=\"profile-field\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-12 col-sm-12 mb-2\">\r\n <label></label>\r\n <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n [(ngModel)]=\"selectedContractorCategories\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n <accordion [isAnimated]=\"false\">\r\n <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n <accordion-group [isOpen]=\"true\">\r\n <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n <div class=\"w-100 mt-2\">\r\n <div class=\"backdrop\">\r\n <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n (change)=\"selectAll($event,item?.items)\">\r\n <label [for]=\"item?.id\"> {{item?.name}}</label>\r\n </div>\r\n </div>\r\n </button>\r\n <div class=\"row\">\r\n <div class=\"backdrop col-4 form-control-sm\" *ngFor=\"let subItem of item?.items\">\r\n <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n (change)=\"unCheckedEvent($event,item)\">\r\n <label [for]=\"subItem?.id\"> {{subItem?.name}}</label>\r\n </div>\r\n </div>\r\n </accordion-group>\r\n </ng-container>\r\n </accordion>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6 class=\"btn-mob\">\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button class=\" next\" (click)=\"next(4)\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 4\">\r\n\r\n <div class=\"add-tab \">\r\n <ul>\r\n <h5 class=\"p-4 pb-2\">\r\n <b>\r\n We need basic information's and headshot for your profile\r\n </b>\r\n <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n (change)=\"changeAddressUser()\">\r\n <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n Copy From Provider Infromation\r\n </label>\r\n </div>\r\n </h5>\r\n </ul>\r\n <div class=\"profile-field\">\r\n <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.email.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n Emai is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\">\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.state.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <div *ngIf=\" u.state.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{ 'is-invalid': u.zipcode.errors && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <div *ngIf=\" u.zipcode.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.country.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <div *ngIf=\" u.country.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input class=\"form-control block shadow-none\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n name=\"inputPhone\" placeholder=\"Phone Number \" id=\"inputPhone\" autocomplete=\"off\"\r\n formControlName=\"phoneNumber\" [maxLength]=\"300\"\r\n [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"form-group mb-2 form\">\r\n <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg,.svg\" (change)=\"uploadUserImage($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n id=\"upload\" accept=\".png,.jpg,.jpeg,.svg\" placeholder=\"Upload Profile Picture\">\r\n <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n <div class=\"ms-1\">\r\n Please Upload Profile Image\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n <span *ngIf=\"showLoader\" class=\"spinner position-absolute\"></span>\r\n\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 5\">\r\n <ul class=\"term-list ps-3\">\r\n <h5>\r\n <b>\r\n Thanks, we got the basics down!\r\n </b>\r\n </h5>\r\n <br>\r\n <b class=\"para-comma\">\r\n Account created successfully. Next step: complete your profile.\r\n <br>\r\n <br>\r\n Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows.\r\n Incomplete profiles will have limited access.\r\n <br>\r\n <br>\r\n You may access your dashboard at any time, but full functionality is available only after completion.\r\n </b>\r\n </ul>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-lg-3 col-xl-3 col-sm-12 text-center\">\r\n <img class=\"slider ml-3\" src=\"assets/images/icons/stepper-4.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end row\">\r\n <div class=\"col-md-2 col-2\">\r\n <h6 style=\"margin-right: 3rem\">\r\n </h6>\r\n </div>\r\n\r\n \r\n <div class=\"col-md-8\">\r\n <h6>\r\n <button (click)=\"dashboard()\" class=\"go-btn btn-sm\">\r\n Go To Home \r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n </button>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div>test</div> -->\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 10\">\r\n <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\" [signatureFileId]=\"signatureFileId\"\r\n [signatureUrl]=\"signatureUrl\"></app-credentialing>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n <div class=\"modal-dialog modal-dialog-centered\">\r\n <div class=\"modal-content terms-fixed-modal\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title fw-bold title-popup\">\r\n {{ termsAndConditionTitle }}\r\n </h4>\r\n </div>\r\n\r\n <!-- SCROLLABLE CONTENT ONLY -->\r\n <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n </app-terms-conditions>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n </app-privacy-policy>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- FOOTER (NOT SCROLLING) -->\r\n <div>\r\n <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n Decline\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n Agree\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i14.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["signatureFileId", "signatureUrl", "data"], outputs: ["back"] }] });
|
|
34678
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InitialProcessComponent, isStandalone: false, selector: "app-initial-process", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n <span class=\"logout-wrapper\" (click)=\"logout()\">\r\n <span class=\"logout-icon\"></span>\r\n <span class=\"logout-text\">Logout</span>\r\n </span>\r\n </div>\r\n <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n Thanks for joining\r\n <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n Our members and service providers rely on accurate info in your profile to\r\n connect you with work that suits your capabilities. Keep your profile\r\n complete, skills updated, licenses current, photos and logos professional,\r\n and schedule up to date.\r\n </ul>\r\n <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n <div class=\"form-group form-check agree\">\r\n <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n required>\r\n <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n I agree to Terms and Conditions\r\n </label>\r\n <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n Accept Terms & Conditions is required\r\n </div> -->\r\n </div>\r\n <div class=\"form-group form-check agree\">\r\n <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy && validatePage==1}\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n I agree to Privacy Statement\r\n </label>\r\n <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n Accept Privacy Statement\r\n </div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n </div> -->\r\n\r\n <div class=\"col-6\"></div>\r\n <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n <h6>\r\n <button class=\"next\" (click)=\" next(2)\"\r\n [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n <span *ngIf=\"showLoader\" class=\"spinner position-absolute\"></span>\r\n </button> \r\n </h6>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n <h6 class=\"checkmark\">Signature</h6>\r\n <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n </div>\r\n <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n </div>\r\n <h6 class=\"d-flex align-items-center gap-2\">\r\n <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n Clear\r\n </button>\r\n\r\n <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n Upload\r\n <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n (change)=\"uploadSignImage($event)\">\r\n </button> -->\r\n </h6>\r\n\r\n <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n class=\"invalid-feedback d-block\">\r\n Signature is required\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 2\">\r\n <div class=\"add-tab-view \">\r\n <ul>\r\n <h5>\r\n <b>\r\n Please choose the relevant sections in which you wish to\r\n participate\r\n </b>\r\n </h5>\r\n <br>\r\n <b class=\"para-comma\">\r\n Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n you're in control of your involvement.\r\n <br>\r\n connect your business to others and prospective clients.\r\n </b>\r\n </ul>\r\n\r\n <div class=\"row mt-4\">\r\n <ng-container *ngFor=\"let userType of userViewRoles\">\r\n <div class=\"card card-design text-center user-card mx-2 my-2\"\r\n [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n (click)=\"selectedUserRole(userType)\">\r\n <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <h6 class=\"inspect-add\">\r\n <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n Yes\r\n </button>\r\n \r\n <button (click)=\"isBusiness=false;view = 4;\" class=\"add-btn btn-sm\">\r\n No\r\n </button>\r\n </h6> -->\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-1.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button (click)=\"next(3)\" class=\"next\" [disabled]=\"!isUserSelected\"\r\n [ngClass]=\"!isUserSelected ? 'disabled-btn':''\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 3\">\r\n <form [formGroup]=\"companyForm\" class=\"form\">\r\n <div class=\"term-list \">\r\n <ul>\r\n <h5>\r\n <b>\r\n Enter your business information here.\r\n </b>\r\n </h5>\r\n <br>\r\n </ul>\r\n <div class=\"profile-field\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n formControlName=\"companyName\">\r\n <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.companyName.errors.required\">\r\n Company Name is required\r\n </div>\r\n <div *ngIf=\"f.companyName.errors.minlength\">\r\n Company Name must be at least 2 characters\r\n </div>\r\n <div *ngIf=\"f.companyName.errors.maxLength\">\r\n Company Name must be less than 100 characters\r\n </div>\r\n </div>\r\n <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n <div>\r\n {{providerError}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n placeholder=\"Company Phone Number\" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n [maxLength]=\"14\" (input)=\"formatPhone($event,companyForm)\"\r\n [ngClass]=\"{'is-invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\" />\r\n <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.phoneNumber.errors.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.address1.errors.required\">\r\n Business Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{ 'is-invalid': f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': f.country.errors && validatePage == 3}\" type=\"text\"\r\n class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n <div *ngIf=\"f.country.errors.required\">Country is\r\n required</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"profile-field\">\r\n <div class=\"form-group mb-2 form\" style=\"margin-left: 26px;margin-right: 52px;\">\r\n <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg,.svg\" (change)=\"uploadLogo($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n\r\n <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\" class=\"form-control\"\r\n placeholder=\"Upload Company Logo\">\r\n\r\n <img #uploadImage2 class=\"upload-image\" (click)=\"uploadLogoInput.click()\" src=\"assets/images/icons/upload.svg\"\r\n alt=\"Logo\">\r\n <div *ngIf=\"isLogoRequired\" class=\"invalid-feedback d-block\">\r\n <div class=\"ms-1\">\r\n Please Upload Company Logo\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isneeded\" style=\"margin-left: 47px;\r\n margin-top: -20px;\" class=\"invalid-feedback\">\r\n <div>Company Logo is\r\n required</div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n <div class=\"term-list pt-0\">\r\n <h5>\r\n <b>\r\n Contractor Category\r\n </b>\r\n </h5>\r\n <div class=\"profile-field\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-12 col-sm-12 mb-2\">\r\n <label></label>\r\n <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n [(ngModel)]=\"selectedContractorCategories\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n <accordion [isAnimated]=\"false\">\r\n <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n <accordion-group [isOpen]=\"true\">\r\n <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n <div class=\"w-100 mt-2\">\r\n <div class=\"backdrop\">\r\n <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n (change)=\"selectAll($event,item?.items)\">\r\n <label [for]=\"item?.id\"> {{item?.name}}</label>\r\n </div>\r\n </div>\r\n </button>\r\n <div class=\"row\">\r\n <div class=\"backdrop col-4 form-control-sm\" *ngFor=\"let subItem of item?.items\">\r\n <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n (change)=\"unCheckedEvent($event,item)\">\r\n <label [for]=\"subItem?.id\"> {{subItem?.name}}</label>\r\n </div>\r\n </div>\r\n </accordion-group>\r\n </ng-container>\r\n </accordion>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6 class=\"btn-mob\">\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button class=\" next\" (click)=\"next(4)\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 4\">\r\n\r\n <div class=\"add-tab \">\r\n <ul>\r\n <h5 class=\"p-4 pb-2\">\r\n <b>\r\n We need basic information's and headshot for your profile\r\n </b>\r\n <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n (change)=\"changeAddressUser()\">\r\n <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n Copy From Provider Infromation\r\n </label>\r\n </div>\r\n </h5>\r\n </ul>\r\n <div class=\"profile-field\">\r\n <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n First Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n Last Name is required\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.email.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n Emai is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n Home Address 1 is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\">\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.state.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <div *ngIf=\" u.state.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-between row\">\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{ 'is-invalid': u.zipcode.errors && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <div *ngIf=\" u.zipcode.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input [ngClass]=\"{ 'is-invalid': u.country.errors && validatePage == 4 }\" type=\"text\"\r\n class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <div *ngIf=\" u.country.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n required</div>\r\n </div>\r\n </div>\r\n <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n <input class=\"form-control block shadow-none\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n name=\"inputPhone\" placeholder=\"Phone Number \" id=\"inputPhone\" autocomplete=\"off\"\r\n formControlName=\"phoneNumber\" [maxLength]=\"300\"\r\n [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n Phone Number is required\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"form-group mb-2 form\">\r\n <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg,.svg\" (change)=\"uploadUserImage($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n id=\"upload\" accept=\".png,.jpg,.jpeg,.svg\" placeholder=\"Upload Profile Picture\">\r\n <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n <div class=\"ms-1\">\r\n Please Upload Profile Image\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n <div>\r\n {{userError}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n <h6>\r\n <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n Back\r\n </button>\r\n \r\n <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n alt=\"Logo\">\r\n <span *ngIf=\"showLoader\" class=\"spinner position-absolute\"></span>\r\n\r\n </button>\r\n \r\n </h6>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 5\">\r\n <ul class=\"term-list ps-3\">\r\n <h5>\r\n <b>\r\n Thanks, we got the basics down!\r\n </b>\r\n </h5>\r\n <br>\r\n <b class=\"para-comma\">\r\n Account created successfully. Next step: complete your profile.\r\n <br>\r\n <br>\r\n Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows.\r\n Incomplete profiles will have limited access.\r\n <br>\r\n <br>\r\n You may access your dashboard at any time, but full functionality is available only after completion.\r\n </b>\r\n </ul>\r\n <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n <!-- <div class=\"col-md-3 col-lg-3 col-xl-3 col-sm-12 text-center\">\r\n <img class=\"slider ml-3\" src=\"assets/images/icons/stepper-4.svg\" alt=\"Logo\">\r\n </div> -->\r\n <div class=\"col-5\"></div>\r\n <div class=\"col-md-4 col-sm-12 col-xl-4 text-end row\">\r\n <div class=\"col-md-2 col-2\">\r\n <h6 style=\"margin-right: 3rem\">\r\n </h6>\r\n </div>\r\n\r\n \r\n <div class=\"col-md-8\">\r\n <h6>\r\n <button (click)=\"dashboard()\" class=\"go-btn btn-sm\">\r\n Go To Home \r\n <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n </button>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div>test</div> -->\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 10\">\r\n <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\" [signatureFileId]=\"signatureFileId\"\r\n [signatureUrl]=\"signatureUrl\"></app-credentialing>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n <div class=\"modal-dialog modal-dialog-centered\">\r\n <div class=\"modal-content terms-fixed-modal\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title fw-bold title-popup\">\r\n {{ termsAndConditionTitle }}\r\n </h4>\r\n </div>\r\n\r\n <!-- SCROLLABLE CONTENT ONLY -->\r\n <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n </app-terms-conditions>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n </app-privacy-policy>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- FOOTER (NOT SCROLLING) -->\r\n <div>\r\n <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n Decline\r\n </button>\r\n\r\n <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n Agree\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i14$1.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14$1.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["signatureFileId", "signatureUrl", "data"], outputs: ["back"] }] });
|
|
34555
34679
|
}
|
|
34556
34680
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, decorators: [{
|
|
34557
34681
|
type: Component,
|
|
@@ -35083,7 +35207,7 @@ class InitialProcessModule {
|
|
|
35083
35207
|
Ng2LoadingSpinnerModule,
|
|
35084
35208
|
LoaderModule,
|
|
35085
35209
|
CustomPipesModule,
|
|
35086
|
-
NgxStarsModule,
|
|
35210
|
+
NgxStarsModule, i14.TooltipModule, i13.TabsModule, i14$1.AccordionModule, GooglePlaceModule,
|
|
35087
35211
|
GoogleMapsModule,
|
|
35088
35212
|
TextMaskModule,
|
|
35089
35213
|
SignaturePadModule,
|