@idsoftsource/initial-process 1.9.8 → 1.9.9
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.
|
@@ -4727,6 +4727,7 @@ class PreviewComponent {
|
|
|
4727
4727
|
this.headshotFileId = result.fileId;
|
|
4728
4728
|
this.headshotUrl = result.publicUrl;
|
|
4729
4729
|
this.headshotPreviewUrl = result.publicUrl;
|
|
4730
|
+
this.fileDataHeadshot = null;
|
|
4730
4731
|
}
|
|
4731
4732
|
}
|
|
4732
4733
|
finally {
|
|
@@ -5230,6 +5231,7 @@ class PreviewComponent {
|
|
|
5230
5231
|
this.logo.logoId = result.fileId;
|
|
5231
5232
|
this.logo.logoUrl = result.publicUrl;
|
|
5232
5233
|
this.logo.logoFileName = result.fileName;
|
|
5234
|
+
this.fileDataCompany = null;
|
|
5233
5235
|
}
|
|
5234
5236
|
this.isLogoLoading = false;
|
|
5235
5237
|
}
|
|
@@ -6720,11 +6722,11 @@ class EducationComponent {
|
|
|
6720
6722
|
this.fileName = '';
|
|
6721
6723
|
}
|
|
6722
6724
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, deps: [{ token: i1$1.RoleContextService }, { token: UserEducationService }, { token: UserService }, { token: CredentialingStore }, { token: EducationStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i1$1.TokenService }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
6723
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: EducationComponent, isStandalone: false, selector: "app-education", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Education</h3>\r\n <p class=\"step-card-subtitle\">Please list your educational history from GED to college degree</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n <form [formGroup]=\"educationForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Degree Information</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">General Equivalency Diploma / Degree <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n educationForm.get('courseName')?.hasError('required')\">\r\n Degree is required\r\n </small>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">Diploma / Degree Type <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n educationForm.get('courseType')?.hasError('required')\">\r\n Diploma / Degree Type is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Institution Name <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n educationForm.get('instituteName')?.hasError('required')\">\r\n Institution name is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Location & Timeline</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select 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\">{{ item.stateName }}</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 form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Additional Details</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Comments or additional notes\" formControlName=\"comments\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your diploma, degree certificate, or transcript (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 class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">Education record has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Education</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} record{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"preview-timeline\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index; let last = last\"\r\n class=\"timeline-entry\" [class.last]=\"last\">\r\n <div class=\"timeline-track\">\r\n <div class=\"timeline-dot\"></div>\r\n <div class=\"timeline-line\" *ngIf=\"!last\"></div>\r\n </div>\r\n <div class=\"timeline-card\">\r\n <div class=\"tc-head\">\r\n <div class=\"tc-avatar\">{{ (exp.instituteName || exp.courseName || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"tc-title-block\">\r\n <span class=\"tc-title\">{{ exp.courseName }}</span>\r\n <span class=\"tc-subtitle\">{{ exp.instituteName }}</span>\r\n </div>\r\n <div class=\"tc-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"tc-chips\">\r\n <span class=\"chip chip-type\" *ngIf=\"exp.courseType\">{{ exp.courseType }}</span>\r\n <span class=\"chip chip-date\" *ngIf=\"exp.startDate || exp.endDate\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>\r\n {{ exp.startDate | date:'MMM yyyy' }}{{ exp.endDate ? ' \u2013 ' + (exp.endDate | date:'MMM yyyy') : '' }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.city || exp.state\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.city }}{{ exp.city && (exp.state | stateName) ? ', ' : '' }}{{ exp.state | stateName }}\r\n </span>\r\n </div>\r\n <p class=\"tc-description\" *ngIf=\"exp.comments\">{{ exp.comments }}</p>\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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}.work-preview{max-width:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.preview-timeline{display:flex;flex-direction:column;margin-bottom:28px}.timeline-entry{display:flex;gap:0}.timeline-entry.last .timeline-line{display:none}.timeline-track{display:flex;flex-direction:column;align-items:center;width:28px;flex-shrink:0;padding-top:22px}.timeline-dot{width:11px;height:11px;border-radius:50%;background:#4077ad;box-shadow:0 0 0 3px #ebf2f9;flex-shrink:0;z-index:1}.timeline-line{width:2px;flex:1;min-height:20px;background:linear-gradient(to bottom,#4077ad,#e2e8f0);margin-top:5px}.timeline-card{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin:0 0 14px 14px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.timeline-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.tc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.tc-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.tc-title-block{flex:1;min-width:0}.tc-title{display:block;font-size:14px;font-weight:700;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}.tc-subtitle{display:block;font-size:12px;color:#64748b;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-actions{display:flex;gap:2px;flex-shrink:0;margin-top:-2px}.icon-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.tc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-type{background:#faf5ff;color:#7c3aed}.chip.chip-country{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:28px}.cred-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .18s ease,transform .18s ease}.cred-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.cred-card-accent{width:4px;background:#4077ad;flex-shrink:0}.cred-card-accent--license{background:#7c3aed}.cred-card-body{flex:1;padding:15px 16px;min-width:0}.cred-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.cred-icon{width:34px;height:34px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cred-icon--license{background:#f3f0ff;color:#7c3aed}.cred-title-block{flex:1;min-width:0}.cred-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-issuer{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-top-actions{display:flex;gap:2px;flex-shrink:0}.cred-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.cred-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.cred-date-item{display:flex;flex-direction:column;gap:2px}.cred-date-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}.cred-date-sep{font-size:12px;color:#94a3b8;align-self:flex-end;padding-bottom:3px}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media (max-width: 600px){.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}.row{flex-direction:column;gap:12px}.right-actions{gap:8px;flex-direction:column-reverse}.detail-grid{grid-template-columns:1fr}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.add-btn{width:unset}.actions{margin:48px 0 20px}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.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" }] });
|
|
6725
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: EducationComponent, isStandalone: false, selector: "app-education", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Education</h3>\r\n <p class=\"step-card-subtitle\">Please list your educational history from GED to college degree</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n <form [formGroup]=\"educationForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Degree Information</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">General Equivalency Diploma / Degree <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n educationForm.get('courseName')?.hasError('required')\">\r\n Degree is required\r\n </small>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">Diploma / Degree Type <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n educationForm.get('courseType')?.hasError('required')\">\r\n Diploma / Degree Type is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Institution Name <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n educationForm.get('instituteName')?.hasError('required')\">\r\n Institution name is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Location & Timeline</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select 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\">{{ item.stateName }}</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 form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Additional Details</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Comments or additional notes\" formControlName=\"comments\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your diploma, degree certificate, or transcript (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 class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">Education record has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Education</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} record{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"preview-timeline\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index; let last = last\"\r\n class=\"timeline-entry\" [class.last]=\"last\">\r\n <div class=\"timeline-track\">\r\n <div class=\"timeline-dot\"></div>\r\n <div class=\"timeline-line\" *ngIf=\"!last\"></div>\r\n </div>\r\n <div class=\"timeline-card\">\r\n <div class=\"tc-head\">\r\n <div class=\"tc-avatar\">{{ (exp.instituteName || exp.courseName || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"tc-title-block\">\r\n <span class=\"tc-title\">{{ exp.courseName }}</span>\r\n <span class=\"tc-subtitle\">{{ exp.instituteName }}</span>\r\n </div>\r\n <div class=\"tc-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"tc-chips\">\r\n <span class=\"chip chip-type\" *ngIf=\"exp.courseType\">{{ exp.courseType }}</span>\r\n <span class=\"chip chip-date\" *ngIf=\"exp.startDate || exp.endDate\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>\r\n {{ exp.startDate | date:'MMM yyyy' }}{{ exp.endDate ? ' \u2013 ' + (exp.endDate | date:'MMM yyyy') : '' }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.city || exp.state\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.city }}{{ exp.city && (exp.state | stateName) ? ', ' : '' }}{{ exp.state | stateName }}\r\n </span>\r\n </div>\r\n <p class=\"tc-description\" *ngIf=\"exp.comments\">{{ exp.comments }}</p>\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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}.work-preview{max-width:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.preview-timeline{display:flex;flex-direction:column;margin-bottom:28px}.timeline-entry{display:flex;gap:0}.timeline-entry.last .timeline-line{display:none}.timeline-track{display:none;flex-direction:column;align-items:center;width:28px;flex-shrink:0;padding-top:22px}.timeline-dot{width:11px;height:11px;border-radius:50%;background:#4077ad;box-shadow:0 0 0 3px #ebf2f9;flex-shrink:0;z-index:1}.timeline-line{width:2px;flex:1;min-height:20px;background:linear-gradient(to bottom,#4077ad,#e2e8f0);margin-top:5px}.timeline-card{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin:0 0 14px 14px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.timeline-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.tc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.tc-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.tc-title-block{flex:1;min-width:0}.tc-title{display:block;font-size:14px;font-weight:700;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}.tc-subtitle{display:block;font-size:12px;color:#64748b;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-actions{display:flex;gap:2px;flex-shrink:0;margin-top:-2px}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.tc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-type{background:#faf5ff;color:#7c3aed}.chip.chip-country{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.cred-grid{display:grid;gap:14px;margin-bottom:28px}.cred-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .18s ease,transform .18s ease}.cred-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.cred-card-accent{width:4px;background:#4077ad;flex-shrink:0}.cred-card-accent--license{background:#7c3aed}.cred-card-body{flex:1;padding:15px 16px;min-width:0}.cred-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.cred-icon{width:34px;height:34px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cred-icon--license{background:#f3f0ff;color:#7c3aed}.cred-title-block{flex:1;min-width:0}.cred-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-issuer{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-top-actions{display:flex;gap:2px;flex-shrink:0}.cred-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.cred-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.cred-date-item{display:flex;flex-direction:column;gap:2px}.cred-date-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}.cred-date-sep{font-size:12px;color:#94a3b8;align-self:flex-end;padding-bottom:3px}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media (max-width: 600px){.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}.row{flex-direction:column;gap:12px}.right-actions{gap:8px;flex-direction:column-reverse}.detail-grid{grid-template-columns:1fr}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.add-btn{width:unset}.actions{margin:48px 0 20px}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.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" }] });
|
|
6724
6726
|
}
|
|
6725
6727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, decorators: [{
|
|
6726
6728
|
type: Component,
|
|
6727
|
-
args: [{ selector: 'app-education', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Education</h3>\r\n <p class=\"step-card-subtitle\">Please list your educational history from GED to college degree</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n <form [formGroup]=\"educationForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Degree Information</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">General Equivalency Diploma / Degree <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n educationForm.get('courseName')?.hasError('required')\">\r\n Degree is required\r\n </small>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">Diploma / Degree Type <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n educationForm.get('courseType')?.hasError('required')\">\r\n Diploma / Degree Type is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Institution Name <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n educationForm.get('instituteName')?.hasError('required')\">\r\n Institution name is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Location & Timeline</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select 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\">{{ item.stateName }}</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 form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Additional Details</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Comments or additional notes\" formControlName=\"comments\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your diploma, degree certificate, or transcript (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 class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">Education record has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Education</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} record{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"preview-timeline\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index; let last = last\"\r\n class=\"timeline-entry\" [class.last]=\"last\">\r\n <div class=\"timeline-track\">\r\n <div class=\"timeline-dot\"></div>\r\n <div class=\"timeline-line\" *ngIf=\"!last\"></div>\r\n </div>\r\n <div class=\"timeline-card\">\r\n <div class=\"tc-head\">\r\n <div class=\"tc-avatar\">{{ (exp.instituteName || exp.courseName || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"tc-title-block\">\r\n <span class=\"tc-title\">{{ exp.courseName }}</span>\r\n <span class=\"tc-subtitle\">{{ exp.instituteName }}</span>\r\n </div>\r\n <div class=\"tc-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"tc-chips\">\r\n <span class=\"chip chip-type\" *ngIf=\"exp.courseType\">{{ exp.courseType }}</span>\r\n <span class=\"chip chip-date\" *ngIf=\"exp.startDate || exp.endDate\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>\r\n {{ exp.startDate | date:'MMM yyyy' }}{{ exp.endDate ? ' \u2013 ' + (exp.endDate | date:'MMM yyyy') : '' }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.city || exp.state\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.city }}{{ exp.city && (exp.state | stateName) ? ', ' : '' }}{{ exp.state | stateName }}\r\n </span>\r\n </div>\r\n <p class=\"tc-description\" *ngIf=\"exp.comments\">{{ exp.comments }}</p>\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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}.work-preview{max-width:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.preview-timeline{display:flex;flex-direction:column;margin-bottom:28px}.timeline-entry{display:flex;gap:0}.timeline-entry.last .timeline-line{display:none}.timeline-track{display:flex;flex-direction:column;align-items:center;width:28px;flex-shrink:0;padding-top:22px}.timeline-dot{width:11px;height:11px;border-radius:50%;background:#4077ad;box-shadow:0 0 0 3px #ebf2f9;flex-shrink:0;z-index:1}.timeline-line{width:2px;flex:1;min-height:20px;background:linear-gradient(to bottom,#4077ad,#e2e8f0);margin-top:5px}.timeline-card{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin:0 0 14px 14px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.timeline-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.tc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.tc-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.tc-title-block{flex:1;min-width:0}.tc-title{display:block;font-size:14px;font-weight:700;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}.tc-subtitle{display:block;font-size:12px;color:#64748b;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-actions{display:flex;gap:2px;flex-shrink:0;margin-top:-2px}.icon-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.tc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-type{background:#faf5ff;color:#7c3aed}.chip.chip-country{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:28px}.cred-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .18s ease,transform .18s ease}.cred-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.cred-card-accent{width:4px;background:#4077ad;flex-shrink:0}.cred-card-accent--license{background:#7c3aed}.cred-card-body{flex:1;padding:15px 16px;min-width:0}.cred-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.cred-icon{width:34px;height:34px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cred-icon--license{background:#f3f0ff;color:#7c3aed}.cred-title-block{flex:1;min-width:0}.cred-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-issuer{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-top-actions{display:flex;gap:2px;flex-shrink:0}.cred-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.cred-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.cred-date-item{display:flex;flex-direction:column;gap:2px}.cred-date-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}.cred-date-sep{font-size:12px;color:#94a3b8;align-self:flex-end;padding-bottom:3px}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media (max-width: 600px){.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}.row{flex-direction:column;gap:12px}.right-actions{gap:8px;flex-direction:column-reverse}.detail-grid{grid-template-columns:1fr}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.add-btn{width:unset}.actions{margin:48px 0 20px}button{width:100%}}\n"] }]
|
|
6729
|
+
args: [{ selector: 'app-education', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Education</h3>\r\n <p class=\"step-card-subtitle\">Please list your educational history from GED to college degree</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n <form [formGroup]=\"educationForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Degree Information</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">General Equivalency Diploma / Degree <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n educationForm.get('courseName')?.hasError('required')\">\r\n Degree is required\r\n </small>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">Diploma / Degree Type <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n educationForm.get('courseType')?.hasError('required')\">\r\n Diploma / Degree Type is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <div class=\"head\">Institution Name <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n educationForm.get('instituteName')?.hasError('required')\">\r\n Institution name is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Location & Timeline</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select 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\">{{ item.stateName }}</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 form-row\">\r\n <div class=\"field city\">\r\n <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n educationForm.get('city')?.hasError('required')\">\r\n Enter City\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n educationForm.get('startDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n educationForm.get('endDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Additional Details</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Comments or additional notes\" formControlName=\"comments\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your diploma, degree certificate, or transcript (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 class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">Education record has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Education</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} record{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"preview-timeline\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index; let last = last\"\r\n class=\"timeline-entry\" [class.last]=\"last\">\r\n <div class=\"timeline-track\">\r\n <div class=\"timeline-dot\"></div>\r\n <div class=\"timeline-line\" *ngIf=\"!last\"></div>\r\n </div>\r\n <div class=\"timeline-card\">\r\n <div class=\"tc-head\">\r\n <div class=\"tc-avatar\">{{ (exp.instituteName || exp.courseName || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"tc-title-block\">\r\n <span class=\"tc-title\">{{ exp.courseName }}</span>\r\n <span class=\"tc-subtitle\">{{ exp.instituteName }}</span>\r\n </div>\r\n <div class=\"tc-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"tc-chips\">\r\n <span class=\"chip chip-type\" *ngIf=\"exp.courseType\">{{ exp.courseType }}</span>\r\n <span class=\"chip chip-date\" *ngIf=\"exp.startDate || exp.endDate\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>\r\n {{ exp.startDate | date:'MMM yyyy' }}{{ exp.endDate ? ' \u2013 ' + (exp.endDate | date:'MMM yyyy') : '' }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.city || exp.state\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.city }}{{ exp.city && (exp.state | stateName) ? ', ' : '' }}{{ exp.state | stateName }}\r\n </span>\r\n </div>\r\n <p class=\"tc-description\" *ngIf=\"exp.comments\">{{ exp.comments }}</p>\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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}.work-preview{max-width:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.preview-timeline{display:flex;flex-direction:column;margin-bottom:28px}.timeline-entry{display:flex;gap:0}.timeline-entry.last .timeline-line{display:none}.timeline-track{display:none;flex-direction:column;align-items:center;width:28px;flex-shrink:0;padding-top:22px}.timeline-dot{width:11px;height:11px;border-radius:50%;background:#4077ad;box-shadow:0 0 0 3px #ebf2f9;flex-shrink:0;z-index:1}.timeline-line{width:2px;flex:1;min-height:20px;background:linear-gradient(to bottom,#4077ad,#e2e8f0);margin-top:5px}.timeline-card{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin:0 0 14px 14px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.timeline-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.tc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.tc-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.tc-title-block{flex:1;min-width:0}.tc-title{display:block;font-size:14px;font-weight:700;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}.tc-subtitle{display:block;font-size:12px;color:#64748b;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-actions{display:flex;gap:2px;flex-shrink:0;margin-top:-2px}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.tc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-type{background:#faf5ff;color:#7c3aed}.chip.chip-country{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.cred-grid{display:grid;gap:14px;margin-bottom:28px}.cred-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .18s ease,transform .18s ease}.cred-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.cred-card-accent{width:4px;background:#4077ad;flex-shrink:0}.cred-card-accent--license{background:#7c3aed}.cred-card-body{flex:1;padding:15px 16px;min-width:0}.cred-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.cred-icon{width:34px;height:34px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cred-icon--license{background:#f3f0ff;color:#7c3aed}.cred-title-block{flex:1;min-width:0}.cred-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-issuer{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-top-actions{display:flex;gap:2px;flex-shrink:0}.cred-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.cred-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.cred-date-item{display:flex;flex-direction:column;gap:2px}.cred-date-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}.cred-date-sep{font-size:12px;color:#94a3b8;align-self:flex-end;padding-bottom:3px}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media (max-width: 600px){.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}.row{flex-direction:column;gap:12px}.right-actions{gap:8px;flex-direction:column-reverse}.detail-grid{grid-template-columns:1fr}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.add-btn{width:unset}.actions{margin:48px 0 20px}button{width:100%}}\n"] }]
|
|
6728
6730
|
}], ctorParameters: () => [{ type: i1$1.RoleContextService }, { type: UserEducationService }, { type: UserService }, { type: CredentialingStore }, { type: EducationStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i1$1.TokenService }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
6729
6731
|
type: Input
|
|
6730
6732
|
}], providerName: [{
|
|
@@ -6922,6 +6924,13 @@ class CertificationComponent {
|
|
|
6922
6924
|
this.fileChanged = false;
|
|
6923
6925
|
this.fileData = null;
|
|
6924
6926
|
this.editingIndex = index;
|
|
6927
|
+
this.searchControl.setValue('', { emitEvent: false });
|
|
6928
|
+
if (data.documentTypeId?.startsWith('manual-')) {
|
|
6929
|
+
this.documentTypes = [{ id: data.documentTypeId, type: data.documentTypeName }];
|
|
6930
|
+
}
|
|
6931
|
+
else {
|
|
6932
|
+
this.loadDocumentTypesDefault();
|
|
6933
|
+
}
|
|
6925
6934
|
}
|
|
6926
6935
|
delete(index) {
|
|
6927
6936
|
const exp = this.workStore.getExperience(index);
|
|
@@ -7164,6 +7173,8 @@ class CertificationComponent {
|
|
|
7164
7173
|
this.fileName = '';
|
|
7165
7174
|
this.selectedDocumentId = null;
|
|
7166
7175
|
this.selectedDocumentName = null;
|
|
7176
|
+
this.searchControl.setValue('', { emitEvent: false });
|
|
7177
|
+
this.loadDocumentTypesDefault();
|
|
7167
7178
|
}
|
|
7168
7179
|
addManualDocumentType() {
|
|
7169
7180
|
const name = (this.searchControl.value || '').trim();
|
|
@@ -7187,11 +7198,11 @@ class CertificationComponent {
|
|
|
7187
7198
|
this.fileName = '';
|
|
7188
7199
|
}
|
|
7189
7200
|
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 });
|
|
7190
|
-
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 *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Certificates</h3>\r\n <p class=\"step-card-subtitle\">Recommended for your role</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Certificate Type</div>\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 <div class=\"doc-type-chips\">\r\n <label class=\"doc-type-chip\" *ngFor=\"let item of documentTypes\"\r\n [class.selected]=\"isChecked(item.id)\"\r\n [attr.for]=\"'doc_' + item.id\">\r\n <input type=\"checkbox\" [id]=\"'doc_' + item.id\" [checked]=\"isChecked(item.id)\"\r\n (change)=\"toggleSelection(item, $event)\" />\r\n <svg *ngIf=\"isChecked(item.id)\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ item.type }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"certificateForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Certificate Details</div>\r\n <div class=\"row\">\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 <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 <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\">{{ item.stateName }}</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>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Dates</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, isAnimated: true,\r\n 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 <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 </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Additional Notes</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Comments or additional notes\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\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 class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">Certificate has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Certifications</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} certification{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-grid\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"cred-card\">\r\n <div class=\"cred-card-accent\"></div>\r\n <div class=\"cred-card-body\">\r\n <div class=\"cred-head\">\r\n <div class=\"cred-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"6\"/><path d=\"M15.477 12.89L17 22l-5-3-5 3 1.523-9.11\"/></svg>\r\n </div>\r\n <div class=\"cred-title-block\">\r\n <span class=\"cred-name\">{{ exp.documentTypeName }}</span>\r\n <span class=\"cred-issuer\" *ngIf=\"exp.issuedBy\">{{ exp.issuedBy }}</span>\r\n </div>\r\n <div class=\"cred-top-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-meta-row\" *ngIf=\"exp.number || exp.issuedState\">\r\n <span class=\"chip chip-number\" *ngIf=\"exp.number\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/></svg>\r\n {{ exp.number }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.issuedState\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.issuedState | stateName }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"cred-dates\">\r\n <div class=\"cred-date-item\" *ngIf=\"exp.issueDate\">\r\n <span class=\"cred-date-label\">Issued</span>\r\n <span class=\"chip chip-date\">{{ exp.issueDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n <div class=\"cred-date-sep\" *ngIf=\"exp.issueDate && exp.expiryDate\">\u2192</div>\r\n <div class=\"cred-date-item\" *ngIf=\"exp.expiryDate\">\r\n <span class=\"cred-date-label\">Expires</span>\r\n <span class=\"chip chip-expiry\">{{ exp.expiryDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n </div>\r\n\r\n <p class=\"tc-description\" *ngIf=\"exp.notes\">{{ exp.notes }}</p>\r\n\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.icon-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:28px}.cred-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .18s ease,transform .18s ease}.cred-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.cred-card-accent{width:4px;background:#4077ad;flex-shrink:0}.cred-card-accent--license{background:#7c3aed}.cred-card-body{flex:1;padding:15px 16px;min-width:0}.cred-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.cred-icon{width:34px;height:34px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cred-icon--license{background:#f3f0ff;color:#7c3aed}.cred-title-block{flex:1;min-width:0}.cred-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-issuer{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-top-actions{display:flex;gap:2px;flex-shrink:0}.cred-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.cred-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.cred-date-item{display:flex;flex-direction:column;gap:2px}.cred-date-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}.cred-date-sep{font-size:12px;color:#94a3b8;align-self:flex-end;padding-bottom:3px}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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" }] });
|
|
7201
|
+
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 *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Certificates</h3>\r\n <p class=\"step-card-subtitle\">Recommended for your role</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Certificate Type</div>\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 <div class=\"doc-type-chips\">\r\n <label class=\"doc-type-chip\" *ngFor=\"let item of documentTypes\"\r\n [class.selected]=\"isChecked(item.id)\"\r\n [attr.for]=\"'doc_' + item.id\">\r\n <input type=\"checkbox\" [id]=\"'doc_' + item.id\" [checked]=\"isChecked(item.id)\"\r\n (change)=\"toggleSelection(item, $event)\" />\r\n <svg *ngIf=\"isChecked(item.id)\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ item.type }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"certificateForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Certificate Details</div>\r\n <div class=\"row\">\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 <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 <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\">{{ item.stateName }}</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>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Dates</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, isAnimated: true,\r\n 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 <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 </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Additional Notes</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Comments or additional notes\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\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 class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">Certificate has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Certifications</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} certification{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-grid\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"cred-card\">\r\n <div class=\"cred-card-accent\"></div>\r\n <div class=\"cred-card-body\">\r\n <div class=\"cred-head\">\r\n <div class=\"cred-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"6\"/><path d=\"M15.477 12.89L17 22l-5-3-5 3 1.523-9.11\"/></svg>\r\n </div>\r\n <div class=\"cred-title-block\">\r\n <span class=\"cred-name\">{{ exp.documentTypeName }}</span>\r\n <span class=\"cred-issuer\" *ngIf=\"exp.issuedBy\">{{ exp.issuedBy }}</span>\r\n </div>\r\n <div class=\"cred-top-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-meta-row\" *ngIf=\"exp.number || exp.issuedState\">\r\n <span class=\"chip chip-number\" *ngIf=\"exp.number\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/></svg>\r\n {{ exp.number }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.issuedState\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.issuedState | stateName }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"cred-dates\">\r\n <div class=\"cred-date-item\" *ngIf=\"exp.issueDate\">\r\n <span class=\"cred-date-label\">Issued</span>\r\n <span class=\"chip chip-date\">{{ exp.issueDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n <div class=\"cred-date-sep\" *ngIf=\"exp.issueDate && exp.expiryDate\">\u2192</div>\r\n <div class=\"cred-date-item\" *ngIf=\"exp.expiryDate\">\r\n <span class=\"cred-date-label\">Expires</span>\r\n <span class=\"chip chip-expiry\">{{ exp.expiryDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n </div>\r\n\r\n <p class=\"tc-description\" *ngIf=\"exp.notes\">{{ exp.notes }}</p>\r\n\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.icon-btn{width:28px;height:28px;min-width:unset!important;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.cred-grid{display:grid;gap:14px;margin-bottom:28px}.cred-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .18s ease,transform .18s ease}.cred-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.cred-card-accent{width:4px;background:#4077ad;flex-shrink:0}.cred-card-accent--license{background:#7c3aed}.cred-card-body{flex:1;padding:15px 16px;min-width:0}.cred-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.cred-icon{width:34px;height:34px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cred-icon--license{background:#f3f0ff;color:#7c3aed}.cred-title-block{flex:1;min-width:0}.cred-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-issuer{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-top-actions{display:flex;gap:2px;flex-shrink:0}.cred-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.cred-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.cred-date-item{display:flex;flex-direction:column;gap:2px}.cred-date-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}.cred-date-sep{font-size:12px;color:#94a3b8;align-self:flex-end;padding-bottom:3px}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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" }] });
|
|
7191
7202
|
}
|
|
7192
7203
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, decorators: [{
|
|
7193
7204
|
type: Component,
|
|
7194
|
-
args: [{ selector: 'app-certification', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Certificates</h3>\r\n <p class=\"step-card-subtitle\">Recommended for your role</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Certificate Type</div>\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 <div class=\"doc-type-chips\">\r\n <label class=\"doc-type-chip\" *ngFor=\"let item of documentTypes\"\r\n [class.selected]=\"isChecked(item.id)\"\r\n [attr.for]=\"'doc_' + item.id\">\r\n <input type=\"checkbox\" [id]=\"'doc_' + item.id\" [checked]=\"isChecked(item.id)\"\r\n (change)=\"toggleSelection(item, $event)\" />\r\n <svg *ngIf=\"isChecked(item.id)\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ item.type }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"certificateForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Certificate Details</div>\r\n <div class=\"row\">\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 <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 <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\">{{ item.stateName }}</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>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Dates</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, isAnimated: true,\r\n 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 <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 </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Additional Notes</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Comments or additional notes\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\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 class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">Certificate has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Certifications</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} certification{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-grid\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"cred-card\">\r\n <div class=\"cred-card-accent\"></div>\r\n <div class=\"cred-card-body\">\r\n <div class=\"cred-head\">\r\n <div class=\"cred-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"6\"/><path d=\"M15.477 12.89L17 22l-5-3-5 3 1.523-9.11\"/></svg>\r\n </div>\r\n <div class=\"cred-title-block\">\r\n <span class=\"cred-name\">{{ exp.documentTypeName }}</span>\r\n <span class=\"cred-issuer\" *ngIf=\"exp.issuedBy\">{{ exp.issuedBy }}</span>\r\n </div>\r\n <div class=\"cred-top-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-meta-row\" *ngIf=\"exp.number || exp.issuedState\">\r\n <span class=\"chip chip-number\" *ngIf=\"exp.number\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/></svg>\r\n {{ exp.number }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.issuedState\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.issuedState | stateName }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"cred-dates\">\r\n <div class=\"cred-date-item\" *ngIf=\"exp.issueDate\">\r\n <span class=\"cred-date-label\">Issued</span>\r\n <span class=\"chip chip-date\">{{ exp.issueDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n <div class=\"cred-date-sep\" *ngIf=\"exp.issueDate && exp.expiryDate\">\u2192</div>\r\n <div class=\"cred-date-item\" *ngIf=\"exp.expiryDate\">\r\n <span class=\"cred-date-label\">Expires</span>\r\n <span class=\"chip chip-expiry\">{{ exp.expiryDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n </div>\r\n\r\n <p class=\"tc-description\" *ngIf=\"exp.notes\">{{ exp.notes }}</p>\r\n\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.icon-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:28px}.cred-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .18s ease,transform .18s ease}.cred-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.cred-card-accent{width:4px;background:#4077ad;flex-shrink:0}.cred-card-accent--license{background:#7c3aed}.cred-card-body{flex:1;padding:15px 16px;min-width:0}.cred-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.cred-icon{width:34px;height:34px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cred-icon--license{background:#f3f0ff;color:#7c3aed}.cred-title-block{flex:1;min-width:0}.cred-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-issuer{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-top-actions{display:flex;gap:2px;flex-shrink:0}.cred-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.cred-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.cred-date-item{display:flex;flex-direction:column;gap:2px}.cred-date-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}.cred-date-sep{font-size:12px;color:#94a3b8;align-self:flex-end;padding-bottom:3px}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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"] }]
|
|
7205
|
+
args: [{ selector: 'app-certification', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Certificates</h3>\r\n <p class=\"step-card-subtitle\">Recommended for your role</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Certificate Type</div>\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 <div class=\"doc-type-chips\">\r\n <label class=\"doc-type-chip\" *ngFor=\"let item of documentTypes\"\r\n [class.selected]=\"isChecked(item.id)\"\r\n [attr.for]=\"'doc_' + item.id\">\r\n <input type=\"checkbox\" [id]=\"'doc_' + item.id\" [checked]=\"isChecked(item.id)\"\r\n (change)=\"toggleSelection(item, $event)\" />\r\n <svg *ngIf=\"isChecked(item.id)\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ item.type }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"certificateForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Certificate Details</div>\r\n <div class=\"row\">\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 <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 <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\">{{ item.stateName }}</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>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Dates</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, isAnimated: true,\r\n 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 <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 </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Additional Notes</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Comments or additional notes\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\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 class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">Certificate has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Certifications</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} certification{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-grid\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"cred-card\">\r\n <div class=\"cred-card-accent\"></div>\r\n <div class=\"cred-card-body\">\r\n <div class=\"cred-head\">\r\n <div class=\"cred-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"6\"/><path d=\"M15.477 12.89L17 22l-5-3-5 3 1.523-9.11\"/></svg>\r\n </div>\r\n <div class=\"cred-title-block\">\r\n <span class=\"cred-name\">{{ exp.documentTypeName }}</span>\r\n <span class=\"cred-issuer\" *ngIf=\"exp.issuedBy\">{{ exp.issuedBy }}</span>\r\n </div>\r\n <div class=\"cred-top-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-meta-row\" *ngIf=\"exp.number || exp.issuedState\">\r\n <span class=\"chip chip-number\" *ngIf=\"exp.number\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/></svg>\r\n {{ exp.number }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.issuedState\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.issuedState | stateName }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"cred-dates\">\r\n <div class=\"cred-date-item\" *ngIf=\"exp.issueDate\">\r\n <span class=\"cred-date-label\">Issued</span>\r\n <span class=\"chip chip-date\">{{ exp.issueDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n <div class=\"cred-date-sep\" *ngIf=\"exp.issueDate && exp.expiryDate\">\u2192</div>\r\n <div class=\"cred-date-item\" *ngIf=\"exp.expiryDate\">\r\n <span class=\"cred-date-label\">Expires</span>\r\n <span class=\"chip chip-expiry\">{{ exp.expiryDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n </div>\r\n\r\n <p class=\"tc-description\" *ngIf=\"exp.notes\">{{ exp.notes }}</p>\r\n\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.icon-btn{width:28px;height:28px;min-width:unset!important;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.cred-grid{display:grid;gap:14px;margin-bottom:28px}.cred-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .18s ease,transform .18s ease}.cred-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.cred-card-accent{width:4px;background:#4077ad;flex-shrink:0}.cred-card-accent--license{background:#7c3aed}.cred-card-body{flex:1;padding:15px 16px;min-width:0}.cred-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.cred-icon{width:34px;height:34px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cred-icon--license{background:#f3f0ff;color:#7c3aed}.cred-title-block{flex:1;min-width:0}.cred-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-issuer{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-top-actions{display:flex;gap:2px;flex-shrink:0}.cred-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.cred-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.cred-date-item{display:flex;flex-direction:column;gap:2px}.cred-date-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}.cred-date-sep{font-size:12px;color:#94a3b8;align-self:flex-end;padding-bottom:3px}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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"] }]
|
|
7195
7206
|
}], 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: [{
|
|
7196
7207
|
type: Input
|
|
7197
7208
|
}], providerId: [{
|
|
@@ -7965,7 +7976,7 @@ class SkillsComponent {
|
|
|
7965
7976
|
this.userSkillsSub?.unsubscribe();
|
|
7966
7977
|
}
|
|
7967
7978
|
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 });
|
|
7968
|
-
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: "<!-- \u2500\u2500\u2500 Skills Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Skills</h3>\r\n <p class=\"preview-subtitle\">{{ userSkillsPreview.length }} skill{{ userSkillsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let skill of userSkillsPreview; let i = index\" class=\"sk-card\">\r\n <div class=\"sk-card-accent\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-icon\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>\r\n </svg>\r\n </div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ skill.skillSetName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"skill.providerName\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backToSkill(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editSkillFromPreview(skill, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteSkillFromPreview(skill, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\">\r\n <div class=\"sk-meta-row\">\r\n <span class=\"chip chip-year\" *ngIf=\"skill.year\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></svg>\r\n {{ skill.year }} yr(s)\r\n </span>\r\n <span class=\"chip chip-visible\" *ngIf=\"skill.profileVisibility\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\r\n Visible\r\n </span>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"skill.notes\">{{ skill.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\"\r\n [formGroup]=\"tab.at(0)\" class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Self Ability Rating</label>\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=\"sk-edit-field\">\r\n <label class=\"sk-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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"></ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Skills Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Skills</h3>\r\n <p class=\"step-card-subtitle\">Select your skill areas and rate your proficiency</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Select skills -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-section-label\">Select Skill Areas</div>\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=\"add\" 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\">Please Enter Skillsets Name</div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\">\r\n <div class=\"skill-chips\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '120px'} : {}\">\r\n <label class=\"skill-chip\" *ngFor=\"let skill of skillSets\"\r\n [class.selected]=\"skill.selected\"\r\n [attr.for]=\"skill.id\">\r\n <input type=\"checkbox\" [checked]=\"skill.selected\"\r\n (change)=\"onSelectedSkillsets($event, skill)\"\r\n [id]=\"skill.id\" [name]=\"skill.id\" />\r\n <svg *ngIf=\"skill.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ skill.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\"\r\n *ngIf=\"tab.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Skill Details</span>\r\n <span class=\"sk-count-badge\">{{ tab.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab.controls.length > 1\" title=\"Copy these values to all skills\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.skillSetId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n (change)=\"onYearChange(group)\"></ng-select>\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Description</label>\r\n <textarea placeholder=\"Describe your skill...\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"2\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Add mode -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"userSkillsPreview.length > 0 ? cancel() : back()\">\r\n <svg *ngIf=\"userSkillsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userSkillsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userSkillsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.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 .skill-chips-wrapper{margin:8px 0 4px}.content-part .skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.content-part .skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.content-part .skill-chip input[type=checkbox]{display:none}.content-part .skill-chip .chip-check-icon{flex-shrink:0}.content-part .skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.content-part .skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.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}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-icon{width:32px;height:32px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:transparent;color:#64748b;border:1px solid #e2e8f0}.sk-text-btn.cancel:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:13px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#ebf2f9;color:#4077ad;border-radius:20px;font-size:11px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ebf2f9;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#4077ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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}.sk-grid,.sk-edit-row,.sk-fields-row{grid-template-columns:1fr}}\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"] }], animations: [
|
|
7979
|
+
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: "<!-- \u2500\u2500\u2500 Skills Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Skills</h3>\r\n <p class=\"preview-subtitle\">{{ userSkillsPreview.length }} skill{{ userSkillsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let skill of userSkillsPreview; let i = index\" class=\"sk-card\">\r\n <div class=\"sk-card-accent\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-icon\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>\r\n </svg>\r\n </div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ skill.skillSetName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"skill.providerName\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backToSkill(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editSkillFromPreview(skill, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteSkillFromPreview(skill, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\">\r\n <div class=\"sk-meta-row\">\r\n <span class=\"chip chip-year\" *ngIf=\"skill.year\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></svg>\r\n {{ skill.year }} yr(s)\r\n </span>\r\n <span class=\"chip chip-visible\" *ngIf=\"skill.profileVisibility\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\r\n Visible\r\n </span>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"skill.notes\">{{ skill.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\"\r\n [formGroup]=\"tab.at(0)\" class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Self Ability Rating</label>\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=\"sk-edit-field\">\r\n <label class=\"sk-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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\"></ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Skills Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Skills</h3>\r\n <p class=\"step-card-subtitle\">Select your skill areas and rate your proficiency</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Select skills -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-section-label\">Select Skill Areas</div>\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=\"add\" 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\">Please Enter Skillsets Name</div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\">\r\n <div class=\"skill-chips\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '120px'} : {}\">\r\n <label class=\"skill-chip\" *ngFor=\"let skill of skillSets\"\r\n [class.selected]=\"skill.selected\"\r\n [attr.for]=\"skill.id\">\r\n <input type=\"checkbox\" [checked]=\"skill.selected\"\r\n (change)=\"onSelectedSkillsets($event, skill)\"\r\n [id]=\"skill.id\" [name]=\"skill.id\" />\r\n <svg *ngIf=\"skill.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ skill.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\"\r\n *ngIf=\"tab.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Skill Details</span>\r\n <span class=\"sk-count-badge\">{{ tab.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab.controls.length > 1\" title=\"Copy these values to all skills\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.skillSetId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Description</label>\r\n <textarea placeholder=\"Describe your skill...\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"2\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Add mode -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"userSkillsPreview.length > 0 ? cancel() : back()\">\r\n <svg *ngIf=\"userSkillsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userSkillsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userSkillsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.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}.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}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#94a3b8}.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}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}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}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.skill-chips-wrapper{margin:8px 0 4px}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.skill-chip input[type=checkbox]{display:none}.skill-chip .chip-check-icon{flex-shrink:0}.skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.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}.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-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}::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}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-icon{width:32px;height:32px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:transparent;color:#64748b;border:1px solid #e2e8f0}.sk-text-btn.cancel:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:13px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#ebf2f9;color:#4077ad;border-radius:20px;font-size:11px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ebf2f9;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#4077ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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}.sk-grid,.sk-edit-row,.sk-fields-row{grid-template-columns:1fr}}\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"] }], animations: [
|
|
7969
7980
|
trigger('expandCollapse', [
|
|
7970
7981
|
state('open', style({
|
|
7971
7982
|
height: '*',
|
|
@@ -8003,7 +8014,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
8003
8014
|
})),
|
|
8004
8015
|
transition('open <=> closed', animate('300ms ease'))
|
|
8005
8016
|
])
|
|
8006
|
-
], template: "<!-- \u2500\u2500\u2500 Skills Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Skills</h3>\r\n <p class=\"preview-subtitle\">{{ userSkillsPreview.length }} skill{{ userSkillsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let skill of userSkillsPreview; let i = index\" class=\"sk-card\">\r\n <div class=\"sk-card-accent\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-icon\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>\r\n </svg>\r\n </div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ skill.skillSetName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"skill.providerName\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backToSkill(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editSkillFromPreview(skill, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteSkillFromPreview(skill, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\">\r\n <div class=\"sk-meta-row\">\r\n <span class=\"chip chip-year\" *ngIf=\"skill.year\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></svg>\r\n {{ skill.year }} yr(s)\r\n </span>\r\n <span class=\"chip chip-visible\" *ngIf=\"skill.profileVisibility\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\r\n Visible\r\n </span>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"skill.notes\">{{ skill.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\"\r\n [formGroup]=\"tab.at(0)\" class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Self Ability Rating</label>\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=\"sk-edit-field\">\r\n <label class=\"sk-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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"></ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Skills Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Skills</h3>\r\n <p class=\"step-card-subtitle\">Select your skill areas and rate your proficiency</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Select skills -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-section-label\">Select Skill Areas</div>\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=\"add\" 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\">Please Enter Skillsets Name</div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\">\r\n <div class=\"skill-chips\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '120px'} : {}\">\r\n <label class=\"skill-chip\" *ngFor=\"let skill of skillSets\"\r\n [class.selected]=\"skill.selected\"\r\n [attr.for]=\"skill.id\">\r\n <input type=\"checkbox\" [checked]=\"skill.selected\"\r\n (change)=\"onSelectedSkillsets($event, skill)\"\r\n [id]=\"skill.id\" [name]=\"skill.id\" />\r\n <svg *ngIf=\"skill.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ skill.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\"\r\n *ngIf=\"tab.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Skill Details</span>\r\n <span class=\"sk-count-badge\">{{ tab.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab.controls.length > 1\" title=\"Copy these values to all skills\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.skillSetId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n (change)=\"onYearChange(group)\"></ng-select>\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Description</label>\r\n <textarea placeholder=\"Describe your skill...\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"2\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Add mode -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"userSkillsPreview.length > 0 ? cancel() : back()\">\r\n <svg *ngIf=\"userSkillsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userSkillsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userSkillsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.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 .skill-chips-wrapper{margin:8px 0 4px}.content-part .skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.content-part .skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.content-part .skill-chip input[type=checkbox]{display:none}.content-part .skill-chip .chip-check-icon{flex-shrink:0}.content-part .skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.content-part .skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.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}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-icon{width:32px;height:32px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:transparent;color:#64748b;border:1px solid #e2e8f0}.sk-text-btn.cancel:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:13px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#ebf2f9;color:#4077ad;border-radius:20px;font-size:11px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ebf2f9;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#4077ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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}.sk-grid,.sk-edit-row,.sk-fields-row{grid-template-columns:1fr}}\n"] }]
|
|
8017
|
+
], template: "<!-- \u2500\u2500\u2500 Skills Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Skills</h3>\r\n <p class=\"preview-subtitle\">{{ userSkillsPreview.length }} skill{{ userSkillsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let skill of userSkillsPreview; let i = index\" class=\"sk-card\">\r\n <div class=\"sk-card-accent\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-icon\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/>\r\n </svg>\r\n </div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ skill.skillSetName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"skill.providerName\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backToSkill(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editSkillFromPreview(skill, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteSkillFromPreview(skill, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\">\r\n <div class=\"sk-meta-row\">\r\n <span class=\"chip chip-year\" *ngIf=\"skill.year\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></svg>\r\n {{ skill.year }} yr(s)\r\n </span>\r\n <span class=\"chip chip-visible\" *ngIf=\"skill.profileVisibility\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\r\n Visible\r\n </span>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"skill.notes\">{{ skill.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\"\r\n [formGroup]=\"tab.at(0)\" class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Self Ability Rating</label>\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=\"sk-edit-field\">\r\n <label class=\"sk-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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\"></ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Skills Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Skills</h3>\r\n <p class=\"step-card-subtitle\">Select your skill areas and rate your proficiency</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Select skills -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-section-label\">Select Skill Areas</div>\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=\"add\" 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\">Please Enter Skillsets Name</div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\">\r\n <div class=\"skill-chips\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '120px'} : {}\">\r\n <label class=\"skill-chip\" *ngFor=\"let skill of skillSets\"\r\n [class.selected]=\"skill.selected\"\r\n [attr.for]=\"skill.id\">\r\n <input type=\"checkbox\" [checked]=\"skill.selected\"\r\n (change)=\"onSelectedSkillsets($event, skill)\"\r\n [id]=\"skill.id\" [name]=\"skill.id\" />\r\n <svg *ngIf=\"skill.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ skill.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\"\r\n *ngIf=\"tab.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Skill Details</span>\r\n <span class=\"sk-count-badge\">{{ tab.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab.controls.length > 1\" title=\"Copy these values to all skills\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.skillSetId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Description</label>\r\n <textarea placeholder=\"Describe your skill...\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"2\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Add mode -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"userSkillsPreview.length > 0 ? cancel() : back()\">\r\n <svg *ngIf=\"userSkillsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userSkillsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userSkillsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.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}.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}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#94a3b8}.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}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}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}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.skill-chips-wrapper{margin:8px 0 4px}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.skill-chip input[type=checkbox]{display:none}.skill-chip .chip-check-icon{flex-shrink:0}.skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.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}.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-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}::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}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-icon{width:32px;height:32px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:transparent;color:#64748b;border:1px solid #e2e8f0}.sk-text-btn.cancel:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:13px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#ebf2f9;color:#4077ad;border-radius:20px;font-size:11px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ebf2f9;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#4077ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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}.sk-grid,.sk-edit-row,.sk-fields-row{grid-template-columns:1fr}}\n"] }]
|
|
8007
8018
|
}], ctorParameters: () => [{ type: SkillSetService }, { type: UserSkillSetService }, { type: UserService }, { type: i8.UntypedFormBuilder }, { type: UtilsService }, { type: i1$1.RoleContextService }, { type: CredentialingStore }, { type: i1$1.TokenService }], propDecorators: { providerId: [{
|
|
8008
8019
|
type: Input
|
|
8009
8020
|
}], providerName: [{
|
|
@@ -8196,7 +8207,13 @@ class LicensesComponent {
|
|
|
8196
8207
|
this.fileChanged = false;
|
|
8197
8208
|
this.fileData = null;
|
|
8198
8209
|
this.editingIndex = index;
|
|
8199
|
-
this.
|
|
8210
|
+
this.searchControl.setValue('', { emitEvent: false });
|
|
8211
|
+
if (data.documentTypeId?.startsWith('manual-')) {
|
|
8212
|
+
this.documentTypes = [{ id: data.documentTypeId, type: data.documentTypeName }];
|
|
8213
|
+
}
|
|
8214
|
+
else {
|
|
8215
|
+
this.loadDocumentTypesDefault();
|
|
8216
|
+
}
|
|
8200
8217
|
}
|
|
8201
8218
|
delete(index) {
|
|
8202
8219
|
const exp = this.workStore.getExperience(index);
|
|
@@ -8442,6 +8459,8 @@ class LicensesComponent {
|
|
|
8442
8459
|
this.fileName = '';
|
|
8443
8460
|
this.selectedDocumentId = null;
|
|
8444
8461
|
this.selectedDocumentName = null;
|
|
8462
|
+
this.searchControl.setValue('', { emitEvent: false });
|
|
8463
|
+
this.loadDocumentTypesDefault();
|
|
8445
8464
|
}
|
|
8446
8465
|
addManualDocumentType() {
|
|
8447
8466
|
const name = (this.searchControl.value || '').trim();
|
|
@@ -8465,11 +8484,11 @@ class LicensesComponent {
|
|
|
8465
8484
|
this.fileName = '';
|
|
8466
8485
|
}
|
|
8467
8486
|
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 });
|
|
8468
|
-
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 *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Licenses</h3>\r\n <p class=\"step-card-subtitle\">Recommended for your role</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">License Type</div>\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 <div class=\"doc-type-chips\">\r\n <label class=\"doc-type-chip\" *ngFor=\"let item of documentTypes\"\r\n [class.selected]=\"isChecked(item.id)\"\r\n [attr.for]=\"'doc_' + item.id\">\r\n <input type=\"checkbox\" [id]=\"'doc_' + item.id\" [checked]=\"isChecked(item.id)\"\r\n (change)=\"toggleSelection(item, $event)\" />\r\n <svg *ngIf=\"isChecked(item.id)\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ item.type }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"certificateForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">License Details</div>\r\n <div class=\"row\">\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 <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 <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\">{{ item.stateName }}</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>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Dates</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, isAnimated: true,\r\n 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 <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 </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Additional Notes</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Comments or additional notes\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\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\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">License has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Licenses</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} license{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-grid\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"cred-card\">\r\n <div class=\"cred-card-accent cred-card-accent--license\"></div>\r\n <div class=\"cred-card-body\">\r\n <div class=\"cred-head\">\r\n <div class=\"cred-icon cred-icon--license\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16\"/></svg>\r\n </div>\r\n <div class=\"cred-title-block\">\r\n <span class=\"cred-name\">{{ exp.documentTypeName }}</span>\r\n <span class=\"cred-issuer\" *ngIf=\"exp.issuedBy\">{{ exp.issuedBy }}</span>\r\n </div>\r\n <div class=\"cred-top-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-meta-row\" *ngIf=\"exp.number || exp.issuedState\">\r\n <span class=\"chip chip-number\" *ngIf=\"exp.number\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/></svg>\r\n {{ exp.number }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.issuedState\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.issuedState | stateName }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"cred-dates\">\r\n <div class=\"cred-date-item\" *ngIf=\"exp.issueDate\">\r\n <span class=\"cred-date-label\">Issued</span>\r\n <span class=\"chip chip-date\">{{ exp.issueDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n <div class=\"cred-date-sep\" *ngIf=\"exp.issueDate && exp.expiryDate\">\u2192</div>\r\n <div class=\"cred-date-item\" *ngIf=\"exp.expiryDate\">\r\n <span class=\"cred-date-label\">Expires</span>\r\n <span class=\"chip chip-expiry\">{{ exp.expiryDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n </div>\r\n\r\n <p class=\"tc-description\" *ngIf=\"exp.notes\">{{ exp.notes }}</p>\r\n\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.icon-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:28px}.cred-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .18s ease,transform .18s ease}.cred-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.cred-card-accent{width:4px;background:#4077ad;flex-shrink:0}.cred-card-accent--license{background:#7c3aed}.cred-card-body{flex:1;padding:15px 16px;min-width:0}.cred-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.cred-icon{width:34px;height:34px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cred-icon--license{background:#f3f0ff;color:#7c3aed}.cred-title-block{flex:1;min-width:0}.cred-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-issuer{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-top-actions{display:flex;gap:2px;flex-shrink:0}.cred-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.cred-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.cred-date-item{display:flex;flex-direction:column;gap:2px}.cred-date-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}.cred-date-sep{font-size:12px;color:#94a3b8;align-self:flex-end;padding-bottom:3px}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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" }] });
|
|
8487
|
+
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 *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Licenses</h3>\r\n <p class=\"step-card-subtitle\">Recommended for your role</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">License Type</div>\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 <div class=\"doc-type-chips\">\r\n <label class=\"doc-type-chip\" *ngFor=\"let item of documentTypes\"\r\n [class.selected]=\"isChecked(item.id)\"\r\n [attr.for]=\"'doc_' + item.id\">\r\n <input type=\"checkbox\" [id]=\"'doc_' + item.id\" [checked]=\"isChecked(item.id)\"\r\n (change)=\"toggleSelection(item, $event)\" />\r\n <svg *ngIf=\"isChecked(item.id)\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ item.type }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"certificateForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">License Details</div>\r\n <div class=\"row\">\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 <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 <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\">{{ item.stateName }}</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>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Dates</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, isAnimated: true,\r\n 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 <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 </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Additional Notes</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Comments or additional notes\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\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\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">License has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Licenses</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} license{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-grid\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"cred-card\">\r\n <div class=\"cred-card-accent cred-card-accent--license\"></div>\r\n <div class=\"cred-card-body\">\r\n <div class=\"cred-head\">\r\n <div class=\"cred-icon cred-icon--license\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16\"/></svg>\r\n </div>\r\n <div class=\"cred-title-block\">\r\n <span class=\"cred-name\">{{ exp.documentTypeName }}</span>\r\n <span class=\"cred-issuer\" *ngIf=\"exp.issuedBy\">{{ exp.issuedBy }}</span>\r\n </div>\r\n <div class=\"cred-top-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-meta-row\" *ngIf=\"exp.number || exp.issuedState\">\r\n <span class=\"chip chip-number\" *ngIf=\"exp.number\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/></svg>\r\n {{ exp.number }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.issuedState\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.issuedState | stateName }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"cred-dates\">\r\n <div class=\"cred-date-item\" *ngIf=\"exp.issueDate\">\r\n <span class=\"cred-date-label\">Issued</span>\r\n <span class=\"chip chip-date\">{{ exp.issueDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n <div class=\"cred-date-sep\" *ngIf=\"exp.issueDate && exp.expiryDate\">\u2192</div>\r\n <div class=\"cred-date-item\" *ngIf=\"exp.expiryDate\">\r\n <span class=\"cred-date-label\">Expires</span>\r\n <span class=\"chip chip-expiry\">{{ exp.expiryDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n </div>\r\n\r\n <p class=\"tc-description\" *ngIf=\"exp.notes\">{{ exp.notes }}</p>\r\n\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.cred-grid{display:grid;gap:14px;margin-bottom:28px}.cred-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .18s ease,transform .18s ease}.cred-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.cred-card-accent{width:4px;background:#4077ad;flex-shrink:0}.cred-card-accent--license{background:#7c3aed}.cred-card-body{flex:1;padding:15px 16px;min-width:0}.cred-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.cred-icon{width:34px;height:34px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cred-icon--license{background:#f3f0ff;color:#7c3aed}.cred-title-block{flex:1;min-width:0}.cred-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-issuer{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-top-actions{display:flex;gap:2px;flex-shrink:0}.cred-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.cred-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.cred-date-item{display:flex;flex-direction:column;gap:2px}.cred-date-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}.cred-date-sep{font-size:12px;color:#94a3b8;align-self:flex-end;padding-bottom:3px}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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" }] });
|
|
8469
8488
|
}
|
|
8470
8489
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, decorators: [{
|
|
8471
8490
|
type: Component,
|
|
8472
|
-
args: [{ selector: 'app-licenses', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Licenses</h3>\r\n <p class=\"step-card-subtitle\">Recommended for your role</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">License Type</div>\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 <div class=\"doc-type-chips\">\r\n <label class=\"doc-type-chip\" *ngFor=\"let item of documentTypes\"\r\n [class.selected]=\"isChecked(item.id)\"\r\n [attr.for]=\"'doc_' + item.id\">\r\n <input type=\"checkbox\" [id]=\"'doc_' + item.id\" [checked]=\"isChecked(item.id)\"\r\n (change)=\"toggleSelection(item, $event)\" />\r\n <svg *ngIf=\"isChecked(item.id)\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ item.type }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"certificateForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">License Details</div>\r\n <div class=\"row\">\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 <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 <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\">{{ item.stateName }}</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>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Dates</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, isAnimated: true,\r\n 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 <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 </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Additional Notes</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Comments or additional notes\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\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\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">License has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Licenses</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} license{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-grid\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"cred-card\">\r\n <div class=\"cred-card-accent cred-card-accent--license\"></div>\r\n <div class=\"cred-card-body\">\r\n <div class=\"cred-head\">\r\n <div class=\"cred-icon cred-icon--license\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16\"/></svg>\r\n </div>\r\n <div class=\"cred-title-block\">\r\n <span class=\"cred-name\">{{ exp.documentTypeName }}</span>\r\n <span class=\"cred-issuer\" *ngIf=\"exp.issuedBy\">{{ exp.issuedBy }}</span>\r\n </div>\r\n <div class=\"cred-top-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-meta-row\" *ngIf=\"exp.number || exp.issuedState\">\r\n <span class=\"chip chip-number\" *ngIf=\"exp.number\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/></svg>\r\n {{ exp.number }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.issuedState\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.issuedState | stateName }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"cred-dates\">\r\n <div class=\"cred-date-item\" *ngIf=\"exp.issueDate\">\r\n <span class=\"cred-date-label\">Issued</span>\r\n <span class=\"chip chip-date\">{{ exp.issueDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n <div class=\"cred-date-sep\" *ngIf=\"exp.issueDate && exp.expiryDate\">\u2192</div>\r\n <div class=\"cred-date-item\" *ngIf=\"exp.expiryDate\">\r\n <span class=\"cred-date-label\">Expires</span>\r\n <span class=\"chip chip-expiry\">{{ exp.expiryDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n </div>\r\n\r\n <p class=\"tc-description\" *ngIf=\"exp.notes\">{{ exp.notes }}</p>\r\n\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.icon-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:28px}.cred-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .18s ease,transform .18s ease}.cred-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.cred-card-accent{width:4px;background:#4077ad;flex-shrink:0}.cred-card-accent--license{background:#7c3aed}.cred-card-body{flex:1;padding:15px 16px;min-width:0}.cred-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.cred-icon{width:34px;height:34px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cred-icon--license{background:#f3f0ff;color:#7c3aed}.cred-title-block{flex:1;min-width:0}.cred-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-issuer{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-top-actions{display:flex;gap:2px;flex-shrink:0}.cred-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.cred-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.cred-date-item{display:flex;flex-direction:column;gap:2px}.cred-date-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}.cred-date-sep{font-size:12px;color:#94a3b8;align-self:flex-end;padding-bottom:3px}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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"] }]
|
|
8491
|
+
args: [{ selector: 'app-licenses', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Licenses</h3>\r\n <p class=\"step-card-subtitle\">Recommended for your role</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">License Type</div>\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 <div class=\"doc-type-chips\">\r\n <label class=\"doc-type-chip\" *ngFor=\"let item of documentTypes\"\r\n [class.selected]=\"isChecked(item.id)\"\r\n [attr.for]=\"'doc_' + item.id\">\r\n <input type=\"checkbox\" [id]=\"'doc_' + item.id\" [checked]=\"isChecked(item.id)\"\r\n (change)=\"toggleSelection(item, $event)\" />\r\n <svg *ngIf=\"isChecked(item.id)\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ item.type }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"certificateForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">License Details</div>\r\n <div class=\"row\">\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 <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 <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\">{{ item.stateName }}</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>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Dates</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, isAnimated: true,\r\n 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 <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 </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Additional Notes</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Comments or additional notes\" formControlName=\"notes\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\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\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">License has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Licenses</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} license{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-grid\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"cred-card\">\r\n <div class=\"cred-card-accent cred-card-accent--license\"></div>\r\n <div class=\"cred-card-body\">\r\n <div class=\"cred-head\">\r\n <div class=\"cred-icon cred-icon--license\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"/><path d=\"M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16\"/></svg>\r\n </div>\r\n <div class=\"cred-title-block\">\r\n <span class=\"cred-name\">{{ exp.documentTypeName }}</span>\r\n <span class=\"cred-issuer\" *ngIf=\"exp.issuedBy\">{{ exp.issuedBy }}</span>\r\n </div>\r\n <div class=\"cred-top-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cred-meta-row\" *ngIf=\"exp.number || exp.issuedState\">\r\n <span class=\"chip chip-number\" *ngIf=\"exp.number\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/></svg>\r\n {{ exp.number }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.issuedState\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.issuedState | stateName }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"cred-dates\">\r\n <div class=\"cred-date-item\" *ngIf=\"exp.issueDate\">\r\n <span class=\"cred-date-label\">Issued</span>\r\n <span class=\"chip chip-date\">{{ exp.issueDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n <div class=\"cred-date-sep\" *ngIf=\"exp.issueDate && exp.expiryDate\">\u2192</div>\r\n <div class=\"cred-date-item\" *ngIf=\"exp.expiryDate\">\r\n <span class=\"cred-date-label\">Expires</span>\r\n <span class=\"chip chip-expiry\">{{ exp.expiryDate | date:'MMM d, yyyy' }}</span>\r\n </div>\r\n </div>\r\n\r\n <p class=\"tc-description\" *ngIf=\"exp.notes\">{{ exp.notes }}</p>\r\n\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.cred-grid{display:grid;gap:14px;margin-bottom:28px}.cred-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .18s ease,transform .18s ease}.cred-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.cred-card-accent{width:4px;background:#4077ad;flex-shrink:0}.cred-card-accent--license{background:#7c3aed}.cred-card-body{flex:1;padding:15px 16px;min-width:0}.cred-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.cred-icon{width:34px;height:34px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cred-icon--license{background:#f3f0ff;color:#7c3aed}.cred-title-block{flex:1;min-width:0}.cred-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-issuer{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cred-top-actions{display:flex;gap:2px;flex-shrink:0}.cred-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.cred-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.cred-date-item{display:flex;flex-direction:column;gap:2px}.cred-date-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8}.cred-date-sep{font-size:12px;color:#94a3b8;align-self:flex-end;padding-bottom:3px}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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"] }]
|
|
8473
8492
|
}], 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: [{
|
|
8474
8493
|
type: Input
|
|
8475
8494
|
}], providerName: [{
|
|
@@ -9069,7 +9088,7 @@ class ToolsComponent {
|
|
|
9069
9088
|
});
|
|
9070
9089
|
}
|
|
9071
9090
|
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 });
|
|
9072
|
-
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: "<!-- \u2500\u2500\u2500 Tools Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Tools & Equipment</h3>\r\n <p class=\"preview-subtitle\">{{ userToolsPreview.length }} tool{{ userToolsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let tool of userToolsPreview; let i = index\" class=\"sk-card sk-card--tool\">\r\n <div class=\"sk-card-accent sk-card-accent--tool\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-icon sk-icon--tool\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"/>\r\n </svg>\r\n </div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ tool.toolName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"tool.providerName\">{{ tool.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backTool(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserTools()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editToolFromPreview(tool, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteToolFromPreview(tool, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"sk-meta-row\">\r\n <span class=\"chip chip-year\" *ngIf=\"tool.year\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></svg>\r\n {{ tool.year }} yr(s)\r\n </span>\r\n <span class=\"chip chip-make\" *ngIf=\"tool.make\">{{ tool.make }}</span>\r\n <span class=\"chip chip-model\" *ngIf=\"tool.model\">{{ tool.model }}</span>\r\n <span class=\"chip chip-serial\" *ngIf=\"tool.serialNumber\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/></svg>\r\n {{ tool.serialNumber }}\r\n </span>\r\n <span class=\"chip chip-visible\" *ngIf=\"tool.profileVisibility\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\r\n Active\r\n </span>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"tool.notes\">{{ tool.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-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=\"sk-edit-field\">\r\n <label class=\"sk-label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\"\r\n formControlName=\"year\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Active</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"model\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"serialNumber\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Tools Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Tools & Equipment</h3>\r\n <p class=\"step-card-subtitle\">Manage specialty tools and equipment</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Search + select tools -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-section-label\">Select Tools</div>\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=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\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 *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"tool-chips-wrapper\" [ngClass]=\"showLoading ? 'loader' : ''\">\r\n <div class=\"tool-chips\" [ngStyle]=\"showLoader ? {'min-height': '120px'} : {}\">\r\n <label class=\"tool-chip\" *ngFor=\"let Tool of tools\"\r\n [class.selected]=\"Tool.selected\"\r\n [attr.for]=\"Tool.id\">\r\n <input type=\"checkbox\" [checked]=\"Tool.selected\"\r\n (change)=\"onSelectedTools($event, Tool)\"\r\n [id]=\"Tool.id\" [name]=\"Tool.id\" />\r\n <svg *ngIf=\"Tool.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ Tool.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 2: Per-tool detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\"\r\n *ngIf=\"tab?.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Tool Details</span>\r\n <span class=\"sk-count-badge\">{{ tab?.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab?.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar sk-detail-avatar--tool\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"/></svg>\r\n </div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab?.controls.length > 1\" title=\"Copy these values to all tools\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value, false)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.toolId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.year.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\"\r\n placeholder=\"Select\"></ng-select>\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"e.g. Fluke, Bosch...\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Model name / number\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Serial / asset number\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Comment</label>\r\n <textarea placeholder=\"Additional notes about this tool...\" formControlName=\"notes\"\r\n class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.notes.errors }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback is-invalid d-block\">\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\r\n<!-- Footer: Add mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"userToolsPreview.length > 0 ? cancel() : goBack()\">\r\n <svg *ngIf=\"userToolsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userToolsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userToolsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mob-view\">\r\n <button (click)=\"onToolContinue()\" [ng2-loading]=\"showLoader\" [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add\r\n </button>\r\n <button *ngIf=\"userToolsPreview.length === 0\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n (click)=\"openDashboardModal()\" class=\"float-end save-btn ms-2\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() !== 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"goBack()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\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>\r\n", styles: [".tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.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 .tool-chips-wrapper{margin:8px 0 4px}.content-part .tool-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.content-part .tool-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.content-part .tool-chip input[type=checkbox]{display:none}.content-part .tool-chip .chip-check-icon{flex-shrink:0}.content-part .tool-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.content-part .tool-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.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}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#fff7ed;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-accent--tool{background:#d97706}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-icon{width:32px;height:32px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sk-icon--tool{background:#fff7ed;color:#d97706}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:transparent;color:#64748b;border:1px solid #e2e8f0}.sk-text-btn.cancel:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:13px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#fff7ed;color:#d97706;border-radius:20px;font-size:11px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff7ed;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#d97706;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-avatar--tool{background:#d97706}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#92400e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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}.sk-grid,.sk-edit-row,.sk-fields-row{grid-template-columns:1fr}}.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"] }], animations: [
|
|
9091
|
+
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: "<!-- \u2500\u2500\u2500 Tools Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Tools & Equipment</h3>\r\n <p class=\"preview-subtitle\">{{ userToolsPreview.length }} tool{{ userToolsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let tool of userToolsPreview; let i = index\" class=\"sk-card sk-card--tool\">\r\n <div class=\"sk-card-accent sk-card-accent--tool\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-icon sk-icon--tool\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"/>\r\n </svg>\r\n </div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ tool.toolName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"tool.providerName\">{{ tool.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backTool(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserTools()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editToolFromPreview(tool, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteToolFromPreview(tool, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"sk-meta-row\">\r\n <span class=\"chip chip-year\" *ngIf=\"tool.year\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></svg>\r\n {{ tool.year }} yr(s)\r\n </span>\r\n <span class=\"chip chip-make\" *ngIf=\"tool.make\">{{ tool.make }}</span>\r\n <span class=\"chip chip-model\" *ngIf=\"tool.model\">{{ tool.model }}</span>\r\n <span class=\"chip chip-serial\" *ngIf=\"tool.serialNumber\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/></svg>\r\n {{ tool.serialNumber }}\r\n </span>\r\n <span class=\"chip chip-visible\" *ngIf=\"tool.profileVisibility\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\r\n Active\r\n </span>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"tool.notes\">{{ tool.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-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=\"sk-edit-field\">\r\n <label class=\"sk-label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\"\r\n formControlName=\"year\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Active</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"model\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"serialNumber\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Tools Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Tools & Equipment</h3>\r\n <p class=\"step-card-subtitle\">Manage specialty tools and equipment</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Search + select tools -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-section-label\">Select Tools</div>\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=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\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 *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"tool-chips-wrapper\" [ngClass]=\"showLoading ? 'loader' : ''\">\r\n <div class=\"tool-chips\" [ngStyle]=\"showLoader ? {'min-height': '120px'} : {}\">\r\n <label class=\"tool-chip\" *ngFor=\"let Tool of tools\"\r\n [class.selected]=\"Tool.selected\"\r\n [attr.for]=\"Tool.id\">\r\n <input type=\"checkbox\" [checked]=\"Tool.selected\"\r\n (change)=\"onSelectedTools($event, Tool)\"\r\n [id]=\"Tool.id\" [name]=\"Tool.id\" />\r\n <svg *ngIf=\"Tool.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ Tool.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 2: Per-tool detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\"\r\n *ngIf=\"tab?.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Tool Details</span>\r\n <span class=\"sk-count-badge\">{{ tab?.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab?.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar sk-detail-avatar--tool\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"/></svg>\r\n </div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab?.controls.length > 1\" title=\"Copy these values to all tools\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value, false)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.toolId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.year.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\"\r\n placeholder=\"Select\" [appendTo]=\"'body'\"></ng-select>\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"e.g. Fluke, Bosch...\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Model name / number\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Serial / asset number\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Comment</label>\r\n <textarea placeholder=\"Additional notes about this tool...\" formControlName=\"notes\"\r\n class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.notes.errors }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback is-invalid d-block\">\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\r\n<!-- Footer: Add mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"userToolsPreview.length > 0 ? cancel() : goBack()\">\r\n <svg *ngIf=\"userToolsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userToolsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userToolsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mob-view\">\r\n <button (click)=\"onToolContinue()\" [ng2-loading]=\"showLoader\" [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add\r\n </button>\r\n <button *ngIf=\"userToolsPreview.length === 0\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n (click)=\"openDashboardModal()\" class=\"float-end save-btn ms-2\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() !== 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"goBack()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\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>\r\n", styles: [".tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.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}.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}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#94a3b8}.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}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}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}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.tool-chips-wrapper{margin:8px 0 4px}.tool-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.tool-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.tool-chip input[type=checkbox]{display:none}.tool-chip .chip-check-icon{flex-shrink:0}.tool-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.tool-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.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}.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}::ng-deep .ng-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#fff7ed;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-accent--tool{background:#d97706}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-icon{width:32px;height:32px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sk-icon--tool{background:#fff7ed;color:#d97706}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:transparent;color:#64748b;border:1px solid #e2e8f0}.sk-text-btn.cancel:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:13px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#fff7ed;color:#d97706;border-radius:20px;font-size:11px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff7ed;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#d97706;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-avatar--tool{background:#d97706}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#92400e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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}.sk-grid,.sk-edit-row,.sk-fields-row{grid-template-columns:1fr}}.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"] }], animations: [
|
|
9073
9092
|
trigger('expandCollapse', [
|
|
9074
9093
|
state('open', style({
|
|
9075
9094
|
height: '*',
|
|
@@ -9107,7 +9126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
9107
9126
|
})),
|
|
9108
9127
|
transition('open <=> closed', animate('300ms ease'))
|
|
9109
9128
|
])
|
|
9110
|
-
], template: "<!-- \u2500\u2500\u2500 Tools Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Tools & Equipment</h3>\r\n <p class=\"preview-subtitle\">{{ userToolsPreview.length }} tool{{ userToolsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let tool of userToolsPreview; let i = index\" class=\"sk-card sk-card--tool\">\r\n <div class=\"sk-card-accent sk-card-accent--tool\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-icon sk-icon--tool\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"/>\r\n </svg>\r\n </div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ tool.toolName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"tool.providerName\">{{ tool.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backTool(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserTools()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editToolFromPreview(tool, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteToolFromPreview(tool, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"sk-meta-row\">\r\n <span class=\"chip chip-year\" *ngIf=\"tool.year\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></svg>\r\n {{ tool.year }} yr(s)\r\n </span>\r\n <span class=\"chip chip-make\" *ngIf=\"tool.make\">{{ tool.make }}</span>\r\n <span class=\"chip chip-model\" *ngIf=\"tool.model\">{{ tool.model }}</span>\r\n <span class=\"chip chip-serial\" *ngIf=\"tool.serialNumber\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/></svg>\r\n {{ tool.serialNumber }}\r\n </span>\r\n <span class=\"chip chip-visible\" *ngIf=\"tool.profileVisibility\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\r\n Active\r\n </span>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"tool.notes\">{{ tool.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-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=\"sk-edit-field\">\r\n <label class=\"sk-label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\"\r\n formControlName=\"year\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Active</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"model\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"serialNumber\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Tools Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Tools & Equipment</h3>\r\n <p class=\"step-card-subtitle\">Manage specialty tools and equipment</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Search + select tools -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-section-label\">Select Tools</div>\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=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\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 *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"tool-chips-wrapper\" [ngClass]=\"showLoading ? 'loader' : ''\">\r\n <div class=\"tool-chips\" [ngStyle]=\"showLoader ? {'min-height': '120px'} : {}\">\r\n <label class=\"tool-chip\" *ngFor=\"let Tool of tools\"\r\n [class.selected]=\"Tool.selected\"\r\n [attr.for]=\"Tool.id\">\r\n <input type=\"checkbox\" [checked]=\"Tool.selected\"\r\n (change)=\"onSelectedTools($event, Tool)\"\r\n [id]=\"Tool.id\" [name]=\"Tool.id\" />\r\n <svg *ngIf=\"Tool.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ Tool.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 2: Per-tool detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\"\r\n *ngIf=\"tab?.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Tool Details</span>\r\n <span class=\"sk-count-badge\">{{ tab?.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab?.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar sk-detail-avatar--tool\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"/></svg>\r\n </div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab?.controls.length > 1\" title=\"Copy these values to all tools\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value, false)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.toolId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.year.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\"\r\n placeholder=\"Select\"></ng-select>\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"e.g. Fluke, Bosch...\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Model name / number\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Serial / asset number\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Comment</label>\r\n <textarea placeholder=\"Additional notes about this tool...\" formControlName=\"notes\"\r\n class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.notes.errors }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback is-invalid d-block\">\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\r\n<!-- Footer: Add mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"userToolsPreview.length > 0 ? cancel() : goBack()\">\r\n <svg *ngIf=\"userToolsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userToolsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userToolsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mob-view\">\r\n <button (click)=\"onToolContinue()\" [ng2-loading]=\"showLoader\" [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add\r\n </button>\r\n <button *ngIf=\"userToolsPreview.length === 0\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n (click)=\"openDashboardModal()\" class=\"float-end save-btn ms-2\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() !== 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"goBack()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\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>\r\n", styles: [".tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.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 .tool-chips-wrapper{margin:8px 0 4px}.content-part .tool-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.content-part .tool-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.content-part .tool-chip input[type=checkbox]{display:none}.content-part .tool-chip .chip-check-icon{flex-shrink:0}.content-part .tool-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.content-part .tool-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.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}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#fff7ed;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-accent--tool{background:#d97706}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-icon{width:32px;height:32px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sk-icon--tool{background:#fff7ed;color:#d97706}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:transparent;color:#64748b;border:1px solid #e2e8f0}.sk-text-btn.cancel:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:13px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#fff7ed;color:#d97706;border-radius:20px;font-size:11px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff7ed;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#d97706;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-avatar--tool{background:#d97706}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#92400e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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}.sk-grid,.sk-edit-row,.sk-fields-row{grid-template-columns:1fr}}.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"] }]
|
|
9129
|
+
], template: "<!-- \u2500\u2500\u2500 Tools Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Tools & Equipment</h3>\r\n <p class=\"preview-subtitle\">{{ userToolsPreview.length }} tool{{ userToolsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let tool of userToolsPreview; let i = index\" class=\"sk-card sk-card--tool\">\r\n <div class=\"sk-card-accent sk-card-accent--tool\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-icon sk-icon--tool\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"/>\r\n </svg>\r\n </div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ tool.toolName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"tool.providerName\">{{ tool.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backTool(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserTools()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editToolFromPreview(tool, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteToolFromPreview(tool, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"sk-meta-row\">\r\n <span class=\"chip chip-year\" *ngIf=\"tool.year\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></svg>\r\n {{ tool.year }} yr(s)\r\n </span>\r\n <span class=\"chip chip-make\" *ngIf=\"tool.make\">{{ tool.make }}</span>\r\n <span class=\"chip chip-model\" *ngIf=\"tool.model\">{{ tool.model }}</span>\r\n <span class=\"chip chip-serial\" *ngIf=\"tool.serialNumber\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/></svg>\r\n {{ tool.serialNumber }}\r\n </span>\r\n <span class=\"chip chip-visible\" *ngIf=\"tool.profileVisibility\">\r\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\r\n Active\r\n </span>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"tool.notes\">{{ tool.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-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=\"sk-edit-field\">\r\n <label class=\"sk-label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\"\r\n formControlName=\"year\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Active</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"model\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"serialNumber\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Tools Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Tools & Equipment</h3>\r\n <p class=\"step-card-subtitle\">Manage specialty tools and equipment</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Search + select tools -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-section-label\">Select Tools</div>\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=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\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 *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"tool-chips-wrapper\" [ngClass]=\"showLoading ? 'loader' : ''\">\r\n <div class=\"tool-chips\" [ngStyle]=\"showLoader ? {'min-height': '120px'} : {}\">\r\n <label class=\"tool-chip\" *ngFor=\"let Tool of tools\"\r\n [class.selected]=\"Tool.selected\"\r\n [attr.for]=\"Tool.id\">\r\n <input type=\"checkbox\" [checked]=\"Tool.selected\"\r\n (change)=\"onSelectedTools($event, Tool)\"\r\n [id]=\"Tool.id\" [name]=\"Tool.id\" />\r\n <svg *ngIf=\"Tool.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n {{ Tool.name }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 2: Per-tool detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\"\r\n *ngIf=\"tab?.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Tool Details</span>\r\n <span class=\"sk-count-badge\">{{ tab?.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab?.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar sk-detail-avatar--tool\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"/></svg>\r\n </div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab?.controls.length > 1\" title=\"Copy these values to all tools\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value, false)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.toolId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Years of Experience</label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.year.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\"\r\n placeholder=\"Select\" [appendTo]=\"'body'\"></ng-select>\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"e.g. Fluke, Bosch...\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Model name / number\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Serial / asset number\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Comment</label>\r\n <textarea placeholder=\"Additional notes about this tool...\" formControlName=\"notes\"\r\n class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.notes.errors }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback is-invalid d-block\">\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\r\n<!-- Footer: Add mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"userToolsPreview.length > 0 ? cancel() : goBack()\">\r\n <svg *ngIf=\"userToolsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userToolsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userToolsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mob-view\">\r\n <button (click)=\"onToolContinue()\" [ng2-loading]=\"showLoader\" [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add\r\n </button>\r\n <button *ngIf=\"userToolsPreview.length === 0\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n (click)=\"openDashboardModal()\" class=\"float-end save-btn ms-2\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() !== 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"goBack()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\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>\r\n", styles: [".tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.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}.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}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#94a3b8}.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}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}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}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.tool-chips-wrapper{margin:8px 0 4px}.tool-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.tool-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.tool-chip input[type=checkbox]{display:none}.tool-chip .chip-check-icon{flex-shrink:0}.tool-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.tool-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.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}.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}::ng-deep .ng-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#fff7ed;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-accent--tool{background:#d97706}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-icon{width:32px;height:32px;border-radius:8px;background:#ebf2f9;color:#4077ad;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sk-icon--tool{background:#fff7ed;color:#d97706}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:13px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:11px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:transparent;color:#64748b;border:1px solid #e2e8f0}.sk-text-btn.cancel:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:13px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#fff7ed;color:#d97706;border-radius:20px;font-size:11px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff7ed;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#d97706;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-avatar--tool{background:#d97706}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#92400e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@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}.sk-grid,.sk-edit-row,.sk-fields-row{grid-template-columns:1fr}}.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"] }]
|
|
9111
9130
|
}], 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: [{
|
|
9112
9131
|
type: Inject,
|
|
9113
9132
|
args: [LIBRARY_CONFIG]
|
|
@@ -9448,6 +9467,7 @@ class RoleSelectComponent {
|
|
|
9448
9467
|
this.logo.logoId = result.fileId;
|
|
9449
9468
|
this.logo.logoUrl = result.publicUrl;
|
|
9450
9469
|
this.logo.logoFileName = result.fileName;
|
|
9470
|
+
this.fileDataCompany = null;
|
|
9451
9471
|
}
|
|
9452
9472
|
else {
|
|
9453
9473
|
this.showLoader = false;
|
|
@@ -9778,6 +9798,7 @@ class RoleSelectComponent {
|
|
|
9778
9798
|
fileId: res?.[0]?.fileId,
|
|
9779
9799
|
isActive: true,
|
|
9780
9800
|
});
|
|
9801
|
+
this.fileData = null;
|
|
9781
9802
|
this.previewresumeUrl = this.model.fileUrl;
|
|
9782
9803
|
console.log(this.previewresumeUrl);
|
|
9783
9804
|
console.log(this.previewUrl);
|
|
@@ -9884,6 +9905,7 @@ class RoleSelectComponent {
|
|
|
9884
9905
|
}
|
|
9885
9906
|
this.user.headshotFileId = result.fileId;
|
|
9886
9907
|
this.user.headshotUrl = result.publicUrl;
|
|
9908
|
+
this.fileDataUser = null;
|
|
9887
9909
|
if (this.user?.headshotUrl) {
|
|
9888
9910
|
this.previewUrl = this.user.headshotUrl;
|
|
9889
9911
|
console.log(this.previewUrl);
|
|
@@ -33126,11 +33148,11 @@ class WorkexperienceComponent {
|
|
|
33126
33148
|
this.fileName = '';
|
|
33127
33149
|
}
|
|
33128
33150
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, deps: [{ token: UserExperienceService }, { token: UserService }, { token: WorkExperienceStore }, { token: CredentialingStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i1$1.TokenService }, { token: i1$1.RoleContextService }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
|
|
33129
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Work Experience</h3>\r\n <p class=\"step-card-subtitle\">Add your prior and current work history below</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n <form [formGroup]=\"workexperienceForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Basic Information</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Location & Timeline</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select 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\">{{ item.stateName }}</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 form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Job Description</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Describe your role and responsibilities\" formControlName=\"jobDescription\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (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 class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">Work experience has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Work Experience</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} record{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"preview-timeline\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index; let last = last\"\r\n class=\"timeline-entry\" [class.last]=\"last\">\r\n <div class=\"timeline-track\">\r\n <div class=\"timeline-dot\"></div>\r\n <div class=\"timeline-line\" *ngIf=\"!last\"></div>\r\n </div>\r\n <div class=\"timeline-card\">\r\n <div class=\"tc-head\">\r\n <div class=\"tc-avatar\">{{ (exp.companyName || exp.jobTitle || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"tc-title-block\">\r\n <span class=\"tc-title\">{{ exp.jobTitle }}</span>\r\n <span class=\"tc-subtitle\">{{ exp.companyName }}</span>\r\n </div>\r\n <div class=\"tc-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"tc-chips\">\r\n <span class=\"chip chip-date\" *ngIf=\"exp.fromDate || exp.toDate\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>\r\n {{ exp.fromDate | date:'MMM yyyy' }}{{ exp.toDate ? ' \u2013 ' + (exp.toDate | date:'MMM yyyy') : ' \u2013 Present' }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.city || exp.state\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.city }}{{ exp.city && (exp.state | stateName) ? ', ' : '' }}{{ exp.state | stateName }}\r\n </span>\r\n <span class=\"chip chip-country\" *ngIf=\"exp.country\">{{ exp.country }}</span>\r\n </div>\r\n <p class=\"tc-description\" *ngIf=\"exp.jobDescription\">{{ exp.jobDescription }}</p>\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".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}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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,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:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.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 0 20px}.action{display:flex;justify-content:space-between;margin:24px 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}.work-preview{max-width:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.preview-timeline{display:flex;flex-direction:column;margin-bottom:28px}.timeline-entry{display:flex}.timeline-entry.last .timeline-line{display:none}.timeline-track{display:flex;flex-direction:column;align-items:center;width:28px;flex-shrink:0;padding-top:22px}.timeline-dot{width:11px;height:11px;border-radius:50%;background:#4077ad;box-shadow:0 0 0 3px #ebf2f9;flex-shrink:0;z-index:1}.timeline-line{width:2px;flex:1;min-height:20px;background:linear-gradient(to bottom,#4077ad,#e2e8f0);margin-top:5px}.timeline-card{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin:0 0 14px 14px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.timeline-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.tc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.tc-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.tc-title-block{flex:1;min-width:0}.tc-title{display:block;font-size:14px;font-weight:700;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}.tc-subtitle{display:block;font-size:12px;color:#64748b;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-actions{display:flex;gap:2px;flex-shrink:0;margin-top:-2px}.icon-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.tc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-type{background:#faf5ff;color:#7c3aed}.chip.chip-country{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media (max-width: 600px){.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}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}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.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" }] });
|
|
33151
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Work Experience</h3>\r\n <p class=\"step-card-subtitle\">Add your prior and current work history below</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n <form [formGroup]=\"workexperienceForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Basic Information</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Location & Timeline</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select 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\">{{ item.stateName }}</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 form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Job Description</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Describe your role and responsibilities\" formControlName=\"jobDescription\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (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 class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">Work experience has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Work Experience</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} record{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"preview-timeline\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index; let last = last\"\r\n class=\"timeline-entry\" [class.last]=\"last\">\r\n <div class=\"timeline-track\">\r\n <div class=\"timeline-dot\"></div>\r\n <div class=\"timeline-line\" *ngIf=\"!last\"></div>\r\n </div>\r\n <div class=\"timeline-card\">\r\n <div class=\"tc-head\">\r\n <div class=\"tc-avatar\">{{ (exp.companyName || exp.jobTitle || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"tc-title-block\">\r\n <span class=\"tc-title\">{{ exp.jobTitle }}</span>\r\n <span class=\"tc-subtitle\">{{ exp.companyName }}</span>\r\n </div>\r\n <div class=\"tc-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"tc-chips\">\r\n <span class=\"chip chip-date\" *ngIf=\"exp.fromDate || exp.toDate\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>\r\n {{ exp.fromDate | date:'MMM yyyy' }}{{ exp.toDate ? ' \u2013 ' + (exp.toDate | date:'MMM yyyy') : ' \u2013 Present' }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.city || exp.state\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.city }}{{ exp.city && (exp.state | stateName) ? ', ' : '' }}{{ exp.state | stateName }}\r\n </span>\r\n <span class=\"chip chip-country\" *ngIf=\"exp.country\">{{ exp.country }}</span>\r\n </div>\r\n <p class=\"tc-description\" *ngIf=\"exp.jobDescription\">{{ exp.jobDescription }}</p>\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".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}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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,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:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.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 0 20px}.action{display:flex;justify-content:space-between;margin:24px 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}.work-preview{max-width:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.preview-timeline{display:flex;flex-direction:column;margin-bottom:28px}.timeline-entry{display:flex}.timeline-entry.last .timeline-line{display:none}.timeline-track{display:none;flex-direction:column;align-items:center;width:28px;flex-shrink:0;padding-top:22px}.timeline-dot{width:11px;height:11px;border-radius:50%;background:#4077ad;box-shadow:0 0 0 3px #ebf2f9;flex-shrink:0;z-index:1}.timeline-line{width:2px;flex:1;min-height:20px;background:linear-gradient(to bottom,#4077ad,#e2e8f0);margin-top:5px}.timeline-card{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin:0 0 14px 14px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.timeline-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.tc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.tc-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.tc-title-block{flex:1;min-width:0}.tc-title{display:block;font-size:14px;font-weight:700;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}.tc-subtitle{display:block;font-size:12px;color:#64748b;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-actions{display:flex;gap:2px;flex-shrink:0;margin-top:-2px}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.tc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-type{background:#faf5ff;color:#7c3aed}.chip.chip-country{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media (max-width: 600px){.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}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}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.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" }] });
|
|
33130
33152
|
}
|
|
33131
33153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, decorators: [{
|
|
33132
33154
|
type: Component,
|
|
33133
|
-
args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Work Experience</h3>\r\n <p class=\"step-card-subtitle\">Add your prior and current work history below</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n <form [formGroup]=\"workexperienceForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Basic Information</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Location & Timeline</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select 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\">{{ item.stateName }}</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 form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Job Description</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Describe your role and responsibilities\" formControlName=\"jobDescription\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (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 class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">Work experience has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Work Experience</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} record{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"preview-timeline\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index; let last = last\"\r\n class=\"timeline-entry\" [class.last]=\"last\">\r\n <div class=\"timeline-track\">\r\n <div class=\"timeline-dot\"></div>\r\n <div class=\"timeline-line\" *ngIf=\"!last\"></div>\r\n </div>\r\n <div class=\"timeline-card\">\r\n <div class=\"tc-head\">\r\n <div class=\"tc-avatar\">{{ (exp.companyName || exp.jobTitle || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"tc-title-block\">\r\n <span class=\"tc-title\">{{ exp.jobTitle }}</span>\r\n <span class=\"tc-subtitle\">{{ exp.companyName }}</span>\r\n </div>\r\n <div class=\"tc-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"tc-chips\">\r\n <span class=\"chip chip-date\" *ngIf=\"exp.fromDate || exp.toDate\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>\r\n {{ exp.fromDate | date:'MMM yyyy' }}{{ exp.toDate ? ' \u2013 ' + (exp.toDate | date:'MMM yyyy') : ' \u2013 Present' }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.city || exp.state\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.city }}{{ exp.city && (exp.state | stateName) ? ', ' : '' }}{{ exp.state | stateName }}\r\n </span>\r\n <span class=\"chip chip-country\" *ngIf=\"exp.country\">{{ exp.country }}</span>\r\n </div>\r\n <p class=\"tc-description\" *ngIf=\"exp.jobDescription\">{{ exp.jobDescription }}</p>\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".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}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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,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:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.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 0 20px}.action{display:flex;justify-content:space-between;margin:24px 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}.work-preview{max-width:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.preview-timeline{display:flex;flex-direction:column;margin-bottom:28px}.timeline-entry{display:flex}.timeline-entry.last .timeline-line{display:none}.timeline-track{display:flex;flex-direction:column;align-items:center;width:28px;flex-shrink:0;padding-top:22px}.timeline-dot{width:11px;height:11px;border-radius:50%;background:#4077ad;box-shadow:0 0 0 3px #ebf2f9;flex-shrink:0;z-index:1}.timeline-line{width:2px;flex:1;min-height:20px;background:linear-gradient(to bottom,#4077ad,#e2e8f0);margin-top:5px}.timeline-card{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin:0 0 14px 14px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.timeline-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.tc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.tc-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.tc-title-block{flex:1;min-width:0}.tc-title{display:block;font-size:14px;font-weight:700;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}.tc-subtitle{display:block;font-size:12px;color:#64748b;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-actions{display:flex;gap:2px;flex-shrink:0;margin-top:-2px}.icon-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.tc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-type{background:#faf5ff;color:#7c3aed}.chip.chip-country{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media (max-width: 600px){.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}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\n"] }]
|
|
33155
|
+
args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n <div class=\"step-card\">\r\n <div class=\"step-card-header\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Work Experience</h3>\r\n <p class=\"step-card-subtitle\">Add your prior and current work history below</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"step-card-body\">\r\n <form [formGroup]=\"workexperienceForm\">\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Basic Information</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Company Name <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n workexperienceForm.get('companyName')?.hasError('required')\">\r\n Company name is required\r\n </small>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">Job Title <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n Job title is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Location & Timeline</div>\r\n <div class=\"row\">\r\n <div class=\"field\">\r\n <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n {{ item.country }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n <div class=\"field\">\r\n <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n placeholder=\"Select 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\">{{ item.stateName }}</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 form-row\">\r\n <div class=\"field\">\r\n <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n workexperienceForm.get('city')?.hasError('required')\">\r\n City is required\r\n </small>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n workexperienceForm.get('fromDate')?.hasError('required')\">\r\n Start Date is required\r\n </small>\r\n </div>\r\n </div>\r\n <div class=\"field date\">\r\n <div class=\"mb-3 head\">\r\n <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true,\r\n customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n workexperienceForm.get('toDate')?.hasError('required')\">\r\n To Date is required\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-section\">\r\n <div class=\"field-section-title\">Job Description</div>\r\n <div class=\"row\">\r\n <div class=\"field full-width\">\r\n <textarea placeholder=\"Describe your role and responsibilities\" formControlName=\"jobDescription\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <div class=\"upload-wrapper\">\r\n <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (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 class=\"actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n <svg *ngIf=\"showedit || isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"!showedit && !isAdding()\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"right-actions\">\r\n <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n class=\"secondary\" (click)=\"nextStep()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n (click)=\"saveFile()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>\r\n {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n </button>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Success Toast -->\r\n<div class=\"step-toast\" *ngIf=\"showSuccess()\">\r\n <div class=\"step-toast-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n <div class=\"step-toast-body\">\r\n <div class=\"step-toast-title\">Saved Successfully</div>\r\n <div class=\"step-toast-msg\">Work experience has been saved.</div>\r\n </div>\r\n <div class=\"step-toast-progress\"></div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Work Experience</h3>\r\n <p class=\"preview-subtitle\">{{ workStore.experiences().length }} record{{ workStore.experiences().length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"preview-timeline\">\r\n <div *ngFor=\"let exp of workStore.experiences(); let i = index; let last = last\"\r\n class=\"timeline-entry\" [class.last]=\"last\">\r\n <div class=\"timeline-track\">\r\n <div class=\"timeline-dot\"></div>\r\n <div class=\"timeline-line\" *ngIf=\"!last\"></div>\r\n </div>\r\n <div class=\"timeline-card\">\r\n <div class=\"tc-head\">\r\n <div class=\"tc-avatar\">{{ (exp.companyName || exp.jobTitle || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"tc-title-block\">\r\n <span class=\"tc-title\">{{ exp.jobTitle }}</span>\r\n <span class=\"tc-subtitle\">{{ exp.companyName }}</span>\r\n </div>\r\n <div class=\"tc-actions\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"edit(i)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"delete(i)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"tc-chips\">\r\n <span class=\"chip chip-date\" *ngIf=\"exp.fromDate || exp.toDate\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/></svg>\r\n {{ exp.fromDate | date:'MMM yyyy' }}{{ exp.toDate ? ' \u2013 ' + (exp.toDate | date:'MMM yyyy') : ' \u2013 Present' }}\r\n </span>\r\n <span class=\"chip chip-location\" *ngIf=\"exp.city || exp.state\">\r\n <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></svg>\r\n {{ exp.city }}{{ exp.city && (exp.state | stateName) ? ', ' : '' }}{{ exp.state | stateName }}\r\n </span>\r\n <span class=\"chip chip-country\" *ngIf=\"exp.country\">{{ exp.country }}</span>\r\n </div>\r\n <p class=\"tc-description\" *ngIf=\"exp.jobDescription\">{{ exp.jobDescription }}</p>\r\n <div class=\"tc-attachment\" *ngIf=\"exp.fileUrl\">\r\n <a [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\" class=\"attachment-link\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48\"/></svg>\r\n {{ exp.fileName }}\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"action\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"right-actions\">\r\n <button type=\"button\" class=\"secondary\" (click)=\"add()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\r\n Add More\r\n </button>\r\n <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".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}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}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,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:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.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 0 20px}.action{display:flex;justify-content:space-between;margin:24px 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}.work-preview{max-width:860px;padding:24px 0;margin:0 auto;background:#fff}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:13px;color:#64748b;margin:0}.preview-timeline{display:flex;flex-direction:column;margin-bottom:28px}.timeline-entry{display:flex}.timeline-entry.last .timeline-line{display:none}.timeline-track{display:none;flex-direction:column;align-items:center;width:28px;flex-shrink:0;padding-top:22px}.timeline-dot{width:11px;height:11px;border-radius:50%;background:#4077ad;box-shadow:0 0 0 3px #ebf2f9;flex-shrink:0;z-index:1}.timeline-line{width:2px;flex:1;min-height:20px;background:linear-gradient(to bottom,#4077ad,#e2e8f0);margin-top:5px}.timeline-card{flex:1;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin:0 0 14px 14px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.timeline-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.tc-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.tc-avatar{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.tc-title-block{flex:1;min-width:0}.tc-title{display:block;font-size:14px;font-weight:700;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}.tc-subtitle{display:block;font-size:12px;color:#64748b;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-actions{display:flex;gap:2px;flex-shrink:0;margin-top:-2px}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.tc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-date{background:#ebf2f9;color:#4077ad}.chip.chip-location{background:#f0fdf4;color:#15803d}.chip.chip-type{background:#faf5ff;color:#7c3aed}.chip.chip-country{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.chip.chip-number{background:#fff7ed;color:#c2410c;font-family:monospace;font-size:11px}.chip.chip-expiry{background:#fffbeb;color:#b45309}.tc-description{font-size:12px;color:#64748b;line-height:1.55;margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tc-attachment{padding-top:8px;border-top:1px solid #e2e8f0;margin-top:8px}.attachment-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#4077ad;text-decoration:none}.attachment-link:hover{text-decoration:underline}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.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}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media (max-width: 600px){.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}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\n"] }]
|
|
33134
33156
|
}], ctorParameters: () => [{ type: UserExperienceService }, { type: UserService }, { type: WorkExperienceStore }, { type: CredentialingStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i1$1.TokenService }, { type: i1$1.RoleContextService }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
|
|
33135
33157
|
type: Input
|
|
33136
33158
|
}], providerName: [{
|
|
@@ -33831,6 +33853,7 @@ class InitialProcessComponent {
|
|
|
33831
33853
|
libConfig;
|
|
33832
33854
|
signatureFileId;
|
|
33833
33855
|
signatureUrl;
|
|
33856
|
+
signatureDirty = false;
|
|
33834
33857
|
isAgreeEnabled = false;
|
|
33835
33858
|
isneeded = false;
|
|
33836
33859
|
isLogoRequired = false;
|
|
@@ -34253,6 +34276,7 @@ class InitialProcessComponent {
|
|
|
34253
34276
|
this.signaturePad.penColor = 'black';
|
|
34254
34277
|
this.signaturePad.on();
|
|
34255
34278
|
this.signaturePad.onEnd = () => {
|
|
34279
|
+
this.signatureDirty = true;
|
|
34256
34280
|
this.emitPoints();
|
|
34257
34281
|
};
|
|
34258
34282
|
this.applyPoints();
|
|
@@ -34287,6 +34311,7 @@ class InitialProcessComponent {
|
|
|
34287
34311
|
this.pointsChange.emit(points);
|
|
34288
34312
|
}
|
|
34289
34313
|
uploadSignImage(event) {
|
|
34314
|
+
this.signatureDirty = true;
|
|
34290
34315
|
this.fileData = event.currentTarget.files[0];
|
|
34291
34316
|
const reader = new FileReader();
|
|
34292
34317
|
reader.readAsDataURL(this.fileData);
|
|
@@ -34301,18 +34326,20 @@ class InitialProcessComponent {
|
|
|
34301
34326
|
uploadUserImage(event) {
|
|
34302
34327
|
this.isImageRequired = false;
|
|
34303
34328
|
this.fileDataUser = event.currentTarget.files[0];
|
|
34304
|
-
this.fileName = this.fileDataUser
|
|
34329
|
+
this.fileName = this.fileDataUser?.name ?? '';
|
|
34305
34330
|
const reader = new FileReader();
|
|
34306
|
-
|
|
34331
|
+
if (this.fileDataUser)
|
|
34332
|
+
reader.readAsDataURL(this.fileDataUser);
|
|
34307
34333
|
event.target.value = null;
|
|
34308
34334
|
}
|
|
34309
34335
|
uploadLogo(event) {
|
|
34310
34336
|
this.isLogoRequired = false;
|
|
34311
34337
|
this.fileDataLogo = event.currentTarget.files[0];
|
|
34312
34338
|
console.log(this.fileDataLogo);
|
|
34313
|
-
this.logoName = this.fileDataLogo
|
|
34339
|
+
this.logoName = this.fileDataLogo?.name;
|
|
34314
34340
|
const reader = new FileReader();
|
|
34315
|
-
|
|
34341
|
+
if (this.fileDataLogo)
|
|
34342
|
+
reader.readAsDataURL(this.fileDataLogo);
|
|
34316
34343
|
event.target.value = null;
|
|
34317
34344
|
this.isneeded = false;
|
|
34318
34345
|
}
|
|
@@ -34478,6 +34505,13 @@ class InitialProcessComponent {
|
|
|
34478
34505
|
}
|
|
34479
34506
|
}
|
|
34480
34507
|
async handleSignatureAndMoveToNext() {
|
|
34508
|
+
if (this.signatureFileId && !this.signatureDirty) {
|
|
34509
|
+
this.uploadError = null;
|
|
34510
|
+
this.showLoader = false;
|
|
34511
|
+
this.view = 2;
|
|
34512
|
+
this.saveState();
|
|
34513
|
+
return;
|
|
34514
|
+
}
|
|
34481
34515
|
const isSuccess = await this.saveSignatureAndIncrement();
|
|
34482
34516
|
if (isSuccess) {
|
|
34483
34517
|
this.uploadError = null;
|
|
@@ -34524,6 +34558,7 @@ class InitialProcessComponent {
|
|
|
34524
34558
|
this.user.signatureUrl = result.publicUrl;
|
|
34525
34559
|
this.signatureFileId = result.fileId;
|
|
34526
34560
|
this.signatureUrl = result.publicUrl;
|
|
34561
|
+
this.signatureDirty = false;
|
|
34527
34562
|
return true; // ✅ SUCCESS
|
|
34528
34563
|
}
|
|
34529
34564
|
}
|
|
@@ -34599,6 +34634,7 @@ class InitialProcessComponent {
|
|
|
34599
34634
|
this.logo.logoUrl = result.publicUrl;
|
|
34600
34635
|
this.logo.logoFileName = result.fileName;
|
|
34601
34636
|
this.logoName = result.fileName;
|
|
34637
|
+
this.fileDataLogo = null;
|
|
34602
34638
|
return true;
|
|
34603
34639
|
}
|
|
34604
34640
|
else {
|
|
@@ -34669,6 +34705,7 @@ class InitialProcessComponent {
|
|
|
34669
34705
|
if (result?.fileId) {
|
|
34670
34706
|
this.user.headshotFileId = result.fileId;
|
|
34671
34707
|
this.user.headshotUrl = result.publicUrl;
|
|
34708
|
+
this.fileDataUser = null;
|
|
34672
34709
|
this.saveInitial();
|
|
34673
34710
|
}
|
|
34674
34711
|
else {
|
|
@@ -35122,6 +35159,7 @@ class InitialProcessComponent {
|
|
|
35122
35159
|
this.signatureFileId = s.signatureFileId;
|
|
35123
35160
|
this.signatureUrl = s.signatureUrl;
|
|
35124
35161
|
this.signaturePadData.publicUrl = s.signatureUrl;
|
|
35162
|
+
this.signatureDirty = false;
|
|
35125
35163
|
}
|
|
35126
35164
|
if (s.selectedRoleValue)
|
|
35127
35165
|
this.selectedRoleValue = s.selectedRoleValue;
|
|
@@ -35174,11 +35212,11 @@ class InitialProcessComponent {
|
|
|
35174
35212
|
this.destroy$.complete();
|
|
35175
35213
|
}
|
|
35176
35214
|
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 });
|
|
35177
|
-
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 *ngIf=\"uploadError\" class=\"invalid-feedback d-block mt-1\">\r\n {{ uploadError }}\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\" (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]=\"14\"\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\" (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\" 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: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.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"] }] });
|
|
35215
|
+
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 *ngIf=\"uploadError\" class=\"invalid-feedback d-block mt-1\">\r\n {{ uploadError }}\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\" (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 (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]=\"14\"\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\" (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\" 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: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.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"] }] });
|
|
35178
35216
|
}
|
|
35179
35217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, decorators: [{
|
|
35180
35218
|
type: Component,
|
|
35181
|
-
args: [{ selector: 'app-initial-process', standalone: false, 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 *ngIf=\"uploadError\" class=\"invalid-feedback d-block mt-1\">\r\n {{ uploadError }}\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\" (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]=\"14\"\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\" (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\" 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"] }]
|
|
35219
|
+
args: [{ selector: 'app-initial-process', standalone: false, 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 *ngIf=\"uploadError\" class=\"invalid-feedback d-block mt-1\">\r\n {{ uploadError }}\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\" (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 (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]=\"14\"\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\" (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\" 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"] }]
|
|
35182
35220
|
}], ctorParameters: () => [{ type: i2.Router }, { type: UserDetailService }, { type: i8.FormBuilder }, { type: FileService }, { type: ProvidersService }, { type: RolesService }, { type: i7.BsModalService }, { type: ProviderContractorSubCategoryService }, { type: ProviderContractorSubCategoryService }, { type: i9.AuthService }, { type: i1$1.TokenService }, { type: i1$1.RoleContextService }, { type: i1$1.AuthLogoutService }, { type: undefined, decorators: [{
|
|
35183
35221
|
type: Inject,
|
|
35184
35222
|
args: [LIBRARY_CONFIG]
|